171 lines
3.4 KiB
Vue
171 lines
3.4 KiB
Vue
<script setup lang="ts">
|
||
const wifiEnabled = ref(true)
|
||
|
||
const networks = ref([
|
||
{ name: 'TP_LINK_5G', signal: '信号强度：强', ip: 'IP地址：192.168.1.100', connected: true },
|
||
{ name: 'TP_LINK_5G', signal: '信号强度：强', ip: 'IP地址：192.168.1.100', connected: false },
|
||
{ name: 'TP_LINK_5G', signal: '信号强度：强', ip: 'IP地址：192.168.1.100', connected: false },
|
||
])
|
||
|
||
function handleDisconnect(name: string) {
|
||
console.log('断开', name)
|
||
}
|
||
|
||
function handleConnect(name: string) {
|
||
console.log('连接', name)
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<view class="wifi-content">
|
||
<!-- WiFi开关 -->
|
||
<view class="card">
|
||
<view class="wifi-header">
|
||
<text class="card-title">
|
||
WIFI设置
|
||
</text>
|
||
</view>
|
||
<view class="wifi-toggle">
|
||
<view class="toggle-left">
|
||
<wd-icon name="wifi" size="20px" />
|
||
<text class="toggle-text">
|
||
WiFi开关
|
||
</text>
|
||
</view>
|
||
<wd-switch v-model="wifiEnabled" size="20px" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 可用网络 -->
|
||
<view class="card">
|
||
<view class="wifi-header">
|
||
<text class="card-title">
|
||
可用网络
|
||
</text>
|
||
<wd-icon name="refresh" size="20px" class="refresh-icon" />
|
||
</view>
|
||
<view class="network-list">
|
||
<view v-for="(network, index) in networks" :key="index" class="network-item">
|
||
<view class="network-info">
|
||
<wd-icon name="wifi" size="16px" />
|
||
<view class="network-detail">
|
||
<text class="network-name">
|
||
{{ network.name }}
|
||
</text>
|
||
<text class="network-meta">
|
||
{{ network.signal }} {{ network.ip }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<wd-button
|
||
v-if="network.connected"
|
||
size="small"
|
||
type="danger"
|
||
round
|
||
@tap="handleDisconnect(network.name)"
|
||
>
|
||
断开
|
||
</wd-button>
|
||
<wd-button
|
||
v-else
|
||
size="small"
|
||
type="primary"
|
||
round
|
||
@tap="handleConnect(network.name)"
|
||
>
|
||
连接
|
||
</wd-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.wifi-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.card {
|
||
background-color: #ffffff;
|
||
border-radius: 12px;
|
||
padding: 16px;
|
||
}
|
||
|
||
.wifi-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.refresh-icon {
|
||
color: #999;
|
||
}
|
||
|
||
.wifi-toggle {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.toggle-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.toggle-text {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.network-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.network-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.network-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.network-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.network-detail {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.network-name {
|
||
font-size: 18px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.network-meta {
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
</style>
|