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 >
<!-- Favicon -->
< 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/slick.css" >
< link rel = "stylesheet" href = "static/css/slick-theme.css" >
< link rel = "stylesheet" href = "static/css/app.css" >
< link rel = "stylesheet" href = "static/css/sale.css" >
< link rel = "stylesheet" href = "static/js/element-ui-min.css" >
< style >
.el-carousel__arrow {
width: 4vh;
height: 4vh;
font-size: 4vh;
}
.outlook_detail {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.outlook_title {
color: #fdc060;
font-size: 35px;
width: 70%;
height: 12%;
text-align: center;
}
.outlook_txt {
width: 70%;
text-align: center;
color: #fff;
}
.role_detail {
width: 100%;
height: 100%;
display: flex;
}
.role_title {
width: 40%;
color: #fff;
font-weight: 700;
position: relative;
}
.role_title_txt {
position: absolute;
font-size: 1.5vw;
bottom: 22%;
left: 40%;
}
.role_txt {
width: 60%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.role_icon {
position: absolute;
width: 60%;
top: 20%;
left: 20%;
}
.role_txt_box {
width: 85%;
height: 83%;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 33px;
display: flex;
justify-content: center;
align-items: center;
}
.role_txt_box div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
width: calc(100% - 4vh);
height: calc(100% - 4vh);
}
.role_detail_box {
padding: 4vh 0;
display: flex;
font-size: clamp(15px, 1.042vw, 22px);
min-height: 473px;
}
.dia_role_title {
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.dia_role_title img {
width: 40%;
margin-bottom: 4vh;
}
.dia_role_title span {
font-weight: 700;
color: #fff;
font-size: 1.5vw;
}
.dia_role_txt {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.dia_role_txt_box {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 33px;
padding: 4vh;
width: 90%;
min-height: 90%;
}
.role_ch_style {
display: flex !important;
align-items: center !important;
}
< / style >
< / head >
< body class = "tt-smooth-scroll" >
<!-- Main Wrapper Start -->
< div id = "app" v-cloak >
<!-- HEADER MENU START -->
< div id = "publickHeader" > < / div >
<!-- HEADER MENU END -->
<!-- HERO BANNER START -->
< section class = "hero-banner" >
< div class = "container-fluid" >
< div class = "hero-wrapper" >
< div class = "hero-content text-xl-start text-center" >
< div v-html = "currentLanguage == 'zh' ? downloadObj.onetitlecn : downloadObj.onetitleen" > < / div >
< div style = "margin-top: 4vh;"
class="banner-btn d-flex align-items-center justify-content-xl-start justify-content-center gap-24">
< a href = "javascript:void(0);" class = "cus-btn-3" >
< span data-i18n = "home.download1" > PC Download< / span >
< span data-i18n = "home.download1" > PC Download< / span >
< / a >
< a href = "javascript:void(0);" class = "cus-btn" >
< span data-i18n = "home.download2" > Android< / span >
< span data-i18n = "home.download2" > Android< / span >
< / a >
< / div >
< / div >
< div class = "hero-img" >
< img v-for = "i in 4" :src = "`static/banner/${i}.png`" :class = "{'current':bannerIndex === i-1}" / >
< / div >
< / div >
< / div >
< / section >
< div
style="background: url(./static/ui/indexbg.png) no-repeat;background-size: 100% 100%;color: #000;padding-bottom: 7vh;">
< div class = "bg-section-2" >
< section class = "tournament-section" >
< div class = "container-fluid" >
< div class = "heading" >
< h2 class = "fw-600" data-i18n = "home.hot" > Hot News< / h2 >
< img src = "static/ui/title_line.png" alt = "" >
< / div >
< div class = "tournament-wrapper" >
< div class = "hot_new" >
< div class = "hot_left ellipsis" ref = "newsLeft"
style="max-height: 300px; overflow: hidden;">
< h5 class = "new_title" > {{currentLanguage == 'zh' ? nowhotnews.title_cn :
nowhotnews.title_en}}< / h5 >
< div class = "news_content" >
< div ref = "container" >
< pre style = "white-space: normal"
v-html="currentLanguage == 'zh' ? nowhotnews.text_cn : nowhotnews.text_en">< / pre >
< / div >
< / div >
< p class = "more" > < a :href = "`news-detail.html?id=${nowhotnews.id}`" > {{currentLanguage
== 'zh' ?'查看详情':'View Details'}}< / a > < / p >
< / div >
< div class = "hot_right" v-if = "pageIngomation.length > 0" >
< el-carousel @ change = "hotnewsindex($event)" arrow = "always" :autoplay = "false"
indicator-position="none">
< el-carousel-item v-for = "item in pageIngomation" :key = "item.id" >
< img :src = "baseUrl.slice(0,-1)+ item.en_img" style = "width: 100%;height: 100%;" alt = "" >
< / el-carousel-item >
< / el-carousel >
< / div >
< / div >
< / div >
< / div >
< / section >
< / div >
< div class = "bg-section-3" style = "margin-top: 5vh;" >
< section class = "tournament-section" >
< div class = "container-fluid" >
< div class = "heading mb-48" >
< h2 class = "fw-600" data-i18n = "home.homeoutlook" > World Outlook< / h2 >
< img src = "static/ui/title_line.png" alt = "" >
< / div >
< div class = "tournament-wrapper" >
< el-carousel height = "60vh" arrow = "always" :autoplay = "false" indicator-position = "none" >
< el-carousel-item v-for = "item in outlookList" :key = "item.id" >
< div class = "outlook_detail" :style = "{
'background':`url(${baseUrl.slice(0,-1)}${item.title_img}) no-repeat`,
'background-size':'100% 100%'
}">
< h2 class = "outlook_title" > {{currentLanguage == 'zh' ? item.title_cn :
item.title_en}}< / h2 >
< div class = "outlook_txt"
:style="{'margin-bottom':currentLanguage == 'zh' ? '10%' :'5%'}">
{{currentLanguage == 'zh' ?
item.text_cn : item.text_en}}< / div >
< / div >
< / el-carousel-item >
< / el-carousel >
< / div >
< / div >
< / section >
< section class = "streaming-section py-80" >
< div class = "container-fluid" >
< div class = "heading mb-48" >
< h2 class = "fw-600" > {{currentLanguage == 'zh' ? '職業角色':'Sect Role'}}< / h2 >
< img src = "static/ui/title_line.png" alt = "" >
< / div >
< div class = "streaming-wrapper" >
< el-carousel height = "473px" type = "card" arrow = "always" :autoplay = "false"
indicator-position="none">
< el-carousel-item v-for = "item in roleList" :key = "item.id" >
< div class = "role_detail" :style = "{
'background':`url(${baseUrl.slice(0,-1)}${item.bg}) no-repeat`,
'background-size':'100% 100%',
'box-shadow': '0px 2px 20px 0px rgba(0,0,0,0.2)',
'border': '2px solid',
'border-image': 'linear-gradient(180deg, rgba(153.00000607967377, 181.0000044107437, 255, 1), rgba(170.0000050663948, 224.000001847744, 255, 1)) 2 2'
}" @click="toRoleDetail(item)">
< div class = "role_title" >
< span class = "role_title_txt" > {{currentLanguage == 'zh' ? item.title_cn :
item.title_en}}< / span >
< img :src = "`${baseUrl.slice(0,-1)}${item.img}`" class = "role_icon"
alt="">
< / div >
< div class = "role_txt" style = "color: #fff;" >
< div class = "role_txt_box" >
< div :class = "currentLanguage == 'zh' ? 'role_ch_style':''" >
{{currentLanguage == 'zh' ? item.desc_cn : item.desc_en}}
< / div >
< / div >
< / div >
< / div >
< / el-carousel-item >
< / el-carousel >
< / div >
< / div >
< / section >
< section class = "streaming-section py-80" >
< div class = "container-fluid" >
< div class = "heading mb-48" >
< h2 class = "fw-600" data-i18n = "home.video" > Videos< / h2 >
< img src = "static/ui/title_line.png" alt = "" >
< / div >
< div class = "streaming-wrapper" >
< div class = "row row-gap-4" >
< div class = "col-xl-3 col-lg-6 col-md-6" v-for = "item in videoList" :key = "item.id" >
< a href = "javascript:void(0);" class = "streaming-block" style = "width: 100%;height: 100%;" >
< div class = "streaming-image" style = "height: 100%;" >
< img :src = "item.flink" v-if = "item.type == '图片'" style = "height: 100%;" >
< video v-if = "item.type == '视频'" style = "width: 100%;height: 100%;" controls >
< source :src = "item.flink" type = "video/mp4" >
< / video >
< / div >
< / a >
< / div >
< / div >
< / div >
< / div >
< / section >
< section class = "signup-banner" >
< div class = "container-fluid" >
< div class = "inner-banner-wrapper text-center" >
< h2 class = "fw-500 mb-48" data-i18n = "home.signtitle1" style = "color: #fff;" > Are You Ready To
Play?< / h2 >
< h2 class = "fw-500 mb-48" data-i18n = "home.signtitle2" style = "color: #fff;" > Sign-Up Now!< / h2 >
< a href = "signup.html" class = "cus-btn-3" >
< span data-i18n = "pages.title3" > Signup< / span >
< span data-i18n = "pages.title3" > Signup< / span >
< / a >
< / div >
< / div >
< / section >
< / div >
< / div >
<!-- FOOTER START -->
< div id = "publciFooter" > < / div >
<!-- FOOTER END -->
<!-- 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 -->
<!-- Sale Start -->
< el-dialog :visible . sync = "isShowSale" width = "820" :show-close = "isShowClose"
:before-close="()=>{isShowSale = false}" :close-on-click-modal="false">
< template # title >
< h4 style = "color: royalblue; font-weight: 600; text-align: center; padding: 18px 0;"
data-i18n="sale.sale">{{currentLanguage == 'zh' ? '物品介紹':'Describe?'}}限時搶購< / h4 >
< / template >
< el-row >
< el-col :span = "24" >
< div style = "color: #666; text-align: center;" v-if = "!saleBuying" >
< label class = "time-count" > {{times.day}}< / label > < label > {{currentLanguage == 'zh' ?
'天':'Day'}}< / label >
< label class = "time-count" > {{times.hours}}< / label > < label > {{currentLanguage == 'zh' ?
'時':'Hour'}}< / label >
< label class = "time-count" > {{times.minutes}}< / label > < label > {{currentLanguage == 'zh' ?
'分':'Minute'}}< / label >
< label class = "time-count" > {{times.seconds}}< / label > < label > {{currentLanguage == 'zh' ?
'秒':'Second'}}< / label >
< / div >
< h4 style = "text-align: center; color:red; letter-spacing: 3px;" v-else > {{currentLanguage == 'zh' ?
'限時搶購中':'Limited time flash sale in progress'}}< / h4 >
< / el-col >
< el-col :span = "24" >
< div class = "imgs-box" >
< div class = "grid-container" style = "gap: 25px;" :style = "imgboxStyle" >
< div class = "grid-item" :class = "{'checked': index == currentSaleIndex}"
v-for="(item,index) in saleList" :key="item.id" v-if="index < 12 " >
< el-image @ click = "changeItem(item,index)" style = "width: 100px; height:auto;" :src = "`${baseUrl.slice(0,-1)}${item.tpl.img}`" > < / el-image >
< / div >
< / div >
< / div >
< / el-col >
< el-col :span = "22" :offset = "1" style = " margin-bottom: 24px; text-align: center;" >
< h5 > {{currentLanguage == 'zh' ? '物品介紹':'Describe'}}< / h5 >
< / el-col >
< el-col :span = "22" :offset = "1" >
< div style = "text-align: center;" >
< pre style = "white-space:normal" >
{{currentLanguage == 'zh' ? saleList[currentSaleIndex]?.tpl?.desc_cn :
saleList[currentSaleIndex]?.tpl?.desc_en }}
< / pre >
< / div >
< / el-col >
< el-col :sm = "{span:24,offset:0}" :lg = "{span:18,offset:6}" >
< el-row style = "padding:24px;" >
< el-col :span = "24" >
{{currentLanguage == 'zh' ?'購買數量':'Quantity'}}：
< el-input-number :disabled = "!saleBuying || !token" v-model = "buy.count" :min = "1" :max = "3"
size="small" label="購買數量">< / el-input-number >
< / el-col >
< el-col :span = "24" >
< div style = " height: 36px; line-height: 36px; margin-top: 24px;" >
{{currentLanguage == 'zh' ? '售价':'Price'}}:
< label style = "font-size: 32px; color:red;" >
{{buy.cointype ==='usdt' ?saleList[0]?.usdt:saleList[0]?.minbnb}}
<!-- ~ {{buy.cointype ==='usdt' ?saleList[0]?.usdt:saleList[0]?.maxbnb}} -->
< / label > /BNB
< / div >
< / el-col >
< / el-row >
< / el-col >
< el-col :span = "24" >
< div style = "padding: 24px; text-align: center;" >
< el-button data-i18n = "pages.title4" v-if = "!token" style = "margin-right: 24px; font-weight: 600;"
@click="toLogin">LOGIN< / el-button >
< el-popover placement = "top" width = "320" v-model = "buyButtonVisible" v-else >
< p style = "padding:24px;" >
{{currentLanguage == 'zh' ? '是否確定支付購買?':'Are you sure to pay for the purchase?'}}
< / p >
< div style = "text-align: right; margin: 0" >
< el-button size = "mini" type = "text" @ click = "buyButtonVisible = false" >
{{currentLanguage == 'zh' ? '取 消':'Cancel'}}
< / el-button >
< el-button type = "primary" size = "mini" @ click = "toBuy" >
{{currentLanguage == 'zh' ? '確 認':'Confirm'}}
< / el-button >
< / div >
< el-button :disabled = "!saleBuying" data-i18n = "sale.buy" type = "primary"
slot="reference">立即搶購< / el-button >
< el-button @ click = "toConnectWallet" type = "primary"
slot="reference">{{userMoneyAdressOptions(userMoneyAdress)}}< / el-button >
< / el-popover >
< / div >
< / el-col >
< / el-row >
< / el-dialog >
<!-- Sale End -->
< el-dialog :title = "currentLanguage == 'zh' ? '角色詳細':'Role Details'" :visible . sync = "roleDialogVisible"
width="60%" center :close-on-click-modal="false">
< div class = "role_detail_box" :style = "{
'background':`url(${baseUrl.slice(0,-1)}${roledetailData.bg}) no-repeat`,
'background-size':'100% 100%'
}">
< div class = "dia_role_title" >
< img :src = "`${baseUrl.slice(0,-1)}${roledetailData.img}`" alt = "" >
< span > {{currentLanguage == 'zh' ? roledetailData.title_cn : roledetailData.title_en}}< / span >
< / div >
< div class = "dia_role_txt" style = "color: #fff;" >
< div class = "dia_role_txt_box" > {{currentLanguage == 'zh' ? roledetailData.desc_cn :
roledetailData.desc_en}}< / div >
< / div >
< / div >
< / el-dialog >
<!-- 钱包选择弹窗 -->
< 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 >
<!-- Back To Top Start -->
< button class = "scrollToTopBtn" > < i class = "fa fa-arrow-up" > < / i > < / button >
<!-- Jquery Js -->
< script src = "static/js/jquery-3.6.3.min.js" > < / script >
< script src = "static/js/bootstrap.min.js" > < / script >
< script src = "static/js/slick.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 >
<!-- 引入 Moment.js -->
< script src = "static/js/moment.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 {
baseUrl,
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: "",
// 钱包登录结尾
roledetailData: {},
roleDialogVisible: false,
bannerIndex: 0,
currentLanguage: localStorage.getItem('languageNow') || 'en',
downloadObj: {},
pageIngomation: [],
videoList: [],
outlookList: [],
saleList: [],//限時商品列表
times: {
day: '00',
hours: '00',
minutes: '00',
seconds: '00'
},
buy: {
cointype: 'bnb',//支付方式
count: 1,//购买方式
},
interval: null,
isShowSale: false,// 控制限時商品彈框顯示
isShowClose: true, //控制限時商品彈框關閉按鈕
des: '',//商品描述
currentSaleIndex: 0, //当前展示商品
buyButtonVisible: false,//二次确认提示
token: '',
imgboxStyle: '',
nowhotnews: {},
roleList: [],
orderList: [],//订单信息
orderLoading: null,
saleBuying: false,
}
},
async created() {
const user = window.localStorage.getItem("userInfo")
user & & (this.token = JSON.parse(user)?.token)
if (user) {
this.userIsLogin = true;
}
this.getDownload();
this.getgamesVideo();
this.getOutlook();
this.loadCloseAuth()
this.loadSaleList();
// 钱包登录开始
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.getInfomation();
this.getRoleList();
setInterval(() => {
this.bannerIndex = this.bannerIndex === 3 ? 0 : this.bannerIndex + 1
}, 3000)
},
methods: {
// < -- -------------------------钱包登录开始 --------------------------- >
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;
},
//< -- -------------------------钱包登录结尾 --------------------------- >
toRoleDetail(data) {
this.roledetailData = data;
this.roleDialogVisible = true;
},
// 切换国际化事件
mobileLang() {
this.currentLanguage = mobileLang()
},
2025-05-07 13:42:14 +08:00
async getRoleList() {
let res = await publikRequesFunction('api/index/getrole','get',{});
if (res.code === 1) {
this.roleList = res.data;
}
2025-04-19 15:31:22 +08:00
},
//新聞詳情
toNewDetail() {
window.location.href = "news-detail.html?id=" + this.nowhotnews.id
},
hotnewsindex(index){
const news = JSON.stringify(this.pageIngomation[index])
this.nowhotnews = JSON.parse(news.replaceAll('samsar Dao','Samsara Dao').replaceAll('Samsar Dao','Samsara Dao'));
},
async websentMoney() {
let _that = this;
const provider = window.web3?.currentProvider;
let web3 = null;
console.log(this.connectWalletType,'seeeee');
if(this.connectWalletType == "MetaMask"){
web3 = new Web3(provider);
await provider.request({method: 'eth_requestAccounts'});
console.log("进来了MetaMask");
}
if(this.connectWalletType == "TokenPocket"){
web3 = new Web3(window.tokenpocket.ethereum);
await window.tokenpocket.ethereum.request({method: 'eth_requestAccounts'});
console.log("进来了TokenPocket");
}
if(this.connectWalletType == "OKX Wallet"){
web3 = new Web3(window.okxwallet);
await window.okxwallet.request({method: 'eth_requestAccounts'});
console.log("进来了OKX Wallet");
}
const transactions = _that.orderList.map(item => ({
from: _that.userMoneyAdressAll,
to: item.toaddress,
value: web3.utils.toWei(item.bnb, 'ether'),
gas: 21000,
userId:item.id
}));
const transactionPromises = await transactions.map(async (tx)=>{
const result = await web3.eth.sendTransaction(tx);
if(result.transactionHash){
_that.orderPayResult(tx.userId, result.transactionHash);
console.log("id:",tx.userId,"成功哈希:",result.transactionHash);
}
});
// this.$message.success('success');
},
async orderPayResult(id, tx) {
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/common/payresult','post',{id, tx});
if (res.code != 1) {
2025-04-19 15:31:22 +08:00
this.$message.error('error');
}
},
//購買支付
async toBuy() {
let connnectMon = this.currentLanguage == 'zh' ? '請連接錢包' : 'Please connect the wallet';
if(!this.userMoneyAdressAll){
this.$message.error(connnectMon);
return
}
this.buy.fromaddress = this.userMoneyAdressAll;
let tipMessage = this.currentLanguage == 'zh' ? '交易中，請勿刷新頁面...' : 'During the transaction, please do not refresh the page';
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/project/createpurchaseorder','post',{...this.buy});
2025-04-19 15:31:22 +08:00
console.log(res, '订单');
2025-05-07 13:42:14 +08:00
if (res.code === 1) {
this.orderList = res.data;
2025-04-19 15:31:22 +08:00
this.buyButtonVisible = false;
this.websentMoney();
} else {
2025-05-07 13:42:14 +08:00
this.$message.error(res.msg);
2025-04-19 15:31:22 +08:00
}
},
//獲取限時折購商品
async loadSaleList() {
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/index/getpurchase','get',{});
if (res.code === 1) {
this.saleList = res.data;
2025-04-19 15:31:22 +08:00
this.isShowSale = this.saleList.length > 0
setInterval(() => {
if (this.currentSaleIndex === this.saleList.length - 1) {
this.currentSaleIndex = 0
} else (
this.currentSaleIndex++
)
}, 5000)
}
},
//切換商品介紹
changeItem(item, index) {
this.currentSaleIndex = index
},
toLogin() {
window.location.href = 'login.html'
},
async getOutlook() {
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/index/getlist','get',{
cateid:4,
keywordsen:"",
keywordscn:"",
page:1,
listrow:5,
});
if (res.code === 1) {
this.outlookList = res.data.data;
2025-04-19 15:31:22 +08:00
}
},
async getgamesVideo() {
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/index/getmedia','get',{page:1,listrow:8});
if (res.code === 1) {
this.videoList = res.data.data;
2025-04-19 15:31:22 +08:00
}
},
async getDownload() {
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/','get',{});
if (res.code === 1) {
this.downloadObj = res.data;
2025-04-19 15:31:22 +08:00
}
},
async getInfomation() {
2025-05-07 13:42:14 +08:00
let res = await publikRequesFunction('api/index/getlist','get',{
cateid:3,
keywordsen:"",
keywordscn:"",
page:1,
listrow:4,
});
if (res.code === 1) {
this.pageIngomation = res.data.data;
2025-04-19 15:31:22 +08:00
this.hotnewsindex(0)
}
},
optionsTemp(timestamp) {
let date = new Date(timestamp);
let Y = date.getFullYear() + '-';
let M = (date.getMonth() + 1 < 10 ? ' 0 ' + ( date . getMonth ( ) + 1 ) : date . getMonth ( ) + 1 ) + ' - ' ;
let D = (date.getDate() < 10 ? ' 0 ' + date . getDate ( ) : date . getDate ( ) ) ;
return Y + M + D;
},
//请求获取显示抢购弹框关闭按钮权限
2025-05-07 13:42:14 +08:00
async loadCloseAuth() {
let res = await publikRequesFunction('api/index/getcloseauth','get',{});
if (res.code === 1) {
console.log(res.data, 6666)
this.isShowClose = Boolean(res.data.closeauth)
this.interval = setInterval(() => {
this.updateCountdown(res.data.purastarttime)
}, 1000);
}
2025-04-19 15:31:22 +08:00
},
// 更新倒計時的函數
updateCountdown(time) {
const targetDate = moment(moment(time * 1000).format())
const now = moment(); // 當前時間
const duration = moment.duration(targetDate.diff(now)); // 計算剩餘時間
// 提取天、時、分、秒
const days = duration.days();
const hours = duration.hours();
const minutes = duration.minutes();
const seconds = duration.seconds();
// 更新頁面顯示
this.times.day = days.toString().padStart(2, '0');
this.times.hours = hours.toString().padStart(2, '0');
this.times.minutes = minutes.toString().padStart(2, '0');
this.times.seconds = seconds.toString().padStart(2, '0');
// 如果倒計時結束
if (now.isAfter(targetDate)) {
this.saleBuying = true
this.interval & & clearInterval(this.interval);
this.times.day = '00';
this.times.hours = '00';
this.times.minutes = '00';
this.times.seconds = '00';
}
}
}
})
< / script >
< script src = "static/js/app.js" > < / script >
< style scoped >
.hero-banner {
background: url("static/banner/banner-bg.png");
}
.hero-img img {
display: none;
}
.hero-img img.current {
display: block;
}
.hot_left .news_content {
height: 182px;
overflow: hidden;
margin-top: 24px;
}
.hot_left .new_title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hot_left .more {
display: none;
}
.ellipsis .more {
display: block;
line-height: 24px;
cursor: pointer;
margin-top: -0px;
text-indent: 36px;
text-align: end;
color: #0e8bf1;
}
.news_content * {
text-indent: 0px !important;
}
< / style >
< / body >
< / html >
