YXGJ/packageA/dailyYttendance/index.vue

<template>
    <view>
        <calendar :date="date" showShrink shrinkState="week" weekType="" :signList="signList" @dayChange="dayChange" />
        <view v-if="dates[viewDate] && dates[viewDate].attinfos.length">
            <swiper class="poster" :current="current" circular v-if="dates[viewDate].attinfos.length" indicator-dots
                indicator-active-color="#fff" @change="swiperChange">
                <swiper-item v-for="item in dates[viewDate].attinfos" :key="item.attachmentid">
                    <image class="image" v-if="item.fileType == 'image'" :src="item.url" mode="aspectFit" lazy-load="true"
                        @click="previewImage(item.url)" />
                    <video class="video" :id="'Video' + item.attachmentid" v-if="item.fileType == 'video'"
                        :poster="item.subfiles[0].url" :src="item.url" />
                </swiper-item>
            </swiper>

            <view class="text-box">
                <view class="title">分享海报宣传文本，例如：</view>
                <textarea class="textarea" :value="dates[viewDate].notes" @input="notesSava" maxlength="499"
                    placeholder="分享海报宣传文本" />
            </view>
        </view>
        <view v-else style="padding-top: 50px;">
            <u-empty mode="data" text="暂无数据" />
        </view>
        <view style="height: 80px;" />
        <view class="bottom" v-if="dates[viewDate] && dates[viewDate].attinfos.length">
            <view class="but up" @click="copyNotes(dates[viewDate].notes)" hover-class="navigator-hover">
                复制文本
            </view>
            <view v-if="dates[viewDate].attinfos[current].fileType == 'image'" class="but submit"
                hover-class="navigator-hover" @click="makePoster(dates[viewDate].attinfos[current])">
                自定义海报及保存
            </view>
            <view v-else class="but submit" hover-class="navigator-hover"
                @click="saveVideo(dates[viewDate].attinfos[current])">
                保存视频
            </view>
        </view>
    </view>
</template>

<script>
import calendar from "../../uni_modules/lunc-calendar/components/lunc-calendar/lunc-calendar.vue";
import { formattedFiles, viewImage, wxSaveFile } from "../../utils/settleFiles";
export default {
    components: { calendar },
    data() {
        return {
            current: 0,
            date: new Date(),
            signList: [],
            "content": {
                "pageNumber": 1,
                "pageSize": 9999,
                "where": {
                    "condition": "",
                    "year": "",
                    "month": ""
                }
            },
            viewDate: "",
            dates: {}
        }
    },
    onLoad() {
        uni.setNavigationBarTitle({
            title: this.getApps('资料库', '/packageA/dailyYttendance/index').remark || '每日一签',
        });
        this.viewDate = this.formatTime().split(" ")[0]
        const time = this.viewDate.split("-")
        this.content.where.year = time[0];
        this.content.where.month = time[1];
        this.getList(true)
    },
    onShow() {
        if (this.content.pageNumber && this.content.pageNumber >= 2) this.getList(true)
    },
    onUnload() {
        if (this.$Http.updateUserInfo) {
            this.$Http.updateUserInfo()
            delete this.$Http.updateUserInfo
        }
    },
    methods: {
        getList(init = false) {
            if (this.paging(this.content, init)) return;
            this.$Http.basic({
                "id": "20240319104102",
                content: this.content
            }).then(res => {
                console.log("获取每日一签列表", res)
                if (this.cutoff(res.msg)) return;
                let dates = {};
                this.signList = res.data.map(v => {
                    v.attinfos = formattedFiles(v.attinfos)
                    v.videoIds = v.attinfos.filter(v => v.fileType == 'video').map(v => `Video${v.attachmentid}`)
                    dates[v.ondate] = v;
                    return { date: v.ondate }
                })
                this.dates = dates;
                this.record();
                console.log("date", this.dates[this.viewDate])
            })
        },
        dayChange(e) {
            this.viewDate = e.date;
            this.current = 0;
            const {
                year, month
            } = this.content.where;
            if (year != e.year || month != e.month) {
                this.content.where.year = e.year;
                this.content.where.month = e.month;
                this.getList(true)
            }
            console.log("date", this.dates[this.viewDate])
            this.record();
        },
        swiperChange(e) {
            this.current = e.detail.current;
            this.dates[this.viewDate].videoIds.forEach(v => uni.createVideoContext(v).pause())
        },
        previewImage(url) {
            viewImage(url)
        },
        saveVideo(file) {
            wxSaveFile(file)
            this.record(1)
        },
        notesSava(e) {
            this.dates[this.viewDate].notes = e.detail.value;
        },
        copyNotes(notes) {
            if (!notes.length) uni.showToast({
                title: '还未输入宣传文本',
                duration: 2000,
                icon: "none"
            });
            uni.setClipboardData({
                data: notes,
            })
        },
        //0:阅读记录 1:下载记录:2:发送邮件
        record(type = 0, sat_sharematerialid = 0) {
            try {
                if (sat_sharematerialid == 0) sat_sharematerialid = this.dates[this.viewDate].sat_sharematerialid;
                this.$Http.basic({
                    "id": 20240319142702,
                    "content": {
                        sat_sharematerialid, type
                    }
                }).then(res => {
                    console.log(type, '记录', res)
                })
            } catch (error) {
            }
        },
        makePoster(file) {
            this.$Http.data = {
                detail: this.dates[this.viewDate],
                file
            }
            uni.navigateTo({
                url: "/packageA/dailyYttendance/makePoster",
            });

        }
    },
}
</script>

<style lang="scss">
.poster {
    height: 356px;
    width: 100vw;
    margin: 20px 0;
    box-sizing: border-box;

    .image,
    .video {
        width: 100%;
        height: 100%;
    }
}

.text-box {
    width: 100vw;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;

    .title {
        height: 20px;
        line-height: 20px;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-size: 14px;
        color: #333333;
    }

    .textarea {
        width: 100%;
        height: 100px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #CCCCCC;
        padding: 10px;
        margin-top: 10px;
        box-sizing: border-box;
    }
}


.bottom {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 375px;
    height: 64px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
    padding-right: 10px;
    box-sizing: border-box;
    z-index: 9999999;

    .but {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        width: 168px;
        height: 45px;
        border-radius: 5px;
        margin-top: 4px;
        box-sizing: border-box;
    }

    .up {
        background: #FFFFFF;
        border: 1px solid #999999;
        font-size: 16px;
        color: #666666;
        width: 82px;
    }

    .down,
    .submit {
        background: #095DE0;
        font-family: PingFang SC, PingFang SC;
        font-size: 16px;
        color: #FFFFFF;
    }

    .submit {
        flex: 1;
        background: #C30D23;
        width: 263px;
    }
}
</style>