747 lines
32 KiB
HTML
747 lines
32 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="order-h5-page" v-loading="tableLoading" element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-spinner="el-icon-loading">
|
|||
|
|
<!-- 订单状态标签 -->
|
|||
|
|
<div class="order-tabs">
|
|||
|
|
<div class="tab-item" :class="{active: activeTab === ''}" @click="changeTab('')">{{ currentLanguage == 'zh' ? '全部訂單' : 'All orders' }}</div>
|
|||
|
|
<div class="tab-item" :class="{active: activeTab === 'waitpay'}" @click="changeTab('waitpay')">{{ currentLanguage == 'zh' ? '待支付' : 'Payment to be made' }}</div>
|
|||
|
|
<div class="tab-item" :class="{active: activeTab === 'paying'}" @click="changeTab('paying')">{{ currentLanguage == 'zh' ? '交易中' : 'Trading' }}</div>
|
|||
|
|
<div class="tab-item" :class="{active: activeTab === 'finish'}" @click="changeTab('finish')">{{ currentLanguage == 'zh' ? '已完成' : 'Completed' }}</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 时间筛选 -->
|
|||
|
|
<div class="filter-section">
|
|||
|
|
<el-select v-model="timeFilter" :placeholder="currentLanguage == 'zh' ? '請選擇':'Please select'" style="width: 120px">
|
|||
|
|
<el-option :label="currentLanguage == 'zh' ? '買入':'Buy it in'" value="buyer"></el-option>
|
|||
|
|
<el-option :label="currentLanguage == 'zh' ? '求購賣出':'Buy Sell'" value="seller"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 订单列表 -->
|
|||
|
|
<div class="order-list">
|
|||
|
|
<div class="order-item" v-for="order in orderListObj.data" :key="order.id">
|
|||
|
|
<!-- 订单头部 -->
|
|||
|
|
<div class="order-header">
|
|||
|
|
<div class="order-info">
|
|||
|
|
<span class="order-time">{{ expirationTimeOp(order.createtime * 1000) }}</span>
|
|||
|
|
<span class="order-no">{{ currentLanguage == 'zh' ? '訂單編號：' : 'Order Number：' }}{{order.order_no}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="order-status">
|
|||
|
|
<span v-if="order.status == '等待支付上架费'">{{ currentLanguage == 'zh' ? '等待支付上架費' : 'Waiting for payment of listing fee' }}</span>
|
|||
|
|
<span v-if="order.status == '待支付'" style="color: blue;">{{ currentLanguage == 'zh' ? '待支付' : 'Payment to be made' }}</span>
|
|||
|
|
<span v-if="order.status == '已支付'" style="color: green;">{{ currentLanguage == 'zh' ? '已支付' : 'Paid' }}</span>
|
|||
|
|
<span v-if="order.status == '已完成'" style="color: green;">{{ currentLanguage == 'zh' ? '已完成' : 'Completed' }}</span>
|
|||
|
|
<span v-if="order.status == '支付失败'">{{ currentLanguage == 'zh' ? '支付失敗' : 'Payment failed' }}</span>
|
|||
|
|
<span v-if="order.status == '已取消'">{{ currentLanguage == 'zh' ? '已取消' : 'Cancelled' }}</span>
|
|||
|
|
<span v-if="order.status == '求购中'" style="color: orange;">{{ currentLanguage == 'zh' ? '求購中' : 'Buying' }}</span>
|
|||
|
|
<span v-if="order.status == '交易中'" style="color: orange;">{{ currentLanguage == 'zh' ? '交易中' : 'Trading' }}</span>
|
|||
|
|
<span v-if="order.status == '成功'" style="color: green;">{{ currentLanguage == 'zh' ? '成功' : 'success' }}</span>
|
|||
|
|
<span v-if="order.status == '失败'">{{ currentLanguage == 'zh' ? '失敗' : 'fail' }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 订单商品列表 -->
|
|||
|
|
<div class="product-list">
|
|||
|
|
<div class="product-item" v-for="(product, index) in order.items" :key="product.id">
|
|||
|
|
<div class="product-info">
|
|||
|
|
<img :src="baseUrl + product.tplinfo.img" class="product-thumb">
|
|||
|
|
<div class="product-detail">
|
|||
|
|
<div class="product-name">{{ currentLanguage == 'zh' ? product.tplinfo.name_cn : product.tplinfo.name_en }}</div>
|
|||
|
|
<div class="product-spec">{{ currentLanguage == 'zh' ? product.tplinfo.desc_cn : product.tplinfo.desc_en }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 订单底部 -->
|
|||
|
|
<div class="order-footer">
|
|||
|
|
<div class="order-amount">
|
|||
|
|
<span>{{ currentLanguage == 'zh' ? `共 ${order.items.length} 件商品` : `Total ${order.items.length} item`}}</span>
|
|||
|
|
<span class="total-price">{{ currentLanguage == 'zh' ? `合計：${order.bnb} BNB`: `Total: ${order.bnb} BNB` }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="order-actions">
|
|||
|
|
<template v-if="order.status === '待支付'">
|
|||
|
|
<el-button type="primary" size="small" @click="goToPay(order)">{{ currentLanguage == 'zh' ? '去付款' : 'Go to payment' }}</el-button>
|
|||
|
|
<el-button type="primary" size="small" @click="goToPaid(order)">{{ currentLanguage == 'zh' ? '我已支付' : 'I have paid' }}</el-button>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 分页 -->
|
|||
|
|
<div style="height: 60px;display: flex;justify-content: flex-end;align-items: center;">
|
|||
|
|
<el-pagination
|
|||
|
|
background
|
|||
|
|
layout="prev, pager, next"
|
|||
|
|
@current-change="handleCurrentChange"
|
|||
|
|
:total="orderListObj.total"
|
|||
|
|
:current-page.sync="orderSearchObj.page"
|
|||
|
|
>
|
|||
|
|
</el-pagination>
|
|||
|
|
</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>
|
|||
|
|
<!-- 已支付但未完成订单 -->
|
|||
|
|
<el-dialog :title="currentLanguage == 'zh' ? '提示' : 'hint'" :visible.sync="paymentDialogVisible" width="25%" custom-class="bid-dialog" :show-close="true"
|
|||
|
|
center>
|
|||
|
|
<div class="price-section">
|
|||
|
|
<el-input v-model="paymentTxId" :placeholder="currentLanguage == 'zh' ? '請輸入支付訂單hash':'Please enter the payment order hash'" class="price-input"></el-input>
|
|||
|
|
</div>
|
|||
|
|
<div slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;">
|
|||
|
|
<el-button type="danger" @click="paymentDialogVisible = false" class="confirm-btn">{{ currentLanguage == 'zh' ? '取消' : 'Cancel'}}</el-button>
|
|||
|
|
<el-button type="primary" @click="submitPaymentHash" class="confirm-btn">{{ currentLanguage == 'zh' ? '確定' : 'Sure'}}</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
<!-- Main Wrapper End -->
|
|||
|
|
|
|||
|
|
<!-- Back To Top Start -->
|
|||
|
|
<button class="scrollToTopBtn"><i class="fa fa-arrow-up"></i></button>
|
|||
|
|
<!-- Mobile Menu Start -->
|
|||
|
|
<div class="mobile-nav__wrapper">
|
|||
|
|
<div class="mobile-nav__overlay mobile-nav__toggler"></div>
|
|||
|
|
<div class="mobile-nav__content">
|
|||
|
|
<span class="mobile-nav__close mobile-nav__toggler"><i class="fa fa-times"></i></span>
|
|||
|
|
<div class="logo-box">
|
|||
|
|
<a href="index.html" aria-label="logo image"><img src="static/picture/logo.png" alt=""></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="mobile-nav__container"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Mobile Menu End -->
|
|||
|
|
<!-- Jquery Js -->
|
|||
|
|
<script src="static/js/bootstrap.min.js"></script>
|
|||
|
|
<script src="static/js/jquery-3.6.3.min.js"></script>
|
|||
|
|
<script src="static/js/publickDOM.js"></script>
|
|||
|
|
<!-- 引入翻譯文件 -->
|
|||
|
|
<script src="static/js/translation.js"></script>
|
|||
|
|
<script src="static/js/i18n.js"></script>
|
|||
|
|
<!-- 獲取用戶信息 -->
|
|||
|
|
<script src="static/js/getIsUser.js"></script>
|
|||
|
|
<!-- 引入 Vue.js -->
|
|||
|
|
<script src="static/js/vue.js" ></script>
|
|||
|
|
<!-- 引入 axios -->
|
|||
|
|
<script src="static/js/axios.min.js"></script>
|
|||
|
|
<!-- 引入 Element UI JS -->
|
|||
|
|
<script src="static/js/element-ui.js"></script>
|
|||
|
|
<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 {
|
|||
|
|
userInfoObj:{},
|
|||
|
|
// 錢包登錄開始
|
|||
|
|
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,
|
|||
|
|
activeTab: '',
|
|||
|
|
timeFilter: 'buyer',
|
|||
|
|
orderSearchObj:{
|
|||
|
|
page:1,
|
|||
|
|
listrow:5
|
|||
|
|
},
|
|||
|
|
orderListObj: {},
|
|||
|
|
tableLoading: false,
|
|||
|
|
paymentDialogVisible:false,
|
|||
|
|
paymentTxId:"",
|
|||
|
|
nowPaidOrderObj:{},//已支付但订单未完成信息
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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";
|
|||
|
|
}
|
|||
|
|
// 錢包登錄結尾
|
|||
|
|
},
|
|||
|
|
watch:{
|
|||
|
|
timeFilter:{
|
|||
|
|
handler(val){
|
|||
|
|
this.orderSearchObj.page = 1;
|
|||
|
|
this.orderListObj = {};
|
|||
|
|
this.getallorderList();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
deep:true
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
window.addEventListener('localStorageChange', (event) => {
|
|||
|
|
if (event.detail.key === 'languageNow') {
|
|||
|
|
this.currentLanguage = event.detail.value;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.getallorderList();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
expirationTimeOp(timestamp){
|
|||
|
|
const date = new Date(timestamp); // 创建 Date 对象
|
|||
|
|
const year = date.getFullYear(); // 获取年份
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0'); // 获取月份，注意月份从0开始
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0'); // 获取日期
|
|||
|
|
const hours = String(date.getHours()).padStart(2, '0'); // 获取小时
|
|||
|
|
const minutes = String(date.getMinutes()).padStart(2, '0'); // 获取分钟
|
|||
|
|
const seconds = String(date.getSeconds()).padStart(2, '0'); // 获取秒钟
|
|||
|
|
|
|||
|
|
// 返回格式化后的日期字符串
|
|||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|||
|
|
},
|
|||
|
|
getallorderList(){
|
|||
|
|
this.tableLoading = true;
|
|||
|
|
let _that = this;
|
|||
|
|
$.ajax({
|
|||
|
|
url: `${baseUrl}api/project/getorderlist`,
|
|||
|
|
type: "get",
|
|||
|
|
data: {
|
|||
|
|
..._that.orderSearchObj,
|
|||
|
|
trade: _that.timeFilter,
|
|||
|
|
state: _that.activeTab
|
|||
|
|
},
|
|||
|
|
headers: {
|
|||
|
|
token: _that.userInfoObj.token
|
|||
|
|
},
|
|||
|
|
success(res){
|
|||
|
|
if (res.code === 1) {
|
|||
|
|
_that.orderListObj = res.data;
|
|||
|
|
_that.tableLoading = false;
|
|||
|
|
} else {
|
|||
|
|
_that.$message.error(res.msg)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error(error) {
|
|||
|
|
_that.$message.error(error)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
changeTab(tab) {
|
|||
|
|
this.activeTab = tab;
|
|||
|
|
this.orderSearchObj.page = 1;
|
|||
|
|
this.getallorderList();
|
|||
|
|
},
|
|||
|
|
submitPaymentHash(){
|
|||
|
|
let message = "";
|
|||
|
|
this.currentLanguage == 'zh' ? message = '請輸入支付訂單hash' : message = 'Please enter the payment order hash'
|
|||
|
|
if(!this.paymentTxId){
|
|||
|
|
this.$message.error(message);
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.paymentDialogVisible = false;
|
|||
|
|
let tipMessage = this.currentLanguage == 'zh' ? '查詢中，請勿刷新頁面...' : 'Querying, 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)' });
|
|||
|
|
this.submitOrderHash(this.nowPaidOrderObj.id,this.paymentTxId);
|
|||
|
|
},
|
|||
|
|
goToPaid(order){
|
|||
|
|
this.nowPaidOrderObj = {...order};
|
|||
|
|
this.paymentDialogVisible = true;
|
|||
|
|
},
|
|||
|
|
goToPay(order) {
|
|||
|
|
let _that = this;
|
|||
|
|
let message1 = this.currentLanguage == 'zh' ? '請連接錢包' : 'Please connect the wallet';
|
|||
|
|
let tip = this.currentLanguage == 'zh' ? '提示' : 'tips';
|
|||
|
|
let confirm = this.currentLanguage == 'zh' ? '確定' : 'confirm';
|
|||
|
|
let cancel = this.currentLanguage == 'zh' ? '取消' : 'cancel';
|
|||
|
|
if(!this.userMoneyAdressAll){
|
|||
|
|
this.$message.error(message1);
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
this.moneyDialogVisible = true;
|
|||
|
|
},1000)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let tipmessage = _that.currentLanguage == 'zh' ? `是否前往支付訂單費用？` : `Do you want to pay for the order?`;
|
|||
|
|
if(_that.timeFilter == 'seller'){
|
|||
|
|
tipmessage = _that.currentLanguage == 'zh' ? `是否前往支付版權費？` : `Do you want to pay the copyright fee?`;
|
|||
|
|
}
|
|||
|
|
_that.$confirm(tipmessage, tip, {
|
|||
|
|
confirmButtonText: confirm,
|
|||
|
|
cancelButtonText: cancel,
|
|||
|
|
type: 'warning'
|
|||
|
|
}).then(() => {
|
|||
|
|
let tipMessage = _that.currentLanguage == 'zh' ? '交易中，請勿刷新頁面...' : 'During the transaction, please do not refresh the page';
|
|||
|
|
_that.orderLoading = _that.$loading({ lock: true, text: tipMessage, spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
|
|||
|
|
_that.payOrderFee(order);
|
|||
|
|
}).catch(() => {
|
|||
|
|
_that.$message("Failed");
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
async payOrderFee(item){
|
|||
|
|
let _that = this;
|
|||
|
|
const provider = window.web3?.currentProvider;
|
|||
|
|
let web3 = null;
|
|||
|
|
if(this.connectWalletType == "MetaMask"){
|
|||
|
|
web3 = new Web3(provider);
|
|||
|
|
await provider.request({method: 'eth_requestAccounts'});
|
|||
|
|
}
|
|||
|
|
if(this.connectWalletType == "TokenPocket"){
|
|||
|
|
web3 = new Web3(window.tokenpocket.ethereum);
|
|||
|
|
await window.tokenpocket.ethereum.request({method: 'eth_requestAccounts'});
|
|||
|
|
}
|
|||
|
|
if(this.connectWalletType == "OKX Wallet"){
|
|||
|
|
web3 = new Web3(window.okxwallet);
|
|||
|
|
await window.okxwallet.request({method: 'eth_requestAccounts'});
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
const transactions = {
|
|||
|
|
from: _that.userMoneyAdressAll,
|
|||
|
|
to: item.toaddress,
|
|||
|
|
value: web3.utils.toWei(item.bnb, 'ether'),
|
|||
|
|
gas: 21000
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const result = await web3.eth.sendTransaction(transactions);
|
|||
|
|
|
|||
|
|
if(result.transactionHash){
|
|||
|
|
this.submitOrderHash(item.id,result.transactionHash);
|
|||
|
|
}else{
|
|||
|
|
let canaltip = this.currentLanguage == 'zh' ? '交易失敗！' : 'Transaction failed!';
|
|||
|
|
this.$message.error(canaltip);
|
|||
|
|
this.orderLoading.close();
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error,'交易失败原因');
|
|||
|
|
let canaltip = this.currentLanguage == 'zh' ? '交易失敗！' : 'Transaction failed!';
|
|||
|
|
this.$message.error(canaltip);
|
|||
|
|
this.orderLoading.close();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
submitOrderHash(id,tx){
|
|||
|
|
//求购卖出支付结果api/project/wtbrevpayres
|
|||
|
|
//买入支付结果api/common/payresult
|
|||
|
|
let api = "";
|
|||
|
|
let obj = {};
|
|||
|
|
let _that = this;
|
|||
|
|
if(this.timeFilter == 'buyer'){
|
|||
|
|
api = "api/common/payresult";
|
|||
|
|
obj = { id,tx }
|
|||
|
|
}else{
|
|||
|
|
api = "api/project/wtbrevpayres";
|
|||
|
|
obj = { wtbid: id,tx }
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
$.ajax({
|
|||
|
|
url: `${baseUrl + api}`,
|
|||
|
|
type: "post",
|
|||
|
|
data: {...obj},
|
|||
|
|
headers: {
|
|||
|
|
token: _that.userInfoObj.token
|
|||
|
|
},
|
|||
|
|
success(res){
|
|||
|
|
if (res.code === 1) {
|
|||
|
|
_that.$message.success('success');
|
|||
|
|
_that.orderLoading.close();
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
_that.getallorderList();
|
|||
|
|
},1000);
|
|||
|
|
} else {
|
|||
|
|
_that.$message.error(res.msg)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error(err) {
|
|||
|
|
_that.$message.error(err)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
} catch (error) {
|
|||
|
|
_that.$message.error(error)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleCurrentChange(newPage) {
|
|||
|
|
this.orderSearchObj.page = newPage;
|
|||
|
|
this.getallorderList();
|
|||
|
|
},
|
|||
|
|
// <-- -------------------------錢包登錄開始 --------------------------->
|
|||
|
|
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>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.order-h5-page {
|
|||
|
|
padding: 20px;
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-tabs {
|
|||
|
|
display: flex;
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 10px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 8px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item.active {
|
|||
|
|
color: #409EFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.filter-section {
|
|||
|
|
margin: 15px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-item {
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-header {
|
|||
|
|
padding: 15px;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 15px;
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.jd-icon {
|
|||
|
|
color: #e1251b;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-status {
|
|||
|
|
color: #e1251b;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-list {
|
|||
|
|
padding: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-item {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-item:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-info {
|
|||
|
|
display: flex;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-thumb {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-right: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-detail {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-name {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-spec {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-quantity {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-footer {
|
|||
|
|
padding: 15px;
|
|||
|
|
border-top: 1px solid #f0f0f0;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-amount {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.total-price {
|
|||
|
|
margin-left: 15px;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.payment-status {
|
|||
|
|
margin-left: 15px;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-actions .el-button--text {
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.delete-btn {
|
|||
|
|
color: #999 !important;
|
|||
|
|
}
|
|||
|
|
</style>
|