pda_uniapp/pages/changeBaseUrl.vue

318 lines
7.9 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="normal-login-container">
<view class="logo-content align-center justify-center flex">
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
</image>
<text class="title">修改配置信息</text>
</view>
<view class="cu-list menu-avatar">
<view class="cu-item">
<view class="content flex-sub">
<view class="text-grey">当前系统连接信息</view>
<view class="text-gray text-sm flex justify-between">
<view class="text-gray text-sm">
{{changeUrlForm.baseUrl}}
</view>
<view class="text-gray text-sm">
<button @click="connectTestHander(changeUrlForm.baseUrl)"
class="changeUrl-btn cu-btn block bg-blue md round">连通性测试</button>
</view>
</view>
</view>
</view>
<view class="cu-item">
<view class="content flex-sub">
<view class="text-grey">项目实际连接信息</view>
<view class="text-gray text-sm flex justify-between">
<view class="text-gray text-sm">
{{changeUrlForm.practicalUrl?changeUrlForm.practicalUrl:"未设置"}}
</view>
<view class="text-gray text-sm" v-if="changeUrlForm.practicalUrl.length>0">
<button @click="connectTestHander(changeUrlForm.practicalUrl)"
class="changeUrl-btn cu-btn block bg-blue md round">连通性测试</button>
</view>
</view>
</view>
</view>
</view>
<view class="login-form-content">
<view class="cu-form-group input-item flex align-center">
<view class="title">新IP </view>
<input v-model="changeUrlForm.ip" class="input" type="text" placeholder="请输入IP" maxlength="30" />
</view>
<view class="cu-form-group input-item flex align-center">
<view class="title">新端口 </view>
<input v-model="changeUrlForm.port" type="text" class="input" placeholder="请输入端口" maxlength="20" />
</view>
<view class="flex action-btn">
<view class="flex-sub padding-sm margin-xs radius">
<button @click="testConnection()" class=" cu-btn block bg-yellow md round">测试</button>
</view>
<view class="flex-sub padding-sm margin-xs radius">
<button @click="saveUrl()" class=" cu-btn block bg-blue md round">保存</button>
</view>
</view>
</view>
<view class="xieyi text-center">
<text @click="handleUserLogin" class="text-blue">跳转到登录页</text>
</view>
</view>
</template>
<script>
import {
getCodeImg,
register
} from '@/api/login';
import config from '@/config';
import errorCode from '@/utils/errorCode';
import store from '@/store'
import {
getPracticalUrl,
setPracticalUrl
} from '@/utils/practicalUrl'
import {
toast,
showConfirm,
tansParams
} from '@/utils/common'
export default {
data() {
return {
captchaEnabled: true,
globalConfig: getApp().globalData.config,
changeUrlForm: {
baseUrl: getApp().globalData.config.baseUrl,
practicalUrl: getPracticalUrl(),
ip: "127.0.0.1",
port: "9292",
code: "",
uuid: ''
}
}
},
created() {
//this.getCode()
},
methods: {
// 用户登录
handleUserLogin() {
this.$tab.navigateTo(`/pages/login`)
},
// 获取图形验证码
getCode() {
getCodeImg().then(res => {
// this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
// if (this.captchaEnabled) {
// this.codeUrl = 'data:image/gif;base64,' + res.img
// this.changeUrlForm.uuid = res.uuid
// }
})
},
// 连通性测试
async connectTestHander(fullUrl) {
console.log("connectTestHander", fullUrl)
this.connection(fullUrl)
},
// 保存配置信息
async saveUrl() {
if (this.changeUrlForm.ip === "") {
this.$modal.msgError("请设置IP")
return;
} else if (this.changeUrlForm.port === "") {
this.$modal.msgError("请设置端口")
return;
}
var IP = 'http://' + this.changeUrlForm.ip + ':' + this.changeUrlForm.port;
setPracticalUrl(IP)
// config.practicalUrl =
// console.log("config.practicalUrl", config)
this.changeUrlForm.practicalUrl = getPracticalUrl()
showConfirm("连接信息保存成功")
},
async testConnection() {
if (this.changeUrlForm.ip === "") {
this.$modal.msgError("请设置IP")
return;
} else if (this.changeUrlForm.port === "") {
this.$modal.msgError("请设置端口")
return;
}
var testUrl = 'http://' + this.changeUrlForm.ip + ':' + this.changeUrlForm.port;
this.connection(testUrl)
},
// 连通性测试
async connection(ipAddrress) {
if (ipAddrress === "") {
this.$modal.msgError("请设置地址信息")
return;
}
uni.request({
method: 'get',
timeout: 3000,
url: ipAddrress + '/api/restful/base/networkTest',
data: config.data,
header: config.header,
dataType: 'json'
}).then(response => {
console.log("response", response)
let [error, res] = response
if (error) {
toast('后端接口连接异常')
return
}
const code = res.data.code || 200
const msg = errorCode[code] || res.data.msg || errorCode['default']
uni.showModal({
title: "系统提示",
content: res.data.msg + "! 时间戳:" + res.data.timeStamp,
success: function(res) {
if (res.confirm) {
//跳转到到登录页
// uni.redirectTo({
// url: `/pages/login`
// });
}
}
})
})
.catch(error => {
let {
message
} = error
if (message === 'Network Error') {
message = '后端接口连接异常'
} else if (message.includes('timeout')) {
message = '系统接口请求超时'
} else if (message.includes('Request failed with status code')) {
message = '系统接口' + message.substr(message.length - 3) + '异常'
}
uni.showModal({
title: "测试异常",
content: message,
success: function(res) {
console.log("res", res)
// if (res.confirm) {
// uni.redirectTo({
// url: `/pages/login`
// });
// }
}
})
toast(message)
reject(error)
})
},
// 用户注册
async changeUrl() {
register(this.changeUrlForm).then(res => {
this.$modal.closeLoading()
uni.showModal({
title: "系统提示",
content: "恭喜你,您的账号 " + this.changeUrlForm.username + " 注册成功!",
success: function(res) {
if (res.confirm) {
uni.redirectTo({
url: `/pages/login`
});
}
}
})
}).catch(() => {
if (this.captchaEnabled) {
this.getCode()
}
})
},
// 注册成功后,处理函数
changeUrlSuccess(result) {
// 设置用户信息
this.$store.dispatch('GetInfo').then(res => {
this.$tab.reLaunch('/pages/index')
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #ffffff;
}
.normal-login-container {
width: 100%;
.logo-content {
width: 100%;
font-size: 21px;
text-align: center;
padding-top: 15%;
image {
border-radius: 4px;
}
.title {
margin-left: 10px;
}
}
.login-form-content {
text-align: center;
margin: 20px auto;
margin-top: 15%;
width: 80%;
.input-item {
margin: 20px auto;
background-color: #f5f6f7;
height: 45px;
border-radius: 20px;
.icon {
font-size: 38rpx;
margin-left: 10px;
color: #999;
}
.input {
width: 100%;
font-size: 14px;
line-height: 20px;
text-align: left;
padding-left: 15px;
}
}
.changeUrl-btn {
margin-top: 40px;
height: 45px;
}
.xieyi {
color: #333;
margin-top: 20px;
}
.login-code {
height: 38px;
float: right;
.login-code-img {
height: 38px;
position: absolute;
margin-left: 10px;
width: 200rpx;
}
}
}
}
</style>