update

src/api/merchant.js

@@ -211,6 +211,27 @@ const merchant = {
             data: data
         });
     },
+    getMaterialList: async (id) => {
+        return request({
+            url: '/index/task/getMaterialList',
+            method: Method.POST,
+            data: {id}
+        });
+    },
+    addMaterial: async (data) => {
+        return request({
+            url: '/index/task/addMaterial',
+            method: Method.POST,
+            data: data
+        });
+    },
+    delMaterial: async (id) => {
+        return request({
+            url: '/index/task/delMaterial',
+            method: Method.POST,
+            data: {id}
+        });
+    },
 }
 
 export default merchant;

src/components/PreviewTaskModal/PreviewTaskModal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {reactive, ref, watch} from 'vue';
-import Api from "../../../../../api/index.js";
+import Api from "../../api/index.ts";
 import {Message} from "@arco-design/web-vue";
 
 const emits = defineEmits(['success']);
@@ -40,6 +40,9 @@ const refuseTaskChildren = async () => {
 
 <template>
     <a-link :hoverable="false" @click="visible=true">预览</a-link>
+    <div @click="visible=true">
+        <slot></slot>
+    </div>
 
     <a-modal
         title-align="start"

src/components/XImage/Index.vue

@@ -0,0 +1,73 @@
+<script setup>
+import {ref} from "vue";
+import {Modal} from "@arco-design/web-vue";
+
+const emits = defineEmits(['delete']);
+const {width, height, aspect} = defineProps({
+    width: {
+        type: String,
+        default: '80px'
+    },
+    height: {
+        type: String,
+        default: '80px'
+    },
+    aspect: {
+        type: Boolean,
+        default: false,
+    }
+});
+const previewVisible = ref(false);
+const deleteImage = () => {
+    Modal.info({
+        title: "删除确认",
+        content: "确认删除这张素材吗?",
+        hideCancel: false,
+        onOk: () => {
+            emits('delete');
+        }
+    });
+}
+</script>
+
+<template>
+    <div class="x-image-box" :style="{aspectRatio: aspect ? '1 / 1' : ''}">
+        <a-image
+            fit="contain"
+            v-model:preview-visible="previewVisible"
+            @preview-visible-change="(v)=>previewVisible=v"
+            v-bind="$attrs"
+            :width="width"
+            :height="height">
+        </a-image>
+
+        <div class="mask">
+            <icon-eye @click="previewVisible=true" class="icon" style="color: #fff"/>
+            <icon-delete @click="deleteImage" class="icon" style="color: #fff"/>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.x-image-box {
+    @apply cursor-pointer relative box-border rounded-[6px] overflow-hidden;
+    outline: 1px solid #E5E6EB;
+    width: v-bind(width);
+    height: v-bind(height);
+
+    &:hover .mask {
+        background-color: rgba(0, 0, 0, .4);
+
+        .icon {
+            display: block;
+        }
+    }
+
+    .mask {
+        @apply size-full absolute left-0 top-0 duration-500 flex justify-center items-center gap-[10px];
+        .icon {
+            display: none;
+        }
+    }
+}
+</style>

src/components/upload/UploadAvatar.vue

@@ -1,74 +1,56 @@
 <script setup>
-import {ref} from "vue";
-import {BASEURL} from "../../utils/request.js";
-import {useUserStore} from "../../pinia/UserStore/index.js";
+import XImage from "../XImage/Index.vue";
+import Api from "../../api/index.js";
 
-const UserStore = useUserStore();
-const file = ref();
-const url = defineModel();
+const {size, api} = defineProps({
+    size: {
+        type: String,
+        default: '60px'
+    },
+    api: {
+        type: Function,
+        default: Api.system.uploadFile,
+    }
+});
+const files = defineModel('files');
+const emits = defineEmits(['success']);
 
-const onChange = (_, currentFile) => {
-    if (currentFile.value.response && currentFile.value.response?.data) url.value = currentFile.value.response?.data;
-    file.value = {
-        ...currentFile,
-        // url: URL.createObjectURL(currentFile.file),
-    };
-};
-const onProgress = (currentFile) => {
-    file.value = currentFile;
-};
+const beforeUpload = (file) => {
+    api(file).then(({data}) => {
+        files.value.push(data);
+        emits('success', data);
+    });
+    return false;
+}
 </script>
 
 <template>
-    {{ url }}
-    <a-upload
-        :action="BASEURL + '/admin/upload/upload'"
-        :fileList="file ? [file] : []"
-        :show-file-list="false"
-        :headers="{
-            'Access-Token': UserStore.token
-        }"
-        @change="onChange"
-        @progress="onProgress"
-    >
-        <template #upload-button>
-            <div
-                :class="`arco-upload-list-item${
-            file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
-          }`"
-            >
-                <div
-                    class="arco-upload-list-picture custom-upload-avatar"
-                    v-if="file && file.url"
-                >
-                    <img :src="file.url"/>
-                    <div class="arco-upload-list-picture-mask">
-                        <IconEdit/>
-                    </div>
-                    <a-progress
-                        v-if="file.status === 'uploading' && file.percent < 100"
-                        :percent="file.percent"
-                        type="circle"
-                        size="mini"
-                        :style="{
-                position: 'absolute',
-                left: '50%',
-                top: '50%',
-                transform: 'translateX(-50%) translateY(-50%)',
-              }"
-                    />
+    <div class="flex flex-wrap gap-[15px]">
+        <a-upload :style="{width: size,height: size}" @before-upload="beforeUpload" multiple>
+            <template #upload-button>
+                <div class="upload-button test">
+                    <IconPlus/>
+                    上传
                 </div>
-                <div class="arco-upload-picture-card" v-else>
-                    <div class="arco-upload-picture-card-text">
-                        <IconPlus/>
-                        <div style="margin-top: 10px; font-weight: 600">Upload</div>
-                    </div>
-                </div>
-            </div>
-        </template>
-    </a-upload>
+            </template>
+        </a-upload>
+
+        <x-image
+            @delete="files.splice(index,1)"
+            :width="size"
+            :height="size"
+            :key="index"
+            :src="v"
+            v-for="(v, index) in files">
+        </x-image>
+    </div>
 </template>
 
 <style scoped lang="scss">
-
+.upload-button {
+    width: v-bind(size);
+    height: v-bind(size);
+    border: 1px dashed rgb(229, 230, 235);
+    @apply flex flex-col justify-center items-center bg-[#F2F3F5] hover:bg-[#ddd] duration-300;
+}
 </style>

src/components/upload/UploadButton.vue

@@ -0,0 +1,30 @@
+<script setup>
+import Api from "../../api/index.js";
+
+const {api} = defineProps({
+    api: {
+        type: Function,
+        default: Api.system.uploadFile,
+    }
+});
+const emits = defineEmits(['success']);
+
+const beforeUpload = (file) => {
+    api(file).then(({data}) => {
+        emits('success', data);
+    });
+    return false;
+}
+</script>
+
+<template>
+    <a-upload @before-upload="beforeUpload" v-bind="$attrs">
+        <template #upload-button>
+            <slot name="upload-button"></slot>
+        </template>
+    </a-upload>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/manage/pages/manage-reward-mission/subtask-review.vue

@@ -3,7 +3,7 @@ import {reactive} from "vue";
 import Filter from "../../../../components/Filter/index.vue";
 import useTableQuery from "../../../../hooks/useTableQuery.js";
 import Api from "../../../../api/index.js";
-import PreviewTaskModal from "./components/PreviewTaskModal.vue";
+import PreviewTaskModal from "../../../../components/PreviewTaskModal/PreviewTaskModal.vue";
 import openTerminateTask from "../../../../components/TerminateTask/TerminateTask.js";
 import {Message} from "@arco-design/web-vue";
 import RejectTaskModal from "./components/RejectTaskModal.vue";

src/pages/merchant/components/AddComment.vue

@@ -0,0 +1,61 @@
+<script setup>
+import XSelect from "../../../components/XSelect/index.vue";
+import {reactive, ref} from "vue";
+import UploadAvatar from "../../../components/upload/UploadAvatar.vue";
+import Api from "../../../api/index.js";
+
+const {id} = defineProps({
+    id: {
+        type: Number,
+        default: null,
+    }
+});
+const form = reactive({
+    type: 0,
+    files: []
+});
+const visible = ref(false);
+const success = async () => {
+
+}
+</script>
+
+<template>
+    <a-button v-if="!$slots.default" type="primary" @click="visible=true">
+        添加评论
+    </a-button>
+    <div @click="visible=true" v-else>
+        <slot></slot>
+    </div>
+
+    <a-modal
+        title-align="start"
+        title="添加评论"
+        v-model:visible="visible"
+        @ok="success">
+        <a-form layout="vertical">
+            <a-form-item label="是否回复之前评论">
+                <a-radio-group v-model:model-value="form.type">
+                    <a-radio :value="0">否</a-radio>
+                    <a-radio :value="1">是</a-radio>
+                </a-radio-group>
+            </a-form-item>
+            <a-form-item label="需要回复的评论" v-if="form.type===1">
+                <x-select api=""></x-select>
+            </a-form-item>
+            <a-form-item label="添加图片">
+                <UploadAvatar
+                    v-model:files="form.files"
+                    :api="Api.system.uploadFile2">
+                </UploadAvatar>
+            </a-form-item>
+            <a-form-item label="添加文字">
+                <a-textarea placeholder="请输入评论内容"></a-textarea>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/merchant/components/AddMaterial.vue

@@ -0,0 +1,91 @@
+<script setup>
+import {reactive, ref} from "vue";
+import XImage from "../../../components/XImage/Index.vue";
+import UploadButton from "../../../components/upload/UploadButton.vue";
+import Api from "../../../api/index.js";
+import {v4} from "uuid";
+import MaterialSource from "./MaterialSource.vue";
+
+const MaterialSourceRef = ref();
+const visible = ref(false);
+const targetList = reactive([]);
+const {id} = defineProps({
+    id: {
+        type: Number,
+        default: null,
+    }
+});
+
+const uploadSuccess = (url) => {
+    targetList.push({
+        id: v4(),
+        image: url,
+    });
+}
+
+const success = async () => {
+    
+}
+</script>
+
+<template>
+    <!-- 素材库 -->
+    <a-button v-if="!$slots.default" type="primary" @click="visible=true">
+        添加素材
+    </a-button>
+    <div @click="visible=true" v-else>
+        <slot></slot>
+    </div>
+
+    <a-modal
+        @ok="success"
+        title-align="start"
+        :width="820"
+        v-model:visible="visible"
+        title="添加素材">
+        <div class="target">
+            <div class="text-[#1D2129] text-[14px]">已添加5个素材（长摁图片可拖动排序）</div>
+            <div class="grid grid-cols-6 mt-[10px] gap-[16px]">
+                <x-image
+                    @delete="targetList.splice(index,1)"
+                    v-for="(v, index) in targetList"
+                    :key="v.id"
+                    :src="v.image"
+                    :aspect="true"
+                    width="100%"
+                    height="100%">
+                </x-image>
+            </div>
+        </div>
+
+        <div class="mt-[20px]">
+            <div class="text-[#1D2129] text-[14px] mb-[12px]">从本地添加</div>
+            <UploadButton :multiple="true" :api="Api.system.uploadFile2" @success="uploadSuccess">
+                <template #upload-button>
+                    <a-button>
+                        <template #icon>
+                            <icon-upload/>
+                        </template>
+                        本地上传
+                    </a-button>
+                </template>
+            </UploadButton>
+        </div>
+
+        <div class="mt-[20px]">
+            <div class="text-[#1D2129] text-[14px] mb-[12px]">从素材库添加</div>
+            <MaterialSource
+                ref="MaterialSourceRef"
+                v-model:select-list="targetList"
+                :id="id">
+            </MaterialSource>
+        </div>
+    </a-modal>
+</template>
+
+<style scoped lang="scss">
+.target {
+    @apply p-[20px] bg-[#F7F8FA];
+    border: 1px solid #E5E6EB;
+}
+</style>

src/pages/merchant/components/MaterialLibrary.vue

@@ -0,0 +1,92 @@
+<script setup>
+import XImage from "../../../components/XImage/Index.vue";
+import {reactive, ref, watch} from "vue";
+import Api from "../../../api/index.js";
+import UploadButton from "../../../components/upload/UploadButton.vue";
+import {Message} from "@arco-design/web-vue";
+
+const {id} = defineProps({
+    id: {
+        type: Number,
+        default: null,
+    }
+});
+const visible = ref(false);
+const materialList = reactive([]);
+const getMaterialList = async () => {
+    const {data} = await Api.merchant.getMaterialList(id);
+    materialList.length = 0;
+    materialList.push(...data);
+}
+
+watch(
+    () => visible.value,
+    (val) => {
+        if (val) getMaterialList();
+    },
+    {deep: true}
+)
+
+const uploadSuccess = async (url) => {
+    const {msg} = await Api.merchant.addMaterial({
+        id: id,
+        image: url
+    });
+    Message.success(msg);
+    await getMaterialList();
+}
+
+const deleteImage = async (id) => {
+    const {msg} = await Api.merchant.delMaterial(id);
+    Message.success(msg);
+    await getMaterialList();
+}
+</script>
+
+<template>
+    <!-- 素材库 -->
+    <a-button v-if="!$slots.default" type="primary" @click="visible=true">
+        <template #icon>
+            <icon-apps/>
+        </template>
+        素材库
+    </a-button>
+    <div @click="visible=true" v-else>
+        <slot></slot>
+    </div>
+
+    <a-modal
+        title-align="start"
+        :width="820"
+        v-model:visible="visible"
+        title="素材库">
+        <UploadButton :multiple="true" :api="Api.system.uploadFile2" @success="uploadSuccess">
+            <template #upload-button>
+                <a-button>
+                    <template #icon>
+                        <icon-plus/>
+                    </template>
+                    从本地添加到素材
+                </a-button>
+            </template>
+        </UploadButton>
+
+        <div class="box">
+            <x-image
+                @delete="deleteImage(v.id)"
+                height="80px"
+                width="80px"
+                v-for="v in materialList"
+                :key="v.id"
+                :src="v.image">
+            </x-image>
+        </div>
+    </a-modal>
+</template>
+
+<style scoped lang="scss">
+.box {
+    @apply p-[20px] mt-[20px] flex gap-[14px] flex-wrap;
+    border: 1px solid #E5E6EB;
+}
+</style>

src/pages/merchant/components/MaterialSource.vue

@@ -0,0 +1,104 @@
+<script setup>
+import {onMounted, reactive, ref} from "vue";
+import Api from "../../../api/index.js";
+
+const selectList = defineModel('select-list');
+const type = ref(0);
+const list = reactive([]);
+const {id} = defineProps({
+    id: {
+        type: Number,
+        default: null,
+    }
+});
+
+onMounted(() => {
+    Api.merchant.getMaterialList(id).then(({data}) => {
+        list.length = 0;
+        list.push(...data);
+    });
+});
+const select = (v) => {
+    const flag = selectList.value.findIndex(k => k.id === v.id);
+    console.log(flag);
+    if (flag !== -1) { // 删除
+        selectList.value.splice(flag, 1);
+    } else { // 新增
+        selectList.value.push(v);
+    }
+}
+const handle = async () => {
+    if (type === 0) {
+        
+    }
+}
+</script>
+
+<template>
+    <div class="source">
+        <div>
+            <a-radio-group v-model:model-value="type">
+                <a-radio :value="0">添加并从素材库删除</a-radio>
+                <a-radio :value="1">添加并在素材库保留</a-radio>
+            </a-radio-group>
+        </div>
+        <div class="mt-[12px] grid grid-cols-8 gap-[14px]">
+            <div
+                @click="select(v)"
+                :class="['checkbox-image', selectList.find(k => k.id===v.id)?'select':'']"
+                v-for="v in list"
+                :key="v.id">
+                <a-image
+                    :preview="false"
+                    fit="contain"
+                    :src="v.image"
+                    width="100%"
+                    height="100%">
+                </a-image>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.source {
+    @apply p-[20px] bg-[#F7F8FA];
+    border: 1px solid #E5E6EB;
+}
+
+.checkbox-image {
+    cursor: pointer;
+    width: 100%;
+    aspect-ratio: 1/1;
+    border: 1px solid #E5E6EB;
+    overflow: hidden;
+    transition: 300ms;
+    position: relative;
+
+    &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        display: block;
+        width: 14px;
+        height: 14px;
+        background-color: rgb(var(--arcoblue-6));
+        border-top-left-radius: 2px;
+        background-image: url("../../../assets/images/Combined.png");
+        background-size: 9px 9px;
+        background-repeat: no-repeat;
+        background-position: 3px 3px;
+        transition: 300ms;
+        opacity: 0;
+    }
+}
+
+.select {
+    border: 1px solid rgb(var(--arcoblue-6));
+
+    &::after {
+        opacity: 1;
+    }
+}
+</style>

src/pages/merchant/pages/task-center/look-min-task.vue

@@ -7,11 +7,13 @@ import RefuseModal from "./components/RefuseModal.vue";
 import openTerminateTask from "../../../../components/TerminateTask/TerminateTask.js";
 import BlackjackExpertModal from "../../components/BlackjackExpertModal.vue";
 import {useRoute} from "vue-router";
+import {toPath} from "../../../../utils/index.js";
+import PreviewTaskModal from "../../../../components/PreviewTaskModal/PreviewTaskModal.vue";
 
 const route = useRoute();
 const columns = [
     {
-        title: '子任务号',
+        title: '子任务编号',
         dataIndex: 'uid',
     },
     {
@@ -58,7 +60,7 @@ const columns = [
         dataIndex: 'action2',
         slotName: 'action2',
         align: 'center',
-        width: 180,
+        width: 200,
     },
 ];
 const state = reactive({
@@ -95,7 +97,7 @@ const {loading, pagination} = useTableQuery({
 
     <a-card class="flex-grow text-[14px]">
         <div class="gap-[20px]">
-            <a-button type="primary">
+            <a-button type="primary" @click="toPath('/home/task-center/manage-materials', {id: po.id})">
                 <template #icon>
                     <icon-apps/>
                 </template>
@@ -157,7 +159,9 @@ const {loading, pagination} = useTableQuery({
 
                 <template v-slot:action2>
                     <div class="flex gap-[16px] justify-center items-center">
-                        <a-link :hoverable="false">查看素材</a-link>
+                        <PreviewTaskModal>
+                            <a-link :hoverable="false">查看素材</a-link>
+                        </PreviewTaskModal>
                         <a-dropdown :hide-on-select="false">
                             <a-link :hoverable="false">
                                 更多

src/pages/merchant/pages/task-center/manage-materials.vue

@@ -0,0 +1,115 @@
+<script setup>
+import {reactive} from "vue";
+import useTableQuery from "../../../../hooks/useTableQuery.js";
+import Api from "../../../../api/index.js";
+import {useRoute} from "vue-router";
+import MaterialLibrary from "../../components/MaterialLibrary.vue";
+import AddMaterial from "../../components/AddMaterial.vue";
+import AddComment from "../../components/AddComment.vue";
+
+const route = useRoute();
+const columns = reactive([
+    {
+        title: '子任务编号',
+        dataIndex: 'uid',
+    },
+    {
+        title: '标题',
+        dataIndex: 'title',
+        slotName: 'title',
+    },
+    {
+        title: '正文',
+        dataIndex: 'content',
+        slotName: 'content',
+    },
+    {
+        title: '话题',
+        dataIndex: 'tags',
+        slotName: 'tags',
+    },
+    {
+        title: '素材',
+        dataIndex: 'material',
+        slotName: 'material',
+    },
+    {
+        title: '评论',
+        dataIndex: 'pl',
+        slotName: 'pl',
+    },
+]);
+const po = reactive({
+    id: route.query.id,
+});
+const vo = reactive({
+    page: '',
+    rows: [],
+    total: 0,
+});
+
+const {loading, pagination} = useTableQuery({
+    parameter: po,
+    api: Api.merchant.getTaskChildrenList,
+    callback: (data) => {
+        Object.assign(vo, data);
+        console.log(vo);
+    }
+});
+</script>
+
+<template>
+    <!-- 批量管理素材 -->
+    <a-card class="flex-grow text-[14px]">
+        <div class="flex justify-between">
+            <MaterialLibrary :id="po.id"></MaterialLibrary>
+            <a-button type="primary">确认修改</a-button>
+        </div>
+
+        <a-table
+            :data="vo.rows"
+            :loading="loading"
+            :columns="columns"
+            class="w-full mt-[20px] flex-grow"
+            @page-change="(e) => pagination.current = e"
+            :pagination="pagination">
+            <template v-slot:title="{record}">
+                <a-input placeholder="请输入标题" v-model:model-value="record.title"></a-input>
+            </template>
+            <template v-slot:content="{record}">
+                <a-input placeholder="请输入正文" v-model:model-value="record.content"></a-input>
+            </template>
+            <template v-slot:tags="{record}">
+                <a-input placeholder="请输入话题" v-model:model-value="record.tags"></a-input>
+            </template>
+            <template v-slot:material="{record}">
+                <add-material :id="po.id">
+                    <div class="add-materials">
+                        <icon-plus/>
+                        <div>添加</div>
+                    </div>
+                </add-material>
+            </template>
+            <template v-slot:pl="{record}">
+                <AddComment :id="po.id">
+                    <div class="add-materials">
+                        <icon-plus/>
+                        <div>添加</div>
+                    </div>
+                </AddComment>
+            </template>
+        </a-table>
+    </a-card>
+</template>
+
+<style scoped lang="scss">
+.add-materials {
+    @apply size-[40px] bg-[#F2F3F5] text-[#4E5969] duration-500 flex flex-col justify-center items-center cursor-pointer;
+    border: 1px dashed rgb(229, 230, 235);
+
+    &:hover {
+        @apply text-[#86909C] bg-[#F2F3F5];
+        border: 1px dashed rgb(229, 230, 235);
+    }
+}
+</style>

src/pinia/SystemStore/mock.js

@@ -50,6 +50,17 @@ const mockRoutes1 = [
                     hidden: true,
                 },
                 component: 'look-min-task',
+            },
+            {
+                path: 'manage-materials',
+                name: 'manage-materials',
+                title: '管理素材',
+                icon: '',
+                meta: {
+                    name: '管理素材',
+                    hidden: true,
+                },
+                component: 'manage-materials',
             }
         ]
     },

src/router/routes-map.js

@@ -8,6 +8,7 @@ const routesMap = {
     'appointed-task': () => import('../pages/merchant/pages/task-center/appointed-task.vue'),
     'new-task': () => import('../pages/merchant/pages/task-center/new-task.vue'),
     'look-min-task': () => import('../pages/merchant/pages/task-center/look-min-task.vue'),
+    'manage-materials': () => import('../pages/merchant/pages/task-center/manage-materials.vue'),
 
     'communication-center': () => import('../pages/merchant/pages/communication-center/index.vue'),