chuangte_bike_newxcx/page_shanghu/yunwei/gongdanxq.vue

<template>
	<view class="page">
		<u-navbar title="换电详情" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
        <view class="box">
        	<view class="name" @click="btnxq">
        		车牌：{{xqobj.deviceVehicleNum == null ? '--' : xqobj.deviceVehicleNum}} <text>查看详情</text>
        	</view>
			<view class="xx">
				<view class="">
					SN：{{xqobj.deviceSn == null ? '--' : xqobj.deviceSn }}
				</view>
				<view class="">
					MAC：{{xqobj.deviceMac == null ? '--' : xqobj.deviceMac}}
				</view>
			</view>
			<view class="xx">
				<view class="">
					车型：{{xqobj.modelName == null ? '--' : xqobj.modelName}}
				</view>
			</view>
			<view class="gongdan">
				换电工单：<text>{{xqobj.no == null ? '--' : xqobj.no}}</text>
			</view>
			<view class="gongdan">
				工单生成时间：<text>{{xqobj.createTime == null ? '--' : xqobj.createTime}}</text>
			</view>
			<view class="gongdan">
				开始时间：<text>{{xqobj.receiveTime == null ? '--' : xqobj.receiveTime}}</text>
			</view>
			<view class="gongdan">
				结束时间：<text>{{xqobj.finishTime == null ? '--' : xqobj.finishTime}}</text>
			</view>
			<view class="gongdan">
				换电前电量：<text>{{xqobj.createPower == null ? '--' : xqobj.createPower}}</text>
			</view>
			<view class="gongdan">
				换电人员：<text>{{xqobj.receiveUserName == null ? '--' : xqobj.receiveUserName}}</text>
			</view>
			<view class="gongdan">
				备注：<text>{{xqobj.finishRemark == null ? '--' : xqobj.finishRemark}}</text>
			</view>
        </view>
		<view class="anniu" @click="btnwc" v-if="xqobj.status == 2">
			换电
		</view>
        <!-- 完成输入备注 -->
        <view class="wctc" v-if="beizhuflag">
        	<view class="name">
        		  请输入备注
        	</view>
        	<textarea name="" v-model="finishRemark" id="" cols="30" rows="10"></textarea>
        	<view class="anniu" style="background-color: transparent;">
        		  <view class="" @click="btnqx">
        		  	  取消
        		  </view>
        	 <view class="" @click="btnqdwc">
        	 	  完成
        	 </view>
        	</view>
        </view>
        <view class="mask" v-if="beizhuflag"></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				hdid:'',
				xqobj:{},
				finishRemark:'',
				beizhuflag:false,
			}
		},
		onLoad(e) {
           this.hdid = e.id
		   this.getxq()
		},
		methods: {
			// 点击跳转到车辆详情
			btnxq(){
				uni.navigateTo({
					url:'/page_shanghu/guanli/device_detail?id=' + this.xqobj.deviceId
				})
			},
			// 请求换电详情
			getxq() {
				this.$u.get(`/bst/powerWork/${this.hdid}`).then(res => {
					if (res.code == 200) {
						this.xqobj = res.data
					}
				})
			},
			// 点击换电弹出弹窗
			btnwc(){
				this.beizhuflag = true
			},
			// 点击取消换电
			btnqx(){
				this.beizhuflag = false
			},
			//点击确定完成
			btnqdwc(){
				let data = {
					id:this.hdid,
					finishRemark:this.finishRemark
				}
				this.$u.put(`/bst/powerWork/complete`,data).then(res =>{
					if(res.code == 200){
						uni.showToast({
							title: '操作完成',
							icon: 'success',
							duration: 2000
						})
						this.xqobj.status = 3
						this.beizhuflag = false
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.anniu{
		width: 680rpx;
		height: 92rpx;
		background: #4297F3;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: auto;
		margin-top: 32rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 92rpx;
		border-radius: 20rpx;
	}
	.mask{
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		left: 0;
	}
	.wctc{
		width: 610rpx;
		height: 720rpx;
		background: #FFFFFF;
		padding: 36rpx 42rpx;
		box-sizing: border-box;
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
		border-radius: 10rpx;
		.name{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
		}
		textarea{
			width: 526rpx;
			height: 396rpx;
			background: #F7F7F7;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 34rpx;
			padding: 16rpx 36rpx;
			box-sizing: border-box;
		}
		.anniu{
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 60rpx;
			view{
				width: 45%;
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
				background-color: #4C97E7;
				color: #fff;
				font-size: 36rpx;
				border-radius: 50rpx;
			}
		}
	}
	.box{
		width: 680rpx;
		max-height: 1610rpx;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 10rpx -6rpx #000;
		margin: auto;
		margin-top: 50rpx;
		border-radius: 20rpx;
		padding: 32rpx;
		box-sizing: border-box;
		.gongdan{
			font-size: 32rpx;
			color: #808080;
			margin-top: 20rpx;
			text{
				color: #3D3D3D;
				margin-left: 20rpx;
			}
		}
		.xx{
			margin-top: 28rpx;
			display: flex;
			view{
				font-size: 24rpx;
				color: #7C7C7C;
				margin-right: 50rpx;
			}
		}
		.name{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			text{
				font-size: 26rpx;
				margin-left: 10rpx;
				color: #4297F3;
			}
		}
	}
	page {
		background: #fff;
	}
    .map {
    	position: relative;
    	width: 750rpx;
    	height: 752rpx;
    }
</style>