AyaoJies-boot/AyaoJies-app/house-master/house-life/pages/location/location.vue

<template>
  <view>
    <u-navbar :border-bottom="false" :is-back="false" title="选择城市"></u-navbar>
    <view class="selected">
      <view class="title">
        已选 :
        <text style="color: #2979ff;margin-left: 12rpx;">
          {{ vuex_city == '' ? '请选择城市' : vuex_city }}
        </text>
      </view>
    </view>
    <view class="location" @click="setLocation">
      <view class="title">当前定位</view>
      <view class="body">
        <view class="left">
          <image class="img" mode="widthFix" src="../../static/navigate.png"></image>
          {{ locationCity }}
        </view>
        <view class="right">切换城市</view>
      </view>
    </view>
    <view class="hot">
      <view class="title">热门城市</view>
      <view class="body">
        <view v-for="(item,index) in hotList" :key="index" class="tag" @click="clickCity(item)">{{ item }}</view>
      </view>
    </view>
  </view>
</template>
<script>
// import wxGetAddress from '@/common/utils/wxGetAddress.js'
export default {
  data() {
    return {
      locationCity: '',
      hotList: ['杭州市', '郑州市', '北京市', '上海市', '广州市', '深圳市']
    }
  },
  onLoad() {
    this.findLocation()
  },
  methods: {
    clickCity(item) {
      this.$u.vuex('vuex_city', item);
      return uni.reLaunch({
        url: '../index/index'
      })
    },
    setLocation() {
      this.$u.vuex('vuex_city', this.locationCity);
      return uni.reLaunch({
        url: '../index/index'
      })
    },
    findLocation() {
      let that = this
      uni.showLoading({title: "定位中....", mask: true})
      this.$u.get("/api/profile/getRealCity").then(obj => {
        let cityName = obj.msg
        if (cityName) {
          this.locationCity = cityName
          let lifeData = uni.getStorageSync('lifeData');
          let vuex_city = lifeData.vuex_city
          if (!vuex_city) {
            this.$u.vuex('vuex_city', cityName);
          }
          uni.hideLoading();
        } else {
          uni.request({
            // url:'https://pv.sohu.com/cityjson?ie=utf-8',
            url: 'https://tianqiapi.com/ip?version=v9&appid=23035354&appsecret=8YvlPNrz',
            success(resp) {
              let ip = resp.data.ip
              that.$u.get("/api/profile/getRealCityByIP?ip=" + ip).then(obj => {
                let cityName = obj.msg
                if (cityName) {
                  that.locationCity = cityName
                  let lifeData = uni.getStorageSync('lifeData');
                  let vuex_city = lifeData.vuex_city
                  if (!vuex_city) {
                    that.$u.vuex('vuex_city', cityName);
                  }
                  uni.hideLoading();
                } else {
                  that.$mytip.toast('定位失败')
                }
                uni.hideLoading();
              });
            }
          })
        }
      });
    }
    // 微信小程序定位审核太严厉，不使用了。扩展后端接口，使用ip定位
    // findLocation(){
    // 	uni.showLoading({title:"定位中....",mask:true})
    // 	uni.getLocation({
    // 		type: 'gcj02',
    // 		success: async res => {
    // 			let { longitude, latitude } = res;
    // 			let result = await wxGetAddress({ longitude, latitude });
    // 			let province = result.regeocodeData.addressComponent.province
    // 			let cityName = result.regeocodeData.addressComponent.city
    // 			this.locationCity = cityName
    // 			let lifeData = uni.getStorageSync('lifeData');
    // 			let vuex_city = lifeData.vuex_city
    // 			if(!vuex_city){
    // 				this.$u.vuex('vuex_city', cityName);
    // 			}
    // 			uni.hideLoading();
    // 		}
    // 	});
    // }
  }
}
</script>

<style lang="scss" scoped>
.selected {
  .title {
    font-size: 30 rpx;
    color: $u-main-color;
    margin: 30 rpx 20 rpx;
    font-weight: 600;
    margin-left: 30 rpx;
  }
}

.location {
  background: #FFFFFF;
  border-radius: 18 rpx;
  padding: 3 rpx 0;
  margin: 20 rpx;

  .title {
    font-size: 22 rpx;
    color: $u-tips-color;
    margin: 30 rpx 20 rpx;
  }

  .body {
    margin: 30 rpx 20 rpx;
    display: flex;
    justify-content: space-between;

    .left {
      font-size: 32 rpx;
      font-weight: 800;
      display: flex;
      justify-content: center;
      align-items: center;

      .img {
        width: 35 rpx;
        margin-right: 12 rpx;
      }
    }

    .right {
      color: #2979ff;
      font-weight: 600;
      margin-right: 10 rpx;
    }
  ;
  }
}

.hot {
  .title {
    font-size: 30 rpx;
    color: $u-main-color;
    margin: 30 rpx 20 rpx;
    font-weight: 600;
    margin-left: 30 rpx;
  }

  .body {
    background: #FFFFFF;
    padding-bottom: 15 rpx;
    border-radius: 18 rpx;
    margin: 20 rpx;

    .tag {
      display: inline-block;
      width: 137 rpx;
      height: 75 rpx;
      line-height: 75 rpx;
      font-size: 26 rpx;
      color: $u-content-color;
      margin: 20 rpx 20 rpx 5 rpx 20 rpx;
      padding: 5 rpx 10 rpx;
      text-align: center;
      background-color: $u-bg-color;
      border-radius: 12 rpx;
    }
  }
}
</style>