YXGJ/packageA/affiche/detail.vue

<template>
    <view>
        <view class="content">
            <view class="title" v-if="detail.title">
                {{ detail.title }}
            </view>
            <view v-if="detail.content" class="box">
                <u-parse :content="detail.content" />
            </view>
            <view v-if="showAttinfos" class="box">
                <view class="top">
                    <view class="text">
                        附件
                    </view>
                    <view class="but" hover-class="navigator-hover" @click="showUModal = true">
                        发邮箱
                    </view>
                </view>
                <view class="list" v-for="item in detail.attinfos" :key="item.attachmentid" @click="previewAttinof(item)"
                    hover-class="navigator-hover">
                    {{ item.document }}
                </view>
            </view>
        </view>
        <view style="height: 80px;" />
        <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 class="bottom" v-if="detail.readstatus != '已知'">
            <view class="but" hover-class="navigator-hover" @click="know">
                确认已知晓公告
            </view>
        </view>
    </view>
</template>

<script>
import { viewMedias, viewFlies, formattedFiles } from "../../utils/settleFiles"
export default {
    data() {
        return {
            sat_noticeid: "",
            detail: { readstatus: '已知' },
            showAttinfos: false,
            showUModal: false,
            eMail: "",
            focus: false,
        }
    },
    watch: {
        showUModal: function (newVale) {
            setTimeout(() => {
                this.focus = newVale;
            }, 300)
        }
    },
    onLoad(options) {
        uni.setNavigationBarTitle({
            title: this.getApps('资料库', '/packageA/affiche/detail').remark || '企业公告',
        });
        this.sat_noticeid = options.id;
        this.getDetail();
    },
    methods: {
        getDetail() {
            this.$Http.basic({
                "id": "20221101095003",
                "content": {
                    "sat_noticeid": this.sat_noticeid
                }
            }).then(res => {
                console.log("获取通告详情", res)
                if (this.cutoff(res.msg)) return;
                res.data.attinfos = formattedFiles(res.data.attinfos)
                this.detail = res.data;
                this.showAttinfos = res.data.attinfos.length != 0
            })
        },
        onSend() {
            let { CheckEmail } = require("../../utils/basicInspection");
            if (!CheckEmail(this.eMail || '')) return this.$refs.uModal.loading = false;
            this.$Http.basic({
                "id": "20240320153302",
                "content": {
                    "sat_noticeid": this.detail.sat_noticeid,
                    "email": this.eMail
                }
            }).then(res => {
                console.log("发送邮件", res)
                if (this.cutoff(res.msg, '发送成功')) return this.$refs.uModal.loading = false;
                this.showUModal = false;
            })
        },
        know() {
            let that = this;
            uni.showModal({
                title: '提示',
                content: '是否确定已经知晓该公告',
                success: ({ confirm }) => {
                    if (confirm) that.$Http.basic({
                        "id": "20240320152902",
                        "content": {
                            "sat_noticeid": that.sat_noticeid
                        }
                    }).then(res => {
                        if (that.cutoff(res.msg, '确定成功')) return;
                        that.getDetail();
                    })
                },
            })
        },
        previewAttinof(item) {
            if (['image', 'video'].includes(item.fileType)) {
                const list = this.detail.attinfos.filter(v => v.fileType == item.fileType),
                    index = list.findIndex(v => v.attachmentid == item.attachmentid);
                viewMedias(list, index, item.fileType)
            } else {
                viewFlies(item)
            }
        }
    },
}
</script>

<style lang="scss">
.content {
    padding: 10px;
    box-sizing: border-box;

    .title {
        width: 100%;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: bold;
        font-size: 18px;
        color: #333333;
        text-align: center;
    }

    .box {
        width: 100%;
        background: #FFFFFF;
        border-radius: 8px;
        padding: 10px;
        box-sizing: border-box;
        margin-top: 10px;

        .top {
            display: flex;
            justify-content: space-between;

            .text {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 16px;
                color: #333333;
            }

            .but {
                width: 66px;
                height: 32px;
                background: #C30D23;
                border-radius: 5px;
                margin-top: -3px;
                font-family: Source Han Sans SC, Source Han Sans SC;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 32px;
                text-align: center;
            }
        }
    }
}

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

.list {
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-size: 14px;
    color: #095DE0;
    line-height: 20px;
    margin-top: 10px;
    border-radius: 4px;
}

.bottom {
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 65px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);

    .but {
        width: 355px;
        height: 45px;
        line-height: 45px;
        background: #C30D23;
        border-radius: 5px;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 14px;
        color: #FFFFFF;
        text-align: center;
        margin: 6px auto;
    }
}
</style>