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