102 lines
2.4 KiB
Vue
102 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<view class="home-page">
|
||
|
|
<view class="banner">
|
||
|
|
<image :src="banner" mode="aspectFill" style="width:100%"></image>
|
||
|
|
</view>
|
||
|
|
<view class="container tn-p">
|
||
|
|
<view class="title tn-text-2xl tn-text-bold tn-text-center tn-border-bottom tn-gray-light_border tn-p">
|
||
|
|
{{config.siteName}}
|
||
|
|
</view>
|
||
|
|
<view class="item" v-for="(item,index) in menuList" :key="index">
|
||
|
|
<TnTitle :title="item.cateName" mode="vLine" size="lg" @click="navTo(item)"></TnTitle>
|
||
|
|
<view class="tn-flex tn-flex-wrap tn-flex-center-between tn-mt" v-if="item.children">
|
||
|
|
<view class="sub_item tn-mb tn-radius tn-gradient-bg__cool-6" v-for="(itm,idx) in item.children" :key="idx" @click="navTo(itm)">
|
||
|
|
<view class="tn-text-lg tn-p tn-text-center tn-text-bold" style="color: #fff;letter-spacing: 4rpx;">{{itm.cateName}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { onMounted, ref } from 'vue';
|
||
|
|
import request from '@/utils/request';
|
||
|
|
import config from '@/config/config.js'
|
||
|
|
|
||
|
|
const banner = ref('/static/index_top.jpg')
|
||
|
|
|
||
|
|
const menuList = ref([])
|
||
|
|
|
||
|
|
const getMenuData = () => {
|
||
|
|
request({
|
||
|
|
url: '/front/content/category',
|
||
|
|
method:'GET',
|
||
|
|
}).then((res)=>{
|
||
|
|
if(res.data.code === 0){
|
||
|
|
menuList.value = toTreeData(res.data.data,0)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const toTreeData = (list: any, root: number) => {
|
||
|
|
const arr = []
|
||
|
|
list.forEach((item: any) => {
|
||
|
|
if (item.parentId === root) {
|
||
|
|
const children = toTreeData(list, item.cateId)
|
||
|
|
if (children.length > 0) {
|
||
|
|
item.children = children
|
||
|
|
}
|
||
|
|
arr.push(item)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return arr
|
||
|
|
}
|
||
|
|
|
||
|
|
const navTo = (item:any) => {
|
||
|
|
if(item.menuType === 1){
|
||
|
|
if(item.template){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:item.template + '?cateId=' + item.cateId
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/pages/category/index?cateId=' + item.cateId
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}else if(item.menuType === 2){
|
||
|
|
//外链
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/pages/webview/index?url=' + encodeURIComponent(item.url)
|
||
|
|
})
|
||
|
|
}else if(item.menuType === 3){
|
||
|
|
//内链
|
||
|
|
}else{
|
||
|
|
return
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(()=>{
|
||
|
|
getMenuData()
|
||
|
|
})
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.home-page{
|
||
|
|
position: relative;
|
||
|
|
.container{
|
||
|
|
background-color: #fff;
|
||
|
|
position: relative;
|
||
|
|
top:-40rpx;
|
||
|
|
border-top-left-radius: 40rpx;
|
||
|
|
border-top-right-radius: 40rpx;
|
||
|
|
.item{
|
||
|
|
.sub_item{
|
||
|
|
width: calc(100% / 2 - 10rpx);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|