jewelry-front/pages_order/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/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.defaultFlag == 1" class="is-default">默认</text>
						</view>

						<view class="address-detail">
							{{ item.address + " " + item.addressDetails }}
						</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" activeColor="#E3441A">
							默认地址
						</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('getAddressPageList', this.queryParams, res => {
						if (res.code == 200) {
							this.addressList = res.result.records || [];
							this.total = res.result.total || 0;
							res.result.records.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: 100%;
		box-sizing: border-box;

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

			.img-box {
				width: 100rpx;
				height: 100rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.address-info {
				width: calc(100% - 100rpx);
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				box-sizing: border-box;
				padding-left: 10rpx;

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