55 changed files with 1501 additions and 319 deletions
@ -0,0 +1,505 @@ |
|||||
|
<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; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue