From 11d95dd1b4a10618712b21afa3f5d46537e95d1d Mon Sep 17 00:00:00 2001
From: zhaotianfeng <12345678>
Date: Tue, 24 Sep 2024 19:46:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E8=BD=A6=E8=BE=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/myCar/carDetail.vue | 557 +++++++++++++++++++++++++++-----------
 pages/myCar/myCar.vue     | 243 ++++++++++-------
 2 files changed, 536 insertions(+), 264 deletions(-)

diff --git a/pages/myCar/carDetail.vue b/pages/myCar/carDetail.vue
index 5ffe17d..f821c6d 100644
--- a/pages/myCar/carDetail.vue
+++ b/pages/myCar/carDetail.vue
@@ -1,186 +1,419 @@
 <template>
-	<view class="container">
-		<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>
-				</view>
-				<view class="formItem">
-					<text class="formLabel">车辆持有人</text>
-					<text class="formValue">魏书豪</text>
-				</view>
-				<view class="formItem">
-					<text class="formLabel">持有人电话</text>
-					<text class="formValue">15726576890</text>
-				</view>
-			</view>
-			<view class="card">
-				<view class="formItem1">
-					<view class="labelVal">
-						<text class="formLabel">车辆年检时间</text>
-						<text class="formValue">2024年</text>
-					</view>
-					<image class="formImg" src="" mode="aspectFill"></image>
-				</view>
-				<view class="formItem1">
-					<view class="labelVal">
-						<text class="formLabel">车辆保险时间</text>
-						<text class="formValue">2024年</text>
-					</view>
-					<image class="formImg" src="" mode="aspectFill"></image>
-				</view>
-			</view>
-		</view>
-		<view class="footer">
-			<view class="btnItem delete">
-				<uni-icons type="trash" color="#F92C2C"></uni-icons>
-				删除
-			</view>
-			<view class="line"></view>
-			<view class="btnItem edit">
-				<uni-icons type="compose" color="#0174F6"></uni-icons>
-				编辑
-			</view>
-		</view>
-	</view>
+  <view class="container">
+    <VNavigationBar title="车辆详情" background-color="#fff" title-color="#333"></VNavigationBar>
+    <view class="body">
+      <view class="card">
+        <view class="formItem">
+          <text class="formLabel">车牌号</text>
+          <input type="text" placeholder="请输入文本" v-model="car.licenseNumber"/>
+        </view>
+        <view class="formItem">
+          <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>
+          <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="formItem">
+          <text class="formLabel">车辆性质</text>
+          <picker @change="natureChange" :value="natureIndex" :range="natureNamesComputed">
+            <view class="uni-input">{{ natureNamesComputed[natureIndex] }}</view>
+          </picker>
+        </view>
+        <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>
+          </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 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>
 
 <script>
-	import VNavigationBar from '@/components/VNavigationBar.vue'
-	export default {
-		components: {
-			VNavigationBar,
-		},
-		data() {
-			return {
+import VNavigationBar from '@/components/VNavigationBar.vue';
+import request from "../../utils/request";
 
-			}
-		},
-		methods: {
+export default {
+  components: {
+    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 {
-		box-sizing: border-box;
-		height: 100%;
-		background-color: #F3F5F7;
-		display: flex;
-		flex-direction: column;
 
-		.body {
-			flex: 1;
-			height: 0;
-			overflow: auto;
 
-			.card {
-				margin: 20rpx 0;
-				padding: 0 32rpx;
-				background-color: #fff;
+.container {
+  box-sizing: border-box;
+  height: 100%;
+  background-color: #f3f5f7;
+  display: flex;
+  flex-direction: column;
 
-				.formItem {
-					box-sizing: border-box;
-					width: 686rpx;
-					margin: 0 auto;
-					padding: 40rpx;
+  .body {
+    flex: 1;
+    height: 0;
+    overflow: auto;
 
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					column-gap: 20rpx;
+    .card {
+      margin: 20rpx 0;
+      padding: 0 32rpx;
+      background-color: #fff;
 
-					border-bottom: 1rpx solid #DDDDDD;
-					&:last-child {
-						border: none;
-					}
-				}
-				
-				.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;
-					}
-				}
+      .formItem {
+        box-sizing: border-box;
+        width: 686rpx;
+        margin: 0 auto;
+        padding: 40rpx;
 
-				.formLabel {
-					font-size: 32rpx;
-					color: #333333;
-				}
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        column-gap: 20rpx;
 
-				.formValue {
-					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;
-				}
-			}
+        border-bottom: 1rpx solid #dddddd;
 
-		}
+        &:last-child {
+          border: none;
+        }
+      }
 
-		.footer {
-			background: #FFFFFF;
-			display: flex;
-			align-items: center;
+      .labelVal {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        column-gap: 20rpx;
+      }
 
-			.line {
-				width: 2rpx;
-				background-color: #DDDDDD;
-			}
 
-			.btnItem {
-				flex: 1;
-				width: 0;
-				padding: 34rpx 0;
+      .formLabel {
+        font-size: 32rpx;
+        color: #333333;
+      }
 
-				display: flex;
-				align-items: center;
-				justify-content: center;
+      .formValue {
+        flex: 1;
+        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 {
-					color: #F92C2C;
-				}
+      .formImg {
+        margin-top: 30rpx;
+        width: 240rpx;
+        height: 150rpx;
+        border-radius: 12rpx 12rpx 12rpx 12rpx;
+        background-color: #efefef;
+      }
+    }
+  }
 
-				&.edit {
-					color: #0174F6;
-				}
-			}
-		}
-	}
-</style>
\ No newline at end of file
+  .footer {
+    background: #ffffff;
+    display: flex;
+    align-items: center;
+
+    .line {
+      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>
diff --git a/pages/myCar/myCar.vue b/pages/myCar/myCar.vue
index 7c7105a..7882622 100644
--- a/pages/myCar/myCar.vue
+++ b/pages/myCar/myCar.vue
@@ -1,118 +1,157 @@
 <template>
-	<view class="container">
-		<VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="#fff" title="我的车辆">
-		</VNavigationBar>
-		<view class="body">
-			<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>
-						<view class="carInfo">
-							<view class="carNum">{{ item.carNum }}</view>
-							<view class="name">车辆持有人：{{ item.name }}</view>
-							<view class="phone">持有人电话：{{ item.phone }}</view>
-						</view>
-					</view>
-				</view>
-			</scroll-view>
-		</view>
-		<view class="addCarBtn">
-			<uni-icons color="#0174F6" type="plusempty"></uni-icons>
-			添加车辆
-		</view>
-	</view>
+  <view class="container">
+    <VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="#fff" title="我的车辆"></VNavigationBar>
+    <view class="body">
+      <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="config.baseImageUrl+item.logoImg"  mode="aspectFit"></image>
+            <view class="carInfo">
+              <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" @click="gotoDetail()">
+      <uni-icons color="#0174F6" type="plusempty"></uni-icons>
+      添加车辆
+    </view>
+  </view>
 </template>
 
 <script>
-	import VNavigationBar from '@/components/VNavigationBar.vue'
-	export default {
-		components: {
-			VNavigationBar
-		},
-		data() {
-			return {
-				carList: [{
-					carNum: '鲁A 781NB',
-					name: '魏书豪',
-					phone: '15726786903',
-					image: ''
-				}]
-			}
-		},
-		methods: {
-			gotoDetail() {
-				uni.navigateTo({
-					url: '/pages/myCar/carDetail'
-				})
-			}
-		}
-	}
+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: [
+        {
+          carNum: '鲁A 781NB',
+          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>
 
 <style scoped lang="less">
-	.container {
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		padding-bottom: env(safe-area-inset-bottom);
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: env(safe-area-inset-bottom);
 
-		.body {
-			flex: 1;
-			height: 0;
-			background-color: #F3F5F7;
-		}
+  .body {
+    flex: 1;
+    height: 0;
+    background-color: #f3f5f7;
+  }
 
-		.carList {
-			display: flex;
-			flex-direction: column;
-		}
+  .carList {
+    display: flex;
+    flex-direction: column;
+  }
 
-		.carItem {
-			box-sizing: border-box;
-			width: 686rpx;
-			margin: 20rpx auto;
-			display: flex;
-			align-items: center;
-			padding: 30rpx;
-			background: #FFFFFF;
-			border-radius: 12rpx 12rpx 12rpx 12rpx;
-			column-gap: 20rpx;
-		}
+  .carItem {
+    box-sizing: border-box;
+    width: 686rpx;
+    margin: 20rpx auto;
+    display: flex;
+    align-items: center;
+    padding: 30rpx;
+    background: #ffffff;
+    border-radius: 12rpx 12rpx 12rpx 12rpx;
+    column-gap: 20rpx;
+  }
 
-		.carImage {
-			background-color: #eee;
-			width: 240rpx;
-			height: 150rpx;
-			border-radius: 8rpx 8rpx 8rpx 8rpx;
-		}
+  .carImage {
+    background-color: #eee;
+    width: 240rpx;
+    height: 150rpx;
+    border-radius: 8rpx 8rpx 8rpx 8rpx;
+  }
 
-		.carNum {
-			font-weight: bold;
-			font-size: 36rpx;
-			color: #333333;
-			margin-bottom: 20rpx;
-		}
+  .carNum {
+    font-weight: bold;
+    font-size: 36rpx;
+    color: #333333;
+    margin-bottom: 20rpx;
+  }
 
-		.name,
-		.phone {
-			font-weight: 500;
-			font-size: 28rpx;
-			color: #858BA0;
-		}
+  .name,
+  .phone {
+    font-weight: 500;
+    font-size: 28rpx;
+    color: #858ba0;
+  }
 
-		.addCarBtn {
-			padding: 34rpx 0;
-			background: #FFFFFF;
-			border-radius: 0rpx 0rpx 0rpx 0rpx;
+  .addCarBtn {
+    padding: 34rpx 0;
+    background: #ffffff;
+    border-radius: 0rpx 0rpx 0rpx 0rpx;
 
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			column-gap: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    column-gap: 12rpx;
 
-			font-weight: 500;
-			font-size: 32rpx;
-			color: #0174F6;
-		}
-	}
-</style>
\ No newline at end of file
+    font-weight: 500;
+    font-size: 32rpx;
+    color: #0174f6;
+  }
+}
+</style>