video_mini/pagesA/player/ranking.vue

<template>
  <view class="pageFree">
    <view class="pageHeader">
      <view class="native" @click="pageBack">
        <!-- <image src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/page_back.png"></image> -->
        <image src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/page_back.png"></image>
      </view>
      <view class="headerText">短剧排行榜</view>
      <view class="texts">TOP前50部网络短剧～</view>
    </view>
    <view class="videoBox">
      <view class="videoList">
        <view class="videoItem"  @click="detail(item.id,0)" v-for="(item,index) in pageListData" :key="item.id">
          <view class="videoImg">
            <image v-if="index =='0'" mode="scaleToFill" class="iconRank" src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/first.png"></image>
            <image  v-if="index =='1'" mode="scaleToFill" class="iconRank" src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/second.png"></image>
            <image  v-if="index =='2'" mode="scaleToFill" class="iconRank" src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/third.png"></image>
            <image  v-if="index =='3'" mode="scaleToFill" class="iconRank" src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/fourth.png"></image>
            <image  v-if="index =='4'" mode="scaleToFill" class="iconRank" src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/fifth.png"></image>
            <image class="videoBanner" mode="scaleToFill" :src="item.img"></image>
          </view>
          <view class="content">
            <view class="videoHeader">
              <view class="videoName">{{item.name}}</view>
              <view class="isLove">
                <image src="https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/aixinRed.png"></image>
              </view>
            </view>
            <view class="videoText">{{item.story}}</view>
          </view>
        </view>
      </view>
    </view>
    <uni-load-more :status="status" :content-text="contentText" />
  </view>
</template>

<script >
export default {
  data(){
    return{
      keytext:'',
      pageData:{
        currentPage:1,
        page:1,
        pageSize:15,
      },
      contentText: {
        contentdown: '上拉加载更多',
        contentrefresh: '加载中',
        contentnomore: '没有数据了'
      },
      pageListData:[],
    }
  },
  mounted() {
    this.getListData();
  },

  onReachBottom() {
    if(this.pageData.currentPage>=this.pageData.page){
      this.getListData();
    }

  },
  methods:{
    pageBack(){
      uni.navigateBack();
    },
    getListData(){
      let that = this;
      that.$httpRequest({
        url:"/api/video/lists",
        data:{
          limit:this.pageData.pageSize,
          lx:'3'
        }
      }).then(res=>{
        if(this.pageData.page ==1){
          if(res.rows.length>0){
            this.pageListData = res.rows;
            this.currentPage = Math.ceil(res.total/this.pageData.pageSize);
          }else{
            this.contentText.contentdown='没有数据'
          }

        }else{
          this.pageListData =  this.pageListData.concat(res.rows);
        }
      })
    },
    detail(vid,mid){
      var fxpid=1
      if(uni.getStorageSync("userinfo")){
        fxpid=uni.getStorageSync("userinfo").id
        uni.navigateTo({
          url:'/pages/client/tuan/detail?vid='+vid+'&mid='+mid+'&fxpid='+fxpid
        })
      }else{

      }

    },
  }
}

</script>

<style scoped>

.pageHeader {
  height: 285rpx;
  width: 100%;
  background-image: url("https://wx.yaohe.hnjrdzkj.xyz/static/wechat/static/banners.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.native {
  padding-top: 100rpx;
  padding-left: 20rpx;
}
.native image{
  width: 40rpx;
  height: 40rpx;
}
.headerText{
  font-family: 'MyFont';
  font-size: 42rpx;
  padding-left: 55rpx;
  padding-top: 20rpx;
}
.texts{
  font-size: 24rpx;
  padding-left: 55rpx;
}
.videoBox{
  background-color: #ffffff;
  border-radius: 28rpx 28rpx 0 0;
  margin-top: -30rpx;
  padding: 20rpx;
}
.videoList{

}
.videoItem{
  display: flex;
  margin-bottom: 24rpx;
}
.content{
  flex: 1;
  padding-left: 20rpx;
  position: relative;
}
.videoImg{
  position: relative;
  height: 256rpx;
  width: 216rpx;
}
.iconRank{
  position: absolute;
  width: 58rpx;
  height: 68rpx;
  left: 10rpx;
}
.videoBanner{
  height: 256rpx;
  width: 216rpx;
  border-radius: 12rpx;
}
.videoHeader{
  display: flex;
}

.videoName{
  flex: 1;
  color: #333333;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 60rpx;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.isLove{
  width: 40rpx;
  height: 60rpx;
  text-align: right;
  line-height: 60rpx;
  text-align: center;
}
.isLove image{
  width: 32rpx;
  height: 32rpx;
  vertical-align: middle;
}
.videoText{
  color: #999999;
  line-height: 35rpx;
  font-size: 24rpx;

}


</style>