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/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: {
2025-05-07 13:42:14 +08:00
async getRecentNftList(){
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/getnftlist','get',{page:1,listrow:5});
if(res.code === 1){
_that.recentNftData = res.data.data;
}else{
console.log(err);
}
2025-04-19 15:31:22 +08:00
},
searchTimeOption(n){
const currentTimestamp = Date.now();
const timestampAgo = currentTimestamp - n * 24 * 60 * 60 * 1000;
return timestampAgo
},
2025-05-07 13:42:14 +08:00
async getNfttype(){
2025-04-19 15:31:22 +08:00
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;
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/project/gettype','get',{
showown:"",
starttime,
endtime,
2025-04-19 15:31:22 +08:00
});
2025-05-07 13:42:14 +08:00
if(res.code === 1){
_that.tableData = res.data;
_that.orderLoading.close();
}
2025-04-19 15:31:22 +08:00
},
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 >
