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

<script setup>
import {ref, reactive} 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 testIcon from "../../static/images/test.png";
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} = options;
    if (!id) {
        showToast('未找到任务');
        return;
    }
    setToken(token);
    Api.system.getTaskinfo(id).then(({data}) => {
        Object.assign(detail, data);
        tabs.push(...detail.children.material.map((v, index) => ({
            id: v.id,
            name: `素材${index + 1}`
        })));
    });
})
</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>

    <view class="block">
        <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">
        <view class="title">
            话题
            <x-link class="!ml-auto" show-description>查看引导</x-link>
        </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">
        <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="download(detail.children.material[current].material_arr)">批量保存</view>
        </view>
    </view>

    <view v-if="detail.children?.material[current]?.comment" class="block">
        <view class="title">评论1</view>
        <view class="info">
            {{ detail.children?.material[current]?.comment.intro }}

            <view class="!grid grid-cols-5 flex-wrap gap-[32rpx]">
                <x-image
                    v-for="j in detail.children?.material[current]?.comment.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(detail.children?.material[current]?.comment.intro)">复制文字
                </view>
                <view class="copy-button !mx-0"
                      @click="download(detail.children?.material[current]?.comment.image_arr)">保存图片
                </view>
            </view>
        </view>
    </view>

    <view v-for="(v, index) in detail.children?.material[current]?.comment.children" :key="v.id" class="block">
        <view class="title">评论{{ index + 2 }}</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>

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