96 lines
3.0 KiB
Vue
96 lines
3.0 KiB
Vue
<template>
|
||
<view class="detail-page">
|
||
<uni-section class="mb-10" title="打卡详情" type="line"></uni-section>
|
||
|
||
<uni-card isShadow>
|
||
<view class="detail-row">
|
||
<text class="label">巡检点：</text>
|
||
<text class="value">{{ detail.inspectionPoint || '-' }}</text>
|
||
</view>
|
||
<view class="detail-row">
|
||
<text class="label">巡检人：</text>
|
||
<text class="value">{{ detail.inspectorUser || detail.inspectorName || '-' }}</text>
|
||
</view>
|
||
<view class="detail-row">
|
||
<text class="label">打卡时间：</text>
|
||
<text class="value">{{ formatDate(detail.inspectionTime) }}</text>
|
||
</view>
|
||
<view class="detail-row" v-if="detail.remark">
|
||
<text class="label">备注：</text>
|
||
<text class="value">{{ detail.remark }}</text>
|
||
</view>
|
||
|
||
<view v-if="images.length" class="img-group">
|
||
<image v-for="(img, idx) in images" :key="idx" :src="imageUrl(img)" mode="aspectFill" class="img" @click="previewImage(idx)" />
|
||
</view>
|
||
</uni-card>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getRecord } from '@/api/inspection/record.js'
|
||
import config from '@/config'
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: null,
|
||
detail: {},
|
||
images: []
|
||
}
|
||
},
|
||
onLoad(query) {
|
||
this.id = query.id
|
||
this.fetchDetail()
|
||
},
|
||
methods: {
|
||
async fetchDetail() {
|
||
if (!this.id) {
|
||
uni.showToast({ title: '缺少记录ID', icon: 'none' })
|
||
return
|
||
}
|
||
try {
|
||
const res = await getRecord(this.id)
|
||
this.detail = (res && res.data) ? res.data : {}
|
||
this.images = this.resolveImages(this.detail.inspectionImg || this.detail.clockInImg || this.detail.signImg)
|
||
} catch (e) {
|
||
console.error('fetch record detail error', e)
|
||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||
}
|
||
},
|
||
resolveImages(imgs) {
|
||
if (!imgs) return []
|
||
if (Array.isArray(imgs)) return imgs
|
||
if (typeof imgs === 'string') return imgs.split(',').filter(Boolean)
|
||
return []
|
||
},
|
||
imageUrl(path) {
|
||
if (!path) return ''
|
||
if (/^https?:\/\//.test(path)) return path
|
||
return `${config.baseUrl}${path.startsWith('/') ? path : '/' + path}`
|
||
},
|
||
previewImage(index = 0) {
|
||
if (!this.images.length) return
|
||
uni.previewImage({
|
||
current: index,
|
||
urls: this.images.map(this.imageUrl)
|
||
})
|
||
},
|
||
formatDate(dateStr) {
|
||
if (!dateStr) return '-'
|
||
const d = new Date(dateStr)
|
||
if (isNaN(d.getTime())) return dateStr
|
||
const pad = n => (n < 10 ? ('0' + n) : n)
|
||
return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.detail-page { padding: 10px; }
|
||
.detail-row { display: flex; margin-bottom: 8px; }
|
||
.label { color: #666; width: 80px; }
|
||
.value { color: #333; }
|
||
.img-group { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
|
||
.img { width: 100px; height: 100px; border-radius: 6px; background: #f5f5f5; }
|
||
</style> |