fangliaoxiaochengxv/components/AddressItem.vue

<template>
	<view class="address-item" @click="toSaveAddress">
		<view class="address-item-top display-flex-center">
			<!-- <image :src="`${$getImgBaseUrl()}icon-address.png`" mode="aspectFill"
				style="width: 64rpx;height: 64rpx;flex-shrink: 0;margin-right: 24rpx;"></image> -->
			<view class="top-info">
				<view class="title color-23 display-flex-center">
					<u-icon name="account-fill" color="#CACACA" size="15"></u-icon>
					<text class="fs15 fw600 ml5">{{itemData.name}}</text>
				</view>
				<view class="display-flex-center color-23 mt10 mb10">
					<u-icon name="phone-fill" color="#CACACA" size="15"></u-icon>
					<text class="ml5">{{itemData.phone}}</text>
				</view>
				<view class="fs12 color-5f display-flex">
					<u-icon name="map-fill" color="#CACACA" size="15"></u-icon>
					<text class="ml5">{{addressDisplay}}</text>
				</view>
			</view>
		</view>
		<view class="address-item-bottom display-flex-between">
			<u-switch @click.stop="" @change="statusChange" :loading="loading" :activeValue="1" :inactiveValue="0"
				v-model="itemData.type" size="20" active-color="#F39800" inactive-color="#DCDCDC"></u-switch>
			<view class="operate-item display-flex-center">
				<view @click.stop="toEdit">
					<u1-icon name="edit-pen"></u1-icon>
					<text>编辑</text>
				</view>
				<view class="color-del ml28" @click.stop="deleteItem">
					<u1-icon name="trash" color="#FF4E4A"></u1-icon>
					<text>删除</text>
				</view>
			</view>
		</view>
		<!-- 删除确认 -->
		<u-modal :show="show" showCancelButton @cancel="show= false" @close="show=false" @confirm="confirm"
			:asyncClose="true" title="删除" content='确认删除吗'></u-modal>
	</view>
</template>

<script>
	export default {
		name: "AddressItem",
		props: {
			itemData: {
				type: Object,
				default: () => {
					return {}
				}
			},
			isBack: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				loading: false,
				show: false,
			};
		},
		watch: {
			'itemData.type'(nv, ov) {
				console.log(8999, nv, ov)
				
			}
		},
		computed: {
			addressDisplay() {
				const {
					province,
					city,
					area,
					address
				} = this.itemData
				return province + city + area + address || ''
			}
		},
		methods: {
			statusChange(data) {
				console.log(8999, data)
				this.loading = true
				const {
					code
				} = this.itemData
				this.$api.updateAddress(this.itemData).then(res => {
					this.loading = false
					this.$emit('refresh')
					// if (res.code != 1) {
					// 	this.itemData.type = nv || 0
					// }
				}).catch(() => {
					// this.loading = false
					// this.itemData.type = nv || 0
				})
			},
			toSaveAddress() {
				console.log(1222, this.isBack)
				if (!this.isBack) {
					// this.toEdit()
					return
				}
				uni.setStorageSync('selectAddress', JSON.stringify(this.itemData))
				uni.navigateBack()
			},
			toEdit() {
				uni.navigateTo({
					url: '/subPages/addAddress/addAddress?code=' + this.itemData.code
				})
			},
			deleteItem() {
				this.show = true
			},
			confirm() {
				uni.showLoading();
				this.$api.deleteAddress({
					code: this.itemData.code
				}).then(res => {
					uni.hideLoading()
					this.show = false
					if (res.code === 1) {
						uni.showToast({
							title: '删除成功'
						})
						this.$emit('refresh')
					} else {
						uni.showToast({
							title: '删除失败'
						})
					}
				}).catch(() => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-item {
		background: #FFFFFF;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		padding: 15rpx 0 24rpx;
		margin-bottom: 20rpx;

		&-top {
			padding: 0 24rpx 24rpx;
			border-bottom: 2rpx solid #F4F4F4;
			margin-bottom: 24rpx;
		}

		&-bottom {
			padding: 0 34rpx;
		}
	}
</style>