zhapp/pages/index/index.vue

<template>
	<view class="page">
		<image src="/static/image/indexback.png" mode="" style="width: 100%;height: 622rpx;"></image>
		<view class="dept dis a-c j-c" @click="deptSelect">
			<text class="mr-1">{{deptradioName}}</text>
			<u-icon name="arrow-down" color="#333333" size="14"></u-icon>
		</view>
		<view class="content">
			<uni-tab :tabList="tabList" :value="activeTab" noactivebackgroundColor="rgba(254, 249, 239, 55%)">
				<!-- 第一个标签内容 -->
				<template #content0>
					<view class=" dis f-c " style="padding: 20rpx 30rpx 30rpx;">
						<text class="imgtitle">请上传车辆行驶证正反页面</text>
						<view class="colorBlock"> </view>
						<view class="imageUpload" @click="OCRUploadShow=true">
							<image src="/static/image/Frame 1321319407.png" mode="aspectFill"></image>
						</view>
						<view class="quotebtn dis a-c j-c font-weight" @click="manualQuote">
							手动报价
						</view>
					</view>
				</template>
				<!-- 第二个标签内容 -->
				<template #content1>
					<view class=" dis f-c " style="padding: 40rpx 30rpx 30rpx ;">
						<view class="license dis f-c ">
							<view class="dis a-c ">
								<image src="/static/image/licensePlateicon.png" mode=""></image>
								<text class="title">车牌号</text>
							</view>
							<view class="licensePlateRegion mt-2  dis a-c ">
								<view class="Region dis a-c j-c " @click="Regionselect">
									{{licenseActiveName}}
								</view>
								<u--input v-model="licenseValue" placeholder="请输入" border="bottom" clearable
									maxlength="7" @input="handleInput"
									:customStyle="{borderColor:'#FDE935 !important'}"></u--input>
							</view>
						</view>
						<view class="license dis f-c mt-3">
							<view class="dis ">
								<image src="/static/image/caricon.png" mode=""></image>
								<text class="title">车辆种类</text>
							</view>
							<view class="u--input dis a-c j-s" @tap="carTypeShow = true">
								<text v-if="carTypeCode"
									style="font-size: 30rpx; color: #303133;line-height: 52rpx;">{{carTypeCode }}</text>
								<text v-else style="font-size: 30rpx; color: #999;line-height: 52rpx;">请选择车辆类型</text>
								<u-icon name="arrow-down" color="#333333" size="14"></u-icon>
							</view>

						</view>
						<view class="licenslist dis mt-3">
							<view class="item dis a-c j-c" v-for="(items,index) in historicalVehicle" :key="index"
								@click="licensePlateQuery(items.licenseNo)">
								<text>{{items.licenseNo}}</text>
							</view>
						</view>
						<view class="quotebtn dis a-c j-c font-weight" @click="manualQuote">
							手动报价
						</view>
					</view>
				</template>
			</uni-tab>
		</view>
		<view class="swiper">
			<u-swiper :list="bannerList" indicator height="180rpx" radius="10" imgMode="heightFix"></u-swiper>
		</view>
		<!-- 车牌地区选择 -->
		<uni-Popup :show="licenseShow" bgColor="#F8F8F8" @close='licenseclose'>
			<template #content>
				<view class="licenselist dis f-wrap j-s">
					<view class="item dis a-c j-c" :class="{active:item=== licenseActiveName}"
						v-for="item in licenselist" :key="item" @tap="licenseItem(item)">
						<text>{{item}}</text>
					</view>
				</view>
			</template>
		</uni-Popup>
		<!-- 租户机构选择 -->
		<uni-Popup :show="deptSelectShow" @close='deptclose' headerTitle="选择出单机构" overflow="auto" maxHeight="580rpx">
			<template #content>
				<view class="overflow">
					<view class="deptselect dis f-c ">
						<u-radio-group v-model="deptradiovalue" placement="column" iconPlacement="right"
							@change="deptchange">
							<view class="item dis a-c " v-for="(item, index) in tenantOrglist" :key="index">
								<u-radio activeColor="#FDE935" iconColor='#333' :name="item.systemCode"
									style="width: 100%;">
									<view class="textregion dis f-c ">
										<text>{{item.sysName}}</text>
										<text>{{item.deptName}}</text>
									</view>
									<image :src="item.iconAddress" mode=""></image>
								</u-radio>
							</view>
						</u-radio-group>
					</view>
				</view>

			</template>
		</uni-Popup>
		<!-- 车型选择 -->
		<u-picker :show="carTypeShow" :columns="car_kind_codeoptions" keyName="label" @cancel="carTypeShow=false"
			@confirm="carTypeconfirm"></u-picker>
		<uni-OCRUploadPopup :show="OCRUploadShow" :list='carPopuptablist' @close="OCRUploadShow=false"
			:checkType="checkType" @carCallback="carCallback">

		</uni-OCRUploadPopup>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import store from '@/store';
	export default {
		data() {
			return {
				//历史车辆信息
				historicalVehicle: [],
				//车辆信息
				carInfo: {
					licenseNo: "", //车牌号
					brandName: "", //车辆品牌型号
					vinNo: "", //车架号
					engineNo: "", //发动机号
					modelCode: "", //车型编码
					seatCount: "", //核定载客量 核定载人数
					purchasePrice: "", //新车购置价最低，行业实际价值，协商价值
					carBrand: "", //车型品牌
					ciCarName: "", //行业车型名称
					ciModelCode: "", //行业车型编码
					completeKerbMass: "", //整备质量
					exhaustScale: "", //排量
					factory: "", //工厂名称
					factoryid: "", //工厂编码
					frameNo: "", //车架号
					licenseKindCode: "02", //号牌种类
					vehicleclass: "", //车辆类型
					familyName: "", //车型
					modelcname: "", //车型名称
					powertypecode: "", //燃料类型编码
					vehicleweight: "", //总质量
					limitLoad: "", //核定载质量
					caryear: "", //年款
					carKindCode: "A0", //车辆种类
					powertype: "汽油", //燃料类型
					energyTypeCode: "0", //能源种类
					displacement: "", //排量
					powerScale: "", //功率
					registerDate: "", //注册日期
					issueDate: "", //发证日期
					transferFlag: false, //过户标志
					transferFlagBi: false, //商业过户标志
					transferDate: "", //过户日期
					loanStatus: 0, //贷款标志
					firstBeneMan: "", //第一受益人
					noLicenseFlag: false, //是否新车
					carTypeCode: "K33", //客车A0 货车H0          
					carNatureCode: "02", //使用性质 家庭自用8A  非营业企业8B   非营业党政机关，事业团体8C  非营业货车8D					
					propertyCode: "1", //所属性质 1个人 2企业 3个人
					outOfInsurance: false, //脱保
					usedCar: false, //二手车
					vehicleUseCode: "05" //车辆用途
				},
				ownersInfo: {}, //车主
				policyHolderInfo: {}, //投保人
				insuredPersonInfo: {}, //被保人
				checkType: "carInfo",
				OCRUploadShow: false, //上传弹窗
				carPopuptablist: [{
					name: '行车本正页',
				}, {
					name: '行车本副页',
				}],
				licenseNo: "", //车牌号
				carTypeCode: "", //车辆类型
				carTypeCodeValue: "",
				carTypeShow: false, //选择车型

				tenantOrglist: [], //租户机构列表
				deptradiovalue: '',
				deptradioName: '',
				licenseActiveName: '晋', //车牌选中
				licenseValue: "",
				licenseShow: false, //车牌选择
				deptSelectShow: false, //机构选择弹窗显示/隐藏
				bannerList: [ //轮播图
					"/static/image/banner.png",
				],
				activeTab: 0, //
				tabList: [{
						label: '传图报价',
						id: 0
					},
					{
						label: '车牌号报价',
						id: 1
					}
				],
				licenselist: ["京", "沪", "粤", "津", "冀", "豫", "云", "辽", "黑", "湘", "皖", "鲁", "苏",
					"浙", "赣", "鄂", "桂", "甘", "晋", "陕", "蒙", "吉", "闽", "贵", "渝", "川",
					"青", "琼", "宁", "挂", "藏", "港", "澳", "新", "使", "学"
				],
				carInfoImgViewList: [],

				//影像id
				carInfoPositiveList: [], //车辆
				ownerInfoPositiveList: [], //车主
				policyHolderInfoPositiveList: [], //投保人
				insuredPersonInfoPositiveList: [], //被保人
				car_kind_codeoptions: [],
			}
		},
		onShow() {},
		async onLoad() {
			await this.getDicType("car_kind_code"); //车辆种类
			let res = await this.$http.post('/userInfo/getTenantList'); //获取机构列表
			if (res.code == '200') {
				if (res.data.length > 1) {
					this.tenantOrglist = res.data;
					this.deptSelectShow = true;
				} else {
					this.tenantOrglist = res.data;
					this.deptradiovalue = res.data[0].systemCode;
					this.deptradioName = res.data[0].deptName;
					store.commit('setUserModules', {
						title: 'system_code',
						data: this.tenantOrglist[0].systemCode
					})
					this.bannerquery();
				}
			}
			let res1 = await this.$http.get('/supplementOrder/getHistoryQuote');
			if (res1.code == '200') {
				this.historicalVehicle = res1.data;
			}
		},
		methods: {
			...mapMutations(['activelicenseNo']),
			//车牌号查询相关历史订单
			licensePlateQuery(item) {
				this.activelicenseNo(item);
				uni.switchTab({
					url: '/pages/orders/orders',
				})
			},
			//获取轮播图
			async bannerquery() {
				let res = await this.$http.post('/poster/queryPage');
				if (res.code == '200') {
					let list = res.data.records.map(val => {
						return val.previewUrl;
					})
					this.bannerList = list;
				}
			},
			//数据字典
			async getDicType(type, vehicle) {
				if (vehicle) {
					let res = await this.$http.get(`/dict/get?dictCode=${type}&parentValue=${vehicle}`);
					this[type + vehicle + "options"] = [res.data];

				} else {
					let res = await this.$http.get('/dict/get?dictCode=' + type);
					this[type + "options"] = [res.data];
				}
			},
			//影像识别回调事件
			carCallback(obj) {
				this.carInfoImgViewList = [];
				if (obj.frontImg) {
					this.carInfoImgViewList.push({
						img: obj.frontImg,
						deg: 0,
					})
				}
				if (obj.backImg) {
					this.carInfoImgViewList.push({
						img: obj.backImg,
						deg: 0,
					})
				}
				this.carInfoPositiveList = obj.ImgList;
				Object.assign(this.carInfo, obj.Info);
				this.OCRUploadShow = false;
				let params = {
					carInfo: this.carInfo,
					carInfoImgViewList: this.carInfoImgViewList,
					carInfoPositiveList: this.carInfoPositiveList,
				}
				uni.navigateTo({
					url: '/pages/quote/quoteInfo?info=' + JSON.stringify(params)
				})
			},
			//用户机构选择
			deptSelect() {
				this.deptSelectShow = true;
			},
			//车牌地区选择
			Regionselect() {
				this.licenseShow = true;
			},
			licenseItem(item) {
				this.licenseActiveName = item;
				this.licenseShow = false;
			},
			licenseclose() {
				this.licenseShow = false;
			},
			deptclose() {
				this.deptSelectShow = false;
			},
			handleInput(event) {
				// 将过滤后的值转换为大写
				this.licenseValue = event.toUpperCase();
			},
			carTypeconfirm(value) {
				this.carTypeCode = value.value[0].label;
				this.carTypeCodeValue = value.value[0].value;
				this.carTypeShow = false;

			},
			async deptchange(name) {
				let info = this.tenantOrglist.find(val => val.systemCode == name);
				this.deptradiovalue = info.systemCode;
				this.deptradioName = info.deptName;
				await store.commit('setUserModules', {
					title: 'system_code',
					data: info.systemCode,
				})
				this.deptSelectShow = false;
				this.bannerquery();
			},
			async manualQuote() {
				if (this.licenseValue !== "" && this.carTypeCodeValue !== "") {
					let params = {
						licenseNo: this.licenseActiveName + this.licenseValue,
						carKindCode: this.carTypeCodeValue,
					}
					let res = await this.$http.get('/supplementOrder/getCarRecord', params);
					if (res.code == '200') {
						Object.assign(this.carInfo, res.data.carInfoVo);
						Object.assign(this.ownersInfo, res.data.ownersInfo);
						Object.assign(this.policyHolderInfo, res.data.policyHolderInfo);
						Object.assign(this.insuredPersonInfo, res.data.insuredPersonInfo);
					}
					uni.navigateTo({
						url: '/pages/quote/quoteInfo',
						success: (res) => {
							res.eventChannel
								.emit(
									"acceptData", {
										carInfo: this.carInfo,
										ownersInfo: this.ownersInfo,
										policyHolderInfo: this.policyHolderInfo,
										insuredPersonInfo: this.insuredPersonInfo,
									})
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/quote/quoteInfo'
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F8F8F8;
	}

	.content {
		position: absolute;
		top: 327rpx;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx 30rpx;
		box-sizing: border-box;

		.imgtitle {
			font-size: 26rpx;
			color: #333;
		}

		.block {
			width: 85%;
			height: 50%;
			background: #FFFFFF;
			border-radius: 10rpx;
			border: 1px solid #FFFCB5;
		}

		.colorBlock {
			position: absolute;
			top: 52rpx; // 根据实际图片高度调整
			left: 50%;
			transform: translateX(-50%);
			width: 80%;
			height: 300rpx;
			margin: 0 auto;
			margin-top: 16rpx;
			background: #fff;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid #FFFCB5;
		}

		.imageUpload {
			position: relative;
			width: 100%;
			height: 376rpx;
			background: #fff;
			box-shadow: 0px 0px 16px 0px rgba(146, 141, 97, 0.1);
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 1px solid #FFFCB5;
			margin-top: 40rpx;
			padding: 30rpx;
			box-sizing: border-box;

			>image {
				width: 100%;
				height: 100%;
			}
		}

		.quotebtn {
			background: #FDE935;
			padding: 19rpx 147rpx;
			box-sizing: border-box;
			border-radius: 58rpx;
			font-size: 36rpx;
			color: #1F1F1F;
			margin: 60rpx 17rpx 0 17rpx;

		}
	}

	.dept {
		position: absolute;
		top: 103rpx;
		right: 30rpx;

		text {
			font-size: 30rpx;
			color: #333333;
		}
	}

	.swiper {
		padding: 30rpx;
		margin-top: 480rpx;
		box-sizing: border-box;
	}

	.license {
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.title {
			font-size: 30rpx;
			color: #333;

		}

		.licensePlateRegion {
			.Region {
				width: 80rpx;
				height: 75rpx;
				border-radius: 4rpx;
				border: 1px solid #FDE935;
				padding: 17rpx 25rpx;
				font-size: 30rpx;
				box-sizing: border-box;
				color: #333;
				font-weight: bold;
				margin-right: 27rpx;
			}
		}
	}

	::v-deep {
		.input-placeholder {
			font-size: 30rpx;
			color: #999 !important;
		}
	}

	//车牌地区选择
	.licenselist {
		.item {
			padding: 12rpx 10rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin: 8rpx;
			font-size: 40rpx;
			color: #333;
			font-weight: 500;
			box-sizing: border-box;
		}

		.active {
			background-color: #FDE935;
		}
	}

	//出单机构选择
	.overflow {
		padding: 30rpx;
		box-sizing: border-box;

		.deptselect {
			.item {
				border-radius: 10rpx;
				border: 1px solid #EEEEEE;
				padding: 24rpx 25rpx;
				margin-bottom: 30rpx;
				width: 100%;
				box-sizing: border-box;

				image {
					width: 72rpx;
					height: 72rpx;
					margin-right: 20rpx;
				}

				.textregion {
					margin-right: auto;

					text:first-child {
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}

					text:last-child {
						font-size: 30rpx;
						color: #666;
					}
				}
			}
		}
	}



	.licenslist {
		overflow-x: auto;
		/* 超出后可以左右滑动 */
		white-space: nowrap;
		/* 防止子元素换行 */
		padding: 10rpx 0;

		/* 添加一些内边距 */
		.item {
			flex: 0 0 auto;
			/* 防止子元素被压缩 */
			padding: 8rpx 20rpx;
			box-sizing: border-box;
			background: linear-gradient(270deg, rgba(253, 233, 53, 0.2) 0%, rgba(220, 238, 111, 0.2) 100%);
			border-radius: 2rpx;
			margin-right: 10rpx;
			font-size: 26rpx;
			color: #000;
		}
	}

	.u--input {
		padding: 12rpx 18rpx;
		border-bottom: 0.5px solid rgb(253, 233, 53);
	}
</style>