zyejMAll-mobile/sheep/components/s-address-item/s-address-item.vue

<!-- 地址卡片 -->
<template>
	<view class="address-item ss-flex ss-row-between ss-col-center"
		:class="[{ 'border-bottom': props.hasBorderBottom }]">
		<image class="imgs"
			src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/0f01dda22fb349c40c4659d73cb346a1423fee44c9d53eb07bdae1a1e11b5299.png">
		</image>
		<view class="item-left" v-if="!isEmpty(props.item)">
			<!-- <view class="area-text ss-flex ss-col-center">
				<uni-tag
				  class="ss-m-r-10"
				  size="small"
				  custom-style="background-color: var(--ui-BG-Main); border-color: var(--ui-BG-Main); color: #fff;"
				  v-if="props.item.defaultStatus"
				  text="默认"
				/>
				{{ props.item.areaName }}
			  </view> -->
			<view class="address-text">
				收货人：{{ props.item.name }} {{ props.item.mobile }}
			</view>
			<view class="person-text">收货地址： {{ props.item.areaName }} {{ props.item.detailAddress }}</view>
		</view>
		<view v-else>
			<view class="address-text ss-m-b-10">请选择收货地址</view>
		</view>
		<slot>
			<!-- <button class="ss-reset-button edit-btn" @tap.stop="onEdit">
				<view class="edit-icon ss-flex ss-row-center ss-col-center">
					<image
						:src="sheep.$url.static('https://zysc.fjptzykj.com/admin-api/infra/file/25/get/f6c484a459e843baeb729603ae221b6d3ab384b56c2d891ae53b0ee4205477a9.png')" />
				</view>
			</button> -->
		</slot>
		<view class="bottom">
			<view class="left" @click.stop="auto(props.item)">
				<view class="radio">
					<image class="img"
						v-if="props.item.defaultStatus"
						src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/1d07aff7a6a0a3a5f09ed68407bd4bb9c589b62dba04b23d61b7027453b2894e.png">
					</image>
				</view>设为默认
			</view>
			<view class='right'>
				<view class="edit-icon" @click.stop="onEdit">
					<image class="img"
						src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/82a9c12d309bf1a7f11e581ac31230e3847f2aaf2f31591b4d3aed7ee506ff54.png" />
					编辑
				</view>
				<view class="edit-icon" @click.stop="onDelete(props.item.id)">
					<image class="img"
						src="https://zysc.fjptzykj.com/admin-api/infra/file/25/get/efbc57f84ba2740666f17f3cfcd1b607af5e3c520eca27814e5cda11c9715494.png" />
					删除
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	/**
	 * 基础组件 - 地址卡片
	 *
	 * @param {String}  icon = _icon-edit    - icon
	 *
	 * @event {Function()} click			 - 点击
	 * @event {Function()} actionClick		 - 点击工具栏
	 *
	 * @slot 								 - 默认插槽
	 */
	import sheep from '@/sheep';
	import AddressApi from '@/sheep/api/member/address';
	import {
		isEmpty
	} from 'lodash';
	const emits = defineEmits(['cc']);
	const props = defineProps({
		item: {
			type: Object,
			default () {},
		},
		hasBorderBottom: {
			type: Boolean,
			defult: true,
		},
	});

	// 删除收货地址
	const onDelete = (id) => {
	  uni.showModal({
	    title: '提示',
	    content: '确认删除此收货地址吗？',
	    success: async function (res) {
	      if (!res.confirm) {
	        return;
	      }
	      const { code } = await AddressApi.deleteAddress(id);
	      if (code === 0) {
			emits("cc", "2222")
	      }
	    },
	  });
	};

	const onEdit = () => {
		sheep.$router.go('/pages/user/address/edit', {
			id: props.item.id,
		});
	};
	
	function auto(item){
		item.defaultStatus = !item.defaultStatus;
		AddressApi.updateAddress(item).then((res)=>{
			emits("cc", "2222")
		})
	}
</script>

<style lang="scss" scoped>
	.address-item {
		background: white;
		padding: 24rpx 30rpx;
		position: relative;
		flex-wrap: wrap;
		padding-bottom: 0;

		.bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin: 10px 0;

			.img {
				width: 20px;
				height: 20px;
				margin-right: 10px;
			}

			.left {
				display: flex;
				align-items: center;
				font-size: 15px;
				font-weight: 500;
				.radio {
					border: 1px solid #dddddd;
					border-radius: 50%;
					width: 20px;
					height: 20px;
					margin-right: 10px;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.edit-icon {
					display: flex;
					align-items: center;
					font-size: 15px;
					font-weight: 500;
					.img {
						margin-right: 5px;
					}

					&:first-child {
						margin-right: 20px;
					}
				}
			}
		}

		.imgs {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 2px;
		}

		.item-left {
			width: 100%;
			border-bottom: 1px solid #fafafa;
			padding: 6px 0;
			padding-bottom: 13px;
		}

		.area-text {
			font-size: 26rpx;
			font-weight: 400;
			color: $dark-9;
		}

		.address-text {
			font-size: 15px;
			font-weight: 600;
			color: #333333;
			line-height: 48rpx;
			margin-bottom: 8px;
		}

		.person-text {
			font-size: 15px;
			font-weight: 500;
			color: $dark-9;
		}
	}

	.edit-btn {
		width: 44rpx;
		height: 44rpx;
		background: $gray-f;
		border-radius: 50%;

		.edit-icon {
			width: 24rpx;
			height: 24rpx;
		}
	}

	image {
		width: 100%;
		height: 100%;
	}
</style>