![](https://i-blog.csdnimg.cn/blog_migrate/d69b7d8130927a1b3be1bc94cad49f26.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/5e2a4c9d265ab5a6993cfdf501c9fafc.png)
<view>
<view class="bg">
<image src="../static/images/bg.png"></image>
<view class="user_info">
<view class="user_name">{{userInfo.nickname}}</view>
<view class="user_img">
<image src="{{userInfo.avatar}}"></image>
</view>
</view>
</view>
<view class="moments">
<view class="firend_msg" wx:for="{{danceList}}">
<view class="firend_img">
<image src="{{item.avatar}}"></image>
</view>
<view class="firend_con">
<view class="firend_name">{{item.nickname}}</view>
<view class="firend_content">{{item.content}}</view>
<view class="firend_oneImg" wx:if="{{item.videofile != ''}}">
<video src="{{baseUrl+item.videofile}}"></video>
</view>
<view wx:else>
<view class="firend_oneImg" wx:if="{{item.images.length == 1}}">
<image src="{{baseUrl+item.images[0]}}" mode="widthFix"></image>
</view>
<view class="firend_manyImg" wx:else>
<image src="{{baseUrl+item}}" wx:for="{{item.images}}"></image>
</view>
</view>
<view class="firend_time">
<view class="add_time">{{item.createtime_text}}</view>
<view class="firend_fun">
<view class="firend_like" bindtap="bindlike" data-id="{{item.id}}" data-index="{{index}}">
<image src="{{item.is_zan == 0?'../static/images/xin.png':'../static/images/xinselect.png'}}"></image>点赞
</view>
<view class="firend_like" bindtap="bindcomment" data-id="{{item.id}}" data-index="{{index}}">
<image src="../static/images/pinglun.png"></image>评论
</view>
</view>
</view>
<!-- 评论 -->
<view class="firend_comment" wx:if="{{item.comment.length != 0}}">
<view class="firend_reply" wx:for="{{item.comment}}" data-id="{{item.from_id}}" data-circleId="{{item.dance_circle_id}}" data-name="{{item.from_nickname}}" data-type="{{item.from_type}}" bindtap="bindreplycomment">
<text class="reply_name" wx:if="{{item.type == 2}}">{{item.from_nickname}}</text>
<text class="reply_name" wx:if="{{item.type == 1}}">{{item.from_nickname}}:</text>
<text class="reply_con" wx:if="{{item.type == 2}}">回复</text>
<text class="reply_name" wx:if="{{item.type == 2}}">{{item.to_nickname}}:</text>
<text class="reply_con">{{item.content}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 乎起评论 -->
<view class="mark" hidden="{{mark}}" bindtap="bindmark" bindtouchstart="bindtouchstart"></view>
<view class="comment" hidden="{{hidden}}">
<view class="comment_input"><input bindinput="bindinput" cursor-spacing='10' focus='{{focus}}' type="text"
placeholder="{{placeholder}}" value="{{content}}" placeholder-style="font-size:28rpx;color:#999" /></view>
<view class="add_btn" bindtap="binddance">发布</view>
</view>
<view class="release" bindtap="bindrelease">发布</view>
<view class="toast" hidden="{{release}}">
<view class="add_video" bindtap="bindgopage" data-url="../DanceFirend/pages/addVideo/index">发布视频</view>
<view class="add_img" bindtap="bindgopage" data-url="../DanceFirend/pages/add/index">发布图片</view>
<view class="cancal" bindtap="bindcancal">取消</view>
</view>
</view>
/* pages/dance/index.wxss */
@import '../static/css/iconfont/iconfont.wxss';
@import '../static/css/base/base.wxss';
.bg {
width: 750rpx;
height: 320rpx;
background: #FFFFFF;
opacity: 1;
position: relative;
box-sizing: border-box;
}
.bg image {
width: 750rpx;
height: 320rpx;
display: block;
}
.user_info {
position: absolute;
right: 40rpx;
top: 260rpx;
display: flex;
align-items: flex-end;
}
.user_img {
width: 120rpx;
height: 120rpx;
margin-left: 20rpx;
}
.user_img image {
width: 100%;
height: 100%;
display: block;
}
.user_name {
font-size: 32rpx;
color: #999999;
margin-bottom: 8rpx;
}
.moments {
padding: 97rpx 40rpx;
}
.firend_msg {
display: flex;
margin-bottom: 40rpx;
}
.firend_img {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
margin-right: 15rpx;
flex-shrink: 0;
}
.firend_con {
flex: 1;
}
.firend_img image {
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
}
.firend_name {
font-size: 28rpx;
color: #000000;
margin-bottom: 10rpx;
}
.firend_content {
font-size: 28rpx;
color: #333333;
margin-bottom: 20rpx;
}
.firend_manyImg {
display: flex;
flex-wrap: wrap;
margin-bottom: 8rpx;
}
.firend_manyImg image {
width: 188rpx;
height: 188rpx;
background: #FFFFFF;
opacity: 1;
display: block;
margin-right: 6rpx;
margin-bottom: 6rpx;
}
.firend_manyImg image:nth-child(3n) {
margin-right: 0;
}
.firend_oneImg {
width: 288rpx;
margin-bottom: 15rpx;
}
.firend_oneImg video {
width: 252rpx;
height: 288rpx;
background: #FFFFFF;
border: 1rpx solid #707070;
opacity: 1;
}
.firend_oneImg image {
width: 100%;
display: block;
}
.firend_fun {
display: flex;
align-items: center;
}
.firend_like {
display: flex;
font-size: 24rpx;
color: #666666;
margin-right: 25rpx;
}
.firend_like:last-child {
margin-right: 0;
}
.firend_like image {
width: 35rpx;
height: 35rpx;
margin-right: 5rpx;
}
.firend_time {
display: flex;
align-items: center;
justify-content: space-between;
}
.add_time {
font-size: 24rpx;
color: #999999;
}
.firend_comment {
width: 575rpx;
background: #F7FCFF;
opacity: 1;
border-radius: 40rpx;
padding: 12rpx 30rpx;
box-sizing: border-box;
margin-top: 25rpx;
}
.firend_reply {
margin-bottom: 8rpx;
}
.reply_name {
font-size: 24rpx;
color: #289FE1;
}
.reply_con {
font-size: 24rpx;
color: #333333;
}
.release {
position: fixed;
right: 40rpx;
top: 884rpx;
width: 83rpx;
text-align: center;
line-height: 83rpx;
font-size: 28rpx;
color: #FFFFFF;
height: 83rpx;
background: #FEB701;
box-shadow: 0rpx 3rpx 6rpx #FEB701;
border-radius: 50%;
opacity: 1;
}
.mark {
position: fixed;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.15);
}
.comment {
display: flex;
align-items: center;
width: 750rpx;
height: 98rpx;
background: #FFFFFF;
opacity: 1;
position: fixed;
bottom: 0;
left: 0;
}
.add_btn {
width: 120rpx;
text-align: center;
height: 98rpx;
line-height: 98rpx;
font-size: 30rpx;
color: #23AEFF;
}
.comment_input {
margin-left: 32rpx;
width: 598rpx;
height: 64rpx;
display: flex;
align-items: center;
padding: 0 24rpx;
box-sizing: border-box;
background: #F7F7F7;
opacity: 1;
border-radius: 93rpx;
}
.comment_input input {
width: 100%;
}
.toast {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #f8f8f8;
border-radius: 40rpx 40rpx 0rpx 0rpx ;
}
.add_video {
width: 750rpx;
text-align: center;
line-height: 100rpx;
font-size: 28rpx;
color: #707070;
height: 100rpx;
background: #FFFFFF;
opacity: 1;
border-radius: 40rpx 40rpx 0rpx 0rpx ;
margin-bottom: 6rpx;
}
.add_img {
width: 750rpx;
text-align: center;
line-height: 100rpx;
font-size: 28rpx;
color: #707070;
height: 100rpx;
background: #FFFFFF;
opacity: 1;
margin-bottom: 6rpx;
}
.cancal {
width: 750rpx;
text-align: center;
line-height: 100rpx;
font-size: 28rpx;
color: #707070;
height: 100rpx;
background: #FFFFFF;
opacity: 1;
}
// pages/dance/index.js
const gopage = require('../config/config.js').bindgopage;
const app = getApp()
const $ = require('../config/config.js')
Page({
/**
* 页面的初始数据
*/
data: {
userInfo: {},
baseUrl: app.globalData.baseUrl,
hidden: true,
focus: false,
mark: true,
release: true,
page: 1,
isLoad: false,
danceList: [],//舞圈
content: '',//回复内容
dance_circle_id: '',//舞圈id
dance_circle_index: '',//舞圈index
placeholder: '请输入您的评论',
to_id: '',//被回复id
to_type: '',//被回复type
to_nickname: '',//被回复名字
commentReply: false,//评论还是回复
},
//点赞
bindlike(e) {
const that = this;
if (!wx.getStorageSync('token')) return $.toast('请先登录', false)
let index = e.currentTarget.dataset.index;
let data = {
id: e.currentTarget.dataset.id,
token: wx.getStorageSync('token')
}
$.Ajax('zanCircle', data, res => {
if (that.data.danceList[index].is_zan == 1) {
that.data.danceList[index].is_zan = 0
that.setData({
danceList: that.data.danceList
})
} else {
that.data.danceList[index].is_zan = 1
that.setData({
danceList: that.data.danceList
})
}
})
},
/* 发布 */
bindrelease() {
if (!wx.getStorageSync('token')) return $.toast('请先登录', false);
this.setData({
mark: false,
release: false
})
},
/* 取消 */
bindcancal(e) {
this.setData({
mark: true,
release: true
})
},
bindgopage(e) {
gopage(e);
this.setData({
mark: true,
release: true
})
},
bindtouchstart(e) {
this.setData({
hidden: true,
mark: true,
release: true,
focus: false
})
},
/* 评论 */
bindcomment(e) {
if (!wx.getStorageSync('token')) return $.toast('请先登录', false);
let id = e.currentTarget.dataset.id;
let index = e.currentTarget.dataset.index;
this.setData({
hidden: false,
mark: false,
focus: true,
dance_circle_id: id,
dance_circle_index: index,
})
},
//监听评论内容
bindinput(e) {
this.setData({
content: e.detail.value
})
},
//发布评论
binddance() {
const that = this;
if (that.data.commentReply) {
//回复评论
that.replycomment()
} else {
//评论
that.commentdance()
}
},
//评论
commentdance() {
const that = this;
let data = {
token: wx.getStorageSync('token'),
content: that.data.content,
dance_circle_id: that.data.dance_circle_id
}
$.Ajax('commentCircle', data, res => {
let obj = {
content: that.data.content,
createtime: 1624257325,
createtime_text: "2021-06-21 14:35",
dance_circle_id: that.data.dance_circle_id,
from_id: wx.getStorageSync('userInfo').user_id,
from_type: 1,
from_nickname: wx.getStorageSync('userInfo').nickname,
to_id: wx.getStorageSync('userInfo').user_id,
to_nickname: wx.getStorageSync('userInfo').nickname,
type: 1
}
that.data.danceList[that.data.dance_circle_index].comment.push(obj);
that.setData({
danceList: that.data.danceList,
hidden: true,
mark: true,
release: true,
focus: false,
dance_circle_id: '',
content: '',
placeholder: '请输入您的评论',
dance_circle_index: '',
})
})
},
//回复评论
replycomment() {
const that = this;
let data = {
token: wx.getStorageSync('token'),
content: that.data.content,
dance_circle_id: that.data.dance_circle_id,
to_id: that.data.to_id,
to_type: that.data.to_type
}
$.Ajax('replyCircle', data, res => {
let obj = {
content: that.data.content,
createtime: '',
createtime_text: "",
dance_circle_id: that.data.dance_circle_id,
from_id: wx.getStorageSync('userInfo').user_id,
from_type: 1,
from_nickname: wx.getStorageSync('userInfo').nickname,
to_id: that.data.to_id,
to_nickname: that.data.to_nickname,
type: 2
}
that.data.danceList.map(function (item, index) {
if (item.id == that.data.dance_circle_id) {
that.data.danceList[index].comment.push(obj);
}
})
that.setData({
danceList: that.data.danceList,
hidden: true,
mark: true,
release: true,
focus: false,
dance_circle_id: '',
content: '',
to_id: '',//被回复id
to_type: '',//被回复type
to_nickname: '',//被回复type
content: '',
placeholder: '请输入您的评论',
})
})
},
//回复评论
bindreplycomment(e) {
const that = this;
if (!wx.getStorageSync('token')) return $.toast('请先登录', false);
var id = e.currentTarget.dataset.id;
var circleId = e.currentTarget.dataset.circleid;
var type = e.currentTarget.dataset.type;
var name = e.currentTarget.dataset.name;
if (type == 1 && id == wx.getStorageSync('userInfo').user_id) return;
that.setData({
hidden: false,
mark: false,
focus: true,
dance_circle_id: circleId,
to_id: id,
to_type: type,
to_nickname: name,
placeholder: '回复:' + name,
commentReply: true
})
},
/* 点击遮罩层 */
bindmark() {
this.setData({
hidden: true,
mark: true,
release: true,
focus: false,
dance_circle_id: '',
dance_circle_index: '',
to_id: '',//被回复id
to_type: '',//被回复type
content: '',
placeholder: '请输入您的评论',
commentReply: false,
})
},
//舞圈列表
danceList() {
const that = this;
if (that.data.isLoad) return
that.setData({
isLoad: true
})
let data = {
page: that.data.page,
token: wx.getStorageSync('token')
}
$.Ajax('danceList', data, res => {
//隐藏loading 提示框
wx.hideLoading();
//隐藏导航条加载动画
wx.hideNavigationBarLoading();
//停止下拉刷新
wx.stopPullDownRefresh();
if (res.data.data.rows.length == 0) {
if (that.data.page == 1) {
that.setData({
isLoad: true,
noData: true
})
} else {
that.setData({
isLoad: true,
noData: false
})
}
} else {
if (res.data.data.rows.length < 10) {
that.data.danceList.push(...res.data.data.rows);
that.setData({
danceList: that.data.danceList,
isLoad: true,
noData: false
})
} else {
that.data.danceList.push(...res.data.data.rows);
that.setData({
danceList: that.data.danceList,
isLoad: false,
noData: false,
page: that.data.page + 1
})
}
}
})
},
//刷新
onRefresh() {
//在当前页面显示导航条加载动画
wx.showNavigationBarLoading();
//显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
wx.showLoading({
title: '刷新中...',
})
this.setData({
page: 1,
isLoad: false,
danceList: [],//舞圈
})
this.danceList();
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.danceList();
this.setData({
userInfo: wx.getStorageSync('userInfo')
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
//调用刷新时将执行的方法
this.onRefresh();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function (e) {
if (this.data.isLoad) return
this.danceList()
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})