From 9edf5248f380acd1fd96f0576f1173479dc6a108 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?TOP=E7=B3=AF=E7=B1=B3?= <1130395124@qq.com>
Date: Thu, 6 Apr 2023 22:32:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=B3=A8=E5=86=8C=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E4=B8=BA=E7=82=B9=E5=87=BB=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/auth/auth.vue | 61 ++++++++++++++++++++++++++++++++---------
 1 file changed, 48 insertions(+), 13 deletions(-)

diff --git a/src/pages/auth/auth.vue b/src/pages/auth/auth.vue
index b315c80..8f79573 100644
--- a/src/pages/auth/auth.vue
+++ b/src/pages/auth/auth.vue
@@ -81,14 +81,12 @@
                                     placeholder-class="placeholder-style-3"
                                 />
                             </view>
-                            <view class="input-item">
-                                <picker mode="selector" :range="registerType" range-key="name" @change="changeRegisterType">
-                                    <view class="picker-view register-type">
-                                        <text class="name" :class="{ active: currentRegisterType.name != '' }">
-                                            {{ currentRegisterType.name ? currentRegisterType.name : "请选择注册类型" }}
-                                        </text>
-                                    </view>
-                                </picker>
+                            <view class="input-item" @click="showRegisterTypeModal = true">
+                                <view class="text-view register-type">
+                                    <text class="text" :class="{ active: currentRegisterType.name != '' }">
+                                        {{ currentRegisterType.name ? currentRegisterType.name : "请选择注册类型" }}
+                                    </text>
+                                </view>
                             </view>
                             <view class="helper">
                                 <app-agreement v-model="isAgree" />
@@ -105,12 +103,26 @@
                 </view>
             </view>
         </view>
+        <widget-modal title="选择注册类型" v-show="showRegisterTypeModal" @close="showRegisterTypeModal = false">
+            <view class="register-type-group">
+                <view
+                    class="register-type-item"
+                    v-for="(item, index) in registerType"
+                    :key="index"
+                    @click="changeRegisterType(item)"
+                    :class="{ active: currentRegisterType.id == item.id }"
+                >
+                    {{ item.name }}
+                </view>
+            </view>
+        </widget-modal>
     </app-layout>
 </template>
 
 <script>
 import AppLayout from "@/components/layout/layout";
 import AppAgreement from "@/components/auth/agreement";
+import WidgetModal from "@/components/widgets/modal";
 import { mapState } from "vuex";
 export default {
     name: "auth",
@@ -118,6 +130,7 @@ export default {
         return {
             utils: this.$utils,
             safePt: 0,
+            showRegisterTypeModal: false,
             backgroundImage: require("@/static/temp/1.png"),
             canUse: true,
             sec: 0,
@@ -137,6 +150,7 @@ export default {
     components: {
         AppLayout,
         AppAgreement,
+        WidgetModal,
     },
     computed: {
         ...mapState({
@@ -159,8 +173,8 @@ export default {
          * 修改注册类型
          */
         changeRegisterType(e) {
-            let currentRegisterType = this.registerType[e.detail.value];
-            this.currentRegisterType = currentRegisterType;
+            this.currentRegisterType = e;
+            this.showRegisterTypeModal = false;
         },
         /**
          * 忘记密码
@@ -379,14 +393,35 @@ export default {
         margin: 160rpx auto 160rpx auto;
     }
 }
-.picker-view.register-type {
+.text-view.register-type {
     font-size: 32rpx;
     padding: 30rpx 0;
-    .name {
+    .text {
         color: #c9c9c9;
     }
-    .name.active {
+    .text.active {
         color: #666666;
     }
 }
+.register-type-group {
+    width: 100%;
+    .register-type-item {
+        display: inline-block;
+        width: 270rpx;
+        margin: 0 10rpx 10rpx 0;
+        box-sizing: border-box;
+        padding: 20rpx 0;
+        text-align: center;
+        font-size: 28rpx;
+        color: #333333;
+        background-color: #ededed;
+    }
+    .register-type-item:nth-child(2n) {
+        margin-right: 0;
+    }
+    .register-type-item.active {
+        color: #ffffff;
+        background-color: #ffa800;
+    }
+}
 </style>
\ No newline at end of file