one-pipe-card-h5/pages/auth/auth.vue

<template>
	<view class="container">
		<view class="card" v-for="item in list">
			<view class="flex-row-g20">
				<view class="logo">
					<image :src="getLogo(item.category).logo" mode="aspectFit"></image>
				</view>
				<view class="flex-col-g20">
					<view class="iccid">
						ICCID: {{item.iccidMark}}
					</view>
					<view class="operator">
						运营商: {{getLogo(item.category).name}}
					</view>
				</view>
			</view>
			
			<view class="btn mt-30 flex-col-g20">
				<up-button class="btn-apple btn-primary" v-if="item.isRealName" type="primary">
					已实名
				</up-button>
				<up-button class="btn-apple btn-success" v-else type="success" @tap="toReal(item.iccidMark)">
					去实名
				</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		computed
	} from 'vue';

	import {
		userStore
	} from '@/store/index.js';

	let mchList = reactive([])

	let list = reactive([])

	let currentIccid = ref("")
	let phone = ref("")

	const device_id = uni.getStorageSync("device_id")

	let opratorList = reactive([{
			category: "124", // 中国电信
			logo: "https://img2.baidu.com/it/u=139558247,3893370039&fm=253&fmt=auto?w=529&h=500",
			esim: 1,
			name: "中国电信"
		},
		{
			category: "125", // 中国联通
			logo: "https://img1.baidu.com/it/u=2816777816,1756344384&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
			esim: 2,
			name: "中国联通"
		},
		{
			category: "126", // 中国移动
			logo: "https://img2.baidu.com/it/u=915783975,1594870591&fm=253&fmt=auto&app=120&f=PNG?w=182&h=182",
			esim: 3,
			name: "中国移动"
		}
	])

	const getLogo = computed(() => {
		return (category) => {
			const operator = opratorList.find(item => item.category == category);
			return operator ? operator : ''; // 返回logo路径
		};
	});

	// 是否显示主号 (导入的设备号)
	const showMainNumber = async () => {
		if (!device_id) {
			uni.showToast({
				title: 'ICCID不能为空',
				icon: 'none'
			})
		}
		const result = await userStore.actions.getIsOnlyMainCard(device_id)
		if (result.data.exists && mchList.length > 0) {
			// 使用 filter() 筛选符合条件的项
			let matchedItems = mchList.filter(item => item.iccidMark === currentIccid.value);
			// 将筛选后的数组重新赋值给 mchList
			Object.assign(list, matchedItems)
		} else {
			Object.assign(list, mchList)
		}
	};

	const toReal = async (iccid) => {
		const result = await userStore.actions.getRealNameAddress(iccid)
		let url = result.accountEntity.realNameUrl
		if (url) {
			// 替换url里面的 ${iccid} 替换为iccid， ${phone}替换为 phone.value
			url = url.replace("${iccid}", iccid).replace("${phone}", phone.value)
			uni.showToast({
				title: "正在跳转实名",
				icon: "none"
			})
			window.location.href = url
		} else {
			uni.showToast({
				title: '未获取到实名地址',
				icon: 'none'
			})
		}
	}

	// 获取列表
	const getList = async () => {
		const mainInfo = await userStore.actions.getSwitchCardList()
		if (mainInfo?.cardEntity) {
			currentIccid.value = mainInfo.cardEntity.iccidMark
			phone.value = mainInfo.cardEntity.phone
		}
		if (mainInfo?.mchList.length > 0) {
			Object.assign(mchList, mainInfo.mchList)
		}
	}

	onMounted(async () => {
		await getList()
		await showMainNumber()
	})
</script>

<style lang="scss" scoped>
	.container {
		.card {
			.logo {
				width: 80rpx;
				height: 80rpx;
				border-radius: 120rpx;
				border: 1rpx solid var(--apple-blue);
				overflow: hidden;

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

			.name {
				font-size: 30rpx;
			}
		}
	}
	
	.btn-apple {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: none;
		border-radius: 12rpx;
		font-weight: 500;
		font-size: 26rpx;
		line-height: 1;
		cursor: pointer;
		transition: all 0.2s ease;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
		padding: 20rpx;
		background: var(--system-gray-6);
		color: var(--text-primary);
	
		/* 按钮变体 */
		&.btn-primary {
			background: var(--apple-blue);
			color: white;
		}
	
		&.btn-success {
			background: var(--apple-green);
			color: white;
		}
	
		&.btn-warning {
			background: var(--apple-orange);
			color: white;
		}
	
		&.btn-danger {
			background: var(--apple-red);
			color: white;
		}
	
		&.btn-secondary {
			background: var(--system-gray-4);
			color: var(--text-secondary);
		}
	
		/* 小号按钮 */
		&.btn-mini {
			min-height: 40rpx;
			padding: 0 16rpx;
			font-size: 24rpx;
			border-radius: 8rpx;
		}
	
		/* 大号按钮 */
		&.btn-large {
			min-height: 64rpx;
			padding: 0 32rpx;
			font-size: 32rpx;
			border-radius: 16rpx;
		}
	
		/* 禁用状态 */
		&.btn-disabled {
			opacity: 0.4;
			cursor: not-allowed;
		}
	}
</style>