159 lines
4.5 KiB
Vue
159 lines
4.5 KiB
Vue
<template>
|
||
<view class="ant-layout page">
|
||
<page-header></page-header>
|
||
<view class="ant-layout-header header">
|
||
<uni-row>
|
||
<uni-col :span="6" style="text-align: left;">
|
||
<view class="ant-btn" @click="back">返回</view>
|
||
</uni-col>
|
||
<uni-col :span="12">
|
||
<view class="title">
|
||
网络设置
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="6"></uni-col>
|
||
</uni-row>
|
||
</view>
|
||
<view class="ant-layout-content content">
|
||
<uni-row style="margin-top: 20%;">
|
||
<uni-col :span="16" :offset="4">
|
||
<uni-row class="form" :gutter="8">
|
||
<uni-col :span="16">
|
||
<view @click="onFocus('ip')" class="ant-input">
|
||
<text v-if="ip != ''">{{ ip }}</text>
|
||
<text style="color: #ccc;" v-else>ip地址</text>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="8">
|
||
<view @click="onFocus('port')" class="ant-input">
|
||
<text v-if="port != ''">{{ port }}</text>
|
||
<text style="color: #ccc;" v-else>端口号</text>
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<view class="extra">输入云端IP地址，如192.168.0.1:8000</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row justify="center" type="flex" style="margin-top: 40px;">
|
||
<uni-col>
|
||
<input-num ref="inputNum" @backspace="backspace" @input="input"></input-num>
|
||
</uni-col>
|
||
</uni-row>
|
||
<uni-row justify="center" type="flex" style="margin-top: 40px;">
|
||
<view class="ant-btn" @click="submit">确定</view>
|
||
</uni-row>
|
||
|
||
</view>
|
||
<notice ref="notice"/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import InputNum from '@/components/InputNum.vue';
|
||
import PageHeader from '@/components/PageHeader.vue'
|
||
import Notice from '@/components/Notice.vue';
|
||
import storage from '@/utils/storage'
|
||
export default {
|
||
components: {
|
||
InputNum,PageHeader,Notice
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
ip: '',
|
||
port: '',
|
||
|
||
focus: 'ip'
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getData();
|
||
},
|
||
methods: {
|
||
getData() {
|
||
let server = storage.get('config', '')
|
||
if (server) {
|
||
this.ip = server.ip;
|
||
this.port = server.port;
|
||
}
|
||
},
|
||
back() {
|
||
uni.navigateBack()
|
||
},
|
||
onFocus(val) {
|
||
this.focus = val;
|
||
},
|
||
backspace() {
|
||
if (this.focus == 'ip') {
|
||
this.ip = this.ip.slice(0, -1)
|
||
}
|
||
if (this.focus == 'port') {
|
||
this.port = this.port.slice(0, -1)
|
||
}
|
||
},
|
||
input(val) {
|
||
if (this.focus == 'ip') {
|
||
this.ip += val
|
||
}
|
||
if (this.focus == 'port') {
|
||
this.port += val
|
||
}
|
||
},
|
||
submit() {
|
||
if (!this.isValidIP(this.ip)) {
|
||
// this.$message.error('请输入正确的IP地址');
|
||
return;
|
||
}
|
||
let data = {
|
||
ip: this.ip,
|
||
port: this.port ? this.port : '80'
|
||
}
|
||
storage.set('config', data)
|
||
this.$store.state.apiUrl = 'http://' + data.ip + ':' + data.port
|
||
this.$refs.notice.open({
|
||
title: data.ip + ':' + data.port,
|
||
content: '设置成功'
|
||
})
|
||
|
||
},
|
||
isValidIP(ip) {
|
||
const ipRegex = /^(?:(?: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 ipRegex.test(ip);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page{
|
||
background: transparent;
|
||
}
|
||
.ant-btn{
|
||
line-height: 38px;
|
||
}
|
||
.ant-btn{
|
||
background: #2F3242;
|
||
border-color: #2F3242;
|
||
height: 46px;
|
||
width: 128px;
|
||
border-radius: 50px;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
.form{
|
||
justify-content: center;
|
||
}
|
||
.ant-input{
|
||
font-size: 18px;
|
||
}
|
||
.extra{
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
margin-top: 20px;
|
||
}
|
||
.title{
|
||
font-size: 24px;
|
||
color: #747A8D;
|
||
}
|
||
</style> |