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.bannerList = [];
			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;
				}
			} 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') {
				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>