一、前期准备
-
注册微信小程序账号
- 在微信公众平台上注册小程序账号，获取小程序的 AppID。
-
安装开发工具
- 下载并安装微信开发者工具，用于小程序的开发、调试和预览。
二、界面设计
-
首页
- 展示最新的表白内容列表，每条表白可以包括发布者昵称、表白内容、发布时间等信息。
- 设计简洁美观的界面风格，使用温馨的色彩和图标。
-
发布表白页面
- 提供输入框让用户输入表白内容和选择匿名与否。
- 可以设置一些表情图标供用户选择，增加趣味性。
-
详情页面
- 点击某条表白可以进入详情页面，展示完整的表白内容、发布者信息（如果非匿名）以及评论列表。
三、功能实现
-
数据存储
- 可以使用小程序的云开发功能，建立数据库来存储表白内容、发布者信息、发布时间等数据。
- 设置数据的权限，确保只有合法用户可以进行操作。
-
表白发布功能
- 用户在发布表白页面输入内容后，点击发布按钮，将数据提交到数据库。
- 如果选择匿名，存储时不记录发布者的真实身份信息。
-
表白列表展示
- 在首页通过查询数据库获取表白内容列表，并按照发布时间进行排序展示。
- 可以实现分页加载功能，提高性能。
-
详情页面功能
- 展示特定表白的详细内容和评论列表。
- 用户可以在该页面发表评论，评论数据也存储到数据库中。
-
搜索功能（可选）
- 允许用户通过关键词搜索表白内容，提高查找特定表白的效率。
四、测试与优化
-
功能测试
- 全面测试表白发布、列表展示、详情页面、评论等功能，确保没有漏洞。
-
性能测试
- 检查小程序的加载速度、响应时间等性能指标，进行优化。
-
用户体验优化
- 根据用户反馈和实际使用情况，不断优化界面设计和功能操作，提高用户体验。
代码框架：
代码例样：
index.wxml
html
<!--index.wxml-->
<view class='all-container'>
<view class="container" bindtouchmove="hiddenComment" >
<view class='nav-bar-container'style='background:#FFFFFF;z-index:9999'>
<view class='nav-bar'>
<view class='all {{select==1?"selected":""}}' bindtap="selected" data-type="1">最新</view>
<view class='follow {{select==2?"selected":""}}' bindtap="selected" data-type='2'>今日话题</view>
<view class='hot {{select==4?"selected":""}}' bindtap="selected" data-type='4'>最热</view>
</view>
</view>
<view class='message-tip' wx:if="{{newMessage}}" bindtap='openMessage'>
<view class='tip-content'>
<view>远方飘来{{newMessageNumber}}条新消息</view>
<view>
<image src='/image/qiqiu.png'></image>
</view>
</view>
</view>
<view class="container-wall">
<!-- 今日话题 -->
<view class='topic-container' wx:if="{{showTopic}}" bindtap='topicdetial' data-id='{{topic.id}}'>
<view class='topic'>
<view class='title'>
<view class='title-world'># 今日最热话题 #</view>
</view>
<view class='content'>
<text style='font-size:28rpx;color:#185abd;'>话题内容：</text>
</view>
<view class='content text-grey'>{{topic.content}}</view>
<view class='attachments'>
<view class="attachments-single-image" wx:if='{{topic.attachments.length==1}}'>
<image mode="aspectFill" class="image-item" wx:for="{{topic.attachments}}" wx:key="{{topic.attachments}}" src="{{item}}" id="{{item}}"id=""></image>
</view>
<view class='attachments-more-image' wx:if='{{topic.attachments.length>1}}'>
<image mode="aspectFill" class="image-item" wx:for="{{topic.attachments}}" wx:key="{{topic.attachments}}" src="{{item}}" id="{{item}}"></image>
</view>
</view>
<view class='footer'>
<view class='footer-praise' data-id="{{topic.id}}" bindtap='praiseTopic'>
<image src='/image/topic_praise.png'></image>
<view> {{topic.praise_number}}</view>
</view>
<view class='footer-visit'>
<image src='/image/topic_view.png'></image>
<view> {{topic.view_number}}</view>
</view>
<view bindtap='openTopic' data-id="{{topic.id}}" class='footer-comment'>
<image src='/image/topic_comment.png'></image>
<view> {{topic.comment_number}}</view>
</view>
</view>
</view>
</view>
<!-- 话题墙 -->
<view class="wall-item" wx:for="{{posts}}" wx:key="{{posts}}" wx:if="{{showTopic && !showposts}}">
<view class="item-container">
<!-- 头像 -->
<view class="item-image">
<image bindtap='previewImage' id="{{item.poster.avatar}}" src="{{item.poster.avatar}}" wx:if="{{item.private == 0}}"></image>
<image bindtap='previewImage' src="/image/boy-icon.png" wx:elif="{{item.private == 1 && item.poster.gender == 1}}"></image>
<image bindtap='previewImage' src="/image/girl-icon.png" wx:else></image>
</view>
<view class="item-content">
<!-- 昵称 -->
<view class="user-name">
<view wx:if="{{item.private == 0}}">
<view class='nickname'>{{item.poster.nickname}}</view>
</view>
<view wx:if="{{item.private == 1}}" class='nickname'>树洞</view>
</view>
<!-- 表白 -->
<view class='for-user' wx:if="{{item.topic != '无'}}">
<view style='color:#007acc;'># {{item.topic}} #</view>
</view>
<!-- 内容 -->
<view class="content" wx:if="{{item.content}}" style='color:#2c2c2c;'>{{item.content}}</view>
<view class="single-image" wx:if='{{item.attachments.length==1}}'>
<image mode="widthFix" class="image-item" wx:for="{{item.attachments}}" wx:key="{{item.attachments}}" src="{{item}}" bindtap='previewImage' id="{{item}}"></image>
</view>
<view class='more-image' wx:if='{{item.attachments.length>1}}'>
<image mode="aspectFill" class="image-item" wx:for="{{item.attachments}}" wx:key="{{item.attachments}}" wx:for-item="sitem" src="{{sitem}}" bindtap='previewMoreImage' data-obj="{{item.attachments}}" id="{{sitem}}"></image>
</view>
<view class='user-college' wx:if="{{item.show_college}}">
<view>{{item.college}}</view>
</view>
<!-- 发布时间 -->
<view class="post-time">
<!-- 时间 -->
<view class='time-and-delete'>
<view>{{item.created_at}}</view>
<view class='delete-post' id="{{item.id}}" wx:if="{{item.can_delete}}" bindtap='deletePost'>删除</view>
</view>
<view>
<view class='footer-comment'>
<!-- 未赞 -->
<image wx:if='{{!item.haszan}}'data-posteropenid="{{item.posteropenid}}" bindtap='zan' data-dbname='topics'data-index="{{index}}"data-obj_type='topic' data-id="{{item.id}}" data-iszan='false' style='margin-right:30rpx;padding:5rpx;' src='/image/topic_praise.png'></image>
<!-- 已赞,显示赞的图标，可取消赞 -->
<image wx:if='{{item.haszan}}'data-posteropenid="{{item.posteropenid}}" bindtap='zan'data-dbname='topics' data-index="{{index}}"data-obj_type='topic' data-id="{{item.id}}" data-iszan='true' style='margin-right:30rpx;padding:5rpx;' src='/image/color-love.png'></image>
<!-- 评论 -->
<image src='/image/topic_comment.png' data-target="Modal" data-type='normalcomment' data-refcommenter='' data-objid="{{item.id}}"data-obj_type='topic' data-index="{{index}}"data-dbname='topics'data-posteropenid="{{item.posteropenid}}" bindtap='showCommentInput'></image>
</view>
</view>
</view>
<view class="comment" wx:if="{{item.praises.length > 0 || item.comments.length > 0}}">
<view class="qipao"></view>
<view class="comment-detail">
<!-- 显示点赞信息 -->
<view class="praise-container" wx:if="{{item.praises.length > 0}}">
<view class='praise-content'>
<image class='praise-user praise-item' src='/image/make_praise.png'></image>
<view class='praise-item' wx:for="{{item.praises}}" wx:key="{{item.praises}}">
<view class='praise-item-sub'>
<!-- 点赞头像 -->
<view>
<image class='praise-user-avatar' src='{{item.avatar}}'></image>
</view>
<!-- 点赞名称 -->
<view class='praise-user-name'>
{{item.nickname}}
</view>
</view>
</view>
</view>
</view>
<!-- 评论列表 -->
<view class='line' wx:if="{{item.comments.length > 0 && item.praises.length > 0}}">
</view>
<view class='comment-user-wall' wx:if='{{item.comments.length > 0}}'>
<view class='comment-user-container' wx:for="{{item.comments}}" wx:key="{{item.comments}}" wx:for-item="sub">
<view class='comment-wall-item' catchtap="deleteComment" data-item="{{item}}" data-index='{{index}}'data-type='topics'>
<!-- 正常评论 -->
<view class='comment-user-container' wx:if="{{!sub.ref_comment.refCommenter}}">
<view catchtap='showCommentInput'data-posteropenid="{{item.posteropenid}}" data-dbname='topics' data-objid='{{sub.objId}}' data-obj_type='topic' data-target="Modal" data-refcommenter='{{sub.commenter.nickname}}' data-index='' data-type='refcomment' class="comment-user inline-item">
{{sub.commenter.nickname}}:
</view>
<view class='inline-item'>{{sub.content}}</view>
</view>
<!-- 带有回复的评论 -->
<view class='comment-user-container' wx:if="{{sub.ref_comment.refCommenter}}">
<view catchtap='showCommentInput'data-posteropenid="{{item.posteropenid}}" data-dbname='topics' data-objid='{{sub.objId}}'data-obj_type='topic' data-target="Modal" data-refcommenter='{{sub.commenter.nickname}}' data-index='' data-type='refcomment' class="comment-user inline-item">
{{sub.commenter.nickname}}
</view>
<view class="inline-item">回复</view>
<view catchtap='showCommentInput'data-posteropenid="{{item.posteropenid}}" data-dbname='topics' data-objid='{{sub.objId}}'data-obj_type='topic' data-target="Modal" data-refcommenter='{{sub.commenter.nickname}}' data-index='' data-type='refcomment' class="comment-user inline-item">
{{sub.ref_comment.refCommenter}}:
</view>
<view class='inline-item'>{{sub.content}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 表白墙列表 -->
<view class="wall-item" wx:for="{{posts}}" wx:key="{{posts}}" wx:if='{{!showTopic &&showposts}}'>
<view class="item-container" data-id='{{item.id}}'id='{{item.id}}' bindtap="postdetail">
<!-- 头像 -->
<view class="item-image">
<image bindtap='previewImage' id="{{item.poster.avatar}}" src="{{item.poster.avatar}}" wx:if="{{item.private == 0}}"></image>
<image bindtap='previewImage' src="/image/boy-icon.png" wx:elif="{{item.private == 1 && item.poster.gender == 1}}"></image>
<image bindtap='previewImage' src="/image/girl-icon.png" wx:else></image>
</view>
<view class="item-content">
<!-- 昵称 -->
<view class="user-name">
<view wx:if="{{item.private == 0}}">
<view class='nickname'>{{item.poster.nickname}}</view>
</view>
<view wx:if="{{item.private == 1}}" class='nickname'>树洞</view>
</view>
<!-- 表白 -->
<view class='for-user' wx:if="{{item.topic != '无'}}">
<view style='color:#007acc;'>表白@{{item.topic}}</view>
</view>
<!-- 内容 -->
<view class="content" wx:if="{{item.content}}" style='color:#2c2c2c;'>{{item.content}}</view>
<view class="single-image" wx:if='{{item.attachments.length==1}}'>
<image mode="widthFix" class="image-item" wx:for="{{item.attachments}}" wx:key="{{item.attachments}}" src="{{item}}" bindtap='previewImage' id="{{item}}"></image>
</view>
<view class='more-image' wx:if='{{item.attachments.length>1}}'>
<image mode="aspectFill" class="image-item" wx:for="{{item.attachments}}" wx:key="{{item.attachments}}" wx:for-item="sitem" src="{{sitem}}" bindtap='previewMoreImage' data-obj="{{item.attachments}}" id="{{sitem}}"></image>
</view>
<view class='user-college' wx:if="{{item.show_college}}">
<view>{{item.college}}</view>
</view>
<!-- 发布时间 -->
<view class="post-time">
<!-- 时间 -->
<view class='time-and-delete'>
<view>{{item.created_at}}</view>
<view class='delete-post' id="{{item.id}}" wx:if="{{item.can_delete}}" bindtap='deletePost'>删除</view>
</view>
<view>
<view class='footer-comment'>
<!-- 未赞 -->
<image wx:if='{{!item.haszan}}' bindtap='zan'data-posteropenid="{{item.posteropenid}}" data-dbname='posts' data-index="{{index}}"data-obj_type='posts' data-id="{{item.id}}" data-iszan='false' style='margin-right:30rpx;padding:5rpx;' src='/image/topic_praise.png'></image>
<!-- 已赞,显示赞的图标，可取消赞 -->
<image wx:if='{{item.haszan}}' bindtap='zan'data-posteropenid="{{item.posteropenid}}" data-dbname='posts' data-index="{{index}}" data-obj_type='posts' data-id="{{item.id}}" data-iszan='true' style='margin-right:30rpx;padding:5rpx;' src='/image/color-love.png'></image>
<!-- 评论 -->
<image src='/image/topic_comment.png' data-posteropenid="{{item.posteropenid}}"data-target="Modal" data-type='normalcomment'data-obj_type='posts' data-refcommenter='' data-objid="{{item.id}}" data-index="{{index}}" data-dbname='posts' bindtap='showCommentInput'></image>
</view>
</view>
</view>
<view class="comment" wx:if="{{item.praises.length > 0 || item.comments.length > 0}}">
<view class="qipao"></view>
<view class="comment-detail">
<!-- 显示点赞信息 -->
<view class="praise-container" wx:if="{{item.praises.length > 0}}">
<view class='praise-content'>
<image class='praise-user praise-item' src='/image/make_praise.png'></image>
<view class='praise-item' wx:for="{{item.praises}}" wx:key="{{item.praises}}">
<view class='praise-item-sub'>
<!-- 点赞头像 -->
<view>
<image class='praise-user-avatar' src='{{item.avatar}}'></image>
</view>
<!-- 点赞名称 -->
<view class='praise-user-name'>
{{item.nickname}}
</view>
</view>
</view>
</view>
</view>
<!-- 评论 -->
<view class='line' wx:if="{{item.comments.length > 0 && item.praises.length > 0}}">
</view>
<view class='comment-user-wall' wx:if='{{item.comments.length > 0}}'>
<view class='comment-user-container' wx:for="{{item.comments}}" wx:key="{{item.comments}}" wx:for-item="sub">
<view class='comment-wall-item'catchtap="deleteComment"data-item="{{item}}" data-index='{{index}}'data-type='posts'>
<!-- 正常评论 -->
<view class='comment-user-container' wx:if="{{!sub.ref_comment.refCommenter}}">
<view catchtap='showCommentInput'data-posteropenid="{{item.posteropenid}}" data-dbname='posts' data-objid='{{sub.objId}}'data-obj_type='posts' data-target="Modal" data-refcommenter='{{sub.commenter.nickname}}' data-index='' data-type='refcomment' class="comment-user inline-item">
{{sub.commenter.nickname}}:
</view>
<view class='inline-item'>{{sub.content}}</view>
</view>
<!-- 带有回复的评论 -->
<view class='comment-user-container' wx:if="{{sub.ref_comment.refCommenter}}">
<view catchtap='showCommentInput'data-posteropenid="{{item.posteropenid}}" data-dbname='posts' data-objid='{{sub.objId}}'data-obj_type='posts' data-target="Modal" data-refcommenter='{{sub.commenter.nickname}}' data-index='' data-type='refcomment' class="comment-user inline-item">
{{sub.commenter.nickname}}
</view>
<view class="inline-item">回复</view>
<view catchtap='showCommentInput'data-posteropenid="{{item.posteropenid}}" data-dbname='posts' data-objid='{{sub.objId}}'data-obj_type='posts' data-target="Modal" data-refcommenter='{{sub.commenter.nickname}}' data-index='' data-type='refcomment' class="comment-user inline-item">
{{sub.ref_comment.refCommenter}}:
</view>
<view class='inline-item'>{{sub.content}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<get-more-loading wx:if="{{showGeMoreLoadin}}"></get-more-loading>
<not-more wx:if="{{notDataTips && posts.length != 0}}"></not-more>
</view>
<!-- 发布表白墙的按钮 -->
<view class='post-container' wx:if='{{showpostbtn}}'>
<view class='wall'></view>
<view class='post'>
<image src='/image/post.png' data-page='/pages/home/post/post' bindtap='post'></image>
</view>
</view>
<!-- 发布话题的按钮 -->
<view class='post-container' wx:if='{{!showpostbtn}}'>
<view class='wall'></view>
<view class='post'>
<image src='/image/new-post.png' data-page='/pages/home/postTopic/postTopic' bindtap='post'></image>
</view>
</view>
</view>
<!-- 评论框 -->
<view class="cu-modal {{modalName=='Modal'?'show':''}}" wx:if="{{showCommentInput}}">
<view class="cu-dialog">
<view class="cu-bar bg-white justify-end">
<view class="content">{{commentInfo.title}}</view>
<view class="action" bindtap="hideModal">
<text class="cuIcon-close text-red"></text>
</view>
</view>
<view class="padding-xl">
<textarea wx:if="{{showCommentInput}}" class='bg-red0 shadow-warp text-left padding-sm' bindinput='getCommentContent' placeholder='{{commentInfo.placeholder}}' value='{{content}}'></textarea>
</view>
<view class="cu-bar bg-gradual-green">
<view class="action margin-0 flex-sub solid-left text-Abc" bindtap="postComment">{{commentInfo.btn}}</view>
</view>
</view>
</view>index.js
javascript
// pages/home/index/index.js
const app = getApp()
const config = require("../../../config.js");
Page({
/**
* 页面的初始数据
*/
data: {
showselect: false,
show_auth: false,
userInfo: {},
hasUserInfo: false,
school: '',
praiseBorder: '',
notPraiseBorder: '',
posts: [],
postType: 1,
baseImageUrl: app.globalData.imageUrl,
show: 0,
hidden: false,
showCommentInput: false,
commentContent: '',
commentObjId: '',
commentType: '',
refcommentId: '',
posteropenid: '',
filter: '',
pageSize: 10,
pageNumber: 1,
initPageNumber: 1,
showGeMoreLoadin: false,
currentTime: '',
notDataTips: false,
newMessage: false,
newMessageNumber: 0,
select: 1,
animationData: {},
commentValue: '',
showNormal: false,
showAudit: false,
topic: {
content: '',
attachments: '',
praise_number: '',
id: ''
},
commentInfo: {
title: '',
placeholder: '',
btn: ''
},
showpostbtn: true,
showposts: true,
showTopic: false,
showSelect: false,
showBegin: true,
showCancel: false,
showReport: false,
bindReport: false,
showSubmit: false,
showSearch: false,
tryAgant: false,
imageLeft: '',
imageRight: '',
postImageLeft: '',
PostImageRight: '',
rate: 0,
face: '',
conclusion: '',
canComment: true,
sharecomeIn: false,
shareId: '',
shareType: '',
param: app.globalData.param,
messagefunc: Object,
zanstatu: []
},
// showselect
showselect: function() {
this.setData({
showselect: true
})
},
// 创建新的消息盒子
message: function(data) {
// 评论、点赞人昵称
var nickname = data.nickname
// 评论、点赞人头像
var avatar = data.avatar
// 更新时间
var updatetime = app.getnowtime()
// 评论、点赞内容
var content = data.content
// 接收的用户openid
var messageuser = data.messageuser
// 当前帖子id
var objId = data.objId
// 帖子类型
var obj_type = data.obj_type
// 更新消息
const db = wx.cloud.database()
db.collection('message').add({
data: {
"from_user": {
"avatar": avatar,
"nickname": nickname
},
"created_at": updatetime,
"content": content,
"isread": false,
"messageuser": messageuser,
"objId": objId,
"obj_type": obj_type
},
success(res) {
// console.log('messageres',res)
},
fail: console.log
})
},
// 获取新的消息盒子提醒
newmessage: function() {
var that = this
const db = wx.cloud.database()
db.collection('message')
.orderBy('created_at', 'desc')
.where({
messageuser: app.globalData.userId
})
.get({
success(res) {
console.log('newmessage', res)
var data = res.data
// 未读新消息数,初始化为0
var newMessageNumber = 0
var list = []
for (var i = 0; i < data.length; i++) {
// 未读消息
if (!data[i].isread) {
newMessageNumber = newMessageNumber + 1
}
// 未读消息id
// list.push(data[i]._id)
}
// 判断是否有新消息
if (newMessageNumber > 0) {
that.setData({
newMessageNumber: newMessageNumber,
newMessage: true
})
}
}
})
},
// 进入消息页面
openMessage: function() {
console.log(app.globalData.userId)
var that = this
wx.cloud.callFunction({
name: 'Message',
data: {
id: app.globalData.userId
},
success: res => {
console.log,
wx.navigateTo({
url: '../../personal/message/message'
})
that.setData({
newMessageNumber: 0,
newMessage: false
})
},
fail: console.error
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(e) {
// 判断是否为发表话题跳转回来的
if (app.globalData.isposttopic) {
this.topics()
this.setData({
select: 2,
showTopic: true,
showposts: false
})
} else {
// this.getPost()
this.setData({
select: 1,
showTopic:false,
showposts:true
})
}
wx.showLoading({
title: '加载中...',
});
// this.getPost();
// 获取新消息提醒,每20秒刷新一次
// 刷新消息
this.setData({
messagefunc: setInterval(function() {
that.newmessage()
console.log('flash')
}, config.FLASHTIME)
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
console.log('onready')
app.getParam(res => {
let resData = res.data;
if (resData.error_code == 0) {
this.setData({
param: resData.data == 2 ? true : false
})
app.globalData.param = this.data.param;
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function(option) {
console.log('onshow')
// 刷新消息
var that = this
// // 判断是否为发表话题跳转回来的
// 判断是否为发表话题跳转回来的
if (app.globalData.isposttopic) {
this.topics()
this.setData({
select: 2,
showTopic: true,
showposts: false
})
} else{
this.getPost()
this.setData({
select: 1,
showTopic: false,
showposts: true
})
}
// 清除定时任务
clearInterval(this.data.messagefunc)
// 刷新消息
this.setData({
messagefunc: setInterval(function() {
that.newmessage()
console.log('flash')
}, config.FLASHTIME)
})
},
/**
* 显示评论输入框
*/
showCommentInput: function(e) {
// console.log('curdataset', e)
var objid = e.currentTarget.dataset.objid;
var index = e.currentTarget.dataset.index
var refCommenter = e.currentTarget.dataset.refcommenter
var commentType = e.currentTarget.dataset.type
var commentInfo
// 帖子类型
var obj_type = e.currentTarget.dataset.obj_type
// 根据不同的评论，显示不同评论框的提示
if (commentType == 'normalcomment') {
// 正常的评论
commentInfo = this.data.commentInfo
commentInfo.title = '请输入评论内容'
commentInfo.placeholder = '你对这个帖子有啥看法呢？'
commentInfo.btn = '发布评论'
} else if (commentType == 'refcomment') {
commentInfo = this.data.commentInfo
let title = '回复 @' + refCommenter
let placeholder = '你想回复 @' + refCommenter + ' 什么呢？'
let btn = '回复 @' + refCommenter
commentInfo.title = title
commentInfo.placeholder = placeholder
commentInfo.btn = btn
} else {
this.hideModal()
}
// 显示输入评论
// this.showModal()
this.setData({
commentInfo: commentInfo,
refCommenter: e.currentTarget.dataset.refcommenter,
modalName: e.currentTarget.dataset.target,
dbname: e.currentTarget.dataset.dbname,
showCommentInput: true,
objId: objid,
objIndex: index,
// 帖子类型
obj_type: obj_type,
posteropenid: e.currentTarget.dataset.posteropenid
});
},
// 隐藏评论输入框
hideModal: function() {
var commentInfo = {
title: '',
placeholder: '',
btn: ''
}
this.setData({
commentInfo: commentInfo,
commentContent: '',
dbname: '',
posteropenid: '',
modalName: null,
showCommentInput: false
})
},
/**
* 获取评论框的输入内容
*/
getCommentContent: function(event) {
let content = event.detail.value;
this.setData({
commentContent: ''
})
this.setData({
commentContent: content
})
},
/**
* 提交评论
*/
postComment: function(e) {
var that = this
wx.showLoading({
title: '发送中...',
});
// 帖子ID
let objId = this.data.objId;
let objIndex = this.data.objIndex
// 评论人
var nickname = app.globalData.userInfo.nickName
// 评论内容
let content = this.data.commentContent;
// 回复评论人
let refCommenter = this.data.refCommenter;
if (!refCommenter) {
refCommenter = ''
}
// 内容为空，中断评论
if (content == '') {
wx.showToast({
title: '请输入内容！',
})
wx.hideLoading()
return false
}
// 已有评论
let posts = this.data.posts
// 如果objIndex为空，则计算出objIndex
if (!objIndex) {
// console.log('objIndex', objIndex)
for (let i = 0; i < posts.length; i++) {
// 找到onjIndex,返回index
if (objId === posts[i].id) {
objIndex = i
continue;
}
}
}
// console.log('objIndex', objIndex)
let comments = posts[objIndex].comments
// 将当前评论加入到已有评论
var newcomment = {
"objId": objId,
"can_delete": false,
"ref_comment": {
"refCommenter": refCommenter
},
"commenter": {
"nickname": nickname
},
"content": content
}
comments.push(newcomment)
// 当前评论数
var newcomment_number = comments.length
// messagedata
var mesdata = {
nickname: nickname,
avatar: that.data.userInfo.avatarUrl,
content: '@' + nickname + ' 评论你：' + content,
messageuser: that.data.posteropenid,
objId: objId,
obj_type: that.data.obj_type
}
// 调用云函数，提交评论
const db = wx.cloud.database()
wx.cloud.callFunction({
name: 'FrofessComment',
data: {
id: objId,
dbname: that.data.dbname,
newcomment_number: newcomment_number,
comments: comments
},
success: res => {
// console.log('评论结果',res)
// 发送message
that.message(mesdata)
// 更新页面信息
that.setData({
posts: posts,
commentContent: '',
objId: '',
obj_type: '',
refcommenter: '',
modalName: null,
showCommentInput: false
})
wx.hideLoading()
},
fail: err => {
wx.showModal({
title: '加载失败...',
content: err,
})
}
})
},
// 删除评论
deleteComment: function(e) {
var that = this
// 帖子类型，话题、表白墙
var type = e.currentTarget.dataset.type
// 评论位置
var index = e.currentTarget.dataset.index
// 评论内容
var item = e.currentTarget.dataset.item
// 帖子ID
var id = item.id
var comments = item.comments
// 删除确认
wx.showModal({
title: '提示',
content: '确定删除这条评论吗？',
success(res) {
if (res.confirm) {
// 确定删除
comments.splice(index, 1)
wx.cloud.callFunction({
name: 'FrofessComment',
data: {
id: id,
dbname: type,
newcomment_number: comments.length,
comments: comments
},
success: function() {
if (type == 'posts'){
that.getPost()
that.setData({
select: 1,
showTopic: false,
showposts: true
})
}else if(type == 'topics'){
that.topics()
that.setData({
select: 2,
showTopic: true,
showposts: false
})
}
},
fail: console.log
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
},
// 赞、取消赞
zan: function(e) {
// iszan为true,代表已经点赞，可取消赞
// iszan为false,代表没有点赞，可以点赞
var iszan = e.currentTarget.dataset.iszan
// 当前内容的id
var id = e.currentTarget.dataset.id
// 当前赞信息
var index = e.currentTarget.dataset.index
var zan = this.data.posts[index].praises
var dbname = e.currentTarget.dataset.dbname
// 接收的用户openid
var posteropenid = e.currentTarget.dataset.posteropenid
// 帖子类型
var obj_type = e.currentTarget.dataset.obj_type
// 修改赞状态
this.changezan(id, zan, dbname, index, iszan, posteropenid, obj_type)
},
changezan: function(id, zan, dbname, index, iszan, posteropenid, obj_type) {
var that = this
var content
// iszan == true 已赞，可以取消赞
if (iszan === 'true') {
// console.log('zan1', zan)
var userInfo = wx.getStorageSync('userInfo')
var ownernickname = userInfo.nickName
// 删除已赞
for (let i = 0; i < zan.length; i++) {
if (ownernickname == zan[i].nickname) {
zan.splice(i, 1);
// console.log('zan1',zan)
}
}
// 更新点赞数
var newpraise_number = zan.length
// console.log(newpraise_number)
iszan = false
//messagedata
content = '@' + that.data.userInfo.nickName + ' 取消了赞!'
// console.log('zan2',zan)
} else {
// iszan == false 未赞，可以赞
var item = {
"id": id,
"nickname": that.data.userInfo.nickName,
"avatar": that.data.userInfo.avatarUrl
}
// 添加赞
zan.push(item)
// console.log('zan', zan)
// 更新点赞数
var newpraise_number = zan.length
// console.log(newpraise_number)
//messagedata
content = '@' + that.data.userInfo.nickName + ' 给你点赞了!'
}
// messagedata
var mesdata = {
nickname: that.data.userInfo.nickName,
avatar: that.data.userInfo.avatarUrl,
content: content,
messageuser: posteropenid,
objId: id,
obj_type: obj_type
}
// 调用云函数,点赞
wx.cloud.callFunction({
name: 'FrofessZan',
data: {
id: id,
dbname: dbname,
newpraise_number: newpraise_number,
zan: zan
},
success: res => {
// res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
// console.log('praise', res)
// 发送message
that.message(mesdata)
// 修改本地显示
var posts = that.data.posts
posts[index].praises = zan
posts[index].haszan = iszan
that.setData({
posts: posts
})
},
fail: err => {
wx.showModal({
title: '加载失败...',
content: err,
})
}
})
},
/**
* 获取具体类型的贴子
*/
selected(e) {
let objType = e.target.dataset.type;
let thisTopic = this.data.topic;
// 最新帖子
if (objType == 1 && thisTopic != null) {
// console.log('new')
this.setData({
showpostbtn: true,
showTopic: false,
showposts: true,
posts: []
});
this.getPost();
} else {
this.setData({
showTopic: false,
showposts: true
});
}
// 今日话题
if (objType == 2 && thisTopic != null) {
this.topics();
// console.log('topic')
this.setData({
showpostbtn: false,
showTopic: true,
showposts: false,
posts: []
});
this.setData({
showTopic: true,
showposts: true,
posts: []
});
} else {
this.setData({
showTopic: false
});
}
// 最热帖子
if (objType == 4 && thisTopic != null) {
this.gethotpost()
// console.log('hot')
this.setData({
showpostbtn: true,
showTopic: false,
showposts: true,
posts: []
});
} else {
this.setData({
showTopic: false
});
}
if (objType == 5) {
this.setData({
showSearch: true,
showTopic: false,
showposts: true
});
} else {
this.setData({
showSearch: false,
});
}
this.setData({
select: objType,
postType: objType,
posts: [],
filter: ''
})
this.setData({
pageNumber: this.data.initPageNumber
});
if (objType != 5) {
// this.getPost();
}
},
/**
** 获取今日话题
*/
topics: function() {
var that = this
this.setData({
posts: []
})
wx.showLoading({
title: '加载中...',
});
// 1. 获取数据库引用
const db = wx.cloud.database()
db.collection('topics')
.orderBy('praise_number', 'desc')
.orderBy('comment_number', 'desc')
.orderBy('updated_at', 'desc')
.get({
success(res) {
console.log('res', res)
let topic = that.data.topic
// 存在话题
if (res.data.length > 0) {
topic.content = res.data[0].content
topic.attachments = res.data[0].attachments
topic.praise_number = res.data[0].praise_number
topic.view_number = res.data[0].view_number
topic.comment_number = res.data[0].comment_number
topic.id = res.data[0]._id
} else {
// 没有话题
topic.content = '没有话题'
}
// 获取userInfo
var userInfo = wx.getStorageSync('userInfo')
// 获取自己的openid或昵称
var ownernickname = userInfo.nickName
var owneropenid = app.globalData.userId
let posts = that.data.posts;
if (res.errMsg == "collection.get:ok") {
const datalength = res.data.length
let item
for (var i = 0; i < datalength; i++) {
// console.log(i, res.data[i])
var data = res.data[i]
// 获取点赞列表
var pariselist = data.parise
var haszan = false
// 判断自己是否已点赞
if (pariselist.length > 0) {
for (var k = 0; k < pariselist.length; k++) {
let nickname = pariselist[k].nickname
// console.log('nick', nickname)
if (nickname === ownernickname) {
haszan = true
}
}
}
item = {
"posteropenid": data._openid,
"poster": data.poster,
"private": data.private,
"id": data._id,
"follow": "",
"topic": data.username,
"content": data.content,
"attachments": data.attachments,
"created_at": data.created_at,
"can_delete": "",
"praises": pariselist,
"comments": data.comment,
"haszan": haszan
}
posts.push(item)
}
that.setData({
topic: topic,
showTopic: true,
showposts: false,
userInfo: userInfo,
newMessageNumber: 0,
posts: posts,
showGeMoreLoadin: false
})
wx.hideLoading();
} else {
wx.showToast({
title: res.errMsg,
icon: 'none'
});
setTimeout(function() {
wx.hideLoading();
}, 700)
}
}
})
},
/**
* 获取最新贴子
*/
getPost: function(objType = null) {
this.setData({
posts: []
})
wx.showLoading({
title: '加载中...',
});
var that = this
// 读取数据
// 1. 获取数据库引用
const db = wx.cloud.database()
db.collection('posts')
.orderBy('created_at', 'desc')
.get({
success(res) {
// 获取userInfo
var userInfo = wx.getStorageSync('userInfo')
// console.log('nickanme', userInfo)
// 获取自己的openid或昵称
var ownernickname = userInfo.nickName
var owneropenid = app.globalData.userId
let posts = that.data.posts;
if (res.errMsg == "collection.get:ok") {
const datalength = res.data.length
let item
for (var i = 0; i < datalength; i++) {
var data = res.data[i]
// 获取点赞列表
var pariselist = data.parise
var haszan = false
// 判断自己是否已点赞
if (pariselist.length > 0) {
for (var k = 0; k < pariselist.length; k++) {
let nickname = pariselist[k].nickname
// console.log('nick', nickname)
if (nickname === ownernickname) {
haszan = true
continue;
}
}
}
// console.log('zan', haszan)
item = {
"posteropenid": data._openid,
"poster": data.poster,
"private": data.private,
"id": data._id,
"follow": "",
"topic": data.username,
"content": data.content,
"attachments": data.attachments,
"created_at": data.created_at,
"can_delete": "",
"praises": pariselist,
"comments": data.comment,
"haszan": haszan
}
posts.push(item)
}
that.setData({
userInfo: userInfo,
newMessageNumber: 0,
posts: posts,
showGeMoreLoadin: false
})
wx.hideLoading();
} else {
wx.showToast({
title: res.errMsg,
icon: 'none'
});
setTimeout(function() {
wx.hideLoading();
}, 700)
}
}
})
},
// 获取最热帖子
gethotpost: function() {
this.setData({
posts: []
})
wx.showLoading({
title: '加载中...',
});
var that = this
// 读取数据
// 1. 获取数据库引用
const db = wx.cloud.database()
db.collection('posts')
.orderBy('praise_number', 'desc')
.orderBy('comment_number', 'desc')
.get({
success(res) {
// 获取userInfo
var userInfo = wx.getStorageSync('userInfo')
// 获取自己的openid或昵称
var ownernickname = userInfo.nickName
var owneropenid = app.globalData.userId
let posts = that.data.posts;
if (res.errMsg == "collection.get:ok") {
const datalength = res.data.length
let item
for (var i = 0; i < datalength; i++) {
// console.log(i, res.data[i])
var data = res.data[i]
// 获取点赞列表
var pariselist = data.parise
var haszan = false
// 判断自己是否已点赞
if (pariselist.length > 0) {
for (var k = 0; k < pariselist.length; k++) {
let nickname = pariselist[k].nickname
// console.log('nick', nickname)
if (nickname === ownernickname) {
haszan = true
}
}
}
item = {
"posteropenid": data._openid,
"poster": data.poster,
"private": data.private,
"id": data._id,
"follow": "",
"topic": data.username,
"content": data.content,
"attachments": data.attachments,
"created_at": data.created_at,
"can_delete": "",
"praises": pariselist,
"comments": data.comment,
"haszan": haszan
}
posts.push(item)
}
that.setData({
userInfo: userInfo,
newMessageNumber: 0,
posts: posts,
showGeMoreLoadin: false
})
wx.hideLoading();
} else {
wx.showToast({
title: res.errMsg,
icon: 'none'
});
setTimeout(function() {
wx.hideLoading();
}, 700)
}
}
})
},
/**
* 分享
*/
onShareAppMessage: function(res) {
return {
title: 'hi，同学，有人跟你表白了',
path: '/pages/home/index/index',
imageUrl: 'http://image.kucaroom.com/share1.jpg',
success: function(res) {
// 转发成功
},
fail: function(res) {
// 转发失败
}
}
},
/**
* 上拉加载更多
*/
onReachBottom: function() {
this.setData({
showGeMoreLoadin: true
});
this.getPost();
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
this.setData({
pageNumber: this.data.initPageNumber,
posts: []
});
this.getPost();
},
/**
* 进入发表页面
*/
post: function(e) {
let page = e.currentTarget.dataset.page
console.log(e)
wx.navigateTo({
url: page
})
},
// 查看帖子详情
postdetail: function(e) {
// console.log(e)
// 文章Id
// var id = e.currentTarget.dataset.id
// wx.navigateTo({
// url: '../../home/post_detail/post_detail?id=' + id,
// })
},
/**
* 预览图片
*/
previewImage: function(event) {
let url = event.target.id;
wx.previewImage({
current: '',
urls: [url]
})
},
/**
* 预览图片
*/
previewMoreImage: function(event) {
let images = event.currentTarget.dataset.obj.map(item => {
return this.data.baseImageUrl + item;
});
let url = event.target.id;
wx.previewImage({
current: url,
urls: images
})
},
// 话题详情
topicdetial: function(e) {
var id = e.currentTarget.dataset.id
var view_number = this.data.topic.view_number + 1
// 更改view_number
wx.cloud.callFunction({
name:'ViewNumber',
data:{
id:id,
dbname:'topics',
view_number: view_number
},
success:res=>{
wx.navigateTo({
url: '../topic_detail/topic_detail?id=' + id,
})
},
fail:console.log
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
console.log('onhidden')
clearInterval(this.data.messagefunc)
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
console.log('onunload')
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})index.json
javascript
{
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark",
"usingComponents": {
"get-more-loading": "/components/get-more-loading/get-more-loading",
"not-more": "/components/not-more-tip/not-more-tip"
}
}index.wxss
css
page{
background-color: #F5F5F5;
display: flex;
flex-direction: column;
}
/**FF7256**/
.container{
width: 100%;
display: flex;
flex-direction: column;
}
.container .container-wall{
width: 100%;
display: flex;
flex-direction: column;
justify-content:space-around;
background: white;
margin-top: 75rpx;
}
.container-wall .wall-item{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
margin-top: 15rpx;
border-bottom-style:solid;
border-width:1rpx;
border-color: #F0F8FF;
}
.wall-item .item-container{
width: 95%;
display: flex;
flex-direction: row;
margin-bottom: 5rpx;
}
.item-container .item-image{
width: 13%;
}
.item-container .item-content{
width: 84%;
display: flex;
flex-direction: column;
}
.item-image image{
width:80rpx;
height:80rpx;
border-radius: 40rpx;
}
.item-content .user-name{
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: 35rpx;
margin-bottom: 8rpx;
margin-top: -5rpx;
}
.user-name .follow-icon{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.follow-icon .follow-world{
font-size: 25rpx;
color: darkgray;
}
.user-name .had-follow{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.had-follow .had-follow-world{
font-size: 25rpx;
color: #FF7F00;
}
.for-user{
color: darkgray;
font-size: 35rpx;
}
.item-content .content{
font-size: 35rpx;
margin-bottom: 10rpx;
margin-top: 1rpx;
}
.item-content .post-time{
font-weight: 100;
font-size: 25rpx;
color: darkgray;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 80rpx;
margin-bottom: 25rpx;
}
.post-time .time-and-delete{
display: flex;
flex-direction: row;
}
.time-and-delete .delete-post{
margin-left: 20rpx;
}
.user-college{
font-weight: 100;
font-size: 25rpx;
margin-bottom: -20rpx;
color: darkgray;
display: flex;
flex-direction: row;
}
.single-image image{
width: 400rpx;
}
.more-image{
display: flex;
flex-direction: row;
flex-wrap:wrap;
}
.more-image image{
width: 180rpx;
height: 180rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.post-time .comment-image{
width: 40prx;
}
.post-time .comment-container{
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20rpx;
height: 65rpx;
}
.comment-icon-container{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.comment-container .comment-icon{
height: 75rpx;
background: #424242;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
margin-right: 13rpx;
border-radius:7rpx;
position: absolute;
z-index: 10;
right: 85rpx;
}
.comment-icon image{
width: 50rpx;
height: 50rpx;
padding: 15rpx 23rpx;
}
.item-content .comment{
background: WhiteSmoke;
margin-bottom: 20rpx;
margin-top: -20rpx;
}
.comment .qipao{
width: 0;
height: 0;
border-right: 20rpx solid white;
border-bottom: 20rpx solid WhiteSmoke;
border-left: 20rpx solid white;
margin-top: -18rpx;
margin-left: 20rpx;
}
.comment .comment-detail{
margin: 15rpx 15rpx;
font-size: 30rpx;
display: flex;
flex-direction: column;
}
.praise-container{
display: flex;
flex-direction: row;
}
.praise-container .praise-content{
display: flex;
flex-direction: row;
flex-wrap:wrap;
}
.praise-container .praise-item{
display: flex;
flex-direction: row;
}
.praise-item .praise-item-sub{
width: 100%;
display: flex;
flex-direction: row;
}
.praise-container-with-border{
display: flex;
flex-direction: row;
flex-wrap:wrap;
}
.line{
margin-top: 5rpx;
margin-bottom: 10rpx;
border-top-style:solid;
border-width:1rpx;
border-color: #E8E8E8;
}
.praise-container-border{
display: flex;
flex-direction: row;
flex-wrap:wrap;
margin-bottom: 10rpx;
padding-bottom: 10rpx;
}
.praise-container .praise-item{
display: flex;
flex-direction: row;
margin-right: 10rpx;
margin-top: 5rpx;
}
.praise-item .praise-user-avatar{
width: 40rpx;
height: 40rpx;
margin-right: 5rpx;
border-radius:20rpx;
}
.praise-container .praise-user{
width: 42rpx;
height: 42rpx;
margin-right: 10rpx;
}
.comment-detail .comment-user{
color: #66CDAA;
}
.comment-wall-item{
width: 100%;
display: flex;
flex-direction: column;
}
.inline-item{
display: inline;
}
.comment-user-wall{
width: 100%;
display: flex;
flex-direction: column;
}
.comment-wall-item .comment-user-container{
display: inline;
}
.comment-user-container image{
width: 40rpx;
height: 40rpx;
margin-right: 5rpx;
border-radius:20rpx;
}
.comment-wall-item .comment-ref-user-container{
display: inline;
}
.comment-ref-user-container image{
width: 40rpx;
height: 40rpx;
margin-right: 5rpx;
border-radius:20rpx;
}
/**post css**/
.post-container{
position:fixed;
right:18rpx;
bottom:20rpx;
z-index:100;
width: 120prx;
height: 120prx;
}
.post-container .wall{
position: absolute;
z-index: 105;
width: 90rpx;
height: 90rpx;
border-radius: 45rpx;
background: white;
right: 10rpx;
bottom: 30rpx;
}
.post image{
width: 120rpx;
height: 120rpx;
position: relative;
z-index: 110;
}
/** nav-bar **/
.nav-bar-container{
width: 100%;
height: 70rpx;
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-around;
border-bottom-style:solid;
border-width:5rpx;
border-color: white;
background: white;
position: fixed;
}
.nav-bar-container .nav-bar{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 95%;
font-weight: 200;
font-size: 35rpx;
margin-top: 5rpx;
margin-bottom: 5rpx;
}
.nav-bar .selected{
color: #FF4500;
}
.comment-input-container{
position:fixed;
bottom: 0rpx;
z-index:100;
width: 100%;
height: 200prx;
background: WhiteSmoke;
display: flex;
flex-direction: row;
align-items: center;
padding-top: 10rpx;
}
.comment-input-container textarea{
width: 100%;
margin-left: 20rpx;
border-bottom-style:solid;
border-width:1rpx;
border-color: #0aecc3;
margin-right: 20rpx;
padding-bottom: 15rpx;
font: 30rpx;
font-weight: 200;
margin-bottom: 20rpx;
padding-top: 17rpx;
}
.comment-input-container .send-button{
width: 130rpx;
height: 70rpx;
font-size: 30rpx;
background: #0aecc3;
color: white;
margin-right: 20rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border-radius: 10rpx;
}
/** 授权按钮 **/
.auth-container{
position: fixed;
z-index: 300;
width: 100%;
height: 100%;
background: gray;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background:rgba(2,2,2,0.6);
}
.auth-container .auth-wall{
background: white;
width: 70%;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 15rpx;
}
.auth-wall .auth-tips{
padding-top: 40rpx;
padding-bottom: 40rpx;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
color: gray;
font-size: 30rpx;
}
.auth-tips image{
width: 120rpx;
height: 120rpx;
margin-bottom: 10rpx;
}
.auth-button{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: #43CD80;
width: 100%;
color: white;
font-size: 35rpx;
border-radius: 0rpx;
border-bottom-left-radius: 15rpx;
border-bottom-right-radius: 15rpx;
}
.auth-button .auth-image-container{
display: flex;
flex-direction: column;
}
.auth-button image{
width: 50rpx;
height: 50rpx;
margin-right: 10rpx;
}
.power_by{
color: #D3D3D3;
}
/** 话题样式 **/
.topic-container{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-top-style:solid;
border-bottom-style:solid;
border-width:20rpx;
border-color: #F5F5F5;
}
.topic-single-image image{
width: 180rpx;
height: 180rpx;
}
.topic{
width: 95%;
display: flex;
flex-direction: column;
}
.topic .title{
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.title .title-world{
padding-top: 10rpx;
padding-bottom: 10rpx;
padding-left: 35rpx;
padding-right: 35rpx;
margin-top: 20rpx;
font-size: 35rpx;
background-color: #F5F5F5;
color: #7A7A7A;
border-radius: 10rpx;
}
.attachments-single-image image{
width: 300rpx;
height: 200rpx;
}
.attachments .attachments-more-image{
display: flex;
flex-direction: row;
flex-wrap:wrap;
}
.attachments-more-image image{
width: 180rpx;
height: 180rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.topic .content{
margin-bottom: 15rpx;
margin-top: 15rpx;
}
.topic .footer{
width: 100%;
display: flex;
flex-direction: row;
justify-content:space-between;
padding-top: 10rpx;
font-size: 30rpx;
padding-bottom: 10rpx;
}
.footer .footer-praise{
display: flex;
flex-direction: row;
align-items: center;
}
.footer .footer-visit{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.footer .footer-comment{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.footer-praise image{
width: 40rpx;
height: 40rpx;
padding-right: 5rpx;
}
.footer-visit image{
width: 50rpx;
height: 50rpx;
padding-right: 5rpx;
}
.footer-comment image{
width: 50rpx;
height: 50rpx;
padding-right: 5rpx;
}
/** 搜索样式 **/
.search-container{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border-top-style:solid;
border-bottom-style:solid;
border-width:20rpx;
border-color: #F5F5F5;
}
.search-container .search{
width: 95%;
display: flex;
flex-direction: row;
margin-top: 15rpx;
margin-bottom: 15rpx;
}
.search .search-input{
background: #E6E6E6;
width:85%;
height: 75rpx;
font-weight: 200;
font-size: 30rpx;
text-align: center;
border-radius:15rpx 0 0 15rpx;
}
.search-image{
width: 15%;
background: #F5F5F5;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border-radius: 0 15rpx 15rpx 0;
}
.search-image image{
width: 40rpx;
height: 40rpx;
}
/** 消息盒子样式 **/
.message-tip{
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
height: 100rpx;
align-items: center;
background: white;
margin-top: 72rpx;
margin-bottom: -67rpx;
}
.message-tip .tip-content{
padding: 20rpx;
background: #575757;
color: white;
border-radius: 10rpx;
font-size: 30rpx;
display: flex;
flex-direction: row;
align-content: center;
justify-content: center;
}
.tip-content image{
width: 35rpx;
height: 35rpx;
}
.nickname{
color: #66CDAA;
font-weight: bold;
}截图展示：
