discounts-minapp/share/index.vue

<template>
  <view class="share">
    <zs-list mt="0" @load="loadShareMore" :status="shareStatus">
      <view class="share-item" v-for="item in shareList" :key="item.id">
        <view class="header">
          <view class="avatar">
            <u-avatar class="img" size="60" :src="item.imgPath"></u-avatar>
            <view class="nickname">
              {{ item.nickname }}
            </view>
          </view>
          <view class="date">
            {{ item.showTime }}
          </view>
        </view>
        <view class=content>
          {{ item.communityDetail }}
        </view>
        <view class="pics">
          <u-album :urls="item.urls" :multipleSize="232"></u-album>
        </view>
      </view>
    </zs-list>

  </view>
</template>

<script>
import { goodsSharePage } from '@/api/study'
export default {
  data() {
    return {
      shareStatus: 'more',
      shareList: [],
      shareQuery: {
        currentPage: 1,
        pageSize: 10,
        goodsId: 0,
        state: 2
      },
      loading: true,

    };
  },
  methods: {
    loadShareMore() {
      this.getshareList()
    },
    getshareList() {
      this.shareStatus = 'loading'
      goodsSharePage(this.shareQuery).then(res => {
        if (res.state == 'Success') {
          this.shareList = this.shareList.concat(res.content.records)
          if (this.shareList.length >= res.content.total) {
            this.shareStatus = 'noMore'
          } else {
            this.shareStatus = 'more'
            this.shareQuery.pageCurrent++
          }
        }
      })
    },
  },
  onLoad({ goodsId }) {
    this.shareQuery.goodsId = goodsId
    this.getshareList()
  }
};
</script>

<style lang="scss" scoped>
.share {
  border-top: 1px solid #F0F0F0;
  min-height: 100vh;
  background-color: #F9F9F9;

  .share-item {
    padding: 20rpx;
    margin-bottom: 20rpx;
    background: #FFFFFF;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;

      .avatar {
        display: flex;
        align-items: center;

        .nickname {
          font-size: 28rpx;
          color: #222222;
          margin-left: 16rpx;
        }
      }

      .date {
        font-size: 24rpx;
        color: #AAAAAA;
      }


    }
    .content {
      font-size: 28rpx;
      color: #222222;
      margin-bottom: 24rpx;
    }
    .pics{
      border-radius: 16rpx;
      overflow: hidden;
      // background-color: red;
    }
  }
  margin-bottom: 20rpx;
}
</style>