book-hi/pages-mine/components/address-card.vue

<template>
	<view class="address-card" :class="{ 'address-card--selected': selected }" @tap="handleClick">
		<!-- 选中状态的勾 -->
		<view class="selected-icon" v-if="selected">
			<u-icon name="checkmark" color="#FFFFFF" size="24"></u-icon>
		</view>

		<!-- 主要内容区 -->
		<view class="content flex-a">
			<image src="../static/adderss.png" style="width:40rpx;height: 40rpx;"></image>

			<view class="flex-1 mr-40 ml-24 flex-d">
				<view class="header flex-a flex-1 mb-24">
					<view class="name-phone">
						<text class="common-text-2">{{ address.name }}</text>
						<text class="common-text-2 ml-20">{{ address.mobile }}</text>
					</view>
					<view class="status ml-40" v-if="address.defaultFlag==1">默认</view>
				</view>
				<view class="common-text-2">{{ address.fullAddress }}</view>
			</view>

			<!-- 右侧箭头 -->
			<u-icon name="arrow-right" size="32" color="#999"></u-icon>
		</view>

		<!-- 底部操作区 -->
		<view class="footer flex-a flex-j-b">
			<view class="common-text-2">
				<u-checkbox v-model="isDefault" @change="onDefaultChange" shape="circle"
					active-color="#38C148">默认地址</u-checkbox>
			</view>
			<view class="common-text-2" @click.stop="onDelete">删除</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'address-item',
		props: {
			address: {
				type: Object,
				default: () => ({})
			},
			selected: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isDefault: false
			}
		},
		watch: {
			address: {
				handler(value) {
					this.isDefault = value.defaultFlag == 1
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			handleClick() {
				this.$emit('tapItem', this.address)
			},

			onDefaultChange(value) {
				if (this.address.defaultFlag == 1) return this.isDefault = true

				let id = this.address.id
				uni.$u.http.post(`/token/user/address/setDefault/${id}`).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: "none",
							title: "设置默认地址成功"
						})
						this.$emit('success')
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
						this.isDefault = false
					}
				})
			},
			onDelete() {
				this.$emit('delete', this.address.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-card {
		position: relative;
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		border: 2rpx solid transparent;
		transition: all 0.3s;
		margin-bottom: 20rpx;

		// 选中状态样式
		&--selected {
			border-color: #38C148;
			background-color: rgba(56, 193, 72, 0.05);
		}

		// 选中状态的勾
		.selected-icon {
			position: absolute;
			right: -2rpx;
			top: -2rpx;
			width: 40rpx;
			height: 40rpx;
			background-color: #38C148;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom-left-radius: 12rpx;
			border-top-right-radius: 12rpx;
		}



		.status {
			font-size: 24rpx;
			color: #38C148;
			padding: 4rpx 12rpx;
			border: 1px solid #38C148;
			border-radius: 6rpx;
		}


		.footer {
			margin-top: 20rpx;
			padding-top: 20rpx;
			border-top: 1rpx solid #EEEEEE;
		}
	}
</style>