zhywpt-sp/subpackage/personal-center/my-etc-account.vue

<template>
	<view class="content">
		<view class="title" v-if="state.personArr.length>0">您名下个人ETC账户</view>

		<radio-group class="uni-list" @change="radioChange">
			<label class="item" v-for="(item,index) in state.personArr" :key="item.customerId">
				<image class="img" :src="`${$imgUrl}myImage/personimg.png`" mode=""></image>
				<view class="details">
					<view class="top">
						<text class="name">{{item.userName}}</text>
						<text class="acount" v-if="item.customerIdChoice">当前绑定账户</text>
					</view>
					<view class="car">{{item.vehicleCount?item.vehicleCount:'无'}}辆车</view>
				</view>
				<radio :id="item.customerId" :value="item.customerId" :checked="item.customerId==state.customerId"
					style="scale: 0.8;"></radio>
			</label>
		</radio-group>

		<view class="title" v-if="state.uniArr.length>0">您名下单位ETC账户</view>
		<radio-group class="uni-list" @change="radioChange">
			<label class="item_father" v-for="(item,index) in state.uniArr" :key="item.customerId">
				<view class="danwei">
					<view class="item1">
						<image class="img" :src="`${$imgUrl}myImage/unit.png`" mode=""></image>
						<view class="details">
							<view class="top">
								<text class="name">{{item.userName}}</text>
							</view>
							<view>
								<text class="car">{{item.vehicleCount?item.vehicleCount:'无'}}车辆</text>
								<text class="acount" v-if="item.customerIdChoice">当前绑定账户</text>
							</view>
						</view>
						<radio :id="item.customerId" :value="item.customerId"
							:checked="item.customerId==state.customerId" style="scale: 0.8;"></radio>
					</view>
					<view class="unit-list">
						<text>证件类型</text>
						<text>{{getCredentialType(item.idType)}}</text>
					</view>
					<view class="unit-list">
						<text>证件号码</text>
						<text>{{item.idNumStr}}</text>
					</view>
					<view class="unit-list">
						<text>分支机构</text>
						<text>{{item.department}}</text>
					</view>
				</view>

			</label>
		</radio-group>
	</view>

</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { requestNew } from "@/utils/network/request.js";
	import { customerQuery, etcChange } from "@/utils/network/api.js";
	import { setItem, getItem } from "../../utils/storage";
	import {
		getCredentialType
	} from "@/datas/credentialType.js";
	import { useUserStore } from "@/stores/user";
	const userStore = useUserStore();
	const { saveUserInfo } = userStore;
	
	const state = reactive({
		personArr: ref([]),
		uniArr: ref([]),
		allData: [],
		userType: "",
		customerId: ""
	})
	onLoad(() => {
		customerQueryInfo()
	});
	const customerQueryInfo = () => {
		const options = {
			type: 2,
			data: {},
			method: "POST",
			showLoading: true,
		};
		//调用方式
		requestNew(customerQuery, options)
			.then((res) => {
				console.log('用户信息', res)
				state.allData = res
				const customerId = getItem('userInfo') ? getItem('userInfo')['customerId'] : ""
				console.log('customerId====111',customerId)
				state.customerId = customerId
				for (var i = 0; i < res.length; i++) {
					// 当前关联某个账户
					if (res[i]['customerId'] == customerId) {
						res[i]['customerIdChoice'] = true
					} else {
						res[i]['customerIdChoice'] = false
					}
					res[i]['idNumStr'] = res[i]['idNum'].replace(/^.{14}/, '**************')
					if (res[i]['userType'] == 1) {
						state.personArr.push(res[i])
					} else {
						state.uniArr.push(res[i])
					}
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}
	const radioChange = (e) => {
		console.log("e", e.detail.value)
		state.customerId = e.detail.value
		let value = e.detail.value
		const choiceData = state.allData.filter(item => item.customerId == value);
		// 清空对方数组选择
		console.log("state.userType", state.userType, choiceData)
		console.log("state.personArr", state.personArr, state.uniArr)
		uni.showModal({
			title: '提示',
			content: '确定选择账户',
			success: function (res) {
				if (res.confirm) {
					switchCustomer(choiceData[0])
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

		console.log("choiceData", choiceData)
	}
	const switchCustomer = (choiceData) => {
		requestNew(etcChange, {
			data:{customerId: choiceData.customerId}
		})
			.then((res) => {
				console.log('用户信息', res)
				let userInfo = getItem('userInfo');
				userInfo.customerId = choiceData.customerId;
				setItem('customerObj', choiceData);
				saveUserInfo(userInfo);
				uni.navigateBack()
			})
			.catch((err) => {
				console.log(err);
			});
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 0 30rpx;

		.title {
			font-size: 28rpx;
			color: #666666;
			margin: 30rpx 0 20rpx 20rpx;
		}

		.uni-list {
			.item1 {
				background: white;
				margin-bottom: 20rpx;
				display: flex;
				border-radius: 20rpx;
				padding: 20rpx 0;
				display: flex;
				align-items: center;

				.details {
					width: 76%;
					margin-left: 26rpx;

					.top {
						margin-bottom: 6rpx;

						.name {
							font-size: 30rpx;
							color: #01243A;
						}
					}
				}

				.img {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.item {
				background: white;
				margin-bottom: 20rpx;
				display: flex;
				border-radius: 20rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;

				.details {
					width: 76%;
					margin-left: 26rpx;

					.top {
						margin-bottom: 6rpx;

						.name {
							font-size: 30rpx;
							color: #01243A;
						}
					}
				}

				.img {
					width: 80rpx;
					height: 80rpx;
				}
			}


		}
	}

	.item_father {
		background: white !important;
	}

	.unit-list {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.unit-list>text:first-child {
		font-size: 24rpx;
		color: #888888;
	}

	.unit-list>text:last-child {
		font-size: 26rpx;
		color: #444444;
	}

	.acount {
		background: #F9F5EB;
		border-radius: 6rpx;
		border: 1px solid #CCB375;
		font-size: 22rpx;
		color: #CCB375;
		margin-left: 10rpx;
	}

	.car {
		font-size: 24rpx;
		color: #01243A;
	}

	.danwei {
		background: white;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
</style>