408 lines
9.9 KiB
Vue
408 lines
9.9 KiB
Vue
<template>
|
|
<view class="home-page">
|
|
<!-- banner -->
|
|
<view class="banner">
|
|
<image class="tn-image" :src="banner" mode="aspectFill" />
|
|
<view class="banner-content tn-p-lg">
|
|
<view class="tn-pt-xl">
|
|
<view class="top tn-flex tn-pl">
|
|
<view class="logo tn-mr">
|
|
<TnAvatar :url="logo" :border="true" :border-bold="true" size="xl"/>
|
|
</view>
|
|
<view class="name tn-text-left tn-text-3xl" style="font-family: handsome;line-height: 1.4em;letter-spacing: 16rpx;">
|
|
重庆市江津区<br>工业园
|
|
</view>
|
|
</view>
|
|
<view class="bottom tn-flex tn-mt-sm tn-pl">
|
|
<view class="left tn-text-center tn-text-bold tn-border-right tn-pr tn-pl-sm">
|
|
江<span style="width: 1em;display: inline-block;"></span>津<br>工业园
|
|
</view>
|
|
<view class="right tn-pl">
|
|
国家新型工业化产业示范基地<br>国家级绿色工业园区
|
|
</view>
|
|
</view>
|
|
<view class="entry tn-flex tn-flex-start-end">
|
|
<view class="link tn-flex tn-radius tn-pl-xs tn-pr-xs" @click="toIntro">
|
|
<TnIcon class="icon tn-text-2xl" name="rocket"/>
|
|
<view class="text">
|
|
查看详情
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="home-content tn-p tn-pb-0">
|
|
<!-- 板块列表 -->
|
|
<view class="fields tn-pt-lg tn-radius tn-shadow tn-blue-light_shadow">
|
|
<TnScrollList>
|
|
<view class="item-container tn-flex">
|
|
<view
|
|
v-for="(item,index) in fieldList" :key="index" @click="toPage(item)"
|
|
class="items"
|
|
>
|
|
<view :class="['icon',item.background,'tn-flex','tn-flex-center-center','tn-shadow','tn-blue-light_shadow']">
|
|
<TnIcon :name="item.front_icon" color="#fff" size="50"/>
|
|
</view>
|
|
<view class="title tn-mt-xs">{{item.title}}</view>
|
|
</view>
|
|
</view>
|
|
</TnScrollList>
|
|
</view>
|
|
|
|
<!-- 园区列表 -->
|
|
<view class="parks tn-shadow tn-blue-light_shadow" v-if="parkFlag">
|
|
<TnStackSwiper autoplay>
|
|
<TnStackSwiperItem v-for="(item,index) in parkList" :key="index">
|
|
<view class="swiper-item tn-flex " @click="toPark(item.parkId)">
|
|
<image :src="item.image" mode="aspectFill" class="tn-radius tn-w-full tn-h-full"/>
|
|
<view class="title" style="writing-mode: vertical-rl;">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
</TnStackSwiperItem>
|
|
</TnStackSwiper>
|
|
</view>
|
|
|
|
<!-- 招商推介 -->
|
|
<view class="tn-mb-lg">
|
|
<TnTitle title="招商推介" mode="vLine" assist-color="tn-blue-dark" color="tn-blue-dark" size="xl" style="font-weight: bold;"/>
|
|
</view>
|
|
<view class="intro tn-shadow tn-radius tn-blue-light_shadow tn-gradient-bg__blue" @click="toInvest">
|
|
<image :src="investAd" mode="aspectFill" class="tn-radius tn-w-full tn-h-full"/>
|
|
</view>
|
|
|
|
<!-- 新闻列表 -->
|
|
<view class="news tn-mt-lg">
|
|
<view class="tn-mb-lg">
|
|
<TnTitle title="园区动态" mode="vLine" assist-color="tn-blue-dark" color="tn-blue-dark" size="xl" style="font-weight: bold;"/>
|
|
</view>
|
|
|
|
<view class="article-list tn-shadow tn-blue-light_shadow tn-p-xs tn-radius" v-if="newsFlag">
|
|
<view class="article-item tn-pt-sm tn-pb-sm tn-border-bottom tn-grey-light_border" v-for="item in articleList"
|
|
:key="item.id" @click="toDetail(item.id)">
|
|
<view class="tn-flex tn-w-full">
|
|
<view class="tn-w-2-5 tn-pr-sm">
|
|
<view class="image tn-radius tn-flex tn-flex-center-center tn-border tn-gray-light_border" style="width: 100%;height: 160rpx;">
|
|
<image class="tn-w-full tn-h-full" :src="item.image?item.image:defaultImg" mode="aspectFill"/>
|
|
</view>
|
|
</view>
|
|
<view class="tn-w-3-5 tn-flex-column tn-flex-wrap tn-flex-start-between" style="height: 160rpx;">
|
|
<view class="title tn-w-full tn-text-lg tn-text-ellipsis-2">
|
|
{{item.title}}
|
|
</view>
|
|
|
|
<view class="time">
|
|
<TnIcon name="clock"></TnIcon>{{dayjs(item.created_at).format('YYYY-MM-DD')}}
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="loadmore tn-p-sm">
|
|
<TnLoadmore :status="loadmoreStatus" color="#666" loading-icon-mode="flower" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<tab-bar :current='0'/>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
import baseUrl from '@/config/config';
|
|
import onShare from '@/utils/share';
|
|
import { ref } from 'vue';
|
|
import dayjs from "dayjs";
|
|
import storage from '@/utils/storage';
|
|
import { onReachBottom } from "@dcloudio/uni-app";
|
|
import TnStackSwiper from '@/node_modules/tnuiv3p-tn-stack-swiper/index.vue'
|
|
import TnStackSwiperItem from '@/node_modules/tnuiv3p-tn-stack-swiper/item.vue'
|
|
import type { LoadmoreStatus } from '@tuniao/tnui-vue3-uniapp'
|
|
import TnLoadmore from '@/uni_modules/tuniaoui-vue3/components/loadmore/src/loadmore.vue'
|
|
import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
|
|
import TabBar from '@/pages/components/tab-bar.vue';
|
|
import TnScrollList from '@/uni_modules/tuniaoui-vue3/components/scroll-list/src/scroll-list.vue'
|
|
|
|
const { onShareAppMessage, onShareTimeline } = onShare()
|
|
|
|
const logo = ref('https://static1.cqtlcm.com/attachment/kxc-xcx/logo.jpg ')
|
|
|
|
const banner = ref('https://static1.cqtlcm.com/attachment/kxc-xcx/index_top.png')
|
|
|
|
const defaultImg = ref('https://static1.cqtlcm.com/attachment/kxc-xcx/defaultImg.jpg')
|
|
|
|
const investAd = ref('https://static1.cqtlcm.com/attachment/kxc-xcx/tuijie.jpg')
|
|
|
|
const fieldFlag = ref(false);
|
|
|
|
const parkFlag = ref(false);
|
|
|
|
const newsFlag = ref(false);
|
|
|
|
const parkList = ref()
|
|
|
|
const fieldList = ref()
|
|
|
|
const articleList = ref([])
|
|
|
|
const loadmoreStatus = ref<LoadmoreStatus>('loadmore')
|
|
|
|
const page = ref(1);
|
|
|
|
const limit = ref(5);
|
|
|
|
const shareTitle = ref("江津区工业园")
|
|
|
|
const getFieldList = () => {
|
|
uni.request({
|
|
url:baseUrl + '/front/report/top_menu',
|
|
success:(res:any) => {
|
|
if(res.data.code === 0){
|
|
fieldList.value = res.data.data
|
|
fieldFlag.value = true
|
|
} else {
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:res.data.message
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const getParkList = () => {
|
|
uni.request({
|
|
url:baseUrl + '/front/parks',
|
|
success: (res:any) => {
|
|
if(res.data.code === 0){
|
|
|
|
parkList.value = res.data.data
|
|
|
|
uni.setNavigationBarTitle({
|
|
title:shareTitle.value
|
|
})
|
|
|
|
parkFlag.value = true
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const getArticleList = () => {
|
|
loadmoreStatus.value = 'loading';
|
|
uni.request({
|
|
url: baseUrl + '/front/article/page',
|
|
data: {
|
|
page: page.value,
|
|
limit: limit.value
|
|
},
|
|
method: 'GET',
|
|
success: (res : any) => {
|
|
if (res.data.code === 0) {
|
|
if (res.data.data.length < 5) {
|
|
loadmoreStatus.value = 'nomore'
|
|
} else {
|
|
loadmoreStatus.value = 'loadmore'
|
|
}
|
|
articleList.value = [...articleList.value, ...res.data.data.list]
|
|
} else {
|
|
loadmoreStatus.value = 'nomore'
|
|
}
|
|
newsFlag.value = true
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
const toPage = (item: any) => {
|
|
let storageUser = storage.get('storageUser');
|
|
let isLogin = storage.get('isLogin')
|
|
if(item.mustLogin === 0){
|
|
if(!isLogin){
|
|
// #ifdef MP
|
|
uni.navigateTo({
|
|
url:'/pages/ucenter/index'
|
|
})
|
|
// #endif
|
|
// #ifdef H5
|
|
uni.navigateTo({
|
|
url:'/pages/login/login'
|
|
})
|
|
// #endif
|
|
}else{
|
|
if(storageUser && storageUser.right === 0){
|
|
uni.showToast({
|
|
icon:'none',
|
|
title:'暂时没有权限访问，请联系管理员'
|
|
})
|
|
}else{
|
|
uni.navigateTo({
|
|
url:item.template + '?id=' + item.menuId
|
|
})
|
|
}
|
|
}
|
|
}else{
|
|
uni.navigateTo({
|
|
url:item.template + '?id=' + item.menuId
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
const toDetail = (id : number) => {
|
|
uni.navigateTo({
|
|
url: '/pages/article/detail/index?id=' + id
|
|
})
|
|
}
|
|
|
|
|
|
const toIntro = () => {
|
|
uni.navigateTo({
|
|
url:'/pages/park/intro',
|
|
})
|
|
}
|
|
|
|
const toInvest = () => {
|
|
uni.navigateTo({
|
|
url:'/pages/investIntro/index'
|
|
})
|
|
}
|
|
|
|
const toPark = (id:number) => {
|
|
uni.navigateTo({
|
|
url:'/pages/park/index?id=' + id,
|
|
})
|
|
}
|
|
|
|
onShareAppMessage(() => {
|
|
return {
|
|
title:shareTitle.value,
|
|
path:'/pages/index/index'
|
|
}
|
|
})
|
|
|
|
onShareTimeline(() => {
|
|
return {
|
|
title:shareTitle.value,
|
|
path:'/pages/index/index'
|
|
}
|
|
})
|
|
|
|
onReachBottom(() => {
|
|
loadmoreStatus.value = 'loading'
|
|
page.value += 1
|
|
getArticleList()
|
|
})
|
|
getFieldList()
|
|
getParkList()
|
|
getArticleList()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.banner{
|
|
position: relative;
|
|
height: 500rpx;
|
|
.banner-content{
|
|
position: absolute;
|
|
top:80rpx;
|
|
color: #FFF;
|
|
width: 100%;
|
|
z-index: 20;
|
|
.top{
|
|
letter-spacing: 8rpx;
|
|
height:140rpx;
|
|
.logo{
|
|
height:140rpx;
|
|
margin-top: 15rpx;
|
|
}
|
|
}
|
|
.bottom{
|
|
.left{
|
|
text-align: justify;
|
|
}
|
|
}
|
|
.entry{
|
|
margin-top: -20rpx;
|
|
.link{
|
|
.text{
|
|
line-height: 2em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 402rpx;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background: linear-gradient(
|
|
0deg,
|
|
rgba(240, 248, 255, 1) 0%,
|
|
rgba(240, 248, 255, 0) 100%
|
|
);
|
|
z-index: 1;
|
|
}
|
|
}
|
|
.home-content{
|
|
.fields{
|
|
background-color: #FFF;
|
|
position: relative;
|
|
top: -80rpx;
|
|
z-index: 9;
|
|
.item-container{
|
|
position: relative;
|
|
width: fit-content;
|
|
}
|
|
.items{
|
|
width: 175rpx;
|
|
.icon{
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
margin: auto;
|
|
border-radius: 50%;
|
|
}
|
|
.title{
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.parks{
|
|
position: relative;
|
|
top: -40rpx;
|
|
height: 360rpx;
|
|
.swiper-item{
|
|
height: 100%;
|
|
.title{
|
|
background-color: rgba(255,255,255,0.5);
|
|
text-align: center;
|
|
line-height: 1.5em;
|
|
letter-spacing: 4rpx;
|
|
font-size: 32rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
height:360rpx;
|
|
}
|
|
}
|
|
}
|
|
.intro{
|
|
width: 100%;
|
|
height: 200rpx;
|
|
}
|
|
.news{
|
|
.article-list{
|
|
background-color: #FFF;
|
|
.article-item{
|
|
height: 200rpx;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
</style>
|