<template>
|
<!-- 收货地址列表 -->
|
<view class="p15 container-address">
|
<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">
|
<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">{{ item.isDefault ? '默认地址:' : '当前地址:' }}{{ item.address || '' }}</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>
|
|
</view>
|
<view style="height: 92rpx;width: 690rpx;">
|
|
</view>
|
<view class="button-green button-fixed-bottom" 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"></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">
|
<view class="form-item-label require">
|
详细地址
|
</view>
|
<view class="form-item-value">
|
<input v-model="submitForm.address" placeholder="请输入详细地址" class="form-input"></input>
|
|
</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>
|
// import qqmapwx from '@/plugins/qqmap-wx-jssdk.min.js';
|
// const lockey = 'VUHBZ-2AMLP-B7AD7-VUQZ7-D4TW5-MFFVN'; //使用在腾讯位置服务申请的key
|
// const chooseLocation = requirePlugin('chooseLocation');
|
import {
|
mapState
|
} from 'vuex'
|
export default {
|
async onPullDownRefresh() {
|
this.page.current = 0
|
await this.getList()
|
uni.stopPullDownRefresh()
|
},
|
async onLoad(options) {
|
// this.list = [{}, {}]
|
this.source = options.source || ''
|
this.listApi = '/api/address/list'
|
await this.getList()
|
|
},
|
computed: {
|
...mapState({
|
address: state => {
|
return state.defaultaddress || {}
|
},
|
}),
|
|
},
|
data() {
|
return {
|
source: '',
|
submitForm: {
|
name: '',
|
tel: '',
|
address: '',
|
isDefault: false,
|
province: '',
|
city: '',
|
region: '',
|
|
},
|
regionDataPlus: [],
|
list: [],
|
};
|
},
|
methods: {
|
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()
|
},
|
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() {
|
if (this.regionDataPlus && this.regionDataPlus.length > 0) {
|
|
} else {
|
var a = this.$storage.getItem('cache_area')
|
if (a) {
|
this.regionDataPlus = JSON.parse(a) || []
|
} else {
|
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) {
|
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
|
}
|
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 {
|
.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>
|
