初始化导入 hjsq H5 项目代码
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
谢宇宁
@@ -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>
|
||||
Reference in New Issue
Block a user