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 } from "@/utils/network/api.js";
import { setItem,getItem } from "../../utils/storage";
import {
		getCredentialType
	} from "@/datas/credentialType.js";
	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('customerObj')?getItem('customerObj')['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) {
					setItem('customerObj',choiceData[0])
					uni.navigateBack()
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

		console.log("choiceData",choiceData)
	}
</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>