125 lines
3.3 KiB
Vue
125 lines
3.3 KiB
Vue
<template>
|
||
<view class="page">
|
||
<view class="px-32rpx py-24rpx">
|
||
<text class="text-sm" style="color: var(--color-text-placeholder)">温馨提示：点击下方「开始测试」按钮，即可自动检测当前网络延迟。</text>
|
||
</view>
|
||
|
||
<view class="px-32rpx">
|
||
<wd-button block plain @click="startTest">开始测试</wd-button>
|
||
</view>
|
||
|
||
<view v-if="isTesting" class="flex-col-center py-40rpx">
|
||
<wd-loading color="var(--wot-color-theme)" />
|
||
<text class="mt-16rpx text-sm" style="color: var(--color-text-secondary)">正在测试中...</text>
|
||
</view>
|
||
|
||
<view v-if="result !== null" class="px-32rpx">
|
||
<view class="result-card">
|
||
<view class="result-card__header">测试结果</view>
|
||
<view class="result-card__row">
|
||
<text style="color: var(--color-text-secondary)">网络延迟</text>
|
||
<text :class="['text-36rpx font-semibold', statusColor]">{{ result }}ms</text>
|
||
</view>
|
||
<view class="result-card__row">
|
||
<text style="color: var(--color-text-secondary)">网络状态</text>
|
||
<text :class="['font-medium', statusColor]">{{ statusText }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
|
||
const result = ref<number | null>(null);
|
||
const isTesting = ref(false);
|
||
|
||
const statusText = computed(() => {
|
||
if (result.value == null) return "";
|
||
if (result.value < 100) return "优秀";
|
||
if (result.value < 300) return "良好";
|
||
if (result.value < 500) return "一般";
|
||
return "较差";
|
||
});
|
||
|
||
const statusColor = computed(() => {
|
||
if (result.value == null) return "";
|
||
if (result.value < 100) return "color-success";
|
||
if (result.value < 300) return "color-primary";
|
||
if (result.value < 500) return "color-warning";
|
||
return "color-danger";
|
||
});
|
||
|
||
const startTest = async () => {
|
||
isTesting.value = true;
|
||
result.value = null;
|
||
try {
|
||
const startTime = Date.now();
|
||
// #ifdef MP-WEIXIN
|
||
await new Promise<void>((resolve) => {
|
||
wx.request({
|
||
url: "https://www.baidu.com",
|
||
method: "GET",
|
||
success: () => resolve(),
|
||
fail: () => resolve(),
|
||
});
|
||
});
|
||
// #endif
|
||
// #ifdef H5
|
||
await fetch("https://www.baidu.com", { mode: "no-cors" });
|
||
// #endif
|
||
result.value = Date.now() - startTime;
|
||
} catch {
|
||
result.value = 9999;
|
||
} finally {
|
||
isTesting.value = false;
|
||
}
|
||
};
|
||
|
||
onLoad(() => {
|
||
uni.setNavigationBarTitle({ title: "网络测试" });
|
||
});
|
||
</script>
|
||
|
||
<route lang="json">
|
||
{
|
||
"name": "network",
|
||
"style": {
|
||
"navigationBarTitleText": "网络测试"
|
||
}
|
||
}
|
||
</route>
|
||
|
||
<style lang="scss" scoped>
|
||
.result-card {
|
||
background: var(--color-bg);
|
||
border-radius: 16rpx;
|
||
border: 1px solid var(--color-border);
|
||
overflow: hidden;
|
||
|
||
&__header {
|
||
padding: 24rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
border-bottom: 1px solid var(--color-border);
|
||
}
|
||
|
||
&__row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
|
||
& + & {
|
||
border-top: 1px solid var(--color-border-light);
|
||
}
|
||
}
|
||
}
|
||
|
||
.color-success { color: var(--color-success); }
|
||
.color-primary { color: var(--color-primary); }
|
||
.color-warning { color: var(--color-warning); }
|
||
.color-danger { color: var(--color-danger); }
|
||
</style>
|