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 { get } from '@/utils/api.js'
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
    },
    serverCheck () {
      const _this = this

      if (!this.apiInfo.hostname) {
        Vue.prototype.apiWebUrl = ``
        Vue.prototype.apiUrl = ``
        this.open()
        return
      }

      new Promise(resolve => {
        uni.showLoading({
          mask: true
        })
        this.setServerStatus = false
        this.handleCheck()
          .then(res => {
            if (!res.success) {
              resolve()
            } else {
              this.$emit('setServerStatus', true)
              this.setServerStatus = true
            }
          })
          .catch(resolve)
          .finally(() => {
            uni.hideLoading()
          })
      }).then(() => {
        this.$emit('setServerStatus', false)

        uni.showModal({
          title: '服务器地址异常',
          content: '',
          confirmText: '设置服务器地址',
          success: function (res) {
            if (res.confirm) {
              _this.open()
            }
          }
        })
      })
    },
    cancel () {
      // this.$refs.formRef && this.$refs.formRef.resetFields()
      this.popShow = false
    },
    handleTest () {
      this.setServerStatus = false
      this.$refs.formRef.validate().then(res => {
        uni.showLoading({
          mask: true
        })
        this.handleCheck()
          .then(res => {
            if (res.success) {
              uni.$u.toast('连接成功！')
              this.setServerStatus = true
            } else {
              uni.$u.toast('连接失败！')
            }
          })
          .catch(err => {
            uni.$u.toast('连接失败！')
          })
          .finally(() => {
            uni.hideLoading()
          })
      })
    },
    handleCheck () {
      return get(
        `${this.formData.protocal}${this.formData.hostname}:${this.formData.port}/connection/getConnectionTest`,
        {},
        true,
        true,
        { timeout: 15000 }
      )
    },
    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`

          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>