xcx-login/src/pages/serveConfigSelect.vue

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

    <view class="content-area">
      <text class="content-area-title">选择服务器地址</text>
      <u-icon class="content-area-icons" name="scan" color="#2a98ff" size="22" @tap="serveClick(1)"></u-icon>
      <text class="content-area-setting" @click="serveClick(2)"> 添加 </text>
    </view>

    <view class="bottom-area">
      <div class="serveList">
        <u-radio-group v-model="radiovalue" placement="column" @change="handleRadio">
          <div class="serveList-item" v-for="(item, index) in radiolist" :key="index">
            <u-radio :customStyle="{ display: 'block', margin: 'auto 0' }" :value="item.id" :name="item.id"></u-radio>

            <div class="serveList-item-center" @click="handleRadio(item.id)">
              <div class="serveList-item-center-title">{{ item.linkUrl }}</div>
              <div class="serveList-item-center-content">备注：{{ item.content }}</div>
            </div>

            <div v-if="item.id != radiovalue" class="serveList-item-icon" @click="deleteRadio(index)">
              <u-icon name="close" color="#a0a4af" size="14"></u-icon>
            </div>

            <div v-if="item.id == radiovalue" class="serveList-item-icon" @click="editRadio(index)">
              <u-icon name="arrow-right" color="#a0a4af" size="14"></u-icon>
            </div>
          </div>
        </u-radio-group>
      </div>

      <u-button
        v-if="radiolist.length > 0"
        type="primary"
        :customStyle="{
          display: 'block',
          width: '100%',
          height: '45px',
          lineHeight: '45px',
          fontSize: '17px',
        }"
        @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, watchEffect } 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({
  radiolist: [],
  radiovalue: "",
});
const { radiolist, radiovalue } = toRefs(state);

/**
 * @切换单选
 * @按钮点击事件
 */
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 editRadio(index) {
  proxy.$tab.navigateTo("/pages/serveConfig?index=" + index);
}

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

        commonStore.setServeList(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 = "https://" + 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>
#serveConfigSelect-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  margin: auto;
  padding: 0 30px;
  padding-top: 20%;
  //#ifdef MP-WEIXIN
  padding-top: 30%;
  //#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 {
    .serveList {
      max-height: calc(59px * 6);
      overflow: auto;

      &-item {
        display: flex;
        background-color: #f5f6fa !important;
        margin-bottom: 15px;
        padding: 10px;
        border-radius: 8px;

        &-center {
          margin: auto 0 auto 0;
          width: 100%;

          &-title {
            margin-bottom: 5px;
            font-weight: 600;
          }

          &-content {
            color: #a0a4af;
            font-size: 12px;
          }
        }

        &-icon {
          margin: auto 0 auto 0;
          height: 100%;
        }
      }
    }
  }
}
</style>