From 5b4a055d47033088d9a20a951bcdc214eeedeca2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9A=E5=95=A6C=E6=A2=A6?= <15709267061@163.com>
Date: Mon, 17 Mar 2025 15:47:56 +0800
Subject: [PATCH] update

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   8 +
 src/components/Filter/index.vue               |  19 +-
 .../AddWithdrawalInformationModal.vue         |  81 +++++++++
 .../LookWithdrawalInformationModal.vue        |  42 +++++
 .../get-help/contact-customer-service.vue     |  50 +++++-
 src/pages/merchant/pages/get-help/index.vue   |  17 +-
 .../pages/get-help/problem-teaching.vue       |   6 +
 .../pages/my-wallet/components/Reflect.vue    |  79 +++++++++
 .../components/openWithdrawalStatus.js        |  23 +++
 .../my-wallet/moving-account-details.vue      | 164 +++++++++++++++++-
 .../personal-center/account-settings.vue      | 104 +++++++++++
 .../pages/personal-center/credit-score.vue    |  81 ++++++++-
 .../merchant/pages/personal-center/index.vue  |  17 +-
 .../pages/task-center/reward-mission.vue      |  62 +++----
 src/pinia/SystemStore/mock.js                 |  64 +++++++
 src/router/routes-map.js                      |   8 +
 17 files changed, 783 insertions(+), 43 deletions(-)
 create mode 100644 src/pages/merchant/components/AddWithdrawalInformationModal.vue
 create mode 100644 src/pages/merchant/components/LookWithdrawalInformationModal.vue
 create mode 100644 src/pages/merchant/pages/my-wallet/components/openWithdrawalStatus.js

diff --git a/package.json b/package.json
index 2b33bca..c09d037 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
         "axios": "^1.8.2",
         "pinia": "^3.0.1",
         "pinia-plugin-persistedstate": "^4.2.0",
+        "uqrcodejs": "^4.0.7",
         "uuid": "^11.1.0",
         "vite-plugin-vue-devtools": "^7.7.2",
         "vue": "^3.5.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index adea70b..4501a26 100644
--- a/pnpm-lock.yaml
+++ b/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))
+      uqrcodejs:
+        specifier: ^4.0.7
+        version: 4.0.7
       uuid:
         specifier: ^11.1.0
         version: 11.1.0
@@ -1689,6 +1692,9 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  uqrcodejs@4.0.7:
+    resolution: {integrity: sha512-84+aZmD2godCVI+93lxE3YUAPNY8zAJvNA7xRS7R7U+q57KzMDepBSfNCwoRUhWOfR6eHFoAOcHRPwsP6ka1cA==}
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -3422,6 +3428,8 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  uqrcodejs@4.0.7: {}
+
   util-deprecate@1.0.2: {}
 
   uuid@11.1.0: {}
diff --git a/src/components/Filter/index.vue b/src/components/Filter/index.vue
index af86799..b3d1fe8 100644
--- a/src/components/Filter/index.vue
+++ b/src/components/Filter/index.vue
@@ -1,5 +1,7 @@
 <script setup>
 import {defineModel} from 'vue';
+import XSelect from '../XSelect/index.vue';
+
 
 const FROM_TYPE = {
     INPUT: 'input',
@@ -8,10 +10,14 @@ const FROM_TYPE = {
     CUSTOM: 'custom',
 }
 const emits = defineEmits(['search']);
-const {config} = defineProps({
+const {config, title} = defineProps({
     config: {
         type: Array,
         default: []
+    },
+    title: {
+        type: String,
+        default: '查询任务'
     }
 });
 const from = defineModel('from');
@@ -26,7 +32,7 @@ const reset = () => {
 
 <template>
     <div class="title">
-        查询任务
+        {{ title }}
     </div>
 
     <div class="flex">
@@ -44,12 +50,12 @@ const reset = () => {
                             </template>
 
                             <template v-if="item.type === FROM_TYPE.SELECT">
-                                <a-select
+                                <x-select
                                     class="w-full"
                                     v-model:model-value="from[item.key]"
-                                    :options="item.options"
-                                    :placeholder="item.placeholder">
-                                </a-select>
+                                    :placeholder="item.placeholder"
+                                    :api="item.api">
+                                </x-select>
                             </template>
 
                             <template v-if="item.type === FROM_TYPE.DATETIME">
@@ -95,6 +101,7 @@ const reset = () => {
     font-weight: 400;
     line-height: 28px;
     text-align: left;
+    margin-bottom: 16px;
 }
 .AFORM {
     :deep(.arco-row) {
diff --git a/src/pages/merchant/components/AddWithdrawalInformationModal.vue b/src/pages/merchant/components/AddWithdrawalInformationModal.vue
new file mode 100644
index 0000000..fb1ede5
--- /dev/null
+++ b/src/pages/merchant/components/AddWithdrawalInformationModal.vue
@@ -0,0 +1,81 @@
+<script setup>
+import {ref, reactive} from 'vue';
+
+const visible = ref(false);
+const state = reactive({
+    timer: null,
+    sendTimeout: 0,
+});
+const form = reactive({
+    name: null
+});
+
+const sendMessage = () => {
+    state.sendTimeout = 10;
+    state.timer = setInterval(() => {
+        state.sendTimeout--;
+        if (state.sendTimeout === 0) {
+            state.sendTimeout = 0;
+            clearInterval(state.timer);
+        }
+    }, 1000);
+}
+</script>
+
+<template>
+    <a-button v-if="!$slots.default" @click="visible=true">添加提现信息</a-button>
+    <div v-else @click="visible=true">
+        <slot></slot>
+    </div>
+
+    <a-modal
+        title-align="start"
+        title="添加提现信息"
+        v-model:visible="visible">
+        <a-form>
+            <a-tabs type="rounded">
+                <a-tab-pane title="添加支付宝" key="1">
+                    <a-form-item label="收款姓名">
+                        <a-input v-model:model-value="form.name" placeholder="请输入收款人的姓名"></a-input>
+                    </a-form-item>
+                    <a-form-item label="支付宝账号">
+                        <a-input v-model:model-value="form.name" placeholder="请输入支付宝账号"></a-input>
+                    </a-form-item>
+                    <a-form-item label="身份证号">
+                        <a-input v-model:model-value="form.name" placeholder="请输入身份证号"></a-input>
+                    </a-form-item>
+                    <a-form-item label="手机号">
+                        <a-input v-model:model-value="form.name" placeholder="请输入手机号"></a-input>
+                    </a-form-item>
+                    <a-form-item label="验证码">
+                        <a-input v-model:model-value="form.name" placeholder="请输入验证码"></a-input>
+                        <a-link
+                            @click="sendMessage"
+                            class="whitespace-nowrap ml-[16px]"
+                            :hoverable="false">
+                            {{ state.sendTimeout === 0 ? '获取验证码' : `请${state.sendTimeout}s后重试` }}
+                        </a-link>
+                    </a-form-item>
+                </a-tab-pane>
+                <a-tab-pane title="添加银行卡" key="2">
+                    <a-form-item label="真实姓名">
+                        <a-input v-model:model-value="form.name" placeholder="请输入真实姓名"></a-input>
+                    </a-form-item>
+                    <a-form-item label="身份证号">
+                        <a-input v-model:model-value="form.name" placeholder="请输入身份证号"></a-input>
+                    </a-form-item>
+                    <a-form-item label="银行卡号">
+                        <a-input v-model:model-value="form.name" placeholder="请输入银行卡号"></a-input>
+                    </a-form-item>
+                    <a-form-item label="手机号">
+                        <a-input v-model:model-value="form.name" placeholder="请输入手机号"></a-input>
+                    </a-form-item>
+                </a-tab-pane>
+            </a-tabs>
+        </a-form>
+    </a-modal>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/pages/merchant/components/LookWithdrawalInformationModal.vue b/src/pages/merchant/components/LookWithdrawalInformationModal.vue
new file mode 100644
index 0000000..95ec264
--- /dev/null
+++ b/src/pages/merchant/components/LookWithdrawalInformationModal.vue
@@ -0,0 +1,42 @@
+<script setup>
+import {ref} from "vue";
+
+const visible = ref(false);
+</script>
+
+<template>
+    <a-button v-if="!$slots.default" @click="visible=true">立即提现</a-button>
+    <div v-else @click="visible=true">
+        <slot></slot>
+    </div>
+
+    <a-modal
+        ok-text="确认提现"
+        title-align="start"
+        title="核对提现信息"
+        v-model:visible="visible">
+        <a-form label-align="left">
+            <a-form-item label="姓名">
+                彭于晏
+            </a-form-item>
+            <a-form-item label="支付宝账号">
+                13505948653
+            </a-form-item>
+            <a-form-item label="提现金额">
+                335.14
+            </a-form-item>
+        </a-form>
+        <div class="info">手续费率为1%，由三方代账公司收取</div>
+    </a-modal>
+</template>
+
+<style lang="scss" scoped>
+.info {
+    color: rgb(155, 159, 171);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0;
+    text-align: left;
+}
+</style>
diff --git a/src/pages/merchant/pages/get-help/contact-customer-service.vue b/src/pages/merchant/pages/get-help/contact-customer-service.vue
index de4fe1e..903a82f 100644
--- a/src/pages/merchant/pages/get-help/contact-customer-service.vue
+++ b/src/pages/merchant/pages/get-help/contact-customer-service.vue
@@ -1,11 +1,59 @@
 <script setup>
+import {onMounted} from 'vue';
+import UQRCode from 'uqrcodejs';
 
+const CODE_CONTENT = 'https://www.baidu.com/';
+
+onMounted(() => {
+// 获取uQRCode实例
+    const qr = new UQRCode();
+// 设置二维码内容
+    qr.data = CODE_CONTENT;
+// 设置二维码大小，必须与canvas设置的宽高一致
+    qr.size = 160;
+// 调用制作二维码方法
+    qr.make();
+// 获取canvas元素
+    const canvas = document.getElementById("qrcode");
+// 获取canvas上下文
+    const canvasContext = canvas.getContext("2d");
+// 设置uQRCode实例的canvas上下文
+    qr.canvasContext = canvasContext;
+// 调用绘制方法将二维码图案绘制到canvas上
+    qr.drawCanvas();
+})
 </script>
 
 <template>
     <!-- 联系客服 -->
+    <div class="flex justify-center items-center flex-grow">
+        <div class="flex flex-col items-center justify-center gap-[12px] rounded-[12px] bg-white py-[20px] px-[15px]">
+            <div class="title">微信扫码添加</div>
+            <div class="w-[160px] h-[160px]">
+                <canvas id="qrcode" width="160" height="160"></canvas>
+            </div>
+            <div class="info">请发送 [个人中心] 页面截图给客服</div>
+            <div class="info">再描述您的问题</div>
+        </div>
+    </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 17px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0;
+    text-align: center;
+}
 
+.info {
+    color: rgb(78, 89, 105);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0;
+    text-align: center;
+}
 </style>
diff --git a/src/pages/merchant/pages/get-help/index.vue b/src/pages/merchant/pages/get-help/index.vue
index a1097b9..442f34a 100644
--- a/src/pages/merchant/pages/get-help/index.vue
+++ b/src/pages/merchant/pages/get-help/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>
diff --git a/src/pages/merchant/pages/get-help/problem-teaching.vue b/src/pages/merchant/pages/get-help/problem-teaching.vue
index 4aa3846..9038445 100644
--- a/src/pages/merchant/pages/get-help/problem-teaching.vue
+++ b/src/pages/merchant/pages/get-help/problem-teaching.vue
@@ -1,5 +1,11 @@
 <script setup>
+import {onMounted} from "vue";
 
+const URL_CONTENT = 'https://www.baidu.com/';
+
+onMounted(() => {
+    window.open(URL_CONTENT);
+});
 </script>
 
 <template>
diff --git a/src/pages/merchant/pages/my-wallet/components/Reflect.vue b/src/pages/merchant/pages/my-wallet/components/Reflect.vue
index 74be1ef..12cafa6 100644
--- a/src/pages/merchant/pages/my-wallet/components/Reflect.vue
+++ b/src/pages/merchant/pages/my-wallet/components/Reflect.vue
@@ -1,5 +1,8 @@
 <script setup>
 
+import AddWithdrawalInformationModal from "../../../components/AddWithdrawalInformationModal.vue";
+import openWithdrawalStatus from "./openWithdrawalStatus.js";
+import LookWithdrawalInformationModal from "../../../components/LookWithdrawalInformationModal.vue";
 </script>
 
 <template>
@@ -10,9 +13,85 @@
         <div>3.提现账户：最多可设置6个提现账户，超出请删除再进行添加</div>
         <div>4.提示：如果填写的提现账户信息不正确，提现将无法成功</div>
     </div>
+
+    <a-form
+        class="ml-[100px]"
+        :auto-label-width="true">
+        <a-form-item label="提现账户">
+            <a-radio-group>
+                <div class="grid grid-cols-2 gap-[18px]">
+                    <a-radio value="1">
+                        <div class="flex items-center">
+                            <div class="input-card flex w-[306px] items-center">
+                                <img class="w-[15px] h-[15px] object-cover test" :src="'123'" alt=""/>
+                                <div class="ml-[14px]">支付宝</div>
+                                <div class="ml-[12px]">157****7061</div>
+
+                                <icon-edit class="ml-auto cursor-pointer"/>
+                            </div>
+                            <icon-delete class="ml-[8px]"/>
+                        </div>
+                    </a-radio>
+                    <a-radio value="2">
+                        <div class="flex items-center">
+                            <div class="input-card flex w-[306px] items-center">
+                                <img class="w-[15px] h-[15px] object-cover test" :src="'123'" alt=""/>
+                                <div class="ml-[14px]">支付宝</div>
+                                <div class="ml-[12px]">157****7061</div>
+
+                                <icon-edit class="ml-auto cursor-pointer"/>
+                            </div>
+                            <icon-delete class="ml-[8px]"/>
+                        </div>
+                    </a-radio>
+                    <a-radio value="3">
+                        <div class="flex items-center">
+                            <div class="input-card flex w-[306px] items-center">
+                                <img class="w-[15px] h-[15px] object-cover test" :src="'123'" alt=""/>
+                                <div class="ml-[14px]">支付宝</div>
+                                <div class="ml-[12px]">157****7061</div>
+
+                                <icon-edit class="ml-auto cursor-pointer"/>
+                            </div>
+                            <icon-delete class="ml-[8px]"/>
+                        </div>
+                    </a-radio>
+                    <AddWithdrawalInformationModal>
+                        <div
+                            class="input-card flex w-[306px] items-center ml-[28px] cursor-pointer hover:!bg-[var(--color-neutral-2)] duration-500 gap-[10px] justify-center">
+                            <icon-plus/>
+                            添加提现信息
+                        </div>
+                    </AddWithdrawalInformationModal>
+                </div>
+            </a-radio-group>
+        </a-form-item>
+
+        <a-form-item label="提现金额">
+            <div class="max-w-[768px] flex gap-[20px] items-center">
+                <a-input-number :placeholder="`最多可提现${388.88}元`"></a-input-number>
+                <a-link :hoverable="false" class="whitespace-nowrap">全部提现</a-link>
+            </div>
+        </a-form-item>
+
+        <a-form-item class="mt-[40px]">
+            <a-button type="primary" @click="openWithdrawalStatus">立即提现</a-button>
+            <LookWithdrawalInformationModal>
+                <a-button type="primary">立即提现</a-button>
+            </LookWithdrawalInformationModal>
+        </a-form-item>
+    </a-form>
 </template>
 
 <style lang="scss" scoped>
+.input-card {
+    box-sizing: border-box;
+    border: 1px solid rgb(229, 230, 235);
+    border-radius: 2px;
+    background: rgb(247, 248, 250);
+    padding: 12px;
+}
+
 .info-card {
     background: rgb(247, 248, 250);
     padding: 12px 20px;
diff --git a/src/pages/merchant/pages/my-wallet/components/openWithdrawalStatus.js b/src/pages/merchant/pages/my-wallet/components/openWithdrawalStatus.js
new file mode 100644
index 0000000..b0dd71a
--- /dev/null
+++ b/src/pages/merchant/pages/my-wallet/components/openWithdrawalStatus.js
@@ -0,0 +1,23 @@
+import {h} from 'vue';
+import {Modal} from "@arco-design/web-vue";
+import XSelect from "../../../../../components/XSelect/index.vue";
+import Api from "../../../../../api/index.js";
+
+const openWithdrawalStatus = () => {
+    Modal.warning({
+        title: '提现失败',
+        width: 600,
+        draggable: true,
+        hideCancel: false,
+        okText: '重新提现',
+        okButtonProps: {
+            status: 'danger',
+        },
+        content: h('div', [
+            h('div', {class: 'mb-[24px]'}, '请修改您的提现信息：确保所有信息都归属于同一个自然人。修改完后，在下方选择正确的提现信息，点击下方按钮，重新发起提现'),
+            h(XSelect, {api: Api.system.getSelect})
+        ])
+    });
+}
+
+export default openWithdrawalStatus;
diff --git a/src/pages/merchant/pages/my-wallet/moving-account-details.vue b/src/pages/merchant/pages/my-wallet/moving-account-details.vue
index 97555d1..ad95c85 100644
--- a/src/pages/merchant/pages/my-wallet/moving-account-details.vue
+++ b/src/pages/merchant/pages/my-wallet/moving-account-details.vue
@@ -1,5 +1,138 @@
 <script setup>
+import Filter from "../../../../components/Filter/index.vue";
+import {computed, reactive} from "vue";
+import useTableQuery from "../../../../hooks/useTableQuery.js";
+import Api from "../../../../api/index.js";
 
+const columns = [
+    {
+        title: '动账日期',
+        dataIndex: 'value'
+    },
+    {
+        title: '动账时间',
+        dataIndex: 'value'
+    },
+    {
+        title: '交易流水号',
+        dataIndex: 'value'
+    },
+    {
+        title: '动账渠道',
+        dataIndex: 'value'
+    },
+    {
+        title: '状态',
+        dataIndex: 'value'
+    },
+    {
+        title: '动账用途',
+        dataIndex: 'value'
+    },
+    {
+        title: '动账金额(元)',
+        dataIndex: 'value'
+    },
+    {
+        title: '付款人账户',
+        dataIndex: 'value'
+    },
+    {
+        title: '关联任务ID',
+        dataIndex: 'value'
+    },
+    {
+        title: '子任务ID',
+        dataIndex: 'value'
+    },
+    {
+        title: '钱包余额(元) ',
+        dataIndex: 'value'
+    },
+    {
+        title: '任务款余额(元)',
+        dataIndex: 'value'
+    },
+    {
+        title: '资产合计(元)',
+        dataIndex: 'value'
+    },
+];
+const FilterConfig = computed(() => [
+    {
+        key: 'wd',
+        type: 'select',
+        label: '动账渠道',
+        placeholder: '全部',
+        api: async () => ({
+            data: [
+                {
+                    name: '选项一',
+                    id: 1,
+                },
+                {
+                    name: '选项二',
+                    id: 2,
+                },
+                {
+                    name: '选项三',
+                    id: 3,
+                },
+            ]
+        })
+    },
+    {
+        key: 'wd',
+        type: 'select',
+        label: '动账用途',
+        placeholder: '全部',
+        api: async () => ({
+            data: [
+                {
+                    name: '选项一',
+                    id: 1,
+                },
+                {
+                    name: '选项二',
+                    id: 2,
+                },
+                {
+                    name: '选项三',
+                    id: 3,
+                },
+            ]
+        })
+    },
+    {
+        key: 'wd',
+        type: 'input',
+        label: '关联ID',
+        placeholder: '请输入任务ID',
+    },
+    {
+        key: 'wd',
+        type: 'datetime',
+        label: '动账日期',
+        placeholder: '全部',
+    },
+]);
+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>
@@ -10,11 +143,36 @@
         </a-breadcrumb>
     </div>
 
-    <a-card>
+    <div class="mock-card mb-[20px]">
+        <Filter
+            title="查询动账明细"
+            v-model:from="po"
+            :config="FilterConfig"
+            @search="initFetchData">
+        </Filter>
+    </div>
 
+    <a-card>
+        <div class="title">动账明细</div>
+
+        <a-table
+            @page-change="(e) => pagination.current = e"
+            :pagination="pagination"
+            :data="vo.rows"
+            :loading="loading"
+            class="flex-grow"
+            :columns="columns">
+        </a-table>
     </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>
diff --git a/src/pages/merchant/pages/personal-center/account-settings.vue b/src/pages/merchant/pages/personal-center/account-settings.vue
index 25de7f0..d5dfd94 100644
--- a/src/pages/merchant/pages/personal-center/account-settings.vue
+++ b/src/pages/merchant/pages/personal-center/account-settings.vue
@@ -1,9 +1,113 @@
 <script setup>
+import {reactive, ref} from "vue";
 
+const activeKey = ref('1');
+const form = reactive({
+    name: null
+});
 </script>
 
 <template>
     <!-- 账号设置 -->
+    <div class="mb-[20px]">
+        <a-breadcrumb
+            :routes="[{path: '/home/personal-center', label: '个人中心'}, {path: '/', label: '账号设置'},]">
+        </a-breadcrumb>
+    </div>
+
+    <div class="mock-card mb-[20px] py-[30px] flex items-center gap-[60px]">
+        <div class="w-[100px] h-[100px] test rounded-[50%]">
+            <img class="w-full h-full rounded-[50%] object-cover" src="" alt=""/>
+        </div>
+
+        <a-descriptions align="right">
+            <a-descriptions-item label="昵称" :span="2">
+                王力群ABCabc
+                <a-link :hoverable="false" class="ml-[20px]" @click="activeKey='1'">更改</a-link>
+            </a-descriptions-item>
+            <a-descriptions-item label="微信号" :span="2">
+                luoluo347
+                <a-link :hoverable="false" class="ml-[20px]" @click="activeKey='4'">更改</a-link>
+            </a-descriptions-item>
+            <a-descriptions-item label="手机绑定" :span="2">
+                15012312300
+                <a-link :hoverable="false" class="ml-[20px]" @click="activeKey='2'">更改</a-link>
+            </a-descriptions-item>
+            <a-descriptions-item label="ID" :span="2">
+                S1560
+                <a-link :hoverable="false" class="ml-[20px]">复制</a-link>
+            </a-descriptions-item>
+            <a-descriptions-item label="账号密码" :span="2">
+                ********
+                <a-link :hoverable="false" class="ml-[20px]" @click="activeKey='3'">更改</a-link>
+            </a-descriptions-item>
+            <a-descriptions-item label="邀请码" :span="2">
+                734783
+                <a-link :hoverable="false" class="ml-[20px]">复制</a-link>
+            </a-descriptions-item>
+        </a-descriptions>
+    </div>
+
+    <a-card>
+        <a-form
+            :label-col-props="{span: 3}"
+            :wrapper-col-props="{span: 8, offset: 1}">
+            <a-tabs
+                v-model:active-key="activeKey"
+                type="rounded">
+                <a-tab-pane title="更改昵称" key="1">
+                    <a-form-item label="新昵称">
+                        <a-input v-model:model-value="form.name" placeholder="请输入新昵称"></a-input>
+                    </a-form-item>
+                    <a-form-item class="mt-[40px]">
+                        <a-button type="primary">确认更改</a-button>
+                    </a-form-item>
+                </a-tab-pane>
+
+                <a-tab-pane title="手机绑定" key="2">
+                    <a-form-item label="原手机号">
+                        <a-input v-model:model-value="form.name" placeholder="请输入原手机号"></a-input>
+                    </a-form-item>
+                    <a-form-item label="验证码">
+                        <a-input v-model:model-value="form.name" placeholder="请输入验证码"></a-input>
+                    </a-form-item>
+                    <a-form-item label="新手机号">
+                        <a-input v-model:model-value="form.name" placeholder="请输入新手机号"></a-input>
+                    </a-form-item>
+                    <a-form-item label="验证码">
+                        <a-input v-model:model-value="form.name" placeholder="请输入验证码"></a-input>
+                    </a-form-item>
+                    <a-form-item class="mt-[40px]">
+                        <a-button type="primary">确认更改</a-button>
+                    </a-form-item>
+                </a-tab-pane>
+
+                <a-tab-pane title="账号密码" key="3">
+                    <a-form-item label="手机号">
+                        <a-input v-model:model-value="form.name" placeholder="请输入手机号"></a-input>
+                    </a-form-item>
+                    <a-form-item label="验证码">
+                        <a-input v-model:model-value="form.name" placeholder="请输入验证码"></a-input>
+                    </a-form-item>
+                    <a-form-item label="新密码">
+                        <a-input v-model:model-value="form.name" placeholder="请输入新密码"></a-input>
+                    </a-form-item>
+                    <a-form-item class="mt-[40px]">
+                        <a-button type="primary">确认更改</a-button>
+                    </a-form-item>
+                </a-tab-pane>
+
+                <a-tab-pane title="微信号" key="4">
+                    <a-form-item label="微信号">
+                        <a-input v-model:model-value="form.name" placeholder="请输入微信号"></a-input>
+                    </a-form-item>
+                    <a-form-item class="mt-[40px]">
+                        <a-button type="primary">确认更改</a-button>
+                    </a-form-item>
+                </a-tab-pane>
+            </a-tabs>
+        </a-form>
+    </a-card>
 </template>
 
 <style scoped>
diff --git a/src/pages/merchant/pages/personal-center/credit-score.vue b/src/pages/merchant/pages/personal-center/credit-score.vue
index ebdf927..3f40c2a 100644
--- a/src/pages/merchant/pages/personal-center/credit-score.vue
+++ b/src/pages/merchant/pages/personal-center/credit-score.vue
@@ -1,11 +1,88 @@
 <script setup>
+import {reactive} from "vue";
+import useTableQuery from "../../../../hooks/useTableQuery.js";
+import Api from "../../../../api/index.js";
 
+const columns = [
+    {
+        title: '处理ID',
+        dataIndex: 'value'
+    },
+    {
+        title: '处理时间',
+        dataIndex: 'value'
+    },
+    {
+        title: '处理结果',
+        dataIndex: 'value'
+    },
+    {
+        title: '处理原因',
+        dataIndex: 'value'
+    },
+    {
+        title: '申诉状态',
+        dataIndex: 'value'
+    },
+    {
+        title: '操作',
+        dataIndex: 'action',
+        width: 150,
+        align: 'center',
+        slotName: 'action',
+    },
+];
+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/personal-center', label: '个人中心'}, {path: '/', label: '信用分'},]">
+        </a-breadcrumb>
+    </div>
+
+    <a-card>
+        <div class="title">动账明细</div>
+
+        <a-table
+            @page-change="(e) => pagination.current = e"
+            :pagination="pagination"
+            :data="vo.rows"
+            :loading="loading"
+            class="flex-grow"
+            :columns="columns">
+            <template v-slot:action>
+                <a-link :hoverable="false" :disabled="false">联系专属客服申诉</a-link>
+            </template>
+        </a-table>
+    </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>
diff --git a/src/pages/merchant/pages/personal-center/index.vue b/src/pages/merchant/pages/personal-center/index.vue
index 30003f0..861dd79 100644
--- a/src/pages/merchant/pages/personal-center/index.vue
+++ b/src/pages/merchant/pages/personal-center/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>
diff --git a/src/pages/merchant/pages/task-center/reward-mission.vue b/src/pages/merchant/pages/task-center/reward-mission.vue
index 98d2b1a..0417db5 100644
--- a/src/pages/merchant/pages/task-center/reward-mission.vue
+++ b/src/pages/merchant/pages/task-center/reward-mission.vue
@@ -72,40 +72,44 @@ const FilterConfig = computed(() => [
         type: 'select',
         label: '任务渠道',
         placeholder: '全部',
-        options: [
-            {
-                label: '选项一',
-                value: 1,
-            },
-            {
-                label: '选项二',
-                value: 2,
-            },
-            {
-                label: '选项三',
-                value: 3,
-            },
-        ]
+        api: async () => ({
+            data: [
+                {
+                    name: '选项一',
+                    id: 1,
+                },
+                {
+                    name: '选项二',
+                    id: 2,
+                },
+                {
+                    name: '选项三',
+                    id: 3,
+                },
+            ]
+        })
     },
     {
         key: 'wd',
         type: 'select',
         label: '任务状态',
         placeholder: '全部',
-        options: [
-            {
-                label: '选项一',
-                value: 1,
-            },
-            {
-                label: '选项二',
-                value: 2,
-            },
-            {
-                label: '选项三',
-                value: 3,
-            },
-        ]
+        api: async () => ({
+            data: [
+                {
+                    name: '选项一',
+                    id: 1,
+                },
+                {
+                    name: '选项二',
+                    id: 2,
+                },
+                {
+                    name: '选项三',
+                    id: 3,
+                },
+            ]
+        })
     },
     {
         key: 'wd',
@@ -155,7 +159,7 @@ const {loading, pagination, initFetchData} = useTableQuery({
 
         <div class="mt-[20px] flex-grow">
             <a-table
-                 class="h-full"
+                class="h-full"
                 :columns="columns"
                 :data="vo.rows"
                 :loading="loading"
diff --git a/src/pinia/SystemStore/mock.js b/src/pinia/SystemStore/mock.js
index b59e1ad..80b9118 100644
--- a/src/pinia/SystemStore/mock.js
+++ b/src/pinia/SystemStore/mock.js
@@ -138,6 +138,70 @@ const mockRoutes = [
             },
         ]
     },
+    {
+        path: 'personal-center',
+        name: 'personal-center',
+        title: '个人中心',
+        icon: '',
+        meta: {
+            name: '个人中心'
+        },
+        component: 'personal-center',
+        children: [
+            {
+                path: 'account-settings',
+                name: 'account-settings',
+                title: '账号设置',
+                icon: '',
+                meta: {
+                    name: '账号设置'
+                },
+                component: 'account-settings',
+            },
+            {
+                path: 'credit-score',
+                name: 'credit-score',
+                title: '信用分',
+                icon: '',
+                meta: {
+                    name: '信用分'
+                },
+                component: 'credit-score',
+            },
+        ]
+    },
+    {
+        path: 'get-help',
+        name: 'get-help',
+        title: '获取帮助',
+        icon: '',
+        meta: {
+            name: '获取帮助'
+        },
+        component: 'get-help',
+        children: [
+            {
+                path: 'problem-teaching',
+                name: 'problem-teaching.vue',
+                title: '常见问题教学',
+                icon: '',
+                meta: {
+                    name: '常见问题教学'
+                },
+                component: 'problem-teaching',
+            },
+            {
+                path: 'contact-customer-service',
+                name: 'contact-customer-service',
+                title: '联系客服',
+                icon: '',
+                meta: {
+                    name: '联系客服'
+                },
+                component: 'contact-customer-service',
+            },
+        ]
+    }
 ];
 
 export default mockRoutes;
diff --git a/src/router/routes-map.js b/src/router/routes-map.js
index 13191f6..d1db0de 100644
--- a/src/router/routes-map.js
+++ b/src/router/routes-map.js
@@ -14,6 +14,14 @@ const routesMap = {
     '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'),
+
+    'personal-center': () => import('../pages/merchant/pages/personal-center/index.vue'),
+    'account-settings': () => import('../pages/merchant/pages/personal-center/account-settings.vue'),
+    'credit-score': () => import('../pages/merchant/pages/personal-center/credit-score.vue'),
+
+    'get-help': () => import('../pages/merchant/pages/get-help/index.vue'),
+    'problem-teaching': () => import('../pages/merchant/pages/get-help/problem-teaching.vue'),
+    'contact-customer-service': () => import('../pages/merchant/pages/get-help/contact-customer-service.vue'),
 };
 
 export default routesMap;