123 lines
2.8 KiB
Vue
123 lines
2.8 KiB
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 || 0 }}km</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>
|