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