This commit is contained in:
@@ -8,20 +8,16 @@
|
||||
|
||||
<view class="card carrier-card" v-for="item in list" :key="item.iccid">
|
||||
<view class="carrier-main">
|
||||
<view class="carrier-left">
|
||||
<view class="carrier-logo">
|
||||
<image :src="getCarrier(item.carrier_type).logo" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="carrier-logo">
|
||||
<image :src="getCarrier(item.carrier_type).logo" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="carrier-details">
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
<view class="carrier-right">
|
||||
<view v-if="item.isDevice" class="slot-panel">
|
||||
<image class="slot-icon" :src="getSlotIcon(item.slot_position)" mode="aspectFit"></image>
|
||||
<text class="slot-label">卡槽 {{ item.slot_position || '-' }}</text>
|
||||
<image v-if="item.isDevice" class="slot-icon" :src="getSlotIcon(item.slot_position)" mode="aspectFit"></image>
|
||||
<text v-if="item.isDevice" class="slot-label">卡槽 {{ item.slot_position || '-' }}</text>
|
||||
</view>
|
||||
<view class="card-actions">
|
||||
<button v-if="item.isRealName" class="btn-apple btn-primary action-button" disabled>已实名</button>
|
||||
@@ -48,6 +44,13 @@
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { assetApi, realnameApi } from '@/api/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 slot2Icon from '@/static/卡槽2.png';
|
||||
import slot3Icon from '@/static/卡槽3.png';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
@@ -65,16 +68,16 @@
|
||||
};
|
||||
|
||||
const carrierLogoMap = {
|
||||
CMCC: '/static/中国移动.png',
|
||||
CUCC: '/static/中国联通.png',
|
||||
CTCC: '/static/中国电信.png',
|
||||
CBN: '/static/中国广电.png'
|
||||
CMCC: cmccLogo,
|
||||
CUCC: cuccLogo,
|
||||
CTCC: ctccLogo,
|
||||
CBN: cbnLogo
|
||||
};
|
||||
|
||||
const slotIconMap = {
|
||||
1: '/static/卡槽1.png',
|
||||
2: '/static/卡槽2.png',
|
||||
3: '/static/卡槽3.png'
|
||||
1: slot1Icon,
|
||||
2: slot2Icon,
|
||||
3: slot3Icon
|
||||
};
|
||||
|
||||
const getCarrier = (carrierType) => {
|
||||
@@ -161,22 +164,15 @@
|
||||
|
||||
.carrier-main {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.carrier-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.carrier-logo {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
flex-shrink: 0;
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 24rpx;
|
||||
@@ -184,8 +180,14 @@
|
||||
image { width: 100%; height: 100%; }
|
||||
}
|
||||
|
||||
.carrier-details {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.carrier-name {
|
||||
margin-top: 16rpx;
|
||||
color: var(--text-primary);
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
@@ -193,17 +195,18 @@
|
||||
}
|
||||
|
||||
.carrier-iccid {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-top: 14rpx;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.field-label,
|
||||
.slot-label {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 24rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.iccid-value-text {
|
||||
@@ -215,30 +218,15 @@
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.carrier-right {
|
||||
width: 190rpx;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.slot-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.slot-icon {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
width: 100%;
|
||||
width: 240rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
|
||||
Reference in New Issue
Block a user