1
This commit is contained in:
230
src/page-reser/components/select-address-modal.vue
Normal file
230
src/page-reser/components/select-address-modal.vue
Normal file
@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<select-modal @close="closeAction" title="选择服务地址">
|
||||
<view class="select-address-container">
|
||||
<view v-if="!isLoading && addressList.length" class="address-container">
|
||||
<scroll-view class="scroll-view" scroll-y @scrolltolower="loadMoreAction"
|
||||
refresher-background="transparent">
|
||||
<view class="address-item" v-for="(item, index) in addressList" :key="item.id"
|
||||
@click.stop="changeAddress(item)">
|
||||
<view class="address-info-view">
|
||||
<view class="address-name-view">
|
||||
<text v-if="item.is_default" class="default-address fs-18">默认</text>
|
||||
<text class="app-fc-main fs-30 app-font-bold name-text">{{ item.recipient_name }}</text>
|
||||
<text class="app-fc-main fs-30 app-font-bold">{{ item.phone }}</text>
|
||||
</view>
|
||||
<text class="app-fc-normal fs-26">{{ getAddressText(item) }}</text>
|
||||
</view>
|
||||
<image @click.stop="goToEditAddress(item)" src="@/static/images/address_edit.png" mode="aspectFit" class="address-edit-icon"/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="address-container flex-center" v-if="isLoading">
|
||||
<uni-load-more status="loading" :show-text="false"/>
|
||||
</view>
|
||||
<view v-if="addressList.length === 0 && !isLoading" class="address-container">
|
||||
<image src="https://activity.wagoo.live/no_address.png" class="no-address-img" mode="widthFix"/>
|
||||
<!-- <text class="app-fc-normal fs-32 no-text">暂无地址信息</text> -->
|
||||
</view>
|
||||
<view class="add-btn" @click.stop="gotoAddAddress">
|
||||
<image class="add-icon" src="@/static/images/add.png" mode="aspectFit"/>
|
||||
<text class="app-fc-white fs-30">添加地址</text>
|
||||
</view>
|
||||
</view>
|
||||
</select-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectModal from "@/components/select-modal.vue";
|
||||
import { getAddressList } from "@/api/address";
|
||||
|
||||
export default {
|
||||
components: { SelectModal },
|
||||
props: {
|
||||
selectAddress: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
addressList: [],
|
||||
isLoading: true,
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
isLoadMore: false,
|
||||
isNoMore: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
userInfo() {
|
||||
return this.$store.state?.user?.userInfo || {};
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.pageNumber = 1;
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
closeAction() {
|
||||
this.$emit('close');
|
||||
},
|
||||
changeAddress(address) {
|
||||
this.$emit('changeAddress', address);
|
||||
},
|
||||
loadMoreAction() {
|
||||
if (this.isNoMore || this.isLoadMore) {
|
||||
return;
|
||||
}
|
||||
this.pageNumber++;
|
||||
this.isLoadMore = true;
|
||||
this.getData()
|
||||
},
|
||||
getData() {
|
||||
getAddressList({ user_id: this.userInfo.userID }).then((res) => {
|
||||
let list = res?.data || [];
|
||||
if (this.pageNumber === 1) {
|
||||
this.addressList = list;
|
||||
} else {
|
||||
this.addressList = [...this.addressList, ...list];
|
||||
}
|
||||
this.isLoading = false;
|
||||
this.isLoadMore = false;
|
||||
this.isNoMore = list.length < this.pageSize;
|
||||
}).catch(() => {
|
||||
if (this.pageNumber !== 1) {
|
||||
this.pageNumber--;
|
||||
}
|
||||
this.isLoading = false;
|
||||
this.isLoadMore = false;
|
||||
})
|
||||
},
|
||||
getAddressText(item) {
|
||||
// 组合地址信息：省市区 + 详细地址
|
||||
const region = [item.province, item.city, item.district].filter(Boolean).join('');
|
||||
return region ? `${region}${item.full_address}` : item.full_address;
|
||||
},
|
||||
gotoAddAddress() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/client/address/edit?isAdd=1`,
|
||||
events: {
|
||||
refreshAddress: () => {
|
||||
this.isLoading = true;
|
||||
this.isNoMore = false;
|
||||
this.isLoadMore = false;
|
||||
this.pageNumber = 1;
|
||||
this.getData();
|
||||
},
|
||||
},
|
||||
})
|
||||
},
|
||||
goToEditAddress(item){
|
||||
uni.navigateTo({
|
||||
url: `/pages/client/address/edit?id=${item?.id || ""}`,
|
||||
events: {
|
||||
refreshAddress: () => {
|
||||
this.isLoading = true;
|
||||
this.isNoMore = false;
|
||||
this.isLoadMore = false;
|
||||
this.pageNumber = 1;
|
||||
this.getData();
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.select-address-container {
|
||||
width: 100%;
|
||||
padding: 0 56rpx 10rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.address-container {
|
||||
width: 100%;
|
||||
height: 444rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 18rpx;
|
||||
|
||||
.no-address-img {
|
||||
margin-top: 30rpx;
|
||||
width: 348rpx;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.no-text {
|
||||
margin: 0 0 24rpx;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.address-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx 0rpx;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 2rpx solid #F7F3F7;
|
||||
|
||||
.address-info-view {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
margin-right: 30rpx;
|
||||
|
||||
.address-name-view {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
|
||||
.default-address {
|
||||
padding: 2rpx 6rpx;
|
||||
color: #40ae36;
|
||||
background: rgba(64, 174, 54, 0.2);
|
||||
border-radius: 6rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.name-text {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.address-edit-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 45rpx;
|
||||
background-color: $app_color_main;
|
||||
|
||||
.add-icon {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
flex-shrink: 0;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user