265 lines
6.7 KiB
Vue
265 lines
6.7 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>
|
||
<qiaobao-assistant page-key="pages/login_package/news/news" title="商城公告" />
|
||
</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="/pages/login_package/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="https://static.tbmall.xin/static/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>
|