YXGJ/packageA/resourceLibrary/picture.vue

<template>
    <view>
        <view class="title">{{ detail.title }}</view>
        <view class="images">
            <u--image @click="previewimg(item.attinfos[0].url)" v-for="item in detail.attinfos_pic" :key="item.attachmentid"
                :src="item.cover" :fade="true" duration="450" :lazy-load="true" mode="widthFix" :width="tovw(355)"
                :height="'none'">
                <template v-slot:loading>
                    <u-loading-icon color="red" />
                </template>
            </u--image>
        </view>
        <view style="height: 80px;" />
        <view class="footer">
            <view v-if="detail.candownload_c" class="sendmail but" hover-class="navigator-hover" @click="showUModal = true">
                发送邮箱
            </view>
            <view class="book but" @click="previewBook" :style="{ width: detail.candownload_c ? '168px' : '100%' }"
                hover-class="navigator-hover">
                查看电子书
            </view>
        </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="focus" placeholder="请输入邮箱" v-model="eMail" border="bottom" clearable />
            </view>
        </u-modal>
    </view>
</template>

<script>
import { viewImage } from "../../utils/settleFiles";

export default {
    data() {
        return {
            sat_sharematerialid: 0,
            showUModal: false,
            eMail: "",
            detail: {},
            focus: false,
        }
    },
    onLoad(options) {
        this.sat_sharematerialid = options.id;
        this.getDetail();
    },
    watch: {
        showUModal: function (newVale) {
            setTimeout(() => {
                this.focus = newVale;
            }, 300)
        }
    },
    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 => {
                    v.cover = this.getSpecifiedImage(v.attinfos[0], "compressed")
                    return v
                })
                this.detail = res.data;
                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;
            })
        },
        previewBook() {
            /*      const innerAudioContext = uni.createInnerAudioContext();
                 innerAudioContext.src = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3';
                 innerAudioContext.autoplay = true;
                 innerAudioContext.loop = true;
                 innerAudioContext.play();
                 this.$Http.innerAudioContext = innerAudioContext; */

            let parems = encodeURIComponent(JSON.stringify({
                "accesstoken": uni.getStorageSync('userMsg').token,
                "id": "20240407140002",
                "content": {
                    "ownertable": "sat_sharematerial",
                    "ownerid": this.sat_sharematerialid,
                    "pageSize": "9999",
                }
            }))
            uni.navigateTo({
                url: `/pages/picture/index?parems=${parems}&title=${this.detail.title}`,
            })
        },
        previewimg(url) {
            viewImage(url)
        }
    },
}
</script>

<style lang="scss" scoped>
.title {
    width: 100vw;
    padding: 10px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
    background: #fff;
    font-weight: bold;
    box-sizing: border-box;
}

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

.images {
    display: flex;
    width: 100vw;
    flex-direction: column;
    align-items: center;
}

.footer {
    position: fixed;
    display: flex;
    justify-content: space-between;
    bottom: 0;
    width: 100vw;
    height: 65px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
    border-radius: 0px 0px 0px 0px;
    padding: 5px 14px;
    box-sizing: border-box;

    .but {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 168px;
        height: 45px;
        border-radius: 5px;
        box-sizing: border-box;
        font-family: PingFang SC, PingFang SC;
        font-size: 16px;
    }

    .sendmail {
        background: #FFFFFF;
        border: 1px solid #999999;
        color: #666666;
    }

    .book {
        background: #C30D23;
        color: #FFFFFF;
    }

}
</style>