update

src/components/OriginTag/index.vue

@@ -0,0 +1,31 @@
+<script setup>
+const {color} = defineProps({
+    color: {
+        type: String,
+        default: 'red',
+    }
+});
+</script>
+
+<template>
+    <div class="origin-tag">
+        <slot></slot>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.origin-tag {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &::before {
+        content: '';
+        display: block;
+        border-radius: 50%;
+        width: 6px;
+        aspect-ratio: 1 / 1;
+        background-color: v-bind(color);
+    }
+}
+</style>

src/pages/layout/index.vue

@@ -29,10 +29,12 @@ import LayoutSider from '../../components/LayoutSider/index.vue';
 .fade-enter-active,
 .fade-leave-active {
     transition: opacity 0.5s;
+    position: relative;
 }
 
 .fade-enter-from,
 .fade-leave-to {
     opacity: 0;
+    position: absolute;
 }
 </style>

src/pages/merchant/components/Alipay.vue

@@ -0,0 +1,77 @@
+<script setup>
+import {ref} from "vue";
+
+const visible = ref(false);
+</script>
+
+<template>
+    <a-button type="primary" @click="visible=true">立即充值</a-button>
+
+    <a-modal
+        :footer="false"
+        id="Alipay-Modal"
+        title-align="start"
+        title="支付宝支付"
+        v-model:visible="visible">
+        <template v-if="true">
+            <a-alert>平台提示：支付后未出现成功提示，点击【我已支付】刷新充值状态</a-alert>
+
+            <div class="py-[24px] px-[20px]">
+                <div class="flex justify-center gap-[15px]">
+                    支付金额: <span class="text-[rgb(var(--arcoblue-6))]">200元</span>
+                </div>
+                <div class="text-center mt-[20px]">打开支付宝扫描下方二维码支付</div>
+                <div class="w-[200px] aspect-square mx-auto mt-[5px]">
+                    <img class="w-full h-full object-cover" src="" alt=""/>
+                </div>
+                <div class="flex justify-center mt-[5px] flex-col items-center">
+                    <a-link :hoverable="false" style="color: var(--color-neutral-6)">
+                        <icon-sync class="mr-[5px]"/>
+                        点击刷新
+                    </a-link>
+                    <a-button class="mx-auto mt-[20px]" type="primary">我已支付</a-button>
+                </div>
+
+                <div class="mt-[20px] info mb-[40px]">
+                    <div>支付遇到问题?</div>
+                    <div>1、请先确认第三方支付网站是否交易完成。</div>
+                    <div>2、第三方支付网站显示交易成功，但账户中没有充值流水，请私聊客服</div>
+                </div>
+            </div>
+        </template>
+
+        <template v-else>
+            <div class="py-[24px] px-[20px]">
+                <a-result status="success" title="充值成功">
+                    <template #subtitle>
+                        支付宝付款￥200.00
+                    </template>
+                    <template #extra>
+                        <a-space>
+                            <a-button type='primary'>确定</a-button>
+                        </a-space>
+                    </template>
+                </a-result>
+            </div>
+        </template>
+    </a-modal>
+</template>
+
+<style lang="scss" scoped>
+.info {
+    color: rgb(78, 89, 105);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0;
+    text-align: left;
+}
+</style>
+
+<style lang="scss">
+#Alipay-Modal {
+    .arco-modal-body {
+        padding: 0;
+    }
+}
+</style>

src/pages/merchant/components/BlackjackExpertModal.vue

@@ -0,0 +1,66 @@
+<script setup>
+import {reactive} from 'vue';
+import Api from "../../../api/index.js";
+import XSelect from "../../../components/XSelect/index.vue";
+
+const visible = defineModel('visible');
+
+const form = reactive({
+    blackoutDuration: 1,
+    value: null,
+    blackoutValue: 50,
+});
+</script>
+
+<template>
+    <a-modal
+        :width="600"
+        ok-text="确认拉黑"
+        title-align="start"
+        title="拉黑达人"
+        v-model:visible="visible">
+        <a-form layout="vertical" :model="form">
+            <a-form-item label="拉黑时间">
+                <a-radio-group
+                    type="button"
+                    v-model:model-value="form.blackoutDuration">
+                    <a-radio :value="1">1天</a-radio>
+                    <a-radio :value="2">3天</a-radio>
+                    <a-radio :value="3">7天</a-radio>
+                    <a-radio :value="4">30天</a-radio>
+                    <a-radio :value="5">永久</a-radio>
+                    <a-radio :value="6">自定义</a-radio>
+                </a-radio-group>
+                <a-input-number
+                    v-model:model-value="form.blackoutValue"
+                    default-value="50"
+                    mode="button"
+                    class="w-[150px]">
+                    <template #suffix>
+                        天
+                    </template>
+                </a-input-number>
+            </a-form-item>
+
+            <a-form-item label="拉黑效果">
+                <XSelect
+                    placeholder="请选择拉黑效果"
+                    v-model:model-value="form.value"
+                    :api="Api.system.getSelect">
+                </XSelect>
+            </a-form-item>
+
+            <a-form-item label="拉黑原因">
+                <a-textarea
+                    show-word-limit
+                    :max-length="100"
+                    placeholder="请输入拉黑原因">
+                </a-textarea>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<style scoped>
+
+</style>

src/pages/merchant/components/TerminateTask.js

@@ -0,0 +1,62 @@
+import {Modal, Tag} from "@arco-design/web-vue";
+import {h} from 'vue';
+
+const ModalContent = {
+    props: {
+        status: {
+            type: String,
+            default: 'success',
+        },
+        status_text: {
+            type: String,
+            default: null,
+        }
+    },
+    setup(props) {
+        switch (props.status) {
+            case 'success':
+                return () => h('div', {}, [
+                    h('div', {class: 'flex items-center gap-[8px]'}, [
+                        h('div', {}, '该子任务状态为:'),
+                        h(Tag, {color: 'orangered'}, props.status_text)
+                    ]),
+                    h('div', {class: 'text-[14px] text-[rgb(78, 89, 105)]'}, '点击终止子任务后，达人将无法再领取子任务')
+                ]);
+            case 'warning':
+                return () => h('div', {}, [
+                    h('div', {class: 'flex items-center gap-[8px]'}, [
+                        h('div', {}, '该子任务状态为:'),
+                        h(Tag, {color: 'orangered'}, props.status_text)
+                    ]),
+                    h('div', {class: 'text-[14px] text-[rgb(78, 89, 105)]'}, '无法终止')
+                ]);
+        }
+    }
+}
+
+const openTerminateTask = (type, status_text = '待上传素材') => {
+    const status = 'success';
+
+    Modal.warning({
+        title: '确认终止子任务',
+        draggable: true,
+        hideCancel: false,
+        content: () =>
+            h(
+                ModalContent,
+                {
+                    status: 'success',
+                    status_text: status_text
+                }
+            ),
+        okButtonProps: {
+            status: 'danger',
+        },
+        okText: status === 'success' ? '确认终止' : '确认',
+        onOk: () => {
+
+        }
+    });
+}
+
+export default openTerminateTask;

src/pages/merchant/pages/communication-center/components/look-backfill-modal.vue

@@ -0,0 +1,63 @@
+<script setup>
+import {ref} from 'vue';
+import RefuseModal from "../../task-center/components/RefuseModal.vue";
+import OriginTag from "../../../../../components/OriginTag/index.vue";
+
+const columns = [
+    {
+        title: '回传数据',
+        dataIndex: 'backData',
+        slotName: 'backData'
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        slotName: 'action',
+    },
+    {
+        title: '回传数据状态',
+        dataIndex: 'backStatus',
+        slotName: 'backStatus',
+    },
+];
+const visible = ref(false);
+</script>
+
+<template>
+    <a-link :hoverable="false" @click="visible=true">查看回填</a-link>
+
+    <a-modal
+        title-align="start"
+        title="查看回填"
+        v-model:visible="visible">
+        <a-table
+            :pagination="false"
+            :data="[{},{}]"
+            :columns="columns">
+            <template v-slot:backData>
+                <a-link :hoverable="false" href="https://baidu.com">https://baidu.com</a-link>
+            </template>
+
+            <template v-slot:action>
+                <div class="flex gap-[16px] justify-center items-center">
+                    <a-link :hoverable="false" status="success">通过</a-link>
+
+                    <RefuseModal></RefuseModal>
+                </div>
+            </template>
+
+            <template v-slot:backStatus>
+                <div>
+                    <OriginTag color="rgb(var(--success-6))">已通过</OriginTag>
+                    <OriginTag color="rgb(var(--orange-6))">在此之前完成审核</OriginTag>
+                    <OriginTag color="rgb(var(--arcoblue-6))">等待回填</OriginTag>
+                    <OriginTag color="var(--color-neutral-4)">/</OriginTag>
+                </div>
+            </template>
+        </a-table>
+    </a-modal>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -3,6 +3,7 @@ import Filter from "../../../../components/Filter/index.vue";
 import {reactive, computed} from "vue";
 import useTableQuery from "../../../../hooks/useTableQuery.js";
 import Api from "../../../../api/index.js";
+import LookBackfillModal from "./components/look-backfill-modal.vue";
 
 const columns = [
     {
@@ -109,19 +110,20 @@ const {loading, pagination, initFetchData} = useTableQuery({
 
 <template>
     <!-- 沟通中心 -->
-    <div id="Item-View" class="p-[20px] h-full">
+    <div id="Item-View">
         <a-card>
             <Filter v-model:from="po" :config="FilterConfig" @search="initFetchData"></Filter>
 
-            <div class="py-[20px]">
-                <a-tabs type="rounded">
+            <a-tabs class="pt-[20px]" type="rounded">
                 <a-tab-pane title="待回复" :key="1">
                 </a-tab-pane>
                 <a-tab-pane title="已完成" :key="2">
                 </a-tab-pane>
             </a-tabs>
 
+            <div class="flex-grow">
                 <a-table
+                    class="h-full"
                     @page-change="(e) => pagination.current = e"
                     :pagination="pagination"
                     :loading="loading"
@@ -134,7 +136,7 @@ const {loading, pagination, initFetchData} = useTableQuery({
                         </div>
                     </template>
                     <template v-slot:htsj>
-                        <a-link :hoverable="false">查看回填</a-link>
+                        <look-backfill-modal></look-backfill-modal>
                     </template>
                     <template v-slot:drfk>
                         <a-badge :count="9" dot :dotStyle="{ width: '10px', height: '10px' }">

src/pages/merchant/pages/expert-management/blackout-management.vue

@@ -1,11 +1,106 @@
 <script setup>
+import useTableQuery from "../../../../hooks/useTableQuery.js";
+import Api from "../../../../api/index.js";
+import {reactive} from "vue";
 
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'key',
+    },
+    {
+        title: '渠道',
+        dataIndex: 'key',
+    },
+    {
+        title: '已拉黑达人',
+        dataIndex: 'key',
+    },
+    {
+        title: '拉黑原因',
+        dataIndex: 'key',
+    },
+    {
+        title: '拉黑效果',
+        dataIndex: 'key',
+    },
+    {
+        title: '拉黑开始日期',
+        dataIndex: 'key',
+    },
+    {
+        title: '拉黑结束日期',
+        dataIndex: 'key',
+    },
+    {
+        title: '关联任务ID',
+        dataIndex: 'key',
+    },
+    {
+        title: '关联子任务ID',
+        dataIndex: 'key',
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        slotName: 'action',
+        width: 100,
+    },
+]
+
+const vo = reactive({
+    page: '',
+    rows: [],
+    total: 0,
+});
+const po = reactive({
+    wd: null,
+});
+
+const {loading, pagination, initFetchData} = useTableQuery({
+    parameter: po,
+    api: Api.system.getData,
+    callback: (data) => {
+        Object.assign(vo, data);
+        console.log(vo);
+    }
+});
 </script>
 
 <template>
     <!-- 拉黑管理 -->
+    <div class="mb-[20px]">
+        <a-breadcrumb
+            :routes="[{path: '/home/expert-management', label: '达人管理'}, {path: '/', label: '拉黑管理'},]">
+        </a-breadcrumb>
+    </div>
+
+    <a-card>
+        <div class="title">拉黑管理</div>
+
+        <div class="flex-grow">
+            <a-table
+                class="h-full"
+                :data="vo.rows"
+                @page-change="(e) => pagination.current = e"
+                :pagination="pagination"
+                :loading="loading"
+                :columns="columns">
+                <template v-slot:action>
+                    <a-link :hoverable="false" :disabled="false">取消拉黑</a-link>
+                </template>
+            </a-table>
+        </div>
+    </a-card>
 </template>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0;
+    margin-bottom: 20px;
+}
 </style>

src/pages/merchant/pages/expert-management/effect-management.vue

@@ -1,11 +1,111 @@
 <script setup>
+import OriginTag from "../../../../components/OriginTag/index.vue";
+import useTableQuery from "../../../../hooks/useTableQuery.js";
+import Api from "../../../../api/index.js";
+import {reactive} from "vue";
 
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'key',
+    },
+    {
+        title: '达人',
+        dataIndex: 'key',
+    },
+    {
+        title: '处罚理由',
+        dataIndex: 'key',
+    },
+    {
+        title: '处罚结果',
+        dataIndex: 'key',
+    },
+    {
+        title: '进度',
+        dataIndex: 'status',
+        slotName: 'status',
+    },
+    {
+        title: '提交日期',
+        dataIndex: 'key',
+    },
+    {
+        title: '关联任务ID',
+        dataIndex: 'key',
+    },
+    {
+        title: '关联子任务ID',
+        dataIndex: 'key',
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        slotName: 'action',
+        width: 100,
+    },
+]
+
+const vo = reactive({
+    page: '',
+    rows: [],
+    total: 0,
+});
+const po = reactive({
+    wd: null,
+});
+
+const {loading, pagination, initFetchData} = useTableQuery({
+    parameter: po,
+    api: Api.system.getData,
+    callback: (data) => {
+        Object.assign(vo, data);
+        console.log(vo);
+    }
+});
 </script>
 
 <template>
     <!-- 效果管理 -->
+    <div class="mb-[20px]">
+        <a-breadcrumb
+            :routes="[{path: '/home/expert-management', label: '达人管理'}, {path: '/', label: '拉黑管理'},]">
+        </a-breadcrumb>
+    </div>
+
+    <a-card>
+        <div class="title">效果管理</div>
+
+        <div class="flex-grow">
+            <a-table
+                class="h-full"
+                :data="vo.rows"
+                @page-change="(e) => pagination.current = e"
+                :pagination="pagination"
+                :loading="loading"
+                :columns="columns">
+                <template v-slot:status>
+                    <OriginTag color="rgb(var(--success-6))">已生效</OriginTag>
+                    <OriginTag color="rgb(var(--orange-6))">审核中</OriginTag>
+                    <OriginTag color="rgb(var(--arcoblue-6))">达人申诉成功</OriginTag>
+                    <OriginTag color="rgb(var(--red-6))">已拒绝</OriginTag>
+                </template>
+
+                <template v-slot:action>
+                    <a-link :hoverable="false" :disabled="false">撤销</a-link>
+                </template>
+            </a-table>
+        </div>
+    </a-card>
 </template>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0;
+    margin-bottom: 20px;
+}
 </style>

src/pages/merchant/pages/expert-management/index.vue

@@ -1,11 +1,25 @@
 <script setup>
-
 </script>
 
 <template>
     <!-- 达人管理 -->
+    <div id="Item-View">
+        <transition name="fade">
+            <router-view></router-view>
+        </transition>
+    </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s;
+    position: relative;
+}
 
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+    position: absolute;
+}
 </style>

src/pages/merchant/pages/my-wallet/components/Recharge.vue

@@ -0,0 +1,41 @@
+<script setup>
+
+import Alipay from "../../../components/Alipay.vue";
+</script>
+
+<template>
+    <!-- 我的充值 -->
+    <div class="info-card mb-[40px]">
+        <div>1.该金额将会充值到钱包，创建任务时，将优先使用钱包内的余额。</div>
+        <div>2.若遇到充值未到账，请联系客服</div>
+    </div>
+
+    <a-form>
+        <a-form-item label="立即充值">
+            <a-input-number class="w-1/2" placeholder="输入金额"></a-input-number>
+        </a-form-item>
+
+        <a-form-item class="mt-[40px]">
+            <Alipay></Alipay>
+        </a-form-item>
+    </a-form>
+</template>
+
+<style lang="scss" scoped>
+.info-card {
+    background: rgb(247, 248, 250);
+    padding: 12px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    div {
+        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/my-wallet/components/Reflect.vue

@@ -0,0 +1,32 @@
+<script setup>
+
+</script>
+
+<template>
+    <!-- 我的提现 -->
+    <div class="info-card mb-[40px]">
+        <div>1.打款时间：工作日11:00-19:00。双休日和法定节假日期间，需要等正常上班之后处理。</div>
+        <div>2.提现门槛：余额满1元即可提现</div>
+        <div>3.提现账户：最多可设置6个提现账户，超出请删除再进行添加</div>
+        <div>4.提示：如果填写的提现账户信息不正确，提现将无法成功</div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.info-card {
+    background: rgb(247, 248, 250);
+    padding: 12px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    div {
+        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/my-wallet/index.vue

@@ -4,8 +4,23 @@
 
 <template>
     <!-- 我的钱包 -->
+    <div id="Item-View">
+        <transition name="fade">
+            <router-view></router-view>
+        </transition>
+    </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s;
+    position: relative;
+}
 
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+    position: absolute;
+}
 </style>

src/pages/merchant/pages/my-wallet/moving-account-details.vue

@@ -4,6 +4,15 @@
 
 <template>
     <!-- 动账明细 -->
+    <div class="mb-[20px]">
+        <a-breadcrumb
+            :routes="[{path: '/home/my-wallet', label: '我的钱包'}, {path: '/', label: '动账明细'},]">
+        </a-breadcrumb>
+    </div>
+
+    <a-card>
+
+    </a-card>
 </template>
 
 <style scoped>

src/pages/merchant/pages/my-wallet/recharge.vue

@@ -1,11 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-    <!-- 充值 -->
-</template>
-
-<style scoped>
-
-</style>

src/pages/merchant/pages/my-wallet/reflect.vue

@@ -1,11 +0,0 @@
-<script setup>
-
-</script>
-
-<template>
-    <!-- 提现 -->
-</template>
-
-<style scoped>
-
-</style>

src/pages/merchant/pages/my-wallet/wallet-overview.vue

@@ -0,0 +1,129 @@
+<script setup>
+import Recharge from "./components/Recharge.vue";
+import Reflect from "./components/Reflect.vue";
+import {reactive} from "vue";
+import useTableQuery from "../../../../hooks/useTableQuery.js";
+import Api from "../../../../api/index.js";
+
+const columns = [
+    {
+        title: '充值日期',
+        dataIndex: 'key'
+    },
+    {
+        title: '充值时间',
+        dataIndex: 'key'
+    },
+    {
+        title: '交易流水号',
+        dataIndex: 'key'
+    },
+    {
+        title: '动账渠道',
+        dataIndex: 'key'
+    },
+    {
+        title: '动账用途',
+        dataIndex: 'key'
+    },
+    {
+        title: '充值金额(元)',
+        dataIndex: 'key'
+    },
+    {
+        title: '付款人账户',
+        dataIndex: 'key'
+    },
+    {
+        title: '收款人账户',
+        dataIndex: 'key'
+    },
+];
+
+const vo = reactive({
+    page: '',
+    rows: [],
+    total: 0,
+});
+const po = reactive({
+    wd: null,
+});
+
+const {loading, pagination, initFetchData} = useTableQuery({
+    parameter: po,
+    api: Api.system.getData,
+    callback: (data) => {
+        Object.assign(vo, data);
+        console.log(vo);
+    }
+});
+</script>
+
+<template>
+    <!-- 概览 -->
+    <div class="mb-[20px]">
+        <a-breadcrumb
+            :routes="[{path: '/home/my-wallet', label: '我的钱包'}, {path: '/', label: '概览'},]">
+        </a-breadcrumb>
+    </div>
+
+    <div class="flex-grow flex flex-col gap-[20px]">
+        <div class="mock-card grid grid-cols-5 gap-[20px]" id="statistic-card">
+            <div class="bg-[rgb(var(--arcoblue-1))] p-[20px]">
+                <a-statistic title="钱包余额(元)" :value="8.06" :precision="2" :value-from="0" animation></a-statistic>
+            </div>
+            <div class="bg-[rgb(var(--arcoblue-1))] p-[20px]">
+                <a-statistic title="任务款余额(元)" :value="8.06" :precision="2" :value-from="0"
+                             animation></a-statistic>
+            </div>
+            <div class="bg-[rgb(var(--arcoblue-1))] p-[20px]">
+                <a-statistic title="累计充值(元)" :value="8.06" :precision="2" :value-from="0" animation></a-statistic>
+            </div>
+            <div class="bg-[rgb(var(--arcoblue-1))] p-[20px]">
+                <a-statistic title="累计消耗(元)" :value="8.06" :precision="2" :value-from="0" animation></a-statistic>
+            </div>
+            <div class="bg-[rgb(var(--arcoblue-1))] p-[20px]">
+                <a-statistic title="累计提现(元)" :value="8.06" :precision="2" :value-from="0" animation></a-statistic>
+            </div>
+        </div>
+
+        <a-card>
+            <a-tabs type="rounded">
+                <a-tab-pane key="Recharge" title="我的充值">
+                    <Recharge></Recharge>
+                </a-tab-pane>
+                <a-tab-pane key="Reflect" title="我的提现">
+                    <Reflect></Reflect>
+                </a-tab-pane>
+            </a-tabs>
+        </a-card>
+
+        <div class="mock-card">
+            <div class="title">充值记录</div>
+            <a-table
+                @page-change="(e) => pagination.current = e"
+                :pagination="pagination"
+                :data="vo.rows"
+                :loading="loading"
+                :columns="columns">
+            </a-table>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+#statistic-card {
+    :deep(.arco-statistic-value) {
+        color: rgb(var(--arcoblue-6));
+    }
+}
+
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0;
+    margin-bottom: 20px;
+}
+</style>

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

@@ -0,0 +1,58 @@
+<script setup>
+import {ref, reactive} from "vue";
+import RefuseModalForm1 from "./refuse-modal-form1.vue";
+import RefuseModalForm2 from "./refuse-modal-form2.vue";
+
+const formRef = ref();
+const form = reactive({});
+const visible = ref(false);
+const step = ref(1);
+
+const next = () => {
+    const temp = formRef.value.success();
+    Object.assign(form, temp);
+    if (step.value === 2) {
+
+    } else {
+        step.value++;
+    }
+}
+</script>
+
+<template>
+    <a-link :hoverable="false" status="danger" @click="visible = true">拒绝</a-link>
+
+    <a-modal
+        width="600px"
+        class="refuse-modal"
+        v-model:visible="visible"
+        title-align="start"
+        title="拒绝">
+        <a-alert>平台提示：所有沟通内容均由人工审核，请勿脱离平台交易，请勿发送违规内容，违者...</a-alert>
+        <div class="px-[30px] py-[16px]">
+            <a-config-provider size="mini">
+                <refuse-modal-form1 ref="formRef" v-if="step === 1"></refuse-modal-form1>
+                <refuse-modal-form2 ref="formRef" v-if="step === 2"></refuse-modal-form2>
+            </a-config-provider>
+        </div>
+
+        <template #footer>
+            <div class="flex flex-row-reverse">
+                <a-button @click="next" type="primary">下一步</a-button>
+            </div>
+        </template>
+    </a-modal>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
+
+<style lang="scss">
+.refuse-modal {
+    .arco-modal-body {
+        padding: 0;
+        min-height: 500px;
+    }
+}
+</style>

src/pages/merchant/pages/task-center/components/refuse-modal-form1.vue

@@ -0,0 +1,52 @@
+<script setup>
+import {reactive} from 'vue';
+
+const form = reactive({});
+
+const success = () => {
+    return form;
+}
+
+defineExpose({
+    success,
+});
+</script>
+
+<template>
+    <a-form layout="vertical">
+        <a-form-item label="常见拒绝原因">
+            <a-checkbox-group>
+                <div class="grid grid-cols-3 gap-[10px]">
+                    <a-checkbox>标题错误</a-checkbox>
+                    <a-checkbox>评论区未见评论</a-checkbox>
+                    <a-checkbox>素材发布错误</a-checkbox>
+                    <a-checkbox>访问链接看不到作品</a-checkbox>
+                    <a-checkbox>话题携带错误</a-checkbox>
+                </div>
+            </a-checkbox-group>
+        </a-form-item>
+
+        <a-form-item label="自定义拒绝原因">
+            <div class="grid grid-cols-3 gap-[10px]">
+                <a-checkbox>少结算或者不结算理由</a-checkbox>
+                <a-checkbox>当天发布任意广告</a-checkbox>
+                <a-checkbox>当天发布竞品广告</a-checkbox>
+            </div>
+        </a-form-item>
+
+        <a-form-item label="其他原因">
+            <a-textarea
+                :auto-size="{minRows: 3}"
+                placeholder="在此输入拒绝的原因，方便达人理解">
+            </a-textarea>
+        </a-form-item>
+
+        <a-form-item label="其他原因">
+
+        </a-form-item>
+    </a-form>
+</template>
+
+<style scoped>
+
+</style>

src/pages/merchant/pages/task-center/components/refuse-modal-form2.vue

@@ -0,0 +1,85 @@
+<script setup>
+import {reactive} from 'vue';
+
+const form = reactive({
+    isSuggestion: 1,
+    suggestion: 0,
+});
+
+const success = () => {
+    return form;
+}
+
+defineExpose({
+    success,
+});
+</script>
+
+<template>
+    <a-form layout="vertical" :model="form">
+        <a-form-item label="是否提供修改建议">
+            <a-radio-group v-model:model-value="form.isSuggestion">
+                <a-radio :value="1">是</a-radio>
+                <a-radio :value="0">否（拒绝达人本次回填，也无需达人进行后续的回填）</a-radio>
+            </a-radio-group>
+        </a-form-item>
+
+        <template v-if="form.isSuggestion===1">
+            <a-form-item label="修改建议">
+                <div class="w-full">
+                    <a-radio-group v-model:model-value="form.suggestion" direction="vertical">
+                        <a-radio :value="0">请截图账号主页截图，证明发布了该素材</a-radio>
+                        <a-radio :value="1">请删除后，按要求重新发布素材</a-radio>
+                        <a-radio :value="2">请删除现有评论，按要求重新发布评论</a-radio>
+                        <a-radio :value="3">其他</a-radio>
+                    </a-radio-group>
+
+                    <div v-if="form.suggestion === 3">
+                        <a-textarea
+                            :auto-size="{minRows: 3}"
+                            placeholder="在此输入拒绝的原因，方便达人理解">
+                        </a-textarea>
+                        <a-upload>
+                        </a-upload>
+                    </div>
+                </div>
+            </a-form-item>
+
+            <a-form-item label="*是否要求达人重新回填当前《回填数据1》">
+                <a-radio-group>
+                    <a-radio>
+                        是&nbsp;&nbsp;&nbsp;请最晚于
+                        <a-date-picker
+                            format="YYYY-MM-DD HH:mm:ss"
+                            show-time>
+                        </a-date-picker>
+                        之前，完成重新回填
+                    </a-radio>
+                    <div class="info ml-[30px] mb-[15px]">如果给达人提供的修改建议导致回填数据有变动，请点击此项</div>
+                    <a-radio>
+                        <div class="flex whitespace-nowrap items-center gap-[4px]">
+                            否&nbsp;&nbsp;&nbsp;请最晚于
+                            <a-date-picker
+                                format="YYYY-MM-DD HH:mm:ss"
+                                show-time>
+                            </a-date-picker>
+                            之前，在我的回填中回复
+                            <a-input class="w-auto" placeholder="请输入"></a-input>
+                        </div>
+                    </a-radio>
+                </a-radio-group>
+            </a-form-item>
+        </template>
+    </a-form>
+</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,12 +1,4 @@
 <script setup>
-import {onMounted} from 'vue';
-import {useRoute} from "vue-router";
-
-const route = useRoute();
-
-onMounted(() => {
-    console.log('路由', route);
-})
 </script>
 
 <template>
@@ -22,10 +14,12 @@ onMounted(() => {
 .fade-enter-active,
 .fade-leave-active {
     transition: opacity 0.5s;
+    position: relative;
 }
 
 .fade-enter-from,
 .fade-leave-to {
     opacity: 0;
+    position: absolute;
 }
 </style>

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

@@ -0,0 +1,178 @@
+<script setup>
+import OriginTag from "../../../../components/OriginTag/index.vue";
+import {reactive} from "vue";
+import useTableQuery from "../../../../hooks/useTableQuery.js";
+import Api from "../../../../api/index.js";
+import RefuseModal from "./components/RefuseModal.vue";
+import openTerminateTask from "../../components/TerminateTask.js";
+import BlackjackExpertModal from "../../components/BlackjackExpertModal.vue";
+
+const columns = [
+    {
+        title: '子任务号',
+        dataIndex: 'key',
+    },
+    {
+        title: '子任务状态',
+        dataIndex: 'status',
+        slotName: 'status',
+    },
+    {
+        title: '回传数据',
+        dataIndex: 'key',
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        slotName: 'action',
+        align: 'center',
+        width: 120,
+    },
+    {
+        title: '回传数据状态',
+        dataIndex: 'dataStatus',
+        slotName: 'dataStatus',
+    },
+    {
+        title: '领取时间',
+        dataIndex: 'key',
+    },
+    {
+        title: '达人反馈',
+        dataIndex: 'callback',
+        slotName: 'callback',
+        align: 'center',
+        width: 100,
+    },
+    {
+        title: '支付状态',
+        dataIndex: 'payStatus',
+        slotName: 'payStatus',
+        align: 'center',
+        width: 100,
+    },
+    {
+        title: '操作',
+        dataIndex: 'action2',
+        slotName: 'action2',
+        align: 'center',
+        width: 180,
+    },
+];
+const state = reactive({
+    openBlackjackExpertModal: false
+})
+
+const vo = reactive({
+    page: '',
+    rows: [],
+    total: 0,
+});
+const po = reactive({
+    wd: null,
+});
+
+const {loading, pagination, initFetchData} = useTableQuery({
+    parameter: po,
+    api: Api.system.getData,
+    callback: (data) => {
+        Object.assign(vo, data);
+        console.log(vo);
+    }
+});
+</script>
+
+<template>
+    <!-- 查看子任务 -->
+    <div class="mb-[20px]">
+        <a-breadcrumb
+            :routes="[{path: '/', label: '任务中心'}, {path: '/', label: '悬赏任务'}, {path: '/', label: '查看子任务'}]">
+        </a-breadcrumb>
+    </div>
+
+    <a-card class="flex-grow text-[14px]">
+        <div class="gap-[20px]">
+            <a-button type="primary">
+                <template #icon>
+                    <icon-apps/>
+                </template>
+                批量管理素材
+            </a-button>
+
+            <a-table
+                :data="vo.rows"
+                @page-change="(e) => pagination.current = e"
+                :pagination="pagination"
+                :span-method="spanMethod"
+                :loading="loading"
+                :columns="columns"
+                class="w-full mt-[20px]">
+                <template v-slot:status>
+                    <a-tag color="green">已领取</a-tag>
+                    <a-tag color="red">请重新上传素材</a-tag>
+                    <a-tag color="orangered">素材审核中</a-tag>
+                    <a-tag color="gray">待领取</a-tag>
+                    <a-tag color="arcoblue">已终止</a-tag>
+                </template>
+
+                <template v-slot:action>
+                    <div v-for="(item, index) in 2">
+                        <div class="flex gap-[16px] justify-center items-center">
+                            <a-link :hoverable="false" status="success">通过</a-link>
+
+                            <RefuseModal></RefuseModal>
+                        </div>
+                        <a-divider v-if="index+1 !== 2"></a-divider>
+                    </div>
+                </template>
+
+                <template v-slot:dataStatus>
+                    <div v-for="(item, index) in 2">
+                        <div>
+                            <OriginTag color="rgb(var(--success-6))">已通过</OriginTag>
+                            <OriginTag color="rgb(var(--orange-6))">在此之前完成审核</OriginTag>
+                            <OriginTag color="rgb(var(--arcoblue-6))">等待回填</OriginTag>
+                            <OriginTag color="var(--color-neutral-4)">/</OriginTag>
+                        </div>
+                        <a-divider v-if="index+1 !== 2"></a-divider>
+                    </div>
+                </template>
+
+                <template v-slot:callback>
+                    <a-link :hoverable="false">
+                        确认结算
+                    </a-link>
+                </template>
+
+                <template v-slot:payStatus>
+                    <a-link :hoverable="false" status="success">
+                        确认结算
+                    </a-link>
+                </template>
+
+                <template v-slot:action2>
+                    <div class="flex gap-[16px] justify-center items-center">
+                        <a-link :hoverable="false">查看素材</a-link>
+                        <a-dropdown :hide-on-select="false">
+                            <a-link :hoverable="false">
+                                更多
+                                <icon-down/>
+                            </a-link>
+                            <template #content>
+                                <a-doption>效果管理</a-doption>
+                                <a-doption @click="openTerminateTask">终止子任务</a-doption>
+                                <a-doption @click="state.openBlackjackExpertModal=true">拉黑达人</a-doption>
+                            </template>
+                        </a-dropdown>
+                    </div>
+                </template>
+            </a-table>
+        </div>
+    </a-card>
+
+    <BlackjackExpertModal v-model:visible="state.openBlackjackExpertModal"></BlackjackExpertModal>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -7,7 +7,9 @@ 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";
+import {useRoute} from "vue-router";
 
+const routes = useRoute();
 const step = ref(1);
 const form = reactive({});
 
@@ -22,14 +24,11 @@ const success = async (po) => {
 
 <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 :routes="[{path: '/', label: '任务中心'}, {path: '/', label: '悬赏任务'}, {path: '/', label: '新建任务'}]">
         </a-breadcrumb>
     </div>
 
-    <div class="p-[20px] bg-[#fff] mb-[20px]">
+    <div class="mock-card mb-[20px]">
         <a-steps :current="step">
             <a-step>任务简介</a-step>
             <a-step>发布管理</a-step>

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

@@ -138,7 +138,6 @@ const {loading, pagination, initFetchData} = useTableQuery({
         <!-- 悬赏任务 -->
         <Filter v-model:from="po" :config="FilterConfig" @search="initFetchData"></Filter>
 
-        <div class="my-[20px] flex-grow flex flex-col">
         <div class="flex gap-[16px] mb-[20px]">
             <a-button type="primary" @click="toPath('/home/task-center/new-task')">
                 <template #icon>
@@ -154,8 +153,9 @@ const {loading, pagination, initFetchData} = useTableQuery({
             </a-button>
         </div>
 
+        <div class="mt-[20px] flex-grow">
             <a-table
-                class="flex-grow"
+                 class="h-full"
                 :columns="columns"
                 :data="vo.rows"
                 :loading="loading"
@@ -186,7 +186,8 @@ const {loading, pagination, initFetchData} = useTableQuery({
                 <template v-slot:action>
                     <div class="flex gap-[16px]">
                         <a-link :hoverable="false">编辑</a-link>
-                        <a-link :hoverable="false">查看子任务</a-link>
+                        <a-link :hoverable="false" @click="toPath('/home/task-center/look-min-task')">查看子任务
+                        </a-link>
                         <a-link :hoverable="false" status="danger">终止</a-link>
                     </div>
                 </template>

src/pinia/SystemStore/mock.js

@@ -25,7 +25,8 @@ const mockRoutes = [
                 title: '任务指派',
                 icon: '',
                 meta: {
-                    name: '任务指派'
+                    name: '任务指派',
+                    hidden: true,
                 },
                 component: 'appointed-task',
             },
@@ -39,6 +40,17 @@ const mockRoutes = [
                     hidden: true,
                 },
                 component: 'new-task',
+            },
+            {
+                path: 'look-min-task',
+                name: 'look-min-task',
+                title: '查看子任务',
+                icon: '',
+                meta: {
+                    name: '查看子任务',
+                    hidden: true,
+                },
+                component: 'look-min-task',
             }
         ]
     },
@@ -51,7 +63,81 @@ const mockRoutes = [
             name: '沟通中心'
         },
         component: 'communication-center',
-    }
+    },
+    {
+        path: 'expert-management',
+        name: 'expert-management',
+        title: '达人管理',
+        icon: '',
+        meta: {
+            name: '达人管理'
+        },
+        component: 'expert-management',
+        children: [
+            {
+                path: 'blackout-management',
+                name: 'blackout-management',
+                title: '拉黑管理',
+                icon: '',
+                meta: {
+                    name: '拉黑管理'
+                },
+                component: 'blackout-management',
+            },
+            {
+                path: 'effect-management',
+                name: 'effect-management',
+                title: '效果管理',
+                icon: '',
+                meta: {
+                    name: '效果管理'
+                },
+                component: 'effect-management',
+            },
+        ]
+    },
+    {
+        path: 'data-board',
+        name: 'data-board',
+        title: '数据看板',
+        icon: '',
+        meta: {
+            name: '数据看板'
+        },
+        component: 'data-board',
+    },
+    {
+        path: 'my-wallet',
+        name: 'my-wallet',
+        title: '我的钱包',
+        icon: '',
+        meta: {
+            name: '我的钱包'
+        },
+        component: 'my-wallet',
+        children: [
+            {
+                path: 'wallet-overview',
+                name: 'wallet-overview',
+                title: '概览',
+                icon: '',
+                meta: {
+                    name: '概览'
+                },
+                component: 'wallet-overview',
+            },
+            {
+                path: 'moving-account-details',
+                name: 'moving-account-details',
+                title: '动账明细',
+                icon: '',
+                meta: {
+                    name: '动账明细'
+                },
+                component: 'moving-account-details',
+            },
+        ]
+    },
 ];
 
 export default mockRoutes;

src/router/routes-map.js

@@ -3,8 +3,17 @@ const routesMap = {
     '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'),
+    'look-min-task': () => import('../pages/merchant/pages/task-center/look-min-task.vue'),
 
     'communication-center': () => import('../pages/merchant/pages/communication-center/index.vue'),
+
+    'expert-management': () => import('../pages/merchant/pages/expert-management/index.vue'),
+    'blackout-management': () => import('../pages/merchant/pages/expert-management/blackout-management.vue'),
+    'effect-management': () => import('../pages/merchant/pages/expert-management/effect-management.vue'),
+
+    'my-wallet': () => import('../pages/merchant/pages/my-wallet/index.vue'),
+    'wallet-overview': () => import('../pages/merchant/pages/my-wallet/wallet-overview.vue'),
+    'moving-account-details': () => import('../pages/merchant/pages/my-wallet/moving-account-details.vue'),
 };
 
 export default routesMap;

src/scss/global.scss

@@ -1,17 +1,21 @@
 :root {
     --main-bg-color: rgb(247, 248, 250);
 }
+
 * {
     margin: 0;
     padding: 0;
     font-family: "PingFang SC", serif;
 }
+
 body {
     background-color: var(--main-bg-color);
 }
+
 .test {
     border: 1px solid red;
 }
+
 .demo-basic { // 默认下拉框样式
     padding: 5px;
     width: auto;
@@ -19,9 +23,11 @@ body {
     border-radius: 4px;
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
 }
+
 .arco-btn-text {
     color: var(--color-text-2) !important;
 }
+
 #Item-View {
     @apply flex flex-col p-[20px] min-h-full overflow-auto;
     .arco-card {
@@ -29,7 +35,7 @@ body {
         .arco-card-body {
             @apply min-h-full flex flex-col p-[20px] flex-grow;
             .arco-table-container {
-                @apply min-h-full;
+                @apply h-full;
                 .arco-table-element {
                     @apply min-h-full;
                 }
@@ -37,3 +43,9 @@ body {
         }
     }
 }
+.mock-card {
+    @apply p-[20px] bg-[#fff];
+    border: 1px solid var(--color-neutral-3);
+    border-radius: var(--border-radius-small);
+    box-shadow: box-shadow .2s cubic-bezier(0, 0, 1, 1);
+}