jp-charge/pagesFinance/user/confirmBinding.vue

<template>
	<view>
		<ujp-navbar title="确认绑定"></ujp-navbar>
		<view class="equipment-infos">
			<view class="item">
				<view class="title">
					设备编号
				</view>
				<view class="content">
					{{obj1.deviceNo}}
				</view>
			</view>
		
			<view class="item">
				<view class="title">
					设备类型
				</view>
				<view class="content">
					{{obj1.interfaceType}}{{obj1.chargingType}}
				</view>
			</view>
			<view class="item" v-if="obj1.chargingPower">
				<view class="title">
					设备功率
				</view>
				<view class="content">
					{{obj1.chargingPower}}kW
				</view>
			</view>
			
		</view>
		
		<view class="equipment-infos">
			<view class="item">
				<view class="title">
					桩主姓名
				</view>
				<view class="content">
					{{obj2.contacts}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					联系电话
				</view>
				<view class="content">
					{{obj2.contactPhone}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					安装地址
				</view>
				<view class="content">
					{{obj2.address}}
				</view>
			</view>
			<view class="item" v-if="objlist.length>1">
				<view class="title">
					绑定站点
				</view>
				<view class="content" style="color: #275cbf;"  @click="isswitchshow=true" >
					{{obj2.name}}
				</view>
			</view>
		</view>
		<u-picker mode="selector" v-model="isswitchshow" :range="objlist" range-key="name" :default-selector="columnsindex" @confirm="switchBtn" ></u-picker>
		
		<!-- <view class="item">
			<view class="title">
				设备名称
			</view>
			<view class="content">
				{{obj1.name}}
			</view>
		</view> -->
		<view class="equipment-infos">
			<view class="item">
				<view class="title">
					<text>*</text>站点名称
				</view>
				<view class="content" style="color: #acacac;">
					
				<u-input v-model="stationName"
				 :placeholder="obj2.name"
				 @focus="focus(0)"
				 type="text" :border="false" />

				</view>
			</view>
			<view class="item">
				<view class="title">
					<text>*</text>车位号
				</view>
				<view class="content" style="color: #acacac;">
					
				<u-input v-model="deviceName"
				 @focus="focus(1)"
				 :placeholder="obj1.name"
				 type="text" :border="false" />
			
				</view>
			</view>
		</view>
		<button class="btn" @click="submit">确认绑定并激活</button>
		<view  style="text-align: center; margin-top: 10px;color: #275cbf;"
		 @click="gotoUrl('pagesFinance/news/index?code=AZSM')" >查看安装说明文档</view>
	</view>
</template>

<script>
	import * as API from '@/apis/finance.js'
	
	export default {
		data() {
			return {
				id:"",
				obj1:{},obj2:{},
				stationName:"",
				deviceName:"",
				objlist:[],
				isswitchshow:false,
				columnsindex:[0],
			}
		},
		onLoad(op) {
			if(op.id){
				this.id=op.id
				this.getInfo()
			}
		},
		onReady() {
			
		},
		methods: {
			focus(k){
				if(k==0){
					if(!this.stationName){
						this.stationName=this.obj2.name;
					}
				
				}
				if(k==1){
					if(!this.deviceName){
						this.deviceName=this.obj1.name;
					}
				}
			},
			switchBtn(e){
				this.columnsindex=e;
				
				this.obj2=this.objlist[e[0]]
			
				//
			},
			submit(){
				if(!this.stationName){
					this.stationName=this.obj2.name;
				}
				if(!this.deviceName){
					this.deviceName=this.obj1.name;
				}
			
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.bindCategoryDevice({
					deviceNo:this.id,
					stationName:this.stationName,
					deviceName:this.deviceName,
					stationId:this.obj2.id
				}).then((res) => {
					//this.obj = res.data
				
				
					uni.hideLoading()
					uni.redirectTo({
						url:"/pagesFinance/user/activateResults"
					})
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
				
			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findByDeviceNo({
					
					deviceNo:this.id
				}).then((res) => {
					this.obj1 = res.data.chargingDevice
					this.objlist= res.data.chargingStationList;
					this.obj2 = res.data.chargingStationList[0]
					
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f3f4f7;
	}
	.equipment-infos{
		margin-bottom: 12px;
		background-color: #fff;
		.item:last-of-type{
			border-bottom: none;
		}
		.item{
			padding: 11px 0;
			line-height: 22px;
			display: flex;
			
			margin-left: 32rpx;
			border-bottom: solid 1px #C2C2C2;
			font-size: 16px;
			.title{
				width: 80px;
			
				color: #777777;
				text{
					color: #ee3138;
				}
			}
			.content{
				flex: 1;
				color: rgba(16, 16, 16, 1);
			}
		}
	}
 .btn{
	 width: 91.4%;
	 line-height: 44px;
	 border-radius: 8px;
	 background-color: rgba(24, 90, 198, 1);
	 color: rgba(255, 255, 255, 1);
	 font-size: 16px;
 }
</style>