猫妈狗爸伴宠师小程序前端代码
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.
 
 
 
 

257 lines
5.8 KiB

<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>
</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) => {
if (item) {
uni.navigateTo({
url: `/otherPages/authentication/connectAddress/detail?addressId=${item.id}`
})
} 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>