193 lines
4.1 KiB
Vue
193 lines
4.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
|
||
v-for="(item, index) in addressList"
|
||
:key="index"
|
||
class="address-item"
|
||
:class="{'active': item.id == activeIndex}"
|
||
>
|
||
<view
|
||
v-if="item.id == activeIndex"
|
||
class="selected-flag"
|
||
>
|
||
<u-icon name="checkbox-mark" color="#ffffff" size="12"></u-icon>
|
||
</view>
|
||
<view class="address-wrap" @click="handleSelect(item)">
|
||
<view class="v12-font-28 v12-font-bold text">
|
||
收货地址：
|
||
</view>
|
||
<view>
|
||
<view class="info">
|
||
<text class="v12-font-28 v12-font-bold v12-dark-text">{{ item.realName }}</text>
|
||
<text class="v12-font-28 v12-font-bold v12-dark-text v12-ml-1">{{ item.phone }}</text>
|
||
</view>
|
||
<view class="address v12-font-bold v12-font-28 v12-dark-text v12-mt-3 v12-mb-4">
|
||
{{ item.province + item.city + item.district + item.detail }}
|
||
<view @click.stop="editAddress(item)">
|
||
<u-icon :name="webUrl+'/orderIcon/edit02.png'" color="#C52733"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 添加新地址按钮 -->
|
||
<view class="v12-white btn-wrap">
|
||
<view class="add-btn v12-primary v12-white-text" @click="addNewAddress">
|
||
<text>添加新地址</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props: {
|
||
addressList: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||
showPopup: false, // 新增控制弹窗显示的状态
|
||
activeIndex: ''
|
||
}
|
||
},
|
||
methods: {
|
||
editAddress(item) {
|
||
// this.$yrouter.push({
|
||
// path: "/pages/user/address/AddressManagement/index",
|
||
// query: {
|
||
// choosMode: 3
|
||
// }
|
||
// });
|
||
this.$yrouter.push({
|
||
path: "/pages/user/address/AddAddress/index",
|
||
query: {
|
||
choosMode: 3,
|
||
id: item.id
|
||
}
|
||
})
|
||
},
|
||
// 选择地址
|
||
handleSelect(item) {
|
||
this.activeIndex = item.id
|
||
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>
|
||
.text{
|
||
white-space: nowrap;
|
||
}
|
||
.address-wrap{
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.address-list {
|
||
padding: 20rpx 20rpx 0rpx;
|
||
width: 640rpx;
|
||
max-height: 800rpx;
|
||
overflow: auto;
|
||
}
|
||
|
||
.address-item {
|
||
padding: 20rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.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;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.add-btn {
|
||
padding: 20rpx;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 100rpx;
|
||
}
|
||
.btn-wrap{
|
||
position: sticky;
|
||
bottom: 0;
|
||
width: 100%;
|
||
padding: 20rpx 0;
|
||
}
|
||
.active{
|
||
background-color: #FFF5F5;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #C52733;
|
||
}
|
||
.selected-flag{
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
padding: 6rpx 10rpx 6rpx 14rpx;
|
||
border-radius: 0 16rpx 0 16rpx;
|
||
background-color: #C52733;
|
||
z-index: 9;
|
||
}
|
||
</style>
|