xl-mobile/src/pages/index/index.vue

<script setup>
import {reactive, ref} from "vue";
import XNav from "../../components/XNav.vue";
import {copy, download, showToast} from "../../utils/uils.js";
import XLink from "../../components/XLink.vue";
import XImage from "../../components/XImage.vue";
import {onLoad} from "@dcloudio/uni-app";
import Api from "../../api/index.js";
import {useUserStore} from "../../pinia/UserStore/index.js";

const {setToken} = useUserStore();
const detail = reactive({});
const current = ref(0);
const tabs = reactive([]);

onLoad((options) => {
    const {id, token, task_children_id} = options;
    if (!id) {
        showToast('未找到任务');
        return;
    }
    setToken(token);
    Api.system.getTaskinfo(id, task_children_id).then(({data}) => {
        Object.assign(detail, data);
        tabs.push(...detail.children?.material?.map((v, index) => ({
            id: v.id,
            name: `素材${index + 1}`
        })));
    });
})

const saveM = () => {
    download(detail.children?.material[current].material_arr);
    Api.system.checkDownload(detail.children.id);
}
</script>

<template>
    <!--下载素材-->
    <!-- #ifndef MP-WEIXIN -->
    <x-nav></x-nav>
    <!-- #endif -->

    <tui-tabs v-if="tabs.length>0" :tabs="tabs" :currentTab="current" @change="({index})=>current=index"></tui-tabs>

    <template v-if="detail.id">
        <view class="block" v-if="detail.material_type?.title_limit > 0">
            <view class="title">标题</view>
            <view class="info">
                {{ detail.children.material[current].title }}

                <view class="copy-button" @click="copy(detail.children?.material[current].title)">复制</view>
            </view>
        </view>

        <view class="block" v-if="detail.material_type?.tags_limit > 0">
            <view class="title">
                话题
                <view class="!ml-auto">
                    <x-image :src="detail.video"
                             :list="[detail.video]">
                        <x-link show-description>查看引导</x-link>
                    </x-image>
                </view>
            </view>
            <view class="info">
                {{ detail.children?.material[current].tags_arr.join(' ') }}
                <view class="copy-button" @click="copy(detail.children.material[current].tags_arr.join(' '))">复制
                </view>
            </view>
        </view>

        <view class="block" v-if="detail.material_type?.desc_limit > 0">
            <view class="title">正文</view>
            <view class="info">
                {{ detail.children?.material[current].content }}

                <view class="copy-button" @click="copy(detail.children?.material[current].content)">复制</view>
            </view>
        </view>

        <view class="block">
            <view class="title">素材（请按顺序下载&发布）</view>
            <view class="info">
                <view class="!grid grid-cols-5 flex-wrap gap-[32rpx]">
                    <x-image
                        v-for="(v, index) in detail.children?.material[current].material_arr"
                        :key="index"
                        :src="v"
                        imageClass="!w-[100%] !h-auto !aspect-square">
                    </x-image>
                </view>

                <view class="copy-button" @click="saveM">批量保存
                </view>
            </view>
        </view>

        <view v-for="(v, index) in detail.children?.material[current]?.comment" :key="v.id" class="block">
            <view class="title">
                <text>评论{{ index + 1 }}</text>
                <view class="text-[var(--primary-color)] !ml-3" v-if="v.pid !== 0">
                    <image class="!size-[20rpx]" src="/static/icons/msgback.png"></image>
                    回复评论{{
                        detail.children?.material[current]?.comment.findIndex(k => k.pid === v.pid)
                    }}
                </view>
                <view class="!ml-auto" v-if="v.pid !== 0">
                    <x-image :src="detail.comment_video"
                             :list="[detail.comment_video]">
                        <x-link show-description>查看引导</x-link>
                    </x-image>
                </view>
            </view>
            <view class="info">
                {{ v.intro }}

                <view class="!grid grid-cols-5 flex-wrap gap-[32rpx]">
                    <x-image v-for="j in v.image_arr" :src="j" imageClass="!w-[100%] !h-auto !aspect-square"></x-image>
                </view>

                <view class="!flex gap-[24rpx] justify-center">
                    <view class="copy-button !mx-0" @click="copy(v.intro)">复制文字
                    </view>
                    <view class="copy-button !mx-0" @click="download(v.image_arr)">保存图片</view>
                </view>
            </view>
        </view>
    </template>
</template>

<style scoped lang="scss">
.block {
    background-color: #fff;
    padding: 20rpx;

    .copy-button {
        padding: 7rpx 24rpx;
        background: rgb(22, 93, 255);
        color: #fff;
        border-radius: 4rpx;
        width: fit-content;
        margin-top: 24rpx;
        margin-left: auto;
        margin-right: auto;
        color: rgb(255, 255, 255);
        font-size: 12px;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0;
        font-weight: 300;
    }

    .info {
        color: rgb(29, 33, 41);
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0;
        text-align: left;
        padding: 24rpx;
        background-color: #F7F8FA;
        border: 1px solid #E5E6EB;
        border-radius: 8rpx;
        position: relative;
    }

    .title {
        color: rgb(78, 89, 105);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        padding-bottom: 14rpx;
        display: flex;
    }
}
</style>