|
|
@@ -0,0 +1,347 @@
|
|
|
+<template>
|
|
|
+ <view >
|
|
|
+ <ujp-navbar title="绑定家充桩"></ujp-navbar>
|
|
|
+
|
|
|
+ <view class="main1" v-if="current==0">
|
|
|
+ <view class="steps" >
|
|
|
+ <u-steps :list="numList" mode="number" :current="current" un-active-color="#999999"></u-steps>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="content" v-if="current==0" >
|
|
|
+ <view class="infosGroup">
|
|
|
+ <view class="item">
|
|
|
+ <view class="itemTitle">
|
|
|
+ <span>*</span>绑定识别号
|
|
|
+ </view>
|
|
|
+ <view class="itemValue">
|
|
|
+ <input type="text" placeholder="请填写绑定识别号" />
|
|
|
+ </view>
|
|
|
+ <view class="itemIcon">
|
|
|
+ <img src="../../assets/img/riLine-qr-scan-2-line@3x.png" alt="" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infosGroup">
|
|
|
+ <view class="item">
|
|
|
+ <view class="itemTitle">
|
|
|
+ <span>*</span>桩主姓名
|
|
|
+ </view>
|
|
|
+ <view class="itemValue">
|
|
|
+ <input type="text" placeholder="请填写桩主真实姓名" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="itemTitle">
|
|
|
+ <span>*</span>联系电话
|
|
|
+ </view>
|
|
|
+ <view class="itemValue">
|
|
|
+ <input type="text" placeholder="请填写桩主联系电话" />
|
|
|
+ </view>
|
|
|
+ <view class="itemIcon">
|
|
|
+ <img src="../../assets/img/md-cancel Copy@3x.png" alt="" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infosGroup">
|
|
|
+ <view class="item">
|
|
|
+ <view class="itemTitle">
|
|
|
+ <span>*</span>电桩名称
|
|
|
+ </view>
|
|
|
+ <view class="itemValue">
|
|
|
+ <input type="text" placeholder="如:沙市张三的个人桩" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="itemTitle">
|
|
|
+ <span>*</span>电桩类型
|
|
|
+ </view>
|
|
|
+ <view class="itemValue">
|
|
|
+ 交流慢充
|
|
|
+ </view>
|
|
|
+ <view class="itemIcon">
|
|
|
+ <u-icon name="arrow-right" color="#b3b3b3"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="itemTitle">
|
|
|
+ <span>*</span>电桩位置
|
|
|
+ </view>
|
|
|
+ <view class="itemValue">
|
|
|
+ 湖北省荆州市沙市区江津东路附155号
|
|
|
+ </view>
|
|
|
+ <view class="itemIcon">
|
|
|
+
|
|
|
+ <img src="../../assets/img/md-my_location@3x.png" alt="" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="itemTitle">
|
|
|
+ 车位号
|
|
|
+ </view>
|
|
|
+ <view class="itemValue">
|
|
|
+ <input type="text" placeholder="请填写车位号(选填)" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="itemTitle">
|
|
|
+ 位置描述
|
|
|
+ </view>
|
|
|
+ <view class="itemValue">
|
|
|
+ <input type="text" placeholder="请详细描述电桩位置信息" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="pictures" >
|
|
|
+ <view class="picturesTitle">
|
|
|
+ <span>*</span>充电桩照片
|
|
|
+ </view>
|
|
|
+ <view class="picturesValue">
|
|
|
+ <u-upload :action="action" :file-list="fileList"></u-upload>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="bottom" >
|
|
|
+ <view class="button" @click="current=1">
|
|
|
+ 提交申请
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="main2" v-if="current==1||current==2" >
|
|
|
+ <view class="steps">
|
|
|
+ <u-steps :list="numList" mode="number" :current="current" un-active-color="#999999"></u-steps>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <view class="content1" v-if="current==1" >
|
|
|
+ <img src="../../assets/img/antFill-clock-circle@3x.png" alt="" />
|
|
|
+ <view class="text1">
|
|
|
+ 等待审核中
|
|
|
+ </view>
|
|
|
+ <view class="text2">
|
|
|
+ 绑定申请已提交，等待后台审核完成建站
|
|
|
+ </view>
|
|
|
+ <view class="button">
|
|
|
+ 返 回
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content1" v-if="current==2" >
|
|
|
+ <img src="../../assets/img/antFill-check-circle@3x.png" alt="" />
|
|
|
+ <view class="text1">
|
|
|
+ 完成建站
|
|
|
+ </view>
|
|
|
+ <view class="text2">
|
|
|
+ 充电桩安装成功，快来体验充电吧~
|
|
|
+ </view>
|
|
|
+ <view class="button button2">
|
|
|
+ 前往充电
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ current:0,
|
|
|
+ numList: [{
|
|
|
+ name: '绑定家桩'
|
|
|
+ }, {
|
|
|
+ name: '等待审核'
|
|
|
+ }, {
|
|
|
+ name: '完成建站'
|
|
|
+ }],
|
|
|
+ action: 'http://www.example.com/upload',
|
|
|
+ fileList: [{
|
|
|
+ url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+
|
|
|
+ .steps {
|
|
|
+ padding: 32rpx;
|
|
|
+ height: 160rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .main1{
|
|
|
+ padding-bottom: 220rpx;
|
|
|
+ }
|
|
|
+ .main2{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: calc(100vh - 88rpx);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .content1{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 80rpx;
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ img{
|
|
|
+ width: 128rpx;
|
|
|
+ height: 128rpx;
|
|
|
+ }
|
|
|
+ .text1{
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 40rpx;
|
|
|
+ margin-top: 42rpx;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ }
|
|
|
+ .text2{
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ .button{
|
|
|
+ margin-top: 48rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(24, 144, 255, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ .button2{
|
|
|
+ background: linear-gradient(134.04deg, rgba(0,185,98,1) 42.39%,rgba(22,119,255,1) 98.58%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .infosGroup {
|
|
|
+ padding: 0 32rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 28rpx 0;
|
|
|
+ border-bottom: 1px solid #E5E7EA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item:last-of-type {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .itemTitle {
|
|
|
+ color: #999999;
|
|
|
+ min-width: 140rpx;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #FF3A3A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemValue {
|
|
|
+ width: 420rpx;
|
|
|
+ margin-left: 36rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+
|
|
|
+ uni-input {
|
|
|
+ color: #777777;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .uni-input-placeholder {
|
|
|
+ color: #acacac;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemIcon {
|
|
|
+ margin-left: auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pictures {
|
|
|
+ padding: 26rpx 0 32rpx;
|
|
|
+
|
|
|
+ .picturesTitle {
|
|
|
+ color: #999999;
|
|
|
+ min-width: 140rpx;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #FF3A3A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .picturesValue {
|
|
|
+ margin-top: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .bottom{
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ z-index: 999;
|
|
|
+ .button{
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(0, 185, 98, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 18px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</style>
|
