<template>
|
<!-- 收货地址列表 -->
|
<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="selectGaodeAddress('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 current-address">
|
<view class="flex1">
|
{{ addressDesc || (address && address.id ? address.address : '选择地址') }}
|
|
</view>
|
<view class="flex" @click="changeCurrentAddress">
|
<view>
|
<image style="width: 30rpx;height: 30rpx;margin-top: 6rpx;margin-right: 10rpx;" class="m-t-2"
|
src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/a2/a248385d4fe748ca81ee058ea5bf8c47icon-address.jpg">
|
</image>
|
</view>
|
<view>重新定位</view>
|
</view>
|
</view>
|
</view>
|
<view class="m-t-12 ">
|
<view class="desc-gray">我的收货地址</view>
|
|
</view>
|
<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 class="flex">
|
<view class="container-info">
|
<view class="flex">
|
<view class="name">{{ item.name || '-' }}</view>
|
<view class="tel">{{ item.tel || '-' }}</view>
|
</view>
|
<view class="address">
|
{{ item['province'] || '' }}{{ item['city'] && ('/' + item['city']) || '' }}{{
|
item['region'] && ('/' + item['region']) || ''
|
}}
|
</view>
|
<view class="address">
|
{{ item.address }}
|
</view>
|
</view>
|
<!-- <view class="h-line"></view> -->
|
<view class="edit" @click="() => {
|
this.submitForm = {
|
...item
|
}
|
openAddressForm()
|
}">
|
<uni-icons type="compose" class="icon" color="#666666"></uni-icons>
|
</view>
|
</view>
|
<view class="v-line"></view>
|
<view class="flex">
|
<!-- -->
|
<view class="flex">
|
<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>
|
<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>
|
<view class="desc del t-green m-l-10" v-if="source === 'home'" @click="selectAddress(item)">
|
按此地址定位
|
</view>
|
</view>
|
|
</view>
|
<view style="height: 92rpx;width: 690rpx;">
|
|
</view>
|
<view class="button-green button-fixed-bottom" v-if="currentInfo.id"
|
style="width: 690rpx;line-height: 92rpx;height: 92rpx;" @click="addAddress">添加收货地址
|
</view>
|
|
<uni-popup ref="popup_form" type="top" :mask-click="false">
|
<view class="popup-address-form">
|
<view class="close-parent">
|
{{ submitForm.id ? '新增' : '编辑' }}收货地址
|
<uni-icons class="close" type="closeempty" @click="closeAddressForm"></uni-icons>
|
</view>
|
<!--收货人、手机号、校区、详细地址 -->
|
<view class="submit form">
|
<view class="form-item">
|
<view class="form-item-label require">
|
收货人
|
</view>
|
<view class="form-item-value">
|
<input v-model="submitForm.name" placeholder="请输入收货人" class="form-input"></input>
|
</view>
|
</view>
|
<view class="form-item">
|
<view class="form-item-label require">
|
手机号
|
</view>
|
<view class="form-item-value">
|
<input v-model="submitForm.tel" placeholder="请输入收货人手机号" class="form-input"
|
@blur="validatePhoneNumber()"></input>
|
</view>
|
</view>
|
<view class="form-item">
|
<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=""
|
:localdata="regionDataPlus">
|
{{ 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" style="height: unset;min-height: 36rpx;">
|
<view class="form-item-label require">
|
详细地址
|
</view>
|
<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">
|
<view class="form-item-label">
|
是否默认
|
</view>
|
<view class="form-item-value">
|
<radio value="r1" :checked="submitForm.isDefault"
|
@click="submitForm.isDefault = !submitForm.isDefault"
|
style="transform:scale(0.6);margin-top: -8rpx;" />
|
</view>
|
</view>
|
</view>
|
|
<view class="button-green m-t-15" @click="saveOrUpdateAddress">保存</view>
|
</view>
|
</uni-popup>
|
|
</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
|
|
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()
|
|
}
|
|
},
|
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'
|
})
|
},
|
selectWxAddress(source) {
|
let that = this
|
|
{
|
//表单选择了地址
|
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('请填写正确手机号码')
|
}
|
|
},
|
|
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])
|
})
|
|
|
})
|
})
|
},
|
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.$refs.popup_form.close()
|
|
},
|
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
|
}
|
|
// 手机号码正则表达式，可以根据需要调整
|
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;
|
}
|
|
.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;
|
|
.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>
|
