aiot-app/components/ServerSetting/index.vue

<template>
	<u-popup :show="popShow" @close="cancel" mode="center" :is-mask-click="false">
		<view class="popup-wrapper">
			<view class="title">服务器设置</view>

			<u-form labelPosition="left" labelAlign="right" :model="formData" :rules="rules" ref="formRef"
				label-width="180">
				<u-form-item label="服务器地址" prop="hostname" class="form-required">
					<uni-data-select @change="setServerStatus = false" :clear="false" v-model="formData.protocal"
						:localdata="[
              { value: 'http://', text: 'http://' },
              { value: 'https://', text: 'https://' }
            ]"></uni-data-select>
					<u-input v-model="formData.hostname" placeholder="输入" @change="setServerStatus = false">
					</u-input>
				</u-form-item>
				<u-form-item label="端口号" prop="port" class="form-required">
					<u-input v-model="formData.port" placeholder="输入" @change="setServerStatus = false">
					</u-input>
				</u-form-item>
			</u-form>
			<view class="footer">
				<u-button size="small" @click="cancel">取消</u-button>
				<u-button size="small" @click="handleTest">测试</u-button>
				<u-button size="small" type="success" @click="confirm" :disabled="!setServerStatus">确定</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {

				popShow: false,
				setServerStatus: false,
				formData: {
					protocal: 'http://',
					hostname: '',
					port: ''
				},
				apiInfo: {},
				rules: {
					hostname: {
						type: 'string',
						required: true,
						message: '请输入服务器地址',
						trigger: ['blur']
					},
					port: {
						type: 'number',
						required: true,
						message: '请输入正确的端口号',
						trigger: ['blur']
					}
				}
			}
		},
		created() {
			this.apiInfo = uni.getStorageSync('apiInfo')
			this.formData.hostname = this.apiInfo.hostname
			this.formData.port = this.apiInfo.port
			this.formData.protocal = this.apiInfo.protocal || 'http://'
		},
		methods: {
			open() {
				this.formData.hostname = this.apiInfo.hostname
				this.formData.port = this.apiInfo.port
				this.formData.protocal = this.apiInfo.protocal || 'http://'

				this.popShow = true
			},

			cancel() {
				// this.$refs.formRef && this.$refs.formRef.resetFields()
				this.popShow = false
			},

			serverCheck() {

			},
			handleTest() {
				this.setServerStatus = false
				this.$refs.formRef.validate().then(res => {
			
					uni.showLoading({
						mask: true
					})


					uni.request({
						url: `${this.formData.protocal}${this.formData.hostname}:${this.formData.port}/api/main/connection/getConnectionTest`,
						method: 'get',
						timeout:5000,
						success: res => {
							console.log(res);
							this.url = res.data.code
							if (res.data.code == 0) {
								uni.$u.toast('连接成功！')
								this.setServerStatus = true
							} else {
								uni.$u.toast('连接失败！')
							}
						},
						fail: f => {
							console.log(f);
							uni.$u.toast('连接失败！')
							uni.hideLoading()
						}
					})
				})
			},
			handleCheck() {



			},
			confirm() {
				this.$refs.formRef
					.validate()
					.then(res => {
						Vue.prototype.apiWebUrl =
							`${this.formData.protocal}${this.formData.hostname}:${this.formData.port}/web`
						Vue.prototype.apiUrl =
							`${this.formData.protocal}${this.formData.hostname}:${this.formData.port}/api`
						Vue.prototype.webviewUrl = `${this.formData.protocal}${this.formData.hostname}:${this.formData.port}`

						uni.setStorageSync('apiInfo', this.formData)
						this.$emit('setServerStatus', true)
						this.cancel()
					})
					.catch(errors => {
						uni.$u.toast('校验失败')
					})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.popup-wrapper {
		padding: 0 20rpx;

		.title {
			text-align: center;
			font-weight: bold;
			padding: 20rpx;
		}

		/deep/.u-form {
			.u-input__content__field-wrapper__field,
			.u-form-item__body__left__content__label {
				font-size: 28rpx !important;
			}

			.u-form-item__body__right__content__slot {}
		}

		/deep/.uni-stat__select {
			// height: 76rpx !important;
			width: 150rpx;
			flex: 0;

			.uni-select {
				width: 150rpx;
				font-size: 28rpx !important;
			}

			.uni-stat-box,
			.uni-select__input-box {
				// height: 76rpx !important;
			}
		}

		/deep/.u-input {
			flex: 1;
			padding: 12rpx 18rpx !important;
			border: 1px solid #e5e5e5;
		}

		.footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;

			.u-button+.u-button {
				margin-left: 20rpx;
			}
		}
	}
</style>