mdyxgj/packageA/resourceLibrary/detail.vue

<template>
    <view>
        <block v-if="detail.typestr == '图片' && painter.imageUrl" style="">
            <l-painter ref="painter" isCanvasToTempFilePath hidden :css="painter.css" @success="imageSuccess">
                <!-- 背景图片 -->
                <l-painter-image :src="painter.imageUrl" :css="painter.css" />
                <!-- 二维码 -->
                <l-painter-qrcode v-if="detail.isqrcode" :text="detail.qrcodecontent"
                    css="width: 84px; height: 84px;position: absolute;bottom: 24px;right:24px;z-index: 2;background:#fff;" />
            </l-painter>
        </block>

        <view class="orientation" />
        <view class="head" v-if="detail.candownload_c || detail.candownload">
            <view class="sendmail" hover-class="navigator-hover" @click="toEmailPage">
                <text class="iconfont icon-fayouxiang" />
                发送文件到邮箱
            </view>
            <view class="download" v-if="detail.type != 4" hover-class="navigator-hover" @click="download">
                <text class="iconfont icon-xiazai" />
                下载
            </view>
        </view>
        <!-- 图片和视频类型使用swiper -->
        <swiper v-if="detail.typestr == '图片' || detail.typestr == '视频'" class="swiper" :current="current"
            :style="{ height: tovw(height) }" @change="swiperChange">
            <swiper-item class="swipeout-item" v-for="(item, index) in detail.attinfos_pic" :key="item.attachmentid">
                <image v-if="detail.typestr == '图片'" class="image" :style="{ height: tovw(height - 47) }"
                    :src="item.cover" mode="aspectFit" lazy-load="true" @click="previewImage(index)" />
                <video :custom-cache="item.customCache" :id="'myVideo' + index" v-else-if="detail.typestr == '视频'"
                    class="image" :style="{ height: tovw(height - 47) }" :src="item.url" :poster="item.cover" />
                <view class="paging">
                    {{ index + 1 + '/' + detail.attinfos_pic.length }}
                </view>
            </swiper-item>
        </swiper>

        <!-- 文档类型使用列表显示 -->
        <scroll-view v-else-if="detail.typestr == '文档'" class="doc-list" :style="{ height: tovw(height) }"
            scroll-y="true">
            <view class="doc-item" v-for="(item, index) in detail.attinfos" :key="item.attachmentid"
                @click="openDoc(index)">
                <view class="doc-info">
                    <view class="doc-name">{{ item.document }}</view>
                </view>
            </view>
        </scroll-view>

        <view class="bottom">
            {{ detail.title }}
        </view>


    </view>
</template>

<script>
import lPainter from "../../uni_modules/lime-painter/components/l-painter/l-painter.vue"
import lPainterImage from "../../uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue"
import lPainterQrcode from "../../uni_modules/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue"
import { wxSaveFile } from "../../utils/settleFiles";
export default {
    components: { lPainter, lPainterImage, lPainterQrcode },
    data() {
        return {
            current: 0,
            sat_sharematerialid: 0,
            detail: { attinfos_pic: [], typestr: '' },
            height: 0,
            painter: { imageUrl: "" },
        }
    },
    onLoad(options) {
        this.sat_sharematerialid = options.id;
        this.getDetail();
    },

    methods: {
        getDetail() {
            this.$Http.basic({
                "id": 20240407094602,
                "content": {
                    "sat_sharematerialid": this.sat_sharematerialid
                }
            }).then(res => {
                console.log("装备资源库详情", res)
                if (this.cutoff(res.msg)) return;
                if (res.data.attinfos_pic.length == 0) {
                    res.data.attinfos_pic = res.data.attinfos.filter(v => {
                        return v.usetype != "avatar" && this.attinfosType(v.postfix) == res.data.typestr
                    }).map(v => {
                        return {
                            attinfos: [v]
                        }
                    })
                }

                res.data.attinfos_pic = res.data.attinfos_pic.map(v => {
                    if (res.data.typestr == '视频') {
                        v.cover = this.getSpecifiedImage(v.attinfos[0], "cover")
                        v = this.getVideoUrl(v.attinfos[0])
                    } else {
                        v.cover = this.getSpecifiedImage(v.attinfos[0], "compressed")
                    }
                    return v
                })
                this.detail = res.data;
                this.setHeight();
                uni.setNavigationBarTitle({
                    title: res.data.title
                })
            })
        },
        toEmailPage() {
            uni.navigateTo({
                url: `/pages/email/index?type=resource&id=${this.detail.sat_sharematerialid}`
            });
            this.$Http.attinfos = this.detail.attinfos;
        },
        /* 设置组件高度 */
        setHeight() {
            this.getHeight(".orientation", this).then(res => {
                let info = uni.getSystemInfoSync(),
                    safeAreaBottom = info.screenHeight - info.safeArea.bottom;
                if (this.detail.candownload_c == 1) safeAreaBottom += 40;
                this.height = res - safeAreaBottom - 40
            });
        },
        swiperChange(e) {
            uni.createVideoContext('myVideo' + this.current).pause()
            this.current = e.detail.current;
        },
        download() {
            let that = this,
                file = that.detail.attinfos_pic[that.current].attinfos[0];
            uni.showModal({
                title: '提示',
                content: `是否确定将当前${this.detail.typestr}保存到相册`,
                success: ({ confirm }) => {
                    if (confirm) {
                        if (that.detail.typestr == '视频') {
                            wxSaveFile(file)
                        } else {
                            uni.getImageInfo({
                                src: file.url,
                                success: res => {
                                    console.log("getImageInfo", res)
                                    let upperLimit = 4080;
                                    if (uni.getSystemInfoSync().platform == 'ios') upperLimit = 1360;
                                    let arr = [res.width, res.height];
                                    let maxNum = Math.max(...arr);
                                    if (maxNum > upperLimit) {
                                        let MP = (maxNum / upperLimit).toFixed(2);
                                        console.log("缩小倍率", MP)
                                        res.width = res.width / MP;
                                        res.height = res.height / MP;
                                    }
                                    that.painter = {
                                        imageUrl: file.url,
                                        css: `position: relative;width: ${res.width}px; height: ${res.height}px;object-fit:cover;`
                                    }
                                    console.log("that.painter", that.painter)
                                }
                            })
                        }
                    }
                },
            })
        },
        imageSuccess() {
            let that = this;
            that.$refs.painter.canvasToTempFilePathSync({
                fileType: "jpg",
                // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
                pathType: 'url',
                quality: 1,
                success: (res) => {
                    console.log(res.tempFilePath);
                    // 非H5 保存到相册
                    // H5 提示用户长按图另存
                    uni.saveImageToPhotosAlbum({
                        filePath: res.tempFilePath,
                        success: function (e) {
                            uni.showModal({
                                title: '提示',
                                content: '图片已保存到系统相册',
                                showCancel: false
                            })
                            that.loading = false;
                            that.$Http.basic({
                                "id": 20240319142702,
                                "content": {
                                    sat_sharematerialid: that.detail.sat_sharematerialid, type: 1
                                }
                            }).then(res => {
                                console.log(type, '记录', res)
                            })

                        },
                        fail: ({ errMsg }) => {
                            if (errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
                                uni.showModal({
                                    title: '提示',
                                    content: '请授权添加到相册权限后再试！',
                                    showCancel: false,
                                    complete: (complete) => {
                                        uni.openSetting({
                                            success: res => {
                                                that.loading = false;
                                                if (res.authSetting['scope.writePhotosAlbum']) {
                                                    this.saveTheImage()
                                                } else {
                                                    uni.showModal({
                                                        title: '提示',
                                                        content: '未获取授权！已取消保存',
                                                        showCancel: false,
                                                    })
                                                }
                                            }
                                        })
                                    },
                                })
                            } else {
                                that.loading = false;
                                uni.showModal({
                                    title: '提示',
                                    content: '已取消保存',
                                    showCancel: false,
                                })
                            }
                        },
                    });
                },
            });
        },
        /* 预览图片 */
        previewImage(index) {
            const urls = this.detail.attinfos_pic.map(item => item.cover);
            uni.previewImage({
                urls: urls,
                current: index,
                success: () => {
                    console.log('预览图片成功');
                },
                fail: (err) => {
                    console.error('预览图片失败', err);
                    uni.showToast({
                        title: '预览失败',
                        icon: 'none'
                    });
                }
            });
        },
        /* 打开文档 */
        openDoc(index) {
            let file = this.detail.attinfos[index];
            const filename = file.filename || file.document || '';
            const fileType = this.getFileExtension(filename);

            // uni.openDocument 支持的文件类型
            const supportedFileTypes = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt'];

            if (!supportedFileTypes.includes(fileType)) {
                uni.showToast({
                    title: '该文件类型暂不支持在线预览',
                    icon: 'none',
                });
                return;
            }

            uni.showLoading({
                title: '加载中...',
            });

            uni.downloadFile({
                url: file.url,
                success: (res) => {
                    uni.openDocument({
                        filePath: res.tempFilePath,
                        fileType: fileType,
                        success: () => {
                            uni.hideLoading();
                        },
                        fail: (err) => {
                            console.log("openDocument", err);
                            uni.hideLoading();
                            uni.showToast({
                                title: "读取失败,请稍后再试",
                                icon: "none",
                            });
                        },
                    });
                },
                fail: (err) => {
                    console.log("downloadFile", err);
                    uni.hideLoading();
                    uni.showToast({
                        title: "下载失败,请稍后再试",
                        icon: "none",
                    });
                },
            });
        },
        /* 获取文件扩展名 */
        getFileExtension(filename) {
            if (!filename) return '';
            let lastDotIndex = filename.lastIndexOf('.');
            return lastDotIndex !== -1 ? filename.substring(lastDotIndex + 1).toLowerCase() : '';
        }
    }
}
</script>

<style lang="scss" scoped>
.head {
    display: flex;
    justify-content: space-between;
    background: #333333;
    width: 100vw;
    height: 40px;

    .sendmail {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 160px;
        height: 40px;
        background: #C30D23;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;

        .iconfont {
            margin-right: 5px;
        }
    }

    .download {
        font-size: 12px;
        color: #FFFFFF;
        line-height: 40px;
        padding-right: 10px;

        .iconfont {
            margin-right: 5px;
        }
    }
}

.swiper {
    width: 100vw;
    background: #333333;

    .swipeout-item {
        width: 100%;
        height: 100%;

        .image {
            width: 100%;
        }

        .paging {
            width: 100vw;
            text-align: center;
            line-height: 17px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #FFFFFF;
            margin-top: 10px;
        }
    }

}

.doc-list {
    width: 100vw;
    background: #f5f5f5;
    padding: 10px;
    box-sizing: border-box;

    .doc-item {
        display: flex;
        align-items: center;
        background: #ffffff;
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 8px;

        .doc-icon {
            width: 50px;
            height: 50px;
            background: #E8F3FF;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;

            .iconfont {
                font-size: 24px;
                color: #1890FF;
            }
        }

        .doc-info {
            flex: 1;

            .doc-name {
                font-size: 14px;
                color: #333333;
                margin-bottom: 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .doc-type {
                font-size: 12px;
                color: #999999;
            }
        }

        .doc-arrow {
            .iconfont {
                font-size: 16px;
                color: #999999;
            }
        }
    }
}

.slot-content {
    width: 100%;
    text-align: center;

    .slot-title {
        height: 26px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: bold;
        font-size: 18px;
        color: #000000;
    }

    .slot-tips {
        line-height: 20px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #666666;
        margin-bottom: 30px;
        margin-top: 10px;
    }
}

.bottom {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 14px;
    color: #333333;
}
</style>