.

src/components/AreaPicker/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <van-popup v-model="show">
-    <van-area title="地区" v-model="value" :area-list="areaList" :loading="loading" @confirm="$emit('change')" />
+  <van-popup v-model="visible" position="bottom">
+    <van-area title="地区" v-model="value" :area-list="areaList" :loading="loading" @confirm="handleConfirm" />
   </van-popup>
 </template>
 
@@ -8,10 +8,7 @@
 export default {
   name: 'AreaPicker',
   props: {
-    value: {
-      type: Array,
-      default: () => []
-    },
+    value: [String, Array],
     show: Boolean
   },
   data() {
@@ -21,6 +18,14 @@ export default {
     }
   },
   computed: {
+    visible: {
+      get() {
+        return this.show
+      },
+      set(val) {
+        this.$emit('update:show', val)
+      }
+    },
     areaList() {
       return this.list.reduce((acc, x) => {
         const { province_list, city_list, county_list } = acc
@@ -46,6 +51,9 @@ export default {
     this.getAreaData()
   },
   methods: {
+    handleConfirm(v) {
+      this.$emit('change', v)
+    },
     getAreaData() {
       const list = localStorage.getItem('areas')
       if (list) {
@@ -56,7 +64,7 @@ export default {
       this.loading = true
 
       // 如果不存在
-      fetch('https://restapi.amap.com/v3/config/district?keywords=中国&subdistrict=3&key=194d2c8d01a9084e3b0bbb62d2d5fad0').then(res => res.JSON()).then(res => {
+      fetch('https://restapi.amap.com/v3/config/district?keywords=中国&subdistrict=3&key=194d2c8d01a9084e3b0bbb62d2d5fad0').then(res => res.json()).then(res => {
         this.list = res.districts[0].districts
         localStorage.setItem('area', this.list)
         this.loading = false

src/main.js

@@ -5,10 +5,16 @@ import App from './App'
 import 'regenerator-runtime/runtime'
 import 'swiper/swiper-bundle.css'
 
+
 import router from './router'
 import Swiper from './components/Swiper'
 import SwiperSlide from './components/SwiperSlide'
 
+import { Popup } from 'vant';
+import { Area } from 'vant';
+Vue.use(Popup);
+Vue.use(Area);
+
 Vue.config.productionTip = false
 Vue.component('swiper', Swiper)
 Vue.component('swiper-slide', SwiperSlide)

src/pages/signup.vue

@@ -36,18 +36,19 @@
       </div>
       <div class="formItem addressdiv" @click="showArea = true">
         <label>所在地区</label>
-        <input class="address" type="text" placeholder="请选择" v-model="formData.address" />
+        <input class="address" type="text" placeholder="请选择" v-model="address" />
       </div>
       <img @click="sumbit" class="submit" src="../../public/images/signup/submit.png" width="45%" />
     </div>
+    <area-picker :show.sync="showArea" @change="handleArea"></area-picker>
   </div>
 </template>
 <script>
-// import checked from '../../public/images/signup/checked.png'
-// import Unchecked from '../../public/images/signup/Unchecked.png'
+
+
 export default {
   components: {
-    // AreaPicker: () => import('@/components/AreaPicker.vue')
+    AreaPicker: () => import('@/components/AreaPicker')
   },
   data() {
     return {
@@ -86,7 +87,13 @@ export default {
           }
         ]
       ],
-      pickerVisibleProduct: false
+      pickerVisibleProduct: false,
+      address: undefined
+    }
+  },
+  watch: {
+    'this.formData.address'() {
+      this.address = formData.address[0].name+formData.address[1].name+formData.address[2].name
     }
   },
   methods: {
@@ -98,15 +105,10 @@ export default {
       this.ischecked = false
       this.formData.role = 'designer'
     },
-    // showProduct() {
-    //   this.pickerVisibleProduct = true
-    // },
-    // cancelProduct() {
-    //   this.pickerVisibleProduct = false
-    // },
-    // confirmProduct(res) {
-    //   this.formData.intendedProduct = res[0].label
-    // },
+    handleArea(val) {
+      this.showArea = false
+      this.formData.address = val
+    },
     verification() {
       if (!this.formData.userName) {
         alert('请输入您的姓名')
@@ -135,6 +137,9 @@ export default {
 }
 </script>
 <style scoped>
+body #app{
+  background: none !important;
+}
 * {
   margin: 0;
   padding: 0;

vue.config.js

@@ -1,3 +1,11 @@
+
+const path = require('path')
+
 module.exports = {
-  publicPath: './'
+  publicPath: './',
+  chainWebpack(config) {
+    config.resolve.alias
+      .set('@/components', path.resolve(__dirname, 'src/components/'))
+      .set('@/utils', path.resolve(__dirname, 'src/utils/'))
+  }
 }