door-uniapp-240802/service-uniapp-client/components/payOrder/selectAddressPopup.vue

<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: #F1B8BD;
		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: #EF8C94;
		}
	}
	
	@media all and (min-width: 961px) {
		.add-btn {
			left: 50% !important;
			transform: translateX(-50%);
		}
	}
</style>