修改充值页面和功能
This commit is contained in:
yuyongdong
parent
ac4b287bdd
commit
a4425214eb
@ -345,19 +345,22 @@
|
||||
</div>
|
||||
<p>Diamonds: In-game currency for purchasing items and entering the Lucky Draw.</p>
|
||||
<div class="content">
|
||||
<div class="item" v-for="(item, index) in rechargeList" :key="index" @click="selectItem(item, index)">
|
||||
<div class="activity" v-if="activeIndex == index">
|
||||
<img src="@/assets/img/marketplace/selected.png" alt="">
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
<img :src="rechargeImgList[item.goods_id].img" alt="">
|
||||
<img :src="rechargeImgList[1006].img" alt="">
|
||||
</div>
|
||||
<div v-if="index != 5" class="item-amount">×{{ item.diamond }}</div>
|
||||
<div v-else class="item-amount item-amount-input">
|
||||
<span @click="rechargeDecrease">-</span>
|
||||
<!-- <span>0</span> -->
|
||||
<input type="text" placeholder="0" v-model="brickworkAmount" @input="handleInput" oninput="value=value.replace(/[^\d]/g,'')">
|
||||
<span @click="rechargeIncrease">+</span>
|
||||
<div class="item-amount">
|
||||
<img src="@/assets/img/marketplace/icon_diamond.png" alt="">
|
||||
<span>499950</span>
|
||||
</div>
|
||||
<div class="item-amount-input">
|
||||
<div class="left">
|
||||
<span @click="rechargeDecrease">-</span>
|
||||
<!-- <span>0</span> -->
|
||||
<input type="text" placeholder="0" v-model="brickworkAmount" @input="handleInput" oninput="value=value.replace(/[^\d]/g,'')">
|
||||
<span @click="rechargeIncrease">+</span>
|
||||
</div>
|
||||
<div class="right"><span>Unit</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -585,21 +588,6 @@ const getRechargeGoods = async () => {
|
||||
}
|
||||
}
|
||||
|
||||
// selectItem 预选充值数量
|
||||
const selectItem = (data, index) => {
|
||||
activeIndex.value = index
|
||||
if(data.goods_id == 1006) {
|
||||
confirmRecharge.value = {
|
||||
currency: data.currency,
|
||||
diamond: brickworkAmount.value,
|
||||
goods_id: data.goods_id,
|
||||
price: priceAmount.value
|
||||
}
|
||||
} else {
|
||||
confirmRecharge.value = data
|
||||
}
|
||||
}
|
||||
|
||||
const handleInput = (e) => {
|
||||
// console.log(brickworkAmount.value, e)
|
||||
if(Number(brickworkAmount.value) >9999) {
|
||||
@ -630,11 +618,11 @@ const rechargeIncrease = async () => {
|
||||
toRaw(confirmRecharge.value).price = priceAmount.value
|
||||
toRaw(confirmRecharge.value).diamond = brickworkAmount.value
|
||||
}
|
||||
console.log(brickworkAmount.value)
|
||||
}
|
||||
|
||||
// 充值
|
||||
const conformBtn = async () => {
|
||||
return
|
||||
// if(localWalletStore.walletType == 3) {
|
||||
let address = localWalletStore.address
|
||||
if(toRaw(confirmRecharge.value).price == 0) {
|
||||
@ -1888,8 +1876,8 @@ onMounted(() => {
|
||||
// z-index: 10;
|
||||
}
|
||||
:deep(.rechargeListModal) {
|
||||
width: 1219px !important;
|
||||
height: 895px;
|
||||
width: 975px !important;
|
||||
height: 716px;
|
||||
background: #1A1821;
|
||||
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
|
||||
border-radius: 100px;
|
||||
@ -1937,29 +1925,18 @@ onMounted(() => {
|
||||
clear: both;
|
||||
margin-top: 7px;
|
||||
.item {
|
||||
width: 332px;
|
||||
height: 258px;
|
||||
width: 594px;
|
||||
height: 441px;
|
||||
border-radius: 40px;
|
||||
background: #2d2738;
|
||||
margin-top: 31px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
.activity {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 77px;
|
||||
height: 74px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.item-img {
|
||||
width: 312px;
|
||||
height: 206px;
|
||||
width: 468px;
|
||||
height: 244px;
|
||||
margin: 0 auto;
|
||||
padding: 5px;
|
||||
// padding: 5px;
|
||||
margin-top: 30px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -1970,23 +1947,57 @@ onMounted(() => {
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 376px;
|
||||
height: 65px;
|
||||
background: #282333;
|
||||
border: 3px solid #1e1b26;
|
||||
border-radius: 30px;
|
||||
margin: 10px auto;
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
.item-amount-input {
|
||||
width: 222px;
|
||||
height: 42px;
|
||||
height: 65px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
font-family: 'Poppins';
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
|
||||
margin: 0 auto;
|
||||
background: #1E1B26;
|
||||
border-radius: 21px;
|
||||
input {
|
||||
color: #fff;
|
||||
width: 100px;
|
||||
height: 42px;
|
||||
border: 0px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.left {
|
||||
width: 376px;
|
||||
height: 65px;
|
||||
line-height: 65px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
background: #1E1B26;
|
||||
border-radius: 21px;
|
||||
input {
|
||||
color: #fff;
|
||||
width: 100px;
|
||||
height: 42px;
|
||||
border: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2000,7 +2011,7 @@ onMounted(() => {
|
||||
box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
|
||||
border-radius: 30px;
|
||||
margin: 0 auto;
|
||||
margin-top: 56px;
|
||||
margin-top: 10px;
|
||||
font-family: 'Poppins';
|
||||
font-weight: bold;
|
||||
font-size: 36px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user