update

2025-05-12 19:45:27 +08:00
parent 2e9c403632
commit ce0587d2b6
47 changed files with 1355 additions and 310 deletions
--- a/src/pages/beginnerTutorial/index.vue
+++ b/src/pages/beginnerTutorial/index.vue
@@ -1,45 +1,71 @@
 <script setup>
-import {ref, reactive} from "vue";
+import {onMounted, reactive, ref} from "vue";
 import XNav from "../../components/XNav.vue";
 import videoMask from '../../static/images/video-mask.png';
 import XVideoModal from "../../components/XVideoModal.vue";
+import Api from "../../api/index.js";
+import useTableQuery from "../../hooks/useTableQuery.js";
+import OpenTypeFun from "../../components/OpenTypeFun.js";

-const tabs = [
-    {
-        name: '发布问题',
-        value: 0,
-    },
-    {
-        name: '抖音问题',
-        value: 1,
-    },
-    {
-        name: '结算问题',
-        value: 2,
-    },
-    {
-        name: '提现问题',
-        value: 3,
-    },
-];
-const tab = ref(0);
-const current = ref(0);
+const tabs = reactive([]);
+const advList = reactive([]);
+const tab = ref(1);
 const collapseCur = ref(0);

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

 <template>
@@ -48,42 +74,42 @@ const dataList = reactive([

    <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 class="!w-full !h-full" v-for="i in advList" :key="i.id">
+                <image @click="OpenTypeFun(i)" class="!w-full !h-full" mode="aspectFill" :src="i.file"></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 :class="['tab', tab===1 ? 'cur' : '']" @click="changeCategory(1)">
            常见问题
        </view>
-        <view :class="['tab', tab===1 ? 'cur' : '']" @click="tab=1">
+        <view :class="['tab', tab===2 ? 'cur' : '']" @click="changeCategory(2)">
            基础教学
        </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">
+            <template v-if="tab===1">
                <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' : '']">
+                        @click="changeMinCategory(item.value)"
+                        :class="['rounded-full bg-[#F2F3F5] text-center !py-[8rpx] !text-[13px] duration-500', po.category_id===item.value ? 'current' : '']">
                        {{ item.name }}
                    </view>
                </view>

-                <view class="!mt-[28rpx]">
-                    <template v-for="(item,index) in dataList" :key="index">
+                <view class="!pt-[28rpx]">
+                    <template v-for="(item,index) in [...vo.top, ...vo.rows]" :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>
+                                <tui-list-cell :hover="!item.disabled">{{ item.title }}</tui-list-cell>
                            </template>
                            <template v-slot:content>
-                                <view class="tui-content">{{ item.intro }}</view>
+                                <view class="tui-content px-[16px] text-[#86909C]">{{ item.content }}</view>
                            </template>
                        </tui-collapse>
                    </template>
@@ -94,28 +120,30 @@ const dataList = reactive([
                <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' : '']">
+                        @click="changeMinCategory(item.value)"
+                        :class="['rounded-full bg-[#F2F3F5] text-center !py-[8rpx] !text-[13px] duration-500', po.category_id===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="!pt-[28rpx]">
+                    <template v-for="(item,index) in [...vo.top, ...vo.rows]" :key="index">
+                        <view
+                            @click="OpenTypeFun(item)"
+                            :class="['!flex gap-[16rpx] py-[28rpx] box-border', index<vo.rows.length-1 ? 'border-b' : '']">
+                            <image
+                                class="!w-[148rpx] !h-[120rpx] rounded-[12rpx]"
+                                mode="aspectFill"
+                                :src="item.files && item.files[0] || videoMask">
+                            </image>

-                                <view class="!flex flex-col gap-[8rpx]">
-                                    <view class="title">掘金壁纸详细挂载教程，新手必看</view>
-                                    <view class="info">
-                                        掘金壁纸详细挂载教程，新手必看掘金壁纸详细挂载教程，新手必看
-                                    </view>
+                            <view class="!flex flex-col gap-[8rpx]">
+                                <view class="title">{{ item.title }}</view>
+                                <view class="info">
+                                    {{ item.content }}
                                </view>
                            </view>
-                        </x-video-modal>
+                        </view>
                    </template>
                </view>
            </template>