update

src/pages/index/index.vue

@@ -0,0 +1,174 @@
+<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>