add:车辆信息-管理

manifest.json

@@ -52,7 +52,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx008c60533388527a",
+        "appid" : "wx214b4f8de36a0181",
         "setting" : {
             "urlCheck" : false,
             "checkSiteMap" : false,

pages.json

@@ -1035,6 +1035,12 @@
             "navigationBarTitleText": "设置-车辆信息-变更"
           }
         },
+		{
+		  "path": "setting/car-information/car-manage",
+		  "style": {
+		    "navigationBarTitleText": "设置-车辆信息-管理"
+		  }
+		},
         {
           "path": "setting/car-information/car-card",
           "style": {

personal-center/setting/car-information/car-manage.vue

@@ -0,0 +1,221 @@
+<template>
+	<view class="main" :style="{height: height+'px'}">
+		<view class="item-row">
+			<view class="item-left">
+				<view class="title">行驶证正面</view>
+				<view class="desc">补传行驶证正面</view>
+				<view class="flag"><text>拍摄示例</text> </view>
+			</view>
+			<view class="item-right" @click="chooseImage(1)">
+				<view class="empty-node"></view>
+				<image :src="state.headstockImg ?? defHeadstockImg" :data-url="state.headstockImg ?? defHeadstockImg">
+				</image>
+			</view>
+		</view>
+		<view class="item-row">
+			<view class="item-left">
+				<view class="title">行驶证副面</view>
+				<view class="desc">补传行驶证副面</view>
+				<view class="flag"><text>拍摄示例</text> </view>
+			</view>
+			<view class="item-right" @click="chooseImage(2)">
+				<view class="empty-node"></view>
+				<image :src="state.installImg ?? defInstallImg"></image>
+			</view>
+		</view>
+		<view class="btn">
+			<submit-button @submit="saveHandle" title="保存"></submit-button>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import {
+		reactive
+	} from "vue";
+	import {
+		msg,
+		navTo
+	} from '@/utils/utils';
+	import {
+		fileURL
+	} from "@/datas/fileURL.js";
+	const height = uni.getSystemInfoSync().windowHeight
+	const defHeadstockImg = `${fileURL}image/applyCard/car-zhu.png`;
+	const defInstallImg = `${fileURL}image/applyCard/car-fu.png`;
+
+	const state = reactive({
+		headstockImg: null,
+		installImg: null
+	});
+
+	//选择图片
+	const chooseImage = (type: number) => {
+		uni.chooseImage({
+			count: 1,
+			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+			//sourceType: ['album','camera'], 
+			success: function(res) {
+				console.log(res.tempFilePaths);
+				if (type === 1) {
+					state.headstockImg = res.tempFilePaths[0];
+				} else {
+					state.installImg = res.tempFilePaths[0];
+				}
+			}
+		});
+	}
+
+	//下一步
+	const saveHandle = () => {
+		if (!state.headstockImg || !state.installImg) {
+			msg('请按照要求上传图片！');
+			return;
+		}
+		msg('保存成功')
+	}
+</script>
+
+<style>
+	page {
+		background: #F3F3F3;
+	}
+</style>
+<style lang="scss" scoped>
+	.main {
+		overflow: hidden;
+
+		.item-row {
+			display: flex;
+			justify-content: space-between;
+			margin-top: 30rpx;
+			background: white;
+			padding: 30rpx;
+			border-radius: 20rpx;
+			box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
+			margin: 30rpx;
+
+			.item-left {
+				.title {
+					font-size: 34rpx;
+					color: #333;
+					font-weight: bold;
+				}
+
+				.desc {
+					font-size: 24rpx;
+					color: #999;
+					margin: 10rpx 0;
+				}
+
+				.flag {
+					width: 110rpx;
+					height: 45rpx;
+					line-height: 42rpx;
+					color: #0A8F8A;
+					margin-top: 16rpx;
+					border-radius: 6rpx;
+					text-align: center;
+					font-size: 20rpx;
+					background: #D9F8F1;
+				}
+			}
+
+			.item-right {
+				width: 295rpx;
+				height: 188rpx;
+				position: relative;
+
+				image {
+					position: relative;
+					z-index: 10;
+					width: 100%;
+					height: 188rpx;
+				}
+
+				&::before {
+					content: '';
+					position: absolute;
+					width: 22rpx;
+					height: 22rpx;
+					border: 4rpx solid #21BEB1;
+					border-bottom: none;
+					border-right: none;
+					z-index: 0;
+					left: -4rpx;
+					top: -4rpx;
+				}
+
+				&::after {
+					content: '';
+					position: absolute;
+					width: 22rpx;
+					height: 22rpx;
+					border: 4rpx solid #21BEB1;
+					border-top: none;
+					border-right: none;
+					z-index: 0;
+					left: -4rpx;
+					bottom: -4rpx;
+				}
+			}
+
+			.empty-node {
+				position: absolute;
+				z-index: 0;
+				width: 100%;
+				height: 100%;
+
+				&::before {
+					content: '';
+					position: absolute;
+					width: 22rpx;
+					height: 22rpx;
+					border: 4rpx solid #21BEB1;
+					border-left: none;
+					border-bottom: none;
+					z-index: 0;
+					right: -4rpx;
+					top: -4rpx;
+				}
+
+				&::after {
+					content: '';
+					position: absolute;
+					width: 22rpx;
+					height: 22rpx;
+					border: 4rpx solid #21BEB1;
+					border-top: none;
+					border-left: none;
+					z-index: 0;
+					right: -4rpx;
+					bottom: -4rpx;
+				}
+			}
+		}
+
+		.hint {
+			display: flex;
+			flex-direction: row;
+			justify-content: center;
+			font-size: 26rpx;
+			color: #666666;
+			padding: 0px 30rpx;
+			margin-top: 60rpx;
+
+			.icon {
+				width: 36rpx;
+				height: 36rpx;
+				margin-right: 10rpx;
+			}
+
+			view {
+				width: calc(100% - 36rpx);
+			}
+		}
+
+		.btn {
+			margin: 470rpx 40rpx 30rpx;
+		}
+	}
+</style>

personal-center/setting/car-information/corrections.vue

@@ -18,7 +18,7 @@
 		{
 			title:'车辆信息管理',
 			columns:[
-				{title:'车辆信息变更',path:'car-information/car-change',login:true},
+				{title:'车辆信息变更',path:'car-information/car-manage',login:true},
 				{title:'补传车辆证件',path:'car-information/car-card',login:true},
 			]
 		},