1359 lines
71 KiB
HTML
1359 lines
71 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="description" content="PYXEL || Ultimate Gaming HTML Template">
|
||
|
||
<title>Samsara DAO</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
|
||
<!-- All CSS files -->
|
||
<link rel="stylesheet" href="static/css/font-awesome.css">
|
||
<link rel="stylesheet" href="static/css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="static/css/nftdetail.css">
|
||
<link rel="stylesheet" href="static/css/app.css">
|
||
<link rel="stylesheet" href="static/js/element-ui-min.css">
|
||
<style>
|
||
.paynft_dialog .el-dialog__header {
|
||
padding: 10px;
|
||
text-align: center;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.paynft_dialog .el-dialog__body {
|
||
padding: 15px;
|
||
}
|
||
|
||
.dialog-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.item-info, .total-amount {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.item-info{
|
||
background-color: rgba(216,216,216,0.2);
|
||
padding: 15px;
|
||
box-sizing: border-box;
|
||
border-radius: 15px;
|
||
margin-top: 10px;
|
||
}
|
||
.item-avatar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.item-avatar img {
|
||
width: 7vh;
|
||
height: 7vh;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.item-name {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.item-id {
|
||
color: #999;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.item-price, .total-price {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.price-icon {
|
||
background-color: #4080ff;
|
||
color: white;
|
||
border-radius: 50%;
|
||
width: 16px;
|
||
height: 16px;
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.price-value {
|
||
font-weight: bold;
|
||
color: #446FFA;
|
||
}
|
||
|
||
.price-change {
|
||
color: #999;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.total-amount {
|
||
padding: 10px 0;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
.description {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.price-zero {
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.recharge {
|
||
color: #4080ff;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.confirm-btn {
|
||
width: 100%;
|
||
height: 40px;
|
||
border-radius: 20px;
|
||
background-color: #4080ff;
|
||
border-color: #4080ff;
|
||
}
|
||
.meiyuan_dia{
|
||
width: 1.5vh;
|
||
height: 1.5vh;
|
||
margin-right: 5px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="tt-smooth-scroll">
|
||
<!-- Main Wrapper Start -->
|
||
<div id="app">
|
||
|
||
<!-- HEADER MENU START -->
|
||
<div id="publickHeader"></div>
|
||
<!-- HEADER MENU END -->
|
||
|
||
<!-- BG-GAME PAGE # 1 START -->
|
||
<div class="page_trading_detail">
|
||
<div class="p_t_d_box">
|
||
<div class="p_b_header">
|
||
<div class="p_b_h_left">
|
||
<img :src="baseUrl + topnftInfos.img" class="p_b_h_left_icon">
|
||
<div>
|
||
<div class="detail_left_title">
|
||
<h5>{{ currentLanguage == 'zh' ? topnftInfos.title_cn : topnftInfos.title_en }}</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p_b_h_right">
|
||
<div style="border-radius: 10px 0 0 10px;">
|
||
<div>{{ currentLanguage == 'zh' ? '總交易額(BNB)' : 'Total transaction amount(BNB)' }}</div>
|
||
<div><span>{{ topnftInfos.allsalefee }}</span></div>
|
||
</div>
|
||
<div>
|
||
<div>{{ currentLanguage == 'zh' ? '地板價(BNB)' : 'Floor Price(BNB)' }}</div>
|
||
<div><span>{{ topnftInfos.minsalefee }}</span></div>
|
||
</div>
|
||
<div>
|
||
<div>{{ currentLanguage == 'zh' ? '持有者' : 'Holder' }}</div>
|
||
<div><span>{{ topnftInfos.ownnum }}</span></div>
|
||
</div>
|
||
<div style="border-radius: 0 10px 10px 0;">
|
||
<div>{{ currentLanguage == 'zh' ? 'NFT數量' : 'NFT quantity' }}</div>
|
||
<div><span>{{ topnftInfos.nftnum }}</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="trading_d_main">
|
||
<el-tabs v-model="activeName" @tab-click="tradingTabChange">
|
||
<el-tab-pane :label="currentLanguage == 'zh' ? 'NFT交易' : 'NFT Trading'" name="first">
|
||
<div class="cp_header">
|
||
<div>
|
||
<el-input :placeholder="currentLanguage == 'zh' ? '搜索NFT':'Search NFTs'" @blur="getNftList" prefix-icon="el-icon-search"
|
||
v-model="searchNft"></el-input>
|
||
</div>
|
||
<div class="selct_price">
|
||
<el-select v-model="searchNftSelect" :placeholder="currentLanguage == 'zh' ? '請選擇':'Please select'">
|
||
<el-option :label="currentLanguage == 'zh' ? '價格從低到高':'Price Low to High'" value="1"></el-option>
|
||
<el-option :label="currentLanguage == 'zh' ? '價格從高到低':'Price High to Low'" value="2"></el-option>
|
||
<el-option :label="currentLanguage == 'zh' ? '最新上架':'New Arrivals'" value="3"></el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="cp_main">
|
||
<div class="cp_main_left">
|
||
<el-collapse v-model="activeNames">
|
||
<el-collapse-item :title="currentLanguage == 'zh' ? '裝備類型' : 'Equipment Type'" name="1">
|
||
<div class="c_m_l_type">
|
||
<div
|
||
v-for="item in equipmentType"
|
||
:key="item.id"
|
||
:style="{
|
||
'background-color': selectEqType == item.id ? '#409eff' : '#fff',
|
||
'color': selectEqType == item.id ? '#fff' : '#5F6067'
|
||
}"
|
||
@click="searchEqList(item.id)"
|
||
>
|
||
{{ currentLanguage == 'zh' ? item.name_cn : item.name_en }}
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
<el-collapse-item :title="currentLanguage == 'zh' ? '等級' : 'grade'" name="2">
|
||
<div class="c_m_l_type">
|
||
<div>70</div>
|
||
<div>60</div>
|
||
<div>50</div>
|
||
<div>40</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</div>
|
||
<div class="cp_main_right">
|
||
<div class="item_box">
|
||
<div class="nft_item"
|
||
v-for="item in transactionList.data"
|
||
:key="item.id"
|
||
>
|
||
<div class="c_m_p_all_detail">
|
||
<div class="c_m_r_title">
|
||
<img :src="baseUrl + item.tpl_info.img" alt="">
|
||
<div>
|
||
<div>{{ currentLanguage == 'zh' ? item.tpl_info.title_cn : item.tpl_info.title_en }}</div>
|
||
<div style="color: #000;font-weight: 700;">{{ currentLanguage == 'zh' ? item.tpl_info.name_cn : item.tpl_info.name_en }}</div>
|
||
<div style="color: #000;">#{{ item.tokenId }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="c_m_r_infos" style="height: 15vh;overflow: hidden;" v-html="currentLanguage == 'zh' ? item.tpl_info.desc_cn : item.tpl_info.desc_en"></div>
|
||
<div class="c_m_r_infos" style="margin-top: 2vh;">
|
||
<div>{{ currentLanguage == 'zh' ? '價格':'price' }}</div>
|
||
<div class="c_m_r_price">{{ item.salefee }} BNB</div>
|
||
</div>
|
||
<div class="c_m_r_infos">
|
||
<div>{{ currentLanguage == 'zh' ? 'GAS費':'GAS Fee' }}</div>
|
||
<div class="c_m_r_price">{{ item.gasfee }} BNB</div>
|
||
</div>
|
||
</div>
|
||
<button @click.prevent="payNft(item)" class="c_m_r_pryBtn"><i class="el-icon-shopping-cart-2"
|
||
style="font-size: 20px;margin-right: 8px;"></i>{{ currentLanguage == 'zh' ? '立即購買':'Buy it now' }}</button>
|
||
</div>
|
||
</div>
|
||
<div style="height: 60px;display: flex;justify-content: flex-end;align-items: center;">
|
||
<el-pagination background layout="prev, pager, next" :page-size="8"
|
||
@current-change="handleCurrentChange" :total="transactionList.total">
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<!-- <el-tab-pane :label="currentLanguage == 'zh' ? '我的收藏' : 'My Collection'" name="second">
|
||
<div class="cp_main">
|
||
<div class="cp_main_left">
|
||
<div class="cp_header">
|
||
<div style="width: 100%;">
|
||
<el-input :placeholder="currentLanguage == 'zh' ? '搜索NFT':'Search NFTs'" prefix-icon="el-icon-search"
|
||
v-model="searchNft"></el-input>
|
||
</div>
|
||
</div>
|
||
<el-collapse v-model="activeNames">
|
||
<el-collapse-item :title="currentLanguage == 'zh' ? '裝備類型' : 'Equipment Type'" name="1">
|
||
<div class="c_m_l_type">
|
||
<div
|
||
v-for="item in equipmentType"
|
||
:key="item.id"
|
||
:style="{
|
||
'background-color':selectEqType == item.id ? '#409eff' : '#fff',
|
||
'color':selectEqType == item.id ? '#fff' : '#5F6067'
|
||
}"
|
||
>
|
||
{{ currentLanguage == 'zh' ? item.name_cn : item.name_en }}
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
<el-collapse-item :title="currentLanguage == 'zh' ? '等級' : 'grade'" name="2">
|
||
<div class="c_m_l_type">
|
||
<div>70</div>
|
||
<div>60</div>
|
||
<div>50</div>
|
||
<div>40</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</div>
|
||
<div class="cp_main_right">
|
||
<div class="item_box">
|
||
<div class="nft_item">
|
||
<div class="c_m_p_all_detail">
|
||
<div class="c_m_r_title">
|
||
<img src="static/ui/trading/shop.png" alt="">
|
||
<div>
|
||
<div>遊戲裝備</div>
|
||
<div style="color: #000;font-weight: 700;">雙手斧頭</div>
|
||
<div style="color: #000;">#0544646641</div>
|
||
</div>
|
||
</div>
|
||
<div class="c_m_r_infos">
|
||
<div>物品等級</div>
|
||
<div>30</div>
|
||
</div>
|
||
<div class="c_m_r_infos">
|
||
<div>混沌物品來源</div>
|
||
<div>盯130</div>
|
||
</div>
|
||
<div class="c_m_r_infos">
|
||
<div>財寶值</div>
|
||
<div>6</div>
|
||
</div>
|
||
<div class="c_m_r_infos">
|
||
<div>混沌能量</div>
|
||
<div>6216</div>
|
||
</div>
|
||
<div class="c_m_r_infos">
|
||
<div>混沌屬性</div>
|
||
<div>武器攻擊暴擊度 +27%,最終傷害 +10%</div>
|
||
</div>
|
||
<div class="c_m_r_infos">
|
||
<div>混沌詞綴</div>
|
||
<div>[T5]武器傷害強化+39%</div>
|
||
</div>
|
||
<div class="c_m_r_price"><img src="static/ui/meiyuan.png">5000M</div>
|
||
</div>
|
||
<button class="c_m_r_pryBtn"><i class="el-icon-shopping-cart-2"
|
||
style="font-size: 20px;margin-right: 8px;"></i>立即購買</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane> -->
|
||
<el-tab-pane :label="currentLanguage == 'zh' ? 'NFT求購' : 'NFT Purchase'" name="third">
|
||
<div class="cp_main">
|
||
<div class="cp_main_left">
|
||
<div class="cp_header">
|
||
<div style="width: 100%;">
|
||
<el-input :placeholder="currentLanguage == 'zh' ? '搜索NFT':'Search NFTs'" prefix-icon="el-icon-search"
|
||
v-model="searchNft"></el-input>
|
||
</div>
|
||
</div>
|
||
<el-collapse v-model="buyActiveNames">
|
||
<el-collapse-item :title="currentLanguage == 'zh' ? '裝備類型' : 'Equipment Type'" name="1">
|
||
<div class="c_m_l_type">
|
||
<div
|
||
v-for="item in equipmentType"
|
||
:key="item.id"
|
||
:style="{
|
||
'background-color': buySelectEqType == item.id ? '#409eff' : '#fff',
|
||
'color': buySelectEqType == item.id ? '#fff' : '#5F6067'
|
||
}"
|
||
@click="buySelectEqTypeSearch(item)"
|
||
>
|
||
{{ currentLanguage == 'zh' ? item.name_cn : item.name_en }}
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
<el-collapse-item :title="currentLanguage == 'zh' ? '等級' : 'grade'" name="2">
|
||
<div class="c_m_l_type">
|
||
<div>70</div>
|
||
<div>60</div>
|
||
<div>50</div>
|
||
<div>40</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</div>
|
||
<div class="cp_main_right nft_purchase card-container">
|
||
<div class="card-header">
|
||
<div class="item-image">
|
||
<img :src="baseUrl + buySelectEqObj.img" alt="双手斧头">
|
||
</div>
|
||
<div class="card-item-info">
|
||
<div class="item-title"><h5>{{ currentLanguage == 'zh' ? topnftInfos.title_cn : topnftInfos.title_en }}</h5></div>
|
||
<div class="item-id">{{ currentLanguage == 'zh' ? buySelectEqObj.name_cn : buySelectEqObj.name_en }}</div>
|
||
<div class="item-id" v-html="currentLanguage == 'zh' ? buySelectEqObj.desc_cn : buySelectEqObj.desc_en"></div>
|
||
</div>
|
||
<div class="action-buttons">
|
||
<el-button size="mini" class="action-buttons-item" @click="chuDialogVisible = true" icon="el-icon-sell">{{ currentLanguage == 'zh' ? '出價' : 'bid'}}</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="main-content">
|
||
<div class="table-section">
|
||
<div class="tab-container">
|
||
<el-tabs v-model="buyActiveTab">
|
||
<el-tab-pane :label="currentLanguage == 'zh' ? '出價訂單':'Bid Order'" name="bids">
|
||
<div style="width: 100%;min-height: calc(48vh - 60px);">
|
||
<el-table :data="purchTableData.data" style="width: 100%;">
|
||
<el-table-column prop="bnb" :label="currentLanguage == 'zh' ? '出價(BNB)':'Bid(BNB)'">
|
||
</el-table-column>
|
||
<el-table-column prop="username" :label="currentLanguage == 'zh' ? '來自':'From'"></el-table-column>
|
||
<el-table-column :label="currentLanguage == 'zh' ? '過期時間':'Expiration time'">
|
||
<template slot-scope="scope">{{ expirationTimeOp(scope.row.vaildtime * 1000) }}</template>
|
||
</el-table-column>
|
||
<el-table-column :label="currentLanguage == 'zh' ? '操作':'operate'">
|
||
<template slot-scope="scope">
|
||
<!-- id -->
|
||
<el-button type="text" size="small"
|
||
@click="tradePurchase(scope.row)"
|
||
style="color: #409EFF;">{{ currentLanguage == 'zh' ? '交易' : 'trade'}}</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div style="height: 60px;display: flex;justify-content: flex-end;align-items: center;width: 100%;">
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
@current-change="purchHandleCurrentChange"
|
||
:total="purchTableData.total"
|
||
>
|
||
</el-pagination>
|
||
</div>
|
||
</el-tab-pane>
|
||
<!-- 交易动态 -->
|
||
<!-- <el-tab-pane :label="currentLanguage == 'zh' ? '交易動態':'Trading Dynamics'" name="history">
|
||
<div style="width: 100%;min-height: calc(48vh - 60px);">
|
||
<el-table :data="purchTableData.data" style="width: 100%;">
|
||
<el-table-column prop="bnb" label="成交时间">
|
||
</el-table-column>
|
||
<el-table-column prop="bnb" label="名称">
|
||
</el-table-column>
|
||
<el-table-column prop="username" label="数量"></el-table-column>
|
||
<el-table-column label="成交价格">
|
||
</el-table-column>
|
||
<el-table-column label="类型">
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div style="height: 60px;display: flex;justify-content: flex-end;align-items: center;width: 100%;">
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
:page-size="20"
|
||
@current-change="purchHandleCurrentChange"
|
||
:total="purchTableData.total"
|
||
>
|
||
</el-pagination>
|
||
</div>
|
||
</el-tab-pane> -->
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- BG-GAME PAGE # 1 END -->
|
||
|
||
<!-- FOOTER START -->
|
||
<div id="publciFooter"></div>
|
||
<!-- FOOTER END -->
|
||
<!-- 錢包選擇彈窗 -->
|
||
<el-dialog :visible.sync="moneyDialogVisible" width="40%" custom-class="wallet-dialog">
|
||
<div class="wallet-container">
|
||
<i class="el-icon-close" @click="moneyDialogVisible = false"></i>
|
||
<div class="wallet-left">
|
||
<h6 style="font-weight: 700;margin-bottom: 4vh;">{{currentLanguage == 'zh' ? '連接錢包' : 'Connect wallet'}}</h6>
|
||
<p class="wallet-tip">
|
||
{{ currentLanguage == 'zh' ? '首先，連接以下其中一個錢包。 請務必安全地儲存您的私密金鑰或助記詞，永遠不要與任何人分享它們。' :'Firstly,connect one of the following wallets. Please make sure to securely store your private keys or mnemonics and never share them with anyone.' }}
|
||
</p>
|
||
|
||
<div class="wallet-grid">
|
||
<div v-for="(wallet,index) in wallets" :key="index" class="wallet-item"
|
||
@click="selectWallet(wallet)">
|
||
<img :src="wallet.icon" :alt="wallet.name">
|
||
<span>{{ wallet.name }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wallet-right" v-if="selectMoney.icon">
|
||
<div class="connecting-status">
|
||
<img :src="selectMoney.icon" class="tp-logo">
|
||
<p class="status-text">{{ currentLanguage == 'zh' ? '正在打開' : 'Opening' }} {{selectMoney.name}}
|
||
</p>
|
||
<p class="confirm-text">
|
||
{{ currentLanguage == 'zh' ? '請在' : 'Please in' }}
|
||
{{selectMoney.name}}
|
||
{{ currentLanguage == 'zh' ? '中確認' : 'Confirm in the middle' }}</p>
|
||
</div>
|
||
</div>
|
||
<div v-else style="display: flex;justify-content: center;align-items: center;width: 50%;">{{
|
||
moneyTip(moneyTipMessage) }}</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 錢包地址彈窗 -->
|
||
<el-dialog :visible.sync="showMoneyAdress" width="30%" :close-on-click-modal="false">
|
||
<div style="color: #000;">
|
||
{{ currentLanguage == 'zh' ? '錢包地址：' : 'Wallet address：' }}
|
||
{{ userMoneyAdressAll }}
|
||
<img src="static/image/fuzhi.png" @click="copyText(userMoneyAdressAll)"
|
||
style="margin-left: 5px;vertical-align: middle;cursor: pointer;">
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 購買NFT彈窗 -->
|
||
<el-dialog :visible.sync="payNFTDialog" :title="currentLanguage == 'zh' ? '確定購買' : 'Confirm purchase'" width="20%" custom-class="paynft_dialog"
|
||
:close-on-click-modal="false">
|
||
<div style="display: flex;justify-content: space-between;">
|
||
<span>{{ currentLanguage == 'zh' ? '合集' : 'Collection' }}</span>
|
||
<span>{{ currentLanguage == 'zh' ? paynftObj.tpl_info?.title_cn : paynftObj.tpl_info?.title_en }}</span>
|
||
</div>
|
||
<div class="dialog-content">
|
||
<!-- 頭部信息 -->
|
||
<div class="item-info">
|
||
<div class="item-avatar">
|
||
<img :src="baseUrl + paynftObj.tpl_info?.img">
|
||
<div class="item-details">
|
||
<div class="item-name">{{ currentLanguage == 'zh' ? paynftObj.tpl_info?.name_cn : paynftObj.tpl_info?.name_en }}</div>
|
||
<div class="item-id">#{{ paynftObj.tokenId }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="item-price">
|
||
<span class="price-value">{{ paynftObj.salefee }} BNB</span>
|
||
</div>
|
||
</div>
|
||
<div v-html="currentLanguage == 'zh' ? paynftObj.tpl_info?.desc_cn : paynftObj.tpl_info?.desc_en"></div>
|
||
<!-- 總金額 -->
|
||
<div class="total-amount">
|
||
<div class="total-label">{{ currentLanguage == 'zh' ? '總金額' : 'lump sum' }}</div>
|
||
<div class="total-price">
|
||
<span class="price-value">{{ paynftObj.salefee }} + {{ paynftObj.gasfee }} BNB</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 確定按鈕 -->
|
||
<el-button type="primary" class="confirm-btn" @click="confirmPayment">{{ currentLanguage == 'zh' ? '確定' : 'Sure' }}</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 出价弹窗 -->
|
||
<el-dialog :title="currentLanguage == 'zh' ? '出價' : 'bid'" :visible.sync="chuDialogVisible" width="25%" custom-class="bid-dialog" :show-close="true"
|
||
center>
|
||
<div class="price-section">
|
||
<div class="section-title">{{ currentLanguage == 'zh' ? '設定價格' : 'Set your price'}}</div>
|
||
<el-input v-model="purchPrice" :placeholder="currentLanguage == 'zh' ? '請輸入求購價格':'Please enter the purchase price'" class="price-input"></el-input>
|
||
</div>
|
||
|
||
<div class="duration-section">
|
||
<div class="section-title">{{ currentLanguage == 'zh' ? '設定時間' : 'Set time'}}</div>
|
||
<div class="duration-options">
|
||
<el-radio-group v-model="setimeCycle">
|
||
<el-radio :label="1">{{ currentLanguage == 'zh' ? '1天' : '1 day'}}</el-radio>
|
||
<el-radio :label="3">{{ currentLanguage == 'zh' ? '3天' : '3 day'}}</el-radio>
|
||
<el-radio :label="5">{{ currentLanguage == 'zh' ? '5天' : '5 day'}}</el-radio>
|
||
<el-radio :label="7">{{ currentLanguage == 'zh' ? '一周' : 'One week'}}</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="purchaseRequest" class="confirm-btn" round>{{ currentLanguage == 'zh' ? '確定' : 'Sure'}}</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 收款弹窗 -->
|
||
<el-dialog :title="currentLanguage == 'zh' ? '收款' : 'Receiving Payments'" :visible.sync="receivDialogVisible" width="25%" custom-class="bid-dialog" :show-close="true"
|
||
center>
|
||
<div class="price-section">
|
||
<div class="section-title">{{ currentLanguage == 'zh' ? '收款地址' : 'Payment address'}}</div>
|
||
<el-input v-model="receivAdress" :placeholder="currentLanguage == 'zh' ? '請輸入收款地址':'Please enter the payment address'" class="price-input"></el-input>
|
||
</div>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="submitTradeInfo" class="confirm-btn" round>{{ currentLanguage == 'zh' ? '確定' : 'Sure'}}</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
<!-- Main Wrapper End -->
|
||
|
||
<!-- Back To Top Start -->
|
||
<button class="scrollToTopBtn"><i class="fa fa-arrow-up"></i></button>
|
||
<!-- Mobile Menu Start -->
|
||
<div class="mobile-nav__wrapper">
|
||
<div class="mobile-nav__overlay mobile-nav__toggler"></div>
|
||
<div class="mobile-nav__content">
|
||
<span class="mobile-nav__close mobile-nav__toggler"><i class="fa fa-times"></i></span>
|
||
<div class="logo-box">
|
||
<a href="index.html" aria-label="logo image"><img src="static/picture/logo.png" alt=""></a>
|
||
</div>
|
||
<div class="mobile-nav__container"></div>
|
||
</div>
|
||
</div>
|
||
<!-- Mobile Menu End -->
|
||
<!-- Jquery Js -->
|
||
<script src="static/js/bootstrap.min.js"></script>
|
||
<script src="static/js/jquery-3.6.3.min.js"></script>
|
||
<script src="static/js/publickDOM.js"></script>
|
||
<!-- 引入翻譯文件 -->
|
||
<script src="static/js/translation.js"></script>
|
||
<script src="static/js/i18n.js"></script>
|
||
<!-- 獲取用戶信息 -->
|
||
<script src="static/js/getIsUser.js"></script>
|
||
<!-- 引入 Vue.js -->
|
||
<script src="static/js/vue.js"></script>
|
||
<!-- 引入 axios -->
|
||
<script src="static/js/axios.min.js"></script>
|
||
<!-- 引入 Element UI JS -->
|
||
<script src="static/js/element-ui.js"></script>
|
||
<!-- 引入 Echarts -->
|
||
<script src="static/js/echarts.min.js"></script>
|
||
<script>
|
||
// 創建一個增強版的 localStorage
|
||
const enhancedStorage = {
|
||
setItem: function (key, value) {
|
||
localStorage.setItem(key, value);
|
||
// 觸發自定義事件
|
||
window.dispatchEvent(new CustomEvent('localStorageChange', {
|
||
detail: { key, value }
|
||
}));
|
||
},
|
||
getItem: function (key) {
|
||
return localStorage.getItem(key);
|
||
}
|
||
};
|
||
|
||
// 替換原始的 setItem 方法
|
||
const originalSetItem = localStorage.setItem;
|
||
localStorage.setItem = function (key, value) {
|
||
originalSetItem.call(localStorage, key, value);
|
||
window.dispatchEvent(new CustomEvent('localStorageChange', {
|
||
detail: { key, value }
|
||
}));
|
||
};
|
||
|
||
new Vue({
|
||
el: "#app",
|
||
data() {
|
||
return {
|
||
nowPurchOrderObj:{},
|
||
receivDialogVisible:false,
|
||
receivAdress:"",
|
||
purchTableData: {},
|
||
purchSearchObj:{
|
||
page:1,
|
||
listrow:10
|
||
},
|
||
purchPrice:"",
|
||
setimeCycle: 1,
|
||
buySelectEqObj:{},//求购装备类型
|
||
chuDialogVisible:false,
|
||
buyActiveTab:"bids",
|
||
buyActiveNames:[],
|
||
buySelectEqType:"",
|
||
tradingSelect:"1",
|
||
searchObj:{
|
||
page:1,
|
||
pageSize:8
|
||
},
|
||
paynftObj:{},//当前购买的nft
|
||
transactionList:{},
|
||
topnftInfos:{},
|
||
searchNft:"",
|
||
searchNftSelect:"3",
|
||
selectEqType:"",
|
||
equipmentType:[],//裝備類型
|
||
nownftId:"",//nft合集id
|
||
userInfos:{},
|
||
payNFTDialog: false,
|
||
activeNames: [],
|
||
activeName: "first",
|
||
// 錢包登錄開始
|
||
connectWalletType: "",
|
||
userMoneyAdressAll: "",
|
||
showMoneyAdress: false,
|
||
hasAdress: false,
|
||
moneyTipMessage: "",
|
||
selectMoney: {},
|
||
wallets: [
|
||
{
|
||
name: 'MetaMask',
|
||
icon: 'static/metamask.png'
|
||
},
|
||
{
|
||
name: 'TokenPocket',
|
||
icon: 'static/tokenpocket.png'
|
||
},
|
||
{
|
||
name: 'OKX Wallet',
|
||
icon: 'static/okx-wallet.png'
|
||
}
|
||
],
|
||
moneyDialogVisible: false,
|
||
userIsLogin: false,
|
||
userMoneyAdress: "",
|
||
// 錢包登錄結尾
|
||
currentLanguage: localStorage.getItem('languageNow') || 'en',
|
||
baseUrl,
|
||
}
|
||
},
|
||
async created() {
|
||
let user = window.localStorage.getItem("userInfo");
|
||
this.userInfos = JSON.parse(user);
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
this.nownftId = urlParams.get('id');
|
||
this.selectEqType = urlParams.get('typeId');
|
||
if (user) {
|
||
this.userIsLogin = true;
|
||
}
|
||
// 錢包登錄開始
|
||
const provider = window.web3?.currentProvider;
|
||
let accounts1 = [];
|
||
let accounts2 = [];
|
||
let accounts3 = [];
|
||
if(provider){
|
||
accounts1 = await provider.request({method: 'eth_accounts'});
|
||
}
|
||
if(window.tokenpocket?.ethereum){
|
||
accounts2 = await window.tokenpocket.ethereum.request({method: 'eth_accounts'});
|
||
}
|
||
if(window.okxwallet || (window.ethereum && window.ethereum?.isOKExWallet)){
|
||
accounts3 = await window.okxwallet.request({method: 'eth_accounts'});
|
||
}
|
||
console.log(accounts1,accounts2,accounts3,'see');
|
||
let _adressM = accounts1[0] || accounts2[0] || accounts3[0];
|
||
if(_adressM){
|
||
this.userMoneyAdressAll = _adressM;
|
||
this.userMoneyAdress = _adressM.slice(0,4) + "...." + _adressM.slice(-4);
|
||
}
|
||
if(accounts1[0]?.length > 0){
|
||
this.connectWalletType = "MetaMask";
|
||
}
|
||
if(accounts2[0]?.length > 0){
|
||
this.connectWalletType = "TokenPocket";
|
||
}
|
||
if(accounts3[0]?.length > 0){
|
||
this.connectWalletType = "OKX Wallet";
|
||
}
|
||
// 錢包登錄結尾
|
||
},
|
||
mounted() {
|
||
window.addEventListener('localStorageChange', (event) => {
|
||
if (event.detail.key === 'languageNow') {
|
||
this.currentLanguage = event.detail.value;
|
||
}
|
||
});
|
||
//獲取nft列表
|
||
this.getNftList();
|
||
//獲取合集類型
|
||
this.getnftTypeList();
|
||
},
|
||
watch:{
|
||
searchNftSelect:{
|
||
handler(val){
|
||
this.getNftList();
|
||
}
|
||
},
|
||
},
|
||
methods: {
|
||
async submitTradeInfo(){
|
||
let adrMessage = this.currentLanguage == 'zh' ? '收款地址不能為空' : 'The payment address cannot be empty';
|
||
if(!this.receivAdress){
|
||
this.$message.error(adrMessage);
|
||
return
|
||
}
|
||
let _that = this;
|
||
let message1 = _that.currentLanguage == 'zh' ? '請連接錢包' : 'Please connect the wallet';
|
||
if(!_that.userMoneyAdressAll){
|
||
_that.$message.error(message1);
|
||
setTimeout(()=>{
|
||
_that.moneyDialogVisible = true;
|
||
},1000)
|
||
return
|
||
}
|
||
let isOpenTrade = await _that.isHaveNft();
|
||
console.log(isOpenTrade,'信息');
|
||
if(typeof isOpenTrade == 'string'){
|
||
_that.$message.error(isOpenTrade);
|
||
return
|
||
}
|
||
let tip = this.currentLanguage == 'zh' ? '提示' : 'tips';
|
||
let confirm = this.currentLanguage == 'zh' ? '確定' : 'confirm';
|
||
let cancel = this.currentLanguage == 'zh' ? '取消' : 'cancel';
|
||
let tipmessage = _that.currentLanguage == 'zh' ? `請前往支付版權費(${isOpenTrade.revfee} BNB)` : `Please go to pay the copyright fee ${isOpenTrade.revfee} BNB`;
|
||
_that.$confirm(tipmessage, tip, {
|
||
confirmButtonText: confirm,
|
||
cancelButtonText: cancel,
|
||
type: 'warning'
|
||
}).then(() => {
|
||
_that.receivDialogVisible = false;
|
||
_that.receivAdress = "";
|
||
let tipMessage1 = _that.currentLanguage == 'zh' ? '交易中，請勿刷新頁面...' : 'During the transaction, please do not refresh the page';
|
||
_that.orderLoading = _that.$loading({ lock: true, text: tipMessage1, spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
|
||
_that.payPurchRevFee(isOpenTrade);
|
||
}).catch(() => {
|
||
_that.$message("Failed");
|
||
});
|
||
},
|
||
tradePurchase(item){
|
||
this.receivDialogVisible = true;
|
||
this.nowPurchOrderObj = {...item};
|
||
},
|
||
async payPurchRevFee(item){
|
||
let _that = this;
|
||
const provider = window.web3?.currentProvider;
|
||
let web3 = null;
|
||
if(this.connectWalletType == "MetaMask"){
|
||
web3 = new Web3(provider);
|
||
await provider.request({method: 'eth_requestAccounts'});
|
||
}
|
||
if(this.connectWalletType == "TokenPocket"){
|
||
web3 = new Web3(window.tokenpocket.ethereum);
|
||
await window.tokenpocket.ethereum.request({method: 'eth_requestAccounts'});
|
||
}
|
||
if(this.connectWalletType == "OKX Wallet"){
|
||
web3 = new Web3(window.okxwallet);
|
||
await window.okxwallet.request({method: 'eth_requestAccounts'});
|
||
}
|
||
try {
|
||
const transactions = {
|
||
from: _that.userMoneyAdressAll,
|
||
to: item.toaddress,
|
||
value: web3.utils.toWei(item.revfee, 'ether'),
|
||
gas: 21000
|
||
};
|
||
|
||
const result = await web3.eth.sendTransaction(transactions);
|
||
|
||
if(result.transactionHash){
|
||
this.submitPurchFeeHash(item.id,result.transactionHash);
|
||
}else{
|
||
let canaltip = this.currentLanguage == 'zh' ? '交易失敗！' : 'Transaction failed!';
|
||
this.$message.error(canaltip);
|
||
this.orderLoading.close();
|
||
window.location.href = "all-order.html";
|
||
}
|
||
} catch (error) {
|
||
console.log(error,'交易失败原因');
|
||
let canaltip = this.currentLanguage == 'zh' ? '交易失敗！' : 'Transaction failed!';
|
||
this.$message.error(canaltip);
|
||
this.orderLoading.close();
|
||
window.location.href = "all-order.html";
|
||
}
|
||
},
|
||
submitPurchFeeHash(wtbid,tx){
|
||
let _that = this;
|
||
try {
|
||
$.ajax({
|
||
url: `${baseUrl}api/project/wtbrevpayres`,
|
||
type: "post",
|
||
data: {wtbid,tx},
|
||
headers: {
|
||
token: _that.userInfos.token
|
||
},
|
||
success(res){
|
||
if (res.code === 1) {
|
||
_that.orderLoading.close();
|
||
let resultMsg = _that.currentLanguage == 'zh' ? '交易成功' : 'Successful transaction';
|
||
_that.$message.success(resultMsg);
|
||
setTimeout(()=>{
|
||
window.location.href = "all-order.html";
|
||
},1500)
|
||
} else {
|
||
_that.$message.error(err)
|
||
_that.orderLoading.close();
|
||
window.location.href = "all-order.html";
|
||
}
|
||
},
|
||
error(err) {
|
||
_that.$message.error(err)
|
||
window.location.href = "all-order.html";
|
||
}
|
||
})
|
||
} catch (error) {
|
||
_that.$message.error(error)
|
||
_that.orderLoading.close();
|
||
}
|
||
},
|
||
//判断是否有相应的NFT
|
||
isHaveNft(){
|
||
let _that = this;
|
||
return new Promise((resolve, reject) => {
|
||
$.ajax({
|
||
url:`${baseUrl}api/project/wtbsend`,
|
||
headers:{token: _that.userInfos.token},
|
||
data:{
|
||
wtbid: _that.nowPurchOrderObj.id,
|
||
saleaddress: _that.receivAdress
|
||
},
|
||
success(res){
|
||
if(res.code === 1){
|
||
resolve(res.data)
|
||
}else{
|
||
resolve(res.msg)
|
||
}
|
||
},
|
||
error(xhr,status,error){
|
||
reject(error)
|
||
}
|
||
});
|
||
})
|
||
},
|
||
expirationTimeOp(timestamp){
|
||
const date = new Date(timestamp); // 创建 Date 对象
|
||
const year = date.getFullYear(); // 获取年份
|
||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，注意月份从0开始
|
||
const day = String(date.getDate()).padStart(2, '0'); // 获取日期
|
||
const hours = String(date.getHours()).padStart(2, '0'); // 获取小时
|
||
const minutes = String(date.getMinutes()).padStart(2, '0'); // 获取分钟
|
||
const seconds = String(date.getSeconds()).padStart(2, '0'); // 获取秒钟
|
||
|
||
// 返回格式化后的日期字符串
|
||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
},
|
||
purchHandleCurrentChange(val){
|
||
this.purchSearchObj.page = val;
|
||
this.getPurchasList();
|
||
},
|
||
getPurchasList(){
|
||
let _that = this;
|
||
_that.orderLoading = _that.$loading({ lock: true, text: 'loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
|
||
$.ajax({
|
||
url: `${baseUrl}api/project/getwtblist`,
|
||
headers:{
|
||
token: _that.userInfos.token
|
||
},
|
||
data:{
|
||
tid: _that.buySelectEqObj.id,
|
||
..._that.purchSearchObj
|
||
},
|
||
success(res){
|
||
if(res.code === 1){
|
||
_that.purchTableData = res.data;
|
||
_that.orderLoading.close();
|
||
}
|
||
},
|
||
error(err){
|
||
console.log(err);
|
||
}
|
||
});
|
||
},
|
||
purchaseRequest(){
|
||
let _that = this;
|
||
if(!_that.purchPrice || !_that.setimeCycle){
|
||
let inputVality = _that.currentLanguage == 'zh' ? '請輸入完整訊息' : 'Please enter complete information';
|
||
_that.$message.error(inputVality)
|
||
return
|
||
}
|
||
let message1 = _that.currentLanguage == 'zh' ? '請連接錢包' : 'Please connect the wallet';
|
||
let tip = this.currentLanguage == 'zh' ? '提示' : 'tips';
|
||
let confirm = this.currentLanguage == 'zh' ? '確定' : 'confirm';
|
||
let cancel = this.currentLanguage == 'zh' ? '取消' : 'cancel';
|
||
if(!_that.userMoneyAdressAll){
|
||
_that.$message.error(message1);
|
||
setTimeout(()=>{
|
||
_that.moneyDialogVisible = true;
|
||
},1000)
|
||
return
|
||
}
|
||
$.ajax({
|
||
url: `${baseUrl}api/project/wtbuy`,
|
||
headers:{
|
||
token: _that.userInfos.token
|
||
},
|
||
data:{
|
||
tid: _that.buySelectEqObj.id,
|
||
bnb: _that.purchPrice,
|
||
vaildtime: _that.setimeCycle
|
||
},
|
||
success(res){
|
||
if(res.code === 1){
|
||
let tipmessage = _that.currentLanguage == 'zh' ? `請前往支付求購費(${res.data.bnb} BNB)和GAS費(${res.data.gas} BNB)` : `Please go to pay the purchase fee ${res.data.bnb} and the GAS fee ${res.data.gas} BNB`;
|
||
_that.$confirm(tipmessage, tip, {
|
||
confirmButtonText: confirm,
|
||
cancelButtonText: cancel,
|
||
type: 'warning'
|
||
}).then(() => {
|
||
_that.chuDialogVisible = false;
|
||
let tipMessage = _that.currentLanguage == 'zh' ? '交易中，請勿刷新頁面...' : 'During the transaction, please do not refresh the page';
|
||
_that.orderLoading = _that.$loading({ lock: true, text: tipMessage, spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
|
||
_that.payPurchPrice(res.data);
|
||
}).catch(() => {
|
||
_that.$message("Failed");
|
||
});
|
||
}else{
|
||
_that.$message.error('fail')
|
||
}
|
||
},
|
||
error(err){
|
||
console.log(err);
|
||
}
|
||
});
|
||
},
|
||
async payPurchPrice(item){
|
||
let _that = this;
|
||
const provider = window.web3?.currentProvider;
|
||
let web3 = null;
|
||
if(this.connectWalletType == "MetaMask"){
|
||
web3 = new Web3(provider);
|
||
await provider.request({method: 'eth_requestAccounts'});
|
||
}
|
||
if(this.connectWalletType == "TokenPocket"){
|
||
web3 = new Web3(window.tokenpocket.ethereum);
|
||
await window.tokenpocket.ethereum.request({method: 'eth_requestAccounts'});
|
||
}
|
||
if(this.connectWalletType == "OKX Wallet"){
|
||
web3 = new Web3(window.okxwallet);
|
||
await window.okxwallet.request({method: 'eth_requestAccounts'});
|
||
}
|
||
let purchAmount = Number(item.bnb) + Number(item.gas);
|
||
try {
|
||
const transactions = {
|
||
from: _that.userMoneyAdressAll,
|
||
to: item.toaddress,
|
||
value: web3.utils.toWei(purchAmount, 'ether'),
|
||
gas: 21000
|
||
};
|
||
|
||
const result = await web3.eth.sendTransaction(transactions);
|
||
|
||
if(result.transactionHash){
|
||
this.submitPurchHash(item.id,result.transactionHash,_that.userMoneyAdressAll);
|
||
}else{
|
||
let canaltip = this.currentLanguage == 'zh' ? '交易失敗！' : 'Transaction failed!';
|
||
this.$message.error(canaltip);
|
||
this.orderLoading.close();
|
||
}
|
||
} catch (error) {
|
||
console.log(error,'交易失败原因');
|
||
let canaltip = this.currentLanguage == 'zh' ? '交易失敗！' : 'Transaction failed!';
|
||
this.$message.error(canaltip);
|
||
this.orderLoading.close();
|
||
}
|
||
},
|
||
submitPurchHash(id,tx,fromaddress){
|
||
console.log('交易ID：',id,'交易hash：',tx);
|
||
let _that = this;
|
||
try {
|
||
$.ajax({
|
||
url: `${baseUrl}api/project/wtbres`,
|
||
type: "post",
|
||
data: {id,tx,fromaddress},
|
||
headers: {
|
||
token: _that.userInfos.token
|
||
},
|
||
success(res){
|
||
if (res.code === 1) {
|
||
_that.orderLoading.close();
|
||
let resultMsg = _that.currentLanguage == 'zh' ? '發布求購成功' : 'Published purchase successfully';
|
||
_that.$message.success(resultMsg);
|
||
_that.purchPrice = "";
|
||
setTimeout(()=>{
|
||
_that.getPurchasList();
|
||
},1000)
|
||
} else {
|
||
_that.$message.error(err)
|
||
_that.orderLoading.close();
|
||
}
|
||
},
|
||
error(err) {
|
||
_that.$message.error(err)
|
||
}
|
||
})
|
||
} catch (error) {
|
||
_that.$message.error(error)
|
||
_that.orderLoading.close();
|
||
}
|
||
},
|
||
buySelectEqTypeSearch(item){
|
||
console.log(item,'详细');
|
||
this.buySelectEqType = item.id;
|
||
this.buySelectEqObj = {...item};
|
||
this.getPurchasList();
|
||
},
|
||
getNftList(){
|
||
let _that = this;
|
||
let sort = "";
|
||
let desc = "";
|
||
_that.searchNftSelect == 3 ? sort = 'time' : sort = 'fee'
|
||
_that.searchNftSelect == 2 ? desc = false : desc = true
|
||
this.orderLoading = _that.$loading({ lock: true, text: 'loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
|
||
let keywords_cn = "";
|
||
let keywords_en = "";
|
||
this.currentLanguage == 'zh' ? keywords_cn = this.searchNft : keywords_en = this.searchNft
|
||
$.ajax({
|
||
url:`${baseUrl}api/project/getenbuynftlist`,
|
||
type:'get',
|
||
data:{
|
||
keywords_cn,
|
||
keywords_en,
|
||
typeid: _that.nownftId,//分類ID
|
||
page: _that.searchObj.page,
|
||
listrow: _that.searchObj.pageSize,
|
||
tplid: _that.selectEqType,
|
||
sort,//排序：發佈時間time 價格fee
|
||
desc//true倒序 false正序
|
||
},
|
||
headers:{
|
||
token: _that.userInfos.token
|
||
},
|
||
success(res){
|
||
if(res.code === 1){
|
||
_that.topnftInfos = res.data.baseinfo;
|
||
_that.transactionList = res.data.list;
|
||
_that.orderLoading.close();
|
||
}
|
||
},
|
||
error(err){
|
||
console.log(err);
|
||
}
|
||
});
|
||
},
|
||
searchEqList(id){
|
||
this.selectEqType = id;
|
||
this.getNftList();
|
||
},
|
||
getnftTypeList(){
|
||
let _that = this;
|
||
$.ajax({
|
||
url:`${baseUrl}api/project/gettpllist?typeid=${this.nownftId}&showown=&listrow=9999`,
|
||
type:'get',
|
||
headers:{
|
||
token: _that.userInfos.token
|
||
},
|
||
success(res){
|
||
if(res.code === 1){
|
||
_that.equipmentType = res.data.data;
|
||
_that.buySelectEqType = _that.equipmentType[0].id;
|
||
_that.buySelectEqObj = _that.equipmentType[0];
|
||
}
|
||
},
|
||
error(err){
|
||
console.log(err);
|
||
}
|
||
});
|
||
},
|
||
toNftDetail(){
|
||
window.location.href = "nft-detail.html";
|
||
},
|
||
payNft(item){
|
||
this.paynftObj = {...item};
|
||
this.payNFTDialog = true;
|
||
},
|
||
confirmPayment() {
|
||
let message = this.currentLanguage == 'zh' ? '請連接錢包' : 'Please connect the wallet';
|
||
if(!this.userMoneyAdressAll){
|
||
this.$message.error(message);
|
||
setTimeout(()=>{
|
||
this.moneyDialogVisible = true;
|
||
},1000)
|
||
return
|
||
}
|
||
this.creatOrder();
|
||
},
|
||
creatOrder(){
|
||
let _that = this;
|
||
$.ajax({
|
||
url: `${baseUrl}api/project/buynft`,
|
||
type: "post",
|
||
data: {
|
||
id: _that.paynftObj.id,
|
||
fromaddress:_that.userMoneyAdressAll
|
||
},
|
||
headers:{
|
||
token: _that.userInfos.token
|
||
},
|
||
success(res) {
|
||
if (res.code === 1) {
|
||
_that.payNFTDialog = false;
|
||
let tipMessage = _that.currentLanguage == 'zh' ? '交易中，請勿刷新頁面...' : 'During the transaction, please do not refresh the page';
|
||
_that.orderLoading = _that.$loading({ lock: true, text: tipMessage, spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
|
||
_that.websentMoney(res.data);
|
||
} else {
|
||
_that.$message.error(res.msg)
|
||
}
|
||
},
|
||
error(err) {
|
||
_that.$message.error(err)
|
||
}
|
||
});
|
||
},
|
||
async websentMoney(item) {
|
||
let _that = this;
|
||
const provider = window.web3?.currentProvider;
|
||
let web3 = null;
|
||
if(this.connectWalletType == "MetaMask"){
|
||
web3 = new Web3(provider);
|
||
await provider.request({method: 'eth_requestAccounts'});
|
||
}
|
||
if(this.connectWalletType == "TokenPocket"){
|
||
web3 = new Web3(window.tokenpocket.ethereum);
|
||
await window.tokenpocket.ethereum.request({method: 'eth_requestAccounts'});
|
||
}
|
||
if(this.connectWalletType == "OKX Wallet"){
|
||
web3 = new Web3(window.okxwallet);
|
||
await window.okxwallet.request({method: 'eth_requestAccounts'});
|
||
}
|
||
try {
|
||
const transactions = {
|
||
from: _that.userMoneyAdressAll,
|
||
to: item.toaddress,
|
||
value: web3.utils.toWei(item.bnb, 'ether'),
|
||
gas: 21000
|
||
};
|
||
|
||
const result = await web3.eth.sendTransaction(transactions);
|
||
|
||
if(result.transactionHash){
|
||
console.log("成功哈希:",result.transactionHash);
|
||
this.submitHash(item.id,result.transactionHash);
|
||
}else{
|
||
let canaltip = this.currentLanguage == 'zh' ? '交易失敗！' : 'Transaction failed!';
|
||
this.$message.error(canaltip);
|
||
this.orderLoading.close();
|
||
}
|
||
} catch (error) {
|
||
console.log(error,'交易失败原因');
|
||
let canaltip = this.currentLanguage == 'zh' ? '交易失敗！' : 'Transaction failed!';
|
||
this.$message.error(canaltip);
|
||
this.orderLoading.close();
|
||
}
|
||
},
|
||
submitHash(id,tx){
|
||
let _that = this;
|
||
try {
|
||
$.ajax({
|
||
url: `${baseUrl}/api/common/payresult`,
|
||
type: "post",
|
||
data: {id,tx},
|
||
headers: {
|
||
token: _that.userInfos.token
|
||
},
|
||
success(res){
|
||
if (res.code === 1) {
|
||
_that.$message.success('success');
|
||
_that.orderLoading.close();
|
||
setTimeout(()=>{
|
||
_that.getNftList();
|
||
},1000)
|
||
} else {
|
||
_that.$message.error(err)
|
||
_that.orderLoading.close();
|
||
}
|
||
},
|
||
error(err) {
|
||
_that.$message.error(err)
|
||
}
|
||
})
|
||
} catch (error) {
|
||
_that.$message.error(error)
|
||
_that.orderLoading.close();
|
||
}
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.searchObj.page = val;
|
||
this.getNftList();
|
||
},
|
||
tradingTabChange(tab) {
|
||
this.activeName = tab.name;
|
||
if (this.activeName == 'third') {
|
||
this.getPurchasList();
|
||
}
|
||
},
|
||
// <-- -------------------------錢包登錄開始 --------------------------->
|
||
copyText(txt) {
|
||
let message = this.currentLanguage == 'zh' ? '複製成功！' : 'Copy successful!';
|
||
navigator.clipboard.writeText(txt)
|
||
.then(() => {
|
||
this.$message.success(message)
|
||
})
|
||
.catch(err => {
|
||
console.log(err, 'error');
|
||
})
|
||
},
|
||
allMoney() {
|
||
this.showMoneyAdress = true;
|
||
},
|
||
userMoneyAdressOptions(adress) {
|
||
if (adress) {
|
||
return adress
|
||
} else {
|
||
return this.currentLanguage == 'zh' ? '連接錢包' : 'Connect wallet'
|
||
}
|
||
},
|
||
moneyTip(txt) {
|
||
if (txt) {
|
||
return txt
|
||
} else {
|
||
return this.currentLanguage == 'zh' ? '請選擇連接錢包' : 'Please choose to connect the wallet'
|
||
}
|
||
},
|
||
selectWallet(wallet) {
|
||
this.selectMoney = {};
|
||
if (wallet.name == 'MetaMask') {
|
||
if (window.web3?.currentProvider) {
|
||
this.selectMoney = wallet;
|
||
this.connectWallet(wallet.name);
|
||
} else {
|
||
this.moneyTipMessage = this.currentLanguage == 'zh' ? 'MetaMask未安裝' : 'MetaMask not installed';
|
||
}
|
||
}
|
||
if (wallet.name == 'TokenPocket') {
|
||
if (window.tokenpocket?.ethereum) {
|
||
this.selectMoney = wallet;
|
||
this.connectWallet(wallet.name);
|
||
} else {
|
||
this.moneyTipMessage = this.currentLanguage == 'zh' ? 'TokenPocket未安裝' : 'TokenPocket not installed';
|
||
}
|
||
}
|
||
if (wallet.name == "OKX Wallet") {
|
||
if (window.okxwallet || (window.ethereum && window.ethereum.isOKExWallet)) {
|
||
this.selectMoney = wallet;
|
||
this.connectWallet(wallet.name);
|
||
} else {
|
||
this.moneyTipMessage = this.currentLanguage == 'zh' ? '歐易錢包未安裝' : 'OKX Wallet not installed';
|
||
}
|
||
}
|
||
},
|
||
async connectWallet(walletType) {
|
||
let account = "";
|
||
this.connectWalletType = walletType;
|
||
try {
|
||
if (walletType == 'MetaMask') {
|
||
const provider = window.web3.currentProvider;
|
||
const accounts = await provider.request({
|
||
method: 'eth_requestAccounts'
|
||
});
|
||
account = accounts[0];
|
||
}
|
||
if (walletType == 'TokenPocket') {
|
||
const tpAccounts = await window.tokenpocket.ethereum.request({
|
||
method: 'eth_requestAccounts'
|
||
});
|
||
account = tpAccounts[0];
|
||
}
|
||
if (walletType == 'OKX Wallet') {
|
||
const okxAccounts = await window.okxwallet.request({
|
||
method: 'eth_requestAccounts'
|
||
});
|
||
account = okxAccounts[0];
|
||
}
|
||
console.log(account, 'xxaa');
|
||
let _adressM = account;
|
||
this.userMoneyAdressAll = account;
|
||
this.userMoneyAdress = _adressM.slice(0, 4) + "...." + _adressM.slice(-4);
|
||
this.moneyDialogVisible = false;
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
},
|
||
toConnectWallet() {
|
||
if (this.userMoneyAdress) {
|
||
if (this.isShowSale) {
|
||
return
|
||
}
|
||
this.hasAdress = !this.hasAdress;
|
||
return
|
||
};
|
||
this.moneyDialogVisible = true;
|
||
},
|
||
//<-- -------------------------錢包登錄結尾 --------------------------->
|
||
mobileLang() {
|
||
this.currentLanguage = mobileLang()
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
<script src="static/js/app.js"></script>
|
||
</body>
|
||
|
||
</html> |