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.
601 lines
14 KiB
601 lines
14 KiB
<template>
|
|
<view class="container">
|
|
|
|
<view class="attention-h">
|
|
<view class="nav-bar" :style="{'height': navHeight}">
|
|
<view style="width: 70%; margin-bottom:4px; height: 32px; justify-content: space-around;" class="nav_max">
|
|
<view class="attention-scarch flex al-item-center">
|
|
<view class="input_box" @click="goto" data-url='/diary/search/search'>
|
|
<text class="iconfont icon-search"></text>
|
|
<!-- <input disabled="" placeholder="大家都在搜..." type="text" /> -->
|
|
</view>
|
|
</view>
|
|
<view class="item position-r" @tap="goto" data-url='/diary/attention/attention' data-opentype="redirectTo">
|
|
<text class="txt n-tv">关注</text>
|
|
</view>
|
|
<view class="item position-r" @tap="goto" data-url='/diary/index/index' data-opentype="redirectTo">
|
|
<text class="txt">推荐</text>
|
|
<text class="heng position-a"></text>
|
|
</view>
|
|
<view class="item position-r" @tap="goto" data-url='/diary/live/live' data-opentype="redirectTo">
|
|
<text class="txt n-tv">直播</text>
|
|
<!-- <text class="heng"></text> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="" :style="{'height': hearHeight + 'px'}"></view>
|
|
<view class="swiper_box">
|
|
<swiper style="width: 100%; height: 100%;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
|
|
<swiper-item @click="goto" :data-url='item.page_url' v-for="(item,index) in info.banner_list" :key='index'>
|
|
<image :src="item.pic_url" mode=""></image>
|
|
</swiper-item>
|
|
|
|
</swiper>
|
|
|
|
</view>
|
|
|
|
<view class="nav_box">
|
|
<!-- <view class="item">
|
|
<text class="iconfont icon-icon--"></text>
|
|
<text>烹饪教程</text>
|
|
</view>
|
|
<view class="item">
|
|
<text style="background-color: #efcb6f;" class="iconfont icon-shucai"></text>
|
|
<text>怎么选菜</text>
|
|
</view> -->
|
|
<view class="item" @click="toCenter(item.id)" v-for="(item,index) in info.top_tab" :key='index'>
|
|
<text :style="{'background-color':colors[index%3].color}" :class="'iconfont '+colors[index%3].icofont "></text>
|
|
|
|
<text class="txt">{{item.topic_name}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="info_box">
|
|
<view class="title_box">
|
|
<view class="left">
|
|
热门话题
|
|
</view>
|
|
<view class="right" style="display: flex; align-items: center;" @click="goto" data-url='/diary/topic/plaza'>
|
|
<text>话题广场</text> <text class="iconfont icon-arrow-right"></text>
|
|
</view>
|
|
</view>
|
|
<view class="scroll_box">
|
|
<scroll-view scroll-x="true" >
|
|
<view style="display: flex;">
|
|
<view class="item" @click="toCenter(item.id)" v-for="(item,index) in info.top_hot" :key='index'>
|
|
<view class="top">
|
|
<image :src="item.topic_pic" mode=""></image>
|
|
</view>
|
|
<view class="bot">
|
|
<text class="icon">#</text>
|
|
<text class="txt">{{item.topic_name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="list_box">
|
|
<view class="nav_max">
|
|
<view class="item" @click="recTypeFn(1)">
|
|
<text class="txt">笔记</text>
|
|
<text class="heng" v-if="recType == 1"></text>
|
|
<text v-else style="height:8rpx;width:1rpx; margin-top:-10rpx;"></text>
|
|
</view>
|
|
<view class="item" @click="recTypeFn(2)">
|
|
<text class="txt">视频</text>
|
|
<text class="heng" v-if="recType == 2"></text>
|
|
<text v-else style="height:8rpx;width:1rpx; margin-top:-10rpx;"></text>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
|
|
<view class="nav_min">
|
|
<view class="item " @click="recType_filedFn(1)" :class="{'itemz':recType_filed == 1}">
|
|
综合
|
|
</view>
|
|
<view class="item" @click="recType_filedFn(2)" :class="{'itemz':recType_filed == 2}">
|
|
最热
|
|
</view>
|
|
<view class="item" @click="recType_filedFn(3)" :class="{'itemz':recType_filed == 3}">
|
|
最新
|
|
</view>
|
|
</view>
|
|
|
|
<diary-falls-list @listZanFn='listZanFn' :datalist='datalist' v-if="datalist && datalist.length>0" :navType="recType == 2 ? 'video' : ''"> </diary-falls-list>
|
|
|
|
<nomore text="没有更多内容了" v-if="nomore"></nomore>
|
|
<nodata text="没有查找到相关内容" v-if="nodata"></nodata>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view :style="{'background-color': t('color1')}" class="add" @click=" addFn">
|
|
</view>
|
|
<view class="add_box" @click="addShow = false" v-if="addShow">
|
|
<view class="content" @click.stop="">
|
|
<view class="item" @click="toAdd('diary')">
|
|
发布笔记
|
|
</view>
|
|
<view class="item" @click="toAdd('video')">
|
|
发布视频
|
|
</view>
|
|
<view class="item" @click="addShow= false">
|
|
取消
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<dp-tabbar></dp-tabbar>
|
|
<view class="tsinfo" v-show='!info.isNote' >
|
|
<!-- :style="{'background-image': 'url('+ event_rul +'/static/img/static/icon/9d3ab5fa33dedcde23ba05c8e9cdf999.png)'}" -->
|
|
<text>发布笔记,让大家开始认识你吧</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp();
|
|
export default{
|
|
onLoad() {
|
|
let elemetn
|
|
// #ifdef MP-WEIXIN
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
uni.getSystemInfo({
|
|
success: res => {
|
|
elemetn = res.statusBarHeight
|
|
}
|
|
})
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
this.navHeight = ((menuButtonInfo.bottom + menuButtonInfo.top) - elemetn) + 'px'
|
|
// console.log(menuButtonInfo,elemetn, 'navheight')
|
|
// #endif
|
|
// #ifndef MP
|
|
this.navHeight = 60 + 'px'
|
|
// #endif
|
|
this.getRecList ()
|
|
|
|
},
|
|
onReady() {
|
|
let query = uni.createSelectorQuery().in(this)
|
|
query.select('.attention-h').boundingClientRect()
|
|
query.exec(res => {
|
|
this.hearHeight = res[0].height
|
|
})
|
|
},
|
|
onShow(){
|
|
this.getInfo()
|
|
|
|
|
|
},
|
|
data(){
|
|
return{
|
|
|
|
hearHeight:0,
|
|
navHeight: 0,
|
|
colors:[
|
|
{
|
|
color:'#dbde5d',
|
|
icofont:'icon-icon--',
|
|
},
|
|
{
|
|
color:'#f0cd6e',
|
|
icofont:'icon-shucai',
|
|
},
|
|
{
|
|
color:'#fcb84c',
|
|
icofont:'icon-new',
|
|
},
|
|
],
|
|
addShow:false,
|
|
recType:1,
|
|
recType_filed:1,
|
|
info:{
|
|
isNote:1,
|
|
},
|
|
pagenum:1,
|
|
keyword:'',
|
|
loading:false,
|
|
isload: false,
|
|
nomore:false,
|
|
nodata:false,
|
|
datalist:[],
|
|
|
|
event_rul: app.globalData.event_url,
|
|
}
|
|
},
|
|
onReachBottom: function () {
|
|
if (!this.nodata && !this.nomore) {
|
|
this.pagenum = this.pagenum + 1;
|
|
this.getRecList()
|
|
}
|
|
},
|
|
methods:{
|
|
|
|
listZanFn(e){
|
|
this.datalist[e.index].iszan = e.show;
|
|
if(this.datalist[e.index].binfo){
|
|
this.datalist[e.index].zan_num = e.num;
|
|
}else{
|
|
this.datalist[e.index].zan = e.num;
|
|
}
|
|
|
|
},
|
|
addFn(){
|
|
if(app.globalData.mid == 0){
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '发布需要先登录',
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
// console.log('用户点击确定');
|
|
// uni.navigateTo({
|
|
// url:'/pages/index/login',
|
|
// })
|
|
app.goto('/pages/index/login')
|
|
console.log(app)
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
}else{
|
|
this.addShow= true
|
|
|
|
}
|
|
},
|
|
searchFn(){
|
|
uni.navigateTo({
|
|
url:'/diary/search/search?keyword='+this.keyword
|
|
})
|
|
},
|
|
toAdd(e){
|
|
this.addShow = false;
|
|
|
|
uni.navigateTo({
|
|
url:'/diary/issue/issue?type='+e
|
|
})
|
|
},
|
|
recType_filedFn(e){
|
|
this.recType_filed = e;
|
|
this.resetList();
|
|
},
|
|
recTypeFn(e){
|
|
this.recType = e;
|
|
this.resetList(0)
|
|
},
|
|
resetList(){
|
|
this.pagenum = 1;
|
|
this.getRecList()
|
|
|
|
},
|
|
toCenter(id){
|
|
uni.navigateTo({
|
|
url:'/diary/topic/topic?id='+id
|
|
})
|
|
},
|
|
getRecList() {
|
|
let that = this;
|
|
var page = that.pagenum;
|
|
that.loading = true;
|
|
that.nomore = false;
|
|
that.nodata = false;
|
|
app.get('ApiZhiwei/appNotVideoListIndex', {page: page,type_field:this.recType_filed,type:this.recType}, function (res) {
|
|
that.loading = false;
|
|
var data = res.data;
|
|
if (page == 1) {
|
|
that.datalist = data;
|
|
if (data.length == 0) {
|
|
that.nodata = true;
|
|
}
|
|
}else{
|
|
if (data.length == 0) {
|
|
that.nomore = true;
|
|
} else {
|
|
var datalist = that.datalist;
|
|
var newdata = datalist.concat(data);
|
|
that.datalist = newdata;
|
|
}
|
|
}
|
|
that.loaded();
|
|
});
|
|
},
|
|
getInfo(){
|
|
app.post('ApiZhiwei/appIndex',{},(res)=>{
|
|
this.info = res.data
|
|
})
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tsinfo{
|
|
position: fixed;
|
|
right: 140rpx;
|
|
top: 51%;
|
|
z-index: 10;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 76rpx;
|
|
border-radius: 8rpx;
|
|
background-size: 100%;
|
|
background-color: rgba(255,255,255, .8);
|
|
border: 2rpx solid #0A5D3B;
|
|
animation: tsinfo 1.2s infinite;
|
|
text{
|
|
position: relative;
|
|
padding:0 16rpx;
|
|
color: #0A5D3B;
|
|
font-size: 26rpx;
|
|
letter-spacing:2rpx;
|
|
}
|
|
}
|
|
|
|
.tsinfo::after {
|
|
content: '';
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-top: 2rpx solid #0A5D3B;
|
|
border-right: 2rpx solid #0A5D3B;
|
|
background-color: rgba(255,255,255, .8);
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -8rpx;
|
|
transform: translateY(-50%) rotate(45deg);
|
|
}
|
|
|
|
.nav-bar{
|
|
display: flex;
|
|
align-items: flex-end;
|
|
z-index:9;
|
|
}
|
|
.attention-h {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.add {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
border-radius: 28rpx;
|
|
border:6rpx solid #fff;
|
|
background-image: linear-gradient(to bottom right, #00AE68, #096742);
|
|
position: fixed;
|
|
right: 20rpx;
|
|
top: 50%;
|
|
}
|
|
.add:after {
|
|
content: '';
|
|
width: 50%;
|
|
height: 4rpx;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.add:before {
|
|
content: '';
|
|
width: 4rpx;
|
|
height: 50%;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.add_box{
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|
z-index: 9999999;
|
|
|
|
.content{
|
|
background-color: #fff;
|
|
padding-bottom: 20rpx;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
.item{
|
|
padding: 30rpx;
|
|
// border-bottom: 1px solid red;
|
|
}
|
|
}
|
|
}
|
|
.list_box{
|
|
.content{
|
|
padding: 20rpx;
|
|
margin-top: 20rpx;
|
|
background-color: #f8f9fa;
|
|
.nav_min{
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
// padding: 2;
|
|
.item{
|
|
margin-right: 20rpx;
|
|
}
|
|
.itemz{
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.nav_max{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
// height: 32px;
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
font-size: 30rpx;
|
|
// font-weight: bold;
|
|
padding: 0 20rpx;
|
|
.txt{
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
z-index: 2;
|
|
}
|
|
.n-tv {
|
|
color: #999;
|
|
}
|
|
.heng{
|
|
// z-index: 1;
|
|
// margin-top: 4rpx;
|
|
bottom: 0;
|
|
width: 44rpx;
|
|
border-radius: 4rpx;
|
|
height: 6rpx;
|
|
background-color: #0A5D3B;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.info_box{
|
|
.scroll_box{
|
|
padding: 20rpx;
|
|
.item{
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
margin-right: 20rpx;
|
|
width: 300rpx;
|
|
.top{
|
|
width: 300rpx;
|
|
height: 160rpx;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.bot{
|
|
font-size: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
.icon{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 40rpx;
|
|
font-size: 26rpx;
|
|
background-color: #efbe71;
|
|
color: #fff;
|
|
}
|
|
.txt{
|
|
width: 200rpx;
|
|
overflow: hidden; /*超出长度的文字隐藏*/
|
|
text-overflow:ellipsis;/*文字隐藏以后添加省略号*/
|
|
white-space: nowrap; /*强制不换行*/
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.title_box{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
.left{
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
}
|
|
.right{
|
|
color: #999;
|
|
.iconfont{
|
|
// margin-top: 4rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
.nav_box{
|
|
display: flex;
|
|
|
|
justify-content: space-around;
|
|
.item{
|
|
width: 33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
white-space: nowrap; /*超出的空白区域不换行*/
|
|
overflow: hidden; /*超出隐藏*/
|
|
text-overflow: ellipsis; /*文本超出显示省略号*/
|
|
.iconfont {
|
|
width: 80rpx;
|
|
background-color: #d9dc5d;
|
|
border-radius: 80rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 80rpx;
|
|
font-size: 56rpx;
|
|
color: #fff;
|
|
margin-bottom: 14rpx;
|
|
}
|
|
.txt{
|
|
width: 100%;
|
|
text-align: center;
|
|
white-space: nowrap; /*超出的空白区域不换行*/
|
|
overflow: hidden; /*超出隐藏*/
|
|
text-overflow: ellipsis; /*文本超出显示省略号*/
|
|
}
|
|
}
|
|
}
|
|
.swiper_box{
|
|
width: 100%;
|
|
height: 280rpx;
|
|
margin-bottom: 20rpx;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.input_box{
|
|
display: flex;
|
|
|
|
.iconfont{
|
|
font-size: 50rpx;
|
|
}
|
|
input{
|
|
flex: 1;
|
|
}
|
|
|
|
}
|
|
.container{
|
|
background-color: #fff;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
@keyframes tsinfo {
|
|
0% {transform: translateX(8rpx);}
|
|
50% {transform: translateX(-8rpx);}
|
|
100% {transform: translateX(8rpx);}
|
|
}
|
|
</style>
|
|
|