xuxueyang
2024-10-09 cab1e5586552146b326aeaa34668ee2837a24891
pages/user/address/address.vue
@@ -1,6 +1,26 @@
<template>
   <!-- 收货地址列表 -->
   <view class="p15 container-address">
      <!-- <view class="search-container m-t-12 flex">
         <view class="flex1 input">
            <u-input placeholder="小区名/店铺名/写字楼/街道名等" disabled v-model="search_flow">
               <template slot="suffix">
                  <uni-icons color="#20613D" type="search" size="24"></uni-icons>
               </template>
            </u-input>
         </view>
      </view>
      <view class="m-t-12 ">
         <view class="desc-gray">当前位置</view>
         <view class="flex">
            <view class="flex1"></view>
            <view @click="selectWxAddress('input')">
               <image src="@/static/images/customer/address/icon-address.jpg"></image>
               重新定位
            </view>
         </view>
      </view>
       -->
      <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
      <!-- 循环 -->
@@ -38,7 +58,7 @@
                  @click="changeDefaultAddress(item,index)">
               </view>
               <span class="desc">{{ item.isDefault ? '默认地址:' : '当前地址:' }}{{ item.address || '' }}</span>
               <span class="desc" style="word-break: break-all;">{{ item.isDefault ? '默认地址:' : '当前地址:' }}</span>
               <!-- 当前地址/默认地址勾选 -->
            </view>
            <view class="desc del t-red" @click="deleteAddress(item)">
@@ -78,7 +98,8 @@
                     手机号
                  </view>
                  <view class="form-item-value">
                     <input v-model="submitForm.tel" placeholder="请输入收货人手机号" class="form-input" @blur="validatePhoneNumber()" ></input>
                     <input v-model="submitForm.tel" placeholder="请输入收货人手机号" class="form-input"
                        @blur="validatePhoneNumber()"></input>
                  </view>
               </view>
               <view class="form-item">
@@ -97,13 +118,21 @@
               </view>
               <view class="form-item">
               <view class="form-item" style="height: unset;min-height: 36rpx;">
                  <view class="form-item-label require">
                     详细地址
                  </view>
                  <view class="form-item-value">
                     <input v-model="submitForm.address" placeholder="请输入详细地址" class="form-input"></input>
                  <view class="form-item-value flex flex1">
                     <!-- <input v-model="submitForm.address" placeholder="请输入详细地址" class="form-input flex1"></input> -->
                     <u-textarea v-model="submitForm.address" autoHeight placeholder="请输入详细地址" class="form-input flex1" >
                     </u-textarea>
                     <view class="m-l-15 m-r-0 flex m-t-8" style="min-width: 120rpx;color: #7CC662;text-align: right;"
                        @click="selectWxAddress('form')">
                        <uni-icons color="#7CC662" type="location" size="18"></uni-icons>
                        定位
                     </view>
                  </view>
               </view>
               <view class="form-item">
@@ -126,9 +155,12 @@
</template>
<script>
   // #ifdef PUB_CUSTOMER
   // import qqmapwx from '@/plugins/qqmap-wx-jssdk.min.js';
   // const lockey = 'VUHBZ-2AMLP-B7AD7-VUQZ7-D4TW5-MFFVN'; //使用在腾讯位置服务申请的key
   // const chooseLocation = requirePlugin('chooseLocation');
   // const lockey = 'GSBBZ-CJA3U-NNDVH-GE65N-6FIF6-ZGBCU'; //使用在腾讯位置服务申请的key
   // const chooseLocation = requirePlugin('chooseLocation');
   // #endif
   import {
      mapState
   } from 'vuex'
@@ -144,6 +176,35 @@
         this.listApi = '/api/address/list'
         await this.getList()
      },
      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()
         // }
      },
      computed: {
         ...mapState({
@@ -164,23 +225,90 @@
               province: '',
               city: '',
               region: '',
               latitude: 0,
               longitude: 0,
            },
            regionDataPlus: [],
            list: [],
         };
      },
      methods: {
         validatePhoneNumber() {
             // 手机号码正则表达式,可以根据需要调整
             const phoneRegex = /^[1][3-9][0-9]{9}$/;
            if (!phoneRegex.test(this.submitForm['tel'])) {
                 this.$message.showToast('请填写正确手机号码')
              }
         selectWxAddress(source) {
            let that = this
            if (source === 'form') {
               //表单选择了地址
               wx.chooseLocation({
                  success: location => {
                     console.log('success loc', location)
                     // address: "江苏省苏州市吴中区太湖东路288号"
                     // errMsg: "chooseLocation:ok"
                     // latitude: 31.26249
                     // longitude: 120.63212
                     // name: "苏州市吴中区人民政府"
                     that.submitForm.address = (location.address || '') + (location.name || '')
                     that.submitForm.latitude = location.latitude || 0
                     that.submitForm.longitude = location.longitude || 0
                     // 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'] = ''
@@ -403,20 +531,20 @@
               this.$message.showToast('字段未填写完整')
               return
            }
            if(!this.submitForm['province']||!this.submitForm['province']||!this.submitForm['province']){
            if (!this.submitForm['province'] || !this.submitForm['province'] || !this.submitForm['province']) {
               this.$message.showToast('省市区未选择完整')
               return
            }
            // 手机号码正则表达式,可以根据需要调整
             const phoneRegex = /^[1][3-9][0-9]{9}$/;
            const phoneRegex = /^[1][3-9][0-9]{9}$/;
            if (!phoneRegex.test(this.submitForm['tel'])) {
               this.$message.showToast('请填写正确手机号码')
               return
            }
            this.$message.showLoading()
            const {
               code
@@ -428,7 +556,7 @@
            if (code === 0) {
               this.$refs.popup_form.close()
               this.$message.showToast(this.submitForm.id ? '修改成功' : '新增成功')
               let tmp = this
               setTimeout(() => {
                  tmp.page.current = 1