usky-web-mobile/src/pages/serveConfig.vue

<template>
  <view id="serveConfig">
    <view class="top">
      <u-icon name="arrow-left" size="17px" color="#000" :bold="true" @click="navigateTo"></u-icon>
    </view>

    <view class="content">
      <text class="title">设置服务器地址</text>
      <u-icon class="icons" name="scan" color="#2a98ff" size="22"></u-icon>
      <text class="setting" @tap="scanClick"> 扫码添加 </text>
    </view>

    <view id="login-input" class="bottom">
      <u-input v-model="linkUrl" placeholder="服务器地址(必填)" border="none" clearable> </u-input>

      <!-- <u-input v-model="port" type="number" placeholder="端口号(必填)" border="none" maxlength="5" clearable> </u-input> -->

      <u-input v-model="port" type="number" placeholder="端口号(非必填)" border="none" maxlength="5" clearable> </u-input>

      <u-input v-model="content" placeholder="备注(非必填)" border="none" maxlength="20" clearable> </u-input>

      <u-button
        type="primary"
        shape="circle"
        :customStyle="{
          display: 'block',
          width: '100%',
          height: '45px',
          lineHeight: '45px',
          fontSize: '17px',
          marginTop: '20px',
        }"
        @click="handleSubmit()"
      >
        保 存
      </u-button>
    </view>
  </view>
</template>

<script setup>
import config from "@/config";
import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, toRefs, getCurrentInstance } from "vue";
import { publicStores, useStores } from "@/store/modules/index";
import { getToken, setToken, removeToken } from "@/utils/auth";

const publicStore = publicStores();

const { proxy } = getCurrentInstance();

const dataList = reactive({
  linkUrl: "", //链接地址
  port: "",
  content: "",
});

const uForm = ref(null);
const { linkUrl, port, content } = toRefs(dataList);

/**
 * @扫一扫
 * @按钮点击事件
 */
function scanClick() {
  uni.scanCode({
    success: async (e) => {
      uni.showToast({
        title: "扫码成功",
        icon: "none",
      });

      linkUrl.value = e.result.split(":")[0];
      port.value = e.result.split(":")[1];
    },
    fail: (err) => {
      uni.showToast({
        title: "扫码失败",
        icon: "none",
      });
      console.log("扫码失败", err);
    },
    complete: () => {
      // uni.showToast({
      //   title: "扫码结束",
      //   icon: "none",
      // });
      console.log("扫码结束");
    },
  });
}

/**
 * @保存
 * @按钮点击事件
 */
function handleSubmit() {
  if (!linkUrl.value) {
    proxy.$modal.msg("请输入链接地址");
    return;
  }

  if (!/^[a-zA-Z0-9][a-zA-Z0-9-]{1,61}(?:\.[a-zA-Z0-9]{2,})+$/.test(linkUrl.value)) {
    proxy.$modal.msg("请输入正确的链接地址");
    return;
  }

  // if (!port.value) {
  //   proxy.$modal.msg("请输入端口号");
  //   return;
  // }

  if (!port.value) {
    uni.setStorageSync("serveUrl", linkUrl.value);
    publicStore.getServeList(linkUrl.value, content.value);
  } else {
    uni.setStorageSync("serveUrl", linkUrl.value + ":" + port.value);
    publicStore.getServeList(linkUrl.value + ":" + port.value, content.value);
  }

  config.baseUrl = "http://" + uni.getStorageSync("serveUrl") + "/prod-api";
  navigateTo();
}

/**
 * @跳转登录
 */
function navigateTo() {
  proxy.$tab.navigateBack(1);
}

onLoad((options) => {});
</script>

<style lang="scss" scoped>
#serveConfig {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  padding: 0 40px;
  margin: auto;
  padding-top: 20%;
  background-color: #ffffff;

  .top {
  }

  .content {
    display: flex;
    margin: 30px 0;

    .title {
      margin: auto auto auto 0;
      color: #000;
      font-size: 18px;
    }

    .icons {
      margin: auto 5px auto 0;
    }

    .setting {
      color: #2a98ff;
      margin: auto 0;
    }
  }

  .bottom {
    :deep(.u-input) {
      height: 45px;
      border-radius: 8px;
      padding: 5px 12px !important;
      border: 0 !important;
      //   border-color: #000 !important;
      //   border-color: gray !important;
      //   background-color: rgba(255, 255, 255, 0.1) !important;
      background-color: #f5f6fa !important;
      margin-bottom: 15px;
    }

    :deep(.input-placeholder) {
      color: #c0c4cc !important;
    }

    :deep(.uni-input-wrapper) {
      font-size: 16px;
    }

    // :deep(.u-input__content__field-wrapper__field) {
    //   height: 30px;
    //   line-height: 30px;
    // }

    :deep(.uni-input-input) {
      // padding:8px
    }

    :deep(.u-line) {
      display: none !important;
    }
  }
}
</style>