commentContent.vue 3.7 KB
<template>
  <view class="content">
      <view class="title">
          <image class="photo" :src="image"></image>
          <view class="name">{{nickname}}</view>
      </view>
      <view class="contentBox">
          <view class="comment" :style="{'margin-left:246rpx;': user_id==item.usera_id}" v-for="(item,index) in meslist" :key="index">
              <span>{{item.des_content}}</span>
              <view class="time">{{item.createtime}}</view>
          </view>
         
          
      </view>
      <view class="inputBox">
          <input type="text" class="input" v-model="des_content">
          <view class="btn" @click="sendmsg">发送</view>
      </view>
  </view>
</template>

<script>
import app from "../../App.vue";
export default {
    data(){
        return{
            des_content:'',
            userb_id:'',
            page:1,
            size:10,
            meslist:[],
            image:'',
            nickname:'',
            user_id:''
        }
    },
    methods:{
        sendmsg(){
            var that = this
            var url = "mes/sendMes"
            var params = {
                token:uni.getStorageSync('token'),
                userb_id:that.userb_id,
                des_content:that.des_content
            }
            app.post(url,params,"post").then((res)=>{
                console.log(res)
                that.des_content=''
            }).catch((err)=>{
                console.log(err)
            })
        },
        getmeslist(){
            var that = this
            var url = "mes/getMesDetail"
            var params = {
                token:uni.getStorageSync('token'),
                page:that.page,
                size:that.size,
                userb_id:that.userb_id
            }
            app.post(url,params,"get").then((res)=>{
                console.log(res)
                that.meslist=res
            }).catch((err)=>{
                console.log(err)
            })
        }
        
    },
    onLoad(options){
        console.log(options)
        this.userb_id=options.userb_id
        this.user_id=options.user_id
        this.nickname=options.nickname
        this.image=options.head_image
        this.getmeslist()
    }
    
}
</script>

<style lang="less">
.content{
    background-color: #F9F9F9;
    .title{
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 16rpx 32rpx;
        .photo{
            width: 68rpx;
            height: 68rpx;
        }
        .name{
            font-size: 28rpx;
            margin-left: 18rpx;
        }
    }
    .contentBox{
        // height: 100vh;
        background-color: #F9F9F9;
        .right{
            margin-left:246rpx;
        }
        .comment{
            color:rgba(6,18,30,1);
            font-size: 24rpx;
            width:472rpx;
            
            background:rgba(255,255,255,1);
            padding: 22rpx 18rpx;
            box-sizing: border-box;
            margin: 56rpx 32rpx;
            
            .time{
                text-align: right;
                color: #8C9198;
                font-size: 22rpx;
            }
        }
    }
    .inputBox{
        display: flex;
        background-color: #fff;
        padding: 16rpx 32rpx;
        position: fixed;
        bottom: 0;
        .input{
            width:506rpx;
            height:68rpx;
            background:rgba(238,238,238,1);
            opacity:1;
            border-radius:8rpx;
        }
        .btn{
            width:150rpx;
            height:68rpx;
            background:rgba(129,195,191,1);
            opacity:1;
            border-radius:8rpx;
            color: #fff;
            text-align: center;
            line-height: 68rpx;
            font-size: 24rpx;
            margin-left: 30rpx;
        }
    }
}
</style>