operation-applet/components/scan-info/scan-info.vue

<template>
	<view class="main">
		<view class="ExchangeStation">
			<view class="ExchangeTitle">
				<image src="../../static/p3.png"></image><span>换电站信息</span>
			</view>
			<view class="Exchange-context">
				<view class="list"><span>换电站编号</span><span>{{swapInfoDTO.stationCode}}</span></view>
				<view class="list"><span>换电站名称</span><span>{{swapInfoDTO.stationName}}</span></view>
				<view class="list"><span>可用电池数</span><span>{{swapInfoDTO.availablePoses.length}}</span></view>
			</view>
		</view>
		<view class="ExchangeStation">
			<view class="ExchangeTitle">
				<image src="../../static/p1.png"></image><span>车辆信息</span>
			</view>
			<view class="Exchange-context">
				<view class="list"><span>车牌号码</span><span>{{swapInfoDTO.plate || '—'}}</span></view>
			</view>
		</view>
		<view class="Exchange-tips">
			<view class="tips-top">
				<image src="../../static/p6.png"></image><span>提醒</span>
			</view>
			<view class="tips-bottom">
				<view>1：请停留在正确的换电位上</view>
				<view>2：请确认车辆已熄火</view>
				<view>3：换电遇到问题，请联系现场工作人员</view>
			</view>
		</view>
		<button v-if="!isShowNovice" type="primary" @click.once="swapSubmit" :disabled="BtnText!='确认换电'"
			class="submit">{{BtnText}}</button>
		<uni-popup ref="reScan" :mask-click="false">
			<view class="rescan">
				<image src="../../static/p7.png"></image>
				<view>{{getExchangeMsg}}</view>
				<view>请重新扫码换电！</view>
				<view><button type="primary" class="sanBtn" @click="reScan">重新扫码</button></view>
			</view>
		</uni-popup>
		<!-- 换电指南 -->
		<view class="novice-guidance" v-if="isShowNovice">
			<view class="shdow">
				<view class="novice-guidance-btn" @click="isShowNovice = false">我知道了</view>
				<image
					src="https://rl-zk-image.oss-cn-hangzhou.aliyuncs.com/image/2023-07/20230710102645wx_new_advice.png"
					class="novice-guidance-img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "scan-info",
		props: ['swapInfoDTO', 'sendSwapState', 'beginSwapresult', 'getExchangeMsg'],
		data() {
			return {
				percent: 0,
				currentAngle: null,
				angleTimer: null,
				stationCode: null,
				isShowNovice: false
			}
		},
		beforeCreate() {
			if (!uni.getStorageSync("token")) {
				uni.reLaunch({
					url: '/pages/public/login?item=scan'
				})
			}
		},
		computed: {
			BtnText() {
				if (this.swapInfoDTO.stationConn == 0) {
					return '站点未连接'
				}
				if (!this.swapInfoDTO.plate) {
					return '无车辆信息'
				}
				if (this.swapInfoDTO.availablePoses.length <= 0) {
					return '无可用电池'
				}
				if (this.swapInfoDTO.stationConn != 0 && this.swapInfoDTO.plate && this.swapInfoDTO.availablePoses.length >
					0) {
					return '确认换电'
				}
			}
		},
		mounted() {
			this.getUcenterData()
		},
		watch: {
			beginSwapresult(val) {
				if (val !== -1) {
					uni.hideLoading()
					if (val === 1) {
						this.$refs.reScan.open() //换电未启动重新扫码
					}
				}
			}
		},
		methods: {
			//获取换电次数
			getUcenterData() {
				this.$http.ucenterData().then(rs => {
					if (rs.code === 0) {
						this.isShowNovice = !rs.data.exchangeCnt
					} else {
						//this.$utils.msg(rs.msg);
					}
				}).catch(error => {
					//this.$utils.msg(error);
				});
			},
			//重新扫码
			reScan() {
				if (this.$storage.getJson("token")) {
					// let stationCode = 'ZL000003'
					// uni.redirectTo({
					// 	url: '/pages/powerchange/index?stationCode=' + stationCode
					// })

					let that = this
					uni.scanCode({
						success: function(res) {
							const url = res.result
							if (url.startsWith('https://zk.li-ai.com.cn/?stationCode=')) {
								const parts = url.split("=")
								if (parts.length === 2) {
									that.stationCode = parts[1]
									uni.redirectTo({
										url: '/pages/powerchange/index?stationCode=' + that.stationCode
									})
								} else {
									uni.redirectTo({
										url: '/pages/public/404?error=' + '站点编号错误!!'
									})
								}
							} else {
								uni.redirectTo({
									url: '/pages/public/404?error=' + '二维码链接错误!!'
								})
							}
						},
					});
				} else {
					uni.redirectTo({
						url: '/pages/public/login',
					});
				}
			},
			//发起换电请求
			swapSubmit() {
				let that = this
				uni.showLoading({
					title: '等待响应...',
				});
				if (uni.getStorageSync("token")) {
					let msg = {
						type: "startExchange",
						payLoad: {}
					}
					//触发发起换电事件
					this.$bus.$emit('sendMsg2', {
						data: JSON.stringify(msg)
					})
				} else {
					uni.reLaunch({
						url: '/pages/public/login?item=scan'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		height: 100vh;
	}

	.shdow {
		width: 100vw;
		height: 100vh;
		position: fixed;
		background: rgba(0, 0, 0, 0.6);
		left: 0;
		bottom: 0;
		overflow: hidden;

		.novice-guidance-btn {
			width: 200rpx;
			height: 88rpx;
			border-radius: 55rpx;
			opacity: 1;
			border: 2rpx solid #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin: auto;
			margin-top: 211rpx;
		}

		.novice-guidance-img {
			width: 694rpx;
			height: 703rpx;
			margin-left: 49rpx;
			margin-top: 120rpx;
		}
	}

	.rescan {
		width: 500rpx;
		height: 468rpx;
		border-radius: 15rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 131rpx;
			height: 148rpx;
			margin-top: 54rpx;
		}

		view:nth-child(2) {
			font-size: 34rpx;
			font-weight: 600;
			color: #1D2129;
			margin-top: 10rpx;
		}

		view:nth-child(3) {
			font-size: 30rpx;
			font-weight: 400;
			color: #4E5969;
			margin-top: 16rpx;
		}

		.sanBtn {
			width: 300rpx;
			height: 72rpx;
			margin-top: 40rpx;
			font-size: 32rpx;
			background-color: #58be6b;
			color: #fff;
			border-radius: 44rpx;
			line-height: 72rpx;
		}
	}

	.ExchangeStation {
		display: flex;
		padding: 0 30rpx;
		flex-direction: column;

		.ExchangeTitle {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #86909C;
			margin-top: 20rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				margin: 0rpx 10rpx;
			}
		}

		.Exchange-context {
			width: 100%;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(226, 226, 226, 0.5);
			border-radius: 24rpx;
			padding: 0rpx 30rpx;
			box-sizing: border-box;
			background: #fff;

			.list {
				display: flex;
				height: 108rpx;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E5E6EB;
				font-weight: 400;
				color: #1D2129;
				font-size: 32rpx;
				justify-content: space-between;
				align-items: center;
			}

			:last-child {
				box-shadow: none;
			}
		}
	}

	.Exchange-tips {
		margin-top: 38rpx;
		display: flex;
		flex-direction: column;
		padding: 0 30rpx;

		.tips-top {
			display: flex;
			font-weight: 400;
			color: #1D2129;
			font-size: 26rpx;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin: 0 10rpx;
			}
		}

		.tips-bottom {
			font-weight: 400;
			color: #86909C;
			font-size: 26rpx;
			line-height: 40rpx;
			margin-left: 10rpx;
			margin-top: 10rpx;
		}
	}

	.battery-info {
		display: flex;
		justify-content: space-between;
		padding: 0 80rpx;
		text-align: center;
		line-height: 36rpx;

		view>view:first-child {
			font-weight: bold;
		}

		view>view:last-child {
			color: #939da7;
			font-size: 26rpx;
		}
	}

	.carinfo {
		padding-left: 45rpx;
		width: 100%;
		box-sizing: border-box;
		margin-top: 90rpx;

		.battery-list {
			display: flex;
			width: 100%;
			margin-top: 36rpx;

			.icon {
				width: 55rpx;
				padding-top: 5rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.info {
				display: flex;
				flex: 1;
				border-bottom: #e5e5e5 solid 1px;
				justify-content: space-between;
				font-size: 28rpx;
				padding-bottom: 36rpx;
				padding-right: 40rpx;
				box-sizing: border-box;

				.word {
					color: #86909c;
				}

				.number {
					color: #333333;
					font-weight: bold;
				}
			}
		}
	}

	.submit {
		width: 600rpx;
		height: 88rpx;
		margin: 35rpx auto;
		font-size: 36rpx;
		background-color: #58be6b;
		color: #fff;
		border-radius: 44rpx;
	}
</style>