hotel-tablecloth-uniapp-24-08-29/components/address/addressList.vue

<template>
	<scroll-view 
	scroll-y="true" 
	:style="{height: height}"
	@scrolltolower="moreAddress">
		<uv-radio-group v-model="selectAddress"
		@change="editDefault"
		v-if="addressList.length > 0">
			<view v-for="item in addressList" :key="item.id" class="address-item">
		
				<view class="address-item-top"
				@click="select(item)">
					<view class="img-box">
						<image src="/static/image/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.id == selectAddress" class="is-default">默认</text>
						</view>
		
						<view class="address-detail">
							{{ item.address + " " + item.addressDetail }}
						</view>
					</view>
				</view>
		
				<view class="controls"
				v-if="controls">
		
					<view class="default-checkbox">
						<uv-radio
						:name="item.id" 
						label-disabled 
						size="30rpx"
						icon-size="30rpx">
							默认地址
						</uv-radio>
					</view>
		
					<view class="edit-btn">
						<uv-icon name="edit-pen"></uv-icon>
						<text @click="editAddress(item)" class="control-title">编辑</text>
					</view>
		
					<view class="del-btn">
						<uv-icon name="trash"></uv-icon>
						<text class="control-title" @click="deleteAddress(item.id)">删除</text>
					</view>
		
				</view>
			</view>
		</uv-radio-group>
		<view
		style="padding: 100rpx 0;"
		v-else>
			<uv-empty 
			mode="history"
			textSize="28rpx"
			iconSize="100rpx"/>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props : {
			controls : {
				default : false,
				type : Boolean,
			},
			height : {
				default : 'calc(90vh - 180rpx)'
			}
		},
		data() {
			return {
				selectAddress : 0,
				queryParams: {
					pageNo: 1,
					pageSize: 10,
				},
				addressList: [],
				total : 0,
			}
		},
		methods: {
			//获取地址列表
			getAddressList() {
				return new Promise((success, fail) => {
					this.$api('addressPage', this.queryParams, res => {
						if (res.code == 200) {
							this.addressList = res.result.records || [];
							this.total = res.result.total || 0;
							this.addressList.forEach(n => { //筛选默认地址
								if (n.defaultFlag == 1) {
									this.selectAddress = n.id
								}
							})
							success(res.result)
						}
					})
				})
			},
			// 加载更多
			moreAddress(){
				if(this.queryParams.pageSize > this.total){
					return
				}
				this.queryParams.pageSize += 10
				this.getAddressList()
			},
			// 删除地址
			deleteAddress(e){
				this.$emit('deleteAddress', e)
			},
			// 修改地址
			editAddress(e){
				this.$emit('editAddress', e)
			},
			// 切换默认地址
			editDefault(e){
				this.$emit('editDefault', e)
			},
			// 选择了地址
			select(e){
				this.$emit('select', e)
			},
		}
	}
</script>

<style scoped lang="scss">
.address-item {
	background: white;
	border-radius: 20rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	padding: 15rpx 15rpx 0rpx 15rpx;
	width: 680rpx;

	.address-item-top {
		border-bottom: 1px dashed #D3D1D1;
		display: flex;
		align-items: center;
		padding: 0rpx 0rpx 15rpx 0rpx;

		.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;
			}
		}
	}

	.controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		padding: 15rpx 15rpx 25rpx 15rpx;

		.default-checkbox {
			display: flex;

			text {
				margin-left: 8rpx;
			}
		}

		.control-title {
			height: 30rpx;
			line-height: 30rpx;
			color: #666666;
		}

		view {
			display: flex;
			align-items: center;
		}

		image {
			width: 23rpx;
			height: 23rpx;
			vertical-align: middle;
			margin-right: 8rpx;
		}
	}
}
</style>