地区选择

src/project/qujing/AppLegalLearning/components/GeneralLawExam.vue

@@ -31,14 +31,22 @@
         
         <div class="auth_form">
           <div class="form_name">姓名</div>
-          <input class="form_value" type="text" placeholder="请输入姓名" v-model="value1"/>
+          <input class="form_value" type="text" placeholder="请输入姓名" v-model="form.name"/>
           <div class="form_name">身份证号</div>
-          <input class="form_value" type="idcard" placeholder="请输入18位身份证号" v-model="value2"/>
+          <input class="form_value" type="idcard" placeholder="请输入18位身份证号" v-model="form.idNumber"/>
+          <div class="form_name">地区</div>
+          <AiAreaPicker class="ai-area" v-model="form.areaId" :fullName.sync="form.areaName" all>
+            <div class="ai-area__wrapper">
+              <span class="label" v-if="form.areaName">{{ form.areaName }}</span>
+              <i v-else style="color: #999">请选择</i>
+              <u-icon name="arrow-right" color="#ddd"/>
+            </div>
+          </AiAreaPicker>
         </div>
 
         <div class="auth_btn">
-          <div class="cancel">取消</div>
+          <div class="cancel" @click="showAuth = false,form = {}">取消</div>
-          <div class="submit">确定</div>
+          <div class="submit" @click="comfirm">确定</div>
         </div>
       </div>
 		</u-popup>
@@ -52,6 +60,12 @@ export default {
       showAuth: false,
       keyword: '',
       current: 1,
+      form: {
+        name: '',
+        idNumber: '',
+        areaId: '',
+        areaName: '',
+      }
     }
   },
   onLoad() {
@@ -63,6 +77,9 @@ export default {
     },
     handleToTest() {
       this.$emit('toTest')
+    },
+    comfirm() {
+      
     }
   },
   onReachBottom() {
@@ -183,8 +200,20 @@ export default {
         margin-bottom: 32px;
         padding-left: 24px;
       }
+
+        
+      .ai-area  .ai-area__wrapper {
+        display: flex;
+        background: #F4F5FA;
+        border-radius: 16px;
+        margin-bottom: 32px;
+        padding: 24px;
+        box-sizing: border-box;
+      }
     }
 
+
+
     .auth_btn {
       display: flex;
       justify-content: space-between;