146 lines
3.1 KiB
Vue
146 lines
3.1 KiB
Vue
<template>
|
||
<!-- 使用u-popup包裹整个地址列表 -->
|
||
<u-popup
|
||
:show="showPopup"
|
||
:safeAreaInsetBottom="false"
|
||
mode="center"
|
||
round="16"
|
||
closeable
|
||
@close="close"
|
||
@open="open"
|
||
>
|
||
<view class="v12-text-center v12-font-bold v12-mt-3">收货地址</view>
|
||
<view class="address-list">
|
||
<!-- 地址列表 -->
|
||
<view
|
||
class="address-item"
|
||
>
|
||
<view class="address-wrap" @click="handleSelect(addressList)">
|
||
<view class="v12-font-28 v12-font-bold">
|
||
收货地址：
|
||
</view>
|
||
<view>
|
||
<view class="info">
|
||
<text class="v12-font-28 v12-font-bold v12-dark-text">{{ addressList.realName }}</text>
|
||
<text class="v12-font-28 v12-font-bold v12-dark-text v12-ml-1">{{ addressList.phone }}</text>
|
||
</view>
|
||
<view class="address v12-font-bold v12-font-28 v12-dark-text v12-mt-3 v12-mb-4">
|
||
{{ addressList.province + addressList.city + addressList.district + addressList.detail }}
|
||
<view @click.stop="editAddress">
|
||
<u-icon :name="webUrl+'/orderIcon/edit02.png'" color="#C52733"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 添加新地址按钮 -->
|
||
<view class="add-btn v12-primary v12-white-text" @click="addNewAddress">
|
||
<text>添加新地址</text>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
addressList: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
showPopup: false, // 新增控制弹窗显示的状态
|
||
}
|
||
},
|
||
methods: {
|
||
editAddress() {
|
||
this.$yrouter.push({
|
||
path: "/pages/user/address/AddressManagement/index",
|
||
query: {
|
||
choosMode: 3
|
||
}
|
||
});
|
||
},
|
||
// 选择地址
|
||
handleSelect(item) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认选择这个收货地址吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.$emit('save', item.id)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 添加新地址
|
||
addNewAddress() {
|
||
this.$yrouter.push({
|
||
path: "/pages/user/address/AddAddress/index",
|
||
query: {
|
||
choosMode: 3
|
||
}
|
||
});
|
||
},
|
||
// 新增打开弹窗方法
|
||
open() {
|
||
this.showPopup = true
|
||
},
|
||
// 新增关闭弹窗方法
|
||
close() {
|
||
this.showPopup = false
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.address-wrap{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.address-list {
|
||
padding: 20rpx;
|
||
width: 640rpx;
|
||
}
|
||
|
||
.address-item {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.name {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.phone {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.address {
|
||
font-size: 26rpx;
|
||
color: #888;
|
||
display: flex;
|
||
}
|
||
|
||
.add-btn {
|
||
margin-top: 30rpx;
|
||
padding: 20rpx;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 100rpx;
|
||
|
||
}
|
||
</style> |