300 lines
6.8 KiB
Vue
300 lines
6.8 KiB
Vue
<template>
|
|
<view class="farmService">
|
|
<!-- 幻灯 -->
|
|
<view class="swiper">
|
|
<u-swiper :list="swiperList" showTitle keyName="imgUrl" height="160" :circular="true" @change="e => current = e.current" @click="openDetail">
|
|
<view slot="indicator" class="indicator">
|
|
<view class="indicator__dot" v-for="(item, index) in swiperList" :key="index"
|
|
:class="[index === current && 'indicator__dot--active']"></view>
|
|
</view>
|
|
</u-swiper>
|
|
</view>
|
|
|
|
<!-- 分类 -->
|
|
<u-sticky offset-top="0" v-if="total>0">
|
|
<u-tabs class="background-color-fff" :current="currentIndex" :list="categoryList" @click="changeTab" lineColor="#2b7" :activeStyle="{'color':'#2b7'}"></u-tabs>
|
|
</u-sticky>
|
|
|
|
<!-- 新闻列表 -->
|
|
|
|
<view v-if="total>0" class="news">
|
|
<view class="newsItem" v-for="item in newsList" :key="item.newsId" @click="openDetail(1,item.newsId)">
|
|
<view class="left">
|
|
<image class="img" :src="item.imgUrl">
|
|
</image>
|
|
<view class="top" v-if="item.isTop">
|
|
置顶
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="title">
|
|
<u--text :lines="1" size="16" :text="item.title"></u--text>
|
|
</view>
|
|
<view class="remark">
|
|
<u--text color="#9e9e9e" :lines="2" :size="13" :text="item.remark"></u--text>
|
|
</view>
|
|
<view class="time">
|
|
<view class="author">
|
|
{{item.author}}
|
|
</view>
|
|
<view class="createTime">
|
|
{{item.createTime.split(" ")[0]}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 无数据控件 -->
|
|
<u-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"/>
|
|
<u-loadmore :status="status" v-if="total>10"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import image from '../../uni_modules/uview-ui/libs/config/props/image'
|
|
import loadmore from '../../uni_modules/uview-ui/libs/config/props/loadmore'
|
|
export default {
|
|
data() {
|
|
return {
|
|
//baseID
|
|
baseId:null,
|
|
//轮播list
|
|
swiperList:[],
|
|
//当前幻灯值
|
|
current:0,
|
|
//分类list
|
|
categoryList:[],
|
|
//新闻列表
|
|
newsList:[],
|
|
//数据总条数
|
|
total:0,
|
|
//上拉刷新状态
|
|
status:'loadmore',
|
|
//查询条件
|
|
query:{
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
isBanner: 0,
|
|
categoryName:null,
|
|
status: 1,
|
|
baseId:null
|
|
},
|
|
//当前tab值
|
|
currentIndex:0
|
|
}
|
|
},
|
|
onShow() {
|
|
this.baseId = uni.getStorageSync('baseId')
|
|
this.query.baseId = this.baseId;
|
|
this.getCategoryList();
|
|
this.getSwiperList();
|
|
},
|
|
async onPullDownRefresh() {
|
|
//重置pageNum
|
|
this.query.pageNum=1
|
|
//重置categoryName
|
|
this.query.categoryName=this.categoryList[0].name
|
|
//重置tab索引
|
|
this.currentIndex=0
|
|
//重置幻灯索引无效
|
|
//this.current=0;
|
|
//拉取幻灯
|
|
this.getSwiperList();
|
|
//拉新闻
|
|
await this.getNewsList()
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
//触底生命周期
|
|
onReachBottom(){
|
|
this.status="loading"
|
|
this.pullUp()
|
|
},
|
|
methods: {
|
|
//获取分类列表
|
|
async getCategoryList(){
|
|
this.getNewsList();
|
|
|
|
const {rows} = await uni.$u.http.get("/iot/newsCategory/list",{params:{baseId:this.baseId}});
|
|
this.query.categoryName=rows[0].categoryName
|
|
this.categoryList=rows.map(item=>{
|
|
return {
|
|
name:item.categoryName,
|
|
}
|
|
})
|
|
},
|
|
//获取轮播列表
|
|
async getSwiperList(){
|
|
const {rows} = await uni.$u.http.get("/iot/news/list",{params:{
|
|
//轮播标记
|
|
isBanner: 1,
|
|
//已经发布
|
|
status: 1,
|
|
baseId:this.baseId
|
|
}})
|
|
this.swiperList=rows.map(item=>{
|
|
return {
|
|
imgUrl:uni.$u.http.config.baseURL+item.imgUrl,
|
|
title:item.title.length>16?item.title.slice(0,16)+"...":item.title,
|
|
newsId:item.newsId
|
|
}
|
|
})
|
|
},
|
|
//tab切换
|
|
changeTab(data){
|
|
this.query.categoryName=data.name
|
|
this.currentIndex=data.index
|
|
this.query.pageNum=1
|
|
this.getNewsList()
|
|
},
|
|
//获取新闻列表
|
|
async getNewsList(){
|
|
const res = await uni.$u.http.get("/iot/news/list",{params:{...this.query}});
|
|
this.newsList=res.rows.map(item=>({
|
|
...item,
|
|
imgUrl:uni.$u.http.config.baseURL+item.imgUrl
|
|
})).sort((a, b) => {
|
|
if (a.isTop === 1 && b.isTop !== 1) {
|
|
return -1; // a排在b前面
|
|
} else if (a.isTop !== 1 && b.isTop === 1) {
|
|
return 1; // b排在a前面
|
|
} else {
|
|
return 0; // 保持原来的顺序
|
|
}
|
|
});
|
|
this.total=res.total
|
|
},
|
|
//上拉刷新
|
|
async pullUp(){
|
|
//计算当前总页数
|
|
let totalPages = Math.ceil(this.total/10)
|
|
//判断当前页面是否小于总页数
|
|
if(this.query.pageNum<totalPages){
|
|
//页码加1
|
|
this.query.pageNum++
|
|
const res = await uni.$u.http.get('/iot/news/list', {
|
|
params: {
|
|
...this.query
|
|
}
|
|
})
|
|
let data =res.rows.map(item=>{
|
|
return {
|
|
...item,
|
|
imgUrl:uni.$u.http.config.baseURL+item.imgUrl
|
|
}
|
|
})
|
|
//将数据合并到当前的新闻列表
|
|
this.newsList=this.newsList.concat(data)
|
|
//返回total
|
|
this.total=res.total
|
|
}else{
|
|
this.status="nomore"
|
|
}
|
|
},
|
|
//打开详情
|
|
openDetail(index,id){
|
|
if(id){
|
|
uni.$u.route({
|
|
url: 'pages/service/newsDetail',
|
|
params: {
|
|
id: id
|
|
}
|
|
})
|
|
}else{
|
|
uni.$u.route({
|
|
url: 'pages/service/newsDetail',
|
|
params: {
|
|
id: this.swiperList[index].newsId
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.farmService{
|
|
box-sizing: border-box;
|
|
.swiper{
|
|
overflow: hidden;
|
|
position: relative;
|
|
.indicator{
|
|
position: absolute;
|
|
z-index: 999;
|
|
display: flex;
|
|
right: -330rpx;
|
|
top: -10rpx;
|
|
&__dot {
|
|
height: 8rpx;
|
|
width: 16rpx;
|
|
border-radius: 4rpx;
|
|
background-color: #fff;
|
|
margin: 0 4rpx;
|
|
transition: background-color 0.3s;
|
|
transition: width 0.3s;
|
|
&--active {
|
|
background-color: #69BB73;
|
|
width: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.news{
|
|
.newsItem{
|
|
height: 200rpx;
|
|
display: flex;
|
|
margin:20rpx 10rpx;
|
|
background-color: #fff;
|
|
padding:10rpx;
|
|
.left{
|
|
width: 225rpx;
|
|
box-sizing: border-box;
|
|
position:relative;
|
|
.top{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 999;
|
|
background-color: #2b7;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
width:60rpx;
|
|
height:40rpx;
|
|
text-align: center;
|
|
line-height: 40rpx;
|
|
font-weight: bold;
|
|
border-top-right-radius: 10rpx;
|
|
}
|
|
.img{
|
|
width: 225rpx;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.right{
|
|
width: 525rpx;
|
|
height: 100%;
|
|
padding: 10rpx;
|
|
box-sizing: border-box;
|
|
.title{
|
|
height: calc(100% - 130rpx);
|
|
font-weight: 600;
|
|
}
|
|
.remark{
|
|
height: 80rpx;
|
|
}
|
|
.time{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
color: #818486;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|