ebike-ui/ebike-maintenance/pages/warehouse/qrcodereplace/qrcodereplace.vue

<template>
	<view class="container">
		<uni-section title="旧车辆编号" type="line">
			<uni-forms ref="oldBikeCodeForm" :rules="ebikeInfoRules" :modelValue="ebikeInfo">
				<uni-forms-item label="车辆编号" name="oldBikeCode">
					<bikeCodeScan @scan-change="oldBikeCodeScanChange" :codeValue="ebikeInfo.oldBikeCode" />
				</uni-forms-item>
				<uni-forms-item label="中控编号" name="ecuCode">
					<uni-easyinput v-model="ebikeInfo.ecuCode" placeholder="-" />
				</uni-forms-item>
				<uni-forms-item label="电压" name="voltage">
					<uni-easyinput v-model="ebikeInfo.voltage" placeholder="-" />
				</uni-forms-item>
				<uni-forms-item label="坐标" name="coordinate">
					<uni-easyinput v-model="ebikeInfo.coordinate" placeholder="-" />
				</uni-forms-item>
				<uni-forms-item label="定位时间" name="positionAt">
					<uni-easyinput v-model="ebikeInfo.positionAt" placeholder="-" />
				</uni-forms-item>
			</uni-forms>
		</uni-section>
		<uni-section title="新车辆编号" type="line">
			<uni-forms ref="newBikeCodeForm" :rules="ebikeEcuInfoRules" :modelValue="ebikeInfo">
				<uni-forms-item label="车辆编号" name="newBikeCode">
					<bikeCodeScan @scan-change="newBikeCodeScanChange" :codeValue="ebikeInfo.newBikeCode" />
				</uni-forms-item><strong></strong>
				<uni-forms-item label="编号状态" name="codeState">
					<uni-easyinput v-model="ebikeInfo.codeState" placeholder="-" />
				</uni-forms-item>
				<uni-forms-item label="旧车辆码处理" required name="oldBikeCOdeSave">
					<radio-group>
						<label class="radio">
							<radio value="notSave" checked="true" />不保留旧车辆码
						</label>
						<label class="radio">
							<radio value="save" />保留旧车辆码
						</label>
					</radio-group>
				</uni-forms-item>
			</uni-forms>
		</uni-section>
		<!-- <view style="position: absolute;bottom: 10rpx; width: 100%;">
			<button type="primary" @click="unUpdate">确定更换</button>
		</view> -->
	</view>
	<view class="nav-panel">
		<c-uni-goods-nav :fill="true" :options="[]" :buttonGroup="navButtonGroup" @buttonClick="navButtonClick" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import * as api from '@/utils/api.js';
	import dayjs from 'dayjs';
	const ebikeInfo = ref({
		bikeId: '',
		oldBikeCode: '',
		ecuCode: '',
		voltage: '',
		positionAt: '',
		newBikeCode: '',
		codeState: '',
		oldBikeCOdeSave: 'notSave',
		ecuId: '',
		ecuSn: ''
	});

	const oldBikeCodeScanChange = (data) => {
		api.callEbikeInfo("getBikeINfoData?bikeCode=" + data).then((res) => {
			ebikeInfo.value.ecuCode = res.data.ecuCode;
			ebikeInfo.value.bikeId = res.data.bikeId;
			ebikeInfo.value.ecuId = res.data.ecuId;
			ebikeInfo.value.ecuSn = res.data.ecuSn;
			const ecuSn = res.data.ecuSn;
			api.callCoreApi("gps?ecuId=" + res.data.ecuId, {}, 'get').then((res) => {
				api.callCoreApi("gpsMsg" + "?ecuSn=" + ecuSn, {}, 'get').then((res) => {
					ebikeInfo.value.positionAt = dayjs(res.data.timestamp * 1000).format(
						'YYYY-MM-DD HH:mm:ss');
					ebikeInfo.value.coordinate = "东经:" + res.data.longitude + "°,北纬:" +
						res.data.latitude + "°";
					ebikeInfo.value.voltage = res.data.voltage + " mv";
				})
			});
		});
		ebikeInfo.value.oldBikeCode = data;
	};

	const newBikeCodeScanChange = (data) => {
		ebikeInfo.value.newBikeCode = data;
	};
	const unUpdate = () => {
		uni.showModal({
			title: '提示',
			content: '确认更换二维码吗？',
			success: function(res) {
				if (res.confirm) {
					api.callEbikeInfo("updateBikeQRCode", ebikeInfo.value).then((res) => {
						ebikeInfo.value.ecuCode = res.data.ecuCode;
						ebikeInfo.value.bikeId = res.data.bikeId;
					});
				}
			}
		});
	}
	
	const navButtonGroup = reactive([{
		text: '确定更换',
		backgroundColor: '#0078D4',
		color: '#fff',
		disable: false
	}]);
	
	const navButtonClick = (e) =>{
		const index = e.index;
		if(index == 0){
			unUpdate();
		}
	}
</script>

<style>
	.container {
		padding: 15px;
		background-color: #fff;
	}

	/* 全局样式 */
	.uni-forms .uni-forms-item__label {
		width: 100px !important;
		/* 或者使用其他单位 */
	}
	
	.nav-panel{
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		padding-bottom: 10px;
		z-index: 999;
		background-color:#fff;
	}
</style>