完善充值功能

This commit is contained in:
yuyongdong 2024-08-06 17:17:35 +08:00
parent 8f9bdcf52c
commit bc3a0af938
4 changed files with 177 additions and 60 deletions

View File

@ -9,10 +9,10 @@
<div class="assets-user-name"> <div class="assets-user-name">
<div class="adderss">{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}</div> <div class="adderss">{{ localWalletStore.showAddress ? localWalletStore.showAddress : 'User Address' }}</div>
<div class="email"> <div class="email">
<p>Total Contribution Credits:</p> <p>Email: {{ userInfoData.email }}</p>
</div> </div>
<div class="name"> <div class="name">
<p>Player name:&nbsp;&nbsp; <span>{{ contributionPoint }}</span></p> <p>Player name:&nbsp;&nbsp; <span>{{ userInfoData.nickname }}</span></p>
</div> </div>
<div class="recharge"> <div class="recharge">
<div class="recharge-left"> <div class="recharge-left">
@ -20,10 +20,10 @@
<div class="recharge-img"> <div class="recharge-img">
<img src="@/assets/img/marketplace/icon_diamond.png" alt=""> <img src="@/assets/img/marketplace/icon_diamond.png" alt="">
</div> </div>
<span>0</span> <span>{{ userInfoData.diamond ? userInfoData.diamond : 0 }}</span>
</li> </li>
<li> <li>
<div class="recharge-btn" @click="rechargeListDialogVisible = true">Top up</div> <div class="recharge-btn" @click="rechargeDialogVisible">Top-Up</div>
</li> </li>
</div> </div>
<div class="recharge-right"> <div class="recharge-right">
@ -65,7 +65,7 @@
<div class="total"> <div class="total">
<p>Total Contribution Credits:&nbsp; </p> <p>Total Contribution Credits:&nbsp; </p>
<div> <div>
<span>{{ contributionPointTotal }}</span> <span>{{ userInfoData.contribution_point }}</span>
<img src="@/assets/img/marketplace/totalContribution.png" alt=""> <img src="@/assets/img/marketplace/totalContribution.png" alt="">
<img class="icon" @click="conLogDialogVisible = true" src="@/assets/img/marketplace/History.png" alt=""> <img class="icon" @click="conLogDialogVisible = true" src="@/assets/img/marketplace/History.png" alt="">
</div> </div>
@ -339,11 +339,11 @@
</div> </div>
<div ref="rechargeListModal"> <div ref="rechargeListModal">
<a-modal :class="'rechargeListModal'" :getContainer="() => $refs.rechargeListModal" v-model:open="rechargeListDialogVisible" :closable="false" :footer="null" :maskClosable="false"> <a-modal :class="'rechargeListModal'" :getContainer="() => $refs.rechargeListModal" v-model:open="rechargeListDialogVisible" :closable="false" :footer="null" :maskClosable="false">
<div class="title">Diamond Top up</div> <div class="title">Top-Up</div>
<div class="closable" @click="rechargeListDialogVisible = false"> <div class="closable" @click="rechargeListDialogVisible = false">
<img src="@/assets/img/marketplace/Close_counter.png" alt=""> <img src="@/assets/img/marketplace/Close_counter.png" alt="">
</div> </div>
<p>Diamonds are centralized assets that can be used in the game</p> <p>Diamonds: In-game currency for purchasing items and entering the Lucky Draw.</p>
<div class="content"> <div class="content">
<div class="item" v-for="(item, index) in rechargeList" :key="index" @click="selectItem(item, index)"> <div class="item" v-for="(item, index) in rechargeList" :key="index" @click="selectItem(item, index)">
<div class="activity" v-if="activeIndex == index"> <div class="activity" v-if="activeIndex == index">
@ -362,54 +362,57 @@
</div> </div>
</div> </div>
<div class="conform-btn" @click="conformBtn"> <div class="conform-btn" @click="conformBtn">
<span v-if="confirmRecharge?.goods_id == 1006">{{ priceAmount ? priceAmount : 0 }}</span> <span v-if="confirmRecharge?.goods_id == 1006">{{ priceAmount ? confirmRecharge.price : 0 }}</span>
<span v-else>{{ confirmRecharge?.price }}</span> <span v-else>{{ confirmRecharge?.price }}</span>
<img src="@/assets/img/marketplace/icon_USDT.png" alt=""> <!-- <img src="@/assets/img/marketplace/icon_USDT.png" alt=""> -->
<img :src="icon_usdc" alt="">
</div> </div>
</a-modal> </a-modal>
</div> </div>
<div ref="rechargeLogModal"> <div ref="rechargeLogModal">
<a-modal :class="'rechargeLogModal'" :getContainer="() => $refs.rechargeLogModal" v-model:open="rechargeLogDialogVisible" :closable="false" :footer="null" :maskClosable="false"> <a-modal :class="'rechargeLogModal'" :getContainer="() => $refs.rechargeLogModal" v-model:open="rechargeLogDialogVisible" :closable="false" :footer="null" :maskClosable="false">
<div class="log-title">Staking Contribution Credits Record</div> <div class="log-title">Transaction History</div>
<div class="closable" @click="rechargeLogDialogVisible = false"> <div class="closable" @click="rechargeLogDialogVisible = false">
<img src="@/assets/img/marketplace/Close_counter.png" alt=""> <img src="@/assets/img/marketplace/Close_counter.png" alt="">
</div> </div>
<div class="log-content"> <div class="log-content">
<div class="log-header"> <div class="log-header">
<!-- <li> <li>
Event Action
</li> --> </li>
<li> <li>
Date Date
</li> </li>
<li> <li>
Reward Amount
</li> </li>
</div> </div>
<div class="log-body"> <div class="log-body">
<div v-if="contributionList == undefined || contributionList.length <= 0" class="no-data"> <div v-if="rechargeHistoryList == undefined || rechargeHistoryList.length <= 0" class="no-data">
<div> <div>
<img src="@/assets/img/marketplace/Empty_state.png" alt=""> <img src="@/assets/img/marketplace/Empty_state.png" alt="">
</div> </div>
<p>No Data</p> <p>No Data</p>
</div> </div>
<div v-else class="pages" v-for="(item, index) in contributionList" :key="index"> <div v-else class="pages" v-for="(item, index) in rechargeHistoryList" :key="index">
<!-- <li> <li>
<span>contributionList</span> <span v-if="item.type == 0">Top-Up</span>
</li> --> <span v-else>Spending</span>
</li>
<li> <li>
{{ timeFormat(item.date*1000) }} {{ timeFormat(item.date*1000) }}
</li> </li>
<li class="cec-amount"> <li class="cec-amount">
<!-- <span>{{ priceCalculated(BigInt(item.contribution_point),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span> --> <!-- <span>{{ priceCalculated(BigInt(item.contribution_point),18).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}</span> -->
<span>{{contributionLogs(item.contribution_point)}}</span> <span>{{contributionLogs(item.amount)}}</span>
<img src="@/assets/img/marketplace/totalContribution.png" alt=""> <img src="@/assets/img/marketplace/icon_diamond.png" alt="">
</li> </li>
</div> </div>
</div> </div>
</div> </div>
</a-modal> </a-modal>
</div> </div>
<LoadingDialog :loadingDialogVisible="loadingDialogVisible" />
</div> </div>
</template> </template>
@ -417,17 +420,20 @@
import { ref, toRaw, watch, computed, onMounted, inject } from "vue" import { ref, toRaw, watch, computed, onMounted, inject } from "vue"
const message = inject("$message"); const message = inject("$message");
import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue"; import ConfirmDialog from "@/components/Dialogs/confirmDialog.vue";
import LoadingDialog from "@/components/Dialogs/loadingDialog.vue"
import {createModal} from "@/utils/model.util"; import {createModal} from "@/utils/model.util";
import { apiCecInfo, apiExpected, apiUserData, apiContribution, apiRechargeGoods, apiRechargeHistory, apiPreRecharge } from "@/utils/marketplace" import { apiCecInfo, apiExpected, apiUserData, apiContribution, apiRechargeGoods, apiRechargeHistory, apiDiamondHistory, apiGameLog } from "@/utils/marketplace"
import { priceCalculated, timeFormat, contributionLogs } from "@/configs/priceCalculate" import { priceCalculated, timeFormat, contributionLogs } from "@/configs/priceCalculate"
import { rechargeImgList } from "@/configs/cenImg" import { rechargeImgList } from "@/configs/cenImg"
import { icon_usdc } from "@/configs/configchain"
import { useMarketplaceStore } from "@/store/marketplace" import { useMarketplaceStore } from "@/store/marketplace"
import { BlockChain } from "@/components/chain/BlockChain" import { BlockChain } from "@/components/chain/BlockChain"
import {walletStore} from "@/store/wallet"; import {walletStore} from "@/store/wallet";
const marketplaceStore = useMarketplaceStore() const marketplaceStore = useMarketplaceStore()
const localWalletStore = walletStore() const localWalletStore = walletStore()
// loading
const loadingDialogVisible = ref(false)
const bgCor = ref(['#5bbbff', '#ffc35b', '#bb7fff', '#ff6600']) const bgCor = ref(['#5bbbff', '#ffc35b', '#bb7fff', '#ff6600'])
const logDialogVisible = ref(false) const logDialogVisible = ref(false)
@ -526,13 +532,24 @@ const getExpected = async () => {
} }
const contributionPointTotal = ref(0) const contributionPointTotal = ref(0)
const userInfoData = ref(
{
contribution_point: "0.00",
diamond: "",
email: "",
errcode: 0,
errmsg: "",
gold: "0.00",
nickname: "",
}
)
const getUserData = async () => { const getUserData = async () => {
let address = localWalletStore.address let address = localWalletStore.address
if(address) { if(address) {
const {errcode, contribution_point, gold} = await apiUserData(address) let res = await apiUserData(address)
if(errcode == 0) { if(res.errcode == 0) {
contributionPointTotal.value = contribution_point marketplaceStore.userGold = res.gold
marketplaceStore.userGold = gold userInfoData.value = res
} }
} else { } else {
return return
@ -544,9 +561,21 @@ const rechargeLogDialogVisible = ref(false)
const rechargeListDialogVisible = ref(false) const rechargeListDialogVisible = ref(false)
const activeIndex = ref(0) const activeIndex = ref(0)
const rechargeList = ref() const rechargeList = ref()
const rechargeHistoryList = ref()
const confirmRecharge = ref() const confirmRecharge = ref()
const brickworkAmount = ref(0) const brickworkAmount = ref(0)
const priceAmount = ref(0) const priceAmount = ref(0)
//
const rechargeDialogVisible = async () => {
let token = localWalletStore.token
if(token) {
rechargeListDialogVisible.value = true
} else {
await new BlockChain().connect()
}
}
// //
const getRechargeGoods = async () => { const getRechargeGoods = async () => {
const { errcode, errmsg, rows} = await apiRechargeGoods() const { errcode, errmsg, rows} = await apiRechargeGoods()
@ -572,56 +601,115 @@ const selectItem = (data, index) => {
} }
const handleInput = (e) => { const handleInput = (e) => {
console.log(brickworkAmount.value, e) // console.log(brickworkAmount.value, e)
toRaw(confirmRecharge.value).price = brickworkAmount.value if(Number(brickworkAmount.value) >9999) {
priceAmount.value = brickworkAmount.value brickworkAmount.value = 9999
toRaw(confirmRecharge.value).price = 9999
} else {
toRaw(confirmRecharge.value).price = brickworkAmount.value
priceAmount.value = brickworkAmount.value
}
} }
const rechargeDecrease = async () => { const rechargeDecrease = async () => {
if(brickworkAmount.value == 0) return false if(brickworkAmount.value == 0) return false
brickworkAmount.value-- brickworkAmount.value--
priceAmount.value-- priceAmount.value--
toRaw(confirmRecharge.value).price = priceAmount.value if(confirmRecharge.value.goods_id == 1006) {
toRaw(confirmRecharge.value).price = priceAmount.value
}
} }
const rechargeIncrease = async () => { const rechargeIncrease = async () => {
brickworkAmount.value++ brickworkAmount.value++
priceAmount.value++ priceAmount.value++
toRaw(confirmRecharge.value).price = priceAmount.value if(confirmRecharge.value.goods_id == 1006) {
toRaw(confirmRecharge.value).price = priceAmount.value
}
} }
//
const conformBtn = async () => { const conformBtn = async () => {
console.log(toRaw(confirmRecharge.value)) // debugger
let address = localWalletStore.address // if(localWalletStore.walletType == 3) {
if(toRaw(confirmRecharge.value).price == 0) { let address = localWalletStore.address
message.error('Please select the amount of bricks to be recharged.') if(toRaw(confirmRecharge.value).price == 0) {
} else { message.error('Please select the amount of bricks to be recharged.')
try { } else {
const bc = new BlockChain() loadingDialogVisible.value = true
let res = await bc.mall.execBuyItem(Number(toRaw(confirmRecharge.value).goods_id)) // getGameLog()
console.log(res) // return
} catch(e) { try {
console.log(e) const bc = new BlockChain()
let res = await bc.mall.execBuyItem(Number(toRaw(confirmRecharge.value).goods_id))
// console.log(res)
if(res) {
await dataInfo()
loadingDialogVisible.value = false
message.success('Top-Up Successful')
}
} catch(e) {
if(e.message.indexOf('rejected') > -1) {
message.error('Top-Up Cancelled by User')
} else if(e.message.indexOf('Error during transaction') > -1) {
message.error('Top-Up Failed - Insufficient Balance')
} else {
message.error('Top-Up fail.')
}
loadingDialogVisible.value = false
}
} }
// alert('') // } else {
// let query = { // const confirmResult = await createModal(ConfirmDialog, {
// net_id: Number(import.meta.env.VUE_APP_NET_ID), // title: 'Need login to Passport',
// goods_id: toRaw(confirmRecharge.value).goods_id, // noBtnTitle: '',
// account_address: address // message: 'Please log in with Passport.'
// } // }).show()
// console.log(query) // }
// let res = await apiPreRecharge(query)
// console.log(res)
}
} }
const getRechargeHistory = async () => { const getRechargeHistory = async () => {
let address = localWalletStore.address let address = localWalletStore.address
let res = await apiRechargeHistory(address) // let res = await apiRechargeHistory(address)
console.log(res,'-----------------------------') if(address) {
let res = await apiDiamondHistory(address)
// if(!res.rows) {
// res.rows = []
// }
// res.rows.forEach(item => {
// item['event'] = 'Top_Up'
// })
// his.rows.forEach(item => {
// item['event'] = 'Spending'
// })
rechargeHistoryList.value = res.rows
}
}
//
const getGameLog = async () => {
let data = {
account_id: '',
session_id: '',
gameid: '',
channel: '',
event_name: '',
localuuid: ''
}
try {
let res = await apiGameLog(data)
console.log(res)
} catch(e) {
loadingDialogVisible.value = false
}
} }
// ----------------------------------------end // ----------------------------------------end
const isPassprotLogin = ref(false)
const dataInfo = async () => { const dataInfo = async () => {
// const bc = new BlockChain()
// isPassprotLogin.value = bc.passportLogined
// console.log(isPassprotLogin.value)
await getCecInfo() await getCecInfo()
await getContribution() await getContribution()
await getExpected() await getExpected()
@ -632,7 +720,7 @@ const dataInfo = async () => {
watch(localWalletStore,() => { watch(localWalletStore,() => {
// console.log('localWalletStore.token',localWalletStore.address,localWalletStore.token) // console.log('localWalletStore.token',localWalletStore.address,localWalletStore.token)
if(!localWalletStore.address) { if(!localWalletStore.token) {
nftList.value = [] nftList.value = []
cecInfo.value = { cecInfo.value = {
total: 0, total: 0,
@ -1038,7 +1126,7 @@ onMounted(() => {
} }
img { img {
width: 28px; width: 28px;
height: 25px; height: 28px;
margin-left: 15px; margin-left: 15px;
} }
} }
@ -1803,6 +1891,12 @@ onMounted(() => {
top: -50px; top: -50px;
right: -50px; right: -50px;
cursor: pointer; cursor: pointer;
width: 160px;
height: 160px;
img {
width: 100%;
height: 100%;
}
} }
p { p {
font-family: 'Poppins'; font-family: 'Poppins';

View File

@ -111,7 +111,7 @@ function hideModal(result = null) {
left: 0; left: 0;
overflow: auto; overflow: auto;
margin: 0; margin: 0;
z-index: 10; z-index: 10001;
.modal-bg { .modal-bg {
position: absolute; position: absolute;
top: 0; top: 0;

View File

@ -14,7 +14,7 @@ export class GameItemMall {
data data
}] }]
}) })
console.log(txHash) // console.log(txHash)
const res = await provider.waitForTransaction(txHash) const res = await provider.waitForTransaction(txHash)
if (res.status == 0) { if (res.status == 0) {
throw new Error('transaction failed') throw new Error('transaction failed')
@ -23,6 +23,12 @@ export class GameItemMall {
} }
async execBuyItem(itemId) { async execBuyItem(itemId) {
// await this.bc.checkPassportLogin();
// const chainId = parseInt(import.meta.env.VUE_APP_NET_ID);
// const provider = this.bc.passportProvider
// const address = this.bc.store.passportAddress
// return
await this.bc.checkPassportLogin(); await this.bc.checkPassportLogin();
const chainId = parseInt(import.meta.env.VUE_APP_NET_ID); const chainId = parseInt(import.meta.env.VUE_APP_NET_ID);
const { provider, address } = await this.bc.selectAddress({targetChainId: chainId}) const { provider, address } = await this.bc.selectAddress({targetChainId: chainId})
@ -30,6 +36,8 @@ export class GameItemMall {
net_id: chainId, net_id: chainId,
goods_id: itemId, goods_id: itemId,
account_address: address, account_address: address,
// passport: '',
} }
const { errocode, errmsg, calls } = await apiPreRecharge(preDatas) const { errocode, errmsg, calls } = await apiPreRecharge(preDatas)
if (errocode) { if (errocode) {

View File

@ -178,8 +178,23 @@ export const apiRechargeHistory = async (account_address) => {
return httpPost(url, {}) return httpPost(url, {})
} }
// 消耗记录
export const apiDiamondHistory = async (account_address) => {
const url = `${API_BASE}/api/activity/diamond/history/${account_address}`
return httpGet(url, {})
}
// 充值-购买 // 充值-购买
export const apiPreRecharge = async (data) => { export const apiPreRecharge = async (data) => {
const url = `${API_BASE}/api/recharge/buy` const url = `${API_BASE}/api/recharge/buy`
return httpPost(url, data) return httpPost(url, data)
} }
// 充值打点
export const apiGameLog = async (data) => {
console.log(data)
// return
const url = `https://gamelog-test.kingsome.cn/webapp/index.php?c=GameLog&a=customReport`
return httpPost(url,data)
}