You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
260 lines
5.1 KiB
260 lines
5.1 KiB
<template>
|
|
<van-popup v-model:show="showBottom" round position="bottom" @close="close" :style="{ height: '75%' }">
|
|
|
|
<view class="box">
|
|
|
|
<view class="title">
|
|
{{ title || '选择地址' }}
|
|
</view>
|
|
|
|
<view v-if="list.length > 0" class="list">
|
|
<van-list v-model:loading="loading" :finished="finished" @load="onLoad">
|
|
<view v-for="item in list" :key="item.id" @click="$emit('select', item)" class="address-item">
|
|
<view class="address-item-top">
|
|
<view class="img-box">
|
|
<image src="@/static/address/address-icon.png" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="address-info">
|
|
<view class="user-info">
|
|
<text class="user-name">{{ item.name }}</text>
|
|
<text class="user-phone">{{ item.phone }}</text>
|
|
<text v-if="item.defaultId == '1'" class="is-default">默认</text>
|
|
</view>
|
|
<view class="address-detail">
|
|
{{ item.address + " " + item.addressDetail }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</van-list>
|
|
</view>
|
|
|
|
<van-empty v-else image="/static/empty/address.png" image-size="400rpx">
|
|
<template #description>
|
|
<view style="color: white;">
|
|
暂无服务地址请添加
|
|
</view>
|
|
</template>
|
|
</van-empty>
|
|
|
|
</view>
|
|
|
|
<view class="add-btn">
|
|
<view @click="toAddress" class="btn">
|
|
新增地址
|
|
</view>
|
|
</view>
|
|
|
|
</van-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import couponList from "../couponList.vue"
|
|
export default {
|
|
components: {
|
|
couponList
|
|
},
|
|
name: "selectCouponPopup",
|
|
props: ['show', 'title'],
|
|
data() {
|
|
return {
|
|
showBottom: false,
|
|
i: 0,
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
title: ''
|
|
},
|
|
list: [],
|
|
loading: false,
|
|
finished: false,
|
|
}
|
|
},
|
|
created() {
|
|
this.getAddressList();
|
|
},
|
|
methods: {
|
|
|
|
//滑动到底部
|
|
onLoad() {
|
|
this.queryParams.pageSize += 10
|
|
this.getAddressList()
|
|
},
|
|
|
|
//获取地址列表
|
|
getAddressList() {
|
|
this.$api('getAddressList', {
|
|
...this.queryParams,
|
|
}, res => {
|
|
if (res.code == 200) {
|
|
this.list = res.result.records;
|
|
if (this.queryParams.pageSize > res.result.total) {
|
|
this.finished = true
|
|
}
|
|
if (this.list.length == 0) {
|
|
this.toAddress()
|
|
}
|
|
}
|
|
this.loading = false
|
|
})
|
|
},
|
|
|
|
//选择地址
|
|
select(e) {
|
|
this.$emit('select', e)
|
|
},
|
|
|
|
//关闭地址弹窗
|
|
close() {
|
|
this.$emit('close')
|
|
},
|
|
|
|
//跳转新增地址页面
|
|
toAddress(){
|
|
uni.navigateTo({
|
|
url: `/pages/mine/address?current=payOrder&orderId=${this.$route.query.orderId}`
|
|
})
|
|
}
|
|
},
|
|
watch: {
|
|
show: {
|
|
handler(newValue, oldValue) {
|
|
this.showBottom = newValue
|
|
if (newValue) this.getAddressList()
|
|
},
|
|
immediate: true
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(#57CAA0, #55B16E);
|
|
box-sizing: border-box;
|
|
padding: 40rpx 40rpx 140rpx 40rpx;
|
|
|
|
.title {
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.list {
|
|
overflow: auto;
|
|
width: 100%;
|
|
height: calc(100% - 45rpx);
|
|
|
|
.address-item {
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 20rpx;
|
|
padding: 15rpx;
|
|
|
|
.address-item-top {
|
|
border-bottom: 1px dashed #D3D1D1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15rpx 0rpx;
|
|
|
|
&:nth-last-child(1) {
|
|
border: none;
|
|
}
|
|
|
|
.img-box {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
|
|
image {
|
|
width: 75%;
|
|
height: 75%;
|
|
display: block;
|
|
margin: 12.5% auto;
|
|
}
|
|
}
|
|
|
|
.address-info {
|
|
width: calc(100% - 120rpx);
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
text {
|
|
display: block;
|
|
line-height: 40rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.user-name,
|
|
.user-phone {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.is-default {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #FEB773;
|
|
color: white;
|
|
width: 80rpx;
|
|
height: 35rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
|
|
.address-detail {
|
|
color: #4a4a4a;
|
|
font-size: 26rpx;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.add-btn {
|
|
position: fixed;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 750rpx;
|
|
height: 100rpx;
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 85%;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
background: linear-gradient(180deg, #6FDFBE, #5AC796);
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 961px) {
|
|
.add-btn {
|
|
left: 50% !important;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
</style>
|