deming/components/mine/address-block/address-item.vue

<template>
	<view class="address">
		<u-radio-group v-model="current" @change="changeDefault" size="29" active-color="#FF780F">
			<view v-for="(item, index) in addressList" :key="index" class="address-item">
				<view class="item-top">
					<view class="user-info">
						<view class="user-name">王先生</view>
						<view class="user-pnone">174****7492</view>
					</view>
					<view class="user-address">山东省临沂市兰山区金雀山街道巴啦啦小区三号楼101室</view>
				</view>
				<view class="item-bottom">
					<view class="item-default">
						<u-radio 
							:name="item" 
							shape="circle"
							label-size="22" 
						>
							<view :class="[item == current ? 'radio-default' : 'radio-others']">
								{{ item == current ? '已设为默认' : '设为默认' }}
							</view>
						</u-radio>
					</view>
					<view class="address-operate">
						<view @click="editAddress">
							<image src="@/pageE/static/mine/24.png"></image>
							<view>编辑</view>
						</view>
						<view>
							<image src="@/pageE/static/mine/25.png"></image>
							<view>删除</view>
						</view>
					</view>
				</view>
			</view>
		</u-radio-group>
		<view class="address-btn" @click="addAddress">添加地址</view>
	</view>
</template>
<script>
export default {
	name: 'address-item',
	data() {
		return {
			current: 0
		}
	},
	props: {
		addressList: Array
	},
	onLoad() {
		console.log(22)
	},
	methods: {
		editAddress() {
			uni.navigateTo({
				url: '/pageE/more/EditAddress'
			});
		},
		addAddress() {
			uni.navigateTo({
				url: '/pageE/more/AddAddress'
			});
		},
		changeDefault(event) {
			console.log(event)
			// this.current = event
		}
	},
}
</script>
<style lang="scss" scoped>
.address {
	padding: 1rpx 0 40rpx;
	.u-radio-group {
		display: block;
		.address-item {
			background-color: #ffffff;
			margin-bottom: 20rpx;
			padding: 30rpx;
			.item-top {
				position: relative;
				padding-bottom: 30rpx;
				&::after {
					content: "";
					position: absolute;
					width: 690rpx;
					height: 2rpx;
					background: rgba(241,241,241,1);
					bottom: 0;
					left: 50%;
					transform: translate(-50%,0);
				}
				.user-info {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
					.user-name {
						font-size: 32rpx;
						font-weight: 500;
						color: rgba(51,51,51,1);
						margin-right: 13rpx;
					}
					.user-pnone {
						font-size: 28rpx;
						color: rgba(51,51,51,1);
					}
				}
				.user-address {
					font-size: 26rpx;
					color: rgba(51,51,51,1);
				}
			}
			.item-bottom {
				padding-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item-default {
					display: flex;
					align-items: center;
					font-size: 22rpx;
					.radio-default {
						color: rgba(255,119,15,1);
					}
					.radio-others {
						color:rgba(153,153,153,1);
					}
				}
				.address-operate {
					display: flex;
					font-size: 24rpx;
					color: rgba(152,152,152,1);
					> view {
						display: flex;
						&:not(:last-child) {
							margin-right: 30rpx;
						}
						> image {
							margin-right: 15rpx;
							flex-shrink: 0;
						}
						&:first-child {
							> image {
								width: 23rpx;
								height: 23rpx;
							}
						}
						&:nth-child(2) {
							> image {
								width: 17rpx;
								height: 21rpx;
							}
						}
					}
				}
			}
		}
	}
	.address-btn {
		margin: 322rpx auto 0;
		width: 690rpx;
		height: 98rpx;
		background: rgba(255,119,15,1);
		border-radius: 49rpx;
		font-size: 36rpx;
		color: rgba(255,255,255,1);
		line-height: 98rpx;
		text-align: center;
	}
}
</style>