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

<template>
	<view class="container">
		<view class="card" v-for="item in mchList">
			<view class="flex-row-sb mt-30">
				<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="flex-row-g20">
							<view class="iccid">
								ICCID: {{item.iccidMark}}
							</view>
							<view class="operator">
								<up-tag type="success"
									size="mini">{{getLogo(item.category).name}}</up-tag>
							</view>
						</view>
						<view class="flex-row-g20">
							<view class="operator" v-if="item.iccidMark===currentIccid">
								<up-tag type="success"
									size="mini">{{item.iccidMark===currentIccid ? "当前使用" : ""}}</up-tag>
							</view>
							<view class="operator" v-if="item.iccidMark===currentIccidMain">
								<up-tag type="success"
									size="mini">{{item.iccidMark===currentIccidMain ? "当前主卡" : ""}}</up-tag>
							</view>

							<view class="operator">
								<up-tag :type="item.isRealName ? 'primary': 'success'"
									size="mini">{{item.isRealName ? "已实名" : "未实名"}}</up-tag>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="btn flex-col-g20 mt-30">
				<up-button class="btn-apple btn-success" v-if="item.iccidMark!==currentIccid" type="success"
					@tap="switchShow=true">
					切换此运营商
				</up-button>
				<up-button class="btn-apple btn-success" v-if="!item.isRealName" type="success" @tap="goToReal">
					跳转实名页面
				</up-button>
			</view>
			<!-- 切换运营商 -->
			<up-modal title="您确定要切换运营商吗？" :show="switchShow" showCancelButton @confirm="changeOpera(item)"
				@cancel="switchShow=false" />
		</view>
	</view>
</template>

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

	import {
		onLoad
	} from '@dcloudio/uni-app'

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

	let mchList = reactive([])

	// 当前主卡
	let currentIccidMain = ref("")

	// 当前卡
	let currentIccid = ref("")

	// 是否显示
	let switchShow = ref(false)

	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 changeOpera = async (data) => {
		let matchedItem = opratorList.find(item => item.category === data.category);
		await userStore.actions.changeOperator(matchedItem.esim, data.iccidMark)
		uni.showToast({
			title: "切换成功, 3-5分钟后生效!",
			icon: "none"
		})
		switchShow.value = false
	}

	const goToReal = () => {
		uni.navigateTo({
			url: "/pages/auth/auth"
		})
	}

	// 获取列表
	const getList = async () => {
		const mainInfo = await userStore.actions.getSwitchCardList()
		if (mainInfo?.cardEntity) {
			// 当前主卡
			currentIccidMain.value = mainInfo.cardEntity.iccidMark
			// 当前使用卡
			currentIccid.value = mainInfo.gswlinfo.iccid
		}
		if (mainInfo?.mchList.length > 0) {
			Object.assign(mchList, mainInfo.mchList)
		}
	}

	const YesSwitch = async () => {
		switchShow.value = true
	}

	onMounted(() => {
		getList()
	})
</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>