下拉选择修改为select

src/assets/css/base.css

@@ -79,6 +79,7 @@ textarea {
   -webkit-appearance: none;
   border: 0;
   border-radius: 0;
+  font: inherit;
 }
 textarea:focus {
   outline: 0;
@@ -100,7 +101,7 @@ input[type='search']::-webkit-search-cancel-button {
   display: none;
 }
 ::placeholder {
-  color: #999;
+  color: #c8c9cc;
 }
 .fixed-box {
   height: 70px;
@@ -163,14 +164,17 @@ input[type='search']::-webkit-search-cancel-button {
   flex-direction: column;
   padding: 10px 0;
 }
+.form select:invalid { color: #c8c9cc; }
 .form input.van-field__control,
+.form select.van-field__control,
 .form textarea.van-field__control {
   height: 40px;
   padding: 0 10px;
   border: 1px solid #c9c9c9;
   /* border-radius: 6px; */
 }
-.form .van-field__control[fieldtype="select"],.form .van-field__control[fieldtype="area"] {
+.form .van-field__control[fieldtype="select"],
+.form select.van-field__control,.form .van-field__control[fieldtype="area"] {
   padding-right: 32px;
 }
 .form .van-field__label {

src/components/Form.vue

@@ -65,6 +65,32 @@
           </van-field>
         </template>
 
+        <!-- 选择 -->
+        <template v-else-if="item.fieldType === 'nativeSelect'">
+          <van-field
+            right-icon="arrow-down"
+            :border="false"
+            :required="false"
+            :value="ruleForm[item.name]"
+            v-bind="item"
+            v-if="item.isShow ? item.isShow(ruleForm) : true"
+          >
+            <template #label>
+              {{ item.label }}
+              <div class="form-item__tips" v-if="item.tips">{{ item.tips }}</div>
+              <!-- <span class="red" v-if="item.required">*</span> -->
+            </template>
+            <template #input>
+              <select v-bind="item" v-model="ruleForm[item.name]" class="van-field__control">
+                <option value="" disabled selected v-if="item.placeholder">{{ item.placeholder }}</option>
+                <option v-for="option in item.values" :value="option[item.valueKey] || option.name" :key="option.name">
+                  {{ option.text }}
+                </option>
+              </select>
+            </template>
+          </van-field>
+        </template>
+
         <!-- 上传图片 -->
         <template v-else-if="item.fieldType === 'uploader'">
           <van-field

src/views/vote/Apply.vue

@@ -35,7 +35,8 @@ export default {
       vote_config_id: '',
       name: '',
       gender: '',
-      area: '',
+      province: '',
+      city: '',
       class: '',
       company: '',
       job: '',
@@ -87,7 +88,7 @@ export default {
     fields() {
       return [
         {
-          fieldType: 'select',
+          fieldType: 'nativeSelect',
           name: 'vote_city',
           label: '地区',
           required: true,
@@ -97,7 +98,7 @@ export default {
           valueKey: 'name'
         },
         {
-          fieldType: 'select',
+          fieldType: 'nativeSelect',
           name: 'vote_config_id',
           label: '学习项目',
           required: true,
@@ -114,7 +115,7 @@ export default {
           rules: [{ required: true, message: '请输入姓名' }]
         },
         {
-          fieldType: 'select',
+          fieldType: 'nativeSelect',
           name: 'gender',
           label: '性别',
           required: true,
@@ -127,13 +128,27 @@ export default {
           valueKey: 'name'
         },
         {
-          fieldType: 'area',
-          name: 'area',
-          label: '城市',
+          name: 'province',
+          label: '省份',
           required: true,
-          placeholder: '选择所在城市',
-          rules: [{ required: true, message: '选择所在城市' }]
+          placeholder: '请输入所在省',
+          rules: [{ required: true, message: '请输入所在省' }]
         },
+        {
+          name: 'city',
+          label: '市',
+          required: true,
+          placeholder: '请输入所在城市',
+          rules: [{ required: true, message: '请输入所在城市' }]
+        },
+        // {
+        //   fieldType: 'area',
+        //   name: 'area',
+        //   label: '城市',
+        //   required: true,
+        //   placeholder: '选择所在城市',
+        //   rules: [{ required: true, message: '选择所在城市' }]
+        // },
         {
           name: 'class',
           label: '班级',
@@ -235,22 +250,22 @@ export default {
       this.$refs.form.submit()
     },
     onSubmit(data) {
-      const ruleForm = this.$refs.form.ruleForm
-      data.vote_config_id = ruleForm.vote_config_id
-      data.gender = ruleForm.gender
+      // const ruleForm = this.$refs.form.ruleForm
+      // data.vote_config_id = ruleForm.vote_config_id
+      // data.gender = ruleForm.gender
       // 头像
       if (data.photo) {
         const [first = { url: '' }] = data.photo
         data.photo = first.url
       }
-      // 城市
-      if (data.area) {
-        const [province, city] = data.area.split('-')
-        data.province = province
-        data.city = city
-      }
+      // // 城市
+      // if (data.area) {
+      //   const [province, city] = data.area.split('-')
+      //   data.province = province
+      //   data.city = city
+      // }
       delete data.vote_city
-      delete data.area
+      // delete data.area
       api.submitApply(data).then(response => {
         if (response.success) {
           this.$dialog