index.vue
3.6 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<template>
<view class="app-container">
<up-navbar placeholder :leftIconSize="0" bgColor="transparent" />
<view class="car_list">
<view class="title">车辆管理</view>
<carCard v-for="carItem in carList" :key="carItem.id" :carInfo="carItem">
<template #header>
<navTop :carNum="carItem.licensePlateNumber" />
</template>
<template #center>
<centerLine :leftContent="carItem.customizeVehicleBrand || carItem.vehicleBrand" fontColor="#999" :rightContent="carItem.customizeVehicleModel || carItem.vehicleModel"></centerLine>
</template>
<template #footer>
<view style="color: #3680FE;font-size: 24rpx;" @click="lookCarInfo(carItem.id)">查看详情</view>
</template>
</carCard>
<view class="addBtn" @click="addCarInfo">登记车辆保险信息</view>
</view>
<up-popup :show="userStore.isShowAdver" mode="center" :safeAreaInsetBottom="false" round="20" @close="userStore.isShowAdver = false">
<view class="notice">
<view class="notice_title">{{ advertisingTitle }}</view>
<view class="notice_content">
<up-parse :content="advertisingContent"></up-parse>
</view>
<view class="btn" @click="confirm">确认</view>
</view>
</up-popup>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getUserCarInfo, getNotice } from '@/api/user.js'
import carCard from '@/components/carCard.vue';
import centerLine from '@/components/centerLine.vue';
import navTop from '@/components/navTop.vue';
import useUserStore from '@/store/modules/user';
const carList = ref([])
const advertisingTitle = ref('')
const advertisingContent = ref('')
const userStore = useUserStore()
const queryParams = reactive({
pageNum: 1,
pageSize: 10
})
const getMyList = async () => {
const { data } = await getUserCarInfo(queryParams)
carList.value = data.records
}
const addCarInfo = () => {
uni.navigateTo({
url: '/pages/carDetail/carDetail'
})
}
const lookCarInfo = (id) => {
uni.navigateTo({
url: `/pages/carDetail/carDetail?carInfoId=${id}`
})
}
const confirm = () => {
userStore.isShowAdver = false
}
// 获取广告详情
const getNoticeDetail = async () => {
const { data } = await getNotice(10)
advertisingContent.value = data.noticeContent
advertisingTitle.value = data.noticeTitle
}
getNoticeDetail()
onShow(() => {
getMyList()
})
</script>
<style lang="scss" scoped>
.app-container{
width: 100%;
height: 100vh;
padding: 0 30rpx;
background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-index_20240925113012A004.png') no-repeat;
background-size: 100% 100%;
overflow: hidden;
.car_list{
display: flex;
flex-direction: column;
gap: 20rpx;
.title{
font-size: 32rpx;
line-height: 42rpx;
color: #fff;
}
.addBtn{
width: 100%;
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 28rpx;
color: #3d3d3d;
font-weight: 500;
background: #FFFFFF;
box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(10,22,44,0.06);
border-radius: 20rpx;
}
}
}
.notice{
position: relative;
width: 690rpx;
height: 600rpx;
background: #FFFFFF;
padding: 40rpx 30rpx 0;
border-radius: 20rpx;
overflow: hidden;
.notice_title{
text-align: center;
font-size: 36rpx;
line-height: 48rpx;
color: #3D3D3D;
margin-bottom: 40rpx;
}
.notice_content{
font-size: 28rpx;
line-height: 38rpx;
color: #999;
}
.btn{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
line-height: 100rpx;
text-align: center;
height: 100rpx;
color: #3680FE;
font-size: 28rpx;
border-top: 2rpx solid #eee;
}
}
</style>