我的车辆
This commit is contained in:
zhaotianfeng
parent
ce148f695b
commit
11d95dd1b4
@ -3,47 +3,74 @@
|
||||
<VNavigationBar title="车辆详情" background-color="#fff" title-color="#333"></VNavigationBar>
|
||||
<view class="body">
|
||||
<view class="card">
|
||||
<view class="formItem">
|
||||
<text class="formLabel">车辆照片</text>
|
||||
<image class="carImg" src="" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<text class="formLabel">车牌号</text>
|
||||
<text class="formValue">鲁A 781NB</text>
|
||||
<input type="text" placeholder="请输入文本" v-model="car.licenseNumber"/>
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<text class="formLabel">车辆持有人</text>
|
||||
<text class="formValue">魏书豪</text>
|
||||
<text class="formLabel">品牌</text>
|
||||
<picker @change="brandChange" :value="brandIndex" :range="brandNamesComputed">
|
||||
<view class="uni-input">{{ brandNamesComputed[brandIndex] }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<text class="formLabel">持有人电话</text>
|
||||
<text class="formValue">15726576890</text>
|
||||
<text class="formLabel">型号</text>
|
||||
<input type="text" placeholder="请输入文本" v-model="car.carModelInput"/>
|
||||
</view>
|
||||
<view class="formItem">
|
||||
<text class="formLabel">车辆类别</text>
|
||||
<picker @change="categoryChange" :value="categoryIndex" :range="categoryNamesComputed">
|
||||
<view class="uni-input">{{ categoryNamesComputed[categoryIndex] }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="card">
|
||||
<view class="formItem1">
|
||||
<view class="labelVal">
|
||||
<text class="formLabel">车辆年检时间</text>
|
||||
<text class="formValue">2024年</text>
|
||||
<view class="formItem">
|
||||
<text class="formLabel">车辆性质</text>
|
||||
<picker @change="natureChange" :value="natureIndex" :range="natureNamesComputed">
|
||||
<view class="uni-input">{{ natureNamesComputed[natureIndex] }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<image class="formImg" src="" mode="aspectFill"></image>
|
||||
<view class="formItem">
|
||||
<text class="formLabel">注册日期</text>
|
||||
<picker
|
||||
mode="date"
|
||||
:value="car.carRegisterDate"
|
||||
start="2020-01-01"
|
||||
end="2030-12-31"
|
||||
@change="bindDateChange1">
|
||||
<view style="margin-left: 10rpx">
|
||||
{{ car.carRegisterDate}}
|
||||
</view>
|
||||
<view class="formItem1">
|
||||
<view class="labelVal">
|
||||
<text class="formLabel">车辆保险时间</text>
|
||||
<text class="formValue">2024年</text>
|
||||
</view>
|
||||
<image class="formImg" src="" mode="aspectFill"></image>
|
||||
</picker>
|
||||
</view>
|
||||
<!-- <view class="formItem">-->
|
||||
<!-- <text class="formLabel">车辆图片</text>-->
|
||||
|
||||
<!-- <u-upload-->
|
||||
<!-- :action="uploadUrl"-->
|
||||
<!-- :headers="headers"-->
|
||||
<!-- :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 delete">
|
||||
<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"></view>
|
||||
<view class="btnItem edit">
|
||||
<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>
|
||||
@ -52,27 +79,243 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VNavigationBar from '@/components/VNavigationBar.vue'
|
||||
export default {
|
||||
import VNavigationBar from '@/components/VNavigationBar.vue';
|
||||
import request from "../../utils/request";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VNavigationBar,
|
||||
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>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
|
||||
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
background-color: #F3F5F7;
|
||||
background-color: #f3f5f7;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -97,7 +340,8 @@
|
||||
justify-content: space-between;
|
||||
column-gap: 20rpx;
|
||||
|
||||
border-bottom: 1rpx solid #DDDDDD;
|
||||
border-bottom: 1rpx solid #dddddd;
|
||||
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
@ -110,16 +354,6 @@
|
||||
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 {
|
||||
font-size: 32rpx;
|
||||
@ -149,17 +383,16 @@
|
||||
background-color: #efefef;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.line {
|
||||
width: 2rpx;
|
||||
background-color: #DDDDDD;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
.btnItem {
|
||||
@ -174,13 +407,13 @@
|
||||
font-size: 32rpx;
|
||||
|
||||
&.delete {
|
||||
color: #F92C2C;
|
||||
color: #f92c2c;
|
||||
}
|
||||
|
||||
&.edit {
|
||||
color: #0174F6;
|
||||
}
|
||||
color: #0174f6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +1,21 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="#fff" title="我的车辆">
|
||||
</VNavigationBar>
|
||||
<VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="#fff" title="我的车辆"></VNavigationBar>
|
||||
<view class="body">
|
||||
<scroll-view style="height: 100%;" scroll-y="true">
|
||||
<scroll-view style="height: 100%" scroll-y="true">
|
||||
<view class="carList">
|
||||
<view v-for="(item, index) in carList" :key="index" class="carItem" @click="gotoDetail(item)">
|
||||
<image class="carImage" src="" mode="aspectFit"></image>
|
||||
<image class="carImage" :src="config.baseImageUrl+item.logoImg" mode="aspectFit"></image>
|
||||
<view class="carInfo">
|
||||
<view class="carNum">{{ item.carNum }}</view>
|
||||
<view class="name">车辆持有人：{{ item.name }}</view>
|
||||
<view class="phone">持有人电话：{{ item.phone }}</view>
|
||||
<view class="carNum">{{ item.licenseNumber}}</view>
|
||||
<view class="name">品牌：{{ item.brandName }}</view>
|
||||
<view class="phone">型号：{{ item.carModelInput }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="addCarBtn">
|
||||
<view class="addCarBtn" @click="gotoDetail()">
|
||||
<uni-icons color="#0174F6" type="plusempty"></uni-icons>
|
||||
添加车辆
|
||||
</view>
|
||||
@ -24,33 +23,73 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VNavigationBar from '@/components/VNavigationBar.vue'
|
||||
export default {
|
||||
import VNavigationBar from '@/components/VNavigationBar.vue';
|
||||
import request from "../../utils/request";
|
||||
import config from "config";
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
config() {
|
||||
return config
|
||||
}
|
||||
},
|
||||
components: {
|
||||
VNavigationBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
carList: [{
|
||||
carList: [
|
||||
{
|
||||
carNum: '鲁A 781NB',
|
||||
name: '魏书豪',
|
||||
phone: '15726786903',
|
||||
image: ''
|
||||
}]
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
// 页面初始化
|
||||
this.getList();
|
||||
},
|
||||
onShow() {
|
||||
// 页面显示时执行初始化操作
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
gotoDetail() {
|
||||
|
||||
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>
|
||||
|
||||
<style scoped lang="less">
|
||||
.container {
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -59,7 +98,7 @@
|
||||
.body {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
background-color: #F3F5F7;
|
||||
background-color: #f3f5f7;
|
||||
}
|
||||
|
||||
.carList {
|
||||
@ -74,7 +113,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
column-gap: 20rpx;
|
||||
}
|
||||
@ -97,12 +136,12 @@
|
||||
.phone {
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #858BA0;
|
||||
color: #858ba0;
|
||||
}
|
||||
|
||||
.addCarBtn {
|
||||
padding: 34rpx 0;
|
||||
background: #FFFFFF;
|
||||
background: #ffffff;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
|
||||
display: flex;
|
||||
@ -112,7 +151,7 @@
|
||||
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #0174F6;
|
||||
}
|
||||
color: #0174f6;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user