fix location

src/components/commons/NProvinceCity.vue

@@ -0,0 +1,112 @@
+
+<template>
+  <div class="province-city">
+    <el-form-item
+      label-width="25%"
+      class="page-form-item"
+      label="所属省："
+      prop="status"
+      style="width: calc(50% - 20px)"
+    >
+      <el-select v-model="province" placeholder="请选择" @change="provinceChanged" :disabled="isModifyMode">
+<!--        <el-option :key="''" :label="'全部'" :value="''"></el-option>-->
+        <el-option v-for="item in provinces" :key="item.code" :label="item.name" :value="item.code"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      label-width="20%"
+      class="page-form-item"
+      label="市："
+      prop="status"
+      style="width: calc(50% - 20px);margin-right: 0px"
+    >
+      <el-select v-model="city" :loading="loadingCity" @change="cityChanged" placeholder="请选择" :disabled="isModifyMode">
+        <el-option :key="''" :label="'请选择'" :value="''"></el-option>
+        <el-option v-for="item in cities" :key="item.code" :label="item.name" :value="item.code"></el-option>
+      </el-select>
+    </el-form-item>
+  </div>
+</template>
+
+<script type="text/javascript">
+import provinceCity from "@/constants/provinceCity.json";
+import {storageGet,getAllServiceTypes,getProvinceNameByProvinceCode,getProvinceCodeByProvinceName} from '@/js/index'
+
+export default {
+  name: "nProvinceCity",
+  props: {
+    provinceCode: {
+      type: String,
+      default: ""
+    },
+    cityCode: {
+      type: String,
+      default: ""
+    },
+    isModifyMode:{
+      type:Boolean,
+      default:false
+    }
+  },
+  created() {
+    this.provinces = provinceCity.provinces;
+  },
+  mounted() {
+    this.province = this.provinceCode;
+    this.provinceChanged(this.provinceCode);
+  },
+  data() {
+    return {
+      loadingCity: false,
+      province: "",
+      city: "",
+      provinces: [],
+      cities: []
+    };
+  },
+  methods: {
+    provinceChanged(value) {
+      if (value !== "") {
+        this.loadingCity = true;
+        for (var item of this.provinces) {
+          if (item.code === value) {
+            this.cities = item.cities;
+            this.city = "";
+            this.loadingCity = false;
+            break;
+          } else {
+            continue;
+          }
+        }
+      } else {
+        this.cities = [];
+        this.city = "";
+      }
+      this.$emit("selectChange", this.province, this.city);
+    },
+    cityChanged(value) {
+      this.$emit("selectChange", this.province, this.city);
+    },
+    buildCityArr(proCode) {
+      this.loadingCity = true;
+      let proItem = (this.provinces || []).find(p => p.code === proCode);
+      return (proItem && proItem.cities) || []
+    }
+  },
+  watch:{
+    provinceCode(val){
+      this.province=val
+      this.cities=this.buildCityArr(val)
+    },
+    cityCode(val){
+      this.city=val
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.page-form-item {
+  display: inline-block;
+}
+</style>

src/pages/UserCenter/Mine.vue

@@ -38,11 +38,11 @@
                           :picker-options="pickerOptions"></el-date-picker>
         </el-form-item>
         <el-form-item label="地址" prop="address" style="width: 160%">
-          <provincecity
+          <provincecity v-if="userForm.location!==null"
             ref="addFormProvince"
             @selectChange="locationChange"
-            :provinceCode="userForm.location.provinceCode!==''?userForm.location.provinceCode:'3200'"
-            :cityCode="userForm.location.cityCode!==''?userForm.location.cityCode:'3201'"
+            :provinceCode="userForm.location!==null?userForm.location.provinceCode:'3200'"
+            :cityCode="userForm.location!==null?userForm.location.cityCode:'3201'"
           ></provincecity>
 <!--          :isModifyMode="!isModifyMode"-->
         </el-form-item>
@@ -65,7 +65,7 @@
   import Apis from '@/js/api'
   import {notify} from '@/constants/index'
   import {storageGet,getAllServiceTypes,getProvinceNameByProvinceCode,getProvinceCodeByProvinceName} from '@/js/index'
-  import provincecity from '@/components/commons/ProvinceCity'
+  import provincecity from '@/components/commons/NProvinceCity'
   export default {
     name: "Mine",
     data() {
@@ -187,7 +187,7 @@
           this.userForm.province = res.userVO.province ? res.userVO.province : '';
           this.userForm.city = res.userVO.city ? res.userVO.city : '';
           this.userForm.personalCompetence = res.userVO.personalCompetence ? res.userVO.personalCompetence : [];
-          this.location = getProvinceCodeByProvinceName(this.userForm.province, this.userForm.city);
+          this.userForm.location = getProvinceCodeByProvinceName(this.userForm.province, this.userForm.city);
           this.userForm.province = this.location&&this.location.provinceCode;
           this.userForm.city = this.location&&this.location.cityCode;
         })
@@ -203,9 +203,11 @@
 
     },
     mounted() {
-      this.setUserInfo();
-      this.setServiceType();
-      this.loadData();
+      this.$nextTick(()=>{
+        this.setUserInfo();
+        this.setServiceType();
+        this.loadData();
+      })
 
     }
   }