You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
506 lines
11 KiB
506 lines
11 KiB
<template>
|
|
<view class="address">
|
|
|
|
<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> -->
|
|
<addressList
|
|
controls
|
|
@deleteAddress="deleteAddress"
|
|
@editAddress="getAddressDetail"
|
|
@editDefault="addDefault"
|
|
:addressList="addressList"/>
|
|
</view>
|
|
|
|
<view
|
|
style="padding: 100rpx 0;"
|
|
v-else>
|
|
<uv-empty
|
|
mode="history"
|
|
textSize="28rpx"
|
|
iconSize="100rpx"/>
|
|
</view>
|
|
|
|
<uv-popup
|
|
round="40rpx"
|
|
ref="addressPopup"
|
|
:customStyle="{ height: 'auto' , width : '100%' , padding : '20rpx'}">
|
|
<redactAddress :addressDetail="addressDetail" @saveOrUpdate="saveOrUpdate" :title="title"
|
|
@clickAddressIcon="selectAddr"></redactAddress>
|
|
</uv-popup>
|
|
|
|
<view class="add-btn">
|
|
<view @click="addBtn" class="btn">
|
|
新增地址
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import redactAddress from '../components/address/redactAddress.vue'
|
|
import addressList from '../components/address/addressList.vue'
|
|
import Position from '@/utils/position.js'
|
|
|
|
export default {
|
|
components: {
|
|
redactAddress,
|
|
addressList
|
|
},
|
|
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()
|
|
},
|
|
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
|
|
})
|
|
},
|
|
|
|
//获取地址详情
|
|
getAddressDetail(id) {
|
|
this.title = '修改地址'
|
|
this.$api('getAddressDetail', {
|
|
id
|
|
}, res => {
|
|
if (res.code == 200) {
|
|
this.addressDetail = res.result;
|
|
this.$refs.addressPopup.open('bottom')
|
|
}
|
|
})
|
|
},
|
|
|
|
//返回个人中心
|
|
leftClick() {
|
|
uni.navigateBack(-1)
|
|
},
|
|
|
|
//添加和修改地址
|
|
saveOrUpdate() {
|
|
let isOk = this.parameterVerification()
|
|
if (isOk && !isOk.auth) {
|
|
return showNotify({
|
|
type: 'warning',
|
|
message: isOk.title,
|
|
'z-index': 10000
|
|
});
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
if (this.addressDetail.id) {
|
|
data.id = this.addressDetail.id
|
|
}
|
|
|
|
this.$api('addOrUpdateAddress', data, res => {
|
|
if (res.code == 200) {
|
|
this.$refs.addressPopup.close()
|
|
this.getAddressList()
|
|
uni.showToast({
|
|
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',
|
|
}, res => {
|
|
if (res.code == 200) {
|
|
this.$refs.addressPopup.close()
|
|
uni.showToast({
|
|
title: '操作成功',
|
|
icon: 'none'
|
|
})
|
|
this.getAddressList()
|
|
}
|
|
})
|
|
},
|
|
|
|
//删除地址
|
|
deleteAddress(id) {
|
|
let self = this
|
|
uni.showModal({
|
|
title: '删除地址',
|
|
content: '确认删除此地址?删除后数据不可恢复',
|
|
success(e) {
|
|
if(e.confirm){
|
|
self.$api('deleteAddress', {
|
|
id
|
|
}, res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'none'
|
|
})
|
|
self.getAddressList()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
//点击新增按钮
|
|
addBtn() {
|
|
this.title = '新增地址'
|
|
this.addressDetail = { //初始化数据
|
|
name: '',
|
|
phone: '',
|
|
address: '',
|
|
addressDetail: '',
|
|
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>
|
|
|
|
<style lang="scss" scoped>
|
|
.address {
|
|
width: 750rpx;
|
|
margin: 0rpx auto;
|
|
background: #F5F5F5;
|
|
box-sizing: border-box;
|
|
min-height: 100vh;
|
|
|
|
.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 {
|
|
position: fixed;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 750rpx;
|
|
height: 100rpx;
|
|
background: white;
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 85%;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
background: $uni-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 961px) {
|
|
.add-btn {
|
|
left: 50% !important;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
//选择位置地图样式
|
|
:deep(.uni-system-choose-location) {
|
|
z-index: 99999 !important;
|
|
}
|
|
</style>
|