app/pages/me/modifyLocation.vue

<template>
  <view class="page">
    <view class="line"></view>
    <view
      class="place"
      :class="{ 'place-box': !placeTouched, 'place-box-touched': placeTouched }"
      @click="chooseLocation"
      @touchstart="touchstartLocation"
      @touchend="touchendLocation">
      <text class="country">中国</text>

      <view class="location">
        <text class="location-text">{{ areaText }}</text>
        <image
          class="right-arrow"
          src="/static/images/icon-right-arrow2.png"></image>
      </view>
    </view>

    <view class="notice">
      <text class="tips">*注：点击即可选择省份与城市~</text>
    </view>
  </view>
</template>

<script>
	import storage from "@/utils/storage.js"; //缓存
	import {
		vlogModifyUserInfo
	} from "@/api/vlog"
	import {
		 isStrEmpty,
		 dateFormat
	} from '@/utils/tools.js'
export default {
  data() {
    return {
      areaText: "选择地区",
      placeTouched: false,
      chooseLocationDone: false, // 是否选择所在地流程完结
    };
  },
  onNavigationBarButtonTap() {
    let districtName = uni.getStorageSync("myLocationDistrict");
    if (isStrEmpty(districtName)) {
      uni.showToast({
        icon: "none",
        title: "请选择一个地区",
      });
      return;
    }
    this.updateLocation();
  },
  onShow() {
    let provinceName = uni.getStorageSync("myLocationProvince");
    let cityName = uni.getStorageSync("myLocationCity");
    let districtName = uni.getStorageSync("myLocationDistrict");
    if (isStrEmpty(districtName)) {
      this.areaText = "选择地区";
    } else {
      this.areaText =
        provinceName == cityName
          ? cityName + "·" + districtName
          : provinceName + "·" + cityName + "·" + districtName;
    }
  },
  methods: {
    async updateLocation() {
      let provinceName = uni.getStorageSync("myLocationProvince");
      let cityName = uni.getStorageSync("myLocationCity");
      let districtName = uni.getStorageSync("myLocationDistrict");
      let me = this;
      let userId = storage.getVlogUserInfo().id;
      let pendingUserInfo = {
        id: userId,
        province: provinceName,
        city: cityName,
        district: districtName,
		type:5
      };
	  var result = await vlogModifyUserInfo(pendingUserInfo,5)
	  if (result.data.status == 200) {
	    let userInfoUpdated = result.data.data;
	    // 重置本地用户信息
	    storage.setVlogUserInfo(userInfoUpdated);
	    uni.showToast({
	      title: result.data.msg,
	      icon: "none",
	      duration: 3000,
	    });
	    var timer = setTimeout(() => {
			clearTimeout(timer)
	      uni.navigateBack({
	        delta: 1,
	        animationType: "fade-out",
	      });
	    }, 1000);
	  } else {
	    uni.showToast({
	      title: result.data.msg,
	      icon: "none",
	      duration: 3000,
	    });
	  }
	  // 不管是否更新成功, 都需要重置
	  uni.setStorageSync("myLocationProvince", "");
	  uni.setStorageSync("myLocationCity", "");
	  uni.setStorageSync("myLocationDistrict", "");
    },
    touchstartLocation() {
      this.placeTouched = true;
    },
    touchendLocation() {
      this.placeTouched = false;
    },
    chooseLocation() {
      uni.navigateTo({
        url: "chooseProvince",
      });
    },
  },
};
</script>

<style lang="scss">
.page {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #181b27;

  .line {
    height: 1rpx;
    background-color: #393a41;
    width: 750rpx;
  }

  .place {
    align-self: center;
    margin-top: 40rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    width: 700rpx;
    height: 120rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-radius: 40rpx;
    .country {
      color: #ffffff;
      align-self: center;
      font-size: 30rpx;
    }
    .location {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-self: center;
      .location-text {
        color: #ffffff;
        font-size: 30rpx;
      }
      .right-arrow {
        align-self: center;
        width: 32rpx;
        height: 32rpx;
        margin-left: 20rpx;
      }
    }
  }

  .place-box {
    background-color: #4a4c52;
  }

  .place-box-touched {
    background-color: #6d6b6b;
  }

  .notice {
    align-self: center;
    .tips {
      margin-left: 20rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #bfbfbf;
      width: 700rpx;
      margin-top: 20rpx;
    }
  }
}
</style>