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 || 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>