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.
291 lines
5.7 KiB
291 lines
5.7 KiB
<template>
|
|
<view class="page">
|
|
<view class="flex-rowl tab">
|
|
<view class="size-28 color-ffb fw700 tab-item">
|
|
全部记录
|
|
</view>
|
|
</view>
|
|
<view v-if="list.length">
|
|
<view class="box" v-for="item in list" :key="item.id">
|
|
<view class="flex-rowl box-top">
|
|
<up-avatar :src="userInfo.userImage" size="126rpx"></up-avatar>
|
|
<view class="box-info">
|
|
<view class="row highlight">{{ userInfo.userName }}</view>
|
|
<view class="row">{{ `服务时间：${dayjs(item.createTime).format('YYYY-MM-DD')}` }}</view>
|
|
<view class="row">{{ `宠物：${getTypeDesc(item.typeIds)}` }}</view>
|
|
</view>
|
|
<view class="box-address">
|
|
<text>{{ item.serviceSpot }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="box-text">
|
|
{{ item.text }}
|
|
</view>
|
|
<view class="box-img">
|
|
<view
|
|
class="box-img-item"
|
|
v-for="(url, imgIdx) in item.images"
|
|
:key="`${item.id}-img-${imgIdx}`"
|
|
>
|
|
<up-image
|
|
:src="url"
|
|
:show-loading="true"
|
|
width="154rpx"
|
|
height="164rpx"
|
|
></up-image>
|
|
</view>
|
|
</view>
|
|
<view class="flex-rowr box-tools">
|
|
<button plain class="box-btn" @click="onEdit(item.id)">
|
|
<view class="flex-rowc">
|
|
<up-icon name="edit-pen" color="#707070" size="22rpx"></up-icon>
|
|
<text>编辑</text>
|
|
</view>
|
|
</button>
|
|
<button plain class="box-btn" @click="onDelete(item.id)">
|
|
<view class="flex-rowc">
|
|
<up-icon name="trash" color="#707070" size="22rpx"></up-icon>
|
|
<text>删除</text>
|
|
</view>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="flex-rowc">
|
|
<image class="img-empty" src="@/static/images/ydd/empy.png" mode="widthFix"></image>
|
|
</view>
|
|
|
|
<up-modal
|
|
:show="deleteModal.show"
|
|
:showConfirmButton="false"
|
|
:showCancelButton="false"
|
|
>
|
|
<view class="modal">
|
|
<view class="modal-content">确定要删除该条服务信息吗？</view>
|
|
<view>
|
|
<button plain class="modal-btn modal-btn-cancel" @click="onCancelDelete">取消</button>
|
|
<button plain class="modal-btn modal-btn-confirm" @click="onConfirmDelete">确定</button>
|
|
</view>
|
|
</view>
|
|
</up-modal>
|
|
|
|
<view class="footer-btn">
|
|
<view class="btn" @click="toUp">
|
|
立即上传
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, computed } from 'vue'
|
|
import { useStore } from 'vuex'
|
|
import { onShow, onLoad } from '@dcloudio/uni-app'
|
|
import { serviceLogList, deleteServiceLog } from '@/api/serviceLog'
|
|
import dayjs from 'dayjs'
|
|
|
|
const store = useStore()
|
|
|
|
const userInfo = computed(() => {
|
|
return store.getters.userInfo
|
|
})
|
|
|
|
const petTypeOptions = computed(() => {
|
|
return store.getters.petTypeOptions
|
|
})
|
|
const getTypeDesc = (typeIds) => {
|
|
if (!typeIds.length) {
|
|
return ''
|
|
}
|
|
|
|
let descArr = typeIds.map(typeId => {
|
|
return petTypeOptions.value.find(item => item.id == typeId)?.title || typeId
|
|
})
|
|
|
|
return descArr.join('、')
|
|
}
|
|
|
|
const list = ref([])
|
|
|
|
const fetchLogList = async () => {
|
|
try {
|
|
list.value = await serviceLogList({ userId: store.getters.userInfo.userId })
|
|
} catch (err) {
|
|
|
|
}
|
|
}
|
|
|
|
const onEdit = (id) => {
|
|
uni.setStorageSync('serviceLogData', list.value.find(item => item.id === id))
|
|
|
|
uni.navigateTo({
|
|
url: `/otherPages/authentication/serve/upload?id=${id}`
|
|
})
|
|
}
|
|
|
|
|
|
const deleteModal = reactive({
|
|
show: false,
|
|
id: null,
|
|
})
|
|
const onDelete = (id) => {
|
|
deleteModal.id = id
|
|
deleteModal.show = true
|
|
}
|
|
const onCancelDelete = () => {
|
|
deleteModal.show = false
|
|
}
|
|
const onConfirmDelete = async () => {
|
|
|
|
try {
|
|
await deleteServiceLog({ id: deleteModal.id })
|
|
fetchLogList()
|
|
deleteModal.show = false
|
|
} catch (err) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const toUp = () => {
|
|
uni.navigateTo({
|
|
url: "/otherPages/authentication/serve/upload"
|
|
})
|
|
}
|
|
|
|
onShow(async () => {
|
|
await store.dispatch('fetchPetTypeOptions')
|
|
fetchLogList()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
min-height: 100vh;
|
|
background-color: #F5F5F5;
|
|
|
|
}
|
|
|
|
.tab {
|
|
padding: 9rpx 28rpx 16rpx 28rpx;
|
|
background-color: #fff;
|
|
|
|
&-item {
|
|
padding-bottom: 9rpx;
|
|
border-bottom: 4rpx solid #FFBF60;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
margin-top: 6rpx;
|
|
padding: 34rpx 43rpx 16rpx 28rpx;
|
|
background-color: #fff;
|
|
|
|
.img__view {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
&-top {
|
|
align-items: start;
|
|
}
|
|
|
|
&-info {
|
|
flex: 1;
|
|
padding: 0 20rpx;
|
|
color: rgba($color: #000000, $alpha: 0.5);
|
|
font-size: 28rpx;
|
|
line-height: 37rpx;
|
|
|
|
.highlight {
|
|
color: #000000;
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.row + .row {
|
|
margin-top: 6rpx;
|
|
}
|
|
}
|
|
|
|
&-address {
|
|
max-width: 200rpx;
|
|
text-align: right;
|
|
color: #FFBF60;
|
|
font-size: 28rpx;
|
|
line-height: 37rpx;
|
|
}
|
|
|
|
&-text {
|
|
padding: 21rpx 32rpx 18rpx 16rpx;
|
|
color: #000000;
|
|
font-size: 30rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
&-img {
|
|
&-item {
|
|
display: inline-block;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 16rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
&-btn {
|
|
display: inline-block;
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
color: #707070;
|
|
font-size: 22rpx;
|
|
line-height: 29rpx;
|
|
|
|
& + & {
|
|
margin-left: 44rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.img-empty {
|
|
width: 250rpx;
|
|
margin-top: 20vh;
|
|
}
|
|
|
|
.modal {
|
|
&-content {
|
|
text-align: center;
|
|
color: #000000;
|
|
font-size: 30rpx;
|
|
line-height: 40rpx;
|
|
margin-bottom: 35rpx;
|
|
}
|
|
|
|
&-btn {
|
|
display: inline-block;
|
|
padding: 20rpx 89rpx;
|
|
border: none;
|
|
margin: 0;
|
|
width: auto;
|
|
height: auto;
|
|
font-size: 30rpx;
|
|
line-height: 40rpx;
|
|
border-radius: 40rpx;
|
|
|
|
& + & {
|
|
margin-left: 25rpx;
|
|
}
|
|
|
|
&-cancel {
|
|
background-color: #FFF4E6;
|
|
color: #FFBF60;
|
|
}
|
|
|
|
&-confirm {
|
|
background-color: #FFBF60;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
</style>
|