This commit is contained in:
@@ -8,16 +8,17 @@
|
|||||||
|
|
||||||
<view class="card carrier-card" v-for="item in list" :key="item.iccid">
|
<view class="card carrier-card" v-for="item in list" :key="item.iccid">
|
||||||
<view class="carrier-main">
|
<view class="carrier-main">
|
||||||
<view class="carrier-logo">
|
<view v-if="item.isDevice" class="slot-logo">
|
||||||
<image :src="getCarrier(item.carrier_type).logo" mode="aspectFit"></image>
|
<image class="slot-visual" :src="getSlotIcon(item.slot_position)" mode="aspectFit"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="carrier-details">
|
<view class="carrier-details">
|
||||||
<view class="carrier-name">{{ getCarrier(item.carrier_type).name }}</view>
|
<view class="carrier-name">{{ getCarrier(item.carrier_type).name }}</view>
|
||||||
<view class="carrier-iccid">
|
<view class="carrier-iccid">
|
||||||
<text class="field-label">ICCID</text>
|
|
||||||
<text class="iccid-value-text">{{ item.iccid }}</text>
|
<text class="iccid-value-text">{{ item.iccid }}</text>
|
||||||
<image v-if="item.isDevice" class="slot-icon" :src="getSlotIcon(item.slot_position)" mode="aspectFit"></image>
|
<view class="copy-icon" @tap.stop="copyIccid(item.iccid)" aria-label="复制ICCID">
|
||||||
<text v-if="item.isDevice" class="slot-label">卡槽 {{ item.slot_position || '-' }}</text>
|
<view class="copy-back"></view>
|
||||||
|
<view class="copy-front"></view>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="card-actions">
|
<view class="card-actions">
|
||||||
<button v-if="item.isRealName" class="btn-apple btn-primary action-button" disabled>已实名</button>
|
<button v-if="item.isRealName" class="btn-apple btn-primary action-button" disabled>已实名</button>
|
||||||
@@ -44,10 +45,6 @@
|
|||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
import { assetApi, realnameApi } from '@/api/index.js';
|
import { assetApi, realnameApi } from '@/api/index.js';
|
||||||
import { useUserStore } from '@/store/index.js';
|
import { useUserStore } from '@/store/index.js';
|
||||||
import cmccLogo from '@/static/中国移动.png';
|
|
||||||
import cuccLogo from '@/static/中国联通.png';
|
|
||||||
import ctccLogo from '@/static/中国电信.png';
|
|
||||||
import cbnLogo from '@/static/中国广电.png';
|
|
||||||
import slot1Icon from '@/static/卡槽1.png';
|
import slot1Icon from '@/static/卡槽1.png';
|
||||||
import slot2Icon from '@/static/卡槽2.png';
|
import slot2Icon from '@/static/卡槽2.png';
|
||||||
import slot3Icon from '@/static/卡槽3.png';
|
import slot3Icon from '@/static/卡槽3.png';
|
||||||
@@ -67,13 +64,6 @@
|
|||||||
CBN: '中国广电'
|
CBN: '中国广电'
|
||||||
};
|
};
|
||||||
|
|
||||||
const carrierLogoMap = {
|
|
||||||
CMCC: cmccLogo,
|
|
||||||
CUCC: cuccLogo,
|
|
||||||
CTCC: ctccLogo,
|
|
||||||
CBN: cbnLogo
|
|
||||||
};
|
|
||||||
|
|
||||||
const slotIconMap = {
|
const slotIconMap = {
|
||||||
1: slot1Icon,
|
1: slot1Icon,
|
||||||
2: slot2Icon,
|
2: slot2Icon,
|
||||||
@@ -81,14 +71,19 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
const getCarrier = (carrierType) => {
|
const getCarrier = (carrierType) => {
|
||||||
return {
|
return { name: carrierMap[carrierType] || '-' };
|
||||||
name: carrierMap[carrierType] || '-',
|
|
||||||
logo: carrierLogoMap[carrierType] || carrierLogoMap.CMCC
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const getSlotIcon = (slotPosition) => slotIconMap[Number(slotPosition)] || slotIconMap[1];
|
const getSlotIcon = (slotPosition) => slotIconMap[Number(slotPosition)] || slotIconMap[1];
|
||||||
|
|
||||||
|
const copyIccid = (value) => {
|
||||||
|
if (!value) return;
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: String(value),
|
||||||
|
success: () => uni.showToast({ title: 'ICCID已复制', icon: 'success' })
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const loadCards = async () => {
|
const loadCards = async () => {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
try {
|
try {
|
||||||
@@ -169,7 +164,7 @@
|
|||||||
gap: 24rpx;
|
gap: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carrier-logo {
|
.slot-logo {
|
||||||
width: 112rpx;
|
width: 112rpx;
|
||||||
height: 112rpx;
|
height: 112rpx;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -177,7 +172,11 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
background: var(--up-primary-light);
|
background: var(--up-primary-light);
|
||||||
image { width: 100%; height: 100%; }
|
}
|
||||||
|
|
||||||
|
.slot-visual {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carrier-details {
|
.carrier-details {
|
||||||
@@ -197,18 +196,11 @@
|
|||||||
.carrier-iccid {
|
.carrier-iccid {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12rpx;
|
gap: 10rpx;
|
||||||
margin-top: 14rpx;
|
margin-top: 14rpx;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-label,
|
|
||||||
.slot-label {
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
font-size: 24rpx;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iccid-value-text {
|
.iccid-value-text {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
@@ -218,12 +210,27 @@
|
|||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slot-icon {
|
.copy-icon {
|
||||||
width: 56rpx;
|
position: relative;
|
||||||
height: 56rpx;
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.copy-back,
|
||||||
|
.copy-front {
|
||||||
|
position: absolute;
|
||||||
|
width: 15rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
border: 3rpx solid var(--text-tertiary);
|
||||||
|
border-radius: 4rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-back { top: 3rpx; left: 3rpx; }
|
||||||
|
.copy-front { right: 2rpx; bottom: 2rpx; background: var(--bg-primary); }
|
||||||
|
|
||||||
.card-actions {
|
.card-actions {
|
||||||
width: 240rpx;
|
width: 240rpx;
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
|
|||||||
@@ -24,7 +24,6 @@
|
|||||||
<view class="order-card" v-for="item in orderList" :key="item.order_id">
|
<view class="order-card" v-for="item in orderList" :key="item.order_id">
|
||||||
<view class="card-header">
|
<view class="card-header">
|
||||||
<view class="order-number" @tap.stop="copyOrderNo(item.order_no)">
|
<view class="order-number" @tap.stop="copyOrderNo(item.order_no)">
|
||||||
<text class="order-label">订单号:</text>
|
|
||||||
<text class="order-no">{{ item.order_no || '-' }}</text>
|
<text class="order-no">{{ item.order_no || '-' }}</text>
|
||||||
<view class="copy-icon">
|
<view class="copy-icon">
|
||||||
<view class="copy-back"></view>
|
<view class="copy-back"></view>
|
||||||
@@ -570,8 +569,6 @@
|
|||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.order-label { flex-shrink: 0; }
|
|
||||||
|
|
||||||
.order-no {
|
.order-no {
|
||||||
max-width: 410rpx;
|
max-width: 410rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|||||||
@@ -8,23 +8,26 @@
|
|||||||
|
|
||||||
<view class="card carrier-card" v-for="item in mchList" :key="item.iccid">
|
<view class="card carrier-card" v-for="item in mchList" :key="item.iccid">
|
||||||
<view class="carrier-main">
|
<view class="carrier-main">
|
||||||
<view class="carrier-logo">
|
<view class="slot-logo">
|
||||||
<image :src="getCarrier(item.carrier_type).logo" mode="aspectFit"></image>
|
<image class="slot-visual" :src="getSlotIcon(item.slot_position)" mode="aspectFit"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="carrier-details">
|
<view class="carrier-details">
|
||||||
|
<view class="carrier-heading">
|
||||||
<view class="carrier-name">{{ getCarrier(item.carrier_type).name }}</view>
|
<view class="carrier-name">{{ getCarrier(item.carrier_type).name }}</view>
|
||||||
<view class="carrier-iccid">
|
|
||||||
<text class="field-label">ICCID</text>
|
|
||||||
<text class="iccid-value-text">{{ item.iccid }}</text>
|
|
||||||
<image class="slot-icon" :src="getSlotIcon(item.slot_position)" mode="aspectFit"></image>
|
|
||||||
<text class="slot-label">卡槽 {{ item.slot_position || '-' }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="carrier-statuses">
|
<view class="carrier-statuses">
|
||||||
<up-tag :type="item.real_name_status === 1 ? 'primary' : 'success'" size="mini">
|
<up-tag :type="item.real_name_status === 1 ? 'primary' : 'success'" size="mini">
|
||||||
{{ item.real_name_status === 1 ? '已实名' : '未实名' }}
|
{{ item.real_name_status === 1 ? '已实名' : '未实名' }}
|
||||||
</up-tag>
|
</up-tag>
|
||||||
<up-tag v-if="item.network_status" type="info" size="mini">{{ item.network_status }}</up-tag>
|
<up-tag v-if="item.network_status" type="info" size="mini">{{ item.network_status }}</up-tag>
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="carrier-iccid">
|
||||||
|
<text class="iccid-value-text">{{ item.iccid }}</text>
|
||||||
|
<view class="copy-icon" @tap.stop="copyIccid(item.iccid)" aria-label="复制ICCID">
|
||||||
|
<view class="copy-back"></view>
|
||||||
|
<view class="copy-front"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<view class="card-actions">
|
<view class="card-actions">
|
||||||
<button v-if="item.is_current" class="btn-apple btn-primary action-button" disabled>当前使用</button>
|
<button v-if="item.is_current" class="btn-apple btn-primary action-button" disabled>当前使用</button>
|
||||||
<button v-else class="btn-apple btn-primary action-button" :disabled="switching" @tap="switchOperator(item)">
|
<button v-else class="btn-apple btn-primary action-button" :disabled="switching" @tap="switchOperator(item)">
|
||||||
@@ -55,10 +58,6 @@
|
|||||||
import { reactive, ref, onMounted } from 'vue';
|
import { reactive, ref, onMounted } from 'vue';
|
||||||
import { assetApi, deviceApi, realnameApi } from '@/api/index.js';
|
import { assetApi, deviceApi, realnameApi } from '@/api/index.js';
|
||||||
import { useUserStore } from '@/store/index.js';
|
import { useUserStore } from '@/store/index.js';
|
||||||
import cmccLogo from '@/static/中国移动.png';
|
|
||||||
import cuccLogo from '@/static/中国联通.png';
|
|
||||||
import ctccLogo from '@/static/中国电信.png';
|
|
||||||
import cbnLogo from '@/static/中国广电.png';
|
|
||||||
import slot1Icon from '@/static/卡槽1.png';
|
import slot1Icon from '@/static/卡槽1.png';
|
||||||
import slot2Icon from '@/static/卡槽2.png';
|
import slot2Icon from '@/static/卡槽2.png';
|
||||||
import slot3Icon from '@/static/卡槽3.png';
|
import slot3Icon from '@/static/卡槽3.png';
|
||||||
@@ -78,13 +77,6 @@
|
|||||||
CBN: '中国广电'
|
CBN: '中国广电'
|
||||||
};
|
};
|
||||||
|
|
||||||
const carrierLogoMap = {
|
|
||||||
CMCC: cmccLogo,
|
|
||||||
CUCC: cuccLogo,
|
|
||||||
CTCC: ctccLogo,
|
|
||||||
CBN: cbnLogo
|
|
||||||
};
|
|
||||||
|
|
||||||
const slotIconMap = {
|
const slotIconMap = {
|
||||||
1: slot1Icon,
|
1: slot1Icon,
|
||||||
2: slot2Icon,
|
2: slot2Icon,
|
||||||
@@ -92,14 +84,19 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
const getCarrier = (carrierType) => {
|
const getCarrier = (carrierType) => {
|
||||||
return {
|
return { name: carrierMap[carrierType] || '-' };
|
||||||
name: carrierMap[carrierType] || '-',
|
|
||||||
logo: carrierLogoMap[carrierType] || carrierLogoMap.CMCC
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const getSlotIcon = (slotPosition) => slotIconMap[Number(slotPosition)] || slotIconMap[1];
|
const getSlotIcon = (slotPosition) => slotIconMap[Number(slotPosition)] || slotIconMap[1];
|
||||||
|
|
||||||
|
const copyIccid = (value) => {
|
||||||
|
if (!value) return;
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: String(value),
|
||||||
|
success: () => uni.showToast({ title: 'ICCID已复制', icon: 'success' })
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const loadCards = async () => {
|
const loadCards = async () => {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
try {
|
try {
|
||||||
@@ -202,7 +199,7 @@
|
|||||||
gap: 24rpx;
|
gap: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carrier-logo {
|
.slot-logo {
|
||||||
width: 112rpx;
|
width: 112rpx;
|
||||||
height: 112rpx;
|
height: 112rpx;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -210,7 +207,11 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
background: var(--up-primary-light);
|
background: var(--up-primary-light);
|
||||||
image { width: 100%; height: 100%; }
|
}
|
||||||
|
|
||||||
|
.slot-visual {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carrier-details {
|
.carrier-details {
|
||||||
@@ -227,21 +228,21 @@
|
|||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.carrier-heading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.carrier-iccid {
|
.carrier-iccid {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12rpx;
|
gap: 10rpx;
|
||||||
margin-top: 14rpx;
|
margin-top: 14rpx;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-label,
|
|
||||||
.slot-label {
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
font-size: 24rpx;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.iccid-value-text {
|
.iccid-value-text {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
@@ -251,18 +252,33 @@
|
|||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.copy-icon {
|
||||||
|
position: relative;
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-back,
|
||||||
|
.copy-front {
|
||||||
|
position: absolute;
|
||||||
|
width: 15rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
border: 3rpx solid var(--text-tertiary);
|
||||||
|
border-radius: 4rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy-back { top: 3rpx; left: 3rpx; }
|
||||||
|
.copy-front { right: 2rpx; bottom: 2rpx; background: var(--bg-primary); }
|
||||||
|
|
||||||
.carrier-statuses {
|
.carrier-statuses {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 10rpx;
|
gap: 10rpx;
|
||||||
margin-top: 14rpx;
|
margin-top: 0;
|
||||||
}
|
|
||||||
|
|
||||||
.slot-icon {
|
|
||||||
width: 56rpx;
|
|
||||||
height: 56rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-actions {
|
.card-actions {
|
||||||
|
|||||||
Reference in New Issue
Block a user