修改注册类型为点击选择

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>