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="goSeverConfig"> 扫码添加 </text> -->
    </view>

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

      <u-button type="primary" style="width: 100%; height: 45px; font-size: 17px; margin-top: 20px" @click="handleSubmit()" shape="circle"> 保 存</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";
import publicStore from "@/store/modules/public.js";
const newPublicStore = publicStore();

const { proxy } = getCurrentInstance();

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

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

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

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

  newPublicStore.serveUrl = linkUrl.value;
  navigateTo();
}

/**
 * @跳转登录
 */

function navigateTo() {
  uni.navigateTo({
    url: "/pages/login",
  });
}

onLoad((options) => {
  if (newPublicStore.serveUrl) {
    linkUrl.value = newPublicStore.serveUrl;
  }
});
</script>

<style>
body,
uni-page-body,
uni-page-refresh {
  background-color: #ffffff;
}
</style>

<style lang="scss" scoped>
#serveConfig {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 40px;
  margin: auto;
  padding-top: 20%;

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

    :deep(.input-placeholder) {
      color: #a0a4af;
    }

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