fix: 修改index数据来源
All checks were successful
构建并部署前端到生产环境 / build-and-deploy (push) Successful in 47s
All checks were successful
构建并部署前端到生产环境 / build-and-deploy (push) Successful in 47s
This commit is contained in:
@@ -20,7 +20,7 @@
|
|||||||
<view class="subtitle">到期时间:{{ deviceInfo.expireDate }}</view>
|
<view class="subtitle">到期时间:{{ deviceInfo.expireDate }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-values flex-row-g20">
|
<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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -35,14 +35,16 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="metric-item flex-col-center">
|
<view class="metric-item flex-col-center">
|
||||||
<view class="caption mb-xs">连接数量</view>
|
<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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
defineProps({
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
deviceInfo: { type: Object, default: () => ({}) },
|
deviceInfo: { type: Object, default: () => ({}) },
|
||||||
isRealName: { type: Boolean, default: false },
|
isRealName: { type: Boolean, default: false },
|
||||||
opratorList: { type: Array, default: () => [] }
|
opratorList: { type: Array, default: () => [] }
|
||||||
@@ -55,6 +57,16 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
const getSignalText = (rssi) => rssi || '强';
|
const getSignalText = (rssi) => rssi || '强';
|
||||||
|
|
||||||
|
const statusText = computed(() => {
|
||||||
|
const statusMap = {
|
||||||
|
1: '在库',
|
||||||
|
2: '已分销',
|
||||||
|
3: '已激活',
|
||||||
|
4: '已停用'
|
||||||
|
};
|
||||||
|
return statusMap[props.deviceInfo.status] || '-';
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -16,22 +16,22 @@
|
|||||||
<view class="stat-item flex-col-center">
|
<view class="stat-item flex-col-center">
|
||||||
<view class="caption mb-xs">已使用</view>
|
<view class="caption mb-xs">已使用</view>
|
||||||
<view class="stat-value-container">
|
<view class="stat-value-container">
|
||||||
<text class="stat-value">{{ formatDataSize(deviceInfo.totalBytesCnt) }}</text>
|
<text class="stat-value">{{ usedValue }}</text>
|
||||||
<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
|
<text class="stat-unit">{{ usedUnit }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="stat-item flex-col-center">
|
<view class="stat-item flex-col-center">
|
||||||
<view class="caption mb-xs">总流量</view>
|
<view class="caption mb-xs">总流量</view>
|
||||||
<view class="stat-value-container">
|
<view class="stat-value-container">
|
||||||
<text class="stat-value">{{ formatDataSize(deviceInfo.flowSize) }}</text>
|
<text class="stat-value">{{ totalValue }}</text>
|
||||||
<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
|
<text class="stat-unit">{{ totalUnit }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="stat-item flex-col-center">
|
<view class="stat-item flex-col-center">
|
||||||
<view class="caption mb-xs">剩余</view>
|
<view class="caption mb-xs">剩余</view>
|
||||||
<view class="stat-value-container">
|
<view class="stat-value-container">
|
||||||
<text class="stat-value">{{ formatDataSize(deviceInfo.flowSize - deviceInfo.totalBytesCnt) }}</text>
|
<text class="stat-value">{{ remainValue }}</text>
|
||||||
<text class="stat-unit">{{ isDevice ? 'GB' : 'MB' }}</text>
|
<text class="stat-unit">{{ remainUnit }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -39,26 +39,108 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<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({
|
const props = defineProps({
|
||||||
deviceInfo: { type: Object, default: () => ({}) },
|
identifier: { type: String, default: '' }
|
||||||
isDevice: { type: Boolean, default: true }
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const usedFlowPercent = computed(() => {
|
const userStore = useUserStore();
|
||||||
if (props.deviceInfo.flowSize && props.deviceInfo.totalBytesCnt) {
|
|
||||||
return (props.deviceInfo.totalBytesCnt / props.deviceInfo.flowSize * 100).toFixed(2);
|
// 流量数据
|
||||||
|
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 loadPackageData = async () => {
|
||||||
const num = parseFloat(size);
|
const identifier = props.identifier || userStore.state.identifier;
|
||||||
if (num < 0.01) return '0';
|
if (!identifier) return;
|
||||||
return num.toFixed(2);
|
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
<view class="flex-row-g20">
|
<view class="flex-row-g20">
|
||||||
<view class="title">{{ currentCardNo }}</view>
|
<view class="title">{{ currentCardNo }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="caption">到期时间:{{ deviceInfo.expireDate }}</view>
|
<view class="caption">IMEI:{{ deviceInfo.imei || '-' }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tag-apple" :class="onlineStatus === '在线' ? 'tag-success' : 'tag-warning'">
|
<view class="tag-apple" :class="onlineStatus === '在线' ? 'tag-success' : 'tag-warning'">
|
||||||
{{ onlineStatus }}
|
{{ onlineStatus }}
|
||||||
|
|||||||
@@ -408,6 +408,7 @@ GET /api/c/v1/asset/package-history?identifier=1234567890&page=1&page_size=10
|
|||||||
"package_usage_id": 5001,
|
"package_usage_id": 5001,
|
||||||
"priority": 1,
|
"priority": 1,
|
||||||
"status": 1,
|
"status": 1,
|
||||||
|
"enable_virtual_data": true,
|
||||||
"status_name": "生效中",
|
"status_name": "生效中",
|
||||||
"usage_type": "single_card",
|
"usage_type": "single_card",
|
||||||
"virtual_limit_mb": 20480,
|
"virtual_limit_mb": 20480,
|
||||||
@@ -448,7 +449,11 @@ data.items[]:
|
|||||||
- virtual_ratio:虚流量比例(real/virtual)
|
- virtual_ratio:虚流量比例(real/virtual)
|
||||||
- virtual_remain_mb:剩余虚流量(MB),按virtual_ratio换算
|
- virtual_remain_mb:剩余虚流量(MB),按virtual_ratio换算
|
||||||
- virtual_used_mb:已用虚流量(MB),按virtual_ratio换算
|
- virtual_used_mb:已用虚流量(MB),按virtual_ratio换算
|
||||||
|
- enable_virtual_data:是否启用虚流量
|
||||||
|
* 如果启用了虚流量那么 本月流量展示的就是 套餐虚流量总量 剩余虚流量 已用虚流量 只是值用这些,已使用,总流量,剩余不要改
|
||||||
|
* 如果没有启用那就是 套餐真流量总量 已用真流量 剩余真流量(自己计算) 然后如果大于或者等于1024MB 转换成 GB
|
||||||
|
* 本月流量哪里需要调用这个接口,带上参数status: 1:生效中 只会有一个生效的
|
||||||
|
*
|
||||||
## 3.3 资产可购套餐列表
|
## 3.3 资产可购套餐列表
|
||||||
|
|
||||||
URL:
|
URL:
|
||||||
|
|||||||
@@ -37,7 +37,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive, ref } from 'vue';
|
import { reactive, ref, onMounted } from 'vue';
|
||||||
import { authApi } from '@/api/index.js';
|
import { authApi } from '@/api/index.js';
|
||||||
|
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
@@ -47,6 +47,17 @@
|
|||||||
newCode: ''
|
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 oldCooldown = ref(0);
|
||||||
let newCooldown = ref(0);
|
let newCooldown = ref(0);
|
||||||
let oldCodeText = ref('获取验证码');
|
let oldCodeText = ref('获取验证码');
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
<VoiceCard v-if="!userInfo.isDevice" :voiceStats="voiceStats" :dateRangeText="dateRangeText"
|
<VoiceCard v-if="!userInfo.isDevice" :voiceStats="voiceStats" :dateRangeText="dateRangeText"
|
||||||
@openDatePicker="openDateRangePicker" />
|
@openDatePicker="openDateRangePicker" />
|
||||||
|
|
||||||
<TrafficCard :deviceInfo="deviceInfo" :isDevice="userInfo.isDevice" />
|
<TrafficCard :identifier="currentCardNo" />
|
||||||
|
|
||||||
<WhitelistCard v-if="!userInfo.isDevice" :whitelistData="whitelistData" @refresh="refreshWhitelist"
|
<WhitelistCard v-if="!userInfo.isDevice" :whitelistData="whitelistData" @refresh="refreshWhitelist"
|
||||||
@add="showAddWhitelistDialog" @showSms="showSmsCodeDialog" />
|
@add="showAddWhitelistDialog" @showSms="showSmsCodeDialog" />
|
||||||
@@ -139,7 +139,7 @@
|
|||||||
let deviceInfo = reactive({
|
let deviceInfo = reactive({
|
||||||
battery: 100,
|
battery: 100,
|
||||||
connect: 0,
|
connect: 0,
|
||||||
statusStr: '正常',
|
status: 1,
|
||||||
expireDate: '',
|
expireDate: '',
|
||||||
currentIccid: '',
|
currentIccid: '',
|
||||||
category: '',
|
category: '',
|
||||||
@@ -155,11 +155,14 @@
|
|||||||
last_online_time: '',
|
last_online_time: '',
|
||||||
lan_ip: '',
|
lan_ip: '',
|
||||||
kf_url: '',
|
kf_url: '',
|
||||||
mchList: []
|
mchList: [],
|
||||||
|
imei: '',
|
||||||
|
max_clients: 1
|
||||||
});
|
});
|
||||||
|
|
||||||
let isRealName = ref(false);
|
let isRealName = ref(false);
|
||||||
let alreadyBindPhone = ref(false);
|
let alreadyBindPhone = ref(false);
|
||||||
|
let boundPhone = ref('');
|
||||||
let realNameStatus = ref('');
|
let realNameStatus = ref('');
|
||||||
let wifi_info = reactive({
|
let wifi_info = reactive({
|
||||||
ssid: '',
|
ssid: '',
|
||||||
@@ -200,15 +203,34 @@
|
|||||||
loading.value = true;
|
loading.value = true;
|
||||||
try {
|
try {
|
||||||
const data = await assetApi.getInfo(identifier);
|
const data = await assetApi.getInfo(identifier);
|
||||||
|
|
||||||
|
// 基本信息
|
||||||
userInfo.isDevice = data.asset_type === 'device';
|
userInfo.isDevice = data.asset_type === 'device';
|
||||||
currentCardNo.value = data.identifier;
|
currentCardNo.value = data.identifier;
|
||||||
deviceInfo.statusStr = data.status === 1 ? '正常' : '禁用';
|
deviceInfo.status = data.status;
|
||||||
|
deviceInfo.imei = data.imei || '';
|
||||||
isRealName.value = data.real_name_status === 1;
|
isRealName.value = data.real_name_status === 1;
|
||||||
realNameStatus.value = data.real_name_status === 1 ? '已实名' : '未实名';
|
realNameStatus.value = data.real_name_status === 1 ? '已实名' : '未实名';
|
||||||
deviceInfo.flowSize = data.package_remain_mb || 0;
|
boundPhone.value = data.bound_phone || '';
|
||||||
deviceInfo.totalBytesCnt = data.package_total_mb || 0;
|
alreadyBindPhone.value = !!data.bound_phone;
|
||||||
deviceInfo.currentIccid = data.identifier;
|
|
||||||
|
|
||||||
|
// 流量信息已由 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) {
|
if (data.device_realtime) {
|
||||||
const rt = data.device_realtime;
|
const rt = data.device_realtime;
|
||||||
deviceInfo.onlineStatus = rt.online_status === 1 ? '1' : '0';
|
deviceInfo.onlineStatus = rt.online_status === 1 ? '1' : '0';
|
||||||
@@ -217,22 +239,48 @@
|
|||||||
deviceInfo.ssidPwd = rt.wifi_password || '';
|
deviceInfo.ssidPwd = rt.wifi_password || '';
|
||||||
deviceInfo.lan_ip = rt.lan_ip || '';
|
deviceInfo.lan_ip = rt.lan_ip || '';
|
||||||
deviceInfo.connCnt = rt.client_number || 0;
|
deviceInfo.connCnt = rt.client_number || 0;
|
||||||
|
deviceInfo.max_clients = rt.max_clients || 1;
|
||||||
deviceInfo.run_time = rt.run_time || 0;
|
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 => ({
|
await loadExpireDate(identifier);
|
||||||
iccidMark: card.iccid,
|
|
||||||
category: card.slot_position
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('加载资产信息失败', e);
|
console.error('加载资产信息失败', e);
|
||||||
}
|
}
|
||||||
loading.value = false;
|
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 = () => {
|
const modifyWifi = () => {
|
||||||
wifi_info.ssid = deviceInfo.ssidName;
|
wifi_info.ssid = deviceInfo.ssidName;
|
||||||
wifi_info.pwd = deviceInfo.ssidPwd;
|
wifi_info.pwd = deviceInfo.ssidPwd;
|
||||||
@@ -460,8 +508,16 @@
|
|||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 'change-phone':
|
case 'change-phone':
|
||||||
|
if (!boundPhone.value) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '请先去绑定手机号',
|
||||||
|
icon: 'none',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/change-phone/change-phone'
|
url: `/pages/change-phone/change-phone?oldPhone=${boundPhone.value}`
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 'device-exchange':
|
case 'device-exchange':
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
<view class="login-page">
|
<view class="login-page">
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<view class="header">
|
<view class="header">
|
||||||
<view class="main-title">设备管理登录</view>
|
<view class="main-title">登录</view>
|
||||||
<view class="sub-title">请输入设备标识进行登录</view>
|
<view class="sub-title">请输入标识进行登录</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="form-section">
|
<view class="form-section">
|
||||||
@@ -11,14 +11,14 @@
|
|||||||
<input
|
<input
|
||||||
v-model="identifier"
|
v-model="identifier"
|
||||||
class="input"
|
class="input"
|
||||||
placeholder="请输入设备标识"
|
placeholder="请输入标识"
|
||||||
placeholder-class="placeholder"
|
placeholder-class="placeholder"
|
||||||
@focus="inputFocus = true"
|
@focus="inputFocus = true"
|
||||||
@blur="inputFocus = false"
|
@blur="inputFocus = false"
|
||||||
@input="showError = false"
|
@input="showError = false"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
<text v-if="showError" class="error">请输入设备标识</text>
|
<text v-if="showError" class="error">请输入标识</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="btn-section">
|
<view class="btn-section">
|
||||||
@@ -139,10 +139,10 @@
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.login-page {
|
.login-page {
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
|
min-height: 100vh;
|
||||||
padding: 60rpx 40rpx;
|
padding: 60rpx 40rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -184,8 +184,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.input-wrap.focus {
|
.input-wrap.focus {
|
||||||
background: #FFFFFF;
|
background: #f7f7f7;
|
||||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input {
|
.input {
|
||||||
@@ -213,28 +212,25 @@
|
|||||||
.btn-login {
|
.btn-login {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 108rpx;
|
height: 108rpx;
|
||||||
background: linear-gradient(135deg, #00DDA2 0%, #00E5A8 100%);
|
background: $uni-color-primary;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #1A1A1A;
|
color: #FFFFFF;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
box-shadow: 0 8rpx 24rpx rgba(0, 221, 162, 0.25);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-login.disabled {
|
.btn-login.disabled {
|
||||||
background: #E5E7EB;
|
background: #E5E7EB;
|
||||||
color: #9CA3AF;
|
color: #9CA3AF;
|
||||||
box-shadow: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-login:active:not(.disabled) {
|
.btn-login:active:not(.disabled) {
|
||||||
transform: scale(0.98);
|
opacity: 0.8;
|
||||||
box-shadow: 0 4rpx 16rpx rgba(0, 221, 162, 0.3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.loading {
|
.loading {
|
||||||
@@ -246,7 +242,7 @@
|
|||||||
.dot {
|
.dot {
|
||||||
width: 10rpx;
|
width: 10rpx;
|
||||||
height: 10rpx;
|
height: 10rpx;
|
||||||
background: #1A1A1A;
|
background: #FFFFFF;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: load 1.4s infinite ease-in-out both;
|
animation: load 1.4s infinite ease-in-out both;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user