266 lines
6.6 KiB
Vue
266 lines
6.6 KiB
Vue
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<u-navbar title="评论和赞" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
||
|
|
title-size='36' height='36' id="navbar">
|
||
|
|
</u-navbar>
|
||
|
|
<view class="tabs-wrap">
|
||
|
|
<u-tabs :list="tabs" :current="current" @change="onTabChange" :active-color="'#3D3D3D'" :line-color="'#20C6B5'" :inactive-color="'#808080'" :item-style="{height: '88rpx'}" :is-scroll="false"></u-tabs>
|
||
|
|
</view>
|
||
|
|
<swiper class="swiper" :current="current" @change="onSwiperChange" :duration="200" :circular="false">
|
||
|
|
<swiper-item>
|
||
|
|
<scroll-view class="list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
|
||
|
|
<view class="cell" v-for="(item,index) in commentList" :key="index" @click="btnplxq(item)">
|
||
|
|
<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
|
||
|
|
<view class="content">
|
||
|
|
<view class="row1">
|
||
|
|
<view class="" style="display: flex;align-items: center;justify-content: space-between;padding-right: 40rpx;">
|
||
|
|
<text class="name">{{ item.nickName }}</text>
|
||
|
|
<text class="time">{{ item.createTime }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="tip">回复了我 {{item.bstContent}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="row2">{{ item.content }}</view>
|
||
|
|
<view class="row3">{{ item.bstName }}</view>
|
||
|
|
</view>
|
||
|
|
<image class="thumb" :src="item.bstPicture" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
|
||
|
|
暂时没有更多消息咯
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</swiper-item>
|
||
|
|
<swiper-item>
|
||
|
|
<scroll-view class="list" @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black">
|
||
|
|
<view class="cell" v-for="(item,index) in likeList" :key="index" @click="btnzanxq(item)">
|
||
|
|
<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
|
||
|
|
<view class="content">
|
||
|
|
<view class="row1">
|
||
|
|
<view class="" style="display: flex;align-items: center;justify-content: space-between;padding-right: 40rpx;">
|
||
|
|
<text class="name">{{ item.nickName }}</text>
|
||
|
|
<text class="time">{{ item.createTime }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="tip">回复了我 {{item.bstContent}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="row3">{{ item.bstName }}</view>
|
||
|
|
</view>
|
||
|
|
<image class="thumb" :src="item.bstPicture" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
|
||
|
|
暂时没有更多消息咯
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
bgc: {
|
||
|
|
backgroundColor: "#fff",
|
||
|
|
},
|
||
|
|
current: 0,
|
||
|
|
tabs: [
|
||
|
|
{ name: '我收到的评论' },
|
||
|
|
{ name: '我收到的赞' }
|
||
|
|
],
|
||
|
|
commentList: [],
|
||
|
|
likeList: [],
|
||
|
|
isRefreshing:false,
|
||
|
|
pageNum:1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.getpllist()
|
||
|
|
this.getyidu()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 点击评论跳转动态详情
|
||
|
|
btnplxq(item){
|
||
|
|
if(item.jumpType == 1){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/page_fenbao/guangchang/dongtaixq?id=' + item.jumpId
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 点击赞的通知跳转到动态详情
|
||
|
|
btnzanxq(item){
|
||
|
|
if(item.jumpType == 1){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/page_fenbao/guangchang/dongtaixq?id=' + item.jumpId
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 一进入已读所有消息
|
||
|
|
getyidu(){
|
||
|
|
this.$u.put(`/app/message/read?ids=`).then(res =>{})
|
||
|
|
},
|
||
|
|
// 获取收到评论列表
|
||
|
|
getpllist(){
|
||
|
|
this.$u.get(`/app/message/list?pageNum=${this.pageNum}&pageSize=20&bstType=1`).then(res =>{
|
||
|
|
if(res.code == 200){
|
||
|
|
console.log(this.pageNum);
|
||
|
|
if(this.pageNum == 1){
|
||
|
|
this.pageNum++
|
||
|
|
this.commentList = res.rows
|
||
|
|
}else{
|
||
|
|
this.pageNum++
|
||
|
|
this.commentList = this.commentList.concat(res.rows)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取收到赞列表
|
||
|
|
getzanlist(){
|
||
|
|
this.$u.get(`/app/message/list?pageNum=${this.pageNum}&pageSize=20&bstType=2`).then(res =>{
|
||
|
|
if(res.code == 200){
|
||
|
|
if(this.pageNum == 1){
|
||
|
|
this.pageNum++
|
||
|
|
this.likeList = res.rows
|
||
|
|
}else{
|
||
|
|
this.pageNum++
|
||
|
|
this.likeList = this.likeList.concat(res.rows)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 上拉加载更多
|
||
|
|
handqixing() {
|
||
|
|
this.pageNum = 1
|
||
|
|
if(this.current == 0){
|
||
|
|
this.getpllist()
|
||
|
|
}else{
|
||
|
|
this.getzanlist()
|
||
|
|
}
|
||
|
|
console.log('加载更多')
|
||
|
|
},
|
||
|
|
// 下拉刷新
|
||
|
|
onRefresh() {
|
||
|
|
this.isRefreshing = true
|
||
|
|
this.pageNum = 1
|
||
|
|
setTimeout(() => {
|
||
|
|
if(this.current == 0){
|
||
|
|
this.getpllist()
|
||
|
|
}else{
|
||
|
|
this.getzanlist()
|
||
|
|
}
|
||
|
|
this.isRefreshing = false
|
||
|
|
}, 100)
|
||
|
|
},
|
||
|
|
// 切换tab选项
|
||
|
|
onTabChange(index) {
|
||
|
|
this.current = index;
|
||
|
|
// this.pageNum = 1
|
||
|
|
// if(this.current == 0){
|
||
|
|
// this.getpllist()
|
||
|
|
// }else{
|
||
|
|
// this.getzanlist()
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
// 切换tab选项
|
||
|
|
onSwiperChange(e) {
|
||
|
|
this.current = e.detail.current;
|
||
|
|
this.pageNum = 1
|
||
|
|
if(this.current == 0){
|
||
|
|
this.getpllist()
|
||
|
|
}else{
|
||
|
|
this.getzanlist()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
page {
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
::v-deep .u-tab-bar{
|
||
|
|
background-color: #1EC28B !important;
|
||
|
|
}
|
||
|
|
::v-deep .u-tabs__wrapper__scroll-view__nav{
|
||
|
|
justify-content: center !important;
|
||
|
|
}
|
||
|
|
::v-deep .u-tabs__wrapper{
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.tabs-wrap {
|
||
|
|
padding: 0 30rpx;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.swiper {
|
||
|
|
height: 84vh;
|
||
|
|
}
|
||
|
|
.list {
|
||
|
|
// padding: 20rpx 30rpx 40rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
height: 84vh;
|
||
|
|
overflow: scroll;
|
||
|
|
}
|
||
|
|
.cell {
|
||
|
|
width: 680rpx;
|
||
|
|
margin: auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
padding: 20rpx 0;
|
||
|
|
border-bottom: 1px solid #F2F3F5;
|
||
|
|
}
|
||
|
|
.avatar {
|
||
|
|
width: 72rpx;
|
||
|
|
height: 72rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
}
|
||
|
|
.thumb {
|
||
|
|
width: 96rpx;
|
||
|
|
height: 96rpx;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
margin-left: auto;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 0;
|
||
|
|
}
|
||
|
|
.row1 {
|
||
|
|
color: #5F6368;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
.name {
|
||
|
|
color: #333;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
.tip {
|
||
|
|
margin-right: 14rpx;
|
||
|
|
}
|
||
|
|
.time {
|
||
|
|
color: #9AA0A6;
|
||
|
|
}
|
||
|
|
.row2 {
|
||
|
|
margin: 12rpx 0 8rpx;
|
||
|
|
color: #222;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
.row3 {
|
||
|
|
position: relative;
|
||
|
|
padding-left: 24rpx;
|
||
|
|
color: #9AA0A6;
|
||
|
|
font-size: 24rpx;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
}
|
||
|
|
.row3::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 8rpx;
|
||
|
|
bottom: 8rpx;
|
||
|
|
width: 4rpx;
|
||
|
|
background: #E6E8EB;
|
||
|
|
border-radius: 2rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|