王文杰
8 months ago
parent
74a75e5c21
commit
ff8b5c137a
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,228 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
const addressPopup2 = ref<UniHelper.UniPopupInstance>()
|
||||
|
||||
|
||||
// 获取收货地址列表数据
|
||||
const addressList = ref<AddressItem[]>([])
|
||||
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)
|
||||
}, 1000);
|
||||
})
|
||||
addressList.value = res
|
||||
}
|
||||
|
||||
const show = ()=> {
|
||||
addressPopup2.value?.open?.()
|
||||
getMemberAddressData()
|
||||
}
|
||||
const hide = ()=> {
|
||||
addressPopup2.value?.close?.()
|
||||
}
|
||||
|
||||
const handleDayChange = (e) => {
|
||||
const idx = e.target.dataset.val
|
||||
activeDayIndex.value = idx
|
||||
}
|
||||
const handleTimeChange = (e) => {
|
||||
const idx = e.target.dataset.val
|
||||
activeTimeIndex.value = idx
|
||||
}
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<uni-popup class="time-popup" :is-mask-click="false" ref="addressPopup2" 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 20rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: normal;
|
||||
border-bottom: 1rpx solid #ddd;
|
||||
color: #444;
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 24rpx;
|
||||
top: 40rpx;
|
||||
}
|
||||
}
|
||||
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: #27ba9b;
|
||||
border-radius: 6rpx;
|
||||
border: 1rpx solid #27ba9b;
|
||||
}
|
||||
}
|
||||
|
||||
.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: #27ba9b;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,13 @@
|
||||
import type { PageResult } from '@/types/global'
|
||||
import { http } from '@/utils/http'
|
||||
/**
|
||||
* 获取订单列表
|
||||
* @param data orderState 订单状态
|
||||
*/
|
||||
export const getListSiteAPI = (data: any) => {
|
||||
return http<PageResult>({
|
||||
method: 'POST',
|
||||
url: `/recycle-station/page`,
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 13 KiB |
Loading…
Reference in new issue