小程序评论页面添加评论和回复、添加评论点赞

女爷i 2023-06-10 07:29 30阅读 0赞

<view class="container">
        <view class="title">全部评论</view>
        <view class="wrapper">
            <view class="nothing" s-if="{
       { commonList.length == 0 }}">
                <view>暂无数据，快来评论吧！</view>
            </view>
            <view class="commentList" s-for="{
       { commonList }}" data-index="{
       { index }}" s-else>
                <image class="avatar" src="{
       { item.avatarUrl }}"></image>
                <view class="content" data-nickname="{
       { item.nickName }}" data-text="{
       { item.keyInputext }}"  data-zid="{
       { item.zid }}" bindtap="reply">
                    <view class="name">{
       { item.nickName }}</view>
                    <view class="text">{
       { item.keyInputext }}
                        <view class="show_reply" s-if="{
       { item.reply != null }}">// <text class="name">{
       { item.reply.reply_nickname }}</text>: {
       { item.reply.reply_text }}</view>
                    </view>
                    <view class="time">10-22 13:44 - <text>回复Ta</text></view>
                    <view class="replyconent" s-if="{
       { item.replyuser.length != 0 }}">
                        <view class="reply_items" s-for="{
       { item.replyuser }}"><text class="name">{
       { item.username }}</text>: {
       { item.content }}</view>
                    </view>
                </view>
                <view class="like" bindtap='thumbsup'  data-zid="{
       { item.zid }}" data-checkeddz="{
       { item.checkeddz }}"  data-index="{
       { index }}">
                    <image class="likeimg" mode="widthFix" s-if="{
       { item.checkeddz }}" src="/images/ico_Praised@3x.png" style="width: 1.1rem;height:1.2rem"></image>
                    <image class="likeimg" mode="widthFix"  s-else src="/images/yangtaozan.png"></image>
                    <text class="getlikeNum">{
       { item.getlikeNum }}</text>
                </view>
            </view>
        </view>
        <view class="say">
            <input s-if="reply_input" class="say_view" bindinput="bindKeyInput" bindfocus="bindfocus" placeholder="回复{
       { reply_nickname }}:" focus="true" confirm-type="send"  bindconfirm="reply_sendsay" value="{
       { keyInputext }}" bindblur="closeinput"/>
            <input s-else class="say_view" bindinput="bindKeyInput" bindfocus="bindfocus" placeholder="{
       { placeholdertext }}" confirm-type="send"  bindconfirm="sendsay" value="{
       { keyInputext }}"/>
        </view>
    </view>

Page({
        data: {
            keyInputext: "",
            placeholdertext: "发表神评秒论...",
            reply_nickname: "",
            reply_text: "",
            reply_input: false,
            reply_zid: "",
            aid: "001",
            commonList: [],
            storecommon: [],
            storeArr: [],
        },
        onLoad: function () {
            // 监听页面加载的生命周期函数
            this.resetcommon();
            this.resertthumbsup();
        },
        // 判断用户是否登录
        checklogin: function () {
            if(swan.getStorageSync('user').encryption_uid){
                return true
            }else{
                swan.showToast({ title: "请先登录",icon: 'none',duration: 1000,}) ;
            }
        },
        // 初始化评论
        resetcommon: function (){
            if(this.checklogin){
                var arr = this.data.commonList
                var storecommon = swan.getStorageSync('commonList') || [];      
                for( var i = 0; i<storecommon.length; i++ ){
                    if(storecommon[i].aid == this.data.aid ){
                        console.log(this.data.aid )
                        arr.push(storecommon[i])
                    }
                }
                this.setData({ commonList: arr, storecommon: storecommon});
                console.log(arr)
            }
        },
        bindfocus: function(e){
            if(e.currentTarget.dataset.type == 1){
                this.setData({placeholdertext:"友善评论、理性发言、阳光心灵"});
            }
        },
        // 获取输入的内容
        bindKeyInput: function (e) {
            if(this.checklogin){
                this.setData({keyInputext: e.detail.value});
            }
        },
        // send
        sendsay: function(){
            if(this.checklogin){
                var arr = this.data.commonList;
                var storecommon = this.data.storecommon;
                var obj = {
                    aid: this.data.aid,
                    zid: this.data.aid + arr.length,
                    nickName: swan.getStorageSync('user').nickName,
                    avatarUrl: swan.getStorageSync('user').avatarUrl,
                    keyInputext: this.data.keyInputext,
                    checkeddz: false,
                    getlikeNum: 0,
                    reply: null,
                    replyuser: []
                }
                arr.unshift(obj);
                storecommon.unshift(obj);
                this.setData({
                    keyInputext: "",
                    placeholdertext: "发表神评秒论...",
                    commonList: arr
                });
                swan.showToast({ title: "评论成功",icon: 'none',duration: 1000,}) ;
                swan.setStorageSync('commonList', storecommon);
            }
        },
        // 初始化点赞状态
        resertthumbsup: function (){
            if(this.checklogin){
                var storeArr = swan.getStorageSync('answerthumbsup') || [];      //查看缓存中是否存在点赞
                var commonList = this.data.commonList;
                for( var y = 0; y< commonList.length; y++ ){                //俩数组是否有相同项
                    var indx = commonList[y].zid;
                    for( var i = 0; i < storeArr.length; i++ ){
                        if(storeArr[i] == indx){
                            commonList[y].checkeddz = true;
                            commonList[y].getlikeNum = 1
                        }
                    }
                }
                this.setData({
                    commonList: commonList,
                    storeArr: storeArr
                });
            }
        },
        // 点赞
        thumbsup: function(e){
            if(this.checklogin){                    //判断登录状态
                var checkeddz = e.currentTarget.dataset.checkeddz;
                if(checkeddz){                              //判断当前状态
                    this.havethumb(this.data.storeArr, e.currentTarget.dataset.zid);
                }else{
                    this.notthumb(this.data.storeArr, e.currentTarget.dataset.zid);
                }
                swan.setStorageSync('answerthumbsup', this.data.storeArr);  //更新缓存
                swan.setStorageSync('commonList', this.data.commonList);  //更新缓存
            }
        },
        notthumb: function(arr, zid){
            // 添加缓存id
            arr.push(zid);
            // 更改列表
            var commonList = this.data.commonList;
            for( var i = 0; i< commonList.length; i++ ){
                if(commonList[i].zid == zid){
                    commonList[i].checkeddz = true;
                    commonList[i].getlikeNum = 1;
                }
            }
            this.setData({
                commonList: commonList,
                storeArr: arr
            });
        },
        havethumb: function(arr, zid){
            // 删除缓存id
            var index = arr.indexOf(zid);
            arr.splice(index, 1);
            // 更改列表
            var commonList = this.data.commonList;
            for( var i = 0; i< commonList.length; i++ ){
                if(commonList[i].zid == zid){
                    commonList[i].checkeddz = false;
                    commonList[i].getlikeNum = 0
                }
            }
            this.setData({
                commonList: commonList,
                storeArr: arr
            });
        },
        // 回复
        reply: function(e){
            this.setData({
                reply_input: true,
                reply_nickname: e.currentTarget.dataset.nickname,
                reply_text: e.currentTarget.dataset.text,
                reply_zid: e.currentTarget.dataset.zid,
            });
        },
        closeinput: function(){
            this.setData({
                reply_input: false
            });
        },
        reply_sendsay: function(){
            var _this = this;
            var arr = this.data.commonList;
            var storecommon = this.data.storecommon;
            if(_this.checklogin){
                var obj = {
                    aid: _this.data.aid,
                    zid: _this.data.aid + arr.length,
                    nickName: swan.getStorageSync('user').nickName,
                    avatarUrl: swan.getStorageSync('user').avatarUrl,
                    keyInputext: _this.data.keyInputext,
                    checkeddz: false,
                    getlikeNum: 0,
                    reply: {
                        reply_nickname: _this.data.reply_nickname,
                        reply_text:  _this.data.reply_text,
                    },
                    replyuser: []
                }
                _this.addcommon(arr, storecommon , obj);
            }
        },
        addcommon: function(arr, storecommon, obj){
            for(var i =0; i < arr.length; i++){
                if(arr[i].zid == this.data.reply_zid){
                    var userobj = {
                        username: swan.getStorageSync('user').nickName,
                        content: this.data.keyInputext
                    }
                    arr[i].replyuser.unshift(userobj);
                }
            }
            arr.unshift(obj);
            this.setData({
                commonList: arr,
                reply_input: false,
                keyInputext: ""
            });
            
            swan.showToast({ title: "评论成功",icon: 'none',duration: 1000}) ;
            storecommon.unshift(obj);
            swan.setStorageSync('commonList', storecommon);
        }
    });

.title{
        width: 100%;
        color: #000;
        font-weight: bold;
        box-sizing: border-box;
        display: block;
        font-size: 1rem;
        line-height: 2.5rem;
        padding: 0 1rem;
        text-align: left;
        border-bottom: 1px solid #f5f5f5;
    }
    .wrapper{
        box-sizing: border-box;
        padding: 12px 12px 4rem 12px;
    }
    .commentList{
        display: flex;
        width: 100%;
        margin-bottom: 1.2rem;
    }
    .avatar{
        width: 2.5rem;
        height: 2.5rem;
        border-radius:2.5rem;
        margin-right: .7rem;
    }
    .name{
        font-size: .88rem;
        color: #7CABF7;
    }
    .time{
        font-size: .75rem;
        color: #999
    }
    .time text{
        color: #333;
    }
    .text{
        font-size: .9rem;
        margin: .4rem 0;
    }
    .content{
        flex: 1
    }
    .like{
        width: 3rem;
        height: 100%;
        text-align: right;
        display: flex;
        justify-content: center;
    }
    .likeimg{
        height: 1.2rem;
        width: 1.2rem;
        vertical-align: middle;
        margin-right: .3rem;
    }
    .say{
        width: 100%;
        box-sizing: border-box;
        padding: .7rem 0;
        border-top: 1px solid #f5f5f5;
        position: fixed;
        bottom: 0;
        left: 0;
        background: #fff;
        z-index: 2
    }
    .say_view{
        line-height: 2rem;
        color: #999;
        border: 1px solid #999;
        box-sizing: border-box;
        padding: 0 .5rem;
        width: 90%;
        margin:0 auto;
        border-radius: .3rem;
        font-size: .8rem;
        height: 2rem;
    }
    .show_reply{
        display: inline-block;
    }
    .replyconent{
        box-sizing: border-box;
        padding: .2rem .6rem;
        background: #f5f5f5;
        font-size: .8rem;
        margin-top: .4rem;
        border-radius: .4rem;
    }
    .replyconent .name{
        font-size: .8rem;
    }
    .reply_items{
        line-height: 1.5rem
    }
    .nothing{
        position: relative;
        top: 8rem;
        text-align: center
    }