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.
478 lines
11 KiB
478 lines
11 KiB
<template>
|
|
<view class="address">
|
|
<mNavbar title="地址管理" :leftClick="leftClick"></mNavbar>
|
|
|
|
<view v-if="addressList.length > 0" class="address-list">
|
|
<van-radio-group v-model="selectAddress">
|
|
<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
|
|
<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/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">
|
|
<van-radio @click="addDefault(item)" :name="item.id" label-disabled icon-size="30rpx">
|
|
默认地址
|
|
</van-radio>
|
|
</view>
|
|
|
|
<view class="edit-btn">
|
|
<image src="@/static/address/edit-icon.png" mode="aspectFill"></image>
|
|
<text @click="getAddressDetail(item.id)" class="control-title">编辑</text>
|
|
</view>
|
|
|
|
<view class="del-btn">
|
|
<image src="@/static/address/delete-icon.png" mode="aspectFill"></image>
|
|
<text class="control-title" @click="deleteAddress(item.id)">删除</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</van-list>
|
|
</van-radio-group>
|
|
</view>
|
|
|
|
<van-empty v-else image="/static/empty/address.png" image-size="400rpx" description="暂无服务地址请添加" />
|
|
|
|
<van-popup v-model:show="showOverlay" position="bottom" round closeable close-icon="close" :z-index="100"
|
|
:style="{ height: 'auto' , width : '100%' , padding : '20rpx'}">
|
|
<redactAddress :addressDetail="addressDetail" @saveOrUpdate="saveOrUpdate" :title="title"
|
|
@clickAddressIcon="selectAddr"></redactAddress>
|
|
</van-popup>
|
|
|
|
<view class="add-btn">
|
|
<view @click="addBtn" class="btn">
|
|
新增地址
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mNavbar from '@/components/base/m-navbar.vue'
|
|
import redactAddress from '@/components/address/redactAddress.vue'
|
|
import {
|
|
showNotify
|
|
} from 'vant'
|
|
import {
|
|
showConfirmDialog
|
|
} from 'vant';
|
|
import Position from '@/utils/position.js'
|
|
|
|
export default {
|
|
components: {
|
|
mNavbar,
|
|
redactAddress
|
|
},
|
|
data() {
|
|
return {
|
|
selectAddress: 0, //单选框选中的地址
|
|
showOverlay: false,
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10
|
|
},
|
|
addressList: [],
|
|
addressDetail: {},
|
|
loading: false,
|
|
finished: false,
|
|
title: '新增地址'
|
|
}
|
|
},
|
|
onShow() {
|
|
if (this.$route.query.current == 'payOrder') {
|
|
this.showOverlay = true;
|
|
}
|
|
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.showOverlay = true
|
|
}
|
|
})
|
|
},
|
|
|
|
//返回个人中心
|
|
leftClick() {
|
|
if (this.$route.query.current == 'payOrder') { //如果是从订单支付过来添加地址的就再调回去
|
|
return uni.navigateTo({
|
|
url: `/pages/order/payOrder?orderId=${this.$route.query.orderId}`
|
|
})
|
|
}
|
|
|
|
uni.switchTab({
|
|
url: '/pages/index/center'
|
|
})
|
|
},
|
|
|
|
//添加和修改地址
|
|
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.showOverlay = false
|
|
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.showOverlay = false
|
|
uni.showToast({
|
|
title: '操作成功',
|
|
icon: 'none'
|
|
})
|
|
this.getAddressList()
|
|
}
|
|
})
|
|
},
|
|
|
|
//删除地址
|
|
deleteAddress(id) {
|
|
showConfirmDialog({
|
|
title: '删除地址',
|
|
message: '确认删除此地址?删除后数据不可恢复',
|
|
}).then(() => {
|
|
this.$api('deleteAddress', {
|
|
id
|
|
}, res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title: '删除成功',
|
|
icon: 'none'
|
|
})
|
|
this.getAddressList()
|
|
}
|
|
})
|
|
}).catch(() => {});
|
|
},
|
|
|
|
//点击新增按钮
|
|
addBtn() {
|
|
this.title = '新增地址'
|
|
this.addressDetail = { //初始化数据
|
|
name: '',
|
|
phone: '',
|
|
address: '',
|
|
addressDetail: '',
|
|
defaultId: '',
|
|
latitude: '',
|
|
longitude: ''
|
|
}
|
|
this.showOverlay = true
|
|
},
|
|
|
|
//验证用户参数合法性
|
|
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(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;
|
|
|
|
.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: linear-gradient(180deg, #6FDFBE, #5AC796);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 961px) {
|
|
.add-btn {
|
|
left: 50% !important;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
//选择位置地图样式
|
|
:deep(.uni-system-choose-location) {
|
|
z-index: 99999 !important;
|
|
}
|
|
</style>
|