pay-video-applet-uniapp-24-8-22/pages/mine/sonPage/release/releaseList.vue

<template>
  <view class="publishList">
    <view class="item" v-for="(item, index) in list"
          @click="gotoDetail(item)"
          :key="index">
      <image :src="item.cover" style="width: 40%"></image>
      <view class="text">
        <view class="title">
          {{ item.title }}
        </view>
        <view class="createBy">
          <view class="">
            是否置顶：{{ item.createBy }}
          </view>
        </view>
        <view class="isPay">
          <view class="">
            是否付费：{{ item.isPay }}
          </view>
        </view>
        <view class="createTime">
          发布时间：{{ item.createTime }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "releaseList",
  props: ['list'],
  data() {
    return {
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      }
    };
  },
  onShow() {
    this.getData()
  },
  onReachBottom() {
    let allTotal = this.queryParams.pageNo * this.queryParams.pageSize
    if (allTotal < this.total) {
      //当前条数小于总条数 则增加请求数
      this.queryParams.pageSize += 10
      this.getData() //调用加载数据方法
    }
  },
  methods: {
    getData() {
      this.$api('infoGetMyReleasePage', {
        pageNo: this.queryParams.pageNo,
        pageSize: this.queryParams.pageSize,
      //   缺少id参数，需要补充
      }, res => {
        if (res.code == 200) {
          this.list = res.result.records
          this.total = res.result.total
        }
      })
    },
    gotoDetail(item) {
      // 根据字段区分跳转到不同页面
      if (1==1){
        // 跳转到动态详情页面
        this.$utils.navigateTo('/publish/postDetail?id=' + item.id)
      }else{
        // 跳转到演员详情页面
        this.$utils.navigateTo('/publish/actorDetail?id=' + item.id)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.publishList {
  width: 90%;

  .item {
    height: 200rpx;
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    border-radius: 10rpx;
    color: #777;
    display: flex;
    font-size: 24rpx;
    margin: 30rpx 0;

    image {
      width: 50%;
      height: 100%;
    }

    .text {
      display: flex;
      flex-direction: column;
      padding: 16rpx;
      width: 50%;

      .title {
        font-size: 30rpx;
        font-weight: 600;
        color: #000;
      }

      .createBy {
        display: flex;
        margin-top: auto;
        margin-bottom: 10rpx;
        justify-content: space-between;

        & > view {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .isPay {
        display: flex;
        margin-top: auto;
        margin-bottom: 10rpx;
        color: #7395f4;
        justify-content: space-between;

        & > view {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>