xl-mobile/src/pages/beginnerTutorial/index.vue

<script setup>
import {onMounted, reactive, ref} from "vue";
import XNav from "../../components/XNav.vue";
import videoMask from '../../static/images/video-mask.png';
import Api from "../../api/index.js";
import useTableQuery from "../../hooks/useTableQuery.js";
import OpenTypeFun from "../../components/OpenTypeFun.js";

const tabs = reactive([]);
const advList = reactive([]);
const tab = ref(1);
const collapseCur = ref(0);

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>
    <!--新手教程-->
    <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 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===1 ? 'cur' : '']" @click="changeCategory(1)">
            常见问题
        </view>
        <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===1">
                <view class="!grid grid-cols-4 gap-[20rpx]">
                    <view
                        v-for="item in tabs"
                        @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="!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">
                                    <view class="w-full whitespace-nowrap ellipsis !pr-6">
                                        {{ item.title }}
                                    </view>
                                </tui-list-cell>
                            </template>
                            <template v-slot:content>
                                <view class="tui-content px-[16px] text-[#86909C]">{{ item.content }}</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="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="!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">{{ item.title }}</view>
                                <view class="info">
                                    {{ item.content }}
                                </view>
                            </view>
                        </view>
                    </template>
                </view>
            </template>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
}

.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>