luo/device-voice-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
luo
2026-07-30 14:22:20 +08:00
parent 5cc6d4349e
commit 49175f8a73
2 changed files with 272 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
pages/auth/auth.vue
View File

@@ -6,22 +6,29 @@
<view class="empty-desc">当前账号下暂无可实名的卡片</view>
</view>
<view class="card" v-for="item in list" :key="item.iccid">
<view class="flex-row-g20">
<view class="logo">
<image :src="getCarrier(item.carrier_type).logo" mode="aspectFit"></image>
<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-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="flex-col-g20">
<view class="iccid">ICCID: {{ item.iccid }}</view>
<view class="operator">运营商: {{ getCarrier(item.carrier_type).name }}</view>
<view v-if="item.isDevice" class="slot">卡槽位: {{ item.slot_position || '-' }}</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>
</view>
<view class="card-actions">
<button v-if="item.isRealName" class="btn-apple btn-primary action-button" disabled>已实名</button>
<button v-else class="btn-apple btn-primary action-button" @tap="toReal(item)">去实名</button>
</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)">去实名</up-button>
</view>
</view>
<view class="modal-overlay" v-if="showIccidModal" @tap="closeModal">
@@ -58,10 +65,16 @@
};
const carrierLogoMap = {
CMCC: 'https://img2.baidu.com/it/u=915783975,1594870591&fm=253&fmt=auto&app=120&f=PNG?w=182&h=182',
CUCC: 'https://img1.baidu.com/it/u=2816777816,1756344384&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
CTCC: 'https://img2.baidu.com/it/u=139558247,3893370039&fm=253&fmt=auto?w=529&h=500',
CBN: 'https://img1.baidu.com/it/u=3160680953,3401650303&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
CMCC: '/static/中国移动.png',
CUCC: '/static/中国联通.png',
CTCC: '/static/中国电信.png',
CBN: '/static/中国广电.png'
};
const slotIconMap = {
1: '/static/卡槽1.png',
2: '/static/卡槽2.png',
3: '/static/卡槽3.png'
};
const getCarrier = (carrierType) => {
@@ -71,6 +84,8 @@
};
};
const getSlotIcon = (slotPosition) => slotIconMap[Number(slotPosition)] || slotIconMap[1];
const loadCards = async () => {
loading.value = true;
try {
@@ -140,15 +155,100 @@
<style lang="scss" scoped>
.container {
.card {
.logo {
width: 80rpx;
height: 80rpx;
border-radius: 120rpx;
border: 1rpx solid var(--primary);
overflow: hidden;
image { width: 100%; height: 100%; }
}
.carrier-card {
padding: 28rpx;
}
.carrier-main {
display: flex;
align-items: stretch;
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;
padding: 10rpx;
box-sizing: border-box;
border-radius: 24rpx;
background: var(--up-primary-light);
image { width: 100%; height: 100%; }
}
.carrier-name {
margin-top: 16rpx;
color: var(--text-primary);
font-size: 30rpx;
font-weight: 600;
line-height: 1.3;
}
.carrier-iccid {
width: 100%;
display: flex;
align-items: flex-start;
gap: 12rpx;
margin-top: 14rpx;
}
.field-label,
.slot-label {
color: var(--text-tertiary);
font-size: 24rpx;
}
.iccid-value-text {
flex: 1;
min-width: 0;
color: var(--text-secondary);
font-size: 24rpx;
line-height: 1.35;
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;
}
.card-actions {
width: 100%;
}
.action-button {
width: 100%;
height: 64rpx;
padding: 0 16rpx;
font-size: 26rpx;
line-height: 64rpx;
box-sizing: border-box;
&::after { border: none; }
}
}

190
pages/switch/switch.vue
View File

@@ -6,41 +6,39 @@
<view class="empty-desc">当前设备暂无可切换的运营商</view>
</view>
<view class="card" v-for="item in mchList" :key="item.iccid">
<view class="flex-row-sb mt-30">
<view class="flex-row-g20">
<view class="logo">
<view class="card carrier-card" v-for="item in mchList" :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="flex-col-g20">
<view class="flex-row-g20">
<view class="iccid">{{ item.iccid }}</view>
<view class="operator">
<up-tag type="success" size="mini">{{ getCarrier(item.carrier_type).name }}</up-tag>
</view>
</view>
<view class="flex-row-g20">
<view class="operator">
<up-tag :type="item.real_name_status === 1 ? 'primary' : 'success'" size="mini">{{ item.real_name_status === 1 ? '已实名' : '未实名' }}</up-tag>
</view>
<view v-if="item.network_status" class="operator">
<up-tag type="info" size="mini">{{ item.network_status }}</up-tag>
</view>
</view>
<view class="slot">卡槽位: {{ item.slot_position || '-' }}</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>
</view>
<view class="carrier-statuses">
<up-tag :type="item.real_name_status === 1 ? 'primary' : 'success'" size="mini">
{{ item.real_name_status === 1 ? '已实名' : '未实名' }}
</up-tag>
<up-tag v-if="item.network_status" type="info" size="mini">{{ item.network_status }}</up-tag>
</view>
</view>
<view class="carrier-right">
<view class="slot-panel">
<image class="slot-icon" :src="getSlotIcon(item.slot_position)" mode="aspectFit"></image>
<text class="slot-label">卡槽 {{ item.slot_position || '-' }}</text>
</view>
<view class="card-actions">
<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>
<button v-if="item.real_name_status !== 1" class="btn-apple btn-secondary action-button" @tap="toReal(item)">
去实名
</button>
</view>
</view>
</view>
<view class="btn flex-row-g20 mt-30">
<up-button class="btn-apple btn-primary" v-if="item.is_current" type="primary" disabled>
当前使用
</up-button>
<up-button class="btn-apple btn-success" v-else type="success" @tap="switchOperator(item)" :loading="switching">
切换此运营商
</up-button>
<up-button class="btn-apple btn-success" v-if="item.real_name_status !== 1" type="success" @tap="toReal(item)">
去实名
</up-button>
</view>
</view>
@@ -78,10 +76,16 @@
};
const carrierLogoMap = {
CMCC: 'https://img2.baidu.com/it/u=915783975,1594870591&fm=253&fmt=auto&app=120&f=PNG?w=182&h=182',
CUCC: 'https://img1.baidu.com/it/u=2816777816,1756344384&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
CTCC: 'https://img2.baidu.com/it/u=139558247,3893370039&fm=253&fmt=auto?w=529&h=500',
CBN: 'https://img1.baidu.com/it/u=3160680953,3401650303&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
CMCC: '/static/中国移动.png',
CUCC: '/static/中国联通.png',
CTCC: '/static/中国电信.png',
CBN: '/static/中国广电.png'
};
const slotIconMap = {
1: '/static/卡槽1.png',
2: '/static/卡槽2.png',
3: '/static/卡槽3.png'
};
const getCarrier = (carrierType) => {
@@ -91,6 +95,8 @@
};
};
const getSlotIcon = (slotPosition) => slotIconMap[Number(slotPosition)] || slotIconMap[1];
const loadCards = async () => {
loading.value = true;
try {
@@ -182,15 +188,111 @@
<style lang="scss" scoped>
.container {
.card {
.logo {
width: 80rpx;
height: 80rpx;
border-radius: 120rpx;
border: 1rpx solid var(--primary);
overflow: hidden;
image { width: 100%; height: 100%; }
}
.carrier-card {
padding: 28rpx;
}
.carrier-main {
display: flex;
align-items: stretch;
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;
padding: 10rpx;
box-sizing: border-box;
border-radius: 24rpx;
background: var(--up-primary-light);
image { width: 100%; height: 100%; }
}
.carrier-name {
margin-top: 16rpx;
color: var(--text-primary);
font-size: 30rpx;
font-weight: 600;
line-height: 1.3;
}
.carrier-iccid {
width: 100%;
display: flex;
align-items: flex-start;
gap: 12rpx;
margin-top: 14rpx;
}
.field-label,
.slot-label {
color: var(--text-tertiary);
font-size: 24rpx;
}
.iccid-value-text {
flex: 1;
min-width: 0;
color: var(--text-secondary);
font-size: 24rpx;
line-height: 1.35;
word-break: break-all;
}
.carrier-statuses {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10rpx;
margin-top: 14rpx;
}
.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;
}
.card-actions {
width: 100%;
display: flex;
flex-direction: column;
gap: 12rpx;
}
.action-button {
width: 100%;
height: 64rpx;
padding: 0 12rpx;
font-size: 24rpx;
line-height: 64rpx;
box-sizing: border-box;
&::after { border: none; }
}
}