| | |
| | | <!-- 收货地址列表 --> |
| | | <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> |
| | |
| | | <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"> |
| | |
| | | <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"> |
| | |
| | | </view> |
| | | <view class="address"> |
| | | {{ item['province'] || '' }}{{ item['city'] && ('/' + item['city']) || '' }}{{ |
| | | item['region'] && ('/' + item['region']) || '' |
| | | item['region'] && ('/' + item['region']) || '' |
| | | }} |
| | | </view> |
| | | <view class="address"> |
| | |
| | | </view> |
| | | </view> |
| | | <!-- <view class="h-line"></view> --> |
| | | <view class="edit" @click="()=>{ |
| | | <view class="edit" @click="() => { |
| | | this.submitForm = { |
| | | ...item |
| | | } |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | </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> |
| | |
| | | </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: '', |
| | |
| | | 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> |