From 1a407924de69ba48de4eef76d0a281ce3d477d88 Mon Sep 17 00:00:00 2001
From: sexygoat <1538832180@qq.com>
Date: Tue, 14 Apr 2026 10:31:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9index=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=9D=A5=E6=BA=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/DeviceStatusCard.vue     |  18 ++++-
 components/TrafficCard.vue          | 118 +++++++++++++++++++++++-----
 components/UserInfoCard.vue         |   2 +-
 docs/API.md                         |   9 ++-
 pages/change-phone/change-phone.vue |  13 ++-
 pages/index/index.vue               |  86 ++++++++++++++++----
 pages/login/login.vue               |  24 +++---
 7 files changed, 216 insertions(+), 54 deletions(-)

diff --git a/components/DeviceStatusCard.vue b/components/DeviceStatusCard.vue
index 23714a8..6ee7396 100644
--- a/components/DeviceStatusCard.vue
+++ b/components/DeviceStatusCard.vue
@@ -20,7 +20,7 @@
 					<view class="subtitle">到期时间：{{ deviceInfo.expireDate }}</view>
 				</view>
 				<view class="info-values flex-row-g20">
-					<view class="tag-apple tag-primary">{{ deviceInfo.statusStr }}</view>
+					<view class="tag-apple tag-primary">{{ statusText }}</view>
 				</view>
 			</view>
 		</view>
@@ -35,14 +35,16 @@
 			</view>
 			<view class="metric-item flex-col-center">
 				<view class="caption mb-xs">连接数量</view>
-				<view class="metric-value">{{ deviceInfo.connCnt }} 台</view>
+				<view class="metric-value">{{ deviceInfo.connCnt }}/{{ deviceInfo.max_clients }}</view>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script setup>
-	defineProps({
+	import { computed } from 'vue';
+
+	const props = defineProps({
 		deviceInfo: { type: Object, default: () => ({}) },
 		isRealName: { type: Boolean, default: false },
 		opratorList: { type: Array, default: () => [] }
@@ -55,6 +57,16 @@
 	};
 
 	const getSignalText = (rssi) => rssi || '强';
+
+	const statusText = computed(() => {
+		const statusMap = {
+			1: '在库',
+			2: '已分销',
+			3: '已激活',
+			4: '已停用'
+		};
+		return statusMap[props.deviceInfo.status] || '-';
+	});
 </script>
 
 <style scoped lang="scss">
diff --git a/components/TrafficCard.vue b/components/TrafficCard.vue
index 2c13d87..37107f9 100644
--- a/components/TrafficCard.vue
+++ b/components/TrafficCard.vue
@@ -16,22 +16,22 @@
 			<view class="stat-item flex-col-center">
 				<view class="caption mb-xs">已使用</view>
 				<view class="stat-value-container">
-					<text class="stat-value">{{ formatDataSize(deviceInfo.totalBytesCnt) }}</text>
-					<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
+					<text class="stat-value">{{ usedValue }}</text>
+					<text class="stat-unit">{{ usedUnit }}</text>
 				</view>
 			</view>
 			<view class="stat-item flex-col-center">
 				<view class="caption mb-xs">总流量</view>
 				<view class="stat-value-container">
-					<text class="stat-value">{{ formatDataSize(deviceInfo.flowSize) }}</text>
-					<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
+					<text class="stat-value">{{ totalValue }}</text>
+					<text class="stat-unit">{{ totalUnit }}</text>
 				</view>
 			</view>
 			<view class="stat-item flex-col-center">
 				<view class="caption mb-xs">剩余</view>
 				<view class="stat-value-container">
-					<text class="stat-value">{{ formatDataSize(deviceInfo.flowSize - deviceInfo.totalBytesCnt) }}</text>
-					<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
+					<text class="stat-value">{{ remainValue }}</text>
+					<text class="stat-unit">{{ remainUnit }}</text>
 				</view>
 			</view>
 		</view>
@@ -39,26 +39,108 @@
 </template>
 
 <script setup>
-	import { computed } from 'vue';
+	import { ref, computed, watch } from 'vue';
+	import { assetApi } from '@/api/index.js';
+	import { useUserStore } from '@/store/index.js';
 
 	const props = defineProps({
-		deviceInfo: { type: Object, default: () => ({}) },
-		isDevice: { type: Boolean, default: true }
+		identifier: { type: String, default: '' }
 	});
 
-	const usedFlowPercent = computed(() => {
-		if (props.deviceInfo.flowSize && props.deviceInfo.totalBytesCnt) {
-			return (props.deviceInfo.totalBytesCnt / props.deviceInfo.flowSize * 100).toFixed(2);
+	const userStore = useUserStore();
+
+	// 流量数据
+	const usedMB = ref(0);
+	const totalMB = ref(0);
+	const remainMB = ref(0);
+
+	// 格式化流量数据（MB 转 GB）
+	const formatTraffic = (mb) => {
+		if (!mb || mb === 0) {
+			return { value: '0.00', unit: 'MB' };
 		}
-		return '0';
+
+		if (mb >= 1024) {
+			return {
+				value: (mb / 1024).toFixed(2),
+				unit: 'GB'
+			};
+		}
+
+		return {
+			value: mb.toFixed(2),
+			unit: 'MB'
+		};
+	};
+
+	// 已使用流量
+	const usedValue = computed(() => formatTraffic(usedMB.value).value);
+	const usedUnit = computed(() => formatTraffic(usedMB.value).unit);
+
+	// 总流量
+	const totalValue = computed(() => formatTraffic(totalMB.value).value);
+	const totalUnit = computed(() => formatTraffic(totalMB.value).unit);
+
+	// 剩余流量
+	const remainValue = computed(() => formatTraffic(remainMB.value).value);
+	const remainUnit = computed(() => formatTraffic(remainMB.value).unit);
+
+	// 使用百分比
+	const usedFlowPercent = computed(() => {
+		if (totalMB.value && usedMB.value) {
+			const percent = (usedMB.value / totalMB.value * 100);
+			return Math.min(percent, 100).toFixed(2);
+		}
+		return '0.00';
 	});
 
-	const formatDataSize = (size) => {
-		if (!size) return '0';
-		const num = parseFloat(size);
-		if (num < 0.01) return '0';
-		return num.toFixed(2);
+	// 加载套餐流量数据
+	const loadPackageData = async () => {
+		const identifier = props.identifier || userStore.state.identifier;
+		if (!identifier) return;
+
+		try {
+			const data = await assetApi.getPackageHistory(identifier, 1, 10, { status: 1 });
+
+			if (data.items && data.items.length > 0) {
+				// 只有一个生效中的套餐
+				const activePackage = data.items[0];
+
+				if (activePackage.enable_virtual_data) {
+					// 启用虚流量
+					usedMB.value = activePackage.virtual_used_mb || 0;
+					totalMB.value = activePackage.virtual_limit_mb || 0;
+					remainMB.value = activePackage.virtual_remain_mb || 0;
+				} else {
+					// 未启用虚流量，使用真流量
+					usedMB.value = activePackage.data_usage_mb || 0;
+					totalMB.value = activePackage.data_limit_mb || 0;
+					remainMB.value = totalMB.value - usedMB.value;
+				}
+			} else {
+				// 没有生效中的套餐
+				usedMB.value = 0;
+				totalMB.value = 0;
+				remainMB.value = 0;
+			}
+		} catch (e) {
+			console.error('加载套餐流量数据失败', e);
+		}
 	};
+
+	// 监听 identifier 变化
+	watch(() => props.identifier, (newVal) => {
+		if (newVal) {
+			loadPackageData();
+		}
+	}, { immediate: true });
+
+	// 如果没有传入 identifier，则使用 store 中的
+	watch(() => userStore.state.identifier, (newVal) => {
+		if (newVal && !props.identifier) {
+			loadPackageData();
+		}
+	}, { immediate: true });
 </script>
 
 <style scoped lang="scss">
diff --git a/components/UserInfoCard.vue b/components/UserInfoCard.vue
index 3a6bf74..4310355 100644
--- a/components/UserInfoCard.vue
+++ b/components/UserInfoCard.vue
@@ -8,7 +8,7 @@
 				<view class="flex-row-g20">
 					<view class="title">{{ currentCardNo }}</view>
 				</view>
-				<view class="caption">到期时间：{{ deviceInfo.expireDate }}</view>
+				<view class="caption">IMEI：{{ deviceInfo.imei || '-' }}</view>
 			</view>
 			<view class="tag-apple" :class="onlineStatus === '在线' ? 'tag-success' : 'tag-warning'">
 				{{ onlineStatus }}
diff --git a/docs/API.md b/docs/API.md
index 2d8b2d4..4039e95 100644
--- a/docs/API.md
+++ b/docs/API.md
@@ -257,7 +257,7 @@ url: /api/c/v1/asset/info
     "asset_id": 1,
     "identifier": "862639070804960", // 当前卡
     "virtual_no": "862639070804960",
-    "status": 1, // 状态 到期时间右边那个
+    "status": 1, // 状态 到期时间右边那个 
     "real_name_status": 0, // 实名状态
     "carrier_name": "", // 运营商
     "generation": "1",
@@ -408,6 +408,7 @@ GET /api/c/v1/asset/package-history?identifier=1234567890&page=1&page_size=10
         "package_usage_id": 5001,
         "priority": 1,
         "status": 1,
+		"enable_virtual_data": true,
         "status_name": "生效中",
         "usage_type": "single_card",
         "virtual_limit_mb": 20480,
@@ -448,7 +449,11 @@ data.items[]：
 - virtual_ratio：虚流量比例(real/virtual)
 - virtual_remain_mb：剩余虚流量(MB)，按virtual_ratio换算
 - virtual_used_mb：已用虚流量(MB)，按virtual_ratio换算
-
+- enable_virtual_data：是否启用虚流量 
+* 如果启用了虚流量那么 本月流量展示的就是 套餐虚流量总量 剩余虚流量 已用虚流量 只是值用这些,已使用,总流量,剩余不要改
+* 如果没有启用那就是 套餐真流量总量 已用真流量 剩余真流量(自己计算) 然后如果大于或者等于1024MB 转换成 GB
+* 本月流量哪里需要调用这个接口,带上参数status: 1:生效中 只会有一个生效的
+* 
 ## 3.3 资产可购套餐列表
 
 URL：
diff --git a/pages/change-phone/change-phone.vue b/pages/change-phone/change-phone.vue
index e0d5ca0..9facfd5 100644
--- a/pages/change-phone/change-phone.vue
+++ b/pages/change-phone/change-phone.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script setup>
-	import { reactive, ref } from 'vue';
+	import { reactive, ref, onMounted } from 'vue';
 	import { authApi } from '@/api/index.js';
 
 	const form = reactive({
@@ -47,6 +47,17 @@
 		newCode: ''
 	});
 
+	onMounted(() => {
+		// 获取 URL 参数中的原手机号
+		const pages = getCurrentPages();
+		const currentPage = pages[pages.length - 1];
+		const options = currentPage.options;
+
+		if (options.oldPhone) {
+			form.oldPhone = options.oldPhone;
+		}
+	});
+
 	let oldCooldown = ref(0);
 	let newCooldown = ref(0);
 	let oldCodeText = ref('获取验证码');
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 476f50f..b54e39a 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -8,7 +8,7 @@
 		<VoiceCard v-if="!userInfo.isDevice" :voiceStats="voiceStats" :dateRangeText="dateRangeText"
 			@openDatePicker="openDateRangePicker" />
 
-		<TrafficCard :deviceInfo="deviceInfo" :isDevice="userInfo.isDevice" />
+		<TrafficCard :identifier="currentCardNo" />
 
 		<WhitelistCard v-if="!userInfo.isDevice" :whitelistData="whitelistData" @refresh="refreshWhitelist"
 			@add="showAddWhitelistDialog" @showSms="showSmsCodeDialog" />
@@ -139,7 +139,7 @@
 	let deviceInfo = reactive({
 		battery: 100,
 		connect: 0,
-		statusStr: '正常',
+		status: 1,
 		expireDate: '',
 		currentIccid: '',
 		category: '',
@@ -155,11 +155,14 @@
 		last_online_time: '',
 		lan_ip: '',
 		kf_url: '',
-		mchList: []
+		mchList: [],
+		imei: '',
+		max_clients: 1
 	});
 
 	let isRealName = ref(false);
 	let alreadyBindPhone = ref(false);
+	let boundPhone = ref('');
 	let realNameStatus = ref('');
 	let wifi_info = reactive({
 		ssid: '',
@@ -200,15 +203,34 @@
 		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 ? '正常' : '禁用';
+			deviceInfo.status = data.status;
+			deviceInfo.imei = data.imei || '';
 			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;
+			boundPhone.value = data.bound_phone || '';
+			alreadyBindPhone.value = !!data.bound_phone;
 
+			// 流量信息已由 TrafficCard 组件独立获取，这里不再处理
+
+			// 当前卡信息
+			if (data.cards && data.cards.length > 0) {
+				// 找到当前卡
+				const currentCard = data.cards.find(card => card.is_current) || data.cards[0];
+				deviceInfo.currentIccid = currentCard.iccid;
+
+				// 卡列表
+				deviceInfo.mchList = data.cards.map(card => ({
+					iccidMark: card.iccid,
+					category: card.slot_position,
+					is_current: card.is_current
+				}));
+			}
+
+			// 设备实时信息
 			if (data.device_realtime) {
 				const rt = data.device_realtime;
 				deviceInfo.onlineStatus = rt.online_status === 1 ? '1' : '0';
@@ -217,22 +239,48 @@
 				deviceInfo.ssidPwd = rt.wifi_password || '';
 				deviceInfo.lan_ip = rt.lan_ip || '';
 				deviceInfo.connCnt = rt.client_number || 0;
+				deviceInfo.max_clients = rt.max_clients || 1;
 				deviceInfo.run_time = rt.run_time || 0;
-				deviceInfo.rssi = rt.rssi || '强';
+				deviceInfo.rssi = calculateSignalStrength(rt.rsrp, rt.rsrq, rt.rssi);
 			}
 
-			if (data.cards && data.cards.length > 0) {
-				deviceInfo.mchList = data.cards.map(card => ({
-					iccidMark: card.iccid,
-					category: card.slot_position
-				}));
-			}
+			// 获取到期时间（从套餐历史中获取）
+			await loadExpireDate(identifier);
 		} catch (e) {
 			console.error('加载资产信息失败', e);
 		}
 		loading.value = false;
 	};
 
+	// 计算信号强度
+	const calculateSignalStrength = (rsrp, rsrq, rssi) => {
+		// 简单的信号强度计算逻辑
+		if (!rsrp && !rsrq && !rssi) return '强';
+
+		const rsrpNum = parseInt(rsrp) || 0;
+		if (rsrpNum >= -80) return '强';
+		if (rsrpNum >= -95) return '中';
+		return '弱';
+	};
+
+	// 获取到期时间（从生效中的套餐获取）
+	const loadExpireDate = async (identifier) => {
+		try {
+			const historyData = await assetApi.getPackageHistory(identifier, 1, 10, { status: 1 });
+			if (historyData.items && historyData.items.length > 0) {
+				// 找到生效中的套餐
+				const activePackage = historyData.items.find(item => item.status === 1);
+				if (activePackage && activePackage.expires_at) {
+					// 格式化日期
+					const date = new Date(activePackage.expires_at);
+					deviceInfo.expireDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+				}
+			}
+		} catch (e) {
+			console.error('获取到期时间失败', e);
+		}
+	};
+
 	const modifyWifi = () => {
 		wifi_info.ssid = deviceInfo.ssidName;
 		wifi_info.pwd = deviceInfo.ssidPwd;
@@ -460,8 +508,16 @@
 				});
 				break;
 			case 'change-phone':
+				if (!boundPhone.value) {
+					uni.showToast({
+						title: '请先去绑定手机号',
+						icon: 'none',
+						duration: 2000
+					});
+					return;
+				}
 				uni.navigateTo({
-					url: '/pages/change-phone/change-phone'
+					url: `/pages/change-phone/change-phone?oldPhone=${boundPhone.value}`
 				});
 				break;
 			case 'device-exchange':
diff --git a/pages/login/login.vue b/pages/login/login.vue
index 291a40c..e7d6aad 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -2,8 +2,8 @@
 	<view class="login-page">
 		<view class="content">
 			<view class="header">
-				<view class="main-title">设备管理登录</view>
-				<view class="sub-title">请输入设备标识进行登录</view>
+				<view class="main-title">登录</view>
+				<view class="sub-title">请输入标识进行登录</view>
 			</view>
 
 			<view class="form-section">
@@ -11,14 +11,14 @@
 					<input
 						v-model="identifier"
 						class="input"
-						placeholder="请输入设备标识"
+						placeholder="请输入标识"
 						placeholder-class="placeholder"
 						@focus="inputFocus = true"
 						@blur="inputFocus = false"
 						@input="showError = false"
 					/>
 				</view>
-				<text v-if="showError" class="error">请输入设备标识</text>
+				<text v-if="showError" class="error">请输入标识</text>
 			</view>
 
 			<view class="btn-section">
@@ -139,10 +139,10 @@
 
 <style lang="scss" scoped>
 	.login-page {
-		min-height: 100vh;
 		display: flex;
 		flex-direction: column;
 		background: #FFFFFF;
+		min-height: 100vh;
 		padding: 60rpx 40rpx;
 	}
 
@@ -184,8 +184,7 @@
 	}
 
 	.input-wrap.focus {
-		background: #FFFFFF;
-		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+		background: #f7f7f7;
 	}
 
 	.input {
@@ -213,28 +212,25 @@
 	.btn-login {
 		width: 100%;
 		height: 108rpx;
-		background: linear-gradient(135deg, #00DDA2 0%, #00E5A8 100%);
+		background: $uni-color-primary;
 		border: none;
 		border-radius: 20rpx;
 		font-size: 36rpx;
 		font-weight: 600;
-		color: #1A1A1A;
+		color: #FFFFFF;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		transition: all 0.3s;
-		box-shadow: 0 8rpx 24rpx rgba(0, 221, 162, 0.25);
 	}
 
 	.btn-login.disabled {
 		background: #E5E7EB;
 		color: #9CA3AF;
-		box-shadow: none;
 	}
 
 	.btn-login:active:not(.disabled) {
-		transform: scale(0.98);
-		box-shadow: 0 4rpx 16rpx rgba(0, 221, 162, 0.3);
+		opacity: 0.8;
 	}
 
 	.loading {
@@ -246,7 +242,7 @@
 	.dot {
 		width: 10rpx;
 		height: 10rpx;
-		background: #1A1A1A;
+		background: #FFFFFF;
 		border-radius: 50%;
 		animation: load 1.4s infinite ease-in-out both;
 	}