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

first commit

Browse Source
This commit is contained in:
sexygoat
2026-04-11 14:42:14 +08:00
commit b962c9c716
62 changed files with 7323 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
pages/asset-package-history/asset-package-history.vue Normal file
View File

@@ -0,0 +1,240 @@
<template>
<view class="container">
<!-- 空状态提示 -->
<view v-if="packageList.length === 0 && !loading" class="empty-state">
<view class="empty-icon">📦</view>
<view class="empty-title">暂无套餐记录</view>
<view class="empty-desc">当前账号下暂无套餐历史信息</view>
</view>
<!-- 套餐列表 -->
<view v-else class="card package-card" v-for="(item, index) in packageList" :key="index">
<view class="package-header flex-row-sb">
<view class="package-name">{{ item.package_name }}</view>
<view class="tag-apple" :class="getStatusClass(item.status)">{{ item.status_name }}</view>
</view>
<view class="package-info">
<view class="info-row flex-row-sb">
<view class="info-label">套餐类型</view>
<view class="info-value">{{ item.package_type === 'formal' ? '普通套餐' : '加油包' }}</view>
</view>
<view class="info-row flex-row-sb">
<view class="info-label">使用类型</view>
<view class="info-value">{{ item.usage_type === 'single_card' ? '单卡' : '设备' }}</view>
</view>
<view class="info-row flex-row-sb">
<view class="info-label">激活时间</view>
<view class="info-value">{{ item.activated_at || '-' }}</view>
</view>
<view class="info-row flex-row-sb">
<view class="info-label">创建时间</view>
<view class="info-value">{{ item.created_at }}</view>
</view>
<view class="info-row flex-row-sb">
<view class="info-label">到期时间</view>
<view class="info-value">{{ item.expires_at || '-' }}</view>
</view>
<view class="info-row flex-row-sb">
<view class="info-label">优先级</view>
<view class="info-value">{{ item.priority }}</view>
</view>
</view>
<view class="divider"></view>
<view class="flow-info">
<view class="flow-title">流量信息</view>
<view class="flow-stats">
<view class="flow-item">
<view class="flow-label">已用真流量</view>
<view class="flow-value">{{ formatMB(item.data_usage_mb) }}</view>
</view>
<view class="flow-item">
<view class="flow-label">总量真流量</view>
<view class="flow-value">{{ formatMB(item.data_limit_mb) }}</view>
</view>
<view class="flow-item">
<view class="flow-label">剩余虚流量</view>
<view class="flow-value">{{ formatMB(item.virtual_remain_mb) }}</view>
</view>
</view>
<view class="progress-section">
<view class="progress-apple">
<view class="progress-fill" :style="{width: getUsagePercent(item) + '%'}"></view>
</view>
</view>
</view>
</view>
<!-- 加载更多 -->
<view class="load-more" v-if="packageList.length > 0">
<text v-if="loading">加载中...</text>
<text v-else-if="noMore">没有更多了</text>
<text v-else @tap="loadMore">点击加载更多</text>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { assetApi } from '@/api/index.js';
import { useUserStore } from '@/store/index.js';
const userStore = useUserStore();
let packageList = reactive([]);
let loading = ref(false);
let noMore = ref(false);
let page = ref(1);
const pageSize = 10;
const getStatusClass = (status) => {
const classMap = {
'0': 'tag-warning',
'1': 'tag-success',
'2': 'tag-primary',
'3': 'tag-secondary',
'4': 'tag-danger'
};
return classMap[status] || '';
};
const formatMB = (mb) => {
if (!mb) return '0';
if (mb >= 1024) {
return (mb / 1024).toFixed(2) + ' GB';
}
return mb + ' MB';
};
const getUsagePercent = (item) => {
if (!item.data_limit_mb) return 0;
return Math.min((item.data_usage_mb / item.data_limit_mb) * 100, 100).toFixed(2);
};
const formatDate = (dateStr) => {
if (!dateStr) return '-';
return dateStr.split('T').join(' ').slice(0, 19);
};
const loadPackageList = async (append = false) => {
if (loading.value || noMore.value) return;
loading.value = true;
try {
const data = await assetApi.getPackageHistory(
userStore.state.identifier,
page.value,
pageSize
);
const newData = (data.items || []).map(item => ({
...item,
activated_at: item.activated_at ? formatDate(item.activated_at) : '',
created_at: formatDate(item.created_at),
expires_at: item.expires_at ? formatDate(item.expires_at) : ''
}));
if (append) {
packageList.push(...newData);
} else {
packageList.splice(0, packageList.length, ...newData);
}
if (newData.length < pageSize) {
noMore.value = true;
} else {
page.value++;
}
} catch (e) {
console.error('加载套餐历史失败', e);
}
loading.value = false;
};
const loadMore = () => {
if (!noMore.value) {
loadPackageList(true);
}
};
onMounted(() => {
loadPackageList();
});
</script>
<style lang="scss" scoped>
.container {
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 40rpx;
min-height: 400rpx;
.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; }
}
.package-card {
margin-bottom: var(--space-md);
.package-header {
margin-bottom: var(--space-md);
.package-name { font-size: 32rpx; font-weight: 600; color: var(--text-primary); }
}
.package-info {
.info-row {
padding: var(--space-xs) 0;
.info-label { font-size: 24rpx; color: var(--text-tertiary); }
.info-value { font-size: 24rpx; color: var(--text-primary); }
}
}
.divider {
height: 1rpx;
background: var(--gray-200);
margin: var(--space-md) 0;
}
.flow-info {
.flow-title { font-size: 26rpx; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-sm); }
.flow-stats {
display: flex;
justify-content: space-between;
margin-bottom: var(--space-sm);
.flow-item {
text-align: center;
.flow-label { font-size: 20rpx; color: var(--text-tertiary); margin-bottom: 4rpx; }
.flow-value { font-size: 26rpx; font-weight: 600; color: var(--text-primary); }
}
}
.progress-section {
.progress-apple {
width: 100%;
height: 8rpx;
background: var(--gray-200);
border-radius: var(--radius-small);
overflow: hidden;
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
border-radius: var(--radius-small);
}
}
}
}
}
.load-more {
text-align: center;
padding: var(--space-lg);
color: var(--text-tertiary);
font-size: 24rpx;
}
}
.tag-secondary { background: var(--gray-200) !important; color: var(--gray-600) !important; }
</style>

203
pages/auth/auth.vue Normal file
View File

@@ -0,0 +1,203 @@
<template>
<view class="container">
<view class="card" v-for="item in list" :key="item.iccid">
<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="iccid">ICCID: {{ item.iccid }}</view>
<view class="operator">运营商: {{ getLogo(item.category).name }}</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">
<view class="modal-content" @tap.stop>
<view class="modal-close" @tap="closeModal">✕</view>
<view class="modal-body">
<view class="modal-title">实名认证</view>
<view class="iccid-value">{{ currentModalIccid }}</view>
<view class="modal-button" @tap="doRealName">点击复制ICCID并跳转实名</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { assetApi, realnameApi } from '@/api/index.js';
import { useUserStore } from '@/store/index.js';
const userStore = useUserStore();
let list = reactive([]);
let showIccidModal = ref(false);
let currentModalIccid = ref('');
let currentCard = ref(null);
let opratorList = reactive([
{ category: '124', logo: 'https://img2.baidu.com/it/u=139558247,3893370039&fm=253&fmt=auto?w=529&h=500', name: '中国电信' },
{ category: '125', logo: 'https://img1.baidu.com/it/u=2816777816,1756344384&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500', name: '中国联通' },
{ category: '126', logo: 'https://img2.baidu.com/it/u=915783975,1594870591&fm=253&fmt=auto&app=120&f=PNG?w=182&h=182', name: '中国移动' }
]);
const getLogo = (category) => {
const operator = opratorList.find(item => item.category === category);
return operator || opratorList[0];
};
const loadCards = async () => {
try {
const data = await assetApi.getInfo(userStore.state.identifier);
if (data.cards && data.cards.length > 0) {
list.splice(0, list.length, ...data.cards.map(card => ({
iccid: card.iccid,
category: card.carrier_name.includes('电信') ? '124' : card.carrier_name.includes('联通') ? '125' : '126',
isRealName: card.real_name_status === 1
})));
}
} catch (e) {
console.error('加载卡列表失败', e);
}
};
const toReal = async (card) => {
currentCard.value = card;
currentModalIccid.value = card.iccid;
showIccidModal.value = true;
};
const closeModal = () => {
showIccidModal.value = false;
};
const doRealName = async () => {
try {
const data = await realnameApi.getLink(userStore.state.identifier, currentModalIccid.value);
if (data.realname_url) {
uni.setClipboardData({
data: currentModalIccid.value,
success: () => {
uni.showToast({ title: 'ICCID已复制', icon: 'success' });
}
});
closeModal();
setTimeout(() => {
window.location.href = data.realname_url;
}, 1500);
}
} catch (e) {
console.error('获取实名链接失败', e);
}
};
onMounted(() => {
loadCards();
});
</script>
<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%; }
}
}
}
.btn-apple {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--radius-small);
font-weight: 500;
font-size: 26rpx;
line-height: 1;
cursor: pointer;
padding: 20rpx;
background: var(--gray-100);
color: var(--text-primary);
&.btn-primary { background: var(--primary); color: var(--text-inverse); }
&.btn-success { background: var(--success); color: var(--text-inverse); }
}
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.modal-content {
background: var(--bg-primary);
border-radius: var(--radius-large);
width: 620rpx;
max-width: 90%;
overflow: hidden;
position: relative;
}
.modal-close {
position: absolute;
top: 24rpx; left: 24rpx;
width: 48rpx; height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
color: var(--gray-600);
cursor: pointer;
}
.modal-body {
padding: 60rpx 32rpx 32rpx;
display: flex;
flex-direction: column;
align-items: center;
gap: 32rpx;
}
.modal-title {
font-size: 32rpx;
font-weight: 600;
color: var(--text-primary);
text-align: center;
}
.iccid-value {
font-size: 40rpx;
font-weight: bold;
color: var(--primary);
text-align: center;
word-break: break-all;
line-height: 1.4;
}
.modal-button {
padding: 24rpx 32rpx;
background: var(--success);
color: var(--text-inverse);
font-size: 28rpx;
font-weight: 500;
text-align: center;
border-radius: var(--radius-small);
cursor: pointer;
}
</style>

89
pages/bind/bind.vue Normal file
View File

@@ -0,0 +1,89 @@
<template>
<view class="container">
<view class="card flex-col-g20">
<view class="flex-row-g20">
<label for="">手机号:</label>
<up-input placeholder="请输入绑定的手机号" border="surround" v-model="bind.phone" />
</view>
<view class="flex-row-g20">
<label for="">验证码:</label>
<up-input placeholder="验证码" v-model="bind.code">
<template #suffix>
<up-button @tap="getCode" :text="codeText" type="success" :disabled="cooldown > 0"></up-button>
</template>
</up-input>
</view>
<view class="btn">
<up-button type="primary" @tap="bindPhone">绑定手机号</up-button>
</view>
</view>
</view>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { authApi } from '@/api/index.js';
let bind = reactive({
phone: '',
code: ''
});
let cooldown = ref(0);
let codeText = ref('获取验证码');
let timer = null;
const getCode = async () => {
if (!bind.phone) {
uni.showToast({ title: '请输入手机号', icon: 'none' });
return;
}
if (!/^1[3-9]\d{9}$/.test(bind.phone)) {
uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
return;
}
try {
const data = await authApi.sendCode(bind.phone, 'bind_phone');
cooldown.value = data.cooldown_seconds || 60;
codeText.value = `${cooldown.value}s`;
timer = setInterval(() => {
cooldown.value--;
if (cooldown.value <= 0) {
clearInterval(timer);
codeText.value = '获取验证码';
} else {
codeText.value = `${cooldown.value}s`;
}
}, 1000);
uni.showToast({ title: '验证码已发送', icon: 'success' });
} catch (e) {
console.error('发送验证码失败', e);
}
};
const bindPhone = async () => {
if (!bind.phone || !bind.code) {
uni.showToast({ title: '手机号和验证码都不能为空', icon: 'none' });
return;
}
try {
await authApi.bindPhone(bind.phone, bind.code);
uni.showToast({ title: '绑定成功', icon: 'success' });
setTimeout(() => {
uni.navigateBack();
}, 1500);
} catch (e) {
console.error('绑定手机号失败', e);
}
};
</script>
<style>
</style>

152
pages/change-phone/change-phone.vue Normal file
View File

@@ -0,0 +1,152 @@
<template>
<view class="container">
<view class="card">
<view class="form-item">
<view class="label">原手机号</view>
<up-input placeholder="请输入原手机号" border="surround" v-model="form.oldPhone" />
</view>
<view class="form-item">
<view class="label">验证码</view>
<up-input placeholder="请输入原手机号验证码" border="surround" v-model="form.oldCode">
<template #suffix>
<up-button @tap="sendOldCode" :text="oldCodeText" type="success" size="small" :disabled="oldCooldown > 0"></up-button>
</template>
</up-input>
</view>
<view class="form-item">
<view class="label">新手机号</view>
<up-input placeholder="请输入新手机号" border="surround" v-model="form.newPhone" />
</view>
<view class="form-item">
<view class="label">验证码</view>
<up-input placeholder="请输入新手机号验证码" border="surround" v-model="form.newCode">
<template #suffix>
<up-button @tap="sendNewCode" :text="newCodeText" type="success" size="small" :disabled="newCooldown > 0"></up-button>
</template>
</up-input>
</view>
<view class="btn-wrapper">
<up-button type="primary" @click="submit">确认更换</up-button>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { authApi } from '@/api/index.js';
const form = reactive({
oldPhone: '',
oldCode: '',
newPhone: '',
newCode: ''
});
let oldCooldown = ref(0);
let newCooldown = ref(0);
let oldCodeText = ref('获取验证码');
let newCodeText = ref('获取验证码');
let oldTimer = null;
let newTimer = null;
const sendOldCode = async () => {
if (oldCooldown.value > 0) return;
if (!form.oldPhone) {
uni.showToast({ title: '请输入原手机号', icon: 'none' });
return;
}
try {
const data = await authApi.sendCode(form.oldPhone, 'change_phone_old');
oldCooldown.value = data.cooldown_seconds || 60;
oldCodeText.value = `${oldCooldown.value}s`;
oldTimer = setInterval(() => {
oldCooldown.value--;
if (oldCooldown.value <= 0) {
clearInterval(oldTimer);
oldCodeText.value = '获取验证码';
} else {
oldCodeText.value = `${oldCooldown.value}s`;
}
}, 1000);
uni.showToast({ title: '验证码已发送', icon: 'success' });
} catch (e) {
console.error('发送验证码失败', e);
}
};
const sendNewCode = async () => {
if (newCooldown.value > 0) return;
if (!form.newPhone) {
uni.showToast({ title: '请输入新手机号', icon: 'none' });
return;
}
try {
const data = await authApi.sendCode(form.newPhone, 'change_phone_new');
newCooldown.value = data.cooldown_seconds || 60;
newCodeText.value = `${newCooldown.value}s`;
newTimer = setInterval(() => {
newCooldown.value--;
if (newCooldown.value <= 0) {
clearInterval(newTimer);
newCodeText.value = '获取验证码';
} else {
newCodeText.value = `${newCooldown.value}s`;
}
}, 1000);
uni.showToast({ title: '验证码已发送', icon: 'success' });
} catch (e) {
console.error('发送验证码失败', e);
}
};
const submit = async () => {
if (!form.oldPhone || !form.oldCode) {
uni.showToast({ title: '请填写原手机号信息', icon: 'none' });
return;
}
if (!form.newPhone || !form.newCode) {
uni.showToast({ title: '请填写新手机号信息', icon: 'none' });
return;
}
try {
await authApi.changePhone(form.oldPhone, form.oldCode, form.newPhone, form.newCode);
uni.showToast({ title: '更换成功', icon: 'success' });
setTimeout(() => {
uni.navigateBack();
}, 1500);
} catch (e) {
console.error('更换手机号失败', e);
}
};
</script>
<style lang="scss" scoped>
.container {
.card {
.form-item {
margin-bottom: var(--space-lg);
.label {
font-size: 28rpx;
font-weight: 500;
color: var(--text-primary);
margin-bottom: var(--space-sm);
}
}
.btn-wrapper {
margin-top: var(--space-xl);
}
}
}
</style>

217
pages/device-exchange/device-exchange.vue Normal file
View File

@@ -0,0 +1,217 @@
<template>
<view class="container">
<view v-if="!exchangeData && !loading" class="empty-state">
<view class="empty-icon">🔄</view>
<view class="empty-title">暂无换货记录</view>
<view class="empty-desc">当前账号下暂无设备换货记录</view>
</view>
<view v-else-if="exchangeData" class="card exchange-card">
<view class="exchange-header flex-row-sb">
<view class="exchange-no">{{ exchangeData.exchange_no }}</view>
<view class="tag-apple" :class="getStatusClass(exchangeData.status)">{{ exchangeData.status_text }}</view>
</view>
<view class="exchange-info">
<view class="info-row flex-row-sb">
<view class="info-label">换货原因</view>
<view class="info-value">{{ exchangeData.exchange_reason }}</view>
</view>
<view class="info-row flex-row-sb">
<view class="info-label">申请时间</view>
<view class="info-value">{{ formatTime(exchangeData.created_at) }}</view>
</view>
<view class="info-row flex-row-sb" v-if="exchangeData.recipient_name">
<view class="info-label">收件人</view>
<view class="info-value">{{ exchangeData.recipient_name }}</view>
</view>
<view class="info-row flex-row-sb" v-if="exchangeData.recipient_phone">
<view class="info-label">联系电话</view>
<view class="info-value">{{ exchangeData.recipient_phone }}</view>
</view>
<view class="info-row flex-row-sb" v-if="exchangeData.recipient_address">
<view class="info-label">收货地址</view>
<view class="info-value address-value">{{ exchangeData.recipient_address }}</view>
</view>
</view>
<view class="exchange-actions" v-if="exchangeData.status === 1">
<button class="btn-apple btn-primary" @tap="openPopup">填写信息</button>
</view>
</view>
<up-popup :show="showPopup" mode="center" @close="showPopup=false">
<view class="popup-content">
<view class="popup-title">填写换货信息</view>
<view class="form-item">
<view class="form-label">收件人姓名</view>
<up-input placeholder="请输入收件人姓名" border="surround" v-model="form.recipient_name" />
</view>
<view class="form-item">
<view class="form-label">收件人电话</view>
<up-input placeholder="请输入收件人电话" border="surround" v-model="form.recipient_phone" />
</view>
<view class="form-item">
<view class="form-label">收货地址</view>
<up-input placeholder="请输入详细收货地址" border="surround" v-model="form.recipient_address" />
</view>
<view class="popup-btn-group">
<button class="btn-apple btn-secondary" @tap="showPopup=false">取消</button>
<button class="btn-apple btn-primary" @tap="submitExchange">提交</button>
</view>
</view>
</up-popup>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { exchangeApi } from '@/api/index.js';
import { useUserStore } from '@/store/index.js';
const userStore = useUserStore();
let exchangeData = reactive(null);
let loading = ref(false);
let showPopup = ref(false);
let form = reactive({
recipient_name: '',
recipient_phone: '',
recipient_address: ''
});
const getStatusClass = (status) => {
const classMap = {
1: 'tag-warning',
2: 'tag-primary',
3: 'tag-success',
4: 'tag-success',
5: 'tag-danger'
};
return classMap[status] || '';
};
const formatTime = (time) => {
if (!time) return '-';
return time.split('T').join(' ').slice(0, 19);
};
const loadExchange = async () => {
loading.value = true;
try {
const data = await exchangeApi.getPending(userStore.state.identifier);
if (data) {
exchangeData.splice(0, exchangeData.length, data);
}
} catch (e) {
console.error('加载换货记录失败', e);
}
loading.value = false;
};
const openPopup = () => {
form.recipient_name = exchangeData?.recipient_name || '';
form.recipient_phone = exchangeData?.recipient_phone || '';
form.recipient_address = exchangeData?.recipient_address || '';
showPopup.value = true;
};
const submitExchange = async () => {
if (!form.recipient_name) {
uni.showToast({ title: '请输入收件人姓名', icon: 'none' });
return;
}
if (!form.recipient_phone) {
uni.showToast({ title: '请输入收件人电话', icon: 'none' });
return;
}
if (!form.recipient_address) {
uni.showToast({ title: '请输入收货地址', icon: 'none' });
return;
}
try {
await exchangeApi.submitShippingInfo(
exchangeData.id,
form.recipient_name,
form.recipient_phone,
form.recipient_address
);
uni.showToast({ title: '提交成功', icon: 'success' });
showPopup.value = false;
loadExchange();
} catch (e) {
console.error('提交换货信息失败', e);
}
};
onMounted(() => {
loadExchange();
});
</script>
<style lang="scss" scoped>
.container {
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 40rpx;
min-height: 60vh;
.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; margin-bottom: 40rpx; }
.empty-btn { width: 100%; max-width: 400rpx; }
}
.exchange-card {
.exchange-header {
margin-bottom: var(--space-md);
.exchange-no { font-size: 28rpx; font-weight: 600; color: var(--text-primary); }
}
.exchange-info {
.info-row {
padding: var(--space-xs) 0;
.info-label { font-size: 24rpx; color: var(--text-tertiary); }
.info-value { font-size: 24rpx; color: var(--text-primary); }
.address-value { max-width: 400rpx; text-align: right; }
}
}
.exchange-actions {
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1rpx solid var(--gray-200);
.btn-apple { width: 100%; }
}
}
}
.popup-content {
width: 600rpx;
padding: 30rpx;
.popup-title {
font-size: 32rpx;
font-weight: 600;
color: var(--text-primary);
text-align: center;
margin-bottom: var(--space-lg);
}
.form-item {
margin-bottom: var(--space-md);
.form-label {
font-size: 26rpx;
color: var(--text-secondary);
margin-bottom: var(--space-xs);
}
}
.popup-btn-group {
display: flex;
gap: var(--space-md);
margin-top: var(--space-lg);
.btn-apple { flex: 1; }
}
}
</style>

21
pages/error/error.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<view class="error">
请在微信中打开...
</view>
</template>
<script setup>
</script>
<style lang="less" scoped>
.error{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
color: #999;
}
</style>

515
pages/index/index.vue Normal file
View File

@@ -0,0 +1,515 @@
<template>
<view class="container">
<UserInfoCard :currentCardNo="currentCardNo" :deviceInfo="deviceInfo" :onlineStatus="onlineStatus" />
<DeviceStatusCard v-if="userInfo.isDevice" :deviceInfo="deviceInfo" :isRealName="isRealName"
@authentication="enterDetail('authentication')" />
<VoiceCard v-if="!userInfo.isDevice" :voiceStats="voiceStats" :dateRangeText="dateRangeText"
@openDatePicker="openDateRangePicker" />
<TrafficCard :deviceInfo="deviceInfo" :isDevice="userInfo.isDevice" />
<WhitelistCard v-if="!userInfo.isDevice" :whitelistData="whitelistData" @refresh="refreshWhitelist"
@add="showAddWhitelistDialog" @showSms="showSmsCodeDialog" />
<WifiCard v-if="userInfo.isDevice" :deviceInfo="deviceInfo" @modify="modifyWifi" @copy="copy" />
<FunctionCard :realNameStatus="realNameStatus" :alreadyBindPhone="alreadyBindPhone"
:isDevice="userInfo.isDevice" @enter="enterDetail" @sync="onSync">
<!-- 修改WIFI弹窗 -->
<up-popup :show="showModifyWifi" mode="center" @close="showModifyWifi=false">
<view class="wifi-popup">
<view class="title mb-md">修改WIFI</view>
<view class="flex-col-g20">
<view class="flex-col-g8">
<label class="caption">名称:</label>
<up-input placeholder="WIFI名称" border="surround" v-model="wifi_info.ssid" />
</view>
<view class="flex-col-g8">
<label class="caption">密码:</label>
<up-input placeholder="WIFI密码" border="surround" v-model="wifi_info.pwd" />
</view>
</view>
<view class="btn-group mt-20">
<button class="btn-apple btn-secondary" @tap="showModifyWifi=false">取消</button>
<button class="btn-apple btn-primary" @tap="confirmModify">确定</button>
</view>
</view>
</up-popup>
<!-- 重启设备 -->
<up-modal title="您确定要重启设备吗？" :show="restartShow" showCancelButton @confirm="YesRestart"
@cancel="restartShow=false" />
<!-- 恢复出厂设置 -->
<up-modal title="您确定要恢复出厂设置吗？" :show="recoverShow" showCancelButton @confirm="YesRecover"
@cancel="recoverShow=false" />
<!-- 退出登录 -->
<up-modal title="您确定要退出登录吗？" :show="logoutShow" showCancelButton @confirm="YesLogout"
@cancel="logoutShow=false" />
<!-- 添加白名单弹窗 -->
<up-popup :show="showAddWhitelist" mode="center" @close="showAddWhitelist=false">
<view class="wifi-popup">
<view class="title mb-md">添加白名单</view>
<view class="flex-col-g20">
<view class="flex-col-g8">
<label class="caption">姓名:</label>
<up-input placeholder="请输入姓名" border="surround" v-model="whitelistForm.name" />
</view>
<view class="flex-col-g8">
<label class="caption">手机号:</label>
<up-input placeholder="请输入手机号" border="surround" v-model="whitelistForm.phone" />
</view>
</view>
<view class="btn-group mt-20">
<button class="btn-apple btn-secondary" @tap="showAddWhitelist=false">取消</button>
<button class="btn-apple btn-primary" @tap="confirmAddWhitelist">确定</button>
</view>
</view>
</up-popup>
<!-- 上传短信码弹窗 -->
<up-popup :show="showSmsCode" mode="center" @close="showSmsCode=false">
<view class="wifi-popup">
<view class="title mb-md">上传短信验证码</view>
<view class="flex-col-g20">
<view class="flex-col-g8">
<label class="caption">手机号: {{smsCodePhone}}</label>
</view>
<view class="flex-col-g8">
<label class="caption">验证码:</label>
<up-input placeholder="请输入短信验证码" border="surround" v-model="smsCode" />
</view>
</view>
<view class="btn-group mt-20">
<button class="btn-apple btn-secondary" @tap="showSmsCode=false">取消</button>
<button class="btn-apple btn-primary" @tap="confirmUploadSmsCode">确定</button>
</view>
</view>
</up-popup>
</FunctionCard>
<view class="bottom-spacer"></view>
<!-- 日期选择器弹窗 -->
<up-datetime-picker v-if="!userInfo.isDevice" :show="showStartDatePicker" v-model="startDateTimestamp"
mode="date" @confirm="onStartDateConfirm" @cancel="showStartDatePicker=false"
@close="showStartDatePicker=false"></up-datetime-picker>
<up-datetime-picker v-if="!userInfo.isDevice" :show="showEndDatePicker" v-model="endDateTimestamp" mode="date"
@confirm="onEndDateConfirm" @cancel="showEndDatePicker=false"
@close="showEndDatePicker=false"></up-datetime-picker>
<FloatingButton @tap="connectKF" />
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
computed
} from 'vue';
import UserInfoCard from '@/components/UserInfoCard.vue';
import DeviceStatusCard from '@/components/DeviceStatusCard.vue';
import VoiceCard from '@/components/VoiceCard.vue';
import TrafficCard from '@/components/TrafficCard.vue';
import WhitelistCard from '@/components/WhitelistCard.vue';
import WifiCard from '@/components/WifiCard.vue';
import FunctionCard from '@/components/FunctionCard.vue';
import FloatingButton from '@/components/FloatingButton.vue';
import { assetApi, deviceApi } from '@/api/index.js';
import { useUserStore } from '@/store/index.js';
const userStore = useUserStore();
let showModifyWifi = ref(false);
let restartShow = ref(false);
let recoverShow = ref(false);
let logoutShow = ref(false);
let loading = ref(false);
let userInfo = reactive({
isDevice: true,
avatar: ''
});
let deviceInfo = reactive({
battery: 100,
connect: 0,
statusStr: '正常',
expireDate: '',
currentIccid: '',
category: '',
phone: '',
flowSize: 0,
totalBytesCnt: 0,
ssidName: '',
ssidPwd: '',
rssi: '强',
onlineStatus: '0',
connCnt: 0,
run_time: 0,
last_online_time: '',
lan_ip: '',
kf_url: '',
mchList: []
});
let isRealName = ref(false);
let alreadyBindPhone = ref(false);
let realNameStatus = ref('');
let wifi_info = reactive({
ssid: '',
pwd: ''
});
let currentCardNo = ref('');
let accountName = ref('');
let voiceCardStatus = reactive({
cardStatus: '',
online: '离线'
});
let voiceStats = reactive({
totalVoice: 0,
usedVoice: 0,
remainingVoice: 0
});
let showStartDatePicker = ref(false);
let showEndDatePicker = ref(false);
let startDate = ref('');
let endDate = ref('');
let startDateTimestamp = ref(Date.now());
let endDateTimestamp = ref(Date.now());
let dateRangeText = ref('');
let whitelistData = reactive([]);
let showAddWhitelist = ref(false);
let whitelistForm = reactive({
name: '',
phone: ''
});
let showSmsCode = ref(false);
let smsCodePhone = ref('');
let smsCode = ref('');
const loadAssetInfo = async () => {
const identifier = userStore.state.identifier;
if (!identifier) return;
loading.value = true;
try {
const data = await assetApi.getInfo(identifier);
userInfo.isDevice = data.asset_type === 'device';
currentCardNo.value = data.identifier;
deviceInfo.statusStr = data.status === 1 ? '正常' : '禁用';
isRealName.value = data.real_name_status === 1;
realNameStatus.value = data.real_name_status === 1 ? '已实名' : '未实名';
deviceInfo.flowSize = data.package_remain_mb || 0;
deviceInfo.totalBytesCnt = data.package_total_mb || 0;
deviceInfo.currentIccid = data.identifier;
if (data.device_realtime) {
const rt = data.device_realtime;
deviceInfo.onlineStatus = rt.online_status === 1 ? '1' : '0';
deviceInfo.battery = rt.battery_level || 100;
deviceInfo.ssidName = rt.ssid || '';
deviceInfo.ssidPwd = rt.wifi_password || '';
deviceInfo.lan_ip = rt.lan_ip || '';
deviceInfo.connCnt = rt.client_number || 0;
deviceInfo.run_time = rt.run_time || 0;
deviceInfo.rssi = rt.rssi || '强';
}
if (data.cards && data.cards.length > 0) {
deviceInfo.mchList = data.cards.map(card => ({
iccidMark: card.iccid,
category: card.slot_position
}));
}
} catch (e) {
console.error('加载资产信息失败', e);
}
loading.value = false;
};
const modifyWifi = () => {
wifi_info.ssid = deviceInfo.ssidName;
wifi_info.pwd = deviceInfo.ssidPwd;
showModifyWifi.value = true;
};
const confirmModify = async () => {
try {
await deviceApi.setWifi(
userStore.state.identifier,
wifi_info.ssid,
wifi_info.pwd,
true
);
deviceInfo.ssidName = wifi_info.ssid;
deviceInfo.ssidPwd = wifi_info.pwd;
uni.showToast({ title: '修改成功', icon: 'success' });
} catch (e) {
console.error('修改WiFi失败', e);
}
showModifyWifi.value = false;
};
const connectKF = () => uni.showToast({
title: '正在跳转客服',
icon: 'none'
});
const enterBack = () => uni.showToast({
title: '正在跳转后台',
icon: 'none'
});
const YesRestart = async () => {
try {
await deviceApi.reboot(userStore.state.identifier);
uni.showToast({ title: '重启指令已发送', icon: 'success' });
} catch (e) {
console.error('重启设备失败', e);
}
restartShow.value = false;
};
const copy = (content) => {
uni.setClipboardData({
data: content,
success: () => uni.showToast({
title: '复制成功',
icon: 'none'
})
});
};
const YesRecover = async () => {
try {
await deviceApi.factoryReset(userStore.state.identifier);
uni.showToast({ title: '恢复出厂设置指令已发送', icon: 'success' });
} catch (e) {
console.error('恢复出厂设置失败', e);
}
recoverShow.value = false;
};
const YesLogout = () => {
uni.clearStorageSync();
uni.reLaunch({
url: '/pages/login/login'
});
logoutShow.value = false;
};
const onlineStatus = computed(() => {
if (!userInfo.isDevice) return voiceCardStatus.online || '离线';
return deviceInfo.onlineStatus === '1' ? '在线' : '离线';
});
const initCurrentMonth = () => {
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
startDate.value = `${year}-${month}-01`;
const lastDay = new Date(year, parseInt(month), 0).getDate();
endDate.value = `${year}-${month}-${String(lastDay).padStart(2, '0')}`;
updateDateRangeText();
};
const updateDateRangeText = () => {
if (startDate.value && endDate.value) {
const [sYear, sMonth, sDay] = startDate.value.split('-');
const [eYear, eMonth, eDay] = endDate.value.split('-');
dateRangeText.value = `${sYear}-${sMonth}-${sDay} 至 ${eYear}-${eMonth}-${eDay}`;
}
};
const openDateRangePicker = () => {
if (startDate.value) startDateTimestamp.value = new Date(startDate.value).getTime();
showStartDatePicker.value = true;
};
const onStartDateConfirm = (e) => {
const date = new Date(e.value);
startDate.value =
`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
showStartDatePicker.value = false;
setTimeout(() => {
if (endDate.value) endDateTimestamp.value = new Date(endDate.value).getTime();
else endDateTimestamp.value = e.value;
showEndDatePicker.value = true;
}, 300);
};
const onEndDateConfirm = (e) => {
const date = new Date(e.value);
endDate.value =
`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
showEndDatePicker.value = false;
if (new Date(startDate.value) > new Date(endDate.value)) {
uni.showToast({
title: '开始日期不能大于结束日期',
icon: 'none'
});
return;
}
updateDateRangeText();
};
const refreshWhitelist = () => uni.showToast({
title: '刷新成功',
icon: 'success'
});
const showAddWhitelistDialog = () => {
whitelistForm.name = '';
whitelistForm.phone = '';
showAddWhitelist.value = true;
};
const confirmAddWhitelist = () => {
if (!whitelistForm.name || !whitelistForm.phone) {
uni.showToast({
title: '请输入姓名和手机号',
icon: 'none'
});
return;
}
const phoneReg = /^1[3-9]\d{9}$/;
if (!phoneReg.test(whitelistForm.phone)) {
uni.showToast({
title: '请输入正确的手机号',
icon: 'none'
});
return;
}
whitelistData.push({
name: whitelistForm.name,
phone: whitelistForm.phone,
state: '1',
createTime: new Date().toISOString().split('T')[0]
});
uni.showToast({
title: '添加成功',
icon: 'none'
});
showAddWhitelist.value = false;
};
const showSmsCodeDialog = (phone, state) => {
if (state !== '5' && state !== '3') {
uni.showToast({
title: '当前状态无需上传短信验证码',
icon: 'none'
});
return;
}
smsCodePhone.value = phone;
smsCode.value = '';
showSmsCode.value = true;
};
const confirmUploadSmsCode = () => {
if (!smsCode.value) {
uni.showToast({
title: '请输入短信验证码',
icon: 'none'
});
return;
}
uni.showToast({
title: '操作成功',
icon: 'success'
});
showSmsCode.value = false;
};
const onSync = () => {
uni.showToast({ title: '同步成功', icon: 'success' });
};
const enterDetail = (name) => {
switch (name) {
case 'package-order':
uni.navigateTo({
url: '/pages/package-order/package-order'
});
break;
case 'order-list':
uni.navigateTo({
url: '/pages/order-list/order-list'
});
break;
case 'back':
enterBack();
break;
case 'switch':
uni.navigateTo({
url: '/pages/switch/switch'
});
break;
case 'asset-package':
uni.navigateTo({
url: '/pages/asset-package-history/asset-package-history'
});
break;
case 'bind':
uni.navigateTo({
url: '/pages/bind/bind'
});
break;
case 'change-phone':
uni.navigateTo({
url: '/pages/change-phone/change-phone'
});
break;
case 'device-exchange':
uni.navigateTo({
url: '/pages/device-exchange/device-exchange'
});
break;
case 'wallet':
uni.navigateTo({
url: '/pages/my-wallet/my-wallet'
});
break;
case 'authentication':
uni.navigateTo({
url: '/pages/auth/auth'
});
break;
case 'recover':
restartShow.value = true;
break;
case 'restart':
restartShow.value = true;
break;
case 'out':
logoutShow.value = true;
break;
}
};
onMounted(() => {
initCurrentMonth();
loadAssetInfo();
});
</script>
<style scoped lang="scss">
.wifi-popup {
width: 600rpx;
padding: 30rpx;
.title {
font-size: 32rpx;
font-weight: 600;
color: var(--text-primary);
}
}
.bottom-spacer {
height: 120rpx;
}
</style>

116
pages/login/login.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<view class="container">
<view class="card">
<view class="title-login">
登录
</view>
<view class="input">
<up-input class="mt-30" v-model="identifier" placeholder="请输入SN/IMEI/虚拟号/ICCID/MSISDN"></up-input>
</view>
<view class="button">
<up-button class="mt-30 btn-apple btn-primary" type="primary" :loading="loading" @click="login">立即登录</up-button>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { authApi } from '@/api/index.js';
import { useUserStore } from '@/store/index.js';
import { APP_ID } from '@/utils/env.js';
const userStore = useUserStore();
const identifier = ref('');
const loading = ref(false);
const isWechat = /micromessenger/i.test(navigator.userAgent);
const getCode = () => {
const params = new URLSearchParams(window.location.search);
return params.get('code');
};
const clearCode = () => {
window.history.replaceState({}, '', window.location.pathname);
};
const redirectToWxAuth = (assetToken) => {
const redirectUri = encodeURIComponent(window.location.href.split('?')[0]);
const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APP_ID}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=${assetToken}#wechat_redirect`;
window.location.href = url;
};
const login = async () => {
if (!identifier.value) {
uni.showToast({ title: '请输入SN/IMEI/虚拟号/ICCID/MSISDN', icon: 'none' });
return;
}
loading.value = true;
try {
const verifyData = await authApi.verifyAsset(identifier.value);
userStore.setAssetToken(verifyData.asset_token);
userStore.setIdentifier(identifier.value);
// if (!isWechat) {
// uni.showToast({ title: '请在微信中打开', icon: 'none' });
// loading.value = false;
// return;
// }
redirectToWxAuth(verifyData.asset_token);
} catch (e) {
console.error('登录失败', e);
loading.value = false;
}
};
const handleWechatCallback = async () => {
const code = getCode();
const assetToken = userStore.state.assetToken;
if (!code || !assetToken) return;
loading.value = true;
clearCode();
try {
const loginData = await authApi.wechatLogin(assetToken, code);
userStore.setToken(loginData.token);
uni.setStorageSync('identifier', userStore.state.identifier);
uni.redirectTo({ url: '/pages/index/index' });
} catch (e) {
console.error('微信登录失败', e);
loading.value = false;
}
};
onMounted(() => {
handleWechatCallback();
});
</script>
<style lang="scss" scoped>
.container {
padding-top: 30vh;
.title-login {
color: var(--text-primary);
font-size: 24px;
text-align: center;
margin: 20px 0;
font-weight: bold;
}
.input {
margin: 70rpx 0 50rpx 0;
}
.button {
margin-bottom: 40rpx;
}
}
</style>

397
pages/my-wallet/my-wallet.vue Normal file
View File

@@ -0,0 +1,397 @@
<template>
<view class="container">
<view class="wallet-card">
<view class="balance-section">
<view class="balance-label">账户余额(元)</view>
<view class="balance-amount">{{ formatMoney(walletDetail.balance) }}</view>
</view>
<view class="wallet-footer">
<view class="footer-item">
<view class="footer-label">冻结金额</view>
<view class="footer-value">{{ formatMoney(walletDetail.frozen_balance) }}</view>
</view>
<view class="footer-divider"></view>
<view class="footer-item">
<view class="footer-label">更新时间</view>
<view class="footer-value">{{ walletDetail.updated_at }}</view>
</view>
</view>
</view>
<view class="tab-section">
<view class="tab-header">
<view class="tab-indicator" :style="{ left: currentTab === 0 ? '8rpx' : '50%' }"></view>
<view class="tab-item" :class="{ active: currentTab === 0 }" @tap="onTabTap(0)">
<text>充值记录</text>
</view>
<view class="tab-item" :class="{ active: currentTab === 1 }" @tap="onTabTap(1)">
<text>钱包流水</text>
</view>
</view>
<swiper class="tab-swiper" :current="currentTab" @change="onSwiperChange" :circular="false" :acceleration="true">
<swiper-item class="swiper-item-content">
<scroll-view scroll-y class="list-content">
<view v-if="rechargeList.length === 0 && !rechargeLoading" class="empty-state">
<view class="empty-icon">📋</view>
<view class="empty-title">暂无充值记录</view>
</view>
<view v-else>
<view class="card record-card" v-for="(item, index) in rechargeList" :key="index">
<view class="record-header flex-row-sb">
<view class="record-no">{{ item.recharge_no }}</view>
<view class="tag-apple" :class="getRechargeStatusClass(item.status)">{{ item.status_name }}</view>
</view>
<view class="record-info">
<view class="info-row flex-row-sb">
<view class="info-label">充值金额</view>
<view class="info-value text-danger">+¥{{ formatMoney(item.amount) }}</view>
</view>
<view class="info-row flex-row-sb">
<view class="info-label">支付方式</view>
<view class="info-value">{{ item.payment_method || '-' }}</view>
</view>
<view class="info-row flex-row-sb">
<view class="info-label">自动购包</view>
<view class="info-value">{{ item.auto_purchase_status === '1' ? '已开启' : '未开启' }}</view>
</view>
<view class="info-row flex-row-sb">
<view class="info-label">创建时间</view>
<view class="info-value">{{ item.created_at }}</view>
</view>
</view>
</view>
<view class="load-more" v-if="rechargeList.length > 0">
<text v-if="rechargeLoading">加载中...</text>
<text v-else-if="rechargeNoMore">— 没有更多了 —</text>
<text v-else @tap="loadMoreRecharge">点击加载更多</text>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="swiper-item-content">
<scroll-view scroll-y class="list-content">
<view v-if="transactionList.length === 0 && !transactionLoading" class="empty-state">
<view class="empty-icon">💰</view>
<view class="empty-title">暂无钱包流水</view>
</view>
<view v-else>
<view class="card record-card" v-for="(item, index) in transactionList" :key="index">
<view class="record-header flex-row-sb">
<view class="record-type">{{ item.type_name }}</view>
<view class="record-amount" :class="item.amount >= 0 ? 'text-success' : 'text-danger'">
{{ item.amount >= 0 ? '+' : '' }}{{ formatMoney(item.amount) }}
</view>
</view>
<view class="record-info">
<view class="info-row flex-row-sb">
<view class="info-label">流水ID</view>
<view class="info-value text-ellipsis">{{ item.transaction_id }}</view>
</view>
<view class="info-row flex-row-sb">
<view class="info-label">变动后余额</view>
<view class="info-value">¥{{ formatMoney(item.balance_after) }}</view>
</view>
<view class="info-row flex-row-sb" v-if="item.remark">
<view class="info-label">备注</view>
<view class="info-value">{{ item.remark }}</view>
</view>
<view class="info-row flex-row-sb">
<view class="info-label">创建时间</view>
<view class="info-value">{{ item.created_at }}</view>
</view>
</view>
</view>
<view class="load-more" v-if="transactionList.length > 0">
<text v-if="transactionLoading">加载中...</text>
<text v-else-if="transactionNoMore">— 没有更多了 —</text>
<text v-else @tap="loadMoreTransaction">点击加载更多</text>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { walletApi } from '@/api/index.js';
import { useUserStore } from '@/store/index.js';
const userStore = useUserStore();
let currentTab = ref(0);
const onTabTap = (index) => {
currentTab.value = index;
};
const onSwiperChange = (e) => {
currentTab.value = e.detail.current;
};
const formatMoney = (amount) => {
if (!amount && amount !== 0) return '0.00';
return (amount / 100).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
let walletDetail = reactive({
balance: 0,
frozen_balance: 0,
updated_at: ''
});
let rechargeList = reactive([]);
let rechargeLoading = ref(false);
let rechargeNoMore = ref(false);
let rechargePage = ref(1);
const rechargePageSize = 5;
let transactionList = reactive([]);
let transactionLoading = ref(false);
let transactionNoMore = ref(false);
let transactionPage = ref(1);
const transactionPageSize = 5;
const getRechargeStatusClass = (status) => {
const classMap = {
'0': 'tag-warning',
'1': 'tag-success',
'2': 'tag-danger'
};
return classMap[status] || '';
};
const loadWalletDetail = async () => {
try {
const data = await walletApi.getDetail(userStore.state.identifier);
walletDetail.balance = data.balance || 0;
walletDetail.frozen_balance = data.frozen_balance || 0;
walletDetail.updated_at = data.updated_at || '';
} catch (e) {
console.error('加载钱包详情失败', e);
}
};
const loadRechargeList = async (append = false) => {
if (rechargeLoading.value || rechargeNoMore.value) return;
rechargeLoading.value = true;
try {
const data = await walletApi.getRecharges(
userStore.state.identifier,
rechargePage.value,
rechargePageSize
);
const newData = (data.items || []).map(item => ({
...item,
status_name: item.status === 1 ? '已支付' : item.status === 0 ? '待支付' : '已关闭'
}));
if (append) {
rechargeList.push(...newData);
} else {
rechargeList.splice(0, rechargeList.length, ...newData);
}
if (newData.length < rechargePageSize) {
rechargeNoMore.value = true;
} else {
rechargePage.value++;
}
} catch (e) {
console.error('加载充值记录失败', e);
}
rechargeLoading.value = false;
};
const loadTransactionList = async (append = false) => {
if (transactionLoading.value || transactionNoMore.value) return;
transactionLoading.value = true;
try {
const data = await walletApi.getTransactions(
userStore.state.identifier,
transactionPage.value,
transactionPageSize
);
const newData = (data.items || []).map(item => ({
...item,
type_name: item.type === 'recharge' ? '充值' : item.type === 'purchase' ? '消费' : '其他'
}));
if (append) {
transactionList.push(...newData);
} else {
transactionList.splice(0, transactionList.length, ...newData);
}
if (newData.length < transactionPageSize) {
transactionNoMore.value = true;
} else {
transactionPage.value++;
}
} catch (e) {
console.error('加载钱包流水失败', e);
}
transactionLoading.value = false;
};
const loadMoreRecharge = () => {
if (!rechargeNoMore.value) {
loadRechargeList(true);
}
};
const loadMoreTransaction = () => {
if (!transactionNoMore.value) {
loadTransactionList(true);
}
};
onMounted(() => {
loadWalletDetail();
loadRechargeList();
loadTransactionList();
});
</script>
<style lang="scss" scoped>
.container {
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 20rpx;
box-sizing: border-box;
}
.wallet-card {
background: linear-gradient(135deg, #0A84FF 0%, #5AC8FA 50%, #64D2FF 100%);
border-radius: 24rpx;
padding: 36rpx;
color: #fff;
box-shadow: 0 8rpx 32rpx rgba(10, 132, 255, 0.3);
.balance-section {
margin-bottom: 28rpx;
.balance-label { font-size: 24rpx; opacity: 0.75; margin-bottom: 8rpx; }
.balance-amount { font-size: 72rpx; font-weight: 700; letter-spacing: -2rpx; }
}
.wallet-footer {
display: flex;
align-items: center;
padding-top: 24rpx;
border-top: 1rpx solid rgba(255, 255, 255, 0.2);
.footer-divider { width: 1rpx; height: 40rpx; background: rgba(255, 255, 255, 0.3); margin: 0 32rpx; }
.footer-item {
flex: 1;
.footer-label { font-size: 22rpx; opacity: 0.7; margin-bottom: 6rpx; }
.footer-value { font-size: 26rpx; font-weight: 600; }
}
}
}
.tab-section {
margin-top: 32rpx;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
.tab-header {
flex-shrink: 0;
display: flex;
position: relative;
background: #fff;
border-radius: 16rpx;
padding: 8rpx;
.tab-indicator {
position: absolute;
top: 8rpx;
width: calc(50% - 16rpx);
height: calc(100% - 16rpx);
background: var(--primary);
border-radius: 12rpx;
transition: left 0.3s ease;
z-index: 0;
}
.tab-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 20rpx 0;
font-size: 28rpx;
font-weight: 500;
color: var(--text-tertiary);
position: relative;
z-index: 1;
transition: color 0.3s;
&.active {
color: #fff;
font-weight: 600;
}
}
}
}
.tab-swiper {
flex: 1;
margin-top: 20rpx;
min-height: 0;
}
.swiper-item-content {
height: 100%;
}
.list-content {
height: 100%;
padding-top: 16rpx;
box-sizing: border-box;
}
.record-card {
margin-bottom: 24rpx;
.record-header {
margin-bottom: 20rpx;
.record-no { font-size: 28rpx; font-weight: 600; color: var(--text-primary); }
.record-type { font-size: 28rpx; font-weight: 600; color: var(--text-primary); }
.record-amount { font-size: 32rpx; font-weight: 700; }
}
.record-info {
.info-row {
padding: 10rpx 0;
.info-label { font-size: 24rpx; color: var(--text-tertiary); }
.info-value { font-size: 24rpx; color: var(--text-primary); max-width: 380rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
}
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 40rpx;
.empty-icon { font-size: 100rpx; margin-bottom: 24rpx; opacity: 0.5; }
.empty-title { font-size: 28rpx; font-weight: 600; color: var(--text-secondary); }
}
.load-more {
text-align: center;
padding: 32rpx;
color: var(--text-tertiary);
font-size: 24rpx;
}
</style>

176
pages/order-list/order-list.vue Normal file
View File

@@ -0,0 +1,176 @@
<template>
<view class="container">
<view v-if="orderList.length === 0 && !loading" class="empty-state">
<view class="empty-icon">📋</view>
<view class="empty-title">暂无订单</view>
<view class="empty-desc">当前账号下暂无订单信息</view>
</view>
<view v-else class="card order-card" v-for="(item, index) in orderList" :key="index">
<view class="order-header flex-row-sb">
<view class="order-no">{{ item.order_no }}</view>
<view class="tag-apple" :class="getStatusClass(item.payment_status)">{{ item.payment_status_name }}</view>
</view>
<view class="order-info">
<view class="info-row flex-row-sb">
<view class="info-label">下单时间</view>
<view class="info-value">{{ item.created_at }}</view>
</view>
</view>
<view class="divider"></view>
<view class="package-list">
<view class="package-item" v-for="(pkgName, pIndex) in item.package_names" :key="pIndex">
<view class="package-name">{{ pkgName }}</view>
</view>
</view>
<view class="order-footer flex-row-sb">
<view class="total-label">合计</view>
<view class="total-amount">¥{{ formatMoney(item.total_amount) }}</view>
</view>
</view>
<view class="load-more" v-if="orderList.length > 0">
<text v-if="loading">加载中...</text>
<text v-else-if="noMore">没有更多了</text>
<text v-else @tap="loadMore">点击加载更多</text>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { orderApi } from '@/api/index.js';
import { useUserStore } from '@/store/index.js';
const userStore = useUserStore();
let orderList = reactive([]);
let loading = ref(false);
let noMore = ref(false);
let page = ref(1);
const pageSize = 10;
const formatMoney = (amount) => {
if (!amount && amount !== 0) return '0.00';
return (amount / 100).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
const getStatusClass = (status) => {
const classMap = {
'0': 'tag-warning',
'1': 'tag-success',
'2': 'tag-danger'
};
return classMap[status] || '';
};
const loadOrderList = async (append = false) => {
if (loading.value || noMore.value) return;
loading.value = true;
try {
const data = await orderApi.getList(
userStore.state.identifier,
page.value,
pageSize
);
const newData = (data.items || []).map(item => ({
...item,
payment_status_name: item.payment_status === 1 ? '已支付' : item.payment_status === 0 ? '待支付' : '已取消',
created_at: item.created_at ? item.created_at.split('T').join(' ').slice(0, 19) : ''
}));
if (append) {
orderList.push(...newData);
} else {
orderList.splice(0, orderList.length, ...newData);
}
if (newData.length < pageSize) {
noMore.value = true;
} else {
page.value++;
}
} catch (e) {
console.error('加载订单列表失败', e);
}
loading.value = false;
};
const loadMore = () => {
if (!noMore.value) {
loadOrderList(true);
}
};
onMounted(() => {
loadOrderList();
});
</script>
<style lang="scss" scoped>
.container {
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 40rpx;
min-height: 400rpx;
.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; }
}
.order-card {
margin-bottom: var(--space-md);
.order-header {
margin-bottom: var(--space-md);
.order-no { font-size: 28rpx; font-weight: 600; color: var(--text-primary); }
}
.order-info {
.info-row {
padding: var(--space-xs) 0;
.info-label { font-size: 24rpx; color: var(--text-tertiary); }
.info-value { font-size: 24rpx; color: var(--text-primary); }
}
}
.divider {
height: 1rpx;
background: var(--gray-200);
margin: var(--space-md) 0;
}
.package-list {
.package-item {
padding: var(--space-sm) 0;
border-bottom: 1rpx solid var(--gray-100);
&:last-child { border-bottom: none; }
.package-name { font-size: 26rpx; color: var(--text-primary); }
}
}
.order-footer {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1rpx solid var(--gray-200);
.total-label { font-size: 26rpx; color: var(--text-secondary); }
.total-amount { font-size: 32rpx; font-weight: 700; color: var(--danger); }
}
}
.load-more {
text-align: center;
padding: var(--space-lg);
color: var(--text-tertiary);
font-size: 24rpx;
}
}
</style>

131
pages/package-order/package-order.vue Normal file
View File

@@ -0,0 +1,131 @@
<template>
<view class="container">
<view v-if="packageList.length === 0 && !loading" class="empty-state">
<view class="empty-icon">📦</view>
<view class="empty-title">暂无可购套餐</view>
<view class="empty-desc">当前资产暂无适用的套餐</view>
</view>
<view class="card package-card" v-for="item in packageList" :key="item.package_id">
<view class="package-header flex-row-sb">
<view class="package-name">{{ item.package_name }}</view>
<view class="tag-apple" :class="item.is_addon ? 'tag-warning' : 'tag-primary'">
{{ item.is_addon ? '加油包' : '正式套餐' }}
</view>
</view>
<view class="package-price">¥{{ formatMoney(item.retail_price) }}</view>
<view class="package-desc">{{ item.description }}</view>
<view class="package-info">
<view class="info-item">流量: {{ formatData(item.data_allowance, item.data_unit) }}</view>
<view class="info-item">有效: {{ item.validity_days }}天</view>
</view>
<view class="btn">
<up-button type="primary" @click="buyPackage(item)">立即订购</up-button>
</view>
</view>
<up-modal title="确认购买" :show="showModal" showCancelButton @confirm="confirmBuy" @cancel="showModal=false">
<view style="padding: 40rpx; text-align: center;">
<view>套餐名称：{{ currentPackage?.package_name }}</view>
<view class="mt-20">价格：¥{{ formatMoney(currentPackage?.retail_price) }}</view>
</view>
</up-modal>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { assetApi, orderApi } from '@/api/index.js';
import { useUserStore } from '@/store/index.js';
const userStore = useUserStore();
let showModal = ref(false);
let currentPackage = ref(null);
let packageList = reactive([]);
let loading = ref(false);
const formatMoney = (amount) => {
if (!amount && amount !== 0) return '0.00';
return (amount / 100).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};
const formatData = (allowance, unit) => {
if (unit === 'MB') {
return allowance >= 1024 ? (allowance / 1024).toFixed(0) + ' GB' : allowance + ' MB';
}
return allowance + ' ' + unit;
};
const loadPackages = async () => {
loading.value = true;
try {
const data = await assetApi.getPackages(userStore.state.identifier);
packageList.splice(0, packageList.length, ...(data.packages || []));
} catch (e) {
console.error('加载套餐列表失败', e);
}
loading.value = false;
};
const buyPackage = (item) => {
currentPackage.value = item;
showModal.value = true;
};
const confirmBuy = async () => {
try {
await orderApi.create(userStore.state.identifier, [currentPackage.value.package_id]);
uni.showToast({ title: '购买成功', icon: 'success' });
} catch (e) {
console.error('购买套餐失败', e);
}
showModal.value = false;
};
onMounted(() => {
loadPackages();
});
</script>
<style lang="scss" scoped>
.container {
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 120rpx 40rpx;
min-height: 400rpx;
.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; }
}
.package-card {
margin-bottom: var(--space-md);
.package-header {
margin-bottom: var(--space-sm);
.package-name { font-size: 32rpx; font-weight: 600; color: var(--text-primary); }
}
.package-price {
font-size: 40rpx;
font-weight: bold;
color: var(--warning);
margin-bottom: var(--space-sm);
}
.package-desc {
font-size: 26rpx;
color: var(--text-secondary);
margin-bottom: var(--space-sm);
}
.package-info {
display: flex;
gap: var(--space-lg);
margin-bottom: var(--space-md);
.info-item { font-size: 24rpx; color: var(--text-tertiary); }
}
.btn { margin-top: var(--space-sm); }
}
}
</style>

121
pages/switch/switch.vue Normal file
View File

@@ -0,0 +1,121 @@
<template>
<view class="container">
<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">
<image :src="getLogo(item.category).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">{{ getLogo(item.category).name }}</up-tag>
</view>
</view>
<view class="flex-row-g20">
<view class="operator">
<up-tag type="primary" size="mini" v-if="item.is_current">当前使用</up-tag>
</view>
<view class="operator">
<up-tag :type="item.real_name_status === 1 ? 'primary' : 'success'" size="mini">{{ item.real_name_status === 1 ? '已实名' : '未实名' }}</up-tag>
</view>
</view>
</view>
</view>
</view>
<view class="btn flex-row-g20 mt-30">
<up-button class="btn-apple btn-success" v-if="!item.is_current" type="success" @tap="switchOperator(item)" :loading="switching">
切换此运营商
</up-button>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import { deviceApi, assetApi } from '@/api/index.js';
import { useUserStore } from '@/store/index.js';
const userStore = useUserStore();
let mchList = reactive([]);
let switching = ref(false);
let opratorList = reactive([
{ category: '124', logo: 'https://img2.baidu.com/it/u=139558247,3893370039&fm=253&fmt=auto?w=529&h=500', name: '中国电信' },
{ category: '125', logo: 'https://img1.baidu.com/it/u=2816777816,1756344384&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500', name: '中国联通' },
{ category: '126', logo: 'https://img2.baidu.com/it/u=915783975,1594870591&fm=253&fmt=auto&app=120&f=PNG?w=182&h=182', name: '中国移动' }
]);
const getLogo = (category) => {
const operator = opratorList.find(item => item.category === category);
return operator || opratorList[0];
};
const loadCards = async () => {
try {
const data = await assetApi.getInfo(userStore.state.identifier);
if (data.cards && data.cards.length > 0) {
mchList.splice(0, mchList.length, ...data.cards.map(card => ({
...card,
category: card.carrier_name.includes('电信') ? '124' : card.carrier_name.includes('联通') ? '125' : '126'
})));
}
} catch (e) {
console.error('加载卡列表失败', e);
}
};
const switchOperator = async (item) => {
switching.value = true;
try {
await deviceApi.switchCard(userStore.state.identifier, item.iccid);
uni.showToast({ title: '切换成功，3-5分钟后生效', icon: 'success' });
loadCards();
} catch (e) {
console.error('切换运营商失败', e);
}
switching.value = false;
};
onMounted(() => {
loadCards();
});
</script>
<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%; }
}
}
}
.btn-apple {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: var(--radius-small);
font-weight: 500;
font-size: 26rpx;
line-height: 1;
cursor: pointer;
padding: 20rpx;
background: var(--gray-100);
color: var(--text-primary);
&.btn-success {
background: var(--success);
color: var(--text-inverse);
}
}
</style>