fix: ui
All checks were successful
构建并部署前端到生产环境 / build-and-deploy (push) Successful in 1m10s

This commit is contained in:
luo
2026-07-30 14:49:39 +08:00
parent 7ecb4709c8
commit c45227ba7e
3 changed files with 101 additions and 81 deletions

View File

@@ -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;

View File

@@ -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;

View File

@@ -8,22 +8,25 @@
<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-name">{{ getCarrier(item.carrier_type).name }}</view> <view class="carrier-heading">
<view class="carrier-iccid"> <view class="carrier-name">{{ getCarrier(item.carrier_type).name }}</view>
<text class="field-label">ICCID</text> <view class="carrier-statuses">
<text class="iccid-value-text">{{ item.iccid }}</text> <up-tag :type="item.real_name_status === 1 ? 'primary' : 'success'" size="mini">
<image class="slot-icon" :src="getSlotIcon(item.slot_position)" mode="aspectFit"></image> {{ item.real_name_status === 1 ? '已实名' : '未实名' }}
<text class="slot-label">卡槽 {{ item.slot_position || '-' }}</text> </up-tag>
<up-tag v-if="item.network_status" type="info" size="mini">{{ item.network_status }}</up-tag>
</view>
</view> </view>
<view class="carrier-statuses"> <view class="carrier-iccid">
<up-tag :type="item.real_name_status === 1 ? 'primary' : 'success'" size="mini"> <text class="iccid-value-text">{{ item.iccid }}</text>
{{ item.real_name_status === 1 ? '已实名' : '未实名' }} <view class="copy-icon" @tap.stop="copyIccid(item.iccid)" aria-label="复制ICCID">
</up-tag> <view class="copy-back"></view>
<up-tag v-if="item.network_status" type="info" size="mini">{{ item.network_status }}</up-tag> <view class="copy-front"></view>
</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>
@@ -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 {