38 lines
1.3 KiB
Vue
38 lines
1.3 KiB
Vue
<template>
|
||
<div class="info-item">
|
||
<div class="title-info">
|
||
<svg-icon name="home-work"/>
|
||
<span class="sub-title">成果展示</span>
|
||
</div>
|
||
|
||
<div v-if="foodStore.currentFoodRecipe.recordList.length > 0" class="info record-info">
|
||
<el-timeline>
|
||
<el-timeline-item v-for="(item, index) in foodStore.currentFoodRecipe.recordList"
|
||
:key="index" :timestamp="item.date" placement="top">
|
||
<el-card class="record-card">
|
||
<span class="record-content">完成人：{{ item.person }}</span>
|
||
<el-image v-if="item.imageUrl"
|
||
:src="`${item.imageUrl}${ThumbImageQuery}`" fit="cover" alt="暂无图片"
|
||
@click="viewImageClick(item)" class="record-image"/>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
<el-empty v-else description="暂无成果"/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useFoodStore } from '@/store/food.ts'
|
||
import { ThumbImageQuery } from '@/utils'
|
||
import { SvgIcon } from 'vue3-common'
|
||
import { IFoodRecord } from '@/types/food.ts'
|
||
import { showImagePreview } from 'vant'
|
||
|
||
const foodStore = useFoodStore()
|
||
|
||
const viewImageClick = (item: IFoodRecord) => {
|
||
showImagePreview({ images: [item.imageUrl], closeable: true })
|
||
}
|
||
</script>
|