个人中心新增地区选项

src/pages/userInfo/index.vue

@@ -78,6 +78,12 @@
         />
         <van-cell class="noSelect" v-else title="生日" value="未设置" is-link />
       </div>
+      <!-- 地区 -->
+      <div @click="areaShow = true">
+        <van-cell v-if="userMsg.provinceName" :value="userMsg.provinceName" title="地区" is-link />
+        <van-cell v-else class="noSelect" value="未设置" title="地区" is-link />
+      </div>
+
 
       <div class="line"></div>
       <!--手机-->
@@ -121,6 +127,17 @@
         />
       </van-popup>
     </div>
+    <!-- 地区弹出框 -->
+    <div catchtouchmove="ture">
+      <van-popup :show="areaShow" position="bottom">
+        <van-picker
+          :columns="provinceNameList"
+          :show-toolbar="true"
+          @confirm="onConfirmArea"
+          @cancel="onCancelArea"
+        />
+      </van-popup>
+    </div>
     <!-- <div @click="click">按下试试</div> -->
   </div>
 </template>
@@ -131,6 +148,7 @@ import index from "@/api/index";
 import { DFSImg } from "@/utils/index";
 import { themeColor } from "@/utils/mayi.js";
 import { formatTime } from "@/utils/index";
+import tool from "@/utils/tool"
 const app = getApp()
 export default {
   name: "userInfo",
@@ -142,6 +160,8 @@ export default {
         realname: "",
         mobilephone: "",
         nickname: "",
+        provinceCode: "",
+        provinceName: ""
       },
       imgArr: [],
       minDate: new Date(1900, 1, 1).getTime(),
@@ -149,6 +169,9 @@ export default {
       birthShow: false,
       sex_show: false,
       sex_list: ["女", "男", "未设置"],
+      areaShow: false,
+      provinceList: null,
+      provinceNameList: [],
       imgNumLimit: 1,
       currentTime: new Date().getTime(),
       currentTime2: new Date().getTime(),
@@ -216,12 +239,24 @@ export default {
         this.$router.push("/personalCenter");
       }
     },
-    getUserMsg() {
+    async getUserMsg() {
+      if (!this.provinceList) {
+        await tool.appArea().then(res => {
+          this.provinceList = res.province_list || {};
+          const list = [];
+          for (const key in this.provinceList) {
+            const item = this.provinceList[key];
+            list.push(item);
+          }
+          this.provinceNameList = list;
+        })
+      }
       live.getUserInfo().then((res) => {
         let result = res.data.data;
         this.userMsg = {
           ...result,
           birth: result.birth ? result.birth.split(" ")[0] : "",
+          provinceName: this.provinceList[result.provinceCode] || "",
           headPortraitUrl: DFSImg(
           result.headPortraitUrl,
             400,
@@ -250,6 +285,7 @@ export default {
       this.update_info_data.gender = this.userMsg.gender.toString();
       this.update_info_data.headPortraitUrl = this.userMsg.headPortraitUrl;
       this.update_info_data.realname = this.userMsg.realname;
+      this.update_info_data.provinceCode = this.userMsg.provinceCode;
 
       if (this.userMsg.nickname == "" || this.userMsg.nickname == " ") {
         wx.showToast({
@@ -314,6 +350,23 @@ export default {
     correctTel(val) {
       return /^1\d{10}$/.test(val);
     },
+    onConfirmArea(selection) {
+      const value = selection.mp.detail.value;
+      let code;
+      for (const key in this.provinceList) {
+        const item = this.provinceList[key];
+        if (item === value) {
+          code = key;
+          break;
+        }
+      }
+      this.userMsg.provinceCode = code;
+      this.userMsg.provinceName = value;
+      this.areaShow = false;
+    },
+    onCancelArea() {
+      this.areaShow = false;
+    },
     sexTransform(value) {
       console.log(value, "--------------249");
       if (value == 0) {