382 lines
9.5 KiB
Vue
382 lines
9.5 KiB
Vue
<template>
|
||
<view>
|
||
<view class="main">
|
||
<view class="tab-cont">
|
||
<view v-if="featuredList.length" class="follow_count">
|
||
<block v-for="(item, index) in featuredList" :key="index">
|
||
<view class="list_count">
|
||
<view v-if="item.author" class="title">
|
||
<view class="author">
|
||
<image class="picture" :src="item.author.avatar || '/static/images/f.png'"></image>
|
||
<text class="name">{{item.author.nickname}}</text>
|
||
</view>
|
||
<view @click="followAuthor(item)">
|
||
<view v-if="!item.relevance_id" class="follow focus">
|
||
<text class="iconfont icon-jiahao2"></text>关注
|
||
</view>
|
||
<view v-else class="follow focused">已关注</view>
|
||
</view>
|
||
</view>
|
||
<view class="product">
|
||
<productConSwiper :imgUrls="item.image"></productConSwiper>
|
||
</view>
|
||
<view class="pro_describle">
|
||
<view class="mentioned" v-if="item.relevance.length>0" @click="openMore(item)">
|
||
<text class="title">查看TA提到的宝贝({{item.relevance.length}})</text>
|
||
<view class="product_more">
|
||
<view class="item">
|
||
<image v-for="(itemn, indexn) in item.relevance" :key="indexn" :src="(itemn.spu&&itemn.spu.image)||itemn.image" class="more_image"></image>
|
||
</view>
|
||
<text class="iconfont icon-gengduo3"></text>
|
||
</view>
|
||
</view>
|
||
<view class="product_info">
|
||
<text class="text">
|
||
{{item.content}}
|
||
</text>
|
||
<text class="unfold_btn">展开</text>
|
||
</view>
|
||
<navigator v-if="item.topic" hover-class="none" class="product_cate" :url="'/pages/plantGrass/plant_search_list/index?id='+item.topic.topic_id">
|
||
<view>
|
||
<text class="icon">#</text><text class="text">{{item.topic.topic_name}}</text>
|
||
</view>
|
||
</navigator>
|
||
<view class="foot_bar">
|
||
<view class="item iconfont icon-fenxiang2"></view>
|
||
<view class="item">
|
||
<view class="item_count" @click.stop="likeToggle(item)">
|
||
<text class="iconfont" :class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
|
||
<text>{{item.count_start > 0 ? item.count_start : '点赞'}}</text>
|
||
</view>
|
||
|
||
<view class="item_count" @click="openCommon(item,index)">
|
||
<text class="iconfont icon-pinglun"></text>
|
||
<text>{{item.count_reply ? item.count_reply : '评论'}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 他提到的宝贝弹窗 -->
|
||
<uni-popup ref="mentioned" type="bottom">
|
||
<mentioned @close="close" :list="moreList"></mentioned>
|
||
</uni-popup>
|
||
<!-- 评论弹窗 -->
|
||
<comment ref="comment" :isShow="showComment" @close="close" @successFul="commentSucces"></comment>
|
||
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
// +----------------------------------------------------------------------
|
||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||
// +----------------------------------------------------------------------
|
||
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||
// +----------------------------------------------------------------------
|
||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||
// +----------------------------------------------------------------------
|
||
// | Author: CRMEB Team <admin@crmeb.com>
|
||
// +----------------------------------------------------------------------
|
||
import WaterfallsFlow from '@/components/plantWaterfallsFlow/WaterfallsFlow.vue'
|
||
import mentioned from '@/components/mentioned.vue';
|
||
import comment from '@/components/comment.vue';
|
||
import {graphicLstApi, graphicStartApi, followAuthorApi} from '@/api/community.js';
|
||
import { getUserInfo } from '@/api/user.js';
|
||
import { mapGetters } from "vuex";
|
||
import authorize from '@/components/Authorize';
|
||
import productConSwiper from '@/components/productConSwiper';
|
||
const app = getApp();
|
||
export default {
|
||
components: {
|
||
authorize,
|
||
WaterfallsFlow,
|
||
productConSwiper,
|
||
mentioned,
|
||
comment
|
||
},
|
||
data() {
|
||
return {
|
||
featuredList: [], // 商铺商品
|
||
moreList: [],
|
||
commList: [], //评论列表
|
||
loading: false,
|
||
loaded: false,
|
||
loadTitle: '加载更多',
|
||
isShowAuth: false, //是否隐藏授权
|
||
isAuto: false, //没有授权的不会自动授权
|
||
where: {
|
||
topic_id: '',
|
||
page: 1,
|
||
limit: 30
|
||
},
|
||
showComment: false,
|
||
}
|
||
},
|
||
created() {
|
||
|
||
},
|
||
computed: {
|
||
...mapGetters(['isLogin']),
|
||
},
|
||
watch: {
|
||
|
||
},
|
||
onLoad: function(options) {
|
||
this.where.topic_id = options.id
|
||
this.getList();
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
mounted: function() {
|
||
},
|
||
methods: {
|
||
// 授权回调
|
||
onLoadFun() {
|
||
this.isShowAuth = false
|
||
},
|
||
// 授权关闭
|
||
authColse: function(e) {
|
||
this.isShowAuth = e
|
||
},
|
||
// 打开授权
|
||
authOpen: function() {
|
||
let that = this;
|
||
if (that.isLogin === false) {
|
||
this.isAuto = true;
|
||
this.isShowAuth = true;
|
||
}
|
||
},
|
||
// 获取关注商品
|
||
getList: function() {
|
||
let that = this;
|
||
if (that.loaded || that.loading) return;
|
||
that.loading = true;
|
||
that.loadTitle = '';
|
||
graphicLstApi(that.where).then(res => {
|
||
that.loading = false;
|
||
let list = res.data.list;
|
||
let featuredList = that.$util.SplitArray(list, that.featuredList);
|
||
that.loaded = list.length < that.where.limit;
|
||
that.loadTitle = loaded ? '已全部加载' : '加载更多';
|
||
that.$set(that, 'featuredList', featuredList);
|
||
that.$set(that.where, 'page', that.where.page + 1);
|
||
}).catch(err => {
|
||
that.loading = false;
|
||
uni.showToast({
|
||
title: err,
|
||
icon: 'none'
|
||
})
|
||
});
|
||
},
|
||
likeToggle(item){
|
||
let status = item.relevance_id ? 0 : 1
|
||
graphicStartApi(item.community_id,{status: status}).then(res => {
|
||
if(item.relevance_id){
|
||
item.count_start--;
|
||
item.count_start = item.count_start == 0 ? 0 : item.count_start
|
||
item.relevance_id = false
|
||
}else{
|
||
item.count_start++;
|
||
item.relevance_id = true
|
||
}
|
||
});
|
||
},
|
||
// 关注作者
|
||
followAuthor: function(item) {
|
||
let status = item.relevance_id ? 0 : 1
|
||
followAuthorApi(item.uid,{status: status}).then(res => {
|
||
if (res.status === 200) {
|
||
item.relevance_id = item.relevance_id ? false : true
|
||
}
|
||
this.$util.Tips({
|
||
title: res.message
|
||
});
|
||
});
|
||
},
|
||
/*查看提到的宝贝*/
|
||
openMore(item){
|
||
this.$refs.mentioned.open();
|
||
this.moreList = item.relevance;
|
||
},
|
||
openCommon(item,index){
|
||
this.showComment = true
|
||
this.$refs.comment.getData(item,index);
|
||
},
|
||
commentSucces(index){
|
||
this.featuredList[index]['count_reply']++
|
||
},
|
||
close(){
|
||
this.$refs.mentioned.close();
|
||
this.showComment = false;
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
this.getList();
|
||
},
|
||
onPullDownRefresh(){
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.main{
|
||
background: #ffffff;
|
||
min-height: 100vh;
|
||
}
|
||
.tab-cont{
|
||
background: #fff;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
}
|
||
.follow_count{
|
||
padding: 20rpx;
|
||
.list_count{
|
||
margin-bottom: 70rpx;
|
||
}
|
||
.title{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.author{
|
||
display: flex;
|
||
align-items: center;
|
||
.picture, uni-image{
|
||
width: 78rpx;
|
||
height: 78rpx;
|
||
border-radius: 100%;
|
||
}
|
||
.name{
|
||
margin-left: 20rpx;
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.follow{
|
||
margin-right: 10rpx;
|
||
width: 112rpx;
|
||
text-align: center;
|
||
line-height: 42rpx;
|
||
font-size: 22rpx;
|
||
border-radius: 33rpx;
|
||
&.focus{
|
||
color: #E93323;
|
||
border: 1px solid #E93323;
|
||
.iconfont{
|
||
font-size: 15rpx;
|
||
margin-right: 5rpx;
|
||
}
|
||
}
|
||
&.focused{
|
||
background: #EEEEEE;
|
||
border: 1px solid #EEEEEE;
|
||
color: #999999;
|
||
}
|
||
}
|
||
.product{
|
||
margin-top: 20rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
}
|
||
.pro_describle{
|
||
.mentioned{
|
||
padding: 20rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #F5F5F5;
|
||
.title{
|
||
color: #666666;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
.product_more{
|
||
max-width: 360rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.more_image{
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
border-radius: 5rpx;
|
||
border: 1px solid #BBBBBB;
|
||
margin-right: 12rpx;
|
||
}
|
||
.iconfont{
|
||
color: #CCCCCC;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
.product_info{
|
||
line-height: 45rpx;
|
||
margin: 20rpx 0;
|
||
.text{
|
||
font-size: 28rpx;
|
||
color: #282828;
|
||
}
|
||
.unfold_btn{
|
||
margin-left: 30rpx;
|
||
font-size: 30rpx;
|
||
color: #282828;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.product_cate{
|
||
margin: 20rpx 0;
|
||
display: inline-block;
|
||
>view{
|
||
display: flex;
|
||
align-items: center;
|
||
background: #FFF3F2;
|
||
border-radius: 30rpx;
|
||
padding: 0 25rpx;
|
||
line-height: 56rpx;
|
||
height: 56rpx;
|
||
color: #E93323;
|
||
.text{
|
||
font-size: 28rpx;
|
||
}
|
||
.icon{
|
||
font-size: 35rpx;
|
||
font-weight: bold;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.foot_bar{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.item{
|
||
display: flex;
|
||
align-items: center;
|
||
color: #282828;
|
||
&.icon-fenxiang2{
|
||
font-size: 46rpx;
|
||
}
|
||
}
|
||
.item_count{
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
&:first-child{
|
||
margin-right: 30rpx;
|
||
}
|
||
.iconfont{
|
||
font-size: 40rpx;
|
||
margin-right: 5rpx;
|
||
}
|
||
.icon-shoucang1{
|
||
color: #E93323;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|