477 lines
22 KiB
HTML
477 lines
22 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/app.css">
|
||
<link rel="stylesheet" href="static/js/element-ui-min.css">
|
||
</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="bg-trading-page">
|
||
<div class="trading-page-header">
|
||
<div class="trading_header_left">
|
||
<h4><span>{{ currentLanguage == 'zh' ? '激發潛能' : 'Unleash your potential' }}</span> {{ currentLanguage == 'zh' ? '革新交互' : 'Revolutionizing Interaction' }} </h4>
|
||
<p>SERAPH Exclusive Asset Tool</p>
|
||
</div>
|
||
<div class="header-img">
|
||
<el-carousel trigger="click" style="height: 100%;width: 100%;" :autoplay="false"
|
||
>
|
||
<el-carousel-item v-for="item in pageTradingImgs" :key="item.id">
|
||
<img :src="item.img"
|
||
style="width: 100%;height: 100%;" alt="">
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</div>
|
||
<div class="trading_public_title">
|
||
<h4>{{ currentLanguage == 'zh' ? '熱門集合' : 'Popular Collections' }}</h4>
|
||
<div>
|
||
<el-radio-group v-model="popularRadio" @change="getNfttype" fill="#446FFA" size="small">
|
||
<el-radio-button label="1">{{ currentLanguage == 'zh' ? '24小時' : '24 hours' }}</el-radio-button>
|
||
<el-radio-button label="7">{{ currentLanguage == 'zh' ? '7天' : '7 hours' }}</el-radio-button>
|
||
<el-radio-button label="30">{{ currentLanguage == 'zh' ? '30天' : '30 hours' }}</el-radio-button>
|
||
<el-radio-button label="all">{{ currentLanguage == 'zh' ? '全部' : 'ALL' }}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
<div class="hot-list" style="height: 70vh;">
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: 100%;height: calc(100% - 60px);overflow: auto;"
|
||
@row-click="handleRowClick"
|
||
>
|
||
<el-table-column type="index" :label="currentLanguage == 'zh' ? '序號' : 'Serial number'" width="100" align="center">
|
||
</el-table-column>
|
||
<el-table-column :prop="currentLanguage == 'zh' ? 'title_cn' : 'title_en' " :label="currentLanguage == 'zh' ? '合集' : 'Collection'" align="center">
|
||
</el-table-column>
|
||
<el-table-column :label="currentLanguage == 'zh' ? '圖示' : 'icon'" align="center">
|
||
<template slot-scope="scope">
|
||
<img :src="baseUrl + scope.row.img" alt="" style="width: 4vh;height: 4vh;">
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="minsalefee" :label="currentLanguage == 'zh' ? '地板價(BNB)' : 'Floor Price(BNB)'">
|
||
<template slot-scope="scope">
|
||
{{scope.row.minsalefee}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="allsalefee" :label="currentLanguage == 'zh' ? '總交易額(BNB)' : 'Total transaction amount(BNB)'">
|
||
<template slot-scope="scope">
|
||
{{scope.row.allsalefee}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="ownnum" :label="currentLanguage == 'zh' ? '持有者' : 'Holder'">
|
||
</el-table-column>
|
||
<el-table-column prop="nftnum" :label="currentLanguage == 'zh' ? 'NFT數量' : 'NFT quantity'">
|
||
</el-table-column>
|
||
</el-table>
|
||
<div style="height: 60px;display: flex;justify-content: flex-end;align-items: center;">
|
||
<el-pagination
|
||
background
|
||
layout="prev, pager, next"
|
||
@current-change="handleCurrentChange"
|
||
:total="tableData.length"
|
||
>
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
<div class="trading_public_title">
|
||
<h4>{{ currentLanguage == 'zh' ? '最近上架' : 'Recently Available' }}</h4>
|
||
</div>
|
||
<div class="new-releases">
|
||
<div class="card-container">
|
||
<div class="card" v-for="item in recentNftData" :key="item.id" @click="toNftDetail(item.tpl_info.typeid,item.tpl_info.id)">
|
||
<img :src="baseUrl + item.tpl_info.img" class="shopImg">
|
||
<div class="shop_infos">
|
||
<p>{{ currentLanguage == 'zh' ? item.title_cn : item.title_en }}</p>
|
||
<div class="shop_name">{{ currentLanguage == 'zh' ? item.name_cn : item.name_en }}</div>
|
||
<div class="shop_price">
|
||
<div>#{{ item.tokenId }}</div>
|
||
<div style="color: #446FFA;">{{ item.salefee }} BNB</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
</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>
|
||
<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 {
|
||
recentNftData:[],
|
||
userInfoObj:{},
|
||
page: 1,
|
||
listrow: 20,
|
||
popularRadio:"all",
|
||
pageTradingImgs:[
|
||
{id:1,img:'static/picture/stream-mini-1.png'},
|
||
{id:2,img:'static/picture/stream-mini-2.png'},
|
||
{id:3,img:'static/picture/stream-mini-3.png'},
|
||
],
|
||
tableData:[],
|
||
// 錢包登錄開始
|
||
userMoneyAdressAll: "",
|
||
showGoodClass: false,
|
||
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(){
|
||
const user = window.localStorage.getItem("userInfo");
|
||
this.userInfoObj = JSON.parse(user);
|
||
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;
|
||
}
|
||
});
|
||
this.getNfttype();
|
||
this.getRecentNftList();
|
||
},
|
||
methods: {
|
||
getRecentNftList(){
|
||
let _that = this;
|
||
$.ajax({
|
||
url:`${baseUrl}api/project/getnftlist`,
|
||
type:"get",
|
||
data:{page:1,listrow:5},
|
||
headers:{token:_that.userInfoObj.token},
|
||
success(res){
|
||
if(res.code === 1){
|
||
_that.recentNftData = res.data.data;
|
||
}else{
|
||
console.log(err);
|
||
}
|
||
},
|
||
error(err){
|
||
console.log(err);
|
||
}
|
||
});
|
||
},
|
||
searchTimeOption(n){
|
||
const currentTimestamp = Date.now();
|
||
const timestampAgo = currentTimestamp - n * 24 * 60 * 60 * 1000;
|
||
return timestampAgo
|
||
},
|
||
getNfttype(){
|
||
let starttime = "";
|
||
let endtime = "";
|
||
if(this.popularRadio != 'all'){
|
||
starttime = Math.floor(this.searchTimeOption(Number(this.popularRadio)) / 1000);
|
||
endtime = Math.floor(Date.now() / 1000);
|
||
}else{
|
||
starttime = "";
|
||
endtime = "";
|
||
}
|
||
this.orderLoading = this.$loading({ lock: true, text: 'loading...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
|
||
let _that = this;
|
||
$.ajax({
|
||
url:`${baseUrl}api/project/gettype`,
|
||
type:"get",
|
||
data:{
|
||
showown:"",
|
||
starttime,
|
||
endtime,
|
||
},
|
||
success(res){
|
||
if(res.code === 1){
|
||
_that.tableData = res.data;
|
||
_that.orderLoading.close();
|
||
}
|
||
},
|
||
error(err){
|
||
console.log(err);
|
||
}
|
||
});
|
||
},
|
||
toNftDetail(id,typeId){
|
||
window.location.href = `trading-detail.html?id=${id}&typeId=${typeId}`;
|
||
},
|
||
handleRowClick(row){
|
||
console.log(row,'sss');
|
||
window.location.href = "trading-detail.html?id=" + row.id;
|
||
},
|
||
handleCurrentChange(val){
|
||
this.page = val;
|
||
},
|
||
// <-- -------------------------錢包登錄開始 --------------------------->
|
||
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> |