|
@@ -1,5 +1,5 @@
|
|
<template>
|
|
<template>
|
|
- <div class="dialog" :style="{'height': dialogStyle.height + 'px'}">
|
|
|
|
|
|
+ <div class="dialog" :style="{ 'height': dialogStyle.height + 'px' }">
|
|
<!-- home -->
|
|
<!-- home -->
|
|
<div class="area-title">
|
|
<div class="area-title">
|
|
<img :src="require('@/assets/svg/icon-close.svg')" @click="clickClose" />
|
|
<img :src="require('@/assets/svg/icon-close.svg')" @click="clickClose" />
|
|
@@ -16,11 +16,14 @@
|
|
<!-- 首页 -->
|
|
<!-- 首页 -->
|
|
<div class="mark">
|
|
<div class="mark">
|
|
<div class="sold">SOLD: {{ state.data.itemSoldCount || 0 }}/{{ state.data.itemTotalCount || 0 }} </div>
|
|
<div class="sold">SOLD: {{ state.data.itemSoldCount || 0 }}/{{ state.data.itemTotalCount || 0 }} </div>
|
|
- <div class="limit" v-if="showDesc">Buy Limit: {{ state.data.userBuyCount || 0 }}/{{ state.data.perUserBuyLimit || 0 }}</div>
|
|
|
|
|
|
+ <div class="limit" v-if="showDesc">Buy Limit: {{ state.data.userBuyCount || 0 }}/{{
|
|
|
|
+ state.data.perUserBuyLimit || 0
|
|
|
|
+ }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="btn-area">
|
|
<div class="btn-area">
|
|
<!-- 兑换码 -->
|
|
<!-- 兑换码 -->
|
|
- <template v-if="(state.data.perUserBuyLimit - state.data.userBuyCount) >= 1 && (state.data.itemTotalCount - state.data.itemSoldCount) >= 1">
|
|
|
|
|
|
+ <template
|
|
|
|
+ v-if="(state.data.perUserBuyLimit - state.data.userBuyCount) >= 1 && (state.data.itemTotalCount - state.data.itemSoldCount) >= 1">
|
|
<div class="redeem" @click="showRedeemLayer">Redeem</div>
|
|
<div class="redeem" @click="showRedeemLayer">Redeem</div>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<template v-else>
|
|
@@ -28,10 +31,7 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<template v-for="item in state.data.salePlans.slice(0, 2).reverse()">
|
|
<template v-for="item in state.data.salePlans.slice(0, 2).reverse()">
|
|
- <div
|
|
|
|
- class="buy1"
|
|
|
|
- :class="{ grey: payNext }"
|
|
|
|
- @click="clickJump(item)"
|
|
|
|
|
|
+ <div class="buy1" :class="{ grey: payNext }" @click="clickJump(item)"
|
|
v-if="item.itemCount == 1 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 1 && (state.data.itemTotalCount - state.data.itemSoldCount) >= 1">
|
|
v-if="item.itemCount == 1 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 1 && (state.data.itemTotalCount - state.data.itemSoldCount) >= 1">
|
|
<template v-if="(item.price.length + item.currencyInfo.tokenSymbol.length) > 30">
|
|
<template v-if="(item.price.length + item.currencyInfo.tokenSymbol.length) > 30">
|
|
<div class="left">Buy 1</div>
|
|
<div class="left">Buy 1</div>
|
|
@@ -66,10 +66,7 @@
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <div
|
|
|
|
- class="buy5"
|
|
|
|
- :class="{ grey: payNext }"
|
|
|
|
- @click="clickJump(item)"
|
|
|
|
|
|
+ <div class="buy5" :class="{ grey: payNext }" @click="clickJump(item)"
|
|
v-if="item.itemCount == 5 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 5 && (state.data.itemTotalCount - state.data.itemSoldCount) >= 5">
|
|
v-if="item.itemCount == 5 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 5 && (state.data.itemTotalCount - state.data.itemSoldCount) >= 5">
|
|
<div class="left">Buy {{ item.itemCount }}</div>
|
|
<div class="left">Buy {{ item.itemCount }}</div>
|
|
|
|
|
|
@@ -120,7 +117,7 @@ import Report from "@/log-center/log"
|
|
import { getQueryString } from "@/uilts/help";
|
|
import { getQueryString } from "@/uilts/help";
|
|
import { calcRechargePayAmount } from "@/http/account";
|
|
import { calcRechargePayAmount } from "@/http/account";
|
|
import { getCurrencyInfoByCode } from "@/http/publishApi";
|
|
import { getCurrencyInfoByCode } from "@/http/publishApi";
|
|
-import { sendChromeTabMessage } from '@/uilts/chromeExtension.js';
|
|
|
|
|
|
+import { sendCurrentTabMessage } from '@/uilts/chromeExtension.js';
|
|
let postId = inject('post_Id');
|
|
let postId = inject('post_Id');
|
|
let pay_info = inject('pay_info');
|
|
let pay_info = inject('pay_info');
|
|
let router = useRouter()
|
|
let router = useRouter()
|
|
@@ -228,7 +225,7 @@ const clickJump = (item) => {
|
|
|
|
|
|
const setDialogStyle = () => {
|
|
const setDialogStyle = () => {
|
|
let clientHeight = window.innerHeight;
|
|
let clientHeight = window.innerHeight;
|
|
- if(clientHeight >= 840) {
|
|
|
|
|
|
+ if (clientHeight >= 840) {
|
|
dialogStyle.height = 800;
|
|
dialogStyle.height = 800;
|
|
} else {
|
|
} else {
|
|
dialogStyle.height = clientHeight - 40;
|
|
dialogStyle.height = clientHeight - 40;
|
|
@@ -253,7 +250,7 @@ const redeemPost = () => {
|
|
let { code, data } = res;
|
|
let { code, data } = res;
|
|
if (code == 0 && data) {
|
|
if (code == 0 && data) {
|
|
pay_info.buy_items = data
|
|
pay_info.buy_items = data
|
|
- sendChromeTabMessage({ actionType: "FINISH_GROUP_BANNNER" }, () => { })
|
|
|
|
|
|
+ sendCurrentTabMessage({ actionType: "FINISH_GROUP_BANNNER" }, () => { })
|
|
router.push({ path: '/open_box' });
|
|
router.push({ path: '/open_box' });
|
|
// report
|
|
// report
|
|
Report.reportLog({
|
|
Report.reportLog({
|
|
@@ -340,8 +337,8 @@ const hideRedeemLayer = () => {
|
|
watchEffect(() => {
|
|
watchEffect(() => {
|
|
let len = 16
|
|
let len = 16
|
|
let str = redeemStr.value.replace(/[^a-zA-Z0-9]/g, '')
|
|
let str = redeemStr.value.replace(/[^a-zA-Z0-9]/g, '')
|
|
- str = str.toUpperCase();
|
|
|
|
- str = str.slice(0, len);
|
|
|
|
|
|
+ str = str.toUpperCase();
|
|
|
|
+ str = str.slice(0, len);
|
|
// set
|
|
// set
|
|
redeemStr.value = str;
|
|
redeemStr.value = str;
|
|
redeemNext.value = str !== '' && str.length === len;
|
|
redeemNext.value = str !== '' && str.length === len;
|
|
@@ -353,7 +350,7 @@ onMounted(() => {
|
|
let nft_project_Id = router.currentRoute.value.query.nftProjectId
|
|
let nft_project_Id = router.currentRoute.value.query.nftProjectId
|
|
let nft_group_Id = router.currentRoute.value.query.nft_group_Id
|
|
let nft_group_Id = router.currentRoute.value.query.nft_group_Id
|
|
let post_id = router.currentRoute.value.query.postId
|
|
let post_id = router.currentRoute.value.query.postId
|
|
- if(nft_group_Id){
|
|
|
|
|
|
+ if (nft_group_Id) {
|
|
pay_info.nft_group_Id = nft_group_Id
|
|
pay_info.nft_group_Id = nft_group_Id
|
|
}
|
|
}
|
|
if (!nft_project_Id) {
|
|
if (!nft_project_Id) {
|
|
@@ -556,8 +553,9 @@ onMounted(() => {
|
|
cursor: not-allowed;
|
|
cursor: not-allowed;
|
|
border: unset;
|
|
border: unset;
|
|
color: #FFFFFF;
|
|
color: #FFFFFF;
|
|
|
|
+
|
|
.usdt {
|
|
.usdt {
|
|
- color: #FFFFFF!important;
|
|
|
|
|
|
+ color: #FFFFFF !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -576,6 +574,7 @@ onMounted(() => {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
margin-right: 12px;
|
|
margin-right: 12px;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
+
|
|
&.grey {
|
|
&.grey {
|
|
background: #CDCDCD;
|
|
background: #CDCDCD;
|
|
cursor: not-allowed;
|
|
cursor: not-allowed;
|
|
@@ -597,11 +596,13 @@ onMounted(() => {
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
background: #FFFFFF;
|
|
background: #FFFFFF;
|
|
transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
|
|
+
|
|
.header {
|
|
.header {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
height: 48px;
|
|
height: 48px;
|
|
box-shadow: 0px 0.5px 0px #D1D9DD;
|
|
box-shadow: 0px 0.5px 0px #D1D9DD;
|
|
|
|
+
|
|
img {
|
|
img {
|
|
width: 24px;
|
|
width: 24px;
|
|
height: 24px;
|
|
height: 24px;
|
|
@@ -609,8 +610,10 @@ onMounted(() => {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.footer {
|
|
.footer {
|
|
padding: 20px;
|
|
padding: 20px;
|
|
|
|
+
|
|
.tips {
|
|
.tips {
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
@@ -618,6 +621,7 @@ onMounted(() => {
|
|
letter-spacing: 0.3px;
|
|
letter-spacing: 0.3px;
|
|
margin-bottom: 18px;
|
|
margin-bottom: 18px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.input {
|
|
.input {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -626,6 +630,7 @@ onMounted(() => {
|
|
border-radius: 100px;
|
|
border-radius: 100px;
|
|
background: #FFFFFF;
|
|
background: #FFFFFF;
|
|
border: 1px solid #DDDDDD;
|
|
border: 1px solid #DDDDDD;
|
|
|
|
+
|
|
input {
|
|
input {
|
|
width: calc(100% - 40px);
|
|
width: calc(100% - 40px);
|
|
border: 0;
|
|
border: 0;
|
|
@@ -635,9 +640,11 @@ onMounted(() => {
|
|
line-height: 19px;
|
|
line-height: 19px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.confirm {
|
|
.confirm {
|
|
margin-top: 45px;
|
|
margin-top: 45px;
|
|
text-align: right;
|
|
text-align: right;
|
|
|
|
+
|
|
.btn {
|
|
.btn {
|
|
border: 0;
|
|
border: 0;
|
|
width: 170px;
|
|
width: 170px;
|
|
@@ -648,6 +655,7 @@ onMounted(() => {
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
border-radius: 100px;
|
|
border-radius: 100px;
|
|
background: #1D9BF0;
|
|
background: #1D9BF0;
|
|
|
|
+
|
|
&.grey {
|
|
&.grey {
|
|
background: #CDCDCD;
|
|
background: #CDCDCD;
|
|
cursor: not-allowed;
|
|
cursor: not-allowed;
|
|
@@ -658,6 +666,7 @@ onMounted(() => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.redeemMask {
|
|
.redeemMask {
|
|
position: absolute;
|
|
position: absolute;
|
|
z-index: 24;
|
|
z-index: 24;
|