update

2025-03-27 15:38:21 +08:00
parent 3c85d9e0e7
commit 15b26ab2d9
31 changed files with 1003 additions and 22 deletions
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
-VITE_API_URL=http://127.0.0.1:4523
+VITE_API_URL=http://192.168.1.88:4523
 VITE_AES_KEY=4e2c3d4e5f6a7b8c9d0e1f2g3h4i5j6k7l8m9n0o1p2q3r4s5t6u7v8w9x0y1z2
--- a/src/api/system/index.js
+++ b/src/api/system/index.js
@@ -2,10 +2,11 @@ import request from "../../utils/request.js";
 import MethodsENUM from "../../enum/MethodsENUM.js";

 const system = {
-    getData: async () => {
+    getData: async (data) => {
        return request({
            method: MethodsENUM.POST,
            url: "/m1/5995958-5684445-default/getList",
+            data: data,
        });
    }
 }
--- a/src/components/AddCustomerServiceModal.vue
+++ b/src/components/AddCustomerServiceModal.vue
@@ -0,0 +1,46 @@
+<script setup>
+import {onMounted} from "vue";
+import XModal from "./XModal.vue";
+import XQrCode from "./XQrCode.vue";
+
+const show = defineModel('show');
+
+onMounted(() => {
+
+});
+</script>
+
+<template>
+    <x-modal
+        v-model:show="show">
+        <view class="px-[30rpx] py-[40rpx] relative">
+            <image @click="show=false" class="!w-[52rpx] !h-[52rpx] absolute top-[-110rpx] right-[calc(-100%-10rpx)]" src="/static/icons/close.png"></image>
+
+            <view class="title">微信扫码添加</view>
+            <view class="!mt-[24rpx] w-[320rpx] !mx-auto aspect-square">
+                <x-qr-code size="320rpx" :qrSize="180" content="公众号"></x-qr-code>
+            </view>
+            <view class="desc !mt-[24rpx]">请发送 [我的] 页面截图给客服</view>
+            <view class="desc">再描述您的问题</view>
+        </view>
+    </x-modal>
+</template>
+
+<style lang="scss" scoped>
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 34rpx;
+    font-weight: 500;
+    line-height: 48rpx;
+    letter-spacing: 0;
+    text-align: center;
+}
+
+.desc {
+    color: rgb(78, 89, 105);
+    font-size: 28rpx;
+    font-weight: 500;
+    letter-spacing: 0;
+    text-align: center;
+}
+</style>
--- a/src/components/TaskCard.vue
+++ b/src/components/TaskCard.vue
@@ -0,0 +1,92 @@
+<script setup>
+import dy from "../static/images/抖音.png";
+import qrw from "../static/icons/qrw.png";
+</script>
+
+<template>
+    <view class="rounded-[8rpx] bg-[#fff] !p-[24rpx]">
+        <view class="!flex gap-[26rpx]">
+            <image class="!size-[88rpx] rounded-[50%] overflow-hidden" mode="aspectFill" :src="dy"></image>
+            <view class="!h-[88rpx] !flex flex-col justify-between">
+                <view class="title">美白祛斑洗面奶</view>
+                <view class="!flex gap-[8rpx]">
+                    <view class="tag">抖音</view>
+                    <view class="tag">三连发</view>
+                </view>
+            </view>
+            <view class="!h-[88rpx] !ml-auto">
+                <view class="price">
+                    <text class="unit">¥</text>
+                    8.56
+                </view>
+                <view class="price-info">剩余3个名额</view>
+            </view>
+        </view>
+
+        <view class="!mt-[34rpx] !px-[20rpx] !py-[10rpx] bg-[#F2F3F5] info relative">
+            截止时间：08月23日 14:00
+            <view class="absolute top-1/2 -translate-y-1/2 right-0">
+                <image class="!w-[168rpx]" :src="qrw" mode="widthFix"></image>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.qrw {
+
+}
+
+.info {
+    color: rgb(78, 89, 105);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.price-info {
+    /* 12/Regular */
+    color: rgb(255, 87, 34);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: right;
+}
+
+.price {
+    color: rgb(29, 33, 41);
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: right;
+
+    .unit {
+        font-size: 22rpx;
+    }
+}
+
+.tag {
+    color: rgb(22, 93, 255);
+    font-size: 10px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: center;
+    border-radius: 4rpx;
+    background: rgb(232, 243, 255);
+    padding: 3rpx 8rpx;
+}
+</style>
--- a/src/components/TaskItem.vue
+++ b/src/components/TaskItem.vue
@@ -0,0 +1,92 @@
+<script setup>
+import dy from "../static/images/抖音.png";
+import qrw from "../static/icons/qrw.png";
+</script>
+
+<template>
+    <view class="rounded-[8rpx] bg-[#fff] !p-[24rpx]">
+        <view class="!flex gap-[26rpx]">
+            <image class="!size-[88rpx] rounded-[50%] overflow-hidden" mode="aspectFill" :src="dy"></image>
+            <view class="!h-[88rpx] !flex flex-col justify-between">
+                <view class="title">美白祛斑洗面奶</view>
+                <view class="!flex gap-[8rpx]">
+                    <view class="tag">抖音</view>
+                    <view class="tag">三连发</view>
+                </view>
+            </view>
+            <view class="!h-[88rpx] !ml-auto">
+                <view class="price">
+                    <text class="unit">¥</text>
+                    8.56
+                </view>
+                <view class="price-info">剩余3个名额</view>
+            </view>
+        </view>
+
+        <view class="!mt-[34rpx] !px-[20rpx] !py-[10rpx] bg-[#F2F3F5] info relative">
+            截止时间：08月23日 14:00
+            <view class="absolute top-1/2 -translate-y-1/2 right-0">
+                <image class="!w-[168rpx]" :src="qrw" mode="widthFix"></image>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.qrw {
+
+}
+
+.info {
+    color: rgb(78, 89, 105);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.price-info {
+    /* 12/Regular */
+    color: rgb(255, 87, 34);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: right;
+}
+
+.price {
+    color: rgb(29, 33, 41);
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: right;
+
+    .unit {
+        font-size: 22rpx;
+    }
+}
+
+.tag {
+    color: rgb(22, 93, 255);
+    font-size: 10px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: center;
+    border-radius: 4rpx;
+    background: rgb(232, 243, 255);
+    padding: 3rpx 8rpx;
+}
+</style>
--- a/src/components/WXOfficialAccount.vue
+++ b/src/components/WXOfficialAccount.vue
@@ -12,7 +12,7 @@ onMounted(() => {

 <template>
    <x-modal
-        :show="show">
+        v-model:show="show">
        <view class="px-[30rpx] py-[40rpx] relative">
            <image @click="show=false" class="!w-[52rpx] !h-[52rpx] absolute top-[-110rpx] right-[calc(-100%-10rpx)]" src="/static/icons/close.png"></image>

--- a/src/components/XDropdownItem.vue
+++ b/src/components/XDropdownItem.vue
@@ -0,0 +1,20 @@
+<script setup>
+
+</script>
+
+<template>
+    <view class="!py-[14rpx] !px-[24rpx] text">
+        <slot></slot>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.text {
+    color: rgb(29, 33, 41);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
+</style>
--- a/src/components/XDropdownList.vue
+++ b/src/components/XDropdownList.vue
@@ -0,0 +1,49 @@
+<script setup>
+import {ref} from "vue";
+
+const show = ref(false);
+</script>
+
+<template>
+    <view class="relative z-[99]">
+        <view @click="show=!show">
+            <slot></slot>
+
+            <tui-icon
+                :style="{
+                    transform: !show ? 'rotate(0deg)' : 'rotate(180deg)'
+                }"
+                class="absolute top-1/2 -translate-y-1/2 right-[20rpx] duration-300"
+                name="arrowdown"
+                :size="20">
+            </tui-icon>
+        </view>
+
+        <transition name="fade">
+            <view v-if="show" class="absolute top-[calc(100%+10rpx)] min-w-full bg-[#fff] rounded-[8rpx]">
+                <slot name="menu"></slot>
+            </view>
+        </transition>
+    </view>
+
+    <view
+        v-if="show"
+        id="mask"
+        @click="show=false"
+        class="!w-screen !h-screen !fixed left-0 top-0 z-[999]">
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 300ms;
+    position: absolute;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+    position: absolute;
+}
+</style>
--- a/src/components/XModal.vue
+++ b/src/components/XModal.vue
@@ -4,6 +4,7 @@ const show = defineModel('show');

 <template>
    <tui-modal
+        @cancel="show=false"
        padding="0"
        custom
        :show="show">
--- a/src/components/XNav.vue
+++ b/src/components/XNav.vue
@@ -1,6 +1,6 @@
 <script setup>
 import {ref} from 'vue';
-import {isWXWeb} from "../utils/uils.js";
+import {backPage, isWXWeb} from "../utils/uils.js";

 const {showBack} = defineProps({
    showBack: {
@@ -14,15 +14,18 @@ const title = ref(document.title);

 <template>
    <template v-if="!isWXWeb()">
-        <view class="!flex justify-center items-center h-[100rpx] bg-[#f9f9f9]">
+        <view class="!flex justify-center items-center w-full h-[100rpx] bg-[#f9f9f9] fixed left-0 top-0 z-[998]">
            <image
                v-if="showBack"
+                @click="backPage()"
                class="!w-[9px] !h-[17px] cursor-pointer !absolute left-[50rpx]"
                src="/static/icons/back.png">
            </image>

            <view class="title">{{ title }}</view>
        </view>
+
+        <view class="h-[100rpx] w-full"></view>
    </template>
 </template>

--- a/src/components/XVideoModal.vue
+++ b/src/components/XVideoModal.vue
@@ -0,0 +1,51 @@
+<script setup>
+import {ref} from 'vue'
+import XModal from "./XModal.vue";
+import fmt from '../static/images/fmt.png';
+import play from '../static/icons/play.png';
+
+const show = ref(false);
+const playVideo = ref(false);
+</script>
+
+<template>
+    <view @click="show=true">
+        <slot></slot>
+    </view>
+
+    <x-modal
+        class="x-video-modal"
+        v-model:show="show">
+        <view class="!p-[20rpx] relative">
+            <image
+                @click="show=false"
+                class="!w-[52rpx] !h-[52rpx] !absolute  left-1/2 -translate-x-1/2 bottom-[-100rpx]"
+                src="/static/icons/close.png">
+            </image>
+
+            <view class="!w-full relative rounded-[16rpx] overflow-hidden">
+                <image v-if="!playVideo" class="!w-full" mode="widthFix" :src="fmt"></image>
+                <view @click="playVideo=!playVideo" v-if="!playVideo"
+                      class="absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,.4)] z-10 !flex justify-center items-center">
+                    <image class="!w-[94rpx] !h-[94rpx]" :src="play"></image>
+                </view>
+
+                <video
+                    autoplay
+                    @pause="playVideo=!playVideo"
+                    class="!w-full"
+                    v-else
+                    src="https://shopyunlng.oss-cn-beijing.aliyuncs.com/upload/2025/03-18/15-31-150289-429952696.m4v">
+                </video>
+            </view>
+        </view>
+    </x-modal>
+</template>
+
+<style lang="scss">
+.x-video-modal {
+    .tui-modal-box {
+        margin-bottom: 200rpx;
+    }
+}
+</style>
--- a/src/hooks/useTableQuery.js
+++ b/src/hooks/useTableQuery.js
@@ -0,0 +1,75 @@
+import {ref, reactive, watch} from 'vue';
+
+/**
+ *
+ * @param parameter
+ * @param api
+ * @param callback
+ * @param immediate
+ * @param watchParameter
+ */
+function useTableQuery({
+                           parameter,
+                           api,
+                           callback,
+                           immediate = true,
+                           watchParameter = false,
+                       }) {
+    const loading = ref(false);
+
+    const pagination = reactive({
+        current: 1,
+        pageSize: 20,
+        total: 0
+    });
+
+    const fetchData = async () => {
+        try {
+            loading.value = true;
+
+            const params = {
+                ...parameter,
+                current: pagination.current,
+                pageSize: pagination.pageSize
+            }
+
+            const {data} = await api(params);
+
+            pagination.pageSize = data.page;
+            pagination.total = data.total;
+
+            callback && callback({
+                ...data,
+                rows: data.rows.map(v => ({...v, key: v.id})),
+            });
+        } finally {
+            loading.value = false;
+        }
+    }
+
+    const initFetchData = async () => {
+        pagination.current = 1;
+        pagination.total = 0;
+    }
+
+    watch(
+        () => [pagination.current, pagination.pageSize],
+        () => fetchData(),
+        {deep: true, immediate: immediate}
+    )
+
+    if (watchParameter) watch(
+        () => parameter,
+        () => fetchData(),
+        {deep: true}
+    );
+
+    return {
+        loading,
+        pagination,
+        fetchData,
+        initFetchData,
+    }
+}
+
+export default useTableQuery;
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -57,6 +57,9 @@
        "usingComponents": true
    },
    "h5": {
+        "router": {
+            "mode": "history"
+        }
    },
    "mp-alipay": {
        "usingComponents": true
--- a/src/pages.json
+++ b/src/pages.json
@@ -50,6 +50,27 @@
                "navigationBarTitleText": "忘记密码",
                "navigationStyle": "custom"
            }
+        },
+        {
+            "path": "pages/beginnerTutorial/index",
+            "style": {
+                "navigationBarTitleText": "新手教程",
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/InviteFriends/index",
+            "style": {
+                "navigationBarTitleText": "邀请好友",
+                "navigationStyle": "custom"
+            }
+        },
+        {
+            "path": "pages/comingSoon/index",
+            "style": {
+                "navigationBarTitleText": "敬请期待",
+                "navigationStyle": "custom"
+            }
        }
    ],
    "globalStyle": {
--- a/src/pages/InviteFriends/index.vue
+++ b/src/pages/InviteFriends/index.vue
@@ -1,9 +1,15 @@
 <script setup>
-
+import yqhyBg from '../../static/icons/yqhy-bg.png';
+import XNav from "../../components/XNav.vue";
 </script>

 <template>
    <!--邀请好友-->
+    <XNav></XNav>
+
+    <view class="h-[calc(100vh-100rpx)] relative">
+        <image class="!w-full" mode="widthFix" :src="yqhyBg"></image>
+    </view>
 </template>

 <style scoped>
--- a/src/pages/beginnerTutorial/index.vue
+++ b/src/pages/beginnerTutorial/index.vue
@@ -1,11 +1,176 @@
 <script setup>
+import {ref, reactive} from "vue";
+import XNav from "../../components/XNav.vue";
+import videoMask from '../../static/images/video-mask.png';
+import XVideoModal from "../../components/XVideoModal.vue";

+const tabs = [
+    {
+        name: '发布问题',
+        value: 0,
+    },
+    {
+        name: '抖音问题',
+        value: 1,
+    },
+    {
+        name: '结算问题',
+        value: 2,
+    },
+    {
+        name: '提现问题',
+        value: 3,
+    },
+];
+const tab = ref(0);
+const current = ref(0);
+const collapseCur = ref(0);
+
+const dataList = reactive([
+    {
+        name: "杜甫",
+        intro: "杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。"
+    },
+    {
+        name: "李清照",
+        intro: "李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。"
+    },
+    {
+        name: "鲁迅",
+        intro: "鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。"
+    }
+]);
 </script>

 <template>
    <!--新手教程-->
+    <XNav></XNav>
+
+    <view class="box-border !p-[20rpx]">
+        <swiper class="!h-[240rpx] !w-full overflow-hidden rounded-[8rpx]">
+            <swiper-item class="!w-full !h-full" v-for="i in [1,2,3,4,5]">
+                <image class="!w-full !h-full" mode="widthFix" src="../../static/images/banner占位.png"></image>
+            </swiper-item>
+        </swiper>
+    </view>
+
+    <view class="!grid grid-cols-2 gap-[20rpx] !px-[20rpx]">
+        <view :class="['tab', tab===0 ? 'cur' : '']" @click="tab=0">
+            常见问题
+        </view>
+        <view :class="['tab', tab===1 ? 'cur' : '']" @click="tab=1">
+            基础教学
+        </view>
+    </view>
+
+    <view class="!mt-[20rpx] !px-[20rpx]">
+        <view class="!w-full bg-[#fff] rounded-[12rpx] pt-[30rpx] px-[20rpx]">
+            <template v-if="tab===0">
+                <view class="!grid grid-cols-4 gap-[20rpx]">
+                    <view
+                        v-for="item in tabs"
+                        @click="current=item.value"
+                        :class="['rounded-full bg-[#F2F3F5] text-center !py-[8rpx] !text-[13px] duration-500', current===item.value ? 'current' : '']">
+                        {{ item.name }}
+                    </view>
+                </view>
+
+                <view class="!mt-[28rpx]">
+                    <template v-for="(item,index) in dataList" :key="index">
+                        <tui-collapse :index="index" :current="collapseCur" :disabled="item.disabled"
+                                      @click="({index}) => collapseCur=index">
+                            <template v-slot:title>
+                                <tui-list-cell :hover="!item.disabled">{{ item.name }}</tui-list-cell>
+                            </template>
+                            <template v-slot:content>
+                                <view class="tui-content">{{ item.intro }}</view>
+                            </template>
+                        </tui-collapse>
+                    </template>
+                </view>
+            </template>
+
+            <template v-else>
+                <view class="!grid grid-cols-4 gap-[20rpx]">
+                    <view
+                        v-for="item in tabs"
+                        @click="current=item.value"
+                        :class="['rounded-full bg-[#F2F3F5] text-center !py-[8rpx] !text-[13px] duration-500', current===item.value ? 'current' : '']">
+                        {{ item.name }}
+                    </view>
+                </view>
+
+                <view class="!mt-[28rpx]">
+                    <template v-for="(item,index) in dataList" :key="index">
+                        <x-video-modal>
+                            <view
+                                :class="['!flex gap-[16rpx] py-[28rpx] box-border', index<dataList.length-1 ? 'border-b' : '']">
+                                <image class="!w-[148rpx] !h-[120rpx] rounded-[12rpx]" mode="aspectFill"
+                                       :src="videoMask"></image>
+
+                                <view class="!flex flex-col gap-[8rpx]">
+                                    <view class="title">掘金壁纸详细挂载教程，新手必看</view>
+                                    <view class="info">
+                                        掘金壁纸详细挂载教程，新手必看掘金壁纸详细挂载教程，新手必看
+                                    </view>
+                                </view>
+                            </view>
+                        </x-video-modal>
+                    </template>
+                </view>
+            </template>
+        </view>
+    </view>
 </template>

-<style scoped>
+<style lang="scss" scoped>
+.border-b {
+    border-bottom: 1px solid rgb(229, 230, 235);
+}

+.title {
+    color: rgb(29, 33, 41);
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.info {
+    color: rgb(134, 144, 156);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.tab {
+    width: 100%;
+    padding: 20rpx;
+    background-color: #fff;
+    border-radius: 12rpx;
+    color: rgb(29, 33, 41);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: center;
+    transition: 500ms;
+}
+
+.current {
+    background-color: #E8F3FF;
+    color: #165DFF;
+}
+
+#tabs {
+    width: 100% !important;
+    padding: 0 !important;
+}
+
+.cur {
+    background-color: rgb(22, 93, 255);
+    color: #fff;
+}
 </style>
--- a/src/pages/comingSoon/index.vue
+++ b/src/pages/comingSoon/index.vue
@@ -0,0 +1,92 @@
+<script setup>
+import jqqd from "../../static/icons/jqqd.jpg";
+import XNav from "../../components/XNav.vue";
+</script>
+
+<template>
+    <!--敬请期待-->
+    <XNav></XNav>
+
+    <view class="container">
+        <view class="content">
+            <view class="image-wrapper">
+                <image class="main-image" :src="jqqd" mode="aspectFit"/>
+            </view>
+            <view class="text-section">
+                <text class="title">敬请期待</text>
+                <text class="subtitle">精彩内容正在建设中...</text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.container {
+    height: calc(100vh - 100rpx);
+    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 40rpx;
+}
+
+.content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    animation: fadeIn 1s ease-in;
+}
+
+.image-wrapper {
+    width: 400rpx;
+    height: 400rpx;
+    margin-bottom: 60rpx;
+    animation: float 3s ease-in-out infinite;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+.main-image {
+    width: 100%;
+    height: 100%;
+}
+
+.text-section {
+    text-align: center;
+}
+
+.title {
+    display: block;
+    font-size: 28px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 20rpx;
+}
+
+.subtitle {
+    display: block;
+    font-size: 16px;
+    color: #666;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20rpx);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-20rpx);
+    }
+}
+</style>
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -5,56 +5,182 @@ import nav2 from '../../static/icons/icon-收益榜单.png';
 import nav3 from '../../static/icons/icon-邀请好友.png';
 import nav4 from '../../static/icons/icon-添加客服.png';
 import nav5 from '../../static/icons/icon-重要消息.png';
+import XDropdownList from "../../components/XDropdownList.vue";
+import XDropdownItem from "../../components/XDropdownItem.vue";
+import TaskItem from "../../components/TaskItem.vue";
+import useTableQuery from "../../hooks/useTableQuery.js";
+import Api from "../../api/index.js";
+import {reactive, ref} from "vue";
+import {toPage} from "../../utils/uils.js";
+import AddCustomerServiceModal from "../../components/AddCustomerServiceModal.vue";

+const showAddCustomer = ref(false);
 const nav = [
    {
        title: '新手教学',
        icon: nav1,
+        path: '/pages/beginnerTutorial/index',
    },
    {
        title: '收益榜单',
        icon: nav2,
+        path: '/pages/comingSoon/index',
    },
    {
        title: '邀请好友',
        icon: nav3,
+        path: '/pages/InviteFriends/index',
    },
    {
        title: '添加客服',
        icon: nav4,
+        path: null,
+        onClick: () => {
+            showAddCustomer.value = true;
+        }
    },
    {
        title: '重要消息',
        icon: nav5,
+        path: '/pages/messageCenter/index',
    },
 ];
+
+const po = reactive({
+});
+const vo = reactive({
+    page: '',
+    rows: [],
+    total: 0,
+});
+
+const {loading, pagination, initFetchData} = useTableQuery({
+    api: Api.system.getData,
+    parameter: po,
+    callback: (data) => {
+        vo.page = data.page;
+        vo.total = data.total;
+        vo.rows =[...vo.rows, ... data.rows];
+    }
+});
 </script>

 <template>
    <!--首页-->
    <XNav :show-back="false"></XNav>

-    <view class="box-border !p-[20rpx]">
-        <swiper class="!h-[240rpx] !w-full overflow-hidden rounded-[8rpx]">
-            <swiper-item class="!w-full !h-full" v-for="i in [1,2,3,4,5]">
-                <image class="!w-full !h-full" mode="widthFix" src="../../static/images/banner占位.png"></image>
-            </swiper-item>
-        </swiper>
-    </view>
+    <add-customer-service-modal v-model:show="showAddCustomer"></add-customer-service-modal>

-    <view class="mt-[44rpx] !flex !gap-[50rpx] !mx-[36rpx]">
-        <view v-for="item in nav" :key="item.title" class="!flex flex-col items-center gap-[6rpx]">
-            <view class="!size-[96rpx] rounded-[20rpx] overflow-hidden">
-                <image class="!size-full" :src="item.icon"></image>
+    <scroll-view
+        @refresherpulling="initFetchData()"
+        @scrolltolower="pagination.current++"
+        class="h-[calc(100vh-200rpx)]"
+        scroll-y>
+        <view class="relative overflow-hidden bg-b-r !pb-[34rpx]">
+            <image class="!w-full !absolute top-1/2 -translate-y-1/2" src="/static/icons/home-bg.png"
+                   mode="widthFix"></image>
+            <view class="!w-full !h-full !absolute !top-0 !left-0 bg-w"></view>
+
+            <view class="box-border !p-[20rpx]">
+                <swiper class="!h-[240rpx] !w-full overflow-hidden rounded-[8rpx]">
+                    <swiper-item class="!w-full !h-full" v-for="i in [1,2,3,4,5]">
+                        <image class="!w-full !h-full" mode="widthFix" src="../../static/images/banner占位.png"></image>
+                    </swiper-item>
+                </swiper>
            </view>

-            <view class="nav-desc">{{item.title}}</view>
+            <view class="mt-[44rpx] !flex !gap-[50rpx] !mx-[36rpx] relative z-10">
+                <view
+                    v-for="item in nav"
+                    :key="item.title"
+                    @click="item.path ? toPage(item.path) : item.onClick()"
+                    class="!flex flex-col items-center gap-[6rpx]">
+                    <view class="!size-[96rpx] rounded-[20rpx] overflow-hidden">
+                        <image class="!size-full" :src="item.icon"></image>
+                    </view>
+
+                    <view class="nav-desc">{{ item.title }}</view>
+                </view>
+            </view>
        </view>
-    </view>
+
+        <view class="title">
+            任务列表
+        </view>
+
+        <view class="!grid !grid-cols-3 !px-[20rpx] gap-[20rpx]">
+            <x-dropdown-list>
+                <view class="bg-[#fff] !py-[14rpx] !px-[24rpx] rounded-[8rpx]">
+                    全部任务
+                </view>
+                <template #menu>
+                    <x-dropdown-item>全部任务</x-dropdown-item>
+                    <x-dropdown-item>宣发任务</x-dropdown-item>
+                    <x-dropdown-item>评论任务</x-dropdown-item>
+                    <x-dropdown-item>点赞任务</x-dropdown-item>
+                    <x-dropdown-item>助力任务</x-dropdown-item>
+                    <x-dropdown-item>其他任务</x-dropdown-item>
+                </template>
+            </x-dropdown-list>
+            <x-dropdown-list>
+                <view class="bg-[#fff] !py-[14rpx] !px-[24rpx] rounded-[8rpx]">
+                    全部平台
+                </view>
+                <template #menu>
+                    <x-dropdown-item>全部平台</x-dropdown-item>
+                    <x-dropdown-item>抖音</x-dropdown-item>
+                    <x-dropdown-item>快手</x-dropdown-item>
+                    <x-dropdown-item>小红书</x-dropdown-item>
+                    <x-dropdown-item>今日头条</x-dropdown-item>
+                    <x-dropdown-item>其他</x-dropdown-item>
+                </template>
+            </x-dropdown-list>
+            <x-dropdown-list>
+                <view class="bg-[#fff] !py-[14rpx] !px-[24rpx] rounded-[8rpx]">
+                    默认排序
+                </view>
+                <template #menu>
+                    <x-dropdown-item>默认排序</x-dropdown-item>
+                    <x-dropdown-item>价格最高</x-dropdown-item>
+                    <x-dropdown-item>极速打款</x-dropdown-item>
+                    <x-dropdown-item>素材安全</x-dropdown-item>
+                    <x-dropdown-item>简单上手</x-dropdown-item>
+                    <x-dropdown-item>最新发布</x-dropdown-item>
+                </template>
+            </x-dropdown-list>
+        </view>
+
+        <view class="!flex flex-col gap-[20rpx] !mt-[20rpx] !px-[20rpx]">
+            <task-item v-for="i in vo.rows"></task-item>
+
+            <tui-loadmore v-if="loading" text="加载中..."></tui-loadmore>
+        </view>
+    </scroll-view>
 </template>

 <style lang="scss" scoped>
+.bg-b-r {
+    border-bottom-right-radius: 20rpx;
+    border-bottom-left-radius: 20rpx;
+}
+
+.bg-w {
+    overflow: hidden;
+    background: linear-gradient(180.00deg, rgb(0, 0, 0, 0), rgb(255, 255, 255) 90%);
+}
+
 .nav-desc {
    font-size: 20rpx;
 }
+
+.title {
+    color: rgb(29, 33, 41);
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+    margin: 28rpx 0;
+    padding: 0 20rpx;
+}
 </style>
--- a/src/pages/myTask/index.vue
+++ b/src/pages/myTask/index.vue
@@ -1,11 +1,142 @@
 <script setup>
+import filer from '../../static/icons/filer.png';
+import XNav from "../../components/XNav.vue";
+import {ref} from "vue";
+import TaskCard from "../../components/TaskCard.vue";

+const tabs = [
+    {
+        name: '发布问题',
+        value: 0,
+    },
+    {
+        name: '抖音问题',
+        value: 1,
+    },
+    {
+        name: '结算问题',
+        value: 2,
+    },
+    {
+        name: '提现问题',
+        value: 3,
+    },
+];
+const current = ref(0);
 </script>

 <template>
    <!--我的任务-->
+    <XNav :show-back="false"></XNav>
+
+    <view class="relative">
+        <view class="!w-full !h-[414rpx] bg-[var(--primary-color)] bor-b-r !absolute">
+        </view>
+
+        <view class="!grid grid-cols-4 bg-[#4080FF] py-[20rpx] text-[13px] text-[#fff] relative z-10">
+            <view class="!w-full text-center !flex justify-center items-center">全部任务</view>
+            <view class="!w-full text-center !flex justify-center items-center">全部平台</view>
+            <view class="!w-full text-center !flex justify-center items-center">全部状态</view>
+            <view class="!w-full text-center !flex justify-center items-center">
+                <view
+                    class="!flex items-center justify-center gap-[10rpx] !py-[10rpx] !px-[30rpx] bg-[#0E42D2] rounded-[8rpx]">
+                    <image class="!w-[22rpx] !h-[22rpx]" :src="filer"></image>
+                    筛选
+                </view>
+            </view>
+        </view>
+
+        <view class="!p-[20rpx] relative z-10">
+            <view class="rounded-[12rpx] !p-[20rpx] bg-[#fff]">
+                <view class="!flex items-center justify-between">
+                    <view class="stic-title">| 数据概览</view>
+                    <view class="stic-date">2024.08.07-2024.09.07</view>
+                </view>
+
+                <view class="!mt-[20rpx] !grid grid-cols-2 grid-rows-2 gap-[20rpx]">
+                    <view
+                        class="!w-full !h-[146rpx] bg-[#E8F3FF] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
+                        <view class="block-title">接受任务数</view>
+                        <view class="block-value">10</view>
+                    </view>
+                    <view
+                        class="!w-full !h-[146rpx] bg-[#E8F3FF] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
+                        <view class="block-title">预估收益(元)</view>
+                        <view class="block-value">45.00</view>
+                    </view>
+                    <view
+                        class="!w-full !h-[146rpx] !bg-[#E8FFEA] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
+                        <view class="block-title">完成任务数</view>
+                        <view class="block-value">4</view>
+                    </view>
+                    <view
+                        class="!w-full !h-[146rpx] !bg-[#E8FFEA] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
+                        <view class="block-title">到账收益(元)</view>
+                        <view class="block-value">5.60</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <view class="!grid grid-cols-4 gap-[20rpx] !px-[20rpx]">
+            <view
+                v-for="item in tabs"
+                @click="current=item.value"
+                :class="['rounded-full bg-[#fff] text-center !py-[8rpx] !text-[13px] duration-500', current===item.value ? 'current' : '']">
+                {{ item.name }}
+            </view>
+        </view>
+
+        <view class="!flex flex-col gap-[20rpx] !px-[20rpx] !mt-[20rpx]">
+            <TaskCard v-for="i in 100"></TaskCard>
+        </view>
+    </view>
 </template>

-<style scoped>
+<style lang="scss" scoped>
+.current {
+    background-color: #165DFF;
+    color: #fff;
+}

+.block-value {
+    color: rgb(22, 93, 255);
+    font-size: 40rpx;
+    font-weight: 500;
+    line-height: 23px;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.block-title {
+    color: rgb(29, 33, 41);
+    font-size: 24rpx;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.bor-b-r {
+    border-bottom-left-radius: 12rpx;
+    border-bottom-right-radius: 12rpx;
+}
+
+.stic-title {
+    color: rgb(29, 33, 41);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
+
+.stic-date {
+    color: rgb(134, 144, 156);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: left;
+}
 </style>
--- a/src/scss/index.scss
+++ b/src/scss/index.scss
@@ -3,4 +3,5 @@ Page {
 }
 page {
    background-color: #F2F3F5;
+    font-family: PingFang SC;
 }
--- a/src/static/icons/filer.png
+++ b/src/static/icons/filer.png
--- a/src/static/icons/home-bg.png
+++ b/src/static/icons/home-bg.png
--- a/src/static/icons/jqqd.jpg
+++ b/src/static/icons/jqqd.jpg
--- a/src/static/icons/play.png
+++ b/src/static/icons/play.png
--- a/src/static/icons/qrw.png
+++ b/src/static/icons/qrw.png
--- a/src/static/icons/yqhy-bg.png
+++ b/src/static/icons/yqhy-bg.png
--- a/src/static/images/fmt.png
+++ b/src/static/images/fmt.png
--- a/src/static/images/video-mask.png
+++ b/src/static/images/video-mask.png
--- a/src/static/images/抖音.png
+++ b/src/static/images/抖音.png
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -2,10 +2,12 @@ import {showToast} from "./uils.js";

 const request = (options) => {
    return new Promise((resolve, reject) => {
-        const {url, method} = options;
+        const {url, method, data, params} = options;

        uni.request({
            method: method,
+            data: data,
+            params: params,
            url: `${import.meta.env.VITE_API_URL}${url}`,
            success: ({data}) => {
                if (data.code !== 0) {
--- a/src/utils/uils.js
+++ b/src/utils/uils.js
@@ -19,3 +19,7 @@ export const toPage = (url) => {
        url: url,
    }).then();
 }
+
+export const backPage = () => {
+    window.history.back();
+}