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

<template>
	<view class="items">
		<view class="item-top" @click="choiceAddress">
			<view class="user-info">
				<view class="user-name">{{ item.address_realname }}</view>
				<view class="user-pnone">{{ item.address_mob_phone | phoneFormat }}</view>
			</view>
			<view class="user-address u-line-2">{{ $u.trim(item.area_info + item.address_detail, 'all') }}</view>
		</view>
		<view class="item-bottom">
			<view class="item-default">
				<u-radio 
					:name="item.address_id" 
					shape="circle"
					label-size="22"
					:disabled="false"
				>
					<view :class="[item.address_is_default == '0' ? 'radio-others' : 'radio-default']">
						{{ item.address_is_default == '0' ? '设为默认' : '已设为默认' }}
					</view>
				</u-radio>
			</view>
			<view class="address-operate">
				<view @click="editAddress">
					<image src="@/pageE/static/mine/24.png"></image>
					<view>编辑</view>
				</view>
				<view @click="deleteAddress">
					<image src="@/pageE/static/mine/25.png"></image>
					<view>删除</view>
				</view>
			</view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>
<script>
/**
 * address
 * @description 地址
 * @property {Object} item 地址信息
 * @property {String} state 是否选择地址 choise
 */
export default {
	name: 'address-item',
	props: ['item', 'current', 'state'],
	filters: {
		phoneFormat(value) {
			return value.replace(/^(\d{3})\d*(\d{4})$/, '$1****$2');
		}
	},
	methods: {
		editAddress() {
			this.$u.route({
				type: 'redirect',
				url: '/pageE/more/EditAddress',
				params: {
					item: JSON.stringify(this.item)
				}
			})
		},
		deleteAddress() {
			// console.log(this.item.address_id);
			this.$u.api.deleteAddress({
				address_id: this.item.address_id
			}).then((res)=>{
				if(res.errCode == 0) {
					this.showToast(res.message, 'success');
					this.$emit('getAddressList');
				} else {
					this.showToast(res.message, 'error');
				}
			})
		},
		choiceAddress() {
			if(this.state) {
				this.$store.commit('updateAddress', this.item);
				this.$u.route({
					type: 'navigateBack',
					url: '/pageC/cart/ConfirmOrder',
				})
			}
		},
		showToast(message, type) {
			this.$refs.uToast.show({
				title: message,
				type: type,
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.items {
	padding: 1rpx 0 0;
	.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);
			line-height: 32rpx;
		}
	}
	.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;
					}
				}
			}
		}
	}
}
</style>