初始化导入 hjsq H5 项目代码
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
谢宇宁
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="gags">
|
||||
<div class="gagsTitle"></div>
|
||||
<div class="scrollBox" @touchstart.stop @touchmove.stop @touchend.stop>
|
||||
<div class="item"
|
||||
v-for="(item,index) in state.list"
|
||||
:key="index"
|
||||
@click="openPlayVideo(item.sourceURL, item.h265Url)"
|
||||
>
|
||||
<LazyImg class="img" :src="item.cover" :key="item.cover" />
|
||||
<img class="play" src="@/assets/images/png/jointGameing/play.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, inject, watchEffect, ComputedRef } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
list:<any>[],
|
||||
});
|
||||
|
||||
const openPlayVideo: any = inject('openPlayVideo');
|
||||
|
||||
const configList = inject('configList') as ComputedRef<any>;
|
||||
|
||||
watchEffect(() => {
|
||||
state.list = configList.value.filter((item:any) => {
|
||||
return item.type == 4;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.gags{
|
||||
.gagsTitle{
|
||||
width: 391px;
|
||||
height: 27px;
|
||||
margin:0 auto 19px;
|
||||
background: url("@/assets/images/png/jointGameing/gags.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.scrollBox{
|
||||
width: 100%;
|
||||
padding-left: 18px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
.item{
|
||||
flex: none;
|
||||
width: 122px;
|
||||
height: 216px;
|
||||
margin-right: 8px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.play{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="game">
|
||||
<div class="gameTitle"></div>
|
||||
<div class="gameScroll" @touchstart.stop @touchmove.stop @touchend.stop>
|
||||
<div class="gameImg">
|
||||
<div
|
||||
v-for="(item,index) in state.list.slice(0, Math.floor(state.list.length / 2))"
|
||||
:key="index"
|
||||
@click="
|
||||
$router.push({
|
||||
path: '/picturePreview',
|
||||
query: { imgs: state.list, index: index ,fromGamePage:1},
|
||||
})
|
||||
"
|
||||
>
|
||||
<LazyImg class="img" :src="item" :key="item" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="gameImg">
|
||||
<div
|
||||
v-for="(item,index) in state.list.slice(Math.floor(state.list.length / 2))"
|
||||
:key=" index"
|
||||
@click="
|
||||
$router.push({
|
||||
path: '/picturePreview',
|
||||
query: { imgs: state.list, index: index+Math.floor(state.list.length / 2),fromGamePage:1 },
|
||||
})
|
||||
"
|
||||
>
|
||||
<LazyImg class="img" :src="item" :key="item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, inject, watchEffect, ComputedRef } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
list:<any>[],
|
||||
});
|
||||
|
||||
const configList = inject('configList') as ComputedRef<any>;
|
||||
|
||||
watchEffect(() => {
|
||||
state.list = []
|
||||
configList.value.forEach((item:any) => {
|
||||
if(item.type == 2){
|
||||
state.list.push(item.cover)
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.game{
|
||||
.gameTitle{
|
||||
width: 391px;
|
||||
height: 27px;
|
||||
margin: 0 auto;
|
||||
background: url("@/assets/images/png/jointGameing/gameTitle.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.gameScroll{
|
||||
width: 100%;
|
||||
height: 202px;
|
||||
margin: 13px 0 34px 0;
|
||||
padding-left: 18px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.gameImg{
|
||||
display: flex;
|
||||
>div{
|
||||
width: 173px;
|
||||
height: 97px;
|
||||
margin-right: 8px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<div class="group">
|
||||
<div class="groupTitle"></div>
|
||||
<div class="groupBoxs">
|
||||
<!-- 会员卡 -->
|
||||
<div class="cardBox flex-center-between">
|
||||
<div
|
||||
v-for="(item, index) in state.list"
|
||||
:key="index"
|
||||
:class="['card', state.activeData.productID == item.productID ? 'active' : '']"
|
||||
@click="changeTabs(item)"
|
||||
>
|
||||
<div class="coin flex-center-center">{{ item.type == 1 ? '初级' : '高级' }}</div>
|
||||
<h2>{{ item.productName }}</h2>
|
||||
<img class="add" src="@/assets/images/png/jointGameing/add.png" alt="" />
|
||||
<img class="logo" src="@/assets/images/png/jointGameing/logo.png" alt="" />
|
||||
<p class="flex-center-center">
|
||||
组合价格
|
||||
<span>￥</span>
|
||||
<font>{{ item.discountedPrice / 10 }}</font>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 会员特权 -->
|
||||
<div class="viPauthority flex">
|
||||
<div class="left">会员特权</div>
|
||||
<div class="lines"></div>
|
||||
<div class="right">
|
||||
<p>
|
||||
<img class="img" src="@/assets/images/png/jointGameing/logo.png" alt="" />
|
||||
游戏主程序序号
|
||||
<span>一份</span>
|
||||
</p>
|
||||
<h2 v-if="state.activeData.type == 2">
|
||||
<p>
|
||||
官方实体攻略书
|
||||
<span>一份</span>
|
||||
</p>
|
||||
<font>(含30位女模履历写真)</font>
|
||||
</h2>
|
||||
<p v-if="state.activeData.type == 2">
|
||||
温暖你硬10人变色写真
|
||||
<span>一份</span>
|
||||
</p>
|
||||
<p v-for="(item, index) in state.activeData.newPrivilege" :key="index">
|
||||
<!-- <LazyImg v-if="item.img" class="img" :src="item.img" :key="item.img" /> -->
|
||||
{{ item.privilegeName }}
|
||||
<span>{{ item.privilegeDesc }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 按钮 -->
|
||||
<div v-if="!state.activeData.isPay" class="paybtn flex-center-center" @click="showPay">
|
||||
￥{{ state.payPrice || 0 }}/组合购买
|
||||
</div>
|
||||
<!-- 解锁后状态 -->
|
||||
<div class="unlock" v-else>
|
||||
<div class="input flex-center-center">{{ state.activeData.gameCode[0] }}</div>
|
||||
<div class="btnbox flex-center-center">
|
||||
<div class="copy flex-center-center" @click="copyLink">复制序列号</div>
|
||||
<div class="download flex-center-center" @click="download">下载游戏</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, inject, watchEffect, ComputedRef, nextTick } from 'vue';
|
||||
import { getDevType, compatibleAppStoreJump } from '@/utils';
|
||||
import toClipboard from '@/utils/clipboard';
|
||||
import { showToast } from 'vant';
|
||||
|
||||
const state = reactive({
|
||||
list: <any>[],
|
||||
activeData: <any>{},
|
||||
payPrice: <any>'',
|
||||
videoInfo: <any>{},
|
||||
payDataInfo: <any>{},
|
||||
});
|
||||
const sysType = getDevType();
|
||||
const cardList = inject('cardList') as ComputedRef<any>;
|
||||
const configList = inject('configList') as ComputedRef<any>;
|
||||
const paycardList = inject('paycardList') as ComputedRef<any>;
|
||||
const dcInfo = inject('dcInfo') as ComputedRef<any>;
|
||||
const openPayPop: any = inject('openPayPop');
|
||||
|
||||
watchEffect(() => {
|
||||
state.videoInfo = configList.value.filter((item: any) => {
|
||||
return item.type == 5;
|
||||
})[0];
|
||||
});
|
||||
|
||||
const getList = () => {
|
||||
state.list = cardList.value.filter((item: any) => {
|
||||
return item.sendGame;
|
||||
});
|
||||
nextTick(() => {
|
||||
changeTabs(state.list[0]);
|
||||
});
|
||||
};
|
||||
getList();
|
||||
|
||||
// 切换会员卡
|
||||
const changeTabs = (data: any) => {
|
||||
let dataValue: any = {};
|
||||
paycardList.value.forEach((item: any) => {
|
||||
if (item.productID == data.productID) {
|
||||
dataValue = item;
|
||||
}
|
||||
});
|
||||
state.activeData = data;
|
||||
state.payPrice = data.discountedPrice / 10;
|
||||
let payData = {
|
||||
rechargeList: dataValue.rchgType, // 支付方式列表
|
||||
dcInfo: dcInfo.value, // 代充信息
|
||||
popType: 'vip', // 弹窗类型
|
||||
productType: dataValue.productType, // 商品类型
|
||||
productID: dataValue.productID, // 商品ID
|
||||
dcType: 1, // 代充商品类型
|
||||
buyType: 4, // 商品类型 1-是金币 2-是游戏币 3-是果币 4-是商品
|
||||
discountedPrice: dataValue.discountedPrice / 10, // 充值金额
|
||||
isAmountPay: dataValue.isAmountPay, // 是否支持金币兑换
|
||||
sourcePage: 'H5_ACTIVITY' as const,
|
||||
};
|
||||
state.payDataInfo = payData;
|
||||
};
|
||||
|
||||
// 支付
|
||||
const showPay = () => {
|
||||
if (state.payDataInfo.rechargeList.length == 0) return showToast('暂无支付方式');
|
||||
openPayPop(state.payDataInfo);
|
||||
};
|
||||
|
||||
// 复制序列号
|
||||
const copyLink = async () => {
|
||||
try {
|
||||
if (!state.activeData.gameCode[0]) {
|
||||
showToast('复制失败');
|
||||
return;
|
||||
}
|
||||
await toClipboard(state.activeData.gameCode[0]); //实现复制
|
||||
showToast('复制成功');
|
||||
} catch (e: any) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
// 下载游戏
|
||||
const download = () => {
|
||||
compatibleAppStoreJump(state.videoInfo.url);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.group {
|
||||
width: 100%;
|
||||
padding: 0 18px;
|
||||
box-sizing: border-box;
|
||||
.groupTitle {
|
||||
width: 391px;
|
||||
height: 27px;
|
||||
background: url('@/assets/images/png/jointGameing/group.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.groupBoxs {
|
||||
width: 100%;
|
||||
.cardBox {
|
||||
width: 100%;
|
||||
// height: 182px;
|
||||
margin: 19px 0;
|
||||
flex-wrap: wrap;
|
||||
.card {
|
||||
width: 126px;
|
||||
height: 182px;
|
||||
background: #000;
|
||||
border-radius: 10px;
|
||||
border: solid 2px transparent;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 20px 0;
|
||||
margin-bottom: 15px;
|
||||
.coin {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
border-radius: 8px 0 8px 0;
|
||||
background: #f60175;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
width: 54px;
|
||||
height: 20px;
|
||||
}
|
||||
.add {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.logo {
|
||||
width: 87px;
|
||||
height: 45px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 15px;
|
||||
color: #f60175;
|
||||
font-weight: bold;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
span {
|
||||
color: #f60175;
|
||||
padding: 0 3px;
|
||||
}
|
||||
font {
|
||||
font-size: 18px;
|
||||
color: #f60175;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.active {
|
||||
border: solid 2px #f60175;
|
||||
}
|
||||
}
|
||||
.viPauthority {
|
||||
width: 100%;
|
||||
margin-bottom: 19px;
|
||||
.left {
|
||||
color: #f60175;
|
||||
font-size: 14px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.lines {
|
||||
// width: 1px;
|
||||
// height: 63px;
|
||||
// background: #343434;
|
||||
// margin: 0 19px;
|
||||
}
|
||||
.right {
|
||||
margin: 0 0 0 18px;
|
||||
padding-left: 18px;
|
||||
box-sizing: border-box;
|
||||
border-left: solid 1px #343434;
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
.img {
|
||||
width: 52px;
|
||||
height: 27px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #cccccc;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
p:nth-last-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
width: auto;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
flex-direction: column;
|
||||
p {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
font {
|
||||
font-size: 12px;
|
||||
color: #cccccc;
|
||||
padding-left: 10px;
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #cccccc;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.paybtn {
|
||||
width: 310px;
|
||||
height: 51px;
|
||||
background: #f60175;
|
||||
margin: 0 auto;
|
||||
border-radius: 30px;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.unlock {
|
||||
.input {
|
||||
width: 286px;
|
||||
height: 38px;
|
||||
margin: 0 auto;
|
||||
border: solid 1px #e6e6e6;
|
||||
border-radius: 8px;
|
||||
background: #1b1b1be5;
|
||||
color: #f60175;
|
||||
font-size: 14px;
|
||||
}
|
||||
.btnbox {
|
||||
margin-top: 13px;
|
||||
> div {
|
||||
width: 148px;
|
||||
height: 41px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
.copy {
|
||||
background: #f60175;
|
||||
}
|
||||
.download {
|
||||
background: #fff;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,310 @@
|
||||
<template>
|
||||
<div class="interval">
|
||||
<div class="tab_bar flex-center-center">
|
||||
<div
|
||||
v-for="(item, index) in state.list"
|
||||
:key="index"
|
||||
@click="changeTabs(item)"
|
||||
:class="['tab_item flex-center-center', state.activeData.productID == item.productID ? 'tab_active' : '']"
|
||||
>
|
||||
{{ item.type == 1 ? '初级面试官' : '高级面试官' }}
|
||||
<span class="tab_line"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab_navs">
|
||||
<LazyImg class="cardImg" :src="state.activeData.bgImg" :key="state.activeData.bgImg" />
|
||||
<div class="tab_mess flex">
|
||||
<div class="left">内容物包含</div>
|
||||
<div class="lines"></div>
|
||||
<div class="right">
|
||||
<p>
|
||||
<img class="img" src="@/assets/images/png/jointGameing/logo.png" alt="" />
|
||||
游戏主程序序号
|
||||
<span>一份</span>
|
||||
</p>
|
||||
<h2 v-if="state.activeData.type == 2">
|
||||
<p>
|
||||
官方实体攻略书
|
||||
<span>一份</span>
|
||||
</p>
|
||||
<font>(含30位女模履历写真)</font>
|
||||
</h2>
|
||||
<p v-if="state.activeData.type == 2">
|
||||
温暖你硬10人变色写真
|
||||
<span>一份</span>
|
||||
</p>
|
||||
<!-- <p v-for="(item,index) in state.activeData.newPrivilege" :key="index">
|
||||
<LazyImg v-if="item.img" class="img" :src="item.img" :key="item.img" />
|
||||
{{item.privilegeName}}
|
||||
</p> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="price flex-center-center">
|
||||
<p class="flex-center-center">
|
||||
原价￥
|
||||
<span>{{ state.activeData.originalPrice / 10 }}</span>
|
||||
</p>
|
||||
<p class="flex-center-center">
|
||||
预购价格
|
||||
<font>￥</font>
|
||||
<span class="ready">{{ state.activeData.discountedPrice / 10 }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="!state.activeData.isPay" class="paybtn flex-center-center" @click="showPay">
|
||||
￥{{ state.payPrice }}/立即购买
|
||||
</div>
|
||||
<!-- 解锁后状态 -->
|
||||
<div class="unlock" v-else>
|
||||
<div class="input flex-center-center">{{ state.activeData.gameCode[0] }}</div>
|
||||
<div class="btnbox flex-center-center">
|
||||
<div class="copy flex-center-center" @click="copyLink">复制序列号</div>
|
||||
<div class="download flex-center-center" @click="download">下载游戏</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, inject, watchEffect, ComputedRef, nextTick } from 'vue';
|
||||
import { getDevType, compatibleAppStoreJump } from '@/utils';
|
||||
import toClipboard from '@/utils/clipboard';
|
||||
import { showToast } from 'vant';
|
||||
|
||||
const state = reactive({
|
||||
list: <any>[],
|
||||
activeData: <any>{},
|
||||
payPrice: <any>'',
|
||||
videoInfo: <any>{},
|
||||
payDataInfo: <any>{},
|
||||
});
|
||||
const sysType = getDevType();
|
||||
const cardList = inject('cardList') as ComputedRef<any>;
|
||||
const configList = inject('configList') as ComputedRef<any>;
|
||||
const paycardList = inject('paycardList') as ComputedRef<any>;
|
||||
const dcInfo = inject('dcInfo') as ComputedRef<any>;
|
||||
const openPayPop: any = inject('openPayPop');
|
||||
|
||||
watchEffect(() => {
|
||||
state.videoInfo = configList.value.filter((item: any) => {
|
||||
return item.type == 5;
|
||||
})[0];
|
||||
});
|
||||
|
||||
const getList = () => {
|
||||
state.list = cardList.value.filter((item: any) => {
|
||||
return !item.sendGame;
|
||||
});
|
||||
state.list = state.list.sort((a: any, b: any) => a.type - b.type);
|
||||
nextTick(() => {
|
||||
changeTabs(state.list[0]);
|
||||
});
|
||||
};
|
||||
getList();
|
||||
|
||||
// 切换会员卡
|
||||
const changeTabs = (data: any) => {
|
||||
let dataValue: any = {};
|
||||
paycardList.value.forEach((item: any) => {
|
||||
if (item.productID == data.productID) {
|
||||
dataValue = item;
|
||||
}
|
||||
});
|
||||
state.activeData = data;
|
||||
state.payPrice = data.discountedPrice / 10;
|
||||
let payData = {
|
||||
rechargeList: dataValue.rchgType, // 支付方式列表
|
||||
dcInfo: dcInfo.value, // 代充信息
|
||||
popType: 'vip', // 弹窗类型
|
||||
productType: dataValue.productType, // 商品类型
|
||||
productID: dataValue.productID, // 商品ID
|
||||
dcType: 1, // 代充商品类型
|
||||
buyType: 4, // 商品类型 1-是金币 2-是游戏币 3-是果币 4-是商品
|
||||
discountedPrice: dataValue.discountedPrice / 10, // 充值金额
|
||||
isAmountPay: dataValue.isAmountPay, // 是否支持金币兑换
|
||||
sourcePage: 'H5_ACTIVITY' as const,
|
||||
};
|
||||
state.payDataInfo = payData;
|
||||
};
|
||||
|
||||
// 支付
|
||||
const showPay = () => {
|
||||
if (state.payDataInfo.rechargeList.length == 0) return showToast('暂无支付方式');
|
||||
openPayPop(state.payDataInfo);
|
||||
};
|
||||
|
||||
// 复制序列号
|
||||
const copyLink = async () => {
|
||||
try {
|
||||
if (!state.activeData.gameCode[0]) {
|
||||
showToast('复制失败');
|
||||
return;
|
||||
}
|
||||
await toClipboard(state.activeData.gameCode[0]); //实现复制
|
||||
showToast('复制成功');
|
||||
} catch (e: any) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
// 下载游戏
|
||||
const download = () => {
|
||||
compatibleAppStoreJump(state.videoInfo.url);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.interval {
|
||||
width: 100%;
|
||||
padding: 0 18px;
|
||||
box-sizing: border-box;
|
||||
.tab_bar {
|
||||
width: 100%;
|
||||
color: #989898;
|
||||
font-size: 20px;
|
||||
}
|
||||
.tab_bar .tab_item:nth-child(1) {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.tab_item {
|
||||
flex-direction: column;
|
||||
}
|
||||
.tab_active {
|
||||
color: #f60175;
|
||||
.tab_line {
|
||||
background: #f60175;
|
||||
}
|
||||
}
|
||||
.tab_line {
|
||||
width: 42px;
|
||||
height: 4px;
|
||||
background: transparent;
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tab_navs {
|
||||
.cardImg {
|
||||
width: 391px;
|
||||
height: 200px;
|
||||
margin: 19px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tab_mess {
|
||||
.left {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.lines {
|
||||
// width: 1px;
|
||||
// height: 100%;
|
||||
// background: #343434;
|
||||
// margin: 0 18px;
|
||||
}
|
||||
.right {
|
||||
margin: 0 0 0 18px;
|
||||
padding-left: 18px;
|
||||
box-sizing: border-box;
|
||||
border-left: solid 1px #343434;
|
||||
p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
.img {
|
||||
width: 46px;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #cccccc;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
p:nth-last-child(1) {
|
||||
margin: 0;
|
||||
}
|
||||
h2 {
|
||||
width: auto;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
flex-direction: column;
|
||||
p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
font {
|
||||
font-size: 12px;
|
||||
color: #cccccc;
|
||||
padding-left: 10px;
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #cccccc;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.price {
|
||||
font-size: 14px;
|
||||
margin: 18px 0;
|
||||
p {
|
||||
span {
|
||||
font-size: 30px;
|
||||
}
|
||||
.ready {
|
||||
color: #f60175;
|
||||
}
|
||||
font {
|
||||
color: #f60175;
|
||||
}
|
||||
}
|
||||
p:nth-child(1) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.paybtn {
|
||||
width: 310px;
|
||||
height: 51px;
|
||||
background: #f60175;
|
||||
margin: 0 auto;
|
||||
border-radius: 30px;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.unlock {
|
||||
.input {
|
||||
width: 286px;
|
||||
height: 38px;
|
||||
margin: 0 auto;
|
||||
border: solid 1px #e6e6e6;
|
||||
border-radius: 8px;
|
||||
background: #1b1b1be5;
|
||||
color: #f60175;
|
||||
font-size: 14px;
|
||||
}
|
||||
.btnbox {
|
||||
margin-top: 13px;
|
||||
> div {
|
||||
width: 148px;
|
||||
height: 41px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
.copy {
|
||||
background: #f60175;
|
||||
}
|
||||
.download {
|
||||
background: #fff;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="video">
|
||||
<div class="videoTitle"></div>
|
||||
<div class="videoInfoBox" @click="openPlayVideo(state.videoInfo.sourceURL, state.videoInfo.h265Url)">
|
||||
<LazyImg class="img" :src="state.videoInfo?.cover" :key="state.videoInfo?.cover" />
|
||||
<img class="play" src="@/assets/images/png/jointGameing/play.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, inject, watchEffect, ComputedRef } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
videoInfo:<any>{}
|
||||
});
|
||||
|
||||
const openPlayVideo: any = inject('openPlayVideo');
|
||||
|
||||
const configList = inject('configList') as ComputedRef<any>;
|
||||
|
||||
watchEffect(() => {
|
||||
state.videoInfo = configList.value.filter((item:any) => {
|
||||
return item.type == 1;
|
||||
})[0];
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video{
|
||||
width: 100%;
|
||||
padding: 0 18px;
|
||||
box-sizing: border-box;
|
||||
.videoTitle{
|
||||
width: 391px;
|
||||
height: 19px;
|
||||
background: url("@/assets/images/png/jointGameing/videotitle.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.videoInfoBox{
|
||||
width: 391px;
|
||||
height: 219px;
|
||||
border-radius: 12px;
|
||||
border: solid 2px #F80177;
|
||||
margin: 15px 0 36px 0;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.play{
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="blindBox">
|
||||
<div class="blindTitle"></div>
|
||||
<div class="blind">
|
||||
<div class="item flex-center-center" v-for="(item,index) in state.list" :key="index">
|
||||
<div class="itemImg">
|
||||
<LazyImg :src="item.cover" :key="item.cover" />
|
||||
</div>
|
||||
{{item.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, inject, watchEffect, ComputedRef } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
list:<any>[],
|
||||
});
|
||||
|
||||
const configList = inject('configList') as ComputedRef<any>;
|
||||
|
||||
watchEffect(() => {
|
||||
state.list = configList.value.filter((item:any) => {
|
||||
return item.type == 3;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.blindBox{
|
||||
.blindTitle{
|
||||
width: 391px;
|
||||
height: 27px;
|
||||
margin:0 auto 19px;
|
||||
background: url("@/assets/images/png/jointGameing/blindBox.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.blind{
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-row-gap: 13px;
|
||||
grid-column-gap: 9px;
|
||||
.item{
|
||||
font-size: 12px;
|
||||
flex-direction: column;
|
||||
.itemImg{
|
||||
width: 116px;
|
||||
height: 116px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,224 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user