android-cloud-H5/pages/welfare-community/index.vue

<template>
  <div class="bg101010">
    <van-skeleton :row="4" :loading="isLoading" avatar-shape="square" />
    <div v-for="item in list" :key="item.id" class="box-card">
      <div class="fcs">
        <img class="wh40 m15" :src="iconURL(item.gameFileKey)" alt="">
        <span class="txt1">{{item.gameName.length > 10 ? item.gameName.slice(0, 10) + '...' : item.gameName}}</span>
      </div>
      <span class="txt2">你有{{item.gameGiftBagList.length}}个礼包待领取</span>
      <div class="fncb mt6">
        <div class="ml15 fnc">
          <div v-for="(ele, index) in item.gameGiftBagList" :key="ele.id"><div v-if="index < 4" class="ibox"><img class="ibox" src="~/assets/image/activity/welfare-community/box.png" alt="" /></div></div>
          <div v-if="item.gameGiftBagList.length > 4" class="ibox"><img class="ibox" src="~/assets/image/activity/welfare-community/icon_more@2x.png" alt="" /></div>
        </div>
        <div class="view-btn mr10" @click="view(item.id, item.gameName)">立即查看</div>
      </div>
    </div>
  </div>
</template>

<script>
import { fileKeyToUrl } from '@/plugins/file-center.js';
export default {
  auth: false,
  data() {
    return {
      list: [],
      isLoading: false
    }
  },
  head: {
    title: '福利社区',
  },
  computed: {
    iconURL() {
      return (key) => {
        return fileKeyToUrl(key)
      }
    }
  },
  created() {
    this.token = this.$route.query.token;
    this.getAppGameGiftActivityList()
  },
  methods: {
    view(id, gameName) {
      this.$router.push({ path: '/welfare-community/list', query: { token: this.$route.query.token, id, user: this.$route.query.user, gameName } })
    },
    async getAppGameGiftActivityList() {
      try {
        this.isLoading = true;
        const res = await this.$axios.$post('/activity/game/giftActivity/getAppGameGiftActivityList', {}, { headers: { Authorization: this.token } });
        this.list = res.data;
      } finally {
        this.isLoading = false;
      }
    }
  }
}
</script>

<style scoped>
.fcs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.mr10 {
  margin-right: 10px;
}
.view-btn {
  width: 78px;
  height: 28px;
  background: #3B7FFF;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 28px;
  text-align: center;
}
.mt6 {
  margin-top: 6px;
}
.fncb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bg101010 {
  background: #101010;
  min-height: calc(100vh - 15px);
  padding-top: 15px;
}
.box-card {
  width: 345px;
  height: 136px;
  margin: 0 auto 15px;
  background: url('~/assets/image/activity/welfare-community/bj@2x.png');
  background-size: 100% 100%;
  border-radius: 15px;
  overflow: hidden;
}
.wh40 {
  width: 40px;
  height: 40px;
}
.m15 {
  margin: 15px;
}
.fnc {
  display: flex;
  align-items: center;
  justify-content: center;
}
.txt1 {
  font-size: 20px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 28px;
}
.txt2 {
  font-size: 14px;
  color: #CFD1D4;
  line-height: 20px;
  margin-left: 15px;
}
.ibox {
  width: 26px;
  height: 26px;
  background: rgba(216, 216, 216, 0.1);
  border-radius: 3px;
  margin-right: 6px;
}
.ibox img {
  width: 100%;
  height: 100%;
}
.ml15 {
  margin-left: 15px;
}
</style>