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.
316 lines
6.7 KiB
316 lines
6.7 KiB
<template>
|
|
<view class="container">
|
|
<view class="image_box">
|
|
<image @click="preImg(info.topic_pic)" :src="info.topic_pic" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="info_box">
|
|
<view class="title_box">
|
|
<view class="icon-box flex j-center al-item-center">
|
|
<view class="icon">#</view>
|
|
</view>
|
|
{{info.topic_name||''}}
|
|
</view>
|
|
<view class="head_box">
|
|
<view class="left">
|
|
|
|
<view class="item_image" v-for="(item,index) in userList" :key='index'>
|
|
<image :src="item" mode=""></image>
|
|
</view>
|
|
<text class="txt">{{info.not_count+info.video_count}}篇动态 {{info.member_count}}人讨论</text>
|
|
</view>
|
|
|
|
<view class="right" :class="info.is_follow?'followed':'isFollow'" @tap="Follow">
|
|
{{info.is_follow?'已关注':'关注'}}
|
|
</view>
|
|
</view>
|
|
<view class="content_info">
|
|
{{info.topic_content||''}}
|
|
</view>
|
|
<view class="nav_max">
|
|
|
|
<view class="item" @click="typeFn(1)" >
|
|
<text class="txt" :class="{checked: type == 1}">笔记</text>
|
|
</view>
|
|
<view class="item" @click="typeFn(2)">
|
|
<text class="txt" :class="{checked: type == 2}">视频</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content_box">
|
|
<view class="nav_min_box">
|
|
<!-- <view class="item" @click="typeFieldFn(1)" :style="{'font-weight':type_field == 1?'bold':'400'}">
|
|
综合
|
|
</view> -->
|
|
<view class="item" @click="typeFieldFn(2)" :style="type_field == 2?'font-weight: bold;color:'+t('color1'):''">
|
|
最热
|
|
</view>
|
|
<view class="item" @click="typeFieldFn(3)" :style="type_field == 3?'font-weight: bold;color:'+t('color1'):''">
|
|
最新
|
|
</view>
|
|
</view>
|
|
<diary-falls-list @listZanFn='listZanFn' :datalist='datalist' v-if="datalist && datalist.length>0"> </diary-falls-list>
|
|
|
|
<nomore text="没有更多内容了" v-if="nomore"></nomore>
|
|
<nodata text="没有查找到相关内容" v-if="nodata"></nodata>
|
|
<!-- 悬浮按钮 -->
|
|
<drag-button></drag-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var app = getApp();
|
|
export default{
|
|
onReachBottom () {
|
|
if (!this.nodata && !this.nomore) {
|
|
this.pagenum = this.pagenum + 1;
|
|
this.getRecList()
|
|
}
|
|
},
|
|
onLoad(opt) {
|
|
this.id = opt.id;
|
|
// this.getInfo();
|
|
},
|
|
onShow(){
|
|
this.pagenum= 1
|
|
this.getRecList();
|
|
},
|
|
data(){
|
|
return{
|
|
userList:[],
|
|
id:'',
|
|
pagenum:1,
|
|
loading:false,
|
|
isload: false,
|
|
nomore:false,
|
|
nodata:false,
|
|
datalist:[],
|
|
info:{},
|
|
type:1,
|
|
type_field:2,
|
|
}
|
|
},
|
|
methods:{
|
|
preImg(url){
|
|
uni.previewImage({urls:[url],current:1})
|
|
},
|
|
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;
|
|
}
|
|
},
|
|
typeFieldFn(e){
|
|
this.type_field = e;
|
|
this.resetList();
|
|
},
|
|
typeFn(e){
|
|
console.log(e)
|
|
this.type = e;
|
|
this.resetList();
|
|
},
|
|
Follow(){
|
|
app.post('ApiMy/addFollow',{follow_id:this.id,type:'topic'},(res)=>{
|
|
// this.info = res.data
|
|
uni.showToast({
|
|
title:res.msg,
|
|
icon:'none'
|
|
})
|
|
if(res.msg == '已关注'){
|
|
this.info.is_follow = 1
|
|
}else{
|
|
this.info.is_follow = 0
|
|
}
|
|
// this.getInfo()
|
|
})
|
|
},
|
|
resetList(){
|
|
this.pagenum = 1;
|
|
this.getRecList();
|
|
},
|
|
getRecList(){
|
|
|
|
let that = this;
|
|
var page = that.pagenum;
|
|
that.loading = true;
|
|
that.nomore = false;
|
|
that.nodata = false;
|
|
app.get('ApiZhiwei/topicDetail', {topic_id:this.id,pagenum: page,order:this.type_field,type:this.type}, function (res) {
|
|
that.loading = false;
|
|
var data = res.dataList;
|
|
if (page == 1) {
|
|
that.info = res.data;
|
|
that.userList = res.userList;
|
|
that.datalist = res.dataList;
|
|
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();
|
|
});
|
|
|
|
return
|
|
app.post('ApiZhiwei/topicDetail',{topic_id:this.id},(res)=>{
|
|
this.info = res.data
|
|
})
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content_box{
|
|
padding: 0 24rpx;
|
|
.nav_min_box{
|
|
padding: 24rpx 8rpx;
|
|
display: flex;
|
|
.item{
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
margin-right: 32rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
.info_box{
|
|
border-radius: 20rpx;
|
|
padding: 28rpx 32rpx 0;
|
|
background-color: #fff;
|
|
|
|
.content_info{
|
|
margin-bottom: 44rpx;
|
|
font-size: 28rpx;
|
|
line-height: 50rpx;
|
|
color: #333;
|
|
}
|
|
.head_box{
|
|
margin: 26rpx 0 14rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.left{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 20rpx;
|
|
|
|
.item_image{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 50rpx;
|
|
overflow: hidden;
|
|
margin-left: -20rpx;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.txt{
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
margin-left: 16rpx;
|
|
line-height: 34rpx;
|
|
}
|
|
}
|
|
.right {
|
|
width: 120rpx;
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
border-radius: 26rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FFFFFF;
|
|
&.isFollow {
|
|
background: linear-gradient(to right,#00AE68 0%,#096742 100%);
|
|
}
|
|
&.followed {
|
|
color: #0A5D3B;
|
|
position: relative;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
border: 1px solid #0A5D3B;
|
|
border-radius: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.title_box{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
line-height: 44rpx;
|
|
.icon-box {
|
|
flex-shrink: 0;
|
|
background: radial-gradient(#dcf5eb,#e9fdf6);
|
|
border-radius: 50%;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
.icon{
|
|
font-size: 26rpx;
|
|
color: #0A5D3B;
|
|
}
|
|
}
|
|
}
|
|
.nav_max{
|
|
padding: 0 120rpx 24rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
padding: 0 20rpx;
|
|
.txt{
|
|
z-index: 2;
|
|
font-size: 32rpx;
|
|
color: #999999;
|
|
line-height: 44rpx;
|
|
&.checked {
|
|
color: #333333;
|
|
position: relative;
|
|
font-weight: bold;
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -12rpx;
|
|
width: 44rpx;
|
|
height: 6rpx;
|
|
border-radius: 6rpx;
|
|
transform: translateX(-50%);
|
|
background: #0A5D3B;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.image_box{
|
|
width: 100%;
|
|
height: 400rpx;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
|