王文杰
8 months ago
parent
d0d49a26e1
commit
6b5422fc98
@ -0,0 +1,170 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, reactive, toRaw } from 'vue'
|
||||||
|
import { onReady } from '@dcloudio/uni-app'
|
||||||
|
// 子调父
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(event: 'close'): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
const item = addressList.value[activeIndex.value]
|
||||||
|
emit('close', toRaw(item))
|
||||||
|
}
|
||||||
|
// 获取收货地址列表数据
|
||||||
|
const addressList = ref<any[]>([])
|
||||||
|
const activeIndex = ref(0)
|
||||||
|
const handleChange = (e) => {
|
||||||
|
activeIndex.value = e.currentTarget.dataset.val
|
||||||
|
}
|
||||||
|
const getMemberAddressData = async () => {
|
||||||
|
const res = await new Promise((resolve, reject) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const dataList = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
name: '李明 13824686868',
|
||||||
|
location: '北京市顺义区后沙峪地区安平北街6号院1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
name: '李明2 13824686868',
|
||||||
|
location: '北京市顺义区后沙峪地区安平北街6号院2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
name: '李明3 13824686868',
|
||||||
|
location: '北京市顺义区后沙峪地区安平北街6号院3',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
resolve(dataList)
|
||||||
|
}, 0);
|
||||||
|
})
|
||||||
|
addressList.value = res
|
||||||
|
}
|
||||||
|
// 页面加载
|
||||||
|
onReady(async () => {
|
||||||
|
getMemberAddressData()
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="address-panel">
|
||||||
|
<!-- 关闭按钮 -->
|
||||||
|
<text class="close icon-close" @click="handleClose"></text>
|
||||||
|
<!-- 标题 -->
|
||||||
|
<view class="title">配送至</view>
|
||||||
|
<!-- 内容 -->
|
||||||
|
<view class="content">
|
||||||
|
<view
|
||||||
|
class="item"
|
||||||
|
v-for="(item, index) in addressList"
|
||||||
|
:key="item.id"
|
||||||
|
:data-val="index"
|
||||||
|
@click="handleChange"
|
||||||
|
>
|
||||||
|
<view class="user">{{ item.name }}</view>
|
||||||
|
<view class="address">{{ item.location }}</view>
|
||||||
|
<text :class="[activeIndex == index ? 'icon-checked' : 'icon-ring', 'icon']"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="footer">
|
||||||
|
<view class="button primary">
|
||||||
|
<navigator hover-class="none" url="/pagesMember/address-form/address-form">
|
||||||
|
新建地址
|
||||||
|
</navigator>
|
||||||
|
</view>
|
||||||
|
<view v-if="false" class="button primary">确定</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.address-panel {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
border-radius: 10rpx 10rpx 0 0;
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
line-height: 1;
|
||||||
|
padding: 40rpx 0;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: normal;
|
||||||
|
border-bottom: 1rpx solid #ddd;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
position: absolute;
|
||||||
|
right: 24rpx;
|
||||||
|
top: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
min-height: 300rpx;
|
||||||
|
max-height: 540rpx;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 20rpx;
|
||||||
|
.item {
|
||||||
|
padding: 30rpx 50rpx 30rpx 60rpx;
|
||||||
|
background-size: 40rpx;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 0 center;
|
||||||
|
background-image: url(/static/images/location.png);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
color: #999;
|
||||||
|
font-size: 40rpx;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.icon-checked {
|
||||||
|
color: #3775F6;
|
||||||
|
}
|
||||||
|
.icon-ring {
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
.user {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #444;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.address {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 0 40rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #444;
|
||||||
|
|
||||||
|
.button {
|
||||||
|
flex: 1;
|
||||||
|
height: 72rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 72rpx;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 72rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #3775F6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
background-color: #ffa868;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,231 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref, reactive } from 'vue'
|
|
||||||
import { onReady } from '@dcloudio/uni-app'
|
|
||||||
const addressPopup = ref<UniHelper.UniPopupInstance>()
|
|
||||||
|
|
||||||
|
|
||||||
// 获取收货地址列表数据
|
|
||||||
const addressList = ref<any[]>([])
|
|
||||||
// 定义返回给父组件的方法
|
|
||||||
const emit = defineEmits(['change'])
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const getMemberAddressData = async () => {
|
|
||||||
|
|
||||||
const res = await new Promise((resolve, reject) => {
|
|
||||||
setTimeout(() => {
|
|
||||||
const dataList = [
|
|
||||||
{
|
|
||||||
'id': '1764537730823360514',
|
|
||||||
'receiver': '656',
|
|
||||||
'contact': '1',
|
|
||||||
'provinceCode': '120000',
|
|
||||||
'cityCode': '120100',
|
|
||||||
'countyCode': '120101',
|
|
||||||
'address': '22',
|
|
||||||
'isDefault': 1,
|
|
||||||
'fullLocation': '天津市 天津市 和平区',
|
|
||||||
'postalCode': null,
|
|
||||||
'addressTags': null
|
|
||||||
},
|
|
||||||
]
|
|
||||||
resolve(dataList)
|
|
||||||
}, 0);
|
|
||||||
})
|
|
||||||
addressList.value = res
|
|
||||||
}
|
|
||||||
|
|
||||||
const show = ()=> {
|
|
||||||
addressPopup.value?.open?.()
|
|
||||||
getMemberAddressData()
|
|
||||||
}
|
|
||||||
const hide = ()=> {
|
|
||||||
addressPopup.value?.close?.()
|
|
||||||
const str = addressList.value[0].fullLocation
|
|
||||||
emit('change', str)
|
|
||||||
|
|
||||||
}
|
|
||||||
// 页面加载
|
|
||||||
onReady(async () => {
|
|
||||||
show()
|
|
||||||
})
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<uni-popup class="time-popup" :is-mask-click="false" ref="addressPopup" type="bottom" background-color="#fff">
|
|
||||||
<view class="popup-root">
|
|
||||||
<view class="title">
|
|
||||||
<view class="text">取件地址</view>
|
|
||||||
<view class="close" @click="hide">X</view>
|
|
||||||
</view>
|
|
||||||
<!-- 地址列表 -->
|
|
||||||
<scroll-view enable-back-to-top class="scroll-view" scroll-y>
|
|
||||||
<view v-if="addressList.length" class="address">
|
|
||||||
<uni-swipe-action class="address-list">
|
|
||||||
<!-- 收货地址项 -->
|
|
||||||
<uni-swipe-action-item class="item" v-for="item in addressList" :key="item.id">
|
|
||||||
<view class="item-content" @tap="onChangeAddress(item)">
|
|
||||||
<view class="user">
|
|
||||||
{{ item.receiver }}
|
|
||||||
<text class="contact">{{ item.contact }}</text>
|
|
||||||
<text v-if="item.isDefault" class="badge">默认</text>
|
|
||||||
</view>
|
|
||||||
<view class="locate">{{ item.fullLocation }} {{ item.address }}</view>
|
|
||||||
<!-- H5 端需添加 .prevent 阻止链接的默认行为 -->
|
|
||||||
<navigator
|
|
||||||
class="edit"
|
|
||||||
hover-class="none"
|
|
||||||
:url="`/pagesMember/address-form/address-form?id=${item.id}`"
|
|
||||||
@tap.stop="() => {}"
|
|
||||||
@tap.prevent="() => {}"
|
|
||||||
>
|
|
||||||
修改
|
|
||||||
</navigator>
|
|
||||||
</view>
|
|
||||||
<!-- 右侧插槽 -->
|
|
||||||
<template #right>
|
|
||||||
<button @tap="onDeleteAddress(item.id)" class="delete-button">删除</button>
|
|
||||||
</template>
|
|
||||||
</uni-swipe-action-item>
|
|
||||||
</uni-swipe-action>
|
|
||||||
</view>
|
|
||||||
<view v-else class="blank">暂无收货地址</view>
|
|
||||||
</scroll-view>
|
|
||||||
<!-- 添加按钮 -->
|
|
||||||
<view class="add-btn">
|
|
||||||
<navigator hover-class="none" url="/pagesMember/address-form/address-form">
|
|
||||||
新建地址
|
|
||||||
</navigator>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</uni-popup>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.time-popup {
|
|
||||||
padding: 0 30rpx;
|
|
||||||
border-radius: 10rpx 10rpx 0 0;
|
|
||||||
position: relative;
|
|
||||||
background-color: #fff;
|
|
||||||
.title {
|
|
||||||
line-height: 1;
|
|
||||||
padding: 40rpx;
|
|
||||||
font-size: 32rpx;
|
|
||||||
font-weight: normal;
|
|
||||||
border-bottom: 1rpx solid #ddd;
|
|
||||||
color: #444;
|
|
||||||
.close {
|
|
||||||
position: absolute;
|
|
||||||
right: 24rpx;
|
|
||||||
top: 40rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
width: 60rpx;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
page {
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 删除按钮 */
|
|
||||||
.delete-button {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 50px;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 0;
|
|
||||||
padding: 0;
|
|
||||||
background-color: #cf4444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.viewport {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
|
|
||||||
.scroll-view {
|
|
||||||
padding-top: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.address {
|
|
||||||
padding: 0 20rpx;
|
|
||||||
margin: 0 20rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
background-color: #fff;
|
|
||||||
|
|
||||||
.item-content {
|
|
||||||
line-height: 1;
|
|
||||||
padding: 40rpx 10rpx 38rpx;
|
|
||||||
border-bottom: 1rpx solid #ddd;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.edit {
|
|
||||||
position: absolute;
|
|
||||||
top: 36rpx;
|
|
||||||
right: 30rpx;
|
|
||||||
padding: 2rpx 0 2rpx 20rpx;
|
|
||||||
border-left: 1rpx solid #666;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #666;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:last-child .item-content {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user {
|
|
||||||
font-size: 28rpx;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
color: #333;
|
|
||||||
|
|
||||||
.contact {
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 4rpx 10rpx 2rpx 14rpx;
|
|
||||||
margin: 2rpx 0 0 10rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #3775F6;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
border: 1rpx solid #3775F6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.locate {
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.blank {
|
|
||||||
margin-top: 300rpx;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-btn {
|
|
||||||
height: 80rpx;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 80rpx;
|
|
||||||
margin: 30rpx 20rpx;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 80rpx;
|
|
||||||
font-size: 30rpx;
|
|
||||||
background-color: #3775F6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
Before Width: | Height: | Size: 467 KiB |
Loading…
Reference in new issue