|
|
|
@ -3,77 +3,22 @@ |
|
|
|
|
|
|
|
<navbar title="地址管理" leftClick @leftClick="leftClick" /> |
|
|
|
|
|
|
|
<view v-if="addressList.length > 0" class="address-list"> |
|
|
|
<!-- <uv-radio-group v-model="selectAddress"> |
|
|
|
<view v-for="item in addressList" :key="item.id" class="address-item"> |
|
|
|
|
|
|
|
<view class="address-item-top"> |
|
|
|
<view class="img-box"> |
|
|
|
<image src="../static/address/icon.png" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="address-info"> |
|
|
|
<view class="user-info"> |
|
|
|
<text class="user-name">{{ item.name }}</text> |
|
|
|
<text class="user-phone">{{ item.phone }}</text> |
|
|
|
<text v-if="item.defaultId == '1'" class="is-default">默认</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="address-detail"> |
|
|
|
{{ item.address + " " + item.addressDetail }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="controls"> |
|
|
|
|
|
|
|
<view class="default-checkbox"> |
|
|
|
<uv-radio @click="addDefault(item)" |
|
|
|
:name="item.id" |
|
|
|
label-disabled |
|
|
|
size="30rpx" |
|
|
|
icon-size="30rpx"> |
|
|
|
默认地址 |
|
|
|
</uv-radio> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="edit-btn"> |
|
|
|
<uv-icon name="edit-pen"></uv-icon> |
|
|
|
<text @click="getAddressDetail(item.id)" class="control-title">编辑</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="del-btn"> |
|
|
|
<uv-icon name="trash"></uv-icon> |
|
|
|
<text class="control-title" @click="deleteAddress(item.id)">删除</text> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</uv-radio-group> --> |
|
|
|
<view class="address-list"> |
|
|
|
<addressList |
|
|
|
controls |
|
|
|
ref="addressList" |
|
|
|
@deleteAddress="deleteAddress" |
|
|
|
@editAddress="getAddressDetail" |
|
|
|
@editDefault="addDefault" |
|
|
|
:addressList="addressList"/> |
|
|
|
@editAddress="editAddress" |
|
|
|
@editDefault="editDefault"/> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view |
|
|
|
style="padding: 100rpx 0;" |
|
|
|
v-else> |
|
|
|
<uv-empty |
|
|
|
mode="history" |
|
|
|
textSize="28rpx" |
|
|
|
iconSize="100rpx"/> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uv-popup |
|
|
|
round="40rpx" |
|
|
|
|
|
|
|
<redactAddress |
|
|
|
ref="addressPopup" |
|
|
|
:customStyle="{ height: 'auto' , width : '100%' , padding : '20rpx'}"> |
|
|
|
<redactAddress :addressDetail="addressDetail" @saveOrUpdate="saveOrUpdate" :title="title" |
|
|
|
@clickAddressIcon="selectAddr"></redactAddress> |
|
|
|
</uv-popup> |
|
|
|
:addressDetail="addressDetail" |
|
|
|
@saveOrUpdate="saveOrUpdate" |
|
|
|
:title="title"></redactAddress> |
|
|
|
|
|
|
|
|
|
|
|
<view class="add-btn"> |
|
|
|
<view @click="addBtn" class="btn"> |
|
|
|
@ -86,7 +31,6 @@ |
|
|
|
<script> |
|
|
|
import redactAddress from '../components/address/redactAddress.vue' |
|
|
|
import addressList from '../components/address/addressList.vue' |
|
|
|
import Position from '@/utils/position.js' |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
@ -95,81 +39,22 @@ |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
selectAddress: 0, //单选框选中的地址 |
|
|
|
queryParams: { |
|
|
|
pageNo: 1, |
|
|
|
pageSize: 10 |
|
|
|
}, |
|
|
|
addressList: [ |
|
|
|
{ |
|
|
|
id : 1, |
|
|
|
name : 'xx', |
|
|
|
phone : '1305xxxx802', |
|
|
|
address : '广东省广州市越秀区', |
|
|
|
addressDetail : '城南故事C3栋2802', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id : 2, |
|
|
|
name : 'xx', |
|
|
|
phone : '1305xxxx802', |
|
|
|
address : '广东省广州市越秀区', |
|
|
|
addressDetail : '城南故事C3栋2802', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id : 3, |
|
|
|
name : 'xx', |
|
|
|
phone : '1305xxxx802', |
|
|
|
address : '广东省广州市越秀区', |
|
|
|
addressDetail : '城南故事C3栋2802', |
|
|
|
}, |
|
|
|
], |
|
|
|
addressDetail: {}, |
|
|
|
title: '新增地址' |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
// if (this.$route.query.current == 'payOrder') { |
|
|
|
// this.$refs.addressPopup.open('bottom') |
|
|
|
// } |
|
|
|
// this.getAddressList() |
|
|
|
this.getAddressList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
//list列表滑动到底部自动新增数据列表 |
|
|
|
onLoad() { |
|
|
|
this.queryParams.pageSize += 10 |
|
|
|
this.getAddressList() |
|
|
|
}, |
|
|
|
|
|
|
|
//获取地址列表 |
|
|
|
getAddressList() { |
|
|
|
this.$api('getAddressList', this.queryParams, res => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.addressList = res.result.records || []; |
|
|
|
this.addressList.forEach(n => { //筛选默认地址 |
|
|
|
if (n.defaultId == '1') { |
|
|
|
this.selectAddress = n.id |
|
|
|
} |
|
|
|
}) |
|
|
|
if (this.queryParams.pageSize > res.result.total) { |
|
|
|
this.finished = true |
|
|
|
} |
|
|
|
} |
|
|
|
this.loading = false |
|
|
|
}) |
|
|
|
this.$refs.addressList.getAddressList() |
|
|
|
}, |
|
|
|
|
|
|
|
//获取地址详情 |
|
|
|
getAddressDetail(id) { |
|
|
|
this.title = '修改地址' |
|
|
|
this.$api('getAddressDetail', { |
|
|
|
id |
|
|
|
}, res => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.addressDetail = res.result; |
|
|
|
this.$refs.addressPopup.open('bottom') |
|
|
|
} |
|
|
|
}) |
|
|
|
editAddress(address) { |
|
|
|
this.$refs.addressPopup.open({...address}) |
|
|
|
}, |
|
|
|
|
|
|
|
//返回个人中心 |
|
|
|
@ -178,31 +63,23 @@ |
|
|
|
}, |
|
|
|
|
|
|
|
//添加和修改地址 |
|
|
|
saveOrUpdate() { |
|
|
|
let isOk = this.parameterVerification() |
|
|
|
if (isOk && !isOk.auth) { |
|
|
|
return showNotify({ |
|
|
|
type: 'warning', |
|
|
|
message: isOk.title, |
|
|
|
'z-index': 10000 |
|
|
|
}); |
|
|
|
} |
|
|
|
saveOrUpdate(addressDetail) { |
|
|
|
|
|
|
|
let data = { |
|
|
|
name: this.addressDetail.name, |
|
|
|
phone: this.addressDetail.phone, |
|
|
|
address: this.addressDetail.address, |
|
|
|
addressDetail: this.addressDetail.addressDetail, |
|
|
|
defaultId: this.addressDetail.defaultId || '0', |
|
|
|
latitude: this.addressDetail.latitude, |
|
|
|
longitude: this.addressDetail.longitude |
|
|
|
name: addressDetail.name, |
|
|
|
phone: addressDetail.phone, |
|
|
|
address: addressDetail.address, |
|
|
|
addressDetail: addressDetail.addressDetail, |
|
|
|
defaultId: addressDetail.defaultId || '0', |
|
|
|
latitude: addressDetail.latitude, |
|
|
|
longitude: addressDetail.longitude |
|
|
|
} |
|
|
|
|
|
|
|
if (this.addressDetail.id) { |
|
|
|
data.id = this.addressDetail.id |
|
|
|
if (addressDetail.id) { |
|
|
|
data.id = addressDetail.id |
|
|
|
} |
|
|
|
|
|
|
|
this.$api('addOrUpdateAddress', data, res => { |
|
|
|
this.$api(data.id ? 'addressEdit' : 'addressAdd', data, res => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.$refs.addressPopup.close() |
|
|
|
this.getAddressList() |
|
|
|
@ -210,21 +87,14 @@ |
|
|
|
title: '操作成功', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
if (this.$route.query.current == 'payOrder') { //如果是从订单支付过来添加地址的就再调回去 |
|
|
|
uni.navigateTo({ |
|
|
|
url: `/pages/order/payOrder?orderId=${this.$route.query.orderId}` |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
//新增默认地址 |
|
|
|
addDefault(item) { |
|
|
|
this.selectAddress = item.id |
|
|
|
this.$api('addOrUpdateAddress', { |
|
|
|
id: item.id, |
|
|
|
defaultId: '1', |
|
|
|
//修改默认地址 |
|
|
|
editDefault(id) { |
|
|
|
this.$api('addressDefault', { |
|
|
|
id: id, |
|
|
|
}, res => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.$refs.addressPopup.close() |
|
|
|
@ -245,7 +115,7 @@ |
|
|
|
content: '确认删除此地址?删除后数据不可恢复', |
|
|
|
success(e) { |
|
|
|
if(e.confirm){ |
|
|
|
self.$api('deleteAddress', { |
|
|
|
self.$api('addressDelete', { |
|
|
|
id |
|
|
|
}, res => { |
|
|
|
if (res.code == 200) { |
|
|
|
@ -264,7 +134,7 @@ |
|
|
|
//点击新增按钮 |
|
|
|
addBtn() { |
|
|
|
this.title = '新增地址' |
|
|
|
this.addressDetail = { //初始化数据 |
|
|
|
this.$refs.addressPopup.open({ //初始化数据 |
|
|
|
name: '', |
|
|
|
phone: '', |
|
|
|
address: '', |
|
|
|
@ -272,75 +142,8 @@ |
|
|
|
defaultId: '', |
|
|
|
latitude: '', |
|
|
|
longitude: '' |
|
|
|
} |
|
|
|
this.$refs.addressPopup.open('bottom') |
|
|
|
}, |
|
|
|
|
|
|
|
//验证用户参数合法性 |
|
|
|
parameterVerification() { |
|
|
|
let { |
|
|
|
name, |
|
|
|
phone, |
|
|
|
address, |
|
|
|
addressDetail |
|
|
|
} = this.addressDetail |
|
|
|
if (name.trim() == '') { |
|
|
|
return { |
|
|
|
title: '请填写联系人', |
|
|
|
auth: false |
|
|
|
} |
|
|
|
} else if (phone.trim() == '') { |
|
|
|
return { |
|
|
|
title: '请填写手机号', |
|
|
|
auth: false |
|
|
|
} |
|
|
|
} else if (address.trim() == '') { |
|
|
|
return { |
|
|
|
title: '请填写所在地区', |
|
|
|
auth: false |
|
|
|
} |
|
|
|
} else if (addressDetail.trim() == '') { |
|
|
|
return { |
|
|
|
title: '请填写详细地址', |
|
|
|
auth: false |
|
|
|
} |
|
|
|
} else if (phone.trim() != '') { |
|
|
|
if (!this.$utils.verificationPhone(phone)) { |
|
|
|
return { |
|
|
|
title: '手机号格式不合法', |
|
|
|
auth: false |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
return { |
|
|
|
title: '验证通过', |
|
|
|
auth: true |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
//地图上选择地址 |
|
|
|
selectAddr() { |
|
|
|
Position.getLocation(res => { |
|
|
|
Position.selectAddress(res.longitude, res.latitude, success => { |
|
|
|
this.setAddress(success) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
//提取用户选择的地址信息复制给表单数据 |
|
|
|
setAddress(res) { |
|
|
|
//经纬度信息 |
|
|
|
this.addressDetail.latitude = res.latitude |
|
|
|
this.addressDetail.longitude = res.longitude |
|
|
|
|
|
|
|
if (!res.address && res.name) { //用户直接选择城市的逻辑 |
|
|
|
return this.addressDetail.address = res.name |
|
|
|
} |
|
|
|
if (res.address || res.name) { |
|
|
|
return this.addressDetail.address = res.address + res.name |
|
|
|
} |
|
|
|
this.addressDetail.address = '' //用户啥都没选就点击勾选 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
@ -355,115 +158,6 @@ |
|
|
|
|
|
|
|
.address-list { |
|
|
|
padding: 40rpx 20rpx 120rpx 20rpx; |
|
|
|
|
|
|
|
// .address-item { |
|
|
|
// background: white; |
|
|
|
// border-radius: 20rpx; |
|
|
|
// overflow: hidden; |
|
|
|
// margin-bottom: 20rpx; |
|
|
|
// padding: 15rpx 15rpx 0rpx 15rpx; |
|
|
|
// width: 680rpx; |
|
|
|
|
|
|
|
// .address-item-top { |
|
|
|
// border-bottom: 1px dashed #D3D1D1; |
|
|
|
// display: flex; |
|
|
|
// align-items: center; |
|
|
|
// padding: 0rpx 0rpx 15rpx 0rpx; |
|
|
|
|
|
|
|
// .img-box { |
|
|
|
// width: 120rpx; |
|
|
|
// height: 120rpx; |
|
|
|
|
|
|
|
// image { |
|
|
|
// width: 75%; |
|
|
|
// height: 75%; |
|
|
|
// display: block; |
|
|
|
// margin: 12.5% auto; |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
// .address-info { |
|
|
|
// width: calc(100% - 120rpx); |
|
|
|
// height: 100%; |
|
|
|
// display: flex; |
|
|
|
// flex-direction: column; |
|
|
|
// justify-content: space-between; |
|
|
|
|
|
|
|
// .user-info { |
|
|
|
// display: flex; |
|
|
|
// align-items: center; |
|
|
|
|
|
|
|
// text { |
|
|
|
// display: block; |
|
|
|
// line-height: 40rpx; |
|
|
|
// margin-right: 20rpx; |
|
|
|
// } |
|
|
|
|
|
|
|
// .user-name, |
|
|
|
// .user-phone { |
|
|
|
// font-size: 30rpx; |
|
|
|
// } |
|
|
|
|
|
|
|
// .is-default { |
|
|
|
// display: flex; |
|
|
|
// align-items: center; |
|
|
|
// justify-content: center; |
|
|
|
// background: #FEB773; |
|
|
|
// color: white; |
|
|
|
// width: 80rpx; |
|
|
|
// height: 35rpx; |
|
|
|
// border-radius: 20rpx; |
|
|
|
// font-size: 22rpx; |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
// .address-detail { |
|
|
|
// color: #4a4a4a; |
|
|
|
// font-size: 26rpx; |
|
|
|
// overflow: hidden; |
|
|
|
// display: -webkit-box; |
|
|
|
// -webkit-box-orient: vertical; |
|
|
|
// -webkit-line-clamp: 2; |
|
|
|
// text-overflow: ellipsis; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
// .controls { |
|
|
|
// display: flex; |
|
|
|
// align-items: center; |
|
|
|
// justify-content: space-between; |
|
|
|
// align-items: center; |
|
|
|
// font-size: 26rpx; |
|
|
|
// padding: 15rpx 15rpx 25rpx 15rpx; |
|
|
|
|
|
|
|
// .default-checkbox { |
|
|
|
// display: flex; |
|
|
|
|
|
|
|
// text { |
|
|
|
// margin-left: 8rpx; |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
// .control-title { |
|
|
|
// height: 30rpx; |
|
|
|
// line-height: 30rpx; |
|
|
|
// color: #666666; |
|
|
|
// } |
|
|
|
|
|
|
|
// view { |
|
|
|
// display: flex; |
|
|
|
// align-items: center; |
|
|
|
// } |
|
|
|
|
|
|
|
// image { |
|
|
|
// width: 23rpx; |
|
|
|
// height: 23rpx; |
|
|
|
// vertical-align: middle; |
|
|
|
// margin-right: 8rpx; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
} |
|
|
|
|
|
|
|
.add-btn { |
|
|
|
|
