drink-answer-wechat-uniapp-24-9-2/pages_order/components/address/addressList.vue

<template>
	<uv-radio-group v-model="selectAddress">
		<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.defaultId == '1'" 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 @click="editDefault(item)" 
					: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.id)" 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>
</template>

<script>
	export default {
		props : {
			controls : {
				default : false,
				type : Boolean,
			},
			addressList : {
				default : [],
				type : Array,
			}
		},
		data() {
			return {
				selectAddress : 0,
			}
		},
		methods: {
			// 删除地址
			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>