update

src/components/PreviewTaskModal/PreviewTaskModal.vue

@@ -0,0 +1,132 @@
+<script setup>
+import {reactive, ref, watch} from 'vue';
+import Api from "../../api/index.ts";
+import {Message} from "@arco-design/web-vue";
+
+const emits = defineEmits(['success']);
+const {id} = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    }
+});
+const visible = ref(false);
+const detail = reactive({});
+const activeKey = ref(1);
+
+watch(
+    () => visible.value,
+    (val) => {
+        if (val) Api.admin.getTaskChildrenInfo(id).then(({data}) => {
+            Object.assign(detail, data);
+            console.log('我看看我看看', data);
+        });
+    },
+    {deep: true}
+)
+
+const passTaskChildren = async () => {
+    const {code, msg} = await Api.admin.passTaskChildren(id);
+    if (code === 1) Message.success(msg);
+    emits('success');
+}
+
+const refuseTaskChildren = async () => {
+    const {code, msg} = await Api.admin.refuseTaskChildren(id);
+    if (code === 1) Message.success(msg);
+    emits('success');
+}
+</script>
+
+<template>
+    <a-link :hoverable="false" @click="visible=true">预览</a-link>
+    <div @click="visible=true">
+        <slot></slot>
+    </div>
+
+    <a-modal
+        title-align="start"
+        title="预览"
+        v-model:visible="visible">
+        <a-tabs v-model:active-key="activeKey" type="rounded" v-if="detail.id !== undefined && detail.id !== null">
+            <a-tab-pane v-for="(item, index) in detail.content" :title="`素材${index+1}`" :key="index">
+                <a-form
+                    layout="vertical">
+                    <a-form-item label="标题">
+                        <a-input :model-value="item.title"></a-input>
+                    </a-form-item>
+                    <a-form-item label="正文">
+                        <a-textarea
+                            auto-size
+                            :max-length="1000"
+                            show-word-limit
+                            :model-value="item.content">
+                        </a-textarea>
+                    </a-form-item>
+                    <a-form-item label="话题">
+                        <div id="tag-list" class="w-full bg-[var(--color-neutral-2)] p-[4px]">
+                            <a-tag v-for="v in item.tags_arr">#{{ v }}</a-tag>
+                        </div>
+                    </a-form-item>
+
+                    <a-form-item label="素材">
+                        <div class="flex flex-wrap gap-[16px]">
+                            <a-image
+                                v-for="v in item.materia_arr"
+                                width="60px"
+                                height="60px"
+                                :src="v">
+                            </a-image>
+                        </div>
+                    </a-form-item>
+
+                    <a-form-item label="评论区内容">
+                        <div class="flex flex-col gap-[8px] w-full">
+                            <div class="w-full flex gap-[10px] items-center" v-for="v in detail.comment">
+                                {{ v.id }}.
+                                <div class="flex-grow bg-[var(--color-neutral-2)] p-[4px] h-[40px] flex items-center">
+                                    <div class="text-[#4E5969] text-[14px] mr-[4px]" v-if="v.pid !== 0">
+                                        <icon-redo/>
+                                        回复{{ v.pid }}：
+                                    </div>
+                                    <a-image
+                                        v-if="v.image"
+                                        class="mr-[12px]"
+                                        width="30px"
+                                        height="30px"
+                                        :src="v.image">
+                                    </a-image>
+                                    第三个很好用，大家可以在网上搜同款
+                                </div>
+                            </div>
+                        </div>
+                    </a-form-item>
+                </a-form>
+            </a-tab-pane>
+        </a-tabs>
+
+        <template #footer>
+            <div class="flex items-center gap-[8px]">
+                <a-checkbox-group>
+                    <template v-for="(item, index) in detail.content" :key="item">
+                        <a-checkbox v-show="activeKey === index" :value="item">选中</a-checkbox>
+                    </template>
+                </a-checkbox-group>
+
+                <a-button @click="passTaskChildren" type="primary" class="ml-auto">通过</a-button>
+                <a-button @click="refuseTaskChildren">拒绝</a-button>
+            </div>
+        </template>
+    </a-modal>
+</template>
+
+<style lang="scss" scoped>
+#tag-list {
+    :deep(.arco-tag) {
+        color: #000;
+        background-color: #fff;
+        border: 1px solid rgb(229, 230, 235);
+        box-sizing: border-box;
+    }
+}
+</style>