<template>
<view class="luntan-pages">
<view class="luntan-header">
<image class="index-bg" src="../../static/images/index-header.png" mode=""></image>
<!-- <u-navbar :isBack="false" :background="{background:'rgba(0,0,0,0)'}" :border-bottom="false"
:isFixed="false"> -->
<u-navbar :fixed="false" bgColor='rgba(0,0,0,0)' placeholder :safeAreaInsetTop="true">
<view id="height" class="index-header u-flex u-row-between" slot="left" style="position: relative;">
<image @click="touser({uid:userinfo.id})" :src="userinfo.group_info.avatar"
style="width: 64rpx ; height: 64rpx; border-radius: 50rpx;" mode=""></image>
</view>
<view id="height" class="index-header u-flex u-row-between" slot="right" style="position: relative;">
<view class="navbar-right u-flex u-flex-1">
<!-- <view class="right-icon">
<u-icon name="search" size="44"></u-icon>
</view> -->
<view class="luntan-search u-flex">
<input v-if="searchshow" style="width: 280rpx;" type="text"
placeholderStyle="font-size:30rpx" placeholder="搜索你感兴趣的内容" v-model="keyword1"
confirm-type="search" @input="tosearch(1)" @clear='tosearch(1)'>
<u-icon @click="search_show" name="search" size="22"></u-icon>
</view>
<view class="right-icon" @click="toxiaoxi">
<u-badge type="error" count="7" :offset="[-8,-8]"></u-badge>
<u-icon name="bell" size="22"></u-icon>
</view>
</view>
</view>
</u-navbar>
<view class="header-tabs u-flex u-col-bottom">
<view class="u-flex-col u-col-center tabs-item" :class="{'tabs-item1':tabsindex == index}"
v-for="(item,index) in tabs" :key="index" @click="changetabs(index)">
<text>{{item}}</text>
<text></text>
</view>
</view>
</view>
<view class="luntan-list" v-if="tabsindex == 0">
<view class="luntan-item" v-for="(item,index) in list" :key="index" @click="toinfo(item)">
<view class="luntan-user u-flex u-row-between">
<image class="user-head" :src="item.userinfo.avatar" @click.stop="touser(item)" mode=""></image>
<view class="user-center u-flex-1 u-flex-col">
<text>{{item.userinfo.name}}</text>
<text>{{item.userinfo.company_name.name}}</text>
</view>
<text class="guanzhu-btn" @click.stop="guanzhu(item)">{{item.is_follow ? '已关注' : '关注'}}</text>
</view>
<zhao-text v-if="item.content" :text="item.content"></zhao-text>
<view v-if="item.images" class="luntan-img u-flex u-flex-wrap u-row-between">
<image :src="a" v-for="(a,b) in item.images.split(',')" :key="b"
@click.stop="openimg(item.images.split(','),b)" mode="scaleToFill"></image>
<view style="width: 210rpx;"></view>
</view>
<view class="quanzi-box u-flex" v-if="item.circle" @click.stop="toquanzi(item)">
<image src="../../static/images/quanzi.png" mode=""></image>
<text>{{item.circle.title}}</text>
</view>
<view class="item-down u-flex u-row-between">
<view class="u-flex u-row-center down-item" @click.stop="dianzan(item)">
<image v-if="item.is_like" src="../../static/images/dianzan3.png" mode=""></image>
<image v-else src="../../static/images/dianzan.png" mode=""></image>
<text v-if="item.is_like" class="text2">{{item.like_count}}</text>
<text v-else class="text1">{{item.like_count}}</text>
</view>
<view class="u-flex u-row-center down-item">
<image src="../../static/images/pinglun.png" mode=""></image>
<text class="text1">{{item.comment_count}}</text>
</view>
<view class="u-flex u-row-center down-item">
<image src="../../static/images/liulan.png" mode=""></image>
<text class="text1">{{item.read || 0}}</text>
</view>
</view>
</view>
</view>
<view class="quanzi-list" v-if="tabsindex == 1">
<view class="quanzi-item u-flex u-row-between" v-for="(item,index) in list" :key="index"
@click="toquanzi({circle_id:item.id})">
<image :src="item.image" class="img" mode="aspectFill"></image>
<view class="quanzi-center u-flex-col">
<text>{{item.title}}</text>
<text>{{item.article_count}}条内容｜{{item.follow_count}}人关注</text>
</view>
<view class="quanzi-btn" @click.stop="guanzhuquanzi(item)">
{{item.is_follow ? '已关注' : '关注'}}
</view>
</view>
</view>
<view class="quanzi-list" v-if="tabsindex == 2">
<view class="quanzi-item u-flex u-row-between" v-for="(item,index) in list" :key="index"
@click="touser({uid:item.uid})">
<image :src="item.userinfo.avatar" class="img" style="border-radius: 100rpx;" mode="aspectFill"></image>
<view class="quanzi-center u-flex-col">
<text>{{item.userinfo.name}}</text>
<text>{{item.userinfo.company_name.name}}</text>
</view>
<view class="quanzi-btn" @click.stop="quxiaoguanzhu(item)">
已关注
</view>
</view>
</view>
<view class="luntan-fabu u-flex u-row-center" @click="show = true">
<image src="../../static/images/plus.png" mode=""></image>
</view>
<u-popup :show="show" round="28" closeable="true" mode="center" @close="show = false">
<view class="fabu-luntan u-flex u-row-between">
<view @click="toadd(1)" class="fabu-item u-flex-col u-col-center">
<view class="fabu-img u-flex u-row-center">
<image src="../../static/images/fabu1.png" mode=""></image>
</view>
<text class="fabu-text">发布帖子</text>
</view>
<view @click="toadd(2)" class="fabu-item u-flex-col u-col-center">
<view class="fabu-img u-flex u-row-center">
<image src="../../static/images/fabu2.png" mode=""></image>
</view>
<text class="fabu-text">创建圈子</text>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import {
articlelist,
grouplist,
followuser,
follow,
articlelike,
index
} from "@/units/inquire.js"
export default {
data() {
return {
tabs: ['推荐', '圈子', '关注'],
tabsindex: 0,
show: false,
page: 1,
list: [],
total: 0,
searchshow: false,
userinfo: {
group_info: {}
},
keyword1: '',
keyword: '',
isshow: false
}
},
onLoad(options) {
if (options.tabsindex) {
this.tabsindex = options.tabsindex
}
},
onShow() {
if (this.isshow) {
this.isshow = false
} else {
this.page = 1
this.list = []
this.getlist()
this.getuser()
}
},
onReachBottom() {
if (this.total != this.list.length) {
this.page++
this.getlist()
}
},
methods: {
search_show() {
this.searchshow = !this.searchshow
},
quxiaoguanzhu(item) {
uni.showLoading({
mask: true,
title: "请稍后"
})
follow({
type: 1,
id: item.follow_id
}).then(res => {
this.$u.toast(res.msg)
setTimeout(() => {
this.tosearch()
}, 800)
})
},
guanzhuquanzi(item) {
uni.showLoading({
mask: true,
title: "请稍后"
})
follow({
type: 2,
id: item.id
}).then(res => {
this.$u.toast(res.msg)
if (res.code == 1) {
item.is_follow = item.is_follow ? null : {}
if (item.is_follow) {
item.follow_count++
} else {
item.follow_count--
}
}
})
},
openimg(urls, index) {
this.isshow = true
// this.$openimage(urls, index)
uni.previewImage(urls, index)
},
changetabs(index) {
this.tabsindex = index
this.keyword1 = ''
this.tosearch()
},
tosearch(type) {
this.keyword = this.keyword1
this.page = 1
this.list = []
if (type == 1) {
this.tabsindex = this.tabsindex == 2 ? 0 : this.tabsindex
}
this.getlist()
},
getuser() {
index().then(res => {
this.userinfo = res.data
})
},
guanzhu(item) {
uni.showLoading({
mask: true,
title: "请稍后"
})
follow({
type: 1,
id: item.uid
}).then(res => {
this.$u.toast(res.msg)
if (res.code == 1) {
// setTimeout(() => {
this.page = 1
// this.list = []
this.getlist()
// }, 800)
}
})
},
dianzan(item) {
// uni.showLoading({
// mask: true,
// title: "请稍后"
// })
articlelike({
id: item.id,
}).then(res => {
if (res.code == 1) {
item.is_like = item.is_like ? null : {}
if (item.is_like) {
item.like_count++
} else {
item.like_count--
}
} else {
this.$u.toast(res.msg)
}
})
},
getlist() {
if (this.tabsindex == 0) {
articlelist({
page: this.page,
keywords: this.keyword
}).then(res => {
this.total = res.data.total
if (this.page == 1) {
this.list = res.data.data
} else {
this.list = this.list.concat(res.data.data)
}
})
console.log("aaa", this.list);
}
if (this.tabsindex == 1) {
grouplist({
page: this.page,
keywords: this.keyword
}).then(res => {
this.total = res.data.total
this.list = this.list.concat(res.data.data)
})
console.log("bbb", this.list);
}
if (this.tabsindex == 2) {
followuser({
page: this.page,
keywords: this.keyword
}).then(res => {
this.total = res.data.total
this.list = this.list.concat(res.data.data)
})
}
},
touser(item) {
uni.navigateTo({
url: "/pagesC/my-luntan?id=" + item.uid
})
},
toquanzi(item) {
uni.navigateTo({
url: "/pagesC/quanzi-info?id=" + item.circle_id
})
},
toadd(type) {
if (type == 1) {
uni.navigateTo({
url: "/pagesC/add-luntan?type="+1
})
}
if (type == 2) {
uni.navigateTo({
url: "/pagesC/add-quanzi"
})
}
this.show = false
},
toinfo(item) {
uni.navigateTo({
url: "/pagesC/luntan-info?id=" + item.id
})
},
toxiaoxi() {
uni.navigateTo({
url: "/pagesC/xiaoxi-list"
})
}
}
}
</script>
<style lang="scss">
.luntan-pages {
.index-header {
// flex: 1;
padding: 0 32rpx;
height: 50rpx;
}
.quanzi-list {
padding: 0 32rpx;
background-color: #fff;
.quanzi-item {
padding: 28rpx 0;
border-bottom: 2rpx solid #F4F4F4;
.quanzi-btn {
width: 112rpx;
border-radius: 24rpx;
border: 1rpx solid #0C66C2;
text-align: center;
line-height: 48rpx;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0C66C2;
}
.quanzi-center {
flex: 1;
margin: 0 20rpx;
text:first-child {
font-size: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
margin-bottom: 14rpx;
}
text:last-child {
font-size: 22rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #777777;
}
}
.img {
width: 96rpx;
height: 96rpx;
border-radius: 10rpx;
background-color: rgba(0, 0, 0, 0.1);
}
}
}
.fabu-luntan {
width: 566rpx;
height: 308rpx;
padding: 40rpx 100rpx 0 100rpx;
box-sizing: border-box;
.fabu-item {
.fabu-img {
width: 112rpx;
height: 112rpx;
background: rgba(12, 102, 194, 0.1);
margin-bottom: 32rpx;
border-radius: 100%;
image {
width: 56rpx;
height: 56rpx;
}
}
.fabu-text {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
}
}
.luntan-fabu {
width: 96rpx;
height: 96rpx;
background: #0C66C2;
box-shadow: 0rpx 12rpx 48rpx -20rpx #0C66C2;
position: fixed;
bottom: 44rpx;
right: 24rpx;
z-index: 10;
border-radius: 100rpx;
image {
width: 45rpx;
height: 45rpx;
}
}
.luntan-list {
padding: 20rpx 20rpx 0 24rpx;
box-sizing: border-box;
.luntan-item {
background: #FFFFFF;
border-radius: 20rpx;
margin: 20rpx auto;
padding: 0 20rpx;
.item-down {
height: 84rpx;
.down-item {
width: 214rpx;
image {
width: 33rpx;
height: 33rpx;
}
.text1 {
font-size: 26rpx;
font-family: ArialMT;
color: #777777;
margin-left: 12rpx;
}
.text2 {
font-size: 26rpx;
font-family: ArialMT;
color: #0C66C2;
margin-left: 12rpx;
}
}
}
.luntan-img {
margin-top: 20rpx;
width: 100%;
image {
width: 210rpx;
height: 210rpx;
border-radius: 10rpx;
// margin-right: 10rpx;
margin-bottom: 10rpx;
}
}
.luntan-img::after {
width: 210rpx;
}
.quanzi-box {
padding: 0 20rpx;
height: 50rpx;
background: #F6F6F6;
border-radius: 28rpx;
margin: 20rpx 0 0 0;
display: inline-flex;
image {
width: 28rpx;
height: 28rpx;
}
text {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #555555;
margin-left: 8rpx;
}
}
.luntan-user {
height: 130rpx;
.guanzhu-btn {
width: 112rpx;
line-height: 48rpx;
border-radius: 24rpx;
border: 1rpx solid #0C66C2;
text-align: center;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #0C66C2;
}
.user-center {
margin: 0 16rpx;
min-width: 1rpx;
text:first-child {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #222222;
margin-bottom: 4rpx;
}
text:last-child {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #818389;
}
}
.user-head {
width: 72rpx;
height: 72rpx;
border-radius: 100rpx;
}
}
}
}
.luntan-header {
position: sticky;
top: 0;
left: 0;
z-index: 99;
background: linear-gradient(180deg, #EDF6FF 0%, #FFFFFF 100%);
.index-bg {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 750rpx;
height: 260rpx;
}
.header-tabs {
height: 84rpx;
.tabs-item {
padding: 0 42rpx;
text:first-child {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #777777;
margin-bottom: 10rpx;
}
text:last-child {
width: 36rpx;
height: 6rpx;
border-radius: 4rpx;
}
}
.tabs-item1 {
text:first-child {
color: #000000;
}
text:last-child {
background-color: #0C66C2;
}
}
}
.luntan-navbar {
flex: 1;
padding: 0 32rpx;
.navbar-right {
margin-right: 80rpx;
.luntan-search {
height: 68rpx;
background: #F3F3F3;
border-radius: 20rpx;
padding: 0 24rpx;
// margin-left: 80rpx;
input {
// flex: 1;
margin-left: 12rpx;
font-size: 26rpx;
}
}
.right-icon {
margin-left: 22rpx;
position: relative;
}
}
}
}
}
page {
background-color: #F6F6F6;
}
::v-deep .u-navbar__content__right {
right: 160rpx !important;
}
</style>