1039 lines
47 KiB
HTML
1039 lines
47 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>
|
||
|
||
<!-- 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: [],
|
||
categoriesTabList: [],
|
||
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.getCategoriestable();
|
||
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()
|
||
},
|
||
getRoleList() {
|
||
let _that = this;
|
||
$.ajax({
|
||
url: baseUrl+"api/index/getrole",
|
||
type: 'get',
|
||
dataType: "json",
|
||
success(res) {
|
||
if (res.code === 1) {
|
||
_that.roleList = res.data;
|
||
}
|
||
},
|
||
error(rej) {
|
||
console.log("failed");
|
||
}
|
||
})
|
||
},
|
||
//新聞詳情
|
||
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) {
|
||
let res = await axios.post(baseUrl+'api/common/payresult', { id, tx }, { headers: { 'token': this.token, 'Content-Type': 'application/json' } });
|
||
if (res.data.code === 1) {
|
||
// if (this.orderList[this.orderList.length - 1].id == id) {
|
||
// this.orderLoading.close();
|
||
// }
|
||
} else {
|
||
// this.orderLoading.close();
|
||
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';
|
||
// this.orderLoading = this.$loading({ lock: true, text: tipMessage, spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
|
||
let res = await axios.post(baseUrl+'api/project/createpurchaseorder', { ...this.buy }, {
|
||
headers: {
|
||
'token': this.token, // 使用 Bearer 認證方式攜帶 Token
|
||
'Content-Type': 'application/json' // 確保發送 JSON 格式的數據
|
||
}
|
||
})
|
||
console.log(res, '订单');
|
||
if (res.data.code === 1) {
|
||
this.orderList = res.data.data;
|
||
this.buyButtonVisible = false;
|
||
this.websentMoney();
|
||
} else {
|
||
this.$message.error(res.data.msg);
|
||
// this.orderLoading.close();
|
||
}
|
||
},
|
||
//獲取限時折購商品
|
||
async loadSaleList() {
|
||
let res = await axios.get(`${baseUrl}api/index/getpurchase`);
|
||
if (res.data.code === 1) {
|
||
this.saleList = res.data.data;
|
||
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() {
|
||
let res = await axios.get(`${baseUrl}api/index/getlist?
|
||
cateid=4&
|
||
keywordsen=&
|
||
keywordscn=&
|
||
page=1&
|
||
listrow=5&
|
||
`);
|
||
if (res.data.code === 1) {
|
||
this.outlookList = res.data.data.data;
|
||
}
|
||
},
|
||
async getCategoriestable() {
|
||
let res = await axios.get(`${baseUrl}api/index/getlist?
|
||
cateid=1&
|
||
keywordsen=&
|
||
keywordscn=&
|
||
page=1&
|
||
listrow=4&
|
||
`);
|
||
if (res.data.code === 1) {
|
||
this.categoriesTabList = res.data.data.data;
|
||
}
|
||
},
|
||
async getgamesVideo() {
|
||
let res = await axios.get(baseUrl+'api/index/getmedia?page=1&listrow=8');
|
||
if (res.data.code === 1) {
|
||
this.videoList = res.data.data.data;
|
||
console.log(this.videoList,'ssxxx');
|
||
|
||
}
|
||
},
|
||
async getDownload() {
|
||
let res = await axios.get(baseUrl+'api/');
|
||
if (res.data.code === 1) {
|
||
this.downloadObj = res.data.data;
|
||
}
|
||
},
|
||
async getInfomation() {
|
||
let res = await axios.get(`${baseUrl}api/index/getlist?
|
||
cateid=3&
|
||
keywordsen=&
|
||
keywordscn=&
|
||
page=1&
|
||
listrow=4&
|
||
`);
|
||
if (res.data.code === 1) {
|
||
this.pageIngomation = res.data.data.data;
|
||
this.hotnewsindex(0)
|
||
// setTimeout(()=>{
|
||
// const container = this.$refs.container;
|
||
// container.clientHeight > 188 && this.$refs.newsLeft.classList.add('ellipsis');
|
||
// },500)
|
||
}
|
||
},
|
||
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;
|
||
},
|
||
//请求获取显示抢购弹框关闭按钮权限
|
||
loadCloseAuth() {
|
||
axios.get(baseUrl+'api/index/getcloseauth').then(res => {
|
||
if (res.data.code === 1) {
|
||
console.log(res.data.data, 6666)
|
||
this.isShowClose = Boolean(res.data.data.closeauth)
|
||
this.interval = setInterval(() => {
|
||
this.updateCountdown(res.data.data.purastarttime)
|
||
}, 1000);
|
||
}
|
||
})
|
||
},
|
||
|
||
// 更新倒計時的函數
|
||
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> |