mvpola2e5
/
gitProject1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

miniprogram

Browse Source
kongweiyu_branch
温雍敬 1 year ago
parent ee10fad031
commit 45fda71950
3 changed files with 341 additions and 60 deletions
Show Stats Download Patch File Download Diff File

186
src/miniprogram/pages/Comments/Comments.js
Unescape View File

@ -1,66 +1,140 @@
// pages/Comments/Comments.js
Page({
/**
* 页面的初始数据
*/
data: {
//评论数据
comment_list:[
{
comment_id:1, //评论id
comment_pr_id:1, //评论所属文章id
comment_user_name:'九月', //评论人姓名
comment_user_avatar: 'https://image.weilanwl.com/img/square-2.jpg', //评论人头像
comment_text:"做的不错嘛", //评论内容
comment_time:'2019年3月20日', //评论时间
reply_id: 0, //回复谁的评论，评论表全部默认为0
parent_id: 0, //评论所属哪个评论id下面的，评论表全部默认为0
reply_name:'' //回复评论人的昵称 评论表全部默认为''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
{
comment_id: 4,
comment_pr_id: 1,
comment_user_name: '九月',
comment_user_avatar: 'https://image.weilanwl.com/img/square-2.jpg',
comment_text: "可以可以",
comment_time: '2019年3月20日',
reply_id:0,
parent_id: 0,
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
{
comment_id: 5,
comment_pr_id: 1,
comment_user_name: '九月',
comment_user_avatar: 'https://image.weilanwl.com/img/square-2.jpg',
comment_text: "学习学习",
comment_time: '2019年3月20日',
reply_id: 0,
parent_id: 0,
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
],
//回复数据
comment_list2: [
{
comment_id: 2,
comment_pr_id: 1,
comment_user_name: '九月时',
comment_user_avatar: 'https://image.weilanwl.com/img/square-2.jpg',
comment_text: "谢谢",
comment_time: '2019年3月20日',
reply_id: 1, //
parent_id:1, //
reply_name:'' //
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
{
comment_id: 3,
comment_pr_id: 1,
comment_user_name: '四月天',
comment_user_avatar: 'https://image.weilanwl.com/img/square-2.jpg',
comment_text: "我也想这么夸他",
comment_time: '2019年3月20日',
reply_id: 2,
parent_id: 1,
reply_name: ''
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
{
comment_id: 6,
comment_pr_id: 1,
comment_user_name: '九月时',
comment_user_avatar: 'https://image.weilanwl.com/img/square-2.jpg',
comment_text: "你也可以跟我学学",
comment_time: '2019年3月20日',
reply_id: 2,
parent_id: 1,
reply_name: '九月'
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
{
comment_id: 7,
comment_pr_id: 1,
comment_user_name: '九月',
comment_user_avatar: 'https://image.weilanwl.com/img/square-2.jpg',
comment_text: "不用谢，做的真是不错",
comment_time: '2019年3月20日',
reply_id: 2,
parent_id: 1,
reply_name: '九月时'
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
{
comment_id: 8,
comment_pr_id: 1,
comment_user_name: '九月时',
comment_user_avatar: 'https://image.weilanwl.com/img/square-2.jpg',
comment_text: "你们也太会拍马屁了",
comment_time: '2019年3月20日',
reply_id: 2,
parent_id: 1,
reply_name: '四月天'
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
{
comment_id: 9,
comment_pr_id: 1,
comment_user_name: '九月时',
comment_user_avatar: 'https://image.weilanwl.com/img/square-2.jpg',
comment_text: "那就跟我好好学",
comment_time: '2019年3月20日',
reply_id: 5,
parent_id: 5,
reply_name: ''
},
{
comment_id: 10,
comment_pr_id: 1,
comment_user_name: '九月',
comment_user_avatar: 'https://image.weilanwl.com/img/square-2.jpg',
comment_text: "是的，你是大佬啊",
comment_time: '2019年3月20日',
reply_id: 9,
parent_id: 5,
reply_name: '九月时',
},
],
//下面的方法可以绑定在输入框的bindblur属性上
blur(e) {
const text = e.detail.value.trim();
if( text == ''){
this.setData({
now_reply: 0, //当前点击的评论或回复评论的id
now_reply_name:null, //当前点击的评论或回复评论的用户昵称
now_reply_type:0, //当前回复类型
now_parent_id:0, //当前点击的评论或回复评论的所属评论id
placeholder: "说点什么呢，万一火了呢", //占字符
focus:false //输入框获取焦点
})
}
})
},
//获取输入框内容
getCommentText(e) {
var val = e.detail.value;
this.setData({
comment_text: val
})
},
})

57
src/miniprogram/pages/Comments/Comments.wxml
Unescape View File

@ -1,3 +1,54 @@
<view>
这里是评论界面
</view>
<!-- 评论-回复-回复评论显示区域 -->
<view class="container">
<!-- 总共评论数 -->
<view class="total">共{{comment_list.length + comment_list2.length}}条评论</view>
<!-- END -->
<!-- 评论框 -->
<input confirm-type="send" class="container_inp" value="{{value}}" placeholder="{{ placeholder2 }}" placeholder-class="container_place" bindconfirm="bindconfirm"></input>
<!-- END -->
<!-- 用户评论回复显示区域 -->
<view class="container-item" wx:for="{{comment_list}}" wx:for-item="list" wx:key="key">
<image class="item_img" src="{{list.comment_user_avatar}}"></image>
<view class="item_right">
<view class="right_name">{{list.comment_user_name}}</view>
<view class="right_content">
<text class="right_content_txt" bindtap='replyComment' data-type="1" data-name='{{list.comment_user_name}}' data-cid='{{list.comment_id}}' data-pid="{{list.parent_id}}">{{list.comment_text}}</text>
<text class="right_content_txt2">{{list.comment_time}}</text>
<!-- 回复评论 -->
<!-- 判断回复列表数据中的parent_id和评论列表数据的comment_id是否相等 相等就显示 不等就不显示 -->
<view class="reply" wx:for="{{comment_list2}}" wx:for-item="list2" wx:key="list2" wx:if="{{list2.parent_id == list.comment_id}}">
<image class="reply_img" src="{{list2.comment_user_avatar}}"></image>
<view class="reply_right">
<view class="right_name">{{list2.comment_user_name}}</view>
<text wx:if="{{list2.reply_name == ''}}" class="right_content_txt" bindtap='replyComment' data-type="2" data-name='{{list2.comment_user_name}}' data-cid='{{list2.comment_id}}' data-pid="{{list2.parent_id}}">{{list2.comment_text}}</text>
<text wx:if="{{list2.reply_name != ''}}" bindtap='replyComment' data-type="2" data-name='{{list2.comment_user_name}}' data-cid='{{list2.comment_id}}' data-pid="{{list2.parent_id}}" class="right_content_txt">回复 <text class="right_name">{{list2.reply_name}}：</text>{{list2.comment_text}}</text>
<text class="right_content_txt2">{{list2.comment_time}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- END -->
<!-- 结束 -->
<view class="end">
<text class="end_txt" space="nbsp">— THE END —</text>
</view>
<!-- END -->
</view>
<!-- END -->
<!-- 底部评论 -->
<view class="foot">
<view class="say">
<view class="flex">
<image class="say_img" src="/images/assemblyNumber/discoveryDetails/icon3.png"></image>
<input confirm-type="send" class="say_inp" placeholder="{{ placeholder }}" value="{{ comment_text }}" focus="{{ focus }}" bindblur="blur" bindconfirm="confirm"></input>
</view>
</view>
<image class="foot_img" src="/images/assemblyNumber/discoveryDetails/icon4.png"></image>
<text class="foot_num">210</text>
<image class="foot_img2" src="/images/assemblyNumber/discoveryDetails/icon5.png"></image>
<text class="foot_num">368</text>
</view>
<!-- END -->

158
src/miniprogram/pages/Comments/Comments.wxss
Unescape View File

@ -1 +1,157 @@
/* pages/Comments/Comments.wxss */
/* 评论-回复-回复评论显示区域 */
.container {
width: 718rpx;
margin-top: 39rpx;
padding-left: 32rpx;
}
.total {
font-size: 24rpx;
color: #999999;
margin-left: 1rpx;
}
.container_inp {
width: 661rpx;
height: 32rpx;
background-color: #F2F2F2;
border-radius: 8rpx;
padding: 17rpx 0rpx 15rpx 25rpx;
margin-top: 24rpx;
margin-bottom: 47rpx;
}
.container_place {
font-size: 24rpx;
color: #999999;
}
.container-item {
display: flex;
margin-bottom: 34rpx;
align-items: flex-start;
}
.item_img {
width: 64rpx;
height: 64rpx;
margin-right: 17rpx;
}
.item_right {
display: inline-block;
width: 636rpx;
border-bottom: 2rpx solid #E5E5E5;
padding-bottom: 40rpx;
}
.right_name {
font-size: 24rpx;
color: #999999;
}
.right_content {
width: 603rpx;
margin-top: 20rpx;
}
.right_content_txt {
font-size: 26rpx;
color: #333333;
}
.right_content_txt2 {
font-size: 24rpx;
color: #CCCCCC;
margin-left: 30rpx;
}
.reply {
display: flex;
margin-top: 32rpx;
align-items: flex-start;
}
.reply_img {
width: 40rpx;
height: 40rpx;
margin-right: 17rpx;
}
.reply_right {
display: inline-block;
width: 546rpx;
}
/* 结束 */
.end {
margin-top: 47rpx;
margin-bottom: 48rpx;
text-align: center;
}
.end_txt {
font-size: 24rpx;
color: #999999;
}
/* 底部评论 */
.foot {
width: 686rpx;
padding: 17rpx 32rpx;
background-color: #FFFFFF;
box-shadow: 0rpx -1rpx 4rpx 0rpx rgba(0, 0, 0, 0.08);
position: fixed;
bottom: 0;
left: 0;
}
.say {
display: inline-block;
width: 360rpx;
padding: 20rpx 0rpx 10rpx 24rpx;
background-color: #F2F2F2;
border-radius: 8rpx;
}
.flex {
display: flex;
align-items: center;
}
.say_img {
width: 24rpx;
height: 24rpx;
margin-right: 13rpx;
/* vertical-align: 10rpx; */
}
.say_inp {
display: inline-block;
width: 300rpx;
height: 33rpx;
}
.say_place {
font-size: 28rpx;
color: #333333;
}
.foot_img {
width: 45rpx;
height: 40rpx;
margin-left: 50rpx;
margin-right: 17rpx;
}
.foot_num {
font-size: 24rpx;
vertical-align: 10rpx;
}
.foot_img2 {
width: 40rpx;
height: 40rpx;
margin-left: 30rpx;
margin-right: 17rpx;
}
Write Preview
Loading…
Cancel
Save