pet-front/otherPages/authentication/connectAddress/index.vue

<template>
	<view class="page">
		<view class="tips flex-rowl">
			<image :src="configList.top_adress.paramValueImage" mode=""></image>
			<view class="ml16">
				<up-parse :content="configList.my_information_statement.paramValueArea" containerStyle="{
          color: '#FFBF60',
          fontSize: '22rpx',
          lineHeight: '40rpx',
        }"></up-parse>
			</view>
		</view>

		<view v-if="list.length">
			<view class="li bg-fff" v-for="(item, index) in list" :key="`address-${index}`">
				<view class="size-30">
					{{ item.area }}
				</view>
				<view class="size-22 color-777 mt16" v-if="item.rangeNo">
					{{ `接单范围：${item.rangeNo}km` }}
				</view>
				<view class="size-22 color-777 mt16" v-else>
					接单范围：未设置
				</view>
				<view class="content mt16">
					<view class="flex-between">
						<text class="size-22 color-999">不接单日期</text>
						<view class="flex-rowr" @click="settingDate(item)">
							<text class="size-22 color-ccc">修改</text>
							<image src="@/static/images/ydd/right.png" mode="widthFix" style="width: 20rpx;"></image>
						</view>
					</view>
					<view class="color-999 size-22 mt16 flex-rowl">
						<text v-if="item.appletOutDate">
							{{ `共${item.appletOutDate?.length}天：` }}
						</text>
						<text class="text-ellipsis" style="flex: 1;">
							{{ getDisabledDateDesc(item.appletOutDate) }}
						</text>
					</view>
				</view>

				<!-- :style="{color : item.status == 'true' ? '#FFBF60' : '#333'}" -->
				
				<view class="flex-between mt16">
					<view class="flex-rowl">
						<view class="color-ffb size-22"
						:class="{
							'switchAddress-a' : item.status == 'true',
							'switchAddress-b' : item.status != 'true'
						}"
						>
							{{ item.status == 'true' ? '接单中' : '不接单' }}
						</view>
						<switch :checked="item.status == 'true'" color="#FFBF60" style="transform: scale(0.6);" 
						@click="switchAddress(item)"/>
					</view>
					<view class="flex-rowr">
						<view @click="toAdd(item)" class="flex-rowl">
							<image src="@/static/images/ydd/edit.png" mode="widthFix" style="width: 20rpx;"></image>
							<text class="size-22 color-777 ml10">编辑</text>
						</view>
						<view @click="clickDelHandle(item.id)" class="flex-rowl" style="margin-left: 50rpx;">
							<image src="@/static/images/ydd/cancel.png" mode="widthFix" style="width: 20rpx;"></image>
							<text class="size-22 color-777 ml10">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="flex-rowc">
			<image class="icon-empty" src="../static/connectAddress/icon-empty.png" mode="widthFix"></image>
		</view>

		<view class="footer-btn">
			<view class="btn" @click="toAdd()">
				新增接单地址
			</view>
		</view>
	</view>

	<Modal @confirm="confirmDel" @cancel="cancel" ref="modal">
		<template>
			<view class="tip">
				确认要删除此地址?
			</view>
		</template>
	</Modal>
    <!-- 客服组件 -->
    <CustomerService />
</template>

<script setup>
	import {
		ref,
		computed,
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import dayjs from 'dayjs'
	import {
		getAddressList,
		deleteAddress
	} from "@/api/address/address.js"
	import Modal from "@/components/Modal/index.vue"
	import { useStore } from 'vuex'
	import {
		insertAddress,
		udpateAddress
	} from "@/api/address/address.js"
	
	const store = useStore();
	const configList = computed(() => {
		return store.getters.configList
	})
	const userInfo = computed(() => {
		return store.getters.userInfo;
	})

	const list = ref([])
	const modal = ref(null)
	const deleteId = ref(null);

	const fetchAddressList = async () => {
		try {
			let response = await getAddressList({
				userId : userInfo.value.userId
			});
			list.value = response.data || []
		} catch (err) {

		}
	}
	
	function switchAddress(item){
		item.status = item.status == 'true' ? 'false' : 'true'
		onSave(item)
	}
	
	const onSave = async (item) => {
		let code = null;
		let result = await udpateAddress({
			...item
		})
		code = result.code
	}

	const getDisabledDateDesc = (dateArr) => {
		if (!dateArr?.length) {
			return '暂无不可接单日期'
		}

		return dateArr.map(date => dayjs(date.date).format('MM-DD')).join('、')
	}

	const toAdd = (item) => {
		console.log("item")
		console.log(item)
		if (item) {
			console.log("item")
			console.log(item)
			if(item !== undefined){
				uni.navigateTo({
					url: `/otherPages/authentication/connectAddress/detail?addressId=${item.id}`
				})
			}else{
				uni.navigateTo({
					url: '/otherPages/authentication/connectAddress/detail'
				})
			}
			
		} else {
			uni.navigateTo({
				url: '/otherPages/authentication/connectAddress/detail'
			})
		}
	}

	const fetchDeleteAddress = async () => {
		let response = await deleteAddress({
			id: deleteId.value
		});
		if (response.code == 200) {
			uni.showToast({
				title: '删除成功!',
				icon: "none"
			})
			fetchAddressList()
		}
	}

	onShow(() => {
		fetchAddressList()
	})

	const clickDelHandle = (delId) => {
		modal.value.open();
		deleteId.value = delId;
	}
	
	function settingDate(item){
		uni.navigateTo({
			url: '/otherPages/myOrdersManage/date/detail?addressId=' + item.id
		})
	}

	const cancelDel = () => {
		// 取消删除回调
	}

	const confirmDel = () => {
		fetchDeleteAddress();
	}
</script>

<style lang="scss" scoped>
	.page {
		.icon-empty {
			width: 259rpx;
			height: auto;
			margin-top: 240rpx;
		}
		.switchAddress-a{
			background-color: #FFBF6022;
			color: #FFBF60;
			padding: 10rpx 20rpx;
			border-radius: 14rpx;
		}
		.switchAddress-b{
			background-color: #33333312;
			color: #555;
			padding: 10rpx 20rpx;
			border-radius: 14rpx;
		}
	}

	.content {
		background-color: #F3F3F3;
		border-radius: 20rpx;
		padding: 24rpx;
	}

	.li {
		margin: 16rpx 24rpx 0 24rpx;
		border-radius: 20rpx;
		padding: 24rpx;
	}

	.tips {
		padding: 10rpx 32rpx;
		background-color: rgb(255, 250, 242);

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.text-ellipsis {
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		white-space: nowrap; //溢出不换行
	}

	.tip {
		text-align: center;
		padding: 25rpx 0rpx;
	}
</style>