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="Service dis f-c a-c j-c " @click="Service">
			<image class="" src="/static/icon/customerService.png" mode=""></image>
			<text>客服</text>
		</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="manualQuote1">
							手动报价
						</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: "A0",
				carTypeShow: false, //选择车型

				tenantOrglist: [], //租户机构列表
				tenantLoaded: false, //机构列表是否已加载（防止 onShow 补加载与 onLoad 重复执行）
				tenantLoading: false, //机构列表是否加载中（防重入）
				historyLoaded: false, //历史报价车牌是否已加载
				loadedToken: '', //数据加载时的token（用于检测登录账号变化，401重登/换账号时重置并重载）
				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
				carImageListId: [], //车辆
				ownerImageListId: [], //车主
				policyHolderImageListId: [], //投保人
				insuredPersonImageListId: [], //被保人
				car_kind_codeoptions: [],
			}
		},
		async onShow() {
			if (!store.state.token) {
				// 未登录先跳登录页，避免在首页发起需要登录态的请求；已在登录页时不重复跳转
				let pages = getCurrentPages();
				let currentPage = pages[pages.length - 1];
				if (!(currentPage && currentPage.route === 'pages/login/login')) {
					uni.navigateTo({
						url: "/pages/login/login"
					});
				}
				return;
			}
			// 登录账号变化（401重登/换账号）时重置加载标志并清空旧数据，重新拉取
			// 注意：不重置 tenantLoading，避免打断执行中 onLoad 的防重入（否则会重复请求/重复签到）
			if (this.loadedToken !== store.state.token) {
				this.tenantLoaded = false;
				this.historyLoaded = false;
				this.tenantOrglist = [];
				this.historicalVehicle = [];
				this.deptradiovalue = '';
				this.deptradioName = '';
			}
			// 已登录但首页数据未加载（如未登录时进入过首页后再登录，onLoad 不会重新执行），补加载
			if (!this.tenantLoaded) {
				await this.loadHomeData(); // 与 onLoad 生命周期共用同一加载方法（内部有防重入）
			} else if (!this.historyLoaded) {
				this.loadHistoryQuote(); //机构已加载但历史车牌失败过，单独补
			}
			await this.getDicType("car_kind_code"); //车辆种类
		},
		onLoad() {
			// 页面生命周期：首次进入触发初始化加载。注意不能 this.onLoad() 直接调用——
			// 页面生命周期钩子不挂载到组件实例，onShow 中补加载需走 methods 里的 loadHomeData
			this.loadHomeData();
		},
		beforeCreate() {
			// setTimeout(() => {
			// 	this.$refs.app_update.update(); //调用子组件检查更新方法
			// }, 500)
		},
		methods: {
			...mapMutations(['activelicenseNo']),
			// 首页初始化数据加载：onLoad 生命周期与 onShow 补加载共用（页面生命周期钩子不可 this.onLoad() 调用，故抽为普通方法）
			async loadHomeData() {
				if (!store.state.token) {
					return; // 未登录不发请求（onShow 会跳转登录页），避免 getTenantList 等接口 401 弹“登录已失效”
				}
				if (this.tenantLoading || this.tenantLoaded) {
					return; // 防重入:加载中或已加载过则不再执行，避免重复请求/重复签到
				}
				const loadToken = store.state.token; // 快照本次加载的token，完成时校验账号是否已变化
				this.tenantLoading = true;
				try {
					let res = await this.$http.post('/userInfo/getTenantList'); //获取机构列表
					if (res.code == '200') {
						if (res.data && res.data.length) {
							if (res.data.length > 1) {
								this.tenantOrglist = res.data;
								if (!store.state.system_code) {
									this.deptSelectShow = true; //多个租户弹窗选择
								} else {
									this.deptradiovalue = store.state.system_code;
									this.deptradioName = store.state.system_Name;
								}
							} else {
								//单个租户赋值第一个（仅组件内数据，写store/签到等副作用在校验通过后执行）
								this.tenantOrglist = res.data;
								this.deptradiovalue = res.data[0].systemCode;
								this.deptradioName = res.data[0].deptName;
							}
						}
						// 账号校验前置：加载期间账号已变化则放弃并清理，避免旧账号数据污染store/重复签到
						if (store.state.token !== loadToken) {
							this.tenantOrglist = [];
							this.deptradiovalue = '';
							this.deptradioName = '';
							this.deptSelectShow = false;
							return;
						}
						// 校验通过后才执行写store与签到等副作用操作
						if (res.data && res.data.length === 1) {
							store.commit('setUserModules', {
								title: 'system_code',
								data: this.tenantOrglist[0].systemCode
							})
							store.commit('setUserModules', {
								title: 'system_Name',
								data: this.tenantOrglist[0].sysName
							})
							await this.bannerquery(); //获取轮播图
							await this.getUserInfo(); //获取人员信息
							await this.$http.post('/signIn/doSignIn')
						}
						// 整条初始化链成功后才置位（任一环节失败则不置位，onShow 下次可重试）
						this.tenantLoaded = true;
						this.loadedToken = loadToken;
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg || '租户接口异常',
						})
					}
				} catch (e) {
					// 静默：401 由 dataFactory 统一处理，网络异常不中断；tenantLoaded 保持 false，下次 onShow 可重试
				} finally {
					this.tenantLoading = false;
				}
				try {
					await this.loadHistoryQuote(); //获取历史报价车牌
				} catch (e) {
					// 静默：历史报价车牌加载失败不影响主流程
				}
			},
			//获取历史报价车牌（独立方法，失败后 onShow 可单独重试）
			async loadHistoryQuote() {
				const loadToken = store.state.token; // 快照token，完成时校验账号是否已变化
				let res1 = await this.$http.get('/supplementOrder/getHistoryQuote');
				if (res1.code == '200') {
					if (store.state.token !== loadToken) {
						return; // 加载期间账号已变化，放弃（数据属于旧账号）
					}
					this.historicalVehicle = res1.data;
					this.historyLoaded = true;
				}
			},
			arr() {
				uni.navigateTo({
					url: '/pages/reward/benefitPackage'
				})
			},

			//车牌号查询相关历史订单
			licensePlateQuery(item) {
				// this.activelicenseNo(item);
				uni.navigateTo({
					url: '/pages/quote/quoteRecords?license=' + item,
				})
			},
			//获取登录人信息
			async getUserInfo() {
				let userInfoRes = await this.$http.get('/appUser/userInfoGet', {}); //用户信息
				store.commit('setUserModules', { //用户信息
					title: 'userInfo',
					data: {
						sysUser: {
							...userInfoRes.data
						}
					}
				})
			},
			//获取轮播图
			async bannerquery() {
				let res = await this.$http.post('/poster/queryPage');
				if (res.code == '200' && res.data.records.length > 0) {
					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.carImageListId = obj.ImgList;
				Object.assign(this.carInfo, obj.Info);
				this.OCRUploadShow = false;
				let params = {
					carInfo: this.carInfo,
					carInfoImgViewList: this.carInfoImgViewList,
					carImageListId: this.carImageListId,
				}
				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.sysName;
				await store.commit('setUserModules', {
					title: 'system_code',
					data: info.systemCode,
				})
				store.commit('setUserModules', {
					title: 'system_Name',
					data: info.sysName
				})
				this.deptSelectShow = false;
				await this.bannerquery();
				await this.getUserInfo();
				let res1 = await this.$http.post('/signIn/doSignIn', )
			},
			async manualQuote() {
				uni.navigateTo({
					url: '/pages/quote/quoteInfo'
				})
			},
			async manualQuote1() {
				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'
						})
					}

				} else {
					uni.showToast({
						title: "请输入车牌号",
						icon: 'none',
					});
				}

			},
			Service() {
				uni.navigateTo({
					url: '/pages/tool/helpAndSupport'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.page {

		background-color: #F8F8F8;

		height: 100vh;

	}

	.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;
		left: 30rpx;

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

	.Service {

		position: absolute;
		top: 85rpx;
		right: 30rpx;
		font-size: 20rpx;
		color: #333;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.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>