上一节我们为大家实现了发表动态页面的实现，这一节为大家实现“动态详情的页面”

实现效果：

image.png

这时候我们是不是就会很庆幸自己当时封装了“dynamic-template”的模板呢，这时候我们直接拿过来用就行了；

<import src="../../../templates/dynamicTemplate/dynamic-template" />

<import src="../../../templates/commentTemplate/comment-template" />


<view class="innerContainer">
  <template is="dynamicTemplate" data="{{...dynamicDetailData}}"></template>

  <view class="commentHeader" hidden="{{commentList.length == 0}}">精彩评论</view>
  <block wx:for="{{commentList}}" wx:for-item="comment">
    <template is="commentTemplate" data="{{...comment}}"></template>
  </block>

  <view class="commentPostView">
    <view class="line1"></view>
    <view class="commentPostContainer">
      <input class="inputView" placeholder="输入评论内容" confirm-type="done" bindblur="bindTextAreaBlur" value="{{commentText}}"></input>
      <view catchtap="submitComment" class="postBtn">发送</view>
    </view>
  </view>


</view>

但是我们往下看 ，是不是我们还要封装一个评论列表的template呢，是的，没错 ，接下来我们继续封装

image.png

comment-template.wxml

<template name="commentTemplate">
  <view class="commentContainer">
     <view class="commentTopView">

      <image class="commentUserAvatar"  src="{{avatar}}" mode="aspectFill"></image>
      <view class="comment-userNick-postDate">
        <text class="commentUserNick" bindtap="sss">{{nick_name}}</text>
        <text class="postDate">{{postDate}}</text>
      </view>

    </view>
    <text class="commentContentText">{{text}}</text>
    <view class="bottomLine"></view>
  </view>
</template>

comment-template.wxss

.commentContainer{
  display: flex;
  flex-direction: column;
}


.commentTopView {
  display: flex;
  flex-direction: row;
}

.commentUserAvatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 35rpx;
  vertical-align: middle;
  background-color: lightgray;
}

.comment-userNick-postDate {
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.commentUserNick {
  font-size: 24rpx;
  color: #333;
}


.commentContentText {
  font-size: 24rpx;
  color: #555;
  margin-top: 10rpx;
  margin-left: 90rpx;
}  

dynamicDeatil.json

{
  "usingComponents": {},
  "navigationBarTitleText":"动态详情"
}

dynamicDeatil.wxml

<import src="../../../templates/dynamicTemplate/dynamic-template" />

<import src="../../../templates/commentTemplate/comment-template" />


<view class="innerContainer">
  <template is="dynamicTemplate" data="{{...dynamicDetailData}}"></template>

  <view class="commentHeader" hidden="{{commentList.length == 0}}">精彩评论</view>
  <block wx:for="{{commentList}}" wx:for-item="comment">
    <template is="commentTemplate" data="{{...comment}}"></template>
  </block>

  <view class="commentPostView">
    <view class="line1"></view>
    <view class="commentPostContainer">
      <input class="inputView" placeholder="输入评论内容" confirm-type="done" bindblur="bindTextAreaBlur" value="{{commentText}}"></input>
      <view catchtap="submitComment" class="postBtn">发送</view>
    </view>
  </view>


</view>

dynamicDeatil.wxss

/* pages/home/dynamicDeatil/dynamicDeatil.wxss */

@import '/templates/dynamicTemplate/dynamic-template.wxss';
@import '/templates/commentTemplate/comment-template.wxss';

page{
  height: 100%;
  width: 100%;
}


.innerContainer{
  margin: 0 30rpx 200rpx 30rpx;
  height: 100%;
}


.contentImg {
  margin-top: 20rpx;
  width: 690rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  background-color: lightgray;
}

.commentHeader{
  margin: 10rpx 0rpx 40rpx 0rpx;
}

.commentPostView{
  position: fixed;
  bottom: 0rpx;
  height: 100rpx;
  width: 780rpx;
  left: -30rpx;
}

.line1{
   height: 2rpx;
  background-color:#f0f0f0;
  margin:0rpx 0rpx 0rpx 0rpx;
}

.commentPostContainer{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.inputView{
  line-height: 100rpx;
  height: 100rpx;
  margin-left: 60rpx;
  font-size: 28rpx;
  width: 500rpx;

}

.postBtn{
  line-height: 100rpx;
  margin-right: 30rpx;
  font-size: 28rpx;
}

dynamicDeatil.js

// pages/home/dynamicDeatil/dynamicDeatil.js

var requestTool = require("../../../utils/request.js");
var utilTool = require("../../../utils/util.js");
const onfire = require("../../../utils/onfire.js");

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dynamicId:"",
    dynamicDetailData : {},
    commentList:{},
    commentText:"",
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.dynamicId);
    this.setData({
      dynamicId: options.dynamicId
    });

    this.getDynamicDetailData();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  getDynamicDetailData:function(){
    var that = this;
    var paraData = {
      dynamic_id: that.data.dynamicId
    };
  requestTool.getRequest('/dynamic/info', paraData, that.getDetailDataSuccess, that.getDetailDataFailed);

  },

  getDetailDataSuccess:function(data){
    console.log("请求成功");
    var detailData = {

    };

    detailData["_id"] = data._id;
    detailData["postDate"] = utilTool.formatTime(data.timestamp, 'Y/M/D h:m:s');
    detailData["user_id"] = data.user_id;
    detailData["url"] = data.url;
    detailData["text"] = data.text;
    detailData["up_count"] = data.up_count;
    detailData["comment_count"] = data.comment_count;
    detailData["is_up"] = data.is_up;
    detailData["avatar"] = data.avatar;
    detailData["nick_name"] = data.nick_name;
    detailData["isDetail"] = true;


    var commentListDatas = [];
    for (var idx in data.comment_list){
      var commentData = data.comment_list[idx];
      commentData["postDate"] = utilTool.formatTime(commentData.timestamp, 'Y/M/D h:m:s');
      commentListDatas.push(commentData);
    }


    this.setData({
      dynamicDetailData: detailData,
      commentList: commentListDatas,
    });


  },

  getDetailDataFailed:function(){
      console.log("获取数据失败");
  },

  bindTextAreaBlur: function (e) {
    console.log(e.detail.value);

    this.setData({
      commentText: e.detail.value
    })

  },

  submitComment:function(){
    if (!this.data.commentText){
      wx.showModal({
        title: '温馨提示',
        content: '请输入评论内容',
        showCancel:false,
      });
      return;
    }
    var that = this;
    var paraData = {
      dynamic_id: that.data.dynamicId,
      text: that.data.commentText,
    };
    requestTool.postRequest('/dynamic/comment', paraData, that.commentSuccess, that.commentFailed);



  },

  commentSuccess:function(data){
    console.log("评论成功");
    this.setData({
      commentText : "",
    });
    this.getDynamicDetailData();
    onfire.fire("reloadDynamicFunction");

  },

  commentFailed:function(){
    console.log("评论失败");
  },


})

完结：

至此项目已经告一段落了 ，完结撒花 ✿✿ヽ(°▽°)ノ✿

项目下载地址：
项目下载地址