ZGZQBWG/game/src/views/ShopForVisitor.vue

<template>
  <div class="shop-view">
    <img
      class="banner"
      src="@/assets/images/redeem-banner.png"
      alt=""
      draggable="false"
    >
    <button
      class="return"
      @click="notifyQuit()"
    />
    <div class="main-wrap">
      <div
        v-if="prizeList && prizeList.length"
        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"
            :style="{
              color: prizeItem.name === '公益合伙人证书' ? 'transparent' : '',
            }"
          >
            剩余：{{ 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"
        class="prize-list"
      >
        <img
          class="no-data"
          src="@/assets/images/no-prize.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, notifyQuit } from '@/api.js'

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

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

if (store.state.loginStatus) {
  router.replace({
    name: 'ShopView'
  })
}

/**
 * 奖品列表
 */
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: 'LoginView',
  })
}

</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;
  }
  >.main-wrap{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(700 / 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;
    padding-top: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
    >div.prize-list{
      height: calc(674 / 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(14 / 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'));
      }
    }
  }
}
</style>