You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
509 lines
12 KiB
509 lines
12 KiB
<template>
|
|
<!-- 首页 -->
|
|
<view class="container" style="padding-top: 90px;background-color: #FFFFFF;">
|
|
<view class="" style="width: 100vw;">
|
|
<view class="status_bar"></view>
|
|
<navigationBar custom="true">
|
|
<view :style="{width: '100vw',height: '50px', color: 'white'}" style="background-image: linear-gradient(to right, #58BEE0, #84CCCA);position: fixed;z-index: 999;top:40px;">
|
|
<view :style="{padding: '10px', paddingLeft: '20px'}" style="display: flex;align-items: center;">
|
|
<view class="backHome" @click="backHome"></view>
|
|
<view style="font-size: 16px;font-weight: bold;line-height: 30px;margin-left: 10px;">话题分类</view>
|
|
</view>
|
|
</view>
|
|
</navigationBar>
|
|
</view>
|
|
<view class="menu_title">
|
|
<view class="dis-flex">
|
|
<image class="menu_img" :src="menuLists[currentMenu].img" mode=""></image>
|
|
<view class="tab-item">#{{ menuLists[currentMenu].title }}#</view>
|
|
<view style="flex:1;">
|
|
<view class="menu_btn" @click="showRightMenu">选择话题</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <loadlogo v-if="!loadlogo" /> -->
|
|
<view class="page-index" :style="'background-color: ' + datas.page.background" :class="!!bottomMenu ? 'bottomPadding' : ''">
|
|
<view class="">
|
|
<view style="">
|
|
|
|
<view class="list-con" v-show="tabIndex==1">
|
|
<pic-text-list :isClass="true" :communityList="communityList" @changenoMore1="changenoMore1" :scrollLock="scrollLock" @changeScrollLock="changeScrollLock"></pic-text-list>
|
|
<!-- <block v-for="(item, index) in communityList" :key="index">
|
|
<view @click="toDetails(item.id)" style="border-bottom: 1px solid #efefef;">
|
|
<pic-text :info="item" :index="index" :stopVideo="stopVideo" :currentPlay="currentPlay" @changePlay="changePlay()"></pic-text>
|
|
</view>
|
|
</block> -->
|
|
<load-more :isMore="communityList.length==0"></load-more>
|
|
<!-- <none-mores v-if="communityList.length==0"></none-mores> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="full"></view> -->
|
|
</view>
|
|
<PopManager :show="showRight" :type="'top'" @clickmask="showRight = false" class="right_menu">
|
|
<cover-view v-if="showRight" class="menu_box">
|
|
<cover-view class="menu_close" @click="hideRightMenu">
|
|
<cover-image :src="imageRootNew+'mb-plus.png'" class="closeImg"></cover-image>
|
|
</cover-view>
|
|
<cover-view class="" style="height: calc(100vh - 130px);overflow-y: scroll;">
|
|
<cover-view v-for="(item,index) in menuLists" :key="index" :class="{active:currentMenu==index}"
|
|
@click="changeMenu(index)" class="menu_item">
|
|
{{item.title}}
|
|
</cover-view>
|
|
</cover-view>
|
|
</cover-view>
|
|
</PopManager>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
let innerAudioContext = uni.createInnerAudioContext();
|
|
import App from '@/common/js/app.js';
|
|
import Loadlogo from '@/components/template/loadlogo.vue';
|
|
import wxApi from '@/common/js/wxApi.js';
|
|
import PopManager from '@/components/template/PopManager.vue';
|
|
// import picText from "@/components/template/pic_text/pic_text.vue"
|
|
import picTextList from "@/components/template/pic_text/pic_text_list.vue"
|
|
import loadMore from '@/components/template/loadmore.vue'
|
|
import noneMores from '@/components/template/nonemores.vue'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
loadlogo: false,
|
|
loadAgain: false,
|
|
datas: {
|
|
basic: [],
|
|
adv: '',
|
|
page: {}
|
|
},
|
|
pageInfo: {},
|
|
bottomMenu: null,
|
|
bgAudioMannager:'',
|
|
muiick:'',
|
|
seeting:null,
|
|
pagenum:0,
|
|
isred:0,
|
|
height:40,
|
|
isRedId:null,
|
|
isRedShare:null,
|
|
shareShow:false,
|
|
hintShow:false,
|
|
tabIndex: 1,
|
|
communityList: [],
|
|
tab1Page: 1,
|
|
page_index: 10,
|
|
noMore1: false,
|
|
// stopVideo: 0,
|
|
scrollLock: false,
|
|
// scrollTimer: null,
|
|
// currentPlay: -2,//当前正在播放的视频在列表中的索引,-2表示没有正在播放
|
|
showRight: false,//右侧话题边栏
|
|
menuLists: [],
|
|
currentMenu: 0,
|
|
currentMenuId: null
|
|
};
|
|
},
|
|
components: {
|
|
Loadlogo,
|
|
PopManager,
|
|
// picText,
|
|
picTextList,
|
|
loadMore,
|
|
noneMores
|
|
},
|
|
onReady(){
|
|
// console.log('onReady比onLoad慢')
|
|
},
|
|
onLoad(e) {
|
|
// console.log('onLoad')
|
|
let _this = this;
|
|
uni.getSystemInfo({
|
|
success:function(data){
|
|
// 将其赋值给this
|
|
_this.height=data.statusBarHeight;
|
|
}
|
|
})
|
|
this.currentMenu = e.index;
|
|
this.currentMenuId = e.id;
|
|
this.getMenu();
|
|
},
|
|
onShow() {
|
|
this.getList();
|
|
},
|
|
onHide() {
|
|
let _this = this,
|
|
play_Audio = false,
|
|
pageAudio = _this.pageInfo.music;
|
|
if (!play_Audio) {
|
|
innerAudioContext.pause();
|
|
innerAudioContext.onPause(() => {
|
|
console.log('暂停播放');
|
|
});
|
|
}
|
|
// _this.isTabbars = false;
|
|
_this.play_Audio = play_Audio;
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
this.$nextTick(function() {
|
|
this.getcurCityTime();
|
|
});
|
|
},
|
|
watch:{
|
|
},
|
|
methods: {
|
|
backHome(){
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
},
|
|
getcurCityTime() {
|
|
let _this = this,
|
|
agencyData = uni.getStorageSync('agencyData'),
|
|
timestamp = new Date().getTime(),
|
|
cityTime = uni.getStorageSync('cityTimestamp'),
|
|
nowTime = !!cityTime ? timestamp - cityTime : '';
|
|
if (!!nowTime) {
|
|
let nowTime_m = parseInt((nowTime / 1000 / 60) % 60);
|
|
if (nowTime_m > 120) {
|
|
// #ifdef H5
|
|
wxApi.wxRegister(() => {
|
|
jWeixin.getLocation({
|
|
type: 'gcj02',
|
|
success: function(res) {
|
|
App.getAreaId(
|
|
res,
|
|
'',
|
|
'',
|
|
options => {
|
|
console.log('拿到了');
|
|
if (agencyData.areaid !== options.data.areaid) {
|
|
uni.showModal({
|
|
title: `定位到您在${options.data.areaname}`,
|
|
content: `是否切换至该城市进行探索`,
|
|
confirmText: '切换',
|
|
success: function(calback) {
|
|
if (calback.confirm) {
|
|
uni.setStorageSync('agencyData', options.data);
|
|
_this.$nextTick(function() {
|
|
_this.$refs.diypages.currentaidCity = options.data.areaname;
|
|
uni.setStorageSync('curLoction', res);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
true
|
|
);
|
|
}
|
|
});
|
|
});
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
App.getLocation().then(res => {
|
|
App.getAreaId(
|
|
res,
|
|
'',
|
|
'',
|
|
options => {
|
|
if (agencyData.areaid !== options.data.areaid) {
|
|
uni.showModal({
|
|
title: `定位到您在${options.data.areaname}`,
|
|
content: `是否切换至该城市进行探索`,
|
|
confirmText: '切换',
|
|
success: function(calback) {
|
|
if (calback.confirm) {
|
|
uni.setStorageSync('agencyData', options.data);
|
|
_this.$nextTick(function() {
|
|
_this.$refs.diypages.currentaidCity = options.data.areaname;
|
|
uni.setStorageSync('curLoction', res);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
true
|
|
);
|
|
});
|
|
// #endif
|
|
}
|
|
}
|
|
},
|
|
toArticle(id){
|
|
App.navigationTo({
|
|
url:`pages/mainPages/headline/headlineDetail?headline_id=${id}`
|
|
})
|
|
},
|
|
// 获取学生社区图文列表
|
|
getList(page = 1, isPage = false){
|
|
let _this = this;
|
|
let data = {
|
|
id: 0,//0对应掌上生活的全部类目
|
|
two_id: this.currentMenuId,
|
|
page,
|
|
page_index: _this.page_index,
|
|
homeflag: 1,
|
|
keyword: '',
|
|
};
|
|
App._post_form('&p=pocket&do=infoList', data, res => {
|
|
let list = [];
|
|
if (!isPage) {
|
|
if (res.data.list.length > 0) {
|
|
list = res.data.list;
|
|
_this.setData({
|
|
communityList: list
|
|
})
|
|
} else {
|
|
_this.noMore1 = true;
|
|
uni.showToast({
|
|
title: '暂无数据',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}else{//第二页走这里
|
|
if (res.data.list.length > 0){
|
|
list = [..._this.communityList, ...res.data.list];
|
|
_this.setData({
|
|
communityList: list
|
|
})
|
|
}else{
|
|
_this.noMore1 = true;
|
|
}
|
|
}
|
|
|
|
});
|
|
},
|
|
changenoMore1(e){
|
|
this.noMore1 = e;
|
|
},
|
|
changeScrollLock(e){
|
|
this.scrollLock = e;
|
|
},
|
|
showRightMenu(){
|
|
this.showRight = true;
|
|
},
|
|
hideRightMenu(){
|
|
this.showRight = false;
|
|
},
|
|
changeMenu(i){
|
|
this.currentMenu = i;
|
|
this.currentMenuId = this.menuLists[this.currentMenu].id;
|
|
this.showRight = false;
|
|
this.communityList = [];
|
|
this.getList();
|
|
},
|
|
getMenu(){
|
|
let data = {
|
|
is_two: 1,
|
|
is_set: 0
|
|
};
|
|
App._post_form('&p=pocket&do=classList', data, res => {
|
|
this.menuLists = res.data.list;
|
|
});
|
|
}
|
|
},
|
|
destroyed() {
|
|
},
|
|
onPullDownRefresh() {
|
|
//停止下拉刷新
|
|
uni.stopPullDownRefresh();
|
|
},
|
|
onPageScroll(e){
|
|
//页面滚动，视频暂停
|
|
this.scrollLock = true;
|
|
},
|
|
onReachBottom(e) {
|
|
// uni.$emit('isBottomMore');
|
|
// uni.$emit('tabisBottomMore');
|
|
// console.log(this.tabIndex, this.noMore1, this.noMore2)
|
|
if(this.tabIndex==1){
|
|
if(!this.noMore1){
|
|
this.tab1Page++;
|
|
this.getList(this.tab1Page, true);
|
|
}else{
|
|
uni.showToast({
|
|
title: '没有更多了',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
},
|
|
onShareAppMessage(res){
|
|
let _this = this;
|
|
if (res.from === 'button') {// 来自页面内分享按钮
|
|
let listId = res.target.id;
|
|
let title = res.target.dataset.title;
|
|
App._post_form('&p=pocket&do=shareNum', { id: listId }, res => {
|
|
for(let index=0;index<_this.communityList.length;index++){
|
|
if(_this.communityList[index].id == listId){
|
|
_this.communityList[index].share++;
|
|
}
|
|
}
|
|
setTimeout(()=>{
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '分享成功',
|
|
duration: 2000
|
|
});
|
|
}, 2000)
|
|
});
|
|
return {
|
|
title: '粤职才',
|
|
path: '/pagesA/pictureTextDetails/pictureTextDetails?id='+listId
|
|
}
|
|
}else{
|
|
return {
|
|
title: '话题分类',
|
|
path: '/pagesA/communityClassification/communityClassification'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
background-color: #ffd93f;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.page-index {
|
|
width: 100vw;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
position: relative;
|
|
}
|
|
|
|
.bottomPadding {
|
|
padding-bottom: 100upx;
|
|
}
|
|
|
|
.full {
|
|
width: 750upx;
|
|
height: 110upx;
|
|
background: #f8f8f8;
|
|
}
|
|
|
|
//
|
|
.status_bar {
|
|
height: var(--status-bar-height);
|
|
width: 100%;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
padding-bottom: 15px;
|
|
z-index: 99;
|
|
top: 0px;
|
|
background-image: linear-gradient(to right, #58BEE0, #84CCCA);
|
|
}
|
|
.backHome{
|
|
width: 14rpx;
|
|
height: 14rpx;
|
|
border: 2px solid #fff;
|
|
border-right-color: transparent;
|
|
border-top-color: transparent;
|
|
transform: scaleX(1.2) rotate(45deg);
|
|
}
|
|
.dis-flex{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.list-con{
|
|
padding: 0px 10px;
|
|
.list-item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #efefef;
|
|
padding: 10px 4px;
|
|
}
|
|
.list-title{
|
|
display:-webkit-box;//将盒子转换为弹性盒子
|
|
-webkit-box-orient:vertical;//文本显示方式，默认水平
|
|
-webkit-line-clamp:2;//设置显示多少行
|
|
overflow:hidden;
|
|
font-size: 14px;
|
|
color: #333;
|
|
margin-bottom: 7px;
|
|
}
|
|
.list-img{
|
|
width: 80px;
|
|
height: 60px;
|
|
border-radius: 8px;
|
|
margin-left: 20px;
|
|
background-color: #d1d1d1;
|
|
}
|
|
}
|
|
.menu_title{
|
|
margin-bottom: 20px;
|
|
background-image: linear-gradient(to right, #58BEE0, #84CCCA);
|
|
&>view{
|
|
position: relative;
|
|
top: 12px;
|
|
z-index: 1;
|
|
.tab-item{
|
|
color: #fff;
|
|
font-size: 14px;
|
|
padding: 10rpx 30rpx;
|
|
}
|
|
.menu_img{
|
|
width: 140rpx;height: 140rpx;border-radius: 10px;
|
|
margin-left: 15px;
|
|
}
|
|
.menu_btn{
|
|
width: 180rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
border-radius: 100px;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
color: rgba(81, 156, 251, 1);
|
|
font-size: 14px;
|
|
text-align: center;
|
|
margin: 0px 15px 0px auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right_menu{
|
|
.menu_box{
|
|
padding-top: 90px;
|
|
width: 50vw;height: 100vh;
|
|
position: fixed;top: 0px;
|
|
left: 50%;z-index: 9999;
|
|
background-color: #fff;
|
|
}
|
|
.menu_close{
|
|
margin: 0rpx 0rpx 0rpx 30rpx;
|
|
.closeImg{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
.menu_item{
|
|
width: 300rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
border-radius: 5px;
|
|
color: #444;
|
|
background-color: rgba(227, 245, 245, 1);
|
|
text-align: center;
|
|
font-size: 14px;
|
|
margin: 40rpx auto;
|
|
|
|
&.active{
|
|
color: #fff;
|
|
background-color: rgba(103, 209, 252, 1);
|
|
}
|
|
}
|
|
}
|
|
/deep/ .loadMore-box{
|
|
background-color: #fff !important;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
/deep/ .more-status{
|
|
display: none !important;
|
|
}
|
|
</style>
|
|
|