Press Plus

# ActGoodsList 物品列表

# 引入

import PressActGoodsList from '@tencent/press-plus/press-act-goods-list/press-act-goods-list';

export default {
  components: {
    PressActGoodsList,
  }
}

# 代码演示

# 基础用法

<PressActGoodsList
  :m-list-is-loading.sync="dataMap.loading"
  :m-list-is-end="dataMap.finished"
  :m-goods-list="dataMap.list"
  @loadMore="loadMore"
  @gotoGoodDetail="gotoGoodDetail"
/>

export const getMockGoodsList = () => Array.from({ length: 10 }).map((_, index) => {
  let statusStyle = 'primary';
  let statusText = '去使用';
  if (index % 4 == 0) {
    statusStyle = 'disabled';
    statusText = '已过期';
  } else if (index % 4 == 1) {
    statusStyle = 'delivered';
    statusText = '已使用';
  } else if (index % 4 == 2) {
    statusStyle = '';
    statusText = '去使用';
  }

  return {
    picurl: 'https://game.gtimg.cn/images/user/cp/a20190402wifiTQ/sys.png',
    name: '游戏礼包名称名称',
    benefit_tag: 'tag',
    provider: '汉堡王',
    deadline: '2020.06.25',
    overdueTip: '今日到期',
    statusText,
    statusStyle,
  };
});


export default {
  data() {
    return {
      dataMap: {
        loading: false,
        finished: false,
        list: [],
      },
    }
  },
  mounted() {
    setTimeout(() => {
      this.dataMap.list = this.dataMap.list.concat(getMockGoodsList());
    }, 2000);
  },
  methods: {
    loadMore() {
      console.log('[loadMore]');

      setTimeout(() => {
        this.dataMap.list = this.dataMap.list.concat(getMockGoodsList());
        this.dataMap.loading = false;
        if (this.dataMap.list.length > 60) {
          this.dataMap.finished = true;
        }
      }, 2000);
    },
    gotoGoodDetail(goodsItem) {
      console.log('[gotoGoodDetail]', goodsItem);
    },
  },
}

# API

# Props

参数 说明 类型 默认值
m-goods-list 物品列表 array -
m-list-is-loading 是否正在加载中 boolean false
m-list-is-end 是否加载完成 boolean false
use-tip-class 是否使用 tip-comp 为前缀的类名 boolean false
hide-tip-style 是否隐藏 @TIP_STYLE_NAME 关键词编译时加的样式 boolean false

# Events

事件名 说明 参数
gotoGoodDetail 点击物品详情 goodsItem
update:mListIsLoading 更新加载状态 isLoading
loadMore 加载更多 -

# Inject

参数 说明 类型 默认值
globalHideTipStyle 是否隐藏关键词编译的样式，对应 hide-tip-style 属性 boolean false

# 类型说明

type IGoodsItem = {
  picurl?: string;
  name: string;
  benefit_tag?: string; // 很多游戏的样式是，直接跟在 name 后面
  provider: string;

  overdueTip?: string; // overdueTip 和 deadline 只会展示其中之一
  deadline?: string; 

  statusStyle: string; // 可选值包括 primary, disabled, delivered
  statusText: string; // 状态描述
}

type IMGoodsList = Array<IGoodsItem>

# 自定义样式

外链地址：
样式内容：
横屏

← ActGoodsTab →