CarInfo.vue
1.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!-- 车辆信息 -->
<template>
<!-- end -->
<view class="carInfo">
<image class="carImage" src="@/static/sj_demo_carImg.jpg" mode=""></image>
<view class="info">
<view class="line">
<text class="tit">车辆编号</text><text>{{data.id}}</text>
</view>
<view class="line">
<text class="tit">车辆号牌</text><text>{{data.licensePlate}}</text>
</view>
<view class="line">
<text class="tit">车型</text><text>{{data.truckType}}</text>
</view>
<view class="line">
<text class="tit">载重</text><text>{{data.allowableLoad}}吨</text>
</view>
</view>
</view>
<!-- end -->
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getCarInfo } from '@/pages/api/user.js';
// ------定义变量------
const data = ref({});
// 生命周期 获取车辆信息
onMounted(async () => {
await getCarInfo()
.then(res => {
if (res.code == 200) {
if (res.data == null){
return false
}
data.value = res.data
} else {
return uni.showToast({
title: data.msg,
duration: 1000,
icon: 'none'
});
}
})
.catch(err => {});
})
</script>
<style lang="scss" scoped>
.carInfo{
padding: 30rpx;
.carImage{
width: 100%;
border-radius: 16rpx;
}
.info{
background: var(--neutral-color-white);
border-radius: 20rpx;
padding:40rpx;
margin-top: 24rpx;
font-size: var(--font-size-14);
.line{
display: flex;
justify-content: space-between;
line-height: 80rpx;
color: var(--neutral-color-main);
.tit{
color: var(--neutral-color-font);
}
}
}
}
</style>