259 lines
7.8 KiB
Vue
259 lines
7.8 KiB
Vue
<template>
|
||
<view class="background-white">
|
||
<scroll-view class="top-menu-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
|
||
<view class="menu-topic-view" v-for="(item,index) in tabs" :id="'tabNum'+item.id" :key="index"
|
||
@click="swichMenu(index)">
|
||
<view class="" style="transition: 3s all" :class="currentTab===index ? 'menu-topic-act' : 'menu-topic'">
|
||
<text class="menu-topic-text">{{ item.name }}</text>
|
||
<view class="menu-topic-bottom">
|
||
<view class="menu-topic-bottom-color"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- <view class="banner" @click="goDetail(banner)">
|
||
<image class="banner-img" :src="banner.cover"></image>
|
||
<view class="banner-title">{{ banner.title }}</view>
|
||
</view>-->
|
||
<!--招生章程搜索-->
|
||
<view class="search-view">
|
||
<view style="display: flex;height: 100rpx;border-bottom: 1px solid #f5f5f5;">
|
||
<view style="width: 90%">
|
||
<uni-search-bar class="uni-mt-10" radius="100"
|
||
:placeholder="this.tabs[this.currentTab].id===1?'请输入院校名称':'请输入标题'" v-model="title"
|
||
@clear="clearTitleInput" cancelButton="none" @confirm="searchTitleClick"/>
|
||
</view>
|
||
<view style="width: 10%;line-height: 100rpx">
|
||
<text @click="searchTitleClick">搜索</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<block v-for="(value, index) in tabs[currentTab].list" :key="index">
|
||
<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="gotoArticle(value)">
|
||
<view class="uni-media-list">
|
||
<!--<image class="uni-media-list-logo" :src="value.cover"></image>-->
|
||
<view class="uni-media-list-body">
|
||
<view class="uni-media-list-text-top">{{ value.title }}</view>
|
||
<view class="uni-media-list-text-bottom">
|
||
<text>{{ value.schoolName }}</text>
|
||
<text>{{ value.releaseTime }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view class="container" @click="loadMore">
|
||
<uni-load-more :status="tabs[currentTab].status" :content-text="contentText"/>
|
||
</view>
|
||
<view class="top" :style="{'display':(topFlag===true? 'block':'none')}">
|
||
<uni-icons class="topc" type="arrowthinup" size="40" @click="clickTop"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {dateUtils} from '@/common/util';
|
||
import ApiConstant from "@/common/ApiConstant";
|
||
import Request from "@/common/request";
|
||
import StaticConstant from "@/common/StaticConstant";
|
||
import ImagesConstant from '@/common/ImagesConstant';
|
||
let request = new Request()
|
||
export default {
|
||
computed:{
|
||
ImagesConstant(){
|
||
return ImagesConstant
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
banner: {
|
||
cover: ImagesConstant.jxywtj,
|
||
},
|
||
current: 1,
|
||
pageSize: 10,
|
||
listData: [],
|
||
last_id: '',
|
||
reload: false,
|
||
contentText: StaticConstant.loadContentText,
|
||
scrollLeft: 0,
|
||
topFlag: false,
|
||
|
||
title: '',
|
||
tabs: [
|
||
{id: 1, name: '招生章程', list: [], current: 1, pageSize: 10, status: 'more'},
|
||
{id: 2, name: '高考动态', list: [], current: 1, pageSize: 10, status: 'more'},
|
||
{id: 3, name: '校内资讯', list: [], current: 1, pageSize: 10, status: 'noMore'}
|
||
],
|
||
currentTab: 0,
|
||
};
|
||
},
|
||
onLoad() {
|
||
//this.getBanner();
|
||
this.getAdmissionsRegulationsList(0);
|
||
this.getAdmissionsRegulationsList(1);
|
||
this.getAdmissionsRegulationsList(2);
|
||
},
|
||
onPullDownRefresh() {
|
||
this.reload = true;
|
||
this.last_id = '';
|
||
//this.getBanner();
|
||
this.current = 1
|
||
this.getList();
|
||
},
|
||
onReachBottom() {
|
||
if (this.tabs[this.currentTab].id === 1) {
|
||
this.loadMore();
|
||
}
|
||
},
|
||
onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
|
||
//当距离大于600时显示回到顶部按钮，//当距离小于600时隐藏回到顶部按钮
|
||
this.topFlag = e.scrollTop > 600;
|
||
},
|
||
onShareAppMessage() {
|
||
return {
|
||
title: '招生章程', //分享标题
|
||
path: "/pages/zyb/article/list"
|
||
}
|
||
},
|
||
// 分享到微信朋友圈
|
||
onShareTimeline(res) {
|
||
return {
|
||
title: '招生章程', //分享标题
|
||
path: "/pages/zyb/article/list"
|
||
}
|
||
},
|
||
methods: {
|
||
/*跳转到文章页面*/
|
||
gotoArticle(e) {
|
||
uni.navigateTo({
|
||
url: '/pages/zyb/article/detail?articleId=' + e.id
|
||
})
|
||
},
|
||
getBanner() {
|
||
let data = {
|
||
column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
|
||
};
|
||
uni.request({
|
||
url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
|
||
data: data,
|
||
success: data => {
|
||
uni.stopPullDownRefresh();
|
||
if (data.statusCode == 200) {
|
||
this.banner = data.data;
|
||
}
|
||
},
|
||
fail: (data, code) => {
|
||
console.log('fail' + JSON.stringify(data));
|
||
}
|
||
});
|
||
},
|
||
/*招生章程*/
|
||
getAdmissionsRegulationsList(index) {
|
||
this.setStatus(index,'loading')
|
||
let params = {
|
||
title: this.title,
|
||
type: this.tabs[index||this.currentTab].id,
|
||
pageNum: this.tabs[this.currentTab].current,
|
||
pageSize: this.tabs[this.currentTab].pageSize
|
||
}
|
||
request.get(ApiConstant.Article.articlePage, params).then(res => {
|
||
console.log(res)
|
||
if (res.success) {
|
||
this.tabs[index||this.currentTab].current = res.result.current
|
||
this.tabs[index||this.currentTab].pages = res.result.pages
|
||
//追加到列表数据中
|
||
this.tabs[index||this.currentTab].list = [...this.tabs[index||this.currentTab].list, ...res.result.records]
|
||
console.log(this.tabs)
|
||
if (res.result.current >= res.result.pages) {
|
||
this.setStatus(index,'noMore')
|
||
} else {
|
||
this.setStatus(index,'more')
|
||
}
|
||
} else {
|
||
}
|
||
}).catch(err => {
|
||
}).finally(() => {
|
||
});
|
||
},
|
||
//搜索招生章程
|
||
searchTitleClick() {
|
||
this.tabs[this.currentTab].current = 1
|
||
this.tabs[this.currentTab].list = []
|
||
this.getAdmissionsRegulationsList()
|
||
},
|
||
clearTitleInput() {
|
||
this.title = ''
|
||
this.tabs[this.currentTab].current = 1
|
||
this.tabs[this.currentTab].list = []
|
||
this.getAdmissionsRegulationsList()
|
||
},
|
||
setStatus(index,status) {
|
||
this.tabs[index||this.currentTab].status = status
|
||
},
|
||
loadMore() {
|
||
if (this.tabs[this.currentTab].status === 'noMore') {
|
||
return;
|
||
}
|
||
console.log('加载中')
|
||
this.tabs[this.currentTab].current++;
|
||
this.getAdmissionsRegulationsList()
|
||
},
|
||
/*回到顶部*/
|
||
clickTop() {
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration: 300
|
||
});
|
||
},
|
||
setTime: function (items) {
|
||
var newItems = [];
|
||
items.forEach(e => {
|
||
newItems.push({
|
||
schoolName: e.schoolName,
|
||
cover: e.cover,
|
||
id: e.id,
|
||
releaseTime: e.releaseTime ? dateUtils.format(e.releaseTime) : '',
|
||
title: e.title
|
||
});
|
||
});
|
||
return newItems;
|
||
},
|
||
swichMenu(id) {
|
||
this.currentTab = id
|
||
console.log(id)
|
||
//this.tabCurrent = 'tabNum'+ id
|
||
// 滑动swiper后，每个选项距离其父元素最左侧的距离
|
||
this.scrollLeft = 0;
|
||
for (let i = 0; i < id; i++) {
|
||
this.scrollLeft += 120
|
||
console.log(this.scrollLeft, 60, id)
|
||
}
|
||
},
|
||
aderror(e) {
|
||
console.log("aderror: " + JSON.stringify(e.detail));
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
|
||
.uni-media-list-body {
|
||
height: auto;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.uni-media-list-text-top {
|
||
height: 74rpx;
|
||
font-size: 28rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.uni-media-list-text-bottom {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
}
|
||
</style>
|