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.
379 lines
9.0 KiB
379 lines
9.0 KiB
<template>
|
|
<view class="attention">
|
|
<view class="attention-h">
|
|
<view class="nav-bar" :style="{'height': navHeight}">
|
|
<view style="" class="nav_max" :style="{'width': titleWidth}">
|
|
<view class="attention-scarch flex al-item-center" @click="search">
|
|
<view class="input_box flex">
|
|
<text class="iconfont icon-search" style="font-size: 58rpx;"></text>
|
|
<!-- <input disabled="true" placeholder="大家都在搜..." type="text" v-model="searchVlaue" /> -->
|
|
</view>
|
|
</view>
|
|
<view class="flex flex1 j-between" style="padding: 0 66rpx 0 60rpx;">
|
|
<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/evernote/evernote' data-opentype="redirectTo">
|
|
<text class="txt n-tv">笔记</text>
|
|
</view>
|
|
<view class="item position-r" @tap="goto" data-url='/diary/video/video' data-opentype="redirectTo">
|
|
<text class="txt n-tv">视频</text>
|
|
</view>
|
|
<view class="item position-r" @tap="goto" data-url='/diary/live/live' data-opentype="redirectTo">
|
|
<text class="txt font-w">直播</text>
|
|
<text class="heng position-a"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="" :style="{'height': hearHeight + 'px'}"></view>
|
|
|
|
|
|
<view class="add" :style="{'background-color': t('color1')}" @click="addShow= true"></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>
|
|
<!-- {{JSON.stringify(datalist)}} -->
|
|
<view style="padding: 20rpx;">
|
|
<dp-liveroom :data='datalist'></dp-liveroom>
|
|
</view>
|
|
<loading v-if="loading"></loading>
|
|
<nomore v-if="!isData"></nomore>
|
|
<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
|
|
<view class="tsinfo" v-if="!isNote">
|
|
<!-- :style="{'background-image': 'url('+ event_rul +'/static/img/static/icon/9d3ab5fa33dedcde23ba05c8e9cdf999.png)'}" -->
|
|
<text>发布笔记,让大家开始认识你吧</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp();
|
|
export default {
|
|
data() {
|
|
return{
|
|
navHeight: 0,
|
|
titleWidth: 0,
|
|
opt:{},
|
|
hearHeight: 0,
|
|
pagenum:1,
|
|
isNote:1,
|
|
loading:false,
|
|
isload: false,
|
|
nomore:false,
|
|
nodata:false,
|
|
datalist:[],
|
|
|
|
addShow:false,
|
|
animation:'',
|
|
|
|
event_rul: app.globalData.event_url,
|
|
}
|
|
},
|
|
onLoad(opt) {
|
|
this.opt = app.getopts(opt);
|
|
let elemetn
|
|
// #ifdef MP-WEIXIN
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
uni.getSystemInfo({
|
|
success: res => {
|
|
elemetn = res.statusBarHeight
|
|
}
|
|
})
|
|
this.titleWidth = menuButtonInfo.left + 'px'
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
this.navHeight = ((menuButtonInfo.bottom + menuButtonInfo.top) - elemetn) + 'px'
|
|
// console.log(menuButtonInfo,elemetn, 'navheight')
|
|
// #endif
|
|
// #ifndef MP
|
|
this.navHeight = 45 + 'px'
|
|
this.titleWidth = '100vw'
|
|
// #endif
|
|
|
|
|
|
|
|
this.getList()
|
|
|
|
|
|
},
|
|
onShow() {
|
|
this.animation = uni.createAnimation({
|
|
transformOrigin: "50% 0 50%",
|
|
duration: 600,
|
|
timingFunction: "linear",
|
|
delay: 0
|
|
})
|
|
setTimeout(()=>{
|
|
this.anima()
|
|
},1000)
|
|
},
|
|
onReady() {
|
|
let query = uni.createSelectorQuery().in(this)
|
|
query.select('.attention-h').boundingClientRect()
|
|
query.exec(res => {
|
|
this.hearHeight = res[0].height
|
|
})
|
|
},
|
|
onReachBottom(e) {
|
|
if (!this.nodata && !this.nomore) {
|
|
this.pagenum = this.pagenum + 1;
|
|
this.getList()
|
|
}
|
|
|
|
},
|
|
|
|
onPageScroll(e) {
|
|
this.pageScroll = e.scrollTop
|
|
},
|
|
methods:{
|
|
getList(){
|
|
|
|
let that = this;
|
|
var page = that.pagenum;
|
|
that.loading = true;
|
|
that.nomore = false;
|
|
that.nodata = false;
|
|
app.post('ApiZhiwei/liveList', {pagenum: page}, function (res) {
|
|
that.loading = false;
|
|
var data = res.list;
|
|
that.isNote = res.isNote;
|
|
if (page == 1) {
|
|
|
|
that.datalist =data;
|
|
if (data.length == 0) {
|
|
that.nodata = true;
|
|
}
|
|
}else{
|
|
if (data.length == 0) {
|
|
that.nomore = true;
|
|
} else {
|
|
var datalist = data;
|
|
var newdata = datalist.concat(data);
|
|
that.datalist = newdata;
|
|
}
|
|
}
|
|
that.loaded();
|
|
});
|
|
|
|
|
|
},
|
|
anima(){
|
|
this.animation.translateX(4).step()
|
|
this.animation.translateX(-4).step()
|
|
setTimeout(()=>{
|
|
this.anima()
|
|
},1000)
|
|
},
|
|
search() {
|
|
uni.navigateTo({
|
|
url:'/diary/search/search?keyword='+this.searchVlaue
|
|
})
|
|
},
|
|
|
|
toAdd(e){
|
|
this.addShow = false;
|
|
|
|
uni.navigateTo({
|
|
url:'/diary/issue/issue?type='+e
|
|
})
|
|
},
|
|
addZero(num) {
|
|
return num < 10 ? '0' + num : num;
|
|
},
|
|
getTimes(time) {
|
|
let times = new Date(time*1000)
|
|
let year = times.getFullYear()
|
|
let month = this.addZero(times.getMonth() + 1)
|
|
let date = this.addZero(times.getDate())
|
|
let hoursys = this.addZero(times.getHours())
|
|
let minutesys = this.addZero(times.getMinutes())
|
|
let secondsys = this.addZero(times.getSeconds())
|
|
|
|
let dateNow = new Date().getTime(); // 获取当前时间
|
|
let timeDiff = dateNow - (time * 1000); //时间差的毫秒数
|
|
let days = Math.floor(timeDiff / (24 * 3600 * 1000)); // 计算出天数
|
|
let leavel1 = timeDiff % (24 * 3600 * 1000); // 计算天数后剩余的时间
|
|
let hours = Math.floor(leavel1 / (3600 * 1000)); // 计算天数后剩余的小时数
|
|
let leavel2 = timeDiff % (3600 * 1000); // 计算剩余小时后剩余的毫秒数
|
|
let minutes = Math.floor(leavel2 / (60 * 1000));
|
|
// console.log(days, hours,minutes, 'mmmmmmmmmmm999999999999',times)
|
|
return days > 0 ? year +'.'+ month +'.'+ date + ' ' +hoursys +':' + minutesys : (24 > hours && hours > 0) ? hours + '小时前' : minutes > 0 ? minutes + '分钟前' : '刚刚'
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tsinfo{
|
|
position: fixed;
|
|
right: 140rpx;
|
|
top: 66%;
|
|
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);
|
|
}
|
|
.add {
|
|
z-index: 10;
|
|
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: 65%;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
.attention {
|
|
|
|
.color-gray {
|
|
color: #999;
|
|
}
|
|
.attention-h {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 15;
|
|
}
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
.nav_max{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 4px;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.attention-scarch {
|
|
|
|
padding-left: 4rpx;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
@keyframes tsinfo {
|
|
0% {transform: translateX(8rpx);}
|
|
50% {transform: translateX(-8rpx);}
|
|
100% {transform: translateX(8rpx);}
|
|
}
|
|
</style>
|
|
|