267 lines
6.5 KiB
Vue
267 lines
6.5 KiB
Vue
<template>
|
||
<view class="news_warp">
|
||
<Header
|
||
leftTitle="商学院"
|
||
left-path-type="switchTab"
|
||
left-path="/pages/mine/mine"
|
||
style="background-color: #FFFFFF;"
|
||
/>
|
||
<view class="news_content_warp">
|
||
<view class="heder_">
|
||
<view
|
||
v-for="item in titleList"
|
||
:key="item.key"
|
||
:class="form.type === item.key ? 'heder_item_sel heder_item':'heder_item'"
|
||
@click="headerClick(item)"
|
||
>
|
||
{{item.value}}
|
||
</view>
|
||
</view>
|
||
<view style="padding: 20rpx 0;">
|
||
<up-swiper
|
||
:list="swiperList"
|
||
height="120"
|
||
radius="10"
|
||
@change="e => currentNum = e.current"
|
||
bgColor="#ffffff00"
|
||
>
|
||
<template #indicator>
|
||
<view
|
||
class="indicator-num"
|
||
>
|
||
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
|
||
</view>
|
||
</template>
|
||
</up-swiper>
|
||
</view>
|
||
</view>
|
||
<view class="content_">
|
||
<scroll-view scroll-y="true" @scrolltolower="loadMore" style="height:calc(100vh - 560rpx)">
|
||
<up-input
|
||
placeholder="搜索关键字"
|
||
v-model="form.keywork"
|
||
prefixIcon="search"
|
||
prefixIconStyle="font-size: 22px;color: #909399"
|
||
:customStyle="inputCss"
|
||
>
|
||
<template #suffix>
|
||
<view @click="searchTap" class="search_but">
|
||
搜索
|
||
</view>
|
||
</template>
|
||
</up-input>
|
||
|
||
<view class="news_content_item" v-for="item in newsList" :key="item.id" v-if="newsList && newsList.length !==0" @click="jumpInfo(item)">
|
||
<view class="news_content_item_warp">
|
||
<view class="news_content_item_title">{{item.title}}</view>
|
||
<view v-html="item.subTitle" class="news_content_item_content"></view>
|
||
<view class="news_content_item_info">
|
||
<view>{{formatDate(item.ctdate)}}</view>
|
||
<view class="browses_">
|
||
<view>
|
||
<up-image src="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
|
||
</view>
|
||
<view style="margin-left: 8rpx;">{{item.browses}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<up-image :src="item.coverImage" width="100" height="100" bgColor="#f1f6ff00" radius="8"></up-image>
|
||
</view>
|
||
</view>
|
||
<view v-else class="not_order_warp">
|
||
<up-image src="/static/common/not_order.png" width="80" height="80" bgColor="#f1f6ff00"></up-image>
|
||
<view class="not_order_msg_warp">还未发布新闻哦～</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Header from '@/components/header.vue';
|
||
import { NEWS_TYPE,APP_PAGE_TYPE } from '@/utils/enumUtils.js';
|
||
import { getCarouselImage } from '@/api/common.js';
|
||
import { getNewsList } from '@/api/news.js';
|
||
import { formatDate } from '@/utils/index.js'
|
||
|
||
export default {
|
||
components:{Header},
|
||
data() {
|
||
return {
|
||
titleList:NEWS_TYPE,
|
||
swiperList:[],
|
||
currentNum:0,
|
||
form:{
|
||
keywork:null,
|
||
type:1,
|
||
page:1,
|
||
pageSize:15,
|
||
},
|
||
inputCss:{
|
||
"height":'68rpx',
|
||
"background": "#FFFFFF",
|
||
"border-radius": "16rpx",
|
||
"border": "0rpx",
|
||
"padding": "0 0 0 16px",
|
||
},
|
||
newsList:[],
|
||
newsListTotal:0,
|
||
loading:false,
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.getCarouselImage();
|
||
this.loadData();
|
||
},
|
||
methods: {
|
||
formatDate,
|
||
// 查询轮播图
|
||
async getCarouselImage(){
|
||
const params={
|
||
pageUi:APP_PAGE_TYPE.NEWS,
|
||
}
|
||
const resp = await getCarouselImage(params);
|
||
if(resp && resp.bizcode === 100){
|
||
const data = resp.data || [];
|
||
this.swiperList = data.length !== 0 ? data.map(obj=>obj.carouselImage) : [];
|
||
}
|
||
},
|
||
headerClick(item){
|
||
this.form.type = item.key;
|
||
this.searchTap();
|
||
},
|
||
|
||
// 搜索
|
||
searchTap(){
|
||
this.newsList = [];
|
||
this.form.page = 1;
|
||
this.loadData();
|
||
},
|
||
// 加载数据的方法
|
||
async loadData() {
|
||
if (this.loading) return; // 如果正在加载，则不重复加载
|
||
this.loading = true; // 设置加载状态为true
|
||
try {
|
||
const newData = await this.fetchData(this.form.page, this.form.pageSize);
|
||
if(newData.entitys && newData.entitys.length !==0){
|
||
this.newsList = [...this.newsList, ...newData.entitys]; // 将新数据添加到列表中
|
||
this.form.page++;
|
||
}
|
||
} catch (error) {
|
||
console.error('加载数据失败:', error);
|
||
} finally {
|
||
this.loading = false; // 设置加载状态为false
|
||
}
|
||
},
|
||
// 模拟获取数据的方法，实际应用中应该替换为你的数据获取逻辑，例如从服务器获取数据
|
||
async fetchData(page, pageSize) {
|
||
const form = this.form;
|
||
const params = {
|
||
page,
|
||
pageSize,
|
||
type:form.type,
|
||
}
|
||
if(form.keywork){
|
||
params.keywork = form.keywork;
|
||
}
|
||
const data = await getNewsList(params);
|
||
if(data && data.bizcode === 100 && data.data){
|
||
return data.data
|
||
}else{
|
||
return [];
|
||
}
|
||
},
|
||
// 当滚动到底部时触发的方法
|
||
loadMore() {
|
||
this.loadData(); // 加载更多数据
|
||
},
|
||
|
||
/**
|
||
* 跳转到详情
|
||
* @param {Object} item
|
||
*/
|
||
jumpInfo(item){
|
||
uni.navigateTo({
|
||
url:'/pages/news_info/news_info?id='+item.id,
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.news_warp{
|
||
overflow: hidden;
|
||
.news_content_warp{
|
||
padding: 0 30rpx 30rpx;
|
||
}
|
||
.heder_{
|
||
display: flex;
|
||
align-items: center;
|
||
.heder_item{
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #666666;
|
||
margin-right: 30rpx;
|
||
}
|
||
.heder_item_sel{
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
.content_{
|
||
padding: 30rpx;
|
||
background: $app-bj;
|
||
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
||
// height: calc(100vh - 560rpx);
|
||
// overflow: auto;
|
||
.search_but{
|
||
line-height: 68rpx;
|
||
background: $app-bt-bj;
|
||
border-radius: 16rpx;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
padding: 0 40rpx;
|
||
}
|
||
.news_content_item{
|
||
background: #FFFFFF;
|
||
padding: 30rpx;
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.news_content_item_warp{
|
||
margin-right: 20rpx;
|
||
}
|
||
.news_content_item_title{
|
||
font-weight: 800;
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
}
|
||
.news_content_item_content{
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
margin-top: 10rpx;
|
||
}
|
||
.news_content_item_info{
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
.browses_{
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|