xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-12 12:13:46 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add image preview for mobile chat page

Browse Source
This commit is contained in:
RockYang
2024-02-26 18:11:37 +08:00
parent b95dff0751
commit 0181ad3715
6 changed files with 36 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/src/views/mobile/ImageMj.vue
View File

@@ -143,29 +143,16 @@
<van-grid :gutter="10" :column-num="2" v-else>
<van-grid-item v-for="item in finishedJobs">
<div class="job-item">
<el-image
<van-image
:src="item['thumb_url']"
:class="item['can_opt'] ? '' : 'upscale'" :zoom-rate="1.2"
:preview-src-list="[item['img_url']]" fit="cover" :initial-index="0"
loading="lazy" v-if="item.progress > 0">
<template #placeholder>
<div class="image-slot">
正在加载图片
</div>
:class="item['can_opt'] ? '' : 'upscale'"
lazy-load
@click="imageView(item)"
fit="cover">
<template v-slot:loading>
<van-loading type="spinner" size="20"/>
</template>
<template #error>
<div class="image-slot" v-if="item['img_url'] === ''">
<i class="iconfont icon-loading"></i>
<span>正在下载图片</span>
</div>
<div class="image-slot" v-else>
<el-icon>
<Picture/>
</el-icon>
</div>
</template>
</el-image>
</van-image>
<div class="opt" v-if="item['can_opt']">
@@ -205,7 +192,7 @@
<script setup>
import {onMounted, ref} from "vue";
import {showConfirmDialog, showFailToast, showNotify, showToast, showDialog} from "vant";
import {showConfirmDialog, showFailToast, showNotify, showToast, showDialog, showImagePreview} from "vant";
import {httpGet, httpPost} from "@/utils/http";
import Compressor from "compressorjs";
import {ElMessage} from "element-plus";
@@ -478,6 +465,10 @@ const showPrompt = (item) => {
});
}
const imageView = (item) => {
showImagePreview([item['img_url']]);
}
</script>
<style lang="stylus">