You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
3.8 KiB
162 lines
3.8 KiB
<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="item.status" color="#FFBF60" style="transform: scale(0.6);" />
|
|
</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="fetchDeleteAddress(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>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
import {
|
|
onShow
|
|
} from '@dcloudio/uni-app'
|
|
import dayjs from 'dayjs'
|
|
import {
|
|
getAddressList,
|
|
deleteAddress
|
|
} from "@/api/address/address.js"
|
|
|
|
const list = ref([])
|
|
|
|
const fetchAddressList = async () => {
|
|
try {
|
|
let response = await getAddressList();
|
|
list.value = response.data || []
|
|
} catch (err) {
|
|
|
|
}
|
|
}
|
|
|
|
const getDisabledDateDesc = (dateArr) => {
|
|
if (!dateArr?.length) {
|
|
return '暂无不可接单日期'
|
|
}
|
|
|
|
return dateArr.map(date => dayjs(date).format('MM-DD')).join('、')
|
|
}
|
|
|
|
const toAdd = (item) => {
|
|
if(item) {
|
|
uni.navigateTo({
|
|
url: `/otherPages/authentication/connectAddress/detail?item=${JSON.stringify(item)}`
|
|
})
|
|
}else {
|
|
uni.navigateTo({
|
|
url: '/otherPages/authentication/connectAddress/detail'
|
|
})
|
|
}
|
|
}
|
|
|
|
const fetchDeleteAddress = async (id) => {
|
|
let response = await deleteAddress({ id });
|
|
if(response.code == 200) {
|
|
uni.showToast({
|
|
title: '删除成功!',
|
|
icon: "none"
|
|
})
|
|
fetchAddressList()
|
|
}
|
|
}
|
|
|
|
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>
|