zh_order_food_xcx/pages-my/comment.vue

<template>
  <view class="flex-common-css bgc-f">
    <Nav :title="navTitle" titleColor="#333" bgckgroundBox='#fff'></Nav>
    <scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
      <view class="content-box box-border-box">
        <view class="item-box display-flex mb-26 box-border-box" v-for="(item,index) in listData" @click="toDet(item)">
          <image class="item-img mr-16 flex-shrink0" :src="item.head_img" mode="aspectFill"></image>
          <view class="item-right flex-justify-space box-border-box">
            <view class="common-view-css mr-46">
              <view class="mb-4 fc-3 fs-28">
                {{item.nickname}}
              </view>
              <view class="fs-24 fc-9 mb-16">
                {{item.created_date}}
              </view>
              <view class="fs-30 fc-3 msg-class text-overflow-ellipsis">
                {{item.msg}}
              </view>
            </view>
            <image class="right-img" :src="item.image[0]" mode="aspectFill"></image>
          </view>
        </view>
      </view>
      <view v-if="listData.length === 0" class="scroll-view-css">
        <EnBlank :customSrc='true'>
          <template v-slot:blankImg>
            <image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
          </template>
        </EnBlank>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import EnBlank from "@/components/en-utils/en-blank/en-blank";
  import {
    messageList
  } from "@/api/message.js"
  import {
    alumnInfo,
  } from '@/api/alumni.js';
  import tools from "@/service/tools";
  export default {
    components: {
      EnBlank
    },
    data() {
      return {
        navTitle: '',
        listData: [],
        page: 1,
        total: 0,
        dataType: ''
      };
    },
    onLoad(data) {
      if (data) {
        this.dataType = data.type
        this.messageList(data.type)
        if (data.type == 1) {
          this.navTitle = '系统消息'
        } else if (data.type == 2) {
          this.navTitle = '评论'
        } else {
          this.navTitle = '点赞'
        }
      }
    },
    mounted() {},
    methods: {
      toDet(item) {
        if (item.news_id > 0) {
          alumnInfo({
            news_id: item.news_id
          }).then((res) => {
            if (res.code === 1) {
              uni.navigateTo({
                url: "/pages-school/circle-info?news_id=" + item.news_id
              })
            } else {
              tools.error(res.msg)
              setTimeout(() => {
                this.page = 1
                this.listData = []
                this.messageList(this.dataType);
              }, 1500)
            }
          })
        }
      },
      scrolltolower() {
        if (this.listData.length < this.total) {
          this.page += 1;
          this.messageList(this.dataType);
        }
      },
      messageList(type) {
        messageList({
          type: type,
          page: this.page
        }).then((res) => {
          if (res.code == 1) {
            if (res.data.items.length > 0) {
              this.listData.push(...res.data.items)
              this.total = res.data.total;
            }
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .msg-class{
    max-width: 420rpx;
    word-wrap: break-word;
  }
  .content-box {
    padding: 24rpx 24rpx 0;
  }

  .item-img {
    width: 80rpx;
    height: 80rpx;
  }

  .item-right {
    width: 100%;
    padding: 0 0 24rpx 0;
    border-bottom: 2rpx solid #F9F9F9;
  }

  .right-img {
    width: 140rpx;
    height: 140rpx;
    border-radius: 12rpx;
  }
</style>