ZGZQBWG/game/src/views/ShopView.vue

<template>
  <div class="shop-view">
    <img
      class="banner"
      src="@/assets/images/redeem-banner.png"
      alt=""
      draggable="false"
    >
    <button
      class="return"
      @click="router.go(-1)"
    />
    <div class="my-bonus-point-title">
      我的积分
    </div>
    <div class="my-bonus-point-value">
      {{ store.state.score }}
    </div>
    <div class="main-wrap">
      <div class="tabbar">
        <button
          class="redeem"
          :class="{
            active: currentTabIdx === 0,
          }"
          @click="currentTabIdx = 0"
        >
          兑换
          <div
            class="bottom-line"
            :class="{
              active: currentTabIdx === 0,
            }"
          />
        </button>
        <button
          class="record"
          :class="{
            active: currentTabIdx === 1,
          }"
          @click="currentTabIdx = 1"
        >
          记录
          <div
            class="bottom-line"
            :class="{
              active: currentTabIdx === 1,
            }"
          />
        </button>
      </div>
      <div
        v-if="prizeList && prizeList.length && currentTabIdx === 0"
        ref="prizeListRef"
        class="prize-list"
        @scroll="onPrizeListScroll"
      >
        <article
          v-for="prizeItem in prizeList"
          :key="prizeItem.id"
          class="prize-item"
          :class="{
            disabled: prizeItem.stock === 0
          }"
          @click="onClickPrizeItem(prizeItem)"
        >
          <img
            class="thumb"
            :src="prizeItem.thumb"
            alt=""
            draggable="false"
          >
          <div class="title">
            {{ prizeItem.name }}
          </div>
          <div class="remaining">
            剩余：{{ prizeItem.stock }}
          </div>
          <div class="price">
            <span class="number">{{ prizeItem.score }}</span>
            <span class="not-number">积分</span>
          </div>
          <img
            v-show="prizeItem.isEnabled && prizeItem.stock > 0"
            class="icon-enabled"
            src="@/assets/images/icon-gift.png"
            alt=""
            draggable="false"
          >
          <img
            v-show="prizeItem.isEnabled && prizeItem.stock === 0"
            class="icon-no-stock"
            src="@/assets/images/no-stock.png"
            alt=""
            draggable="false"
          >
        </article>
      </div>
      <div
        v-if="prizeList?.length === 0 && currentTabIdx === 0"
        class="prize-list"
      >
        <img
          class="no-data"
          src="@/assets/images/no-prize.png"
          alt=""
          draggable="false"
        >
        <p class="no-data">
          礼物准备中
        </p>
      </div>
      <div
        v-if="recordList && recordList.length && currentTabIdx === 1"
        ref="recordListRef"
        class="record-list"
        @scroll="onRecordListScroll"
      >
        <div
          v-for="recordItem in recordList"
          :key="recordItem.id"
          class="record-item"
        >
          <div class="left">
            <div class="type">
              {{ recordItem.type }}
            </div>
            <div class="time">
              {{ recordItem.updateTime }}
            </div>
          </div>
          <div
            class="right"
            :class="{
              negative: recordItem.type === '奖品兑换',
            }"
          >
            {{ recordItem.type === '奖品兑换' ? '' : '+' }}{{ recordItem.score }}
          </div>
        </div>
      </div>
      <div
        v-if="recordList?.length === 0 && currentTabIdx === 1"
        class="record-list"
      >
        <img
          class="no-data"
          src="@/assets/images/no-list.png"
          alt=""
          draggable="false"
        >
        <p class="no-data">
          暂无记录
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import { getScore, getPrizeList, getBonusPointRecord } from '@/api.js'

const route = useRoute()
const router = useRouter()
const store = useStore()

const {
  windowSizeInCssForRef,
  windowSizeWhenDesignForRef,
} = useSizeAdapt(390, 752)

getScore().then((res) => {
  store.commit('setScore', res.total)
  store.commit('setIfScoreLimitReached', res.hasOver)
})

const currentTabIdx = ref(0)

/**
 * 奖品列表
 */
const prizeListRef = ref(null)
const prizeList = ref(null)
const isFetchingMorePrize = ref(false)
const haveGotAllPrize = ref(false)

function fetchMorePrizeData() {
  if (haveGotAllPrize.value) {
    return
  }
  if (isFetchingMorePrize.value) {
    return
  }
  isFetchingMorePrize.value = true
  getPrizeList(prizeList.value?.length / 10 + 1 || 0, 10).then((res) => {
    if (prizeList.value) {
      prizeList.value = prizeList.value.concat(res.records)
    } else {
      prizeList.value = res.records
    }
    console.log(prizeList.value.length, res.total)
    if (prizeList.value.length >= res.total) {
      haveGotAllPrize.value = true
    }
  }).finally(() => {
    isFetchingMorePrize.value = false
  })
}

fetchMorePrizeData()

function onPrizeListScroll(e) {
  console.log(prizeListRef.value.scrollHeight)
  console.log(prizeListRef.value.scrollTop + prizeListRef.value.clientHeight)
  if (Math.abs(prizeListRef.value.scrollTop + prizeListRef.value.clientHeight - prizeListRef.value.scrollHeight) < 10) {
    fetchMorePrizeData()
  }
}

function onClickPrizeItem(prizeItem) {
  router.push({
    name: 'RedeemForm',
    query: {
      prizeInfo: JSON.stringify(prizeItem),
    }
  })
}

const recordList = ref(null)
getBonusPointRecord().then((res) => {
  recordList.value = res.filter((item) => {
    return item.score !== 0 && item.score !== '0' && item.score !== '+0' && item.score !== '-0'
  })
})

</script>

<style lang="less" scoped>
.shop-view{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  >img.banner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  >button.return {
    position: absolute;
    top: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    left: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    width: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    height: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background-image: url(@/assets/images/icon-return.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  >.my-bonus-point-title{
    position: absolute;
    top: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    left: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    font-size: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    font-family: heiti;
    font-weight: 400;
    color: #FFFFFF;
    line-height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  >.my-bonus-point-value{
    position: absolute;
    top: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    left: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    font-size: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: 800;
    color: #FFFFFF;
    line-height: calc(47 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
  }
  >.main-wrap{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(598 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    background: #F6F6F6;
    border-radius: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0 0;
    >.tabbar{
      height: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      >button{
        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        color: #414141;
        line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        position: relative;
        >.bottom-line{
          position: absolute;
          top: 100%;
          left: 50%;
          transform: translate(-50%, 0);
          width: calc(33 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          background-image: url(@/assets/images/tab-item-bottom-line.png);
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
          display: none;
        }
      }
      >button.active{
        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: bold;
        color: #414141;
        line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        >.bottom-line{
          display: initial;
        }
      }
    }
    >div.prize-list{
      height: calc(513 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      overflow: auto;
      padding-left: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      position: relative;
      >article.prize-item{
        display: inline-block;
        width: calc(168 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        height: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        background: #FFFFFF;
        border-radius: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        padding: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        position: relative;
        margin-right: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        cursor: pointer;
        >img.thumb{
          width: 100%;
          height: calc(92 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          object-fit: cover;
        }
        >.title{
          margin-top: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: Source Han Sans SC, Source Han Sans SC;
          font-weight: 400;
          color: #414141;
          line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          overflow: hidden;
          white-space: pre;
          text-overflow: ellipsis;
        }
        >.remaining{
          margin-top: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-size: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: Source Han Sans SC, Source Han Sans SC;
          font-weight: 400;
          color: #414141;
          opacity: 0.5;
          line-height: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          overflow: hidden;
          white-space: pre;
          text-overflow: ellipsis;
        }
        >.price{
          margin-top: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          >.number{
            font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            font-family: heiti;
            font-weight: 800;
            color: #C5A16C;
            line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
          >.not-number{
            font-size: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: 400;
            color: #C5A16C;
            line-height: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            margin-left: 0.3em;
          }
        }
        >img.icon-enabled{
          position: absolute;
          right: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
        >img.icon-no-stock{
          position: absolute;
          right: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          bottom: calc(7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          width: calc(64 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          height: calc(64 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        }
      }
      >article.prize-item.disabled{
        pointer-events: none;
      }
      >img.no-data{
        position: absolute;
        left: 50%;
        top: 50%;
        top: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        transform: translate(-50%, 0);
      }
      >p.no-data{
        position: absolute;
        left: 50%;
        top: calc(265 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        transform: translate(-50%, 0);
        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        color: #AF9D85;
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
    >div.record-list{
      height: calc(515 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      overflow: auto;
      padding-left: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      padding-right: calc(26 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      position: relative;
      >.record-item{
        width: 100%;
        margin-bottom: calc(15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        display: flex;
        justify-content: space-between;
        align-items: center;
        >.left{
          >.type{
            font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: 400;
            color: #414141;
            line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          }
          >.time{
            margin-top: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            font-size: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: 400;
            color: #414141;
            line-height: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
            opacity: 0.5;
          }
        }
        >.right{
          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          font-family: heiti;
          font-weight: bold;
          color: #FFCC45;
          line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
          letter-spacing: 0.05em;
        }
        >.right.negative{
          color: #FF4040;
        }
      }
      >img.no-data{
        position: absolute;
        left: 50%;
        top: 50%;
        top: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        transform: translate(-50%, 0);
      }
      >p.no-data{
        position: absolute;
        left: 50%;
        top: calc(265 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        transform: translate(-50%, 0);
        font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        color: #AF9D85;
        line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
      }
    }
  }
}
</style>