311 lines
7.7 KiB
Vue
311 lines
7.7 KiB
Vue
<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>
|