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

<template>
	<view class="page">
		<view class="tips flex-rowl">
			<image src="@/static/images/ydd/icon2.png" mode=""></image>
			<text class="color-ffb size-22 ml16">普通喂养员可设置3个接单地址，优选喂养员可设置5个接单地址</text>
		</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">
					{{ `接单范围：${item.distance}km` }}
				</view>
				<view class="content mt16">
					<view class="flex-between">
						<text class="size-22 color-999">不接单日期</text>
						<view class="flex-rowr">
							<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>
							{{ `共${item.disabledDate?.length}天：` }}
						</text>
						<text class="text-ellipsis" style="flex: 1;">
							{{ getDisabledDateDesc(item.disabledDate) }}
						</text>
					</view>
				</view>

				<view class="flex-between mt16">
					<view class="flex-rowl">
						<view class="color-ffb size-22">
							接单中
						</view>
						<switch checked="true" color="#FFBF60" style="transform: scale(0.6);" />
					</view>
					<view class="flex-rowr">
						<view 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 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>
</template>

<script setup>
	import { ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import dayjs from 'dayjs'
	import { getAddressList } from '@/api/address'
	
	const list = ref([])

	const fetchAddressList = async () => {
		try {
			// todo: 对接接口字段
			list.value = await getAddressList()

			console.log('--list', list.value)

		} catch (err) {
			
		}
	}

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

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

	const toAdd = () => {
		uni.navigateTo({
			url: "/otherPages/authentication/connectAddress/detail"
		})
	}
	
	onShow(() => {
		fetchAddressList()
	})


</script>

<style lang="scss" scoped>
	.page {
		.icon-empty {
			width: 259rpx;
			height: auto;
			margin-top: 240rpx;
		}
	}

	.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; //溢出不换行
	}
</style>