feat: 优化代码
This commit is contained in:
@@ -0,0 +1,259 @@
|
||||
<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/login_package/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>
|
||||
Reference in New Issue
Block a user