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.
488 lines
13 KiB
488 lines
13 KiB
<template>
|
|
<view style="padding: 0px 0px 65px;">
|
|
<image :src="activitiesInfo.promotional_img" mode="widthFix" style="width: 100vw;height: auto;"></image>
|
|
<view class="content_wrapper">
|
|
<view class="title">
|
|
{{activitiesInfo.title}}
|
|
<text class="title-right">{{label}}</text>
|
|
</view>
|
|
<view v-html="activitiesInfo.describe" style="margin-bottom: 15px;" class="describeWrap"></view>
|
|
<view class="text" style="display: flex;align-items: center;">
|
|
<image style="width: 52upx;height: 52upx;vertical-align: middle;margin-right: 4px;" :src="activitiesInfo.avatar"></image>
|
|
{{activitiesInfo.nickname}}
|
|
</view>
|
|
<view class="text">发布于：{{activitiesInfo.publish_time}}</view>
|
|
</view>
|
|
<view class="comment-wrapper">
|
|
<view class="comment-title">
|
|
<view style="flex: 1;">评论<text v-if="0">（{{evaluation_list.length}}）</text></view>
|
|
<view style="margin-right: 20px;" @click="favorite" v-if="0">
|
|
<image v-if="!activitiesInfo.is_thumbs_up" :src="imageRootNew+'appreciate-grey.png'" mode=""></image>
|
|
<image v-else :src="imageRootNew+'appreciate-red.png'" mode=""></image>
|
|
{{activitiesInfo.thumbs_up_count}}
|
|
</view>
|
|
<view class="" @click="tabLeave" v-if="0">
|
|
写留言
|
|
<image :src="imageRootNew+'fa-comment.png'"></image>
|
|
</view>
|
|
</view>
|
|
<view class="comment-item" v-for="(item, index) in evaluation_list" :key="index">
|
|
<view class="dis-flex">
|
|
<image class="avatar2" :src="item.avatar" mode=""></image>
|
|
<view class="name">{{ item.nickname }}</view>
|
|
</view>
|
|
<view style="padding-left: 32px;font-size: 14px;margin: 10px 0px;" @click="tabLeave(index)">{{ item.content }}</view>
|
|
<view style="padding-left: 32px;" class="dis-flex">
|
|
<view class="comment-num" v-if="item.is_query && !item.list" @click="getEvaluationList(index, item.id)">
|
|
展开{{item.reply_count}}条回复
|
|
</view>
|
|
<view class="comment-num" v-else-if="item.is_query && item.list.length!=item.reply_count" @click="getEvaluationList(index, item.id)">
|
|
展开更多回复
|
|
</view>
|
|
<view class="comment-num" v-else>{{item.reply_count}}条回复</view>
|
|
<view style="font-size: 12px;color: #999;">{{item.create_time}}</view>
|
|
</view>
|
|
<view style="padding-left: 32px;">
|
|
<view v-for="(item2,index2) in item.list" :key="index2" style="margin: 10px 0px;">
|
|
<view class="dis-flex">
|
|
<image class="avatar2" :src="item2.avatar" mode=""></image>
|
|
<view class="name">{{ item2.nickname }}</view>
|
|
<view style="margin: 0px 5px;font-size: 10px;">▶</view>
|
|
<image class="avatar2" :src="item2.quilt_avatar" mode=""></image>
|
|
<view class="name">{{ item2.quilt_nickname }}</view>
|
|
</view>
|
|
<view style="padding-left: 32px;font-size: 14px;margin: 10px 0px;" @click="tabLeave(index, index2)">{{ item2.content }}</view>
|
|
<view style="padding-left: 32px;" class="dis-flex">
|
|
<view style="font-size: 12px;color: #999;">{{item2.create_time}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="comment-bottom" v-if="nomore">- 到底了 -</view>
|
|
</view>
|
|
<view class="btn-wrapper">
|
|
<view class="leave-btn" @click="tabLeave">
|
|
<image :src="imageRootNew+'ze-edit@2x.png'"></image>
|
|
说点什么
|
|
</view>
|
|
<view class="favorite-btn" @click="favorite">
|
|
<image v-if="!activitiesInfo.is_thumbs_up" :src="imageRootNew+'ze-like-o@2x.png'" mode=""></image>
|
|
<image v-else :src="imageRootNew+'ze-like@2x.png'" mode=""></image>
|
|
<text>{{activitiesInfo.thumbs_up_count}}</text>
|
|
</view>
|
|
<view class="collect-btn" @click="collect">
|
|
<image v-if="!activitiesInfo.is_collect" :src="imageRootNew+'ze-star-o@2x.png'" mode=""></image>
|
|
<image v-else :src="imageRootNew+'ze-star@2x.png'" mode=""></image>
|
|
<text>{{activitiesInfo.collect_count}}</text>
|
|
</view>
|
|
<view class="comment-btn" @click="tabLeave">
|
|
<image :src="imageRootNew+'leave-g@2x.png'" mode=""></image>
|
|
<text>{{evaluation_list.length}}</text>
|
|
</view>
|
|
<!-- <view class="join-btn" v-if="!activitiesInfo.is_enroll" @click="join">立即报名</view> -->
|
|
<!-- <view class="join-btn" v-if="activitiesInfo.is_enroll" @click="cancelJoin">取消报名</view> -->
|
|
</view>
|
|
<!-- 留言弹窗 -->
|
|
<view style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;
|
|
background-color: rgba(0,0,0,.3);" v-show="showLeave" @click.stop="tabLeave"></view>
|
|
<view class="reply-wrapper" v-show="showLeave">
|
|
<textarea @click.stop class="my-text" v-model="comment" name="" id="" cols="30" rows="10" :placeholder="placeholderTxt"></textarea>
|
|
<button type="primary" style="margin: 20rpx 80rpx;border-radius: 50px;" @click.stop="addComment">发送</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
mid: null,
|
|
id: null,
|
|
cc_cc_id: null,
|
|
ccccidList: [],
|
|
label: '',
|
|
activitiesInfo: {},
|
|
evaluation_list:[],
|
|
page: 1,
|
|
comment: '',
|
|
showLeave: false,
|
|
placeholderTxt: "留言",
|
|
oneid: null,
|
|
pid: null,
|
|
indexA: null,//当前一级评论索引
|
|
nomore: false
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
let _this = this;
|
|
this.id = e.id;
|
|
if(e.cc_cc_id){
|
|
this.cc_cc_id = e.cc_cc_id;
|
|
this.getTabData();
|
|
}else if(e.name){
|
|
this.label = e.name;
|
|
}
|
|
|
|
this.getDetail();
|
|
this.getEvaluationList();
|
|
let user_info = uni.getStorageSync('userInfo');
|
|
if(!user_info){
|
|
App._post_form('&p=member&do=memberInfo', {}, res => {
|
|
// uni.setStorageSync('userinfo', res.data);
|
|
_this.mid = res.data.mid
|
|
});
|
|
}else{
|
|
_this.mid = user_info.mid;
|
|
}
|
|
},
|
|
methods: {
|
|
getTabData(){
|
|
App._post_form(
|
|
`&p=cultivateClass&do=getCultivateClassChildList`,
|
|
{cc_id: 6},
|
|
res => {
|
|
if(res.data.length>0){
|
|
this.ccccidList = res.data;
|
|
this.ccccidList.map(item=>{
|
|
if(item.id==this.cc_cc_id){
|
|
this.label = item.name;
|
|
}
|
|
})
|
|
}
|
|
},
|
|
false,
|
|
() => {
|
|
}
|
|
);
|
|
},
|
|
getDetail(){
|
|
let _this = this;
|
|
App._post_form('&p=student&do=campusActivitiesFind', {id:_this.id}, res => {
|
|
_this.setData({
|
|
activitiesInfo: res.data.data
|
|
})
|
|
|
|
var strings = this.activitiesInfo.describe;
|
|
//请求到的富文本数据文件
|
|
const regex = new RegExp('<img ','gi');
|
|
//创建一个正则匹配规则
|
|
// g表示global全局搜索 i表示ignore case 忽略大小写 m 执行多行匹配
|
|
var richtext = strings.replace(regex, `<img style="width: calc(100vw - 24px);"`);
|
|
// 将想要的样式属性携带在标签上，替换原来的标签即可。
|
|
this.activitiesInfo.describe = richtext;
|
|
// 最后将修改后的富文本传到data中，渲染到视图层即可。
|
|
|
|
});
|
|
},
|
|
getEvaluationList(indexA,oneid){
|
|
let _this = this;
|
|
let data = {
|
|
caid: _this.id,
|
|
oneid: oneid||0,
|
|
pindex: _this.page,
|
|
psize: 10
|
|
}
|
|
if(oneid){
|
|
// 二级评论
|
|
if(!_this.evaluation_list[indexA].page){
|
|
_this.$set(_this.evaluation_list[indexA], 'page', 1);
|
|
}
|
|
data.pindex = _this.evaluation_list[indexA].page;
|
|
}
|
|
App._post_form('&p=student&do=getEvaluationList', data, res => {
|
|
if(oneid){
|
|
_this.evaluation_list[indexA].page++;
|
|
if(!_this.evaluation_list[indexA].list){
|
|
_this.$set(_this.evaluation_list[indexA], 'list', []);
|
|
}
|
|
_this.evaluation_list[indexA].list.push(...res.data.list)
|
|
|
|
|
|
}else{
|
|
// 一级评论
|
|
if(_this.page===1){
|
|
_this.setData({
|
|
evaluation_list: res.data.list
|
|
})
|
|
if(res.data.total == _this.evaluation_list.length){
|
|
this.nomore = true;
|
|
}else{
|
|
_this.page++;
|
|
}
|
|
}else{
|
|
if(res.data.list.length>0){
|
|
let dataList = _this.evaluation_list.concat(res.data.list);
|
|
_this.setData({
|
|
evaluation_list: dataList
|
|
})
|
|
}
|
|
if(res.data.total == _this.evaluation_list.length){
|
|
this.nomore = true;
|
|
}else{
|
|
_this.page++;
|
|
}
|
|
}
|
|
}
|
|
|
|
});
|
|
},
|
|
tabLeave(index1, index2){
|
|
console.log(typeof index1, typeof index2);
|
|
this.showLeave=!this.showLeave;
|
|
if(typeof index1 == 'number'){
|
|
this.indexA = index1;
|
|
this.placeholderTxt = '回复';
|
|
this.oneid = this.evaluation_list[index1].id;
|
|
|
|
if(typeof index2 == 'number'){
|
|
this.pid = this.evaluation_list[index1].list[index2].id;
|
|
}else{
|
|
this.pid = this.evaluation_list[index1].id;
|
|
}
|
|
}else{
|
|
this.placeholderTxt = '留言';
|
|
this.oneid = null;
|
|
this.pid = null;
|
|
}
|
|
|
|
},
|
|
addComment(){
|
|
let _this = this,
|
|
data = {
|
|
mid: this.mid,
|
|
caid: this.id,
|
|
content: this.comment,
|
|
oneid: this.oneid || 0,
|
|
pid: this.pid || 0
|
|
}
|
|
App._post_form('&p=student&do=addEvaluation', data, res => {
|
|
uni.showToast({
|
|
title: res.message
|
|
})
|
|
_this.showLeave = false;
|
|
_this.comment = '';
|
|
|
|
// 后台审核，暂时获取不到新的评论
|
|
if(this.oneid){
|
|
// _this.getEvaluationList(this.indexA, this.oneid);
|
|
}else{
|
|
// _this.getEvaluationList();
|
|
}
|
|
})
|
|
},
|
|
// 废弃接口
|
|
join(){
|
|
let _this = this,
|
|
data = {
|
|
caid: this.id
|
|
}
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '请确认是否报名',
|
|
success(res) {
|
|
if(res.confirm){
|
|
App._post_form('&p=student&do=immediatelyEnrollActivities', data, res => {
|
|
uni.showToast({
|
|
title: res.message
|
|
})
|
|
_this.activitiesInfo.is_enroll = true;
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 废弃接口
|
|
cancelJoin(){
|
|
let _this = this,
|
|
data = {
|
|
caid: this.id
|
|
}
|
|
App._post_form('&p=student&do=cancelEnrollActivities', data, res => {
|
|
uni.showToast({
|
|
title: res.message
|
|
})
|
|
_this.activitiesInfo.is_enroll = false;
|
|
})
|
|
},
|
|
favorite(){
|
|
let _this = this,
|
|
data = {
|
|
caid: this.id
|
|
}
|
|
App._post_form('&p=student&do=thumbsUpActivities', data, res => {
|
|
uni.showToast({
|
|
title: res.message
|
|
})
|
|
_this.activitiesInfo.is_thumbs_up = !_this.activitiesInfo.is_thumbs_up
|
|
if(_this.activitiesInfo.is_thumbs_up){
|
|
++_this.activitiesInfo.thumbs_up_count;
|
|
}else if(!_this.activitiesInfo.is_thumbs_up){
|
|
--_this.activitiesInfo.thumbs_up_count;
|
|
}
|
|
})
|
|
},
|
|
collect(){
|
|
let _this = this,
|
|
data = {
|
|
caid: this.id
|
|
}
|
|
if(_this.activitiesInfo.is_collect){
|
|
App._post_form('&p=student&do=cancelCollectActivities', data, res => {
|
|
uni.showToast({
|
|
title: res.message
|
|
})
|
|
_this.activitiesInfo.is_collect = !_this.activitiesInfo.is_collect
|
|
// if(res.message=='已取消收藏'){
|
|
--_this.activitiesInfo.collect_count;
|
|
// }
|
|
})
|
|
}else{
|
|
App._post_form('&p=student&do=immediatelyCollectActivities', data, res => {
|
|
uni.showToast({
|
|
title: res.message
|
|
})
|
|
_this.activitiesInfo.is_collect = !_this.activitiesInfo.is_collect
|
|
// if(res.message=='收藏成功'){
|
|
++_this.activitiesInfo.collect_count;
|
|
// }
|
|
})
|
|
}
|
|
}
|
|
},
|
|
onReachBottom(){
|
|
if(!this.nomore){
|
|
this.getEvaluationList();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.dis-flex{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.content_wrapper{
|
|
padding: 40upx 24upx;
|
|
.title{
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #444;
|
|
margin-bottom: 10px;
|
|
}
|
|
.title-right{
|
|
font-size: 14px;
|
|
padding: 0px 5px;
|
|
color: #2479EA;
|
|
border: 1px solid #2479EA;
|
|
border-radius: 5px;
|
|
margin-left: 8px;
|
|
}
|
|
.text{
|
|
font-size: 12px;
|
|
color: #999;
|
|
margin: 10px 0px;
|
|
}
|
|
|
|
.describeWrap{
|
|
rich-text{
|
|
.content-picture, .nfw-cms-img{
|
|
width: calc(100vw - 24px);
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.comment-wrapper{
|
|
padding: 0px 24upx;
|
|
|
|
.comment-title{
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
color: #444;
|
|
}
|
|
|
|
.comment-item{
|
|
padding: 10px 0px;
|
|
border-bottom: 1px solid #f8f8f8;
|
|
.avatar2{
|
|
width: 24px;
|
|
height: 24px;
|
|
background-color: #000;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
.name{
|
|
font-size: 13px;
|
|
}
|
|
.comment-num{
|
|
padding: 2px 8px;
|
|
border-radius: 20px;
|
|
background-color: #e8e8e8;
|
|
margin-right: 8px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
.comment-bottom{
|
|
width: 100%;
|
|
line-height: 60px;
|
|
text-align: center;
|
|
color: #bbb;font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.btn-wrapper{
|
|
width: 100vw;
|
|
height: 67px;
|
|
padding: 15px 35upx;
|
|
box-sizing: border-box;
|
|
position: fixed;
|
|
bottom: 0px;
|
|
left: 0;
|
|
background: #FFF;
|
|
border-top: 1px solid #f4f4f4;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.leave-btn{
|
|
width: 320rpx;
|
|
height: 36px;
|
|
padding: 0px 8px;
|
|
box-sizing: border-box;
|
|
border-radius: 30px;
|
|
color: #bbb;
|
|
border: 1px solid #bbb;
|
|
line-height: 36px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.leave-btn, .favorite-btn, .collect-btn, .comment-btn{
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
image{
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
.reply-wrapper{
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 560rpx;
|
|
height: 430rpx;
|
|
background-color: #fff;
|
|
border-radius: 20px;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow: 0px 0px 3px 0px rgba(0,0,0,.05);
|
|
|
|
.my-text{
|
|
padding: 50rpx 30rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
</style>
|
|
|