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

<template>
  <u-navbar :titleStyle="{ color: '#000' }" :autoBack="true" title="" :placeholder="true" :safeAreaInsetTop="true" bgColor="#FFFFFF">
    <template #left>
      <view class="u-navbar__content__left__item">
        <u-icon name="arrow-left" size="20" color="#000"></u-icon>
      </view>
    </template>
  </u-navbar>

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

    <view class="bottom-area">
      <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="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',
        }"
        @click="handleSubmit()"
      >
        保 存
      </u-button>
    </view>
  </view>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, toRefs, getCurrentInstance } from "vue";
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
import config from "@/config";
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const useStore = useStores();
const commonStore = commonStores();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  linkUrl: "", //链接地址
  port: "",
  content: "",
  index: "",
});
const { linkUrl, port, content, index } = toRefs(state);

/**
 * @扫一扫
 * @按钮点击事件
 */
function scanClick() {
  uni.scanCode({
    autoZoom: false,
    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 (index.value) {
    let serveList = uni.getStorageSync("serveList");
    serveList[0].radiolist[index.value].linkUrl = !port.value ? linkUrl.value : linkUrl.value + ":" + port.value;
    serveList[0].radiolist[index.value].content = content.value;
    uni.setStorageSync("serveUrl", !port.value ? linkUrl.value : linkUrl.value + ":" + port.value);
    uni.setStorageSync("serveList", serveList);
  } else {
    if (!port.value) {
      uni.setStorageSync("serveUrl", linkUrl.value);
      commonStore.setServeList(linkUrl.value, content.value);
    } else {
      uni.setStorageSync("serveUrl", linkUrl.value + ":" + port.value);
      commonStore.setServeList(linkUrl.value + ":" + port.value, content.value);
    }
  }

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

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

onLoad((options) => {
  if ("index" in options) {
    index.value = options.index;
    let serveList = uni.getStorageSync("serveList");
    var serveArray = serveList[0].radiolist[options.index];

    if (serveArray.linkUrl.indexOf(":") != -1) {
      linkUrl.value = serveArray.linkUrl.split(":")[0];
      port.value = serveArray.linkUrl.split(":")[1];
      content.value = serveArray.content;
    } else {
      linkUrl.value = serveArray.linkUrl;
      port.value = "";
      content.value = serveArray.content;
    }
  }
});
</script>

<style lang="scss" scoped>
:deep() {
  .u-navbar__content__left,
  .u-navbar__content__right {
    padding: 0 25px;
    top: 50px;
  }
}

#serveConfig-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  margin: auto;
  padding: 0 30px;
  padding-top: 30%;
  //#ifdef MP-WEIXIN
  padding-top: 40%;
  //#endif
  background-color: #ffffff;

  .top-area {
  }

  .content-area {
    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-area {
    :deep() {
      .u-input {
        height: 45px;
        border-radius: 8px;
        padding: 5px 12px !important;
        border: 0 !important;
        background-color: #f5f6fa !important;
        margin-bottom: 15px;
      }
      .input-placeholder {
        color: #c0c4cc !important;
      }
      .uni-input-wrapper {
        font-size: 16px;
      }
      .u-line {
        display: none !important;
      }
    }
  }
}
</style>