sunliwei/lanan-repair
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

我的车辆

Browse Source
This commit is contained in:
zhaotianfeng 2024-09-24 19:46:55 +08:00
parent ce148f695b
commit 11d95dd1b4
2 changed files with 536 additions and 264 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

557
pages/myCar/carDetail.vue
View File

@ -1,186 +1,419 @@
<template> <template>
<view class="container"> <view class="container">
<VNavigationBar title="车辆详情" background-color="#fff" title-color="#333"></VNavigationBar> <VNavigationBar title="车辆详情" background-color="#fff" title-color="#333"></VNavigationBar>
<view class="body"> <view class="body">
<view class="card"> <view class="card">
<view class="formItem"> <view class="formItem">
<text class="formLabel">车辆照片</text> <text class="formLabel">车牌号</text>
<image class="carImg" src="" mode="aspectFill"></image> <input type="text" placeholder="请输入文本" v-model="car.licenseNumber"/>
</view> </view>
<view class="formItem"> <view class="formItem">
<text class="formLabel">车牌号</text> <text class="formLabel">品牌</text>
<text class="formValue">鲁A 781NB</text> <picker @change="brandChange" :value="brandIndex" :range="brandNamesComputed">
</view> <view class="uni-input">{{ brandNamesComputed[brandIndex] }}</view>
<view class="formItem"> </picker>
<text class="formLabel">车辆持有人</text> </view>
<text class="formValue">魏书豪</text> <view class="formItem">
</view> <text class="formLabel">型号</text>
<view class="formItem"> <input type="text" placeholder="请输入文本" v-model="car.carModelInput"/>
<text class="formLabel">持有人电话</text> </view>
<text class="formValue">15726576890</text> <view class="formItem">
</view> <text class="formLabel">车辆类别</text>
</view> <picker @change="categoryChange" :value="categoryIndex" :range="categoryNamesComputed">
<view class="card"> <view class="uni-input">{{ categoryNamesComputed[categoryIndex] }}</view>
<view class="formItem1"> </picker>
<view class="labelVal"> </view>
<text class="formLabel">车辆年检时间</text> <view class="formItem">
<text class="formValue">2024年</text> <text class="formLabel">车辆性质</text>
</view> <picker @change="natureChange" :value="natureIndex" :range="natureNamesComputed">
<image class="formImg" src="" mode="aspectFill"></image> <view class="uni-input">{{ natureNamesComputed[natureIndex] }}</view>
</view> </picker>
<view class="formItem1"> </view>
<view class="labelVal"> <view class="formItem">
<text class="formLabel">车辆保险时间</text> <text class="formLabel">注册日期</text>
<text class="formValue">2024年</text> <picker
</view> mode="date"
<image class="formImg" src="" mode="aspectFill"></image> :value="car.carRegisterDate"
</view> start="2020-01-01"
</view> end="2030-12-31"
</view> @change="bindDateChange1">
<view class="footer"> <view style="margin-left: 10rpx">
<view class="btnItem delete"> {{ car.carRegisterDate}}
<uni-icons type="trash" color="#F92C2C"></uni-icons> </view>
删除 </picker>
</view> </view>
<view class="line"></view> <!-- <view class="formItem">-->
<view class="btnItem edit"> <!-- <text class="formLabel">车辆图片</text>-->
<uni-icons type="compose" color="#0174F6"></uni-icons>
编辑 <!-- <u-upload-->
</view> <!-- :action="uploadUrl"-->
</view> <!-- :headers="headers"-->
</view> <!-- :file-list="fileList"-->
<!-- :max-count="3"-->
<!-- :show-upload-btn="true"-->
<!-- @after-read="afterRead"-->
<!-- @delete="deleteFile"-->
<!-- @success="uploadSuccess"-->
<!-- @fail="uploadFail"-->
<!-- ></u-upload>-->
<!-- </view>-->
</view>
</view>
<view class="footer">
<view class="btnItem edit" @click="submit" v-if="bo2">
确定
</view>
<view class="btnItem delete" v-if="bo1" @click="del">
<uni-icons type="trash" color="#F92C2C"></uni-icons>
删除
</view>
<view class="line" v-if="bo1"></view>
<view class="btnItem edit" v-if="bo1" @click="update">
<uni-icons type="compose" color="#0174F6"></uni-icons>
编辑
</view>
</view>
</view>
</template> </template>
<script> <script>
import VNavigationBar from '@/components/VNavigationBar.vue' import VNavigationBar from '@/components/VNavigationBar.vue';
export default { import request from "../../utils/request";
components: {
VNavigationBar,
},
data() {
return {
} export default {
}, components: {
methods: { VNavigationBar
},
data() {
return {
} // uploadUrl: 'https://your-server.com/upload',
} // headers: {},
// fileList: [],
car: {
// 车牌号
licenseNumber: '',
// 型号
carModelInput: '',
// 品牌id
carBrand:'',
// 车辆类别 字典字段
carCategory:'',
// 车辆性质 字典字段
carNature:'',
// 注册日期
carRegisterDate:'2024-09-24',
},
bo1: false,
bo2: true,
categoryIndex: 0,
natureIndex: 0,
brandIndex: 0,
categoryList: [],
natureList: [],
brandList: []
};
},
// 计算属性，将对象数组转换为字符串数组
computed: {
// 计算属性，将对象数组转换为字符串数组 picker 标签的 range 属性 只能绑定数组
brandNamesComputed() {
return this.brandList.map(item => item.brandName);
},
natureNamesComputed() {
return this.natureList.map(item => item.label);
},
categoryNamesComputed() {
return this.categoryList.map(item => item.label);
}
},
onLoad(options) {
// 如果是修改
if (options.car) {
// 有数据为编辑 或 删除
this.car = JSON.parse(decodeURIComponent(options.car));
console.log('初始化页面数据', this.car)
this.bo1 = true;
this.bo2 = false;
} else {
// 没有数据 需要赋值一下初始化
this.bo1 = false;
this.bo2 = true;
}
// 初始化
this.getCategoryList();
this.getNatureList();
this.getBrandList();
},
methods: {
// afterRead(file) {
// console.log('文件读取完成');
// },
// deleteFile(file, index) {
// console.log('删除文件');
// this.fileList.splice(index, 1);
// },
// uploadSuccess(res, file) {
// console.log('上传成功', res);
// },
// uploadFail(error, file) {
// console.log('上传失败', error);
// },
// 品牌选择事件
brandChange(event) {
// 下标
const newIndex = event.detail.value;
this.brandIndex = newIndex;
//
this.car.carBrand = this.brandList[newIndex].id;
},
// 车辆类别选择事件
categoryChange(event) {
const newIndex = event.detail.value;
this.categoryIndex = newIndex;
//
this.car.carCategory = this.categoryList[newIndex].value;
},
// 车辆性质选择事件
natureChange(event) {
const newIndex = event.detail.value;
this.natureIndex = newIndex;
//
this.car.carNature = this.natureList[newIndex].value;
},
// 日期选择 事件
bindDateChange1(e) {
this.car.carRegisterDate = e.target.value; // 更新选择的日期到data中的date变量
},
// 查询下拉 车辆类别
async getCategoryList() {
let res = await request({
url: '/admin-api/system/dict-data/type?type=car_category',
method: 'get',
noTenantId: false
})
if (res.code == 200) {
console.log('车辆类别', res.data)
this.categoryList = res.data;
if (this.bo2 == true){
this.car.carCategory = res.data[0].value;
}
else {
// 如果是修改 遍历当前集合 将index 同步
this.categoryList.forEach((item, index) => {
if (item.value == this.car.carCategory) {
this.categoryIndex = index;
}
})
}
}
},
// 查询下拉 车辆性质
async getNatureList() {
let res = await request({
url: '/admin-api/system/dict-data/type?type=car_nature',
method: 'get',
noTenantId: false
})
if (res.code == 200) {
console.log('车辆性质', res.data)
this.natureList = res.data;
if (this.bo2 == true){
this.car.carNature = res.data[0].value;
}
else {
// 如果是修改 遍历当前集合 将index 同步
this.natureList.forEach((item, index) => {
if (item.value == this.car.carNature) {
this.natureIndex = index;
}
})
}
}
},
// 查询下拉 车辆品牌
async getBrandList() {
let res = await request({
url: '/userClient/base/carBrand/list',
method: 'get',
})
if (res.code == 200) {
console.log('车辆品牌', res.data)
this.brandList = res.data;
if (this.bo2 == true){
this.car.carBrand= res.data[0].id;
}else {
// 如果是修改 遍历当前集合 将index 同步
this.brandList.forEach((item, index) => {
if (item.id == this.car.carBrand) {
this.brandIndex = index;
}
})
}
}
},
// 新增
async submit() {
let res = await request({
url: '/userClient/base/myCar/create',
method: 'POST',
data: this.car,
})
if (res.code == 200) {
// 新增成功返回上一个页面
uni.navigateBack();
}
},
//删除
async del() {
let res = await request({
url: `/userClient/base/myCar/delete?id=${this.car.id}`,
method: 'Delete',
})
if (res.code == 200) {
// 新增成功返回上一个页面 并且上一个页面重新初始化 获取数据 怎么写
uni.navigateBack();
}
},
// 修改
async update() {
let res = await request({
url: `/userClient/base/myCar/update`,
data: this.car,
method: 'Put',
})
if (res.code == 200) {
}
}
}
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container {
box-sizing: border-box;
height: 100%;
background-color: #F3F5F7;
display: flex;
flex-direction: column;
.body {
flex: 1;
height: 0;
overflow: auto;
.card { .container {
margin: 20rpx 0; box-sizing: border-box;
padding: 0 32rpx; height: 100%;
background-color: #fff; background-color: #f3f5f7;
display: flex;
flex-direction: column;
.formItem { .body {
box-sizing: border-box; flex: 1;
width: 686rpx; height: 0;
margin: 0 auto; overflow: auto;
padding: 40rpx;
display: flex; .card {
align-items: center; margin: 20rpx 0;
justify-content: space-between; padding: 0 32rpx;
column-gap: 20rpx; background-color: #fff;
border-bottom: 1rpx solid #DDDDDD; .formItem {
&:last-child { box-sizing: border-box;
border: none; width: 686rpx;
} margin: 0 auto;
} padding: 40rpx;
.labelVal {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 20rpx;
}
.formItem1 {
box-sizing: border-box;
width: 686rpx;
margin: 0 auto;
padding: 40rpx;
border-bottom: 1rpx solid #DDDDDD;
&:last-child {
border: none;
}
}
.formLabel { display: flex;
font-size: 32rpx; align-items: center;
color: #333333; justify-content: space-between;
} column-gap: 20rpx;
.formValue { border-bottom: 1rpx solid #dddddd;
flex: 1;
width: 0;
text-align: right;
font-size: 32rpx;
color: #999999;
}
.carImg {
width: 240rpx;
height: 150rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
background-color: #efefef;
}
.formImg {
margin-top: 30rpx;
width: 240rpx;
height: 150rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
background-color: #efefef;
}
}
} &:last-child {
border: none;
}
}
.footer { .labelVal {
background: #FFFFFF; display: flex;
display: flex; align-items: center;
align-items: center; justify-content: space-between;
column-gap: 20rpx;
}
.line {
width: 2rpx;
background-color: #DDDDDD;
}
.btnItem { .formLabel {
flex: 1; font-size: 32rpx;
width: 0; color: #333333;
padding: 34rpx 0; }
display: flex; .formValue {
align-items: center; flex: 1;
justify-content: center; width: 0;
text-align: right;
font-size: 32rpx;
color: #999999;
}
font-size: 32rpx; .carImg {
width: 240rpx;
height: 150rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
background-color: #efefef;
}
&.delete { .formImg {
color: #F92C2C; margin-top: 30rpx;
} width: 240rpx;
height: 150rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx;
background-color: #efefef;
}
}
}
&.edit { .footer {
color: #0174F6; background: #ffffff;
} display: flex;
} align-items: center;
}
} .line {
</style> width: 2rpx;
background-color: #dddddd;
}
.btnItem {
flex: 1;
width: 0;
padding: 34rpx 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
&.delete {
color: #f92c2c;
}
&.edit {
color: #0174f6;
}
}
}
}
</style>

243
pages/myCar/myCar.vue
View File

@ -1,118 +1,157 @@
<template> <template>
<view class="container"> <view class="container">
<VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="#fff" title="我的车辆"> <VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="#fff" title="我的车辆"></VNavigationBar>
</VNavigationBar> <view class="body">
<view class="body"> <scroll-view style="height: 100%" scroll-y="true">
<scroll-view style="height: 100%;" scroll-y="true"> <view class="carList">
<view class="carList"> <view v-for="(item, index) in carList" :key="index" class="carItem" @click="gotoDetail(item)">
<view v-for="(item, index) in carList" :key="index" class="carItem" @click="gotoDetail(item)"> <image class="carImage" :src="config.baseImageUrl+item.logoImg" mode="aspectFit"></image>
<image class="carImage" src="" mode="aspectFit"></image> <view class="carInfo">
<view class="carInfo"> <view class="carNum">{{ item.licenseNumber}}</view>
<view class="carNum">{{ item.carNum }}</view> <view class="name">品牌：{{ item.brandName }}</view>
<view class="name">车辆持有人：{{ item.name }}</view> <view class="phone">型号：{{ item.carModelInput }}</view>
<view class="phone">持有人电话：{{ item.phone }}</view> </view>
</view> </view>
</view> </view>
</view> </scroll-view>
</scroll-view> </view>
</view> <view class="addCarBtn" @click="gotoDetail()">
<view class="addCarBtn"> <uni-icons color="#0174F6" type="plusempty"></uni-icons>
<uni-icons color="#0174F6" type="plusempty"></uni-icons> 添加车辆
添加车辆 </view>
</view> </view>
</view>
</template> </template>
<script> <script>
import VNavigationBar from '@/components/VNavigationBar.vue' import VNavigationBar from '@/components/VNavigationBar.vue';
export default { import request from "../../utils/request";
components: { import config from "config";
VNavigationBar
}, export default {
data() { computed: {
return { config() {
carList: [{ return config
carNum: '鲁A 781NB', }
name: '魏书豪', },
phone: '15726786903', components: {
image: '' VNavigationBar
}] },
} data() {
}, return {
methods: { carList: [
gotoDetail() { {
uni.navigateTo({ carNum: '鲁A 781NB',
url: '/pages/myCar/carDetail' name: '魏书豪',
}) phone: '15726786903',
} image: ''
} }
} ]
};
},
onLoad() {
// 页面初始化
this.getList();
},
onShow() {
// 页面显示时执行初始化操作
this.getList();
},
methods: {
getList(){
request({
url: '/userClient/base/myCar/get',
method: 'GET',
}).then(res => {
console.log(res);
this.carList = res.data;
console.log('图片路径', config.baseImageUrl+this.carList[0].logoImg)
})
},
gotoDetail(item) {
if (item){
uni.navigateTo({
url: `/pages/myCar/carDetail?car=${encodeURIComponent(JSON.stringify(item))}`
});
}
else {
uni.navigateTo({
url: '/pages/myCar/carDetail'
});
}
}
}
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.container { .container {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
.body { .body {
flex: 1; flex: 1;
height: 0; height: 0;
background-color: #F3F5F7; background-color: #f3f5f7;
} }
.carList { .carList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.carItem { .carItem {
box-sizing: border-box; box-sizing: border-box;
width: 686rpx; width: 686rpx;
margin: 20rpx auto; margin: 20rpx auto;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 30rpx; padding: 30rpx;
background: #FFFFFF; background: #ffffff;
border-radius: 12rpx 12rpx 12rpx 12rpx; border-radius: 12rpx 12rpx 12rpx 12rpx;
column-gap: 20rpx; column-gap: 20rpx;
} }
.carImage { .carImage {
background-color: #eee; background-color: #eee;
width: 240rpx; width: 240rpx;
height: 150rpx; height: 150rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx; border-radius: 8rpx 8rpx 8rpx 8rpx;
} }
.carNum { .carNum {
font-weight: bold; font-weight: bold;
font-size: 36rpx; font-size: 36rpx;
color: #333333; color: #333333;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.name, .name,
.phone { .phone {
font-weight: 500; font-weight: 500;
font-size: 28rpx; font-size: 28rpx;
color: #858BA0; color: #858ba0;
} }
.addCarBtn { .addCarBtn {
padding: 34rpx 0; padding: 34rpx 0;
background: #FFFFFF; background: #ffffff;
border-radius: 0rpx 0rpx 0rpx 0rpx; border-radius: 0rpx 0rpx 0rpx 0rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
column-gap: 12rpx; column-gap: 12rpx;
font-weight: 500; font-weight: 500;
font-size: 32rpx; font-size: 32rpx;
color: #0174F6; color: #0174f6;
} }
} }
</style> </style>