陶杰
2024-12-23 d39644872fa6f9499fc2c1651bced631a9e96b19
pages/user/address/address.vue
@@ -2,7 +2,8 @@
   <!-- 收货地址列表 -->
   <view class="p15 container-address">
      <view class="search-container m-t-12 flex">
         <view class="flex1 input" @click="selectWxAddress('input')">
         <!-- <view class="flex1 input" @click="selectWxAddress('input')"> -->
         <view class="flex1 input" @click="selectGaodeAddress('input')">
            <u-input placeholder="小区名/店铺名/写字楼/街道名等" disabled v-model="search_flow">
               <template slot="suffix">
                  <uni-icons color="#20613D" type="search" size="24"></uni-icons>
@@ -14,7 +15,7 @@
         <view class="desc-gray">当前位置</view>
         <view class="flex current-address">
            <view class="flex1">
               {{ addressDesc || (address&&address.id?address.address: '选择地址')  }}
               {{ addressDesc || (address && address.id ? address.address : '选择地址') }}
            </view>
            <view class="flex" @click="changeCurrentAddress">
@@ -31,10 +32,10 @@
         <view class="desc-gray">我的收货地址</view>
      </view>
      <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
      <no-data v-if="!list || list.length == 0" style="width: 100%;"></no-data>
      <!-- 循环 -->
      <view v-for="(item,index) of list" :key="index" class="location-each m-t-12">
      <view v-for="(item, index) of list" :key="index" class="location-each m-t-12">
         <view class="flex">
            <view class="container-info">
               <view class="flex">
@@ -43,7 +44,7 @@
               </view>
               <view class="address">
                  {{ item['province'] || '' }}{{ item['city'] && ('/' + item['city']) || '' }}{{
                    item['region'] && ('/' + item['region']) || ''
                     item['region'] && ('/' + item['region']) || ''
                  }}
               </view>
               <view class="address">
@@ -51,7 +52,7 @@
               </view>
            </view>
            <!-- <view class="h-line"></view> -->
            <view class="edit" @click="()=>{
            <view class="edit" @click="() => {
               this.submitForm = {
                  ...item
               }
@@ -64,8 +65,8 @@
         <view class="flex">
            <!--        -->
            <view class="flex">
               <view class="radio m-t-2 m-r-10" :class="[item.isDefault?'select':'']"
                  @click="changeDefaultAddress(item,index)">
               <view class="radio m-t-2 m-r-10" :class="[item.isDefault ? 'select' : '']"
                  @click="changeDefaultAddress(item, index)">
               </view>
               <span class="desc" style="word-break: break-all;">{{ item.isDefault ? '默认地址:' : '当前地址:' }}</span>
@@ -74,10 +75,10 @@
            <view class="desc del t-red" @click="deleteAddress(item)">
               删除
            </view>
            <view class="desc del t-green m-l-10" v-if="source==='select'" @click="selectAddress(item)">
            <view class="desc del t-green m-l-10" v-if="source === 'select'" @click="selectAddress(item)">
               选择此地址
            </view>
            <view class="desc del t-green m-l-10" v-if="source==='home'" @click="selectAddress(item)">
            <view class="desc del t-green m-l-10" v-if="source === 'home'" @click="selectAddress(item)">
               按此地址定位
            </view>
         </view>
@@ -119,12 +120,14 @@
                  <view class="form-item-label require">
                     收货地址
                  </view>
                  <view class="m-l-a m-r-0 flex " :class="[!dto['province']?'desc-gray':'']">
                     <uni-data-picker :area="true" @change="(e)=>{PickArea(submitForm,e)}" placeholder=""
                  <view class="m-l-a m-r-0 flex " :class="[!dto['province'] ? 'desc-gray' : '']">
                     <uni-data-picker :area="true" @change="(e) => { PickArea(submitForm, e) }" placeholder=""
                        :localdata="regionDataPlus">
                        {{ submitForm['province'] || '请选择' }}{{ submitForm['city'] && ('/' + submitForm['city']) || '' }}{{
                  submitForm['region'] && ('/' + submitForm['region']) || ''
                }}
                        {{ submitForm['province'] || '请选择' }}{{ submitForm['city'] && ('/' + submitForm['city'])
                           || ''
                        }}{{
                           submitForm['region'] && ('/' + submitForm['region']) || ''
                        }}
                     </uni-data-picker>
                     <u-icon class="m-l-a" name="arrow-right"></u-icon>
                  </view>
@@ -154,7 +157,7 @@
                  </view>
                  <view class="form-item-value">
                     <radio value="r1" :checked="submitForm.isDefault"
                        @click="submitForm.isDefault=!submitForm.isDefault"
                        @click="submitForm.isDefault = !submitForm.isDefault"
                        style="transform:scale(0.6);margin-top: -8rpx;" />
                  </view>
               </view>
@@ -168,80 +171,443 @@
</template>
<script>
   // #ifdef PUB_CUSTOMER
   // import qqmapwx from '@/plugins/qqmap-wx-jssdk.min.js';
   // const lockey = 'GSBBZ-CJA3U-NNDVH-GE65N-6FIF6-ZGBCU'; //使用在腾讯位置服务申请的key
   // const chooseLocation = requirePlugin('chooseLocation');
   // #endif
// #ifdef PUB_CUSTOMER
// import qqmapwx from '@/plugins/qqmap-wx-jssdk.min.js';
// const lockey = 'GSBBZ-CJA3U-NNDVH-GE65N-6FIF6-ZGBCU'; //使用在腾讯位置服务申请的key
// const chooseLocation = requirePlugin('chooseLocation');
// #endif
   import {
      mapState
   } from 'vuex'
   export default {
      async onPullDownRefresh() {
         this.page.current = 0
import amapFile from '@/map/amap-wx.130.js';
import {
   mapState
} from 'vuex'
export default {
   async onPullDownRefresh() {
      this.page.current = 0
      await this.getList()
      uni.stopPullDownRefresh()
   },
   async onLoad(options) {
      // debugger;
      // 引入高德地图的组件
      const myAmapFun = new amapFile.AMapWX({ key: '75d7da3feb329cd5ae997975b953abb6' });
      myAmapFun.getRegeo({
         success: (data) => {
            console.log('当前位置:', data[0]);
            console.log(data)
            // this.setData({
            //    longitude: data[0].longitude,
            //    latitude: data[0].latitude,
            //    locationName: data[0].name,
            // });
         },
         fail(err) {
            console.error(err);
         },
      });
      // this.list = [{}, {}]
      this.source = options.source || ''
      this.listApi = '/api/address/list'
      if (!this.currentInfo.id) {
      } else {
         await this.getList()
         uni.stopPullDownRefresh()
      }
   },
   onShow() {
   },
   computed: {
      ...mapState({
         address: state => {
            return state.defaultaddress || {}
         },
         addressDesc: state => {
            return state.addressDesc || ''
         },
         // search_flow() {
         //    return this.addressDesc || ''
         // }
      }),
   },
   data() {
      return {
         source: '',
         submitForm: {
            name: '',
            tel: '',
            address: '',
            isDefault: false,
            province: '',
            city: '',
            region: '',
            latitude: 0,
            longitude: 0,
         },
         regionDataPlus: [],
         list: [],
         search_flow: '',
      };
   },
   methods: {
      selectGaodeAddress(){
         uni.navigateTo({
            url: '/pages/user/address/gaode-address'
         })
      },
      async onLoad(options) {
         // this.list = [{}, {}]
         this.source = options.source || ''
         this.listApi = '/api/address/list'
         if (!this.currentInfo.id) {
      selectWxAddress(source) {
         let that = this
         } else {
            await this.getList()
         {
            //表单选择了地址
            wx.chooseLocation({
               success: location => {
                  console.log('success loc', location, source)
                  console.log(location)
                  // address: "江苏省苏州市吴中区太湖东路288号"
                  // errMsg: "chooseLocation:ok"
                  // latitude: 31.26249
                  // longitude: 120.63212
                  // name: "苏州市吴中区人民政府"
                  if (source === 'form') {
                     // (location.address || '') +
                     that.submitForm.address = (location.name || location.address || '')
                     that.submitForm.latitude = location.latitude || 0
                     that.submitForm.longitude = location.longitude || 0
                  } else if (source === 'input') {
                     // (location.address || '') +
                     // that.search_flow =   (location.name || '')
                     that.$store.commit('setAddressDesc', (location.name || location.address || ''))
                     that.$forceUpdate()
                     that.backpage()
                  }
                  // if (!that.submitForm.province && location.provinceName) {
                  //    that.submitForm.province = location.provinceName
                  //    if (!that.submitForm.city && location.cityName) {
                  //       that.submitForm.city = location.cityName
                  //    }
                  //    if (!that.submitForm.region && location.countyName) {
                  //       that.submitForm.region = location.countyName
                  //    }
                  //    if (!that.submitForm.region && location.cityName) {
                  //       that.submitForm.region = location.cityName
                  //    }
                  // }
                  // success loc
                  // {errMsg: "chooseAddress:ok", userName: "张三", nationalCode: "510000", telNumber: "020-81167888", postalCode: "510000", …}
                  // cityName: "广州市"
                  // countyName: "海珠区"
                  // detailInfo: "新港中路397号"
                  // errMsg: "chooseAddress:ok"
                  // nationalCode: "510000"
                  // postalCode: "510000"
                  // provinceName: "广东省"
                  // telNumber: "020-81167888"
                  // userName: "张三"
               },
               fail: e => {
                  console.log('fail loc', e)
                  // that.$message.showToast('定位失败')
               }
            })
            // uni.getLocation({
            //    type: 'wgs84',
            //    success(res) {
            //       //得到经纬度
            //       console.log(res);
            //       const referer = '花满芫'; //调用插件的app的名称
            //       const location = JSON.stringify({
            //          latitude: res.latitude,
            //          longitude: res.longitude
            //       });
            //       const category = '生活服务,娱乐休闲';
            //       // &category=${category}
            //       wx.navigateTo({
            //          url: `plugin://chooseLocation/index?key=${lockey}&referer=${referer}&location=${location}`
            //       });
            //    }
            // })
         }
      },
      validatePhoneNumber() {
         // 手机号码正则表达式,可以根据需要调整
         const phoneRegex = /^[1][3-9][0-9]{9}$/;
         if (!phoneRegex.test(this.submitForm['tel'])) {
            this.$message.showToast('请填写正确手机号码')
         }
      },
      onShow() {
         // const location = chooseLocation.getLocation(); // 如果点击确认选点按钮,则返回选点结果对象,否则返回null
         // // console.log('onshow location', location, this.tmp_picker_lock_index, this.formcodes["LOC_ONE"])
         // // address: "江苏省苏州市吴中区太湖东路280号"
         // // city: "苏州市"
         // // district: "吴中区"
         // // latitude: 31.262438
         // // longitude: 120.633985
         // // name: "太湖东路280号小区"
         // // province: "江苏省"
         // if (location && location.address) {
         //    this.submitForm.address = location.address
         //    this.submitForm.latitude = location.latitude
         //    this.submitForm.longitude = location.longitude
         //    if (!this.submitForm.province && location.province) {
         //       this.submitForm.province = location.province
         //       if (!this.submitForm.city && location.city) {
         //          this.submitForm.city = location.city
         //       }
         //       if (!this.submitForm.region && location.district) {
         //          this.submitForm.region = location.district
         //       }
         //       if (!this.submitForm.region && location.city) {
         //          this.submitForm.region = location.city
         //       }
         //    }
         //    this.$forceUpdate()
         // }
      addAddress() {
         delete this.submitForm.id
         this.submitForm['name'] = ''
         this.submitForm['tel'] = ''
         this.submitForm['address'] = ''
         this.submitForm['province'] = ''
         this.submitForm['city'] = ''
         this.submitForm['region'] = ''
         this.submitForm['isDefault'] = false
         this.openAddressForm()
      },
      computed: {
         ...mapState({
            address: state => {
               return state.defaultaddress || {}
      changeCurrentAddress() {
         // if(!this.addressDesc){
         // }
         let that = this
         this.$message.showLoading()
         uni.getLocation({
            type: 'gcj02',
            geocode: true,
            success: async (res) => {
               //  this.location = {
               // latitude: res.latitude,
               // longitude: res.longitude,
               // speed: res.speed,
               // accuracy: res.accuracy,
               // address: res.address,
               //  };
               const {
                  code, data
               } = await that.$http.request('get', '/api/pub/customer/home/address/parse', {
                  data: {},
                  params: {
                     // https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=[你的key]&get_poi=1
                     location: `${res.latitude},${res.longitude}`
                  }
               })
               console.log('定位成功:', data);
               if (data) {
                  var address = data.result && data.result.address || ''
                  that.$store.commit('setAddressDesc', (address || ''))
                  that.$forceUpdate()
                  that.backpage()
               }
            },
            addressDesc: state => {
               return state.addressDesc || ''
            fail: (err) => {
               that.error = err;
               console.error('定位失败:', err);
            },
            // search_flow() {
            //    return this.addressDesc || ''
            // }
         }),
            complete() {
               that.$message.hideLoading()
            }
         });
      },
      PickArea(item, e) {
         console.log('PickArea', item, e)
         if (e.detail.value) {
            this.submitForm.province = ''
            this.submitForm.city = ''
            this.submitForm.region = ''
            if (e.detail.value.length == 2) {
               if (!!e.detail.value[0])
                  this.submitForm.province = e.detail.value[0].value
               if (!!e.detail.value[0])
                  this.submitForm.city = e.detail.value[0].value
               if (!!e.detail.value[1])
                  this.submitForm.region = e.detail.value[1].value
            } else if (e.detail.value.length <= 3) {
               if (!!e.detail.value[0])
                  this.submitForm.province = e.detail.value[0].value
               if (!!e.detail.value[1])
                  this.submitForm.city = e.detail.value[1].value
               if (!!e.detail.value[2])
                  this.submitForm.region = e.detail.value[2].value
            } else {
               //说明有重复的
               var plusnum = e.detail.value.length - 3
               if (!!e.detail.value[plusnum + 0])
                  this.submitForm.province = e.detail.value[plusnum + 0].value
               if (!!e.detail.value[plusnum + 1])
                  this.submitForm.city = e.detail.value[plusnum + 1].value
               if (!!e.detail.value[plusnum + 2])
                  this.submitForm.region = e.detail.value[plusnum + 2].value
            }
            this.$forceUpdate()
            console.log('submit forn', this.submitForm)
         }
      },
      async init_area() {
         // debugger;
         // if (this.regionDataPlus && this.regionDataPlus.length > 0) {
         // } else {
         // var a = this.$storage.getItem('cache_area')
         var a = false
         if (a) {
            this.regionDataPlus = JSON.parse(a) || []
         } else {
            await this.$http.request('get', '/api/pub/china/area/json/refresh')
            const res = await this.$http.request('get', '/api/pub/china/area/json')
            // console.log('area', JSON.parse(res.data))
            this.regionDataPlus = res.data && JSON.parse(res.data.replaceAll('code', 'value').replaceAll(
               'name',
               'text')) || []
            this.$storage.setItem('cache_area', JSON.stringify(this.regionDataPlus))
         }
         // }
      },
      data() {
         return {
            source: '',
            submitForm: {
      chooseLocation() {
         //前往接口挑选位置
         const qqmapsdk = new qqmapwx({
            // 使用你在腾讯地图应用生成的key
            key: lockey
         });
         uni.getLocation({
            type: 'wgs84',
            success(res) {
               //得到经纬度
               console.log(res);
               qqmapsdk.reverseGeocoder({
                  location: {
                     latitude: res.latitude,
                     longitude: res.longitude
                  },
                  //成功后的回调
                  success: (r) => {
                     // console.log('地址信息', r.result.address_component);
                     // result: {location: {lat: 31.26249, lng: 120.63212}, address: "江苏省苏州市吴中区太湖东路288号",…}
                     // ad_info: {nation_code: "156", adcode: "320506", phone_area_code: "0512", city_code: "156320500",…}
                     // address: "江苏省苏州市吴中区太湖东路288号"
                     // address_component: {nation: "中国", province: "江苏省", city: "苏州市", district: "吴中区", street: "太湖东路",…}
                     // address_reference: {,…}
                     // formatted_addresses: {recommend: "长桥苏州市吴中区人民政府(太湖东路北)", rough: "长桥苏州市吴中区人民政府(太湖东路北)"}
                     // location: {lat: 31.26249, lng: 120.63212}
                     // status: 0
                     tmp.formcodes['LOC_ONE'][tmp.tmp_picker_lock_index].longitude = r
                        .result.location.lng
                     tmp.formcodes['LOC_ONE'][tmp.tmp_picker_lock_index].latitude = r
                        .result.location.lat
                     tmp.formcodes['LOC_ONE'][tmp.tmp_picker_lock_index].loc_desc = r
                        .result.address
                     tmp.formcodes['LOC_ONE'][tmp.tmp_picker_lock_index]._show = false
                     tmp.$forceUpdate()
                     tmp.tmp_picker_lock_index = -1
                  },
                  fail: function (res) {
                     console.log(res);
                     tmp.tmp_picker_lock_index = -1
                  },
               });
            }
         });
      },
      async changeDefaultAddress(item, index) {
         if (item.isDefault) {
            return
         }
         this.$nextTick(() => {
            this.$message.confirm('确定设置此地址为默认地址吗').then(async res => {
               this.$message.showLoading()
               var {
                  code
               } = await this.$http.request('post', '/api/address/set/default/' + item
                  .id, {
                  data: {
                     id: item.id
                  },
                  params: {
                     id: item.id
                  }
               })
               this.$message.hideLoading()
               if (code === 0) {
                  for (var dto of this.list) {
                     dto.isDefault = false
                  }
                  this.$message.showToast('设置成功')
                  item.isDefault = true
                  this.$store.commit('setDefaultAddress', {
                     ...item
                  })
               }
            }, err => {
               this.$nextTick(() => {
                  this.list[index].isDefault = false
                  this.$forceUpdate()
                  console.log('err', err, this.list[index])
               })
            })
         })
      },
      async selectAddress(item) {
         //携带,然后返回
         if (this.source === 'home') {
            this.$store.commit('setAddressDesc', '')
            this.$store.commit('setDefaultAddress', {
               ...item
            })
         } else {
            await this.$message.confirm('确定选择此地址作为收货地址吗')
            this.$store.commit('setDefaultAddress', {
               ...item
            })
         }
         this.backpage()
      },
      async deleteAddress(item) {
         await this.$message.confirm('确定删除此地址吗')
         this.$message.showLoading()
         var {
            code
         } = await this.$http.request('get', '/api/address/delete?id=' + item.id, {})
         this.$message.hideLoading()
         if (code === 0) {
            this.$message.showToast('删除成功')
            if (this.address.id === item.id) {
               //要清空地址了
               this.$store.commit('setDefaultAddress', {})
            }
            setTimeout(() => {
               this.page.current = 1
               this.getList()
            }, 500)
         }
      },
      async openAddressForm() {
         this.init_area()
         if (this.submitForm.id) {
            this.$message.showLoading()
            var {
               data
            } = await this.$http.request('get', '/api/address/list/detail?id=' + this.submitForm.id, {})
            if (data) {
               this.submitForm = {
                  ...this.submitForm,
                  ...data
               }
            }
            this.$message.hideLoading()
         } else {
            this.submitForm = {
               // name: this.currentInfo && this.currentInfo.nickName || '',
               // tel: this.currentInfo && this.currentInfo.tel || '',
               name: '',
               tel: '',
               address: '',
@@ -249,554 +615,191 @@
               province: '',
               city: '',
               region: '',
               latitude: 0,
               longitude: 0,
            },
            regionDataPlus: [],
            list: [],
            search_flow: '',
         };
            }
         }
         this.$refs.popup_form.open()
      },
      methods: {
         selectWxAddress(source) {
            let that = this
      closeAddressForm() {
         this.$refs.popup_form.close()
            {
               //表单选择了地址
               wx.chooseLocation({
                  success: location => {
                     console.log('success loc', location,source)
                     // address: "江苏省苏州市吴中区太湖东路288号"
                     // errMsg: "chooseLocation:ok"
                     // latitude: 31.26249
                     // longitude: 120.63212
                     // name: "苏州市吴中区人民政府"
                     if (source === 'form') {
                        // (location.address || '') +
                        that.submitForm.address = (location.name || location.address || '')
                        that.submitForm.latitude = location.latitude || 0
                        that.submitForm.longitude = location.longitude || 0
                     } else if (source === 'input') {
                        // (location.address || '') +
                        // that.search_flow =   (location.name || '')
                        that.$store.commit('setAddressDesc', (location.name || location.address || ''))
                        that.$forceUpdate()
                        that.backpage()
                     }
      },
      async saveOrUpdateAddress() {
         if (!this.checkFormValues(this.submitForm, ['tel', 'name', 'address'])) {
            this.$message.showToast('字段未填写完整')
            return
         }
         if (!this.submitForm['province'] || !this.submitForm['province'] || !this.submitForm['province']) {
            this.$message.showToast('省市区未选择完整')
            return
         }
                     // if (!that.submitForm.province && location.provinceName) {
                     //    that.submitForm.province = location.provinceName
                     //    if (!that.submitForm.city && location.cityName) {
                     //       that.submitForm.city = location.cityName
                     //    }
                     //    if (!that.submitForm.region && location.countyName) {
                     //       that.submitForm.region = location.countyName
                     //    }
                     //    if (!that.submitForm.region && location.cityName) {
                     //       that.submitForm.region = location.cityName
                     //    }
                     // }
                     // success loc
                     // {errMsg: "chooseAddress:ok", userName: "张三", nationalCode: "510000", telNumber: "020-81167888", postalCode: "510000", …}
                     // cityName: "广州市"
                     // countyName: "海珠区"
                     // detailInfo: "新港中路397号"
                     // errMsg: "chooseAddress:ok"
                     // nationalCode: "510000"
                     // postalCode: "510000"
                     // provinceName: "广东省"
                     // telNumber: "020-81167888"
                     // userName: "张三"
                  },
                  fail: e => {
                     console.log('fail loc', e)
                     // that.$message.showToast('定位失败')
                  }
               })
               // uni.getLocation({
               //    type: 'wgs84',
               //    success(res) {
               //       //得到经纬度
               //       console.log(res);
               //       const referer = '花满芫'; //调用插件的app的名称
               //       const location = JSON.stringify({
               //          latitude: res.latitude,
               //          longitude: res.longitude
               //       });
               //       const category = '生活服务,娱乐休闲';
               //       // &category=${category}
               //       wx.navigateTo({
               //          url: `plugin://chooseLocation/index?key=${lockey}&referer=${referer}&location=${location}`
               //       });
               //    }
               // })
            }
         },
         validatePhoneNumber() {
            // 手机号码正则表达式,可以根据需要调整
            const phoneRegex = /^[1][3-9][0-9]{9}$/;
            if (!phoneRegex.test(this.submitForm['tel'])) {
               this.$message.showToast('请填写正确手机号码')
            }
         },
         addAddress() {
            delete this.submitForm.id
            this.submitForm['name'] = ''
            this.submitForm['tel'] = ''
            this.submitForm['address'] = ''
            this.submitForm['province'] = ''
            this.submitForm['city'] = ''
            this.submitForm['region'] = ''
            this.submitForm['isDefault'] = false
            this.openAddressForm()
         },
         changeCurrentAddress() {
            // if(!this.addressDesc){
            // }
            let that = this
            this.$message.showLoading()
            uni.getLocation({
               type: 'gcj02',
               geocode: true,
               success: async (res) => {
                  //  this.location = {
                  // latitude: res.latitude,
                  // longitude: res.longitude,
                  // speed: res.speed,
                  // accuracy: res.accuracy,
                  // address: res.address,
                  //  };
                  const {
                     code,data
                  } = await that.$http.request('get', '/api/pub/customer/home/address/parse', {
                     data: {},
                     params: {
                        // https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=[你的key]&get_poi=1
                        location:`${res.latitude},${res.longitude}`
                     }
                  })
                  console.log('定位成功:', data);
                  if(data){
                     var address = data.result&&data.result.address || ''
                     that.$store.commit('setAddressDesc', (address || ''))
                     that.$forceUpdate()
                     that.backpage()
                  }
               },
               fail: (err) => {
                  that.error = err;
                  console.error('定位失败:', err);
               },
               complete() {
                  that.$message.hideLoading()
               }
            });
         },
         PickArea(item, e) {
            console.log('PickArea', item, e)
            if (e.detail.value) {
               this.submitForm.province = ''
               this.submitForm.city = ''
               this.submitForm.region = ''
               if (e.detail.value.length == 2) {
                  if (!!e.detail.value[0])
                     this.submitForm.province = e.detail.value[0].value
                  if (!!e.detail.value[0])
                     this.submitForm.city = e.detail.value[0].value
                  if (!!e.detail.value[1])
                     this.submitForm.region = e.detail.value[1].value
               } else if (e.detail.value.length <= 3) {
                  if (!!e.detail.value[0])
                     this.submitForm.province = e.detail.value[0].value
                  if (!!e.detail.value[1])
                     this.submitForm.city = e.detail.value[1].value
                  if (!!e.detail.value[2])
                     this.submitForm.region = e.detail.value[2].value
               } else {
                  //说明有重复的
                  var plusnum = e.detail.value.length - 3
                  if (!!e.detail.value[plusnum + 0])
                     this.submitForm.province = e.detail.value[plusnum + 0].value
                  if (!!e.detail.value[plusnum + 1])
                     this.submitForm.city = e.detail.value[plusnum + 1].value
                  if (!!e.detail.value[plusnum + 2])
                     this.submitForm.region = e.detail.value[plusnum + 2].value
               }
               this.$forceUpdate()
               console.log('submit forn', this.submitForm)
            }
         },
         async init_area() {
            // debugger;
            // if (this.regionDataPlus && this.regionDataPlus.length > 0) {
            // } else {
               // var a = this.$storage.getItem('cache_area')
               var a =false
               if (a) {
                  this.regionDataPlus = JSON.parse(a) || []
               } else {
                  await this.$http.request('get', '/api/pub/china/area/json/refresh')
                  const res = await this.$http.request('get', '/api/pub/china/area/json')
                  // console.log('area', JSON.parse(res.data))
                  this.regionDataPlus = res.data && JSON.parse(res.data.replaceAll('code', 'value').replaceAll(
                     'name',
                     'text')) || []
                  this.$storage.setItem('cache_area', JSON.stringify(this.regionDataPlus))
               }
            // }
         },
         chooseLocation() {
            //前往接口挑选位置
            const qqmapsdk = new qqmapwx({
               // 使用你在腾讯地图应用生成的key
               key: lockey
            });
            uni.getLocation({
               type: 'wgs84',
               success(res) {
                  //得到经纬度
                  console.log(res);
                  qqmapsdk.reverseGeocoder({
                     location: {
                        latitude: res.latitude,
                        longitude: res.longitude
                     },
                     //成功后的回调
                     success: (r) => {
                        // console.log('地址信息', r.result.address_component);
                        // result: {location: {lat: 31.26249, lng: 120.63212}, address: "江苏省苏州市吴中区太湖东路288号",…}
                        // ad_info: {nation_code: "156", adcode: "320506", phone_area_code: "0512", city_code: "156320500",…}
                        // address: "江苏省苏州市吴中区太湖东路288号"
                        // address_component: {nation: "中国", province: "江苏省", city: "苏州市", district: "吴中区", street: "太湖东路",…}
                        // address_reference: {,…}
                        // formatted_addresses: {recommend: "长桥苏州市吴中区人民政府(太湖东路北)", rough: "长桥苏州市吴中区人民政府(太湖东路北)"}
                        // location: {lat: 31.26249, lng: 120.63212}
                        // status: 0
                        tmp.formcodes['LOC_ONE'][tmp.tmp_picker_lock_index].longitude = r
                           .result.location.lng
                        tmp.formcodes['LOC_ONE'][tmp.tmp_picker_lock_index].latitude = r
                           .result.location.lat
                        tmp.formcodes['LOC_ONE'][tmp.tmp_picker_lock_index].loc_desc = r
                           .result.address
                        tmp.formcodes['LOC_ONE'][tmp.tmp_picker_lock_index]._show = false
                        tmp.$forceUpdate()
                        tmp.tmp_picker_lock_index = -1
                     },
                     fail: function(res) {
                        console.log(res);
                        tmp.tmp_picker_lock_index = -1
                     },
                  });
               }
            });
         },
         async changeDefaultAddress(item, index) {
            if (item.isDefault) {
               return
            }
            this.$nextTick(() => {
               this.$message.confirm('确定设置此地址为默认地址吗').then(async res => {
                  this.$message.showLoading()
                  var {
                     code
                  } = await this.$http.request('post', '/api/address/set/default/' + item
                     .id, {
                        data: {
                           id: item.id
                        },
                        params: {
                           id: item.id
                        }
                     })
                  this.$message.hideLoading()
                  if (code === 0) {
                     for (var dto of this.list) {
                        dto.isDefault = false
                     }
                     this.$message.showToast('设置成功')
                     item.isDefault = true
                     this.$store.commit('setDefaultAddress', {
                        ...item
                     })
                  }
               }, err => {
                  this.$nextTick(() => {
                     this.list[index].isDefault = false
                     this.$forceUpdate()
                     console.log('err', err, this.list[index])
                  })
         // 手机号码正则表达式,可以根据需要调整
         const phoneRegex = /^[1][3-9][0-9]{9}$/;
         if (!phoneRegex.test(this.submitForm['tel'])) {
            this.$message.showToast('请填写正确手机号码')
            return
         }
               })
            })
         },
         async selectAddress(item) {
            //携带,然后返回
            if(this.source==='home'){
               this.$store.commit('setAddressDesc', '')
               this.$store.commit('setDefaultAddress', {
                  ...item
               })
            }else{
               await this.$message.confirm('确定选择此地址作为收货地址吗')
               this.$store.commit('setDefaultAddress', {
                  ...item
               })
            }
            this.backpage()
         },
         async deleteAddress(item) {
            await this.$message.confirm('确定删除此地址吗')
            this.$message.showLoading()
            var {
               code
            } = await this.$http.request('get', '/api/address/delete?id=' + item.id, {})
            this.$message.hideLoading()
            if (code === 0) {
               this.$message.showToast('删除成功')
               if (this.address.id === item.id) {
                  //要清空地址了
                  this.$store.commit('setDefaultAddress', {})
               }
               setTimeout(() => {
                  this.page.current = 1
                  this.getList()
               }, 500)
            }
         },
         async openAddressForm() {
            this.init_area()
            if (this.submitForm.id) {
               this.$message.showLoading()
               var {
                  data
               } = await this.$http.request('get', '/api/address/list/detail?id=' + this.submitForm.id, {})
               if (data) {
                  this.submitForm = {
                     ...this.submitForm,
                     ...data
                  }
               }
               this.$message.hideLoading()
            } else {
               this.submitForm = {
                  // name: this.currentInfo && this.currentInfo.nickName || '',
                  // tel: this.currentInfo && this.currentInfo.tel || '',
                  name: '',
                  tel: '',
                  address: '',
                  isDefault: false,
                  province: '',
                  city: '',
                  region: '',
               }
            }
            this.$refs.popup_form.open()
         },
         closeAddressForm() {
         this.$message.showLoading()
         const {
            code
         } = await this.$http.request('post', '/api/address/' + (this.submitForm.id ? 'update' :
            'add'), {
            data: this.submitForm
         })
         this.$message.hideLoading()
         if (code === 0) {
            this.$refs.popup_form.close()
            this.$message.showToast(this.submitForm.id ? '修改成功' : '新增成功')
         },
         async saveOrUpdateAddress() {
            if (!this.checkFormValues(this.submitForm, ['tel', 'name', 'address'])) {
               this.$message.showToast('字段未填写完整')
               return
            let tmp = this
            setTimeout(() => {
               tmp.page.current = 1
               tmp.refreshList()
            }, 300)
            //如果当前选择的地址是这个,需要更新一下数据
            if (this.address.id && this.submitForm.id === this.address.id) {
               this.$store.commit('setDefaultAddress', {
                  ...this.submitForm
               })
            }
            if (!this.submitForm['province'] || !this.submitForm['province'] || !this.submitForm['province']) {
               this.$message.showToast('省市区未选择完整')
               return
            }
         }
      },
            // 手机号码正则表达式,可以根据需要调整
            const phoneRegex = /^[1][3-9][0-9]{9}$/;
            if (!phoneRegex.test(this.submitForm['tel'])) {
               this.$message.showToast('请填写正确手机号码')
               return
            }
            this.$message.showLoading()
            const {
               code
            } = await this.$http.request('post', '/api/address/' + (this.submitForm.id ? 'update' :
               'add'), {
               data: this.submitForm
            })
            this.$message.hideLoading()
            if (code === 0) {
               this.$refs.popup_form.close()
               this.$message.showToast(this.submitForm.id ? '修改成功' : '新增成功')
               let tmp = this
               setTimeout(() => {
                  tmp.page.current = 1
                  tmp.refreshList()
               }, 300)
               //如果当前选择的地址是这个,需要更新一下数据
               if (this.address.id && this.submitForm.id === this.address.id) {
                  this.$store.commit('setDefaultAddress', {
                     ...this.submitForm
                  })
               }
            }
         },
      }
   }
}
</script>
<style lang="scss" scoped>
   .container-address {
      .current-address {
         padding: 20rpx;
         background-color: #FFFFFF;
         border-radius: 16rpx;
         margin-top: 16rpx;
         margin-bottom: 20rpx;
      }
.container-address {
   .current-address {
      padding: 20rpx;
      background-color: #FFFFFF;
      border-radius: 16rpx;
      margin-top: 16rpx;
      margin-bottom: 20rpx;
   }
      .popup-address-form {
         background: #FFFFFF;
         border-radius: 16rpx;
         // width: 690rpx;
         height: 882rpx;
         margin-top: 120rpx;
         margin-left: 30rpx;
         margin-right: 30rpx;
         padding: 24rpx 36rpx;
   .popup-address-form {
      background: #FFFFFF;
      border-radius: 16rpx;
      // width: 690rpx;
      height: 882rpx;
      margin-top: 120rpx;
      margin-left: 30rpx;
      margin-right: 30rpx;
      padding: 24rpx 36rpx;
         .submit {
            margin-top: 30rpx;
      .submit {
         margin-top: 30rpx;
            .form-input {
               height: 36rpx;
               line-height: 36rpx;
            }
         }
      }
      .location-each {
         background: #FFFFFF;
         border-radius: 16rpx;
         margin-bottom: 24rpx;
         padding: 36rpx;
         .name {
            font-size: 32rpx;
            color: #000000;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;
         }
         .tel {
            font-size: 28rpx;
            color: #666666;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            padding-top: 4rpx;
            margin-left: 20rpx;
         }
         .address {
            font-size: 24rpx;
            color: #000000;
            line-height: 34rpx;
            text-align: left;
            font-style: normal;
         }
         .desc {
            font-size: 24rpx;
            color: #666666;
            line-height: 34rpx;
            text-align: left;
            font-style: normal;
         }
         .del {
            // vertical-align: baseline;
            margin-left: auto;
            margin-right: 6rpx;
            margin-top: 4rpx;
         }
         .container-info {
            max-width: 540rpx;
         }
         .h-line {
            width: 2rpx;
            height: 46rpx;
            background-color: #EEEEEE;
            margin-left: 28rpx;
            margin-right: 24rpx;
         }
         .v-line {
            width: 638rpx;
            height: 2rpx;
            // border: 2rpx solid #EEEEEE;
            background-color: #EEEEEE;
            margin-top: 24rpx;
            margin-bottom: 24rpx;
         }
         .edit {
            // min-width: 80rpx;
            width: fit-content;
            margin-left: auto;
            margin-right: 0rpx;
            display: flex;
            position: relative;
            .icon {
               // margin: 0 auto;
               // mar
               margin-left: auto;
               margin-right: auto;
               margin-top: 20rpx;
               display: block;
            }
         }
         .edit::before {
            content: " ";
            width: 2rpx;
            height: 46rpx;
            background-color: #EEEEEE;
            position: absolute;
            left: -24rpx;
            top: 20rpx;
         .form-input {
            height: 36rpx;
            line-height: 36rpx;
         }
      }
   }
   .location-each {
      background: #FFFFFF;
      border-radius: 16rpx;
      margin-bottom: 24rpx;
      padding: 36rpx;
      .name {
         font-size: 32rpx;
         color: #000000;
         line-height: 44rpx;
         text-align: left;
         font-style: normal;
      }
      .tel {
         font-size: 28rpx;
         color: #666666;
         line-height: 40rpx;
         text-align: left;
         font-style: normal;
         padding-top: 4rpx;
         margin-left: 20rpx;
      }
      .address {
         font-size: 24rpx;
         color: #000000;
         line-height: 34rpx;
         text-align: left;
         font-style: normal;
      }
      .desc {
         font-size: 24rpx;
         color: #666666;
         line-height: 34rpx;
         text-align: left;
         font-style: normal;
      }
      .del {
         // vertical-align: baseline;
         margin-left: auto;
         margin-right: 6rpx;
         margin-top: 4rpx;
      }
      .container-info {
         max-width: 540rpx;
      }
      .h-line {
         width: 2rpx;
         height: 46rpx;
         background-color: #EEEEEE;
         margin-left: 28rpx;
         margin-right: 24rpx;
      }
      .v-line {
         width: 638rpx;
         height: 2rpx;
         // border: 2rpx solid #EEEEEE;
         background-color: #EEEEEE;
         margin-top: 24rpx;
         margin-bottom: 24rpx;
      }
      .edit {
         // min-width: 80rpx;
         width: fit-content;
         margin-left: auto;
         margin-right: 0rpx;
         display: flex;
         position: relative;
         .icon {
            // margin: 0 auto;
            // mar
            margin-left: auto;
            margin-right: auto;
            margin-top: 20rpx;
            display: block;
         }
      }
      .edit::before {
         content: " ";
         width: 2rpx;
         height: 46rpx;
         background-color: #EEEEEE;
         position: absolute;
         left: -24rpx;
         top: 20rpx;
      }
   }
}
</style>