小程序简单的评论系统

486 阅读2分钟

3.gif

如果您觉得有用,不妨点个赞,我们新手应该相互扶持。 4.gif

1.png

index.wxml

<view class="page">
  <view class="comments">
    <view class="allcom">
      全部评论
    </view>
    <!-- 用data-index 来传入下标 -->
    <view class="comment" wx:for="{{coms}}" wx:key="id" data-index= "{{index}}">
      <view class="c-left">
        <image src="{{item.hpic}}"></image>
      </view>
        <view class="c-right">
          <view class="c-right_top">{{item.call}}</view>
          <view class="c-right_bottom">
            {{item.comment}}
            <view class="change"  >
              <!-- 用wx:if=""来根据whether的值来判断点赞的颜色,bindtap绑定事件 -->
              <text class=".iconfont .icon-dianzan " 
                    wx:if="{{item.whether == 0}}" 
                    bindtap="light"
                    data-index="{{index}}"><text class="inc">{{item.num}}</text></text>
              <text class=".iconfont .icon-dianzan changed"
               wx:else
               bindtap="light"
               data-index="{{index}}"><text class="inc">{{item.num}}</text></text>
            </view>
            <veiw class="date">{{item.date}}</veiw>
          </view>
          
       </view>
    </view>
  </view>
  <view class="tail">
    <textarea  
    id="c"  
    placeholder="请输入您的想法" 
    class="in" 
    bindinput="commentsChange"
    value="{{com}}"
    cols="30" rows="10"></textarea>
    <button  id="c" class="submit"  bindtap="commentsubmit" form-type="submit" style="width:20vw;">
    发表
    </button>
  </view>
</view>

index.js

const app = getApp();
//可以连接到app.js中的数据
const {getDate} =require ('../../utils/date');
// 引入utils date.js中的函数

Page({
data: {
    "coms":[
        {
          "id":0,
          'whether':0,
          "hpic":'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20200507%2F611083a06f4b486186df0558bb7a5925.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630146060&t=d9d918cfcea58f28cedeca112b655526',
          "call":'Grandia',
          "comment":'宫本没吃到兵,你也补不到',
          "date":'01月10日15:21',
          "num":'0'
        }
    ],
    com:''
  
},
light:function(e){
    console.log(e);
    //接受传过来的下标
    let index = e.currentTarget.dataset.index;
    let message = this.data.coms;
    for(let i in message){
        if(i == index){
            let whetherif = false;
            if(message[i].whether ==  0){
                whetherif = true;
                message[i].whether =parseInt(message[i].whether) + 1;
                message[i].num =parseInt(message[i].num ) + 1;
            }else{
                whetherif = false;
                message[i].whether =parseInt(message[i].whether) - 1;
                message[i].num =parseInt(message[i].num) - 1;
            }
        }
    }
    // 逻辑关系后,重置数据
    this.setData({
        coms:message
    })
},
commentsChange(e){
    console.log(e,"--------");
    this.setData({
        com: e.detail.value
    })
    // 引入自己刚刚打入的评论。
},
commentsubmit: function(e) {
    let {com} = this.data;
    // console.log(com.trim());
    // trim()可以掐去开头以及结尾的空白,用来判断有没有真正的输入
    // 若没有输入 会弹出警示框,icon为图标 , duration为持续时间,2000毫秒
    if( com.trim() == ''){
        wx.showToast({
          title: '请输入内容',
          icon:'error',
          duration:2000
        });
        return 
    }
    const item={
        id:this.data.coms.length+1,
        whether:0,
        hpic:app.globalData.userinfo.avatar,
        call:app.globalData.userinfo.userName,
        //hpic 与 call 引用了app.js中的数据
        comment:this.data.com,
        date:getDate(),
        // 此处通过require 来引入了额untils中date.js中的getDate函数
        num:'0'
    };
    this.setData({
        coms:[
            ...this.data.coms,
            item
        ],
        com:''
    })
    //通过setData 加入数据。
}
})

index.wxss

/* 引入ali.wxss中的数据 */
@import "./ali.wxss";


page{
    background-color: #000;
}
.allcom{
  padding-left: 20rpx;
  padding-top: 20rpx;
}
.page{
  color: #ffffff;
}
.comment{
  display: flex;
}
.c-left{
  height:200rpx;
  width: 20vw;
}
.c-left image{
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;
  display: block;
  margin:   30rpx auto ;
  border: 0.1rpx solid grey;
}
.c-right{
  height:200rpx;
  width: 80vw;
}
.c-right_top,.c-right_bottom{
  padding: 0 0 20rpx 0;
  position: relative;
  
}
.change{
  position: absolute;
  right: 40rpx;
  top: 0rpx;
}
.changed{
  color:red
}
.inc{
  color: #b1b1b1;
}
.date{
  display: block;
  font-size: smaller;
  color: #69696a;
}
.tail{
    height: 10vh;
    width: 100vw;
    background-color: #fff;
    position: fixed;
    /* 固定定位 */
    bottom: 0rpx;
    color: #b1b1b1;
    display: flex;
    /* 用弹性布局让 输入框和按钮来在统一行 */
}
.in{
  padding-top: 30rpx;
  padding-left: 20rpx ;
  font-size: 30rpx;
}
.submit{
  font-size: 31rpx;
  font-weight: 400;
  box-sizing: content-box;
  /* 脱离padding与border */
  padding: 0;
  color: #69696a;
  padding-top: 20rpx;
}
.button-hover{
  background-color: #fff;
}

date.js

module.exports = {
    getDate(){
        const t =new Date();
        // 得符合01月01日01:01的形式 ,所以要用三元运算法来判断
        const month = t.getMonth() + 1 > 10 ? t.getMonth()+1 : "0" + (t.getMonth()+1);
        // getMonth函数的值为 0-11 所以得加1 
        const date = t.getDate() > 10 ? t.getDate() : "0" + t.getDate();
        const hour = t.getHours() >10 ? t.getHours() : "0" + t.getHours();
        const minute = t.getMinutes() >10 ? t.getMinutes() : "0" + t.getMinutes();
        return `${month}${date}${hour}:${minute}`
        // 返回函数值
    }
}

app.js

App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        traceUser: true,
      })
    }

    this.globalData = {
      // 在此默认 用户名,以及头像
      userinfo:{
        userName:'瓜子味的花生',
        avatar:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201509%2F29%2F20150929205801_uhvj2.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630587608&t=92c3030eb87bef3801cc3b5244cce53a'
      }
    }
  }
})

ali.wxss 在我上一篇文章中,就不给了。