pda_uniapp/pages/changeBaseUrl.vue

<template>
	<view class="normal-login-container">
	
		<cu-custom :isBack="true">
			<block slot="backText"></block>
			<block slot="content">修改配置信息</block>
		</cu-custom>

		<view class="menu">
			<view class="item" style="border-bottom: 1px solid #C4C4C4;">
				<view class="content ">
					<view class="title">
						<view class="titlemes">
							当前系统连接信息：
						</view>
						<view class="btn" @click="connectTestHander(changeUrlForm.baseUrl)">
							连通性测试
						</view>
					</view>
					<view class="text">
							{{changeUrlForm.baseUrl}}
					</view>
				</view>
			</view>
			<view class="item">
				<view class="content ">
					<view class="title">
						<view class="titlemes">
							项目实际连接信息：
						</view>
						<view class="btn" @click="connectTestHander(changeUrlForm.practicalUrl)"  v-if="changeUrlForm.practicalUrl.length>0">
							连通性测试
						</view>
					</view>
					<view class="text">
							{{changeUrlForm.practicalUrl?changeUrlForm.practicalUrl:"未设置"}}
					</view>
				</view>
			</view>
		
		</view>
		<view class="login-form-content menu">
			<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> -->
		<bottomBtn :isSubmit="true" :isDouble="true" cancelBtnColor="#FF7D00" :isWhite="false" position="fixed" :texts="['测试','保存']" @onCancel='testConnection'
			@onSubmit="saveUrl"></bottomBtn>
	</view>
</template>

<script>
	import {
		getCodeImg,
		register
	} from '@/api/login';
	import {
		bottomBtn
	} from '@/components/bottomBtn/bottomBtn.vue'
	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()
		},
		component: {
			bottomBtn
		},
		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%;
		background: rgb(242, 243, 245);
		height: 100vh;
		
		.menu{
			width: 702rpx;
			border-radius: 24rpx;
			background: rgb(255, 255, 255);
			padding: 12rpx 24rpx;
			margin:24rpx auto;
			.item{
				
				.content{
					padding: 12px 0;
					.title{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.titlemes{
							color: rgb(78, 89, 105);
							font-size: 28rpx;
							font-weight: 400;
						}
						.btn{
							color: rgb(22, 93, 255);
							font-size: 28rpx;
							font-weight: 400;
						}
					}
					.text{
						padding: 16rpx 0;
					}
				}
			}
		}
		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;

			image {
				border-radius: 4px;
			}

			.title {
				color: rgb(29, 33, 41);
				font-size: 32rpx;
				font-weight: 700;
				margin-left: 10px;
			}
		}

		.login-form-content {
			width: 702rpx;
			border-radius: 24rpx;
			background: rgb(255, 255, 255);
			padding: 12rpx 24rpx;
			margin:24rpx auto;

			.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>