ebike-ui/ebike-user/components/bike-info/bike-info.vue

<template>
	<div style="padding: 20px 10px 10px 10px;background-color: white;">
		<div style="position:absolute;right:0px;top: -7px;" @click="$emit('close')">
			<uni-icons custom-prefix="iconfont" type="icon-ebikeguanbi" size="20" color="#777777" />
		</div>
		<div class="divRow" style="justify-content: space-between !important;">
			<div style="font-size:14px;font-weight: bolder;">
				{{data.bikeCode}}
			</div>
			<div>
				<label>状态：</label>
				<label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikexuanzhong" :color="color"
						size="16" /></label>
				<label>正常</label>
			</div>
		</div>
		<div class="divRow">
			<div class="lbTitle">剩余电量：</div>
			<div>
				<label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikeelectricity-full"
						:color="color" size="16" /></label>
				<label>{{data.dl}}</label>
			</div>
		</div>
		<div class="divRow">
			<div class="lbTitle">可骑行距离：</div>
			<div>
				<label class="lbImg"><uni-icons custom-prefix="iconfont" type="icon-ebikeditu2" :color="color"
						size="16" /></label>
				<label>{{data.jl}}</label>
			</div>

		</div>
		<div style="margin-top: 30px;margin-bottom: 30px;">
			<label style="margin-right: 15px;"><uni-icons custom-prefix="iconfont" type="icon-ebikejinggao"
					color="#FF7200" size="12" /></label>
			<label style="font-size: 12px;">安全骑行，遵守交通规则</label>
		</div>
		<!-- <div>
			<div class="divBtn" @click="$emit('close')">关闭</div>
		</div> -->
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue';
	import {
		showModelMessage
	} from "@/utils/tools.js";
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	const props = defineProps(["bikedata"]);
	const methods = defineEmits(["close"])
	const color = ref("#61D145");
	const data = ref({});

	function loadData(bikedata) {
		const {
			bikeCode,
			status,
			mileage,
			soc
		} = bikedata;
		data.value = {
			bikeCode,
			zt: status == "正常" ? "1" : "0",
			dl: soc + "%",
			jl: mileage
		}
	}
	onMounted(() => {
		loadData(props.bikedata)
	})
	watch(() => props.bikedata, (newValue, oldValue) => {
		if (newValue.ecuSn != oldValue.ecuSn) {
			loadData(newValue)
		}
	}, {
		deep: true
	});
</script>

<style scoped>
	.divRow {
		font-size: 12px;
		color: #000;
		line-height: 25px;
		display: flex;
	}

	.lbTitle {
		text-align: right;
		width: 80px;
	}

	.lbImg {
		margin-right: 5px;
	}
</style>