YXGJ/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.qrcodecontent" :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">
            <view class="sendmail" hover-class="navigator-hover" @click="showUModal = true">
                <text class="iconfont icon-fayouxiang" />
                发送文件到邮箱
            </view>
            <view class="download" hover-class="navigator-hover" @click="download">
                <text class="iconfont icon-xiazai" />
                下载
            </view>
        </view>
        <swiper 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" />
                <video :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>
        <view class="bottom">
            {{ detail.title }}
        </view>
        <u-modal :show="showUModal" confirmColor='#C30D23' ref="uModal" showCancelButton :asyncClose="true"
            @confirm="onSend" @cancel="showUModal = false">
            <view class="slot-content">
                <view class="slot-title">
                    发送邮件
                </view>
                <view class="slot-tips">
                    文件将以邮件的形式发送到指定邮箱
                </view>
                <u--input :focus="showUModal" placeholder="请输入邮箱" v-model="eMail" border="bottom" clearable />
            </view>
        </u-modal>

    </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 { viewMedias, wxSaveFile } from "../../utils/settleFiles";
export default {
    components: { lPainter, lPainterImage, lPainterQrcode },
    data() {
        return {
            current: 0,
            sat_sharematerialid: 0,
            detail: { attinfos_pic: [], typestr: '' },
            height: 0,
            showUModal: false,
            eMail: "",
            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;

                res.data.attinfos_pic = res.data.attinfos_pic.map(v => {
                    if (res.data.typestr == '视频') {
                        v.cover = this.getSpecifiedImage(v.attinfos[0], "cover")
                        v.url = this.getSpecifiedImage(v.attinfos[0], "hls")
                    } else {
                        v.cover = this.getSpecifiedImage(v.attinfos[0])
                    }
                    return v
                })
                this.detail = res.data;
                this.setHeight();
                uni.setNavigationBarTitle({
                    title: res.data.title
                })
            })
        },
        onSend() {
            let { CheckEmail } = require("../../utils/basicInspection");
            if (!CheckEmail(this.eMail || '')) return this.$refs.uModal.loading = false;
            this.$Http.basic({
                "id": "20240408154702",
                "content": {
                    "sat_sharematerialid": this.detail.sat_sharematerialid,
                    "email": this.eMail
                }
            }).then(res => {
                console.log("发送邮件", res)
                if (this.cutoff(res.msg, '发送成功')) return this.$refs.uModal.loading = false;
                this.showUModal = false;
            })
        },
        /* 设置组件高度 */
        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;
                            this.$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,
                                })
                            }
                        },
                    });
                },
            });
        }
    }
}
</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;
        }
    }


}

.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>