update

package.json

@@ -12,6 +12,7 @@
     "axios": "^1.8.2",
     "pinia": "^3.0.1",
     "pinia-plugin-persistedstate": "^4.2.0",
+    "uuid": "^11.1.0",
     "vite-plugin-vue-devtools": "^7.7.2",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       pinia-plugin-persistedstate:
         specifier: ^4.2.0
         version: 4.2.0(pinia@3.0.1(vue@3.5.13))
+      uuid:
+        specifier: ^11.1.0
+        version: 11.1.0
       vite-plugin-vue-devtools:
         specifier: ^7.7.2
         version: 7.7.2(@nuxt/kit@3.15.4)(rollup@4.34.8)(vite@6.2.0(jiti@2.4.2)(sass@1.85.1)(yaml@2.7.0))(vue@3.5.13)
@@ -1689,6 +1692,10 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  uuid@11.1.0:
+    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
+    hasBin: true
+
   vite-hot-client@0.2.4:
     resolution: {integrity: sha512-a1nzURqO7DDmnXqabFOliz908FRmIppkBKsJthS8rbe8hBEXwEwe4C3Pp33Z1JoFCYfVL4kTOMLKk0ZZxREIeA==}
     peerDependencies:
@@ -3417,6 +3424,8 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  uuid@11.1.0: {}
+
   vite-hot-client@0.2.4(vite@6.2.0(jiti@2.4.2)(sass@1.85.1)(yaml@2.7.0)):
     dependencies:
       vite: 6.2.0(jiti@2.4.2)(sass@1.85.1)(yaml@2.7.0)

src/api/system.js

@@ -7,7 +7,13 @@ const system = {
             method: "POST",
             data: params
         });
-    }
+    },
+    getSelect: async () => {
+        return request({
+            url: '/m1/5995958-5684445-default/getSelectList',
+            method: "GET",
+        });
+    },
 }
 
 export default system;

src/components/FormTitle/index.vue

@@ -0,0 +1,28 @@
+<script setup>
+</script>
+
+<template>
+    <div id="title">
+        <slot name="title"></slot>
+    </div>
+
+    <slot></slot>
+</template>
+
+<style lang="scss" scoped>
+#title {
+    @apply flex gap-[8px];
+    color: rgb(29, 33, 41);
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 28px;
+    letter-spacing: 0;
+    text-align: left;
+
+    &::before {
+        content: '';
+        background-color: rgb(var(--arcoblue-6));
+        @apply w-[5px] h-full block;
+    }
+}
+</style>

src/components/MinutesHoursRadio/index.vue

@@ -0,0 +1,14 @@
+<script setup>
+
+</script>
+
+<template>
+    <a-radio-group v-bind="$attrs" type="button" class="flex-shrink-0">
+        <a-radio>分钟</a-radio>
+        <a-radio>小时</a-radio>
+    </a-radio-group>
+</template>
+
+<style scoped>
+
+</style>

src/components/XSelect/index.vue

@@ -0,0 +1,31 @@
+<script setup>
+import {onMounted, reactive} from "vue";
+
+const {api, fieldName} = defineProps({
+    api: {
+        type: Function,
+        default: async () => {},
+        required: true,
+    },
+    fieldName: {
+        type: Object,
+        default: {value: 'id', label: 'name'},
+    }
+});
+const list = reactive([]);
+
+onMounted(() => {
+    api && api().then(({data}) => {
+        list.length = 0;
+        list.push(...data);
+    });
+});
+</script>
+
+<template>
+    <a-select v-bind="$attrs" :options="list" :field-names="fieldName" placeholder="请选择"></a-select>
+</template>
+
+<style scoped>
+
+</style>

src/pages/layout/index.vue

@@ -8,7 +8,7 @@ import LayoutSider from '../../components/LayoutSider/index.vue';
         <a-layout-header id="layout-header" style="height: 60px">
             <LayoutHeader></LayoutHeader>
         </a-layout-header>
-        <a-layout class="mt-[4px]">
+        <a-layout class="mt-[4px] h-[calc(100vh-64px)]">
             <a-layout-sider>
                 <LayoutSider></LayoutSider>
             </a-layout-sider>

src/pages/merchant/pages/task-center/components/Backfill.vue

@@ -0,0 +1,40 @@
+<script setup>
+import {reactive} from 'vue';
+import Api from "../../../../../api/index.js";
+import XSelect from "../../../../../components/XSelect/index.vue";
+
+const po = reactive({
+    name: null,
+});
+</script>
+
+<template>
+    <div id="block">
+        <a-form
+            :auto-label-width="true">
+            <a-form-item label="回填时间">
+                <a-time-picker type="time-range"></a-time-picker>
+                <div class="ml-[6px]">之间</div>
+                <a-button type="primary" class="ml-[38px]">一键快速设置</a-button>
+            </a-form-item>
+
+            <a-form-item label="回填内容">
+                <XSelect
+                    class="w-auto"
+                    v-model:model-value="po.name"
+                    :api="Api.system.getSelect">
+                </XSelect>
+            </a-form-item>
+        </a-form>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+#block {
+    box-sizing: border-box;
+    border: 1px solid rgb(232, 232, 232);
+    border-radius: 4px;
+    background: rgb(250, 250, 250);
+    padding: 20px;
+}
+</style>

src/pages/merchant/pages/task-center/components/new-task-1.vue

@@ -0,0 +1,106 @@
+<script setup>
+import Api from "../../../../../api/index.js";
+import XSelect from "../../../../../components/XSelect/index.vue";
+import FormTitle from "../../../../../components/FormTitle/index.vue";
+import {reactive} from "vue";
+
+const emits = defineEmits(['success']);
+const po = reactive({
+    name: null,
+});
+
+const success = () => {
+    emits('success', po);
+}
+</script>
+
+<template>
+    <FormTitle>
+        <template #title>任务介绍</template>
+
+        <a-form
+            class="mt-[30px]"
+            :model="po"
+            :label-col-props="{span: 3}"
+            :wrapper-col-props="{span: 12, offset: 1}">
+            <a-form-item label="投放渠道">
+                <XSelect
+                    v-model:model-value="po.name"
+                    :api="Api.system.getSelect">
+                </XSelect>
+            </a-form-item>
+            <a-form-item label="素材类型">
+                <XSelect
+                    v-model:model-value="po.name"
+                    :api="Api.system.getSelect">
+                </XSelect>
+            </a-form-item>
+            <a-form-item label="产品名称">
+                <a-input v-model:model-value="po.name" placeholder="请输入产品名称，如：花露水"></a-input>
+            </a-form-item>
+            <a-form-item label="产品功效">
+                <a-input v-model:model-value="po.name" placeholder="请输入产品功效，如：驱蚊"></a-input>
+            </a-form-item>
+            <a-form-item label="包含子任务数量">
+                <a-input v-model:model-value="po.name"
+                         placeholder="请输入代发的账号数量，最多一个任务可包含50个子任务"></a-input>
+            </a-form-item>
+            <a-form-item label="单个子任务价格">
+                <a-input v-model:model-value="po.name" placeholder="请输入单个子任务价格"></a-input>
+            </a-form-item>
+
+            <a-form-item label="案例链接">
+                <a-input v-model:model-value="po.name" placeholder="请输入案例链接">
+                    <template #prepend>http://</template>
+                </a-input>
+            </a-form-item>
+
+            <a-form-item label="素材案例">
+                <div class="flex flex-col gap-[5px]">
+                    <a-upload :disabled="true" action="/">
+                        <template #upload-button>
+                            <div class="arco-upload-picture-card">
+                                <div class="arco-upload-picture-card-text">
+                                    <icon-image size="30"/>
+                                </div>
+                            </div>
+                        </template>
+                    </a-upload>
+                    <div class="upload-text">无需上传，将从商家上传的素材中，取第一组素材为案例展示</div>
+                </div>
+            </a-form-item>
+
+            <a-form-item label="任务安全等级">
+                <div class="flex flex-col gap-[5px]">
+                    <div class="flex items-center gap-[36px]">
+                        <a-rate allow-half/>
+                        <a-link class="rate-text" :hoverable="false">待评估</a-link>
+                    </div>
+                    <div>
+                        *商家无需填写，由平台审核任务时，根据任务的历史平均禁言率、封号程度酌定。分值越高，接单达人越多
+                    </div>
+                </div>
+            </a-form-item>
+
+            <a-form-item label="任务耗时等级">
+                <div class="flex flex-col gap-[5px]">
+                    <div class="flex items-center gap-[36px]">
+                        <a-rate allow-half/>
+                        <a-link class="rate-text" :hoverable="false">待评估</a-link>
+                    </div>
+                    <div>
+                        *商家无需填写，由平台审核任务时，根据任务的发布要求，回填要求和效果管理综合评定。分值越高，接单达人越多
+                    </div>
+                </div>
+            </a-form-item>
+
+            <a-form-item class="mt-[30px]">
+                <a-button type="primary" @click="success">下一步</a-button>
+            </a-form-item>
+        </a-form>
+    </FormTitle>
+</template>
+
+<style scoped>
+
+</style>

src/pages/merchant/pages/task-center/components/new-task-2.vue

@@ -0,0 +1,88 @@
+<script setup>
+import Api from "../../../../../api/index.js";
+import XSelect from "../../../../../components/XSelect/index.vue";
+import FormTitle from "../../../../../components/FormTitle/index.vue";
+import {reactive} from "vue";
+
+const emits = defineEmits(['success']);
+const po = reactive({
+    name: null,
+});
+
+const success = () => {
+    emits('success', po);
+}
+</script>
+
+<template>
+    <FormTitle>
+        <template #title>发布管理</template>
+
+        <a-form
+            class="mt-[30px]"
+            :model="po"
+            :label-col-props="{span: 3}"
+            :wrapper-col-props="{span: 12, offset: 1}">
+            <a-form-item label="发布次数">
+                <XSelect
+                    v-model:model-value="po.name"
+                    :api="Api.system.getSelect">
+                </XSelect>
+            </a-form-item>
+
+            <a-form-item label="每次素材是否相同">
+                <a-radio-group>
+                    <a-radio>相同</a-radio>
+                    <a-radio>不同</a-radio>
+                </a-radio-group>
+            </a-form-item>
+
+            <a-form-item label="发布次数">
+                <XSelect
+                    v-model:model-value="po.name"
+                    :api="Api.system.getSelect">
+                </XSelect>
+            </a-form-item>
+
+            <a-form-item label="特殊要求">
+                <a-input v-model:model-value="po.name"
+                         placeholder="请输入特殊要求，如：请勿截图，必须下载原图再上传到抖音"></a-input>
+            </a-form-item>
+
+            <a-form-item label="">
+                <a-upload action="/">
+                    <template #upload-button>
+                        <div class="arco-upload-picture-card">
+                            <div class="arco-upload-picture-card-text">
+                                <IconPlus/>
+                                <div style="margin-top: 10px; font-weight: 600">添加图片</div>
+                            </div>
+                        </div>
+                    </template>
+                </a-upload>
+            </a-form-item>
+
+            <a-form-item label="选择限制 IP">
+                <XSelect
+                    v-model:model-value="po.name"
+                    :api="Api.system.getSelect">
+                </XSelect>
+            </a-form-item>
+
+            <a-form-item label="每个设备可参加几次">
+                <XSelect
+                    v-model:model-value="po.name"
+                    :api="Api.system.getSelect">
+                </XSelect>
+            </a-form-item>
+
+            <a-form-item class="mt-[30px]">
+                <a-button type="primary" @click="success">下一步</a-button>
+            </a-form-item>
+        </a-form>
+    </FormTitle>
+</template>
+
+<style scoped>
+
+</style>

src/pages/merchant/pages/task-center/components/new-task-3.vue

@@ -0,0 +1,70 @@
+<script setup>
+import Api from "../../../../../api/index.js";
+import XSelect from "../../../../../components/XSelect/index.vue";
+import FormTitle from "../../../../../components/FormTitle/index.vue";
+import {reactive} from "vue";
+
+const emits = defineEmits(['success']);
+const po = reactive({
+    name: null,
+});
+
+const success = () => {
+    emits('success', po);
+}
+</script>
+
+<template>
+    <FormTitle>
+        <template #title>控评管理</template>
+
+        <a-form
+            class="mt-[30px]"
+            :model="po"
+            :label-col-props="{span: 3}"
+            :wrapper-col-props="{span: 12, offset: 1}">
+            <a-form-item label="是否需要评论"
+                         extra="若您的评论内容有营销属性，有概率不可见。达人可多次尝试，但不可作为扣款理由">
+                <a-radio-group v-model:model-value="po.name">
+                    <a-radio :value="0">否</a-radio>
+                    <a-radio :value="1">是</a-radio>
+                </a-radio-group>
+            </a-form-item>
+
+            <a-form-item label="评论是否需要置顶"
+                         extra="若您的评论内容有营销属性，不建议置顶。各个平台置顶评论都由人工审核，有概率置顶不成功且影响流量">
+                <a-radio-group v-model:model-value="po.name">
+                    <a-radio :value="0">否</a-radio>
+                    <a-radio :value="1">是</a-radio>
+                </a-radio-group>
+            </a-form-item>
+
+            <a-form-item label="评论内容">
+                <a-input
+                    disabled
+                    v-model:model-value="po.name"
+                    placeholder=""></a-input>
+            </a-form-item>
+
+            <a-form-item label="" extra="无需上传，将从商家上传的评论图片中，取第一组素材为案例展示。不允许用户复制或者截图使用，仅作为参考使用">
+                <a-upload :disabled="true" action="/">
+                    <template #upload-button>
+                        <div class="arco-upload-picture-card">
+                            <div class="arco-upload-picture-card-text">
+                                <icon-image size="30"/>
+                            </div>
+                        </div>
+                    </template>
+                </a-upload>
+            </a-form-item>
+
+            <a-form-item class="mt-[30px]">
+                <a-button type="primary" @click="success">下一步</a-button>
+            </a-form-item>
+        </a-form>
+    </FormTitle>
+</template>
+
+<style scoped>
+
+</style>

src/pages/merchant/pages/task-center/components/new-task-4.vue

@@ -0,0 +1,108 @@
+<script setup>
+import Api from "../../../../../api/index.js";
+import XSelect from "../../../../../components/XSelect/index.vue";
+import FormTitle from "../../../../../components/FormTitle/index.vue";
+import {reactive} from "vue";
+import Backfill from "./Backfill.vue";
+import {v4} from "uuid";
+
+const INDEX = ['一', '二', '三'];
+const htList = reactive([]);
+htList.push({
+    id: v4(),
+    time: null,
+    content: null,
+});
+const emits = defineEmits(['success']);
+const po = reactive({
+    name: null,
+});
+
+const addHT = () => {
+    htList.push({
+        id: v4(),
+        time: null,
+        content: null,
+    });
+}
+
+const success = () => {
+    emits('success', po);
+}
+</script>
+
+<template>
+    <FormTitle>
+        <template #title>回填管理</template>
+
+        <a-form
+            class="mt-[30px]"
+            :model="po"
+            label-align="right"
+            :label-col-props="{span: 3}"
+            :wrapper-col-props="{span: 12, offset: 1}">
+            <a-form-item label="任务可接时间段" extra="达人可在此时段内接受任务，超出将无法领取任务">
+                <a-time-picker type="time-range"></a-time-picker>
+            </a-form-item>
+
+            <a-form-item extra="*达人未回传，但不能确定素材是否被发布">
+                <template #label>
+                    <div class="flex flex-col justify-end items-end">
+                        <div>若达人领取子任务后</div>
+                        <div>未按时提交第1个回传</div>
+                    </div>
+                </template>
+
+                <a-radio-group v-model:model-value="po.name" direction="vertical">
+                    <a-radio value="0">该子任务不可被其他达人可领取</a-radio>
+                    <a-radio value="1">该子任务可被其他达人可领取</a-radio>
+                </a-radio-group>
+            </a-form-item>
+
+            <a-form-item
+                v-for="(item, index) in htList"
+                :key="item.id"
+                :label="`第${INDEX[index]}次回填`">
+                <div class="flex flex-col gap-[20px]">
+                    <Backfill></Backfill>
+
+                    <div class="flex gap-[8px]">
+                        <a-button type="outline">
+                            <template #icon>
+                                <icon-bulb/>
+                            </template>
+                            查看指引
+                        </a-button>
+                        <a-button
+                            v-if="htList.length > 1"
+                            @click="htList.splice(index, 1)"
+                            type="outline"
+                            status="danger">
+                            <template #icon>
+                                <icon-minus/>
+                            </template>
+                            删除
+                        </a-button>
+                        <a-button
+                            v-if="htList.length < 3 && htList.length === index + 1"
+                            @click="addHT"
+                            type="outline">
+                            <template #icon>
+                                <icon-plus/>
+                            </template>
+                            添加
+                        </a-button>
+                    </div>
+                </div>
+            </a-form-item>
+
+            <a-form-item class="mt-[30px]">
+                <a-button type="primary" @click="success">下一步</a-button>
+            </a-form-item>
+        </a-form>
+    </FormTitle>
+</template>
+
+<style scoped>
+
+</style>

src/pages/merchant/pages/task-center/components/new-task-5.vue

@@ -0,0 +1,84 @@
+<script setup>
+import FormTitle from "../../../../../components/FormTitle/index.vue";
+import {reactive} from "vue";
+import MinutesHoursRadio from "../../../../../components/MinutesHoursRadio/index.vue";
+import Api from "../../../../../api/index.js";
+import XSelect from "../../../../../components/XSelect/index.vue";
+
+const emits = defineEmits(['success']);
+const po = reactive({
+    name: null,
+});
+
+const success = () => {
+    emits('success', po);
+}
+</script>
+
+<template>
+    <FormTitle>
+        <template #title>时间管理</template>
+
+        <a-form
+            class="mt-[30px]"
+            :model="po"
+            label-align="right"
+            :label-col-props="{span: 3}"
+            :wrapper-col-props="{span: 12, offset: 1}">
+            <a-form-item label="保留时间" extra="达人发布成功后，该内容需要保留多久才可删除">
+                <a-input placeholder="请输入保留时间"></a-input>
+                <a-radio-group type="button" class="ml-[10px] flex-shrink-0">
+                    <a-radio value="0">分钟</a-radio>
+                    <a-radio value="1">小时</a-radio>
+                </a-radio-group>
+            </a-form-item>
+
+            <a-form-item label="审核时间" extra="商家收到每次回填后，多长时间内审核">
+                <a-input placeholder="请输入保留时间"></a-input>
+                <a-radio-group type="button" class="ml-[10px] flex-shrink-0">
+                    <a-radio value="0">分钟</a-radio>
+                    <a-radio value="1">小时</a-radio>
+                </a-radio-group>
+            </a-form-item>
+
+            <a-form-item label="确认结算时间" extra="达人回传的信息审核通过后，在多长时间内确认结算">
+                <div id="block">
+                    <a-form>
+                        <a-form-item label="结算条件" class="whitespace-nowrap">
+                            达人回传
+                            <XSelect
+                                class="mx-[6px]"
+                                v-model:model-value="po.name"
+                                :api="Api.system.getSelect">
+                            </XSelect>
+                            且审核通过
+                        </a-form-item>
+                        <a-form-item label="结算时间">
+                            <a-input placeholder="请说入时间"></a-input>
+                            <MinutesHoursRadio class="ml-[10px]"></MinutesHoursRadio>
+                        </a-form-item>
+                    </a-form>
+                </div>
+                <a-radio-group type="button" class="ml-[10px] flex-shrink-0" style="visibility: hidden">
+                    <a-radio value="0">分钟</a-radio>
+                    <a-radio value="1">小时</a-radio>
+                </a-radio-group>
+            </a-form-item>
+
+            <a-form-item class="mt-[30px]">
+                <a-button type="primary" @click="success">下一步</a-button>
+            </a-form-item>
+        </a-form>
+    </FormTitle>
+</template>
+
+<style lang="scss" scoped>
+#block {
+    box-sizing: border-box;
+    border: 1px solid rgb(232, 232, 232);
+    border-radius: 4px;
+    background: rgb(250, 250, 250);
+    padding: 20px;
+    width: 100%;
+}
+</style>

src/pages/merchant/pages/task-center/components/new-task-6.vue

@@ -0,0 +1,111 @@
+<script setup>
+import Api from "../../../../../api/index.js";
+import XSelect from "../../../../../components/XSelect/index.vue";
+import FormTitle from "../../../../../components/FormTitle/index.vue";
+import {reactive} from "vue";
+import {v4} from "uuid";
+
+const htList = reactive([]);
+const emits = defineEmits(['success']);
+const po = reactive({
+    name: null,
+});
+
+const addHT = () => {
+    htList.push({
+        id: v4(),
+        select: null,
+        money: null,
+    });
+}
+
+const success = () => {
+    emits('success', po);
+}
+</script>
+
+<template>
+    <FormTitle>
+        <template #title>效果管理</template>
+
+        <a-form
+            class="mt-[30px]"
+            :model="po"
+            label-align="right"
+            :label-col-props="{span: 3}"
+            :wrapper-col-props="{span: 12, offset: 1}">
+
+            <a-form-item label="结算前">
+                <div class="w-full flex justify-between">
+                    <div class="max-w-[500px] info" v-if="!htList.length>0">
+                        *哪种情况少结算，及对应的扣除比例（当天发其他广告、未按照要求评论、未按照要求回填）建议最少设置一个未按要求发布作品，扣款100%的要求
+                    </div>
+
+                    <template v-if="htList.length>0">
+                        <div class="flex flex-col gap-[20px] w-full">
+                            <div v-for="(item, index) in htList" :key="item.id"
+                                 class="flex items-center whitespace-nowrap gap-[5px] w-full justify-between">
+                                当
+                                <XSelect
+                                    class="w-auto"
+                                    v-model:model-value="po.name"
+                                    :api="Api.system.getSelect">
+                                </XSelect>
+                                时，扣除
+                                <a-input-number class="w-[150px]"></a-input-number>
+                                %金额
+
+                                <div class="ml-auto flex gap-[8px]">
+                                    <a-button @click="htList.splice(index, 1)" type="outline" status="danger">
+                                        <template #icon>
+                                            <icon-minus/>
+                                        </template>
+                                        删除
+                                    </a-button>
+                                    <a-button
+                                        :style="{visibility: htList.length === index+1 ? 'visible' : 'hidden'}"
+                                        @click="addHT"
+                                        type="outline">
+                                        <template #icon>
+                                            <icon-plus/>
+                                        </template>
+                                        添加
+                                    </a-button>
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+
+
+                    <a-button v-if="!htList.length>0" @click="addHT" type="outline">添加</a-button>
+                </div>
+            </a-form-item>
+
+            <a-form-item label="结算后" extra="*如有其他要求，可联系管理员添加">
+                <div class="max-w-[618px]">
+                    <a-checkbox-group>
+                        <a-checkbox value="1">未到约定期限，达人提前删除视频处罚 ，扣除1点达人信用分</a-checkbox>
+                        <a-checkbox value="0">
+                            约定期限内，达人不配合删除或者维护评论区，扣除1点达人信用分（需支付额外费用，只保证达人愿意配合）
+                        </a-checkbox>
+                    </a-checkbox-group>
+                </div>
+            </a-form-item>
+
+            <a-form-item class="mt-[30px]">
+                <a-button type="primary" @click="success">下一步</a-button>
+            </a-form-item>
+        </a-form>
+    </FormTitle>
+</template>
+
+<style lang="scss" scoped>
+.info {
+    color: rgb(134, 144, 156);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0;
+    text-align: left;
+}
+</style>

src/pages/merchant/pages/task-center/components/new-task-7.vue

@@ -0,0 +1,39 @@
+<script setup>
+import Api from "../../../../../api/index.js";
+import XSelect from "../../../../../components/XSelect/index.vue";
+import FormTitle from "../../../../../components/FormTitle/index.vue";
+import {reactive} from "vue";
+import {v4} from "uuid";
+
+const emits = defineEmits(['success']);
+
+const success = () => {
+    emits('success', po);
+}
+</script>
+
+<template>
+    <FormTitle>
+        <template #title>效果管理</template>
+
+        <a-result title="创建成功" subtitle="任务创建成功" status="success">
+            <template #extra>
+                <a-space>
+                    <a-button type="secondary">查看任务</a-button>
+                    <a-button type="primary">再次创建</a-button>
+                </a-space>
+            </template>
+        </a-result>
+    </FormTitle>
+</template>
+
+<style lang="scss" scoped>
+.info {
+    color: rgb(134, 144, 156);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0;
+    text-align: left;
+}
+</style>

src/pages/merchant/pages/task-center/index.vue

@@ -1,13 +1,18 @@
 <script setup>
+import {onMounted} from 'vue';
+import {useRoute} from "vue-router";
 
+const route = useRoute();
+
+onMounted(() => {
+    console.log('路由', route);
+})
 </script>
 
 <template>
     <!-- 任务中心 -->
-    <div id="Item-View" class="p-[20px] h-full">
-        <a-card>
+    <div id="Item-View">
         <router-view></router-view>
-        </a-card>
     </div>
 </template>
 

src/pages/merchant/pages/task-center/new-task.vue

@@ -0,0 +1,73 @@
+<script setup>
+import {ref, reactive} from 'vue';
+import NewTask1 from "./components/new-task-1.vue";
+import NewTask2 from "./components/new-task-2.vue";
+import NewTask3 from "./components/new-task-3.vue";
+import NewTask4 from "./components/new-task-4.vue";
+import NewTask5 from "./components/new-task-5.vue";
+import NewTask6 from "./components/new-task-6.vue";
+import NewTask7 from "./components/new-task-7.vue";
+
+const step = ref(1);
+const form = reactive({});
+
+const success = async (po) => {
+    Object.assign(form, po);
+
+    if (step.value < 8) {
+        step.value++;
+    }
+}
+</script>
+
+<template>
+    <div class="mb-[20px]">
+        <a-breadcrumb>
+            <a-breadcrumb-item>任务中心</a-breadcrumb-item>
+            <a-breadcrumb-item>悬赏任务</a-breadcrumb-item>
+            <a-breadcrumb-item>新建任务</a-breadcrumb-item>
+        </a-breadcrumb>
+    </div>
+
+    <div class="p-[20px] bg-[#fff] mb-[20px]">
+        <a-steps :current="step">
+            <a-step>任务简介</a-step>
+            <a-step>发布管理</a-step>
+            <a-step>控评管理</a-step>
+            <a-step>回填管理</a-step>
+            <a-step>时间管理</a-step>
+            <a-step>效果管理</a-step>
+            <a-step>完成创建</a-step>
+        </a-steps>
+    </div>
+
+    <a-card class="flex-grow text-[14px]">
+        <new-task1 v-if="step === 1" @success="success"></new-task1>
+        <new-task2 v-if="step === 2" @success="success"></new-task2>
+        <new-task3 v-if="step === 3" @success="success"></new-task3>
+        <new-task4 v-if="step === 4" @success="success"></new-task4>
+        <new-task5 v-if="step === 5" @success="success"></new-task5>
+        <new-task6 v-if="step === 6" @success="success"></new-task6>
+        <new-task7 v-if="step === 7" @success="success"></new-task7>
+    </a-card>
+</template>
+
+<style lang="scss" scoped>
+.upload-text {
+    color: rgb(134, 144, 156);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.rate-text {
+    color: rgb(22, 93, 255);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0;
+    text-align: left;
+}
+</style>

src/pages/merchant/pages/task-center/reward-mission.vue

@@ -133,6 +133,7 @@ const {loading, pagination, initFetchData} = useTableQuery({
 </script>
 
 <template>
+    <a-card>
         <!-- 悬赏任务 -->
         <Filter v-model:from="po" :config="FilterConfig" @search="initFetchData"></Filter>
 
@@ -204,6 +205,7 @@ const {loading, pagination, initFetchData} = useTableQuery({
                 </template>
             </a-table>
         </div>
+    </a-card>
 </template>
 
 <style scoped>

src/pinia/SystemStore/mock.js

@@ -5,12 +5,18 @@ const mockRoutes = [
         title: '任务中心',
         icon: '',
         component: 'task-center',
+        meta: {
+            name: '任务中心'
+        },
         children: [
             {
                 path: 'reward-mission',
                 name: 'reward-mission',
                 title: '悬赏任务',
                 icon: '',
+                meta: {
+                    name: '悬赏任务'
+                },
                 component: 'reward-mission',
             },
             {
@@ -18,7 +24,20 @@ const mockRoutes = [
                 name: 'appointed-task',
                 title: '任务指派',
                 icon: '',
+                meta: {
+                    name: '任务指派'
+                },
                 component: 'appointed-task',
+            },
+            {
+                path: 'new-task',
+                name: 'new-task',
+                title: '新建任务',
+                icon: '',
+                meta: {
+                    name: '新建任务'
+                },
+                component: 'new-task',
             }
         ]
     },
@@ -27,6 +46,9 @@ const mockRoutes = [
         name: 'communication-center',
         title: '沟通中心',
         icon: '',
+        meta: {
+            name: '沟通中心'
+        },
         component: 'communication-center',
     }
 ];

src/router/generateRouter.js

@@ -4,6 +4,8 @@ const generateRouter = (routes) => {
     return routes.map(v => ({
         path: v.path,
         name: v.name,
+        title: v.title,
+        meta: v.meta,
         component: routesMap[v.component],
         children: v.children && v.children.length > 0 && [
             {path: '', redirect: `/home/${v.name}/${v.children[0].name}`},

src/router/routes-map.js

@@ -2,6 +2,8 @@ const routesMap = {
     'task-center': () => import('../pages/merchant/pages/task-center/index.vue'),
     'reward-mission': () => import('../pages/merchant/pages/task-center/reward-mission.vue'),
     'appointed-task': () => import('../pages/merchant/pages/task-center/appointed-task.vue'),
+    'new-task': () => import('../pages/merchant/pages/task-center/new-task.vue'),
+
     'communication-center': () => import('../pages/merchant/pages/communication-center/index.vue'),
 };
 

src/scss/global.scss

@@ -9,10 +9,8 @@
 body {
     background-color: var(--main-bg-color);
 }
-#Item-View {
-    .arco-card-body {
-        @apply p-[20px];
-    }
+.test {
+    border: 1px solid red;
 }
 .demo-basic { // 默认下拉框样式
   padding: 5px;
@@ -25,14 +23,15 @@ body {
     color: var(--color-text-2) !important;
 }
 #Item-View {
+    @apply flex flex-col p-[20px] min-h-full overflow-auto;
     .arco-card {
-        @apply h-full;
+        @apply min-h-full flex-grow flex;
         .arco-card-body {
-            @apply h-full flex flex-col;
+            @apply min-h-full flex flex-col p-[20px] flex-grow;
             .arco-table-container {
-                @apply h-full;
+                @apply min-h-full;
                 .arco-table-element {
-                    @apply h-full;
+                    @apply min-h-full;
                 }
             }
         }