usky-web-mobile/src/pages/serveConfigSelect.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" @tap="serveClick(1)"></u-icon>
      <text class="setting" @click="serveClick(2)"> 添加 </text>
    </view>

    <view class="bottom">
      <div class="serveList">
        <u-radio-group v-model="radiovalue" placement="column" @change="handleRadio">
          <div style="display: flex; background-color: #f5f6fa !important; margin-bottom: 15px; padding: 10px; border-radius: 8px" v-for="(item, index) in radiolist" :key="index">
            <u-radio :customStyle="{ margin: 'auto 0' }" :value="item.id" :name="item.id"></u-radio>

            <div style="margin: auto 0 auto 0; width: 100%" @click="handleRadio(item.id)">
              <div style="margin-bottom: 5px; font-weight: 600">{{ item.linkUrl }}</div>
              <div style="color: #a0a4af; font-size: 12px">备注：{{ item.content }}</div>
            </div>

            <div v-if="item.id != radiovalue" style="margin: auto 0 auto 0; height: 100%" @click="deleteRadio(index)">
              <u-icon name="close" color="#a0a4af" size="14"></u-icon>
            </div>
          </div>
        </u-radio-group>
      </div>

      <u-button v-if="radiolist.length > 0" 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 config from "@/config";
import { onLoad, onShow, onHide, onLaunch } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, toRefs, getCurrentInstance, watchEffect } from "vue";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { publicStores, useStores } from "@/store/modules/index";

const publicStore = publicStores();

const { proxy } = getCurrentInstance();

const dataList = reactive({
  radiolist: [],
  radiovalue: "",
});

const uForm = ref(null);
const { radiolist, radiovalue } = toRefs(dataList);

/**
 * @切换单选
 * @按钮点击事件
 */
function handleRadio(id) {
  radiovalue.value = id;
  let serveList = uni.getStorageSync("serveList");
  serveList[0].radiovalue = radiovalue.value;
  uni.setStorageSync("serveList", serveList);
}

/**
 * @删除
 * @按钮点击事件
 */
function deleteRadio(index) {
  let serveList = uni.getStorageSync("serveList");
  serveList[0].radiolist.splice(index, 1);
  uni.setStorageSync("serveList", serveList);

  init();

  proxy.$tab.redirectTo("/pages/serveConfigSelect"); //重载当前页
}

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

        publicStore.getServeList(e.result, "");

        init();

        proxy.$tab.redirectTo("/pages/serveConfigSelect"); //重载当前页
      },
      fail: (err) => {
        uni.showToast({
          title: "扫码失败",
          icon: "none",
        });
        console.log("扫码失败", err);
      },
      complete: () => {
        // uni.showToast({
        //   title: "扫码结束",
        //   icon: "none",
        // });
        console.log("扫码结束");
      },
    });
  } else if (type == 2) {
    proxy.$tab.navigateTo("/pages/serveConfig");
  }
}

/**
 * @保存
 * @按钮点击事件
 */
function handleSubmit() {
  let serveList = uni.getStorageSync("serveList");
  if (serveList.length > 0) {
    serveList[0].radiolist.forEach((el) => {
      if (el.id == serveList[0].radiovalue) {
        uni.setStorageSync("serveUrl", el.linkUrl);
        config.baseUrl = "http://" + uni.getStorageSync("serveUrl") + "/prod-api";
        navigateTo();
      }
    });
  }
}

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

/**
 * @初始化
 */
function init() {
  let serveList = uni.getStorageSync("serveList");
  if (serveList.length > 0) {
    radiolist.value = serveList[0].radiolist;
    radiovalue.value = serveList[0].radiovalue;
  }
}

onShow(() => {
  init();
});

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

<style lang="scss" scoped>
#serveConfig {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  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 {
    .serveList {
      max-height: calc(59px * 6);
      overflow: auto;
    }
    // .u-radio {
    //   :deep(.u-radio__icon-wrap) {
    //     background-color: transparent !important;
    //   }

    //   :deep(.u-icon) {
    //     width: 8px;
    //     height: 8px;
    //     background-color: rgb(41, 121, 255);
    //     border-radius: 100%;
    //   }

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