146 lines
4.0 KiB
Vue
146 lines
4.0 KiB
Vue
<template>
|
||
<view class="my-reports-page">
|
||
<!-- 导航栏 -->
|
||
<view class="nav-bar">
|
||
<text class="nav-back" @click="goBack">‹</text>
|
||
<text class="nav-title">我的报告</text>
|
||
<view style="width:40px;"></view>
|
||
</view>
|
||
|
||
<!-- 网格相册 -->
|
||
<view v-if="reportList.length > 0" class="gallery-grid">
|
||
<view
|
||
v-for="r in reportList"
|
||
:key="r.id"
|
||
class="gallery-item"
|
||
@click="viewReport(r)"
|
||
>
|
||
<view class="gallery-cover">
|
||
<image
|
||
v-if="r.beforePhoto"
|
||
:src="imgUrl(r.beforePhoto)"
|
||
class="cover-img"
|
||
mode="aspectFill"
|
||
/>
|
||
<view v-else class="cover-placeholder">
|
||
<text style="font-size:32px;">📷</text>
|
||
</view>
|
||
<!-- 叠加信息 -->
|
||
<view class="gallery-overlay">
|
||
<text class="overlay-name">🐾 {{ r.petName }}</text>
|
||
<text class="overlay-service">{{ serviceEmoji(r.serviceType) }} {{ r.serviceType }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="!loading && reportList.length === 0" class="empty-wrap">
|
||
<text class="empty-icon">📋</text>
|
||
<text class="empty-text">暂无报告</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { getReportList, imgUrl } from '../../../utils/api.js'
|
||
|
||
const userInfo = JSON.parse(uni.getStorageSync('petstore_user') || '{}')
|
||
const storeInfo = JSON.parse(uni.getStorageSync('petstore_store') || '{}')
|
||
const loading = ref(false)
|
||
const reportList = ref([])
|
||
|
||
const goBack = () => uni.navigateBack()
|
||
|
||
const serviceEmoji = (name) => {
|
||
if (!name) return ''
|
||
if (name.includes('洗澡') && name.includes('美容')) return '🛁✂️'
|
||
if (name.includes('洗澡')) return '🛁'
|
||
if (name.includes('美容')) return '✂️'
|
||
if (name.includes('剪指甲')) return '💅'
|
||
if (name.includes('驱虫')) return '🐛'
|
||
return '✨'
|
||
}
|
||
|
||
const loadReports = async () => {
|
||
loading.value = true
|
||
const params = userInfo.role === 'boss'
|
||
? { storeId: storeInfo.id }
|
||
: { userId: userInfo.id }
|
||
const res = await getReportList(params)
|
||
loading.value = false
|
||
if (res.code === 200) reportList.value = res.data
|
||
}
|
||
|
||
const viewReport = (r) => {
|
||
// #ifdef MP-WEIXIN
|
||
const url = `/pages/report-view/reportView?token=${r.reportToken}`
|
||
// #endif
|
||
// #ifdef H5
|
||
const url = `/pages/report-view/reportView?token=${r.reportToken}`
|
||
// #endif
|
||
uni.navigateTo({ url })
|
||
}
|
||
|
||
onMounted(() => loadReports())
|
||
</script>
|
||
|
||
<style scoped>
|
||
.my-reports-page { padding: 0 12px 20px; background: #f5f5f5; min-height: 100vh; }
|
||
.nav-bar {
|
||
background: #fff;
|
||
padding: 40px 16px 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
margin-bottom: 12px;
|
||
}
|
||
.nav-back { font-size: 28px; color: #333; font-weight: 300; }
|
||
.nav-title { font-size: 16px; font-weight: 600; color: #333; }
|
||
|
||
.gallery-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10px;
|
||
padding-top: 4px;
|
||
}
|
||
.gallery-item {
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
background: #fff;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
}
|
||
.gallery-cover {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 1;
|
||
overflow: hidden;
|
||
}
|
||
.cover-img { width: 100%; height: 100%; }
|
||
.cover-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #f0ede8;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.gallery-overlay {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 8px 10px;
|
||
background: linear-gradient(transparent, rgba(0,0,0,0.65));
|
||
color: #fff;
|
||
}
|
||
.overlay-name { font-size: 13px; font-weight: 600; display: block; }
|
||
.overlay-service { font-size: 11px; opacity: 0.9; margin-top: 2px; display: block; }
|
||
|
||
.empty-wrap { display: flex; flex-direction: column; align-items: center; padding: 80px 0; }
|
||
.empty-icon { font-size: 60px; }
|
||
.empty-text { font-size: 14px; color: #999; margin-top: 12px; }
|
||
</style>
|