2025-04-19 15:31:22 +08:00
<!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" >
2025-05-07 09:13:07 +08:00
<!-- NFT交易 -->
2025-04-19 15:31:22 +08:00
< 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 >
2025-05-07 09:13:07 +08:00
<!-- NFT租赁 -->
< el-tab-pane :label = "currentLanguage == 'zh' ? 'NFT租賃' : 'NFT Leasing'" name = "second" >
2025-04-19 15:31:22 +08:00
< div class = "cp_main" >
< div class = "cp_main_left" >
2025-05-07 09:13:07 +08:00
< div >
< el-input :placeholder = "currentLanguage == 'zh' ? '搜索NFT':'Search NFTs'" @ blur = "getLeaseNftList" prefix-icon = "el-icon-search"
v-model="searchNft">< / el-input >
2025-04-19 15:31:22 +08:00
< / 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="{
2025-05-07 09:13:07 +08:00
'background-color': selectEqType == item.id ? '#409eff' : '#fff',
'color': selectEqType == item.id ? '#fff' : '#5F6067'
2025-04-19 15:31:22 +08:00
}"
2025-05-07 09:13:07 +08:00
@click="searchEqListLease(item.id)"
2025-04-19 15:31:22 +08:00
>
{{ 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" >
2025-05-07 09:13:07 +08:00
< div class = "nft_item"
v-for="item in leaseNftData.data"
:key="item.id"
>
2025-04-19 15:31:22 +08:00
< div class = "c_m_p_all_detail" >
< div class = "c_m_r_title" >
2025-05-07 09:13:07 +08:00
< img :src = "baseUrl + item.tpl_info.img" alt = "" >
2025-04-19 15:31:22 +08:00
< div >
2025-05-07 09:13:07 +08:00
< 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 >
2025-04-19 15:31:22 +08:00
< / div >
< / div >
2025-05-07 09:13:07 +08:00
< 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 >
2025-04-19 15:31:22 +08:00
< / div >
< div class = "c_m_r_infos" >
2025-05-07 09:13:07 +08:00
< div > {{ currentLanguage == 'zh' ? '時長':'Duration' }}< / div >
< div class = "c_m_r_price" > {{ item.leaseday }} 天< / div >
2025-04-19 15:31:22 +08:00
< / div >
< div class = "c_m_r_infos" >
2025-05-07 09:13:07 +08:00
< div > {{ currentLanguage == 'zh' ? '續租增幅':'Lease renewal rate' }}< / div >
< div class = "c_m_r_price" > {{ Number(item.leasediffrate) }} %< / div >
2025-04-19 15:31:22 +08:00
< / div >
< div class = "c_m_r_infos" >
2025-05-07 09:13:07 +08:00
< div > {{ currentLanguage == 'zh' ? 'GAS費':'GAS Fee' }}< / div >
< div class = "c_m_r_price" > {{ item.gasfee }} BNB< / div >
2025-04-19 15:31:22 +08:00
< / div >
2025-05-07 09:13:07 +08:00
< / 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' ? '立即租賃':'Lease Now' }}< / button >
2025-04-19 15:31:22 +08:00
< / div >
< / div >
2025-05-07 09:13:07 +08:00
< 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="handleCurrentChangeLease" :total="leaseNftData.total">
< / el-pagination >
< / div >
2025-04-19 15:31:22 +08:00
< / div >
< / div >
2025-05-07 09:13:07 +08:00
< / el-tab-pane >
<!-- NFT求购 -->
2025-04-19 15:31:22 +08:00
< 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%;" >
2025-05-07 09:13:07 +08:00
< el-input :placeholder = "currentLanguage == 'zh' ? '搜索NFT':'Search NFTs'" @ blur = "getPurchasList" prefix-icon = "el-icon-search"
2025-04-19 15:31:22 +08:00
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彈窗 -->
2025-05-07 09:13:07 +08:00
< el-dialog :visible . sync = "payNFTDialog" :title = "currentLanguage == 'zh' ? (activeName == 'first' ? '確定購買' :'確定租賃') : (activeName == 'first' ? 'Confirm purchase' : 'Confirm the lease')" width = "20%" custom-class = "paynft_dialog"
2025-04-19 15:31:22 +08:00
: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 {
2025-05-07 09:13:07 +08:00
leaseNftData:{},
2025-04-19 15:31:22 +08:00
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";
}
},
2025-05-07 13:42:14 +08:00
async submitPurchFeeHash(wtbid,tx){
2025-04-19 15:31:22 +08:00
let _that = this;
try {
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/project/wtbrevpayres','post',{wtbid,tx});
if (res.code === 1) {
_that.orderLoading.close();
let resultMsg = _that.currentLanguage == 'zh' ? '交易成功' : 'Successful transaction';
_that.$message.success(resultMsg);
setTimeout(()=>{
2025-04-19 15:31:22 +08:00
window.location.href = "all-order.html";
2025-05-07 13:42:14 +08:00
},1500)
} else {
_that.$message.error(err)
_that.orderLoading.close();
window.location.href = "all-order.html";
}
2025-04-19 15:31:22 +08:00
} catch (error) {
_that.$message.error(error)
_that.orderLoading.close();
}
},
//判断是否有相应的NFT
isHaveNft(){
let _that = this;
2025-05-07 13:42:14 +08:00
return new Promise(async (resolve, reject) => {
let res = await publikRequesFunction('api/project/wtbsend','post',{
wtbid: _that.nowPurchOrderObj.id,
saleaddress: _that.receivAdress
2025-04-19 15:31:22 +08:00
});
2025-05-07 13:42:14 +08:00
if(res.code === 1){
resolve(res.data)
}else{
resolve(res.msg)
}
2025-04-19 15:31:22 +08:00
})
},
expirationTimeOp(timestamp){
const date = new Date(timestamp); // 创建 Date 对象
const year = date.getFullYear(); // 获取年份
const month = String(date.getMonth() + 1).padStart(2, '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();
},
2025-05-07 13:42:14 +08:00
async getPurchasList(){
2025-04-19 15:31:22 +08:00
let _that = this;
_that.orderLoading = _that.$loading({ lock: true, text: 'loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/project/getwtblist','get',{
tid: _that.buySelectEqObj.id,
..._that.purchSearchObj
2025-04-19 15:31:22 +08:00
});
2025-05-07 13:42:14 +08:00
if(res.code === 1){
_that.purchTableData = res.data;
_that.orderLoading.close();
}
2025-04-19 15:31:22 +08:00
},
2025-05-07 13:42:14 +08:00
async purchaseRequest(){
2025-04-19 15:31:22 +08:00
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
}
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/project/wtbuy','post',{
tid: _that.buySelectEqObj.id,
bnb: _that.purchPrice,
vaildtime: _that.setimeCycle
2025-04-19 15:31:22 +08:00
});
2025-05-07 13:42:14 +08:00
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')
}
2025-04-19 15:31:22 +08:00
},
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();
}
},
2025-05-07 13:42:14 +08:00
async submitPurchHash(id,tx,fromaddress){
2025-04-19 15:31:22 +08:00
console.log('交易ID： ：
let _that = this;
try {
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/project/wtbres','post',{id,tx,fromaddress});
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 {
2025-04-19 15:31:22 +08:00
_that.$message.error(err)
2025-05-07 13:42:14 +08:00
_that.orderLoading.close();
2025-04-19 15:31:22 +08:00
}
} catch (error) {
_that.$message.error(error)
_that.orderLoading.close();
}
},
buySelectEqTypeSearch(item){
console.log(item,'详细');
this.buySelectEqType = item.id;
this.buySelectEqObj = {...item};
this.getPurchasList();
},
2025-05-07 13:42:14 +08:00
async getNftList(){
2025-04-19 15:31:22 +08:00
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
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/project/getenbuynftlist','get',{
keywords_cn,
keywords_en,
typeid: _that.nownftId,//分類ID
page: _that.searchObj.page,
listrow: _that.searchObj.pageSize,
tplid: _that.selectEqType,
sort,//排序：
desc//true倒序 false正序
2025-04-19 15:31:22 +08:00
});
2025-05-07 13:42:14 +08:00
if(res.code === 1){
_that.topnftInfos = res.data.baseinfo;
_that.transactionList = res.data.list;
_that.orderLoading.close();
}
2025-04-19 15:31:22 +08:00
},
2025-05-07 13:42:14 +08:00
async getLeaseNftList(){
2025-05-07 09:13:07 +08:00
let _that = this;
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
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/project/getenleasenftlist','get',{
keywords_cn,
keywords_en,
typeid: _that.nownftId,
page: _that.searchObj.page,
listrow: _that.searchObj.pageSize,
tplid: _that.selectEqType,
sort:"",
desc: true
2025-05-07 09:13:07 +08:00
});
2025-05-07 13:42:14 +08:00
if(res.code === 1){
_that.leaseNftData = res.data.list;
_that.orderLoading.close();
}
2025-05-07 09:13:07 +08:00
},
searchEqListLease(id){
this.selectEqType = id;
this.getLeaseNftList();
},
2025-04-19 15:31:22 +08:00
searchEqList(id){
this.selectEqType = id;
this.getNftList();
},
2025-05-07 13:42:14 +08:00
async getnftTypeList(){
2025-04-19 15:31:22 +08:00
let _that = this;
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/project/gettpllist','get',{
typeid:this.nownftId,
showown:1,
listrow:9999
2025-04-19 15:31:22 +08:00
});
2025-05-07 13:42:14 +08:00
if(res.code === 1){
_that.equipmentType = res.data.data;
_that.buySelectEqType = _that.equipmentType[0].id;
_that.buySelectEqObj = _that.equipmentType[0];
}
2025-04-19 15:31:22 +08:00
},
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();
},
2025-05-07 13:42:14 +08:00
async creatOrder(){
2025-04-19 15:31:22 +08:00
let _that = this;
2025-05-07 09:13:07 +08:00
let apiString = "";
_that.activeName == 'first' ? apiString = 'api/project/buynft' : apiString = 'api/project/leasenft'
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction(apiString,'post',{
id: _that.paynftObj.id,
fromaddress:_that.userMoneyAdressAll
});
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)
}
2025-04-19 15:31:22 +08:00
},
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();
}
},
2025-05-07 13:42:14 +08:00
async submitHash(id,tx){
2025-04-19 15:31:22 +08:00
let _that = this;
2025-05-07 09:13:07 +08:00
let apiString = "";
2025-04-19 15:31:22 +08:00
try {
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/common/payresult','post',{id,tx});
if (res.code === 1) {
_that.$message.success('success');
_that.orderLoading.close();
setTimeout(()=>{
_that.activeName == 'first' ? _that.getNftList() : _that.getLeaseNftList()
},1000)
} else {
_that.$message.error(err)
_that.orderLoading.close();
}
2025-04-19 15:31:22 +08:00
} catch (error) {
_that.$message.error(error)
_that.orderLoading.close();
}
},
handleCurrentChange(val) {
this.searchObj.page = val;
this.getNftList();
},
2025-05-07 09:13:07 +08:00
handleCurrentChangeLease(){
this.searchObj.page = val;
this.getLeaseNftList();
},
2025-04-19 15:31:22 +08:00
tradingTabChange(tab) {
this.activeName = tab.name;
2025-05-07 09:13:07 +08:00
this.searchObj = {
page:1,
pageSize:8
};
switch (tab.name) {
case 'first':
this.getNftList();
break;
case 'second':
this.getLeaseNftList();
break;
case 'third':
this.getPurchasList();
break;
2025-04-19 15:31:22 +08:00
}
},
// < -- -------------------------錢包登錄開始 --------------------------- >
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 >
