<template>
|
<view class="app">
|
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
|
<block slot="content">切换模式</block>
|
</cu-custom>
|
|
<view class="cu-bar bg-white margin-top">
|
<view class="action sub-title">
|
<text class="text-xl text-bold text-blue text-shadow">当前模式</text>
|
<text class="text-ABC text-blue">current</text>
|
</view>
|
</view>
|
<u-form labelPosition="left" ref="form">
|
<view class="padding-lr info-box">
|
|
<view class="cover-view" @tap.catch="showSelect">
|
|
</view>
|
|
<view style="position: relative;">
|
<u-form-item label="模式" prop="username" borderBottom>
|
<u-input v-model="sModel" border="none" suffixIcon="arrow-right" readonly></u-input>
|
</u-form-item>
|
</view>
|
|
|
|
|
<u-form-item label="地址" prop="password" borderBottom v-show="showIp">
|
<u-input v-model="ip" placeholder="请输入IP地址,如:192.168.1.1" border="none" clearable>
|
</u-input>
|
</u-form-item>
|
|
<view class="submitBtn" @click="saveMode">保存</view>
|
<view style="height: 20rpx;background-color: white"></view>
|
</view>
|
</u-form>
|
|
<u-action-sheet :closeOnClickAction="true" @close="show=false" @select="selectMode" :safeAreaInsetBottom="true"
|
:actions="switchList" title="选择模式" cancelText="取消" :show="show"></u-action-sheet>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
vShow
|
} from "vue";
|
|
export default {
|
data() {
|
return {
|
switchList: [{
|
name: '云服务',
|
index: 0
|
}, {
|
name: '局域网',
|
index: 1
|
}],
|
show: false,
|
sModel: '云服务',
|
ip: '',
|
showIp: false,
|
selectModeIndex: 0,
|
|
};
|
},
|
mounted() {
|
const mode = uni.getStorageSync('mode');
|
const lan_ip = uni.getStorageSync('lan_ip');
|
if (mode) {
|
if (mode == 'cloud') {
|
this.sModel = '云服务'
|
this.showIp = false
|
} else if (mode == 'lan') {
|
this.sModel = '局域网'
|
this.showIp = true
|
}
|
|
if (this.sModel == '局域网') {
|
this.ip = lan_ip
|
}
|
|
}
|
},
|
methods: {
|
showSelect() {
|
this.show = true
|
},
|
selectMode(item) {
|
this.sModel = item.name
|
console.error(item.index)
|
this.showIp = item.index === 1
|
this.selectModeIndex = item.index
|
|
},
|
saveMode() {
|
if (!this.ip | !this.isValidIPv4(this.ip)) {
|
|
uni.$u.toast('请输入正确IP地址~')
|
return false
|
|
}
|
|
if (this.selectModeIndex === 0) {
|
uni.removeStorageSync('lan_ip')
|
uni.setStorageSync('mode', 'cloud');
|
} else if (this.selectModeIndex === 1) {
|
uni.setStorageSync('mode', 'lan');
|
uni.setStorageSync('lan_ip', this.ip);
|
}
|
|
uni.$u.toast('配置成功,请完全退出程序后重新启动~')
|
},
|
isValidIPv4(ip) {
|
const ipv4Regex =
|
/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
|
return ipv4Regex.test(ip);
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.cover-view {
|
position: absolute;
|
/* 必须是相对定位或绝对定位 */
|
z-index: 10;
|
/* 确保 z-index 值高于 u-input */
|
width: 100%;
|
height: 80rpx;
|
background-color: transparent;
|
}
|
|
.info-box {
|
position: relative;
|
background-color: white;
|
}
|
|
.distinguishBox {
|
padding: 5rpx 30rpx 20rpx;
|
background: white;
|
|
view {
|
margin-bottom: 20rpx;
|
}
|
}
|
|
.disLabel {
|
text-align-last: justify;
|
text-align: justify;
|
text-justify: distribute-all-lines;
|
min-width: 142rpx;
|
display: inline-block;
|
margin-right: 5rpx;
|
}
|
|
.submitBtn {
|
width: 90%;
|
height: 90rpx;
|
background: #007aec;
|
line-height: 90rpx;
|
margin: 50rpx auto;
|
text-align: center;
|
font-size: 34rpx;
|
color: #fff;
|
border-radius: 12rpx;
|
}
|
</style>
|
