HorOwnerIndex 横版赛事首页

v1 开头的组件是新组件。

引入

import PressHorOwnerIndex from 'press-plus/press-hor-owner-index/press-hor-owner-index';

export default {
  components: {
    PressHorOwnerIndex,
  }
}

代码演示

基础用法

<PressHorOwnerIndex
  title="Press UI"
  :is-owner="isOwner"
  :owner-info="ownerInfo"
  :recommend-map="recommendMap"
  :my-match-map="myMatchMap"
  :rank-map="rankMap"
  :my-rank-info="myRankInfo"
  finished-text="没有更多了"
  @back="back"
  @clickOwnerRegister="clickOwnerRegister"
  @clickMyOwnerInfo="clickMyOwnerInfo"
  @clickMatch="clickMatch"
  @clickMatchButton="clickMatchButton"
  @clickRankItem="clickRankItem"
  @focus="focus"
  @update:loading="updateLoading"
  @loadMore="loadMore"
  @clickSidebar="clickSidebar"
  @changeTab="changeTab"
/>

export default {
  data() {
    return {
      recommendMap: {
        list: [],
        finished: false,
        loading: false,
        total: 999,
      },
      myMatchMap: {
         0: {
          loading: false,
          finished: false,
          showDivider: false,
          list: [],
          endList: [],
        },
        1: {
          loading: false,
          finished: false,
          showDivider: false,
          list: [],
          endList: [],
        },
      },
      rankMap: {
        list: [],
        finished: false,
        loading: false,
      },
      myRankInfo: [],
      ownerInfo: {},
      isOwner: true,
    };
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    loadMore(sidebarIndex, tabIndex) {
      if (sidebarIndex === 0) {
        this.loadMoreRecommend();
      }
      if (sidebarIndex === 1) {
        this.loadMoreMyMatch(tabIndex);
      }
      if (sidebarIndex === 2) {
        this.loadMoreRank();
      }
    },
    updateLoading(key, value) {
      this[key].loading = value;
    },
    clickOwnerRegister() {
      window.location.href = '';
    },
    loadMoreRank() {},
    loadMoreMyMatch() {},
    loadMoreRecommend() {},
    clickMyOwnerInfo() {},
    focus() {},
    clickMatchButton() {},
    clickMatch() {},
    clickSidebar() {},
    changeTab() {},
    clickRankItem() {},
  },
};

API

Props

参数	说明	类型	默认值
title	页面标题	string	-
is-owner	是否为主理人	boolean	false
owner-info	我的主理人信息	object	-
recommend-map	推荐赛事信息	object	-
my-match-map	我的赛事信息	object	-
divider-text	我的赛事分割线文案	string	以下为历史赛事
rank-map	榜单信息	object	-
my-rank-info	我的排名	object	-
rank-title	榜单标题	string	主理人周榜
rank-num-prefix	榜单参赛人数前缀	string	本周参赛人数：
rank-empty-tex	榜单空状态文案	string	暂无主理人榜单
immediate-check	是否在初始化时立即执行滚动位置检查	boolean	false
finished-text	加载完成后的提示文案	string	没有更多了
finished-style	已完成自定义样式	string	-
loading-style	加载中自定义样式	string	-
loading-size	加载中图标尺寸	string	20px
show-new-rank	是否显示新版排行版	boolean	false
my-follow	我关注的主理人，结构同 rankMap	object	-
friends-follow	好友关注的主理人，结构同 rankMap	object	-
cur-rank-tab	当前排行榜Tab	number	0
rank-tab-list	排行榜标签页列表	array	参考下方
show-owner-register-entry	是否显示成为主理人入口	boolean	false
show-empty-button	是否首页显示空状态按钮	boolean	false
owner-match-rank-headers	战队榜单表头信息	array	['排名', '战队名称', '队长', '本周战力值']
my-team-rank-info	战队榜单我的战队信息	object	-

Events

事件名	说明	回调参数
back	点击左上角返回图标	-
clickOwnerRegister	点击注册主理人	-
clickMyOwnerInfo	点击我的主理人信息	-
clickSidebar	切换侧边栏	sidebarItem, sidebarIndex, tabIndex
changeTab	切换横向Tab	tab
clickMatch	点击比赛	matchItem, matchIndex, sidebarIndex, tabIndex
clickMatchButton	点击比赛按钮，比如“详情”	matchItem, matchIndex, sidebarIndex, tabIndex
clickRankItem	点击排名项	rankItem, rankIndex
focus	关注其他用户	rankItem, rankIndex
update:loading	更新 loading	key, value
loadMore	加载更多	sidebarIndex, tabIndex
changeRankTab	切换排行榜Tab	tab
clickRankGames	点击排行榜主理人赛事链接	rankItem, rankIndex
clickMyTeamRankButton	点击战队榜单我的战队加入按钮	rankItem, rankIndex
goToMatchTeam	点击战队榜单查看/加入	rankItem, rankIndex
clickTeamRule	点击战队榜单规则	rankItem, rankIndex

Slot

名称	说明
empty	空状态

类型说明

rankTabList 默认值如下：

['主理人榜', '我关注的', '好友关注的']

详细类型：

// ownerInfo
type IOwnerInfo = {
  pic: string;
  name: string;
  lv: string;
}

// recommendMap
type IRecommendMap = {
  finished: boolean;
  loading: boolean;
  total: number;
  list: Array<{
    pic: string;
    name: string;
    joinEnd: string; // 报名结束时间
    distance: string; // 可为距离或省市
    tagList: Array<string>;
    awardList: Array<{
      type: string;
      name: string;
      img: string;
    }>;

    customTitle: number; // xx位好友已加入
    friends: Array<string>;
  }>
}

// myMatchMap
type IMyMatchMap = {
  0: {
    list: IMyMatchList,
    endList: IMyMatchList,
    finished: boolean;
    loading: boolean;
    showDivider: boolean;
  },
  1: {
    list: IMyMatchList,
    endList: IMyMatchList,
    finished: boolean;
    loading: boolean;
    showDivider: boolean;
  }
}

type IMyMatchList = Array<{
  pic: string;
  name: string;
  matchTime: string; // 比赛时间
  distance: string;
  tagList: Array<string>;

  isEnd: boolean; // 按钮上方文字为灰色
  isPending: boolean; // 按钮上方文字为亮黄色
  isPlaying: boolean; // 按钮上方文字为浅灰色（普通）
  matchStatusDesc: string; // 按钮顶部状态文案
  buttonText: string;
}>

// rankMap
type IRankMap = {
  finished: boolean;
  loading: boolean;
  list: Array<IRankItem>
}

// myRankInfo
type IMyRankInfo = IRankItem

type IRankItem = {
  pic: string;
  name: string;
  fan: string | number;
  lv: string | number;

  rank: number; // 排名
  isMine: boolean; // 是否为当前用户的
  isFocused: boolean; // 是否已经关注
  showButton: boolean; //是否显示按钮

  num: string | number; // 本月参赛人数
  diffNumStr?: string; // 距上榜还差xx人；距前1名还差xx人
  myRankStr?: string; // 我的排名描述，1/2/3/未上榜等

  canJoinGameNum?: number; // 几场比赛可参加
  joinedTeam?: boolean; // 是否已加入战队
  team_mem?: number; // 战队人数
  team_id?: number; // 战队ID
  team_name?: number; // 战队名称
  team_logo?: number; // 战队logo
  captain_nick?: number; // 战队队长名称
  captain_header?: number; // 战队队长头像
}

// myTeamRankInfo
type IMyTeamRankInfo = IRankItem
type IRankItem = {
  rank?:string | number //战队排名
  team_id?:string //战队ID
  team_logo?:string //战队logo
  team_name?:string //战队名称
  team_mem?:string | number  //战队人数
  captain_header?:string //战队队长头像
  captain_nick?:string //战队队长名字
  score?:string | number //战队周榜积分
}

常见问题

加载更多

如果设置 immediate-check 为 false，则需保证第1页高度大于页面高度，否则无法加载更多。