|
@@ -0,0 +1,168 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="box">
|
|
|
|
+ <view class="config-info">
|
|
|
|
+ <view class="title">服务器选择</view>
|
|
|
|
+ <radio-group class="input-box" @change="radioChange">
|
|
|
|
+ <label
|
|
|
|
+ v-for="item in options"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ class="radio-item"
|
|
|
|
+ >
|
|
|
|
+ <radio
|
|
|
|
+ :value="item.value"
|
|
|
|
+ :checked="item.checked"
|
|
|
|
+ color="#774e41"
|
|
|
|
+ />
|
|
|
|
+ <text class="radio-label">{{ item.name }}</text>
|
|
|
|
+ </label>
|
|
|
|
+ </radio-group>
|
|
|
|
+ <van-cell size="large" title="当前服务器" :value="selectServer" />
|
|
|
|
+ <view class="login-btn">
|
|
|
|
+ <button class="btn" @click="confirm">确认</button>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ options: [
|
|
|
|
+ { name: "单机服务器", value: "aloneServe", checked: true },
|
|
|
|
+ { name: "集群服务器", value: "clusterServer", checked: false },
|
|
|
|
+ ],
|
|
|
|
+ selectServer: "单机服务器",
|
|
|
|
+ selectValue: "",
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ radioChange(e) {
|
|
|
|
+ const value = e.detail.value;
|
|
|
|
+ this.options = this.options.map((item) => ({
|
|
|
|
+ ...item,
|
|
|
|
+ checked: item.value === value,
|
|
|
|
+ }));
|
|
|
|
+ this.selectServer =
|
|
|
|
+ this.options.find((item) => item.checked)?.name || "";
|
|
|
|
+ this.selectValue =
|
|
|
|
+ this.options.find((item) => item.checked)?.value || "";
|
|
|
|
+ },
|
|
|
|
+ confirm() {
|
|
|
|
+ if (this.selectValue == "aloneServe") {
|
|
|
|
+ uni.setStorageSync("sercviceChoice", "aloneServe");
|
|
|
|
+ } else if (this.selectValue == "clusterServer") {
|
|
|
|
+ uni.setStorageSync("sercviceChoice", "clusterServer");
|
|
|
|
+ }
|
|
|
|
+ uni.removeStorageSync("devId");
|
|
|
|
+ uni.removeStorageSync("phone");
|
|
|
|
+ uni.removeStorageSync("userId");
|
|
|
|
+ uni.removeStorageSync("unionid");
|
|
|
|
+ uni.removeStorageSync("openid");
|
|
|
|
+ uni.reLaunch({
|
|
|
|
+ url: "/pagesA/loginNew/loginNew",
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ onShow() {
|
|
|
|
+ let selectedValue = uni.getStorageSync("sercviceChoice")
|
|
|
|
+ ? uni.getStorageSync("sercviceChoice")
|
|
|
|
+ : "aloneServe";
|
|
|
|
+ this.options = this.options.map((item) => ({
|
|
|
|
+ ...item,
|
|
|
|
+ checked: item.value === selectedValue,
|
|
|
|
+ }));
|
|
|
|
+ this.selectServer =
|
|
|
|
+ this.options.find((item) => item.checked)?.name || "";
|
|
|
|
+ this.selectValue =
|
|
|
|
+ this.options.find((item) => item.checked)?.value || "";
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="less">
|
|
|
|
+// 颜色变量
|
|
|
|
+.box {
|
|
|
|
+ padding: 10rpx 18rpx;
|
|
|
|
+ width: 100vw;
|
|
|
|
+ height: 100vh;
|
|
|
|
+ background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+
|
|
|
|
+ .config-info {
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ border-radius: 16rpx;
|
|
|
|
+ padding: 32rpx;
|
|
|
|
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ color: #333;
|
|
|
|
+ margin-bottom: 40rpx;
|
|
|
|
+ position: relative;
|
|
|
|
+ padding-left: 20rpx;
|
|
|
|
+
|
|
|
|
+ &::before {
|
|
|
|
+ content: "";
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 0;
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ width: 8rpx;
|
|
|
|
+ height: 36rpx;
|
|
|
|
+ background: #774e41;
|
|
|
|
+ border-radius: 4rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .input-box {
|
|
|
|
+ margin-bottom: 40rpx;
|
|
|
|
+
|
|
|
|
+ .radio-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
+ padding: 20rpx;
|
|
|
|
+ background: fade(#8a6845, 5%);
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
+ transition: all 0.3s;
|
|
|
|
+
|
|
|
|
+ &:active {
|
|
|
|
+ background: fade(#f9eee3, 10%);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .radio-label {
|
|
|
|
+ margin-left: 16rpx;
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
+ color: #333;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .login-btn {
|
|
|
|
+ margin-top: 60rpx;
|
|
|
|
+
|
|
|
|
+ .btn {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 88rpx;
|
|
|
|
+ line-height: 88rpx;
|
|
|
|
+ background: #774e41;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ border-radius: 12rpx;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ border: none;
|
|
|
|
+
|
|
|
|
+ &::after {
|
|
|
|
+ border: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:active {
|
|
|
|
+ opacity: 0.9;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|