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.
270 lines
6.5 KiB
270 lines
6.5 KiB
<template>
|
|
<view style="padding: 10px 10px 65px;">
|
|
<view class="content_wrapper">
|
|
<image :src="activitiesInfo.promotional_img" mode="widthFix" style="width: calc(100vw - 20px);"></image>
|
|
<view style="font-size: 18px;line-height: 30px;font-weight: bold;margin: 16px 0px;">{{activitiesInfo.title}}</view>
|
|
<view class="text">发布时间：{{activitiesInfo.publish_time}}</view>
|
|
<view class="text" v-html="activitiesInfo.describe"></view>
|
|
</view>
|
|
<view class="">
|
|
<view class="comment-wrapper">
|
|
<view style="flex: 1;">用户评价（{{activitiesInfo.evaluation_list.length}}）</view>
|
|
<view style="margin-right: 20px;" @click="favorite">
|
|
<image v-if="!activitiesInfo.is_thumbs_up" src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/appreciate-grey.png" mode=""></image>
|
|
<image v-else src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/appreciate-red.png" mode=""></image>
|
|
{{activitiesInfo.thumbs_up_count}}
|
|
</view>
|
|
<view class="leave" @click="tabLeave">
|
|
写留言
|
|
<image src="https://qingyuan.xingtongworld.com/addons/weliam_smartcity/data/img/fa-comment.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="comment-item" v-for="(item, index) in activitiesInfo.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: 38px;font-size: 14px;margin: 5px auto 10px;">{{ item.content }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn-wrapper">
|
|
<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="留言"></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,
|
|
activitiesInfo: {
|
|
evaluation_list:[],
|
|
},
|
|
page: 1,
|
|
comment: '',
|
|
showLeave: false,
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
let _this = this;
|
|
this.id = e.id;
|
|
this.getDetail();
|
|
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: {
|
|
getDetail(){
|
|
let _this = this;
|
|
App._post_form('&p=student&do=campusActivitiesFind', {id:_this.id}, res => {
|
|
if(_this.page===1){
|
|
_this.setData({
|
|
activitiesInfo: res.data.data
|
|
})
|
|
}else{
|
|
// if(res.data.data.length>0){
|
|
// let dataList = _this.dataList.concat(res.data.data);
|
|
// _this.setData({
|
|
// dataList
|
|
// })
|
|
// }
|
|
}
|
|
});
|
|
},
|
|
tabLeave(){
|
|
this.showLeave=!this.showLeave;
|
|
},
|
|
addComment(){
|
|
let _this = this,
|
|
data = {
|
|
mid: this.mid,
|
|
caid: this.id,
|
|
content: this.comment
|
|
}
|
|
App._post_form('&p=student&do=addEvaluation', data, res => {
|
|
uni.showToast({
|
|
title: res.message
|
|
})
|
|
_this.showLeave = false;
|
|
_this.comment = '';
|
|
_this.getDetail();
|
|
})
|
|
},
|
|
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(res.message=='点赞成功'){
|
|
++_this.activitiesInfo.thumbs_up_count;
|
|
}else if(res.message=='已取消'){
|
|
--_this.activitiesInfo.thumbs_up_count;
|
|
}
|
|
})
|
|
}
|
|
},
|
|
onReachBottom(){
|
|
// this.page++;
|
|
// this.getList();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.dis-flex{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.content_wrapper{
|
|
border-bottom: 1px solid #efefef;
|
|
.text{
|
|
font-size: 13px;
|
|
color: #999;
|
|
margin: 15px 0px 20px;
|
|
}
|
|
|
|
// image, img, .content-picture, .nfw-cms-img{
|
|
// width: calc(100vw - 20px);
|
|
// }
|
|
rich-text{
|
|
/deep/img{
|
|
width: calc(100vw - 20px);//代码无效
|
|
}
|
|
.content-picture, .nfw-cms-img{
|
|
width: calc(100vw - 20px);
|
|
}
|
|
}
|
|
}
|
|
.comment-wrapper{
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
padding: 10px;
|
|
color: #333;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.leave{
|
|
padding: 0px 5px;
|
|
}
|
|
image{
|
|
width: 20px;
|
|
height: 20px;
|
|
vertical-align: middle;
|
|
margin: 0px 10rpx;
|
|
}
|
|
}
|
|
.comment-item{
|
|
padding: 10px 0px;
|
|
border-bottom: 1px solid #efefef;
|
|
.avatar2{
|
|
width: 30px;
|
|
height: 30px;
|
|
background-color: #000;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
}
|
|
.name{
|
|
font-size: 13px;
|
|
flex: 1;
|
|
}
|
|
.comment-num{
|
|
padding: 2px 8px;
|
|
border-radius: 20px;
|
|
background-color: #efefef;
|
|
margin-right: 8px;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
.btn-wrapper{
|
|
width: 92vw;
|
|
height: 40px;
|
|
padding: 10px 4vw;
|
|
position: fixed;
|
|
bottom: 0px;
|
|
left: 0;
|
|
background: #FFF;
|
|
border-top: 1px solid #efefef;
|
|
.join-btn{
|
|
width: 92vw;
|
|
height: 40px;
|
|
border-radius: 30px;
|
|
color: #f00;
|
|
border: 1px solid #f00;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
.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>
|
|
|