hjsq_h5/src/views/jointGamingActivitie/index.vue

<template>
  <div class="jointGamingActivitie overflow-y-auto" v-if="!state.loading && !state.viploading">
    <div class="top">
      <div class="header">
        <img class="back" @click="$router.go(-1)" src="@/assets/images/png/jointGameing/back.png" alt="">
        <img class="title" src="@/assets/images/png/jointGameing/title.png" alt="">
      </div>
      <div class="btn flex-center-center">{{dateFormatMmDd(state.activeData.activityTime)}}正式上线 抢先预订</div>
    </div>
    <div class="bottom">
      <!-- 预览视频 -->
      <previewVideo/>
      <!-- 游戏截图 -->
      <gameScreenshot/>
      <!-- 单独购买 -->
      <interval/>
      <div class="line"></div>
      <!-- 组合购买 -->
      <groupBuy/>
      <div class="line"></div>
      <!-- 盲盒展示 -->
      <showBlindbox />
      <div class="line"></div>
      <!-- 拍摄花絮 -->
      <Gags />
      <div class="bottomTitle"></div>
    </div>
  </div>
  <Loading v-else/>

  <van-overlay :show="state.showPlayVideo" z-index="9999">
    <SvgIcon name="close" class="close" @click="state.showPlayVideo = false"></SvgIcon>
    <div class="wrapper blackBg">
      <SmallVideo
        v-if="state.showPlayVideo"
        class="videoBox"
        :sourceURL="state.sourceURL"
        :h265Url="state.h265Url"
        :key="state.sourceURL"
      />
    </div>
  </van-overlay>

  <RechargeBox ref="rechargeBoxRef" :is-open="state.isRecharge" @closePay="state.isRecharge = false" :color="'#F60175'"/>
</template>

<script lang="ts">
export default {
  name: 'jointGamingActivitie',
};
</script>
<script lang="ts" setup>
import { nextTick, reactive , provide, computed,ref} from 'vue';
import toClipboard from '@/utils/clipboard';
import { showToast } from 'vant';
import { dateFormatMmDd } from "@/utils/index"
import HomeApi from '@/service/home';
import MineApi from '@/service/mine';

import previewVideo from "./components/previewVideo.vue";
import gameScreenshot from "./components/gameScreenshot.vue"
import showBlindbox from "./components/showBlindbox.vue"
import Gags from "./components/Gags.vue"
import groupBuy from "./components/groupBuy.vue"
import interval from "./components/interval.vue"

const rechargeBoxRef = ref();

const state = reactive({
  activeData:<any>{},//活动信息详情
  loading:true,
  viploading:true,
  configList:<any>[],
  cardList:<any>[],
  showPlayVideo: false,
  sourceURL: '', // 播放视频链接
  h265Url: '' as string | null,
  isRecharge: false, // 充值界面
  dcInfo: <Types.Recharge.Daichong>{}, // 代充信息
  paycardList:<any>[],//会员卡信息
});

provide(
  'configList',computed(() => state.configList),
);

provide(
  'cardList',computed(() => state.cardList),
);

provide(
  'paycardList',computed(() => state.paycardList),
);

provide(
  'dcInfo',computed(() => state.dcInfo),
);

// 获取预售信息
const getPresaleData = async()=>{
  try {
    let res: any = await HomeApi.getConfigList();
    state.loading = false;
    state.activeData = res.activityDetail;
    state.configList = res.list;
    state.cardList = res.cardList;
    
  } catch (e) {
  }
}
getPresaleData()

// 查询会员卡列表
const getVipList = async () => {
  let res: any = await MineApi.queryVipProduct();
  state.viploading = false;
  state.dcInfo = res.daichong;//代充信息
  res.list.forEach((v:any)=>{
    state.paycardList.push(...v.list)
  })
};
getVipList()

const openPlayVideo = (sourceURL: string, h265Url?: string | null) => {
  state.sourceURL = sourceURL;
  state.h265Url = h265Url || '';
  state.showPlayVideo = true;
};

const openPayPop = (data: string) => {
  rechargeBoxRef.value.changeItem(data);
  state.isRecharge = true;
};

provide('openPlayVideo', openPlayVideo);
provide('openPayPop', openPayPop);
</script>

<style lang="scss" scoped>
.jointGamingActivitie {
    width: 100%;
    height: 100%;
    padding-bottom: 100px;
    box-sizing: border-box;
    background: #191919;
    .top{
      width: 100%;
      height: 816px;
      background: url("@/assets/images/png/jointGameing/personalbg.png") no-repeat;
      background-size: 100% 100%;
      position: relative;
      .header{
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 0 18px 0 16px;
        box-sizing: border-box;
        position: absolute;
        top: 18px;
        left: 0;
        .back{
          width: 24px;
          height: 24px;
        }
        .title{
          width: 170px;
          height: 45px;
        }
      }
      .btn{
        width: 310px;
        height: 52px;
        border-radius: 30px;
        background: #F60175;
        color: #1A1A1A;
        font-size: 18px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-weight: bold;
        bottom: 62px;
      }
    }
    .bottom{
      background: url("@/assets/images/png/jointGameing/bg.png") no-repeat;
      background-size: contain;
      background-position-y: 25%;
      .line{
        width: 391px;
        height: 1px;
        background: #343434;
        margin: 32px auto;
      }
      .bottomTitle{
        width: 391px;
        height: 22px;
        background: url("@/assets/images/png/jointGameing/bottomtitle.png") no-repeat;
        background-size: 100% 100%;
        margin: 32px auto;
      }
    }
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 30px;
    height: 100%;
    width: 100%;
    background: rgb(0,0,0);
    .videoBox {
        height: 100%;
        width: 100%;
    }
}
.close {
    height: 30px;
    width: 30px;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 10000;
}
</style>