From 5b045fe90bbeb645e54457bde7095317db240039 Mon Sep 17 00:00:00 2001
From: hxhxhx <2357034401@qq.com>
Date: Wed, 7 May 2025 09:13:07 +0800
Subject: [PATCH] 1

---
 all-order.html           |   2 +-
 news-detail.html         |   3 +-
 nft.html                 | 219 ++++++++++++++++++++++++++++++++++-----
 static/js/publickDOM.js  |   2 +-
 static/js/translation.js |   4 +-
 trading-detail.html      | 145 ++++++++++++++++++--------
 6 files changed, 300 insertions(+), 75 deletions(-)

diff --git a/all-order.html b/all-order.html
index 35165a7..aab2d0a 100644
--- a/all-order.html
+++ b/all-order.html
@@ -37,7 +37,7 @@
             <!-- 时间筛选 -->
             <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 | Lease'" value="buyer"></el-option>
                     <el-option :label="currentLanguage == 'zh' ? '求購賣出':'Buy Sell'" value="seller"></el-option>
                 </el-select>
             </div>
diff --git a/news-detail.html b/news-detail.html
index 217e03d..322b1f5 100644
--- a/news-detail.html
+++ b/news-detail.html
@@ -68,7 +68,7 @@
                 <a href="news.html" class="returnnews">{{currentLanguage == "zh" ? '< 返回' : '< return'}}</a>
             </div>
             <div class="n_d_img">
-                <img :src="baseUrl + currentLanguage == 'zh' ? readeDetalObj.cn_img :  readeDetalObj.en_img" alt="">
+                <img :src="baseUrl + (currentLanguage == 'zh' ? readeDetalObj.cn_img : readeDetalObj.en_img)" alt="">
             </div>
             <div class="n_d_txt" v-html="currentLanguage == 'zh' ? readeDetalObj.text_cn :  readeDetalObj.text_en"></div>
         </div>
@@ -247,6 +247,7 @@
                     }
                 });
                 this.getReadDetail();
+                
             },
             methods: {
                 // <-- -------------------------钱包登录开始 --------------------------->
diff --git a/nft.html b/nft.html
index c066018..11793fa 100644
--- a/nft.html
+++ b/nft.html
@@ -54,7 +54,7 @@
 
         .page_nft_title {
             display: flex;
-            /* margin-bottom: 4vh; */
+            margin-bottom: 4vh;
         }
 
         .page_nft_title>div {
@@ -316,8 +316,17 @@
                     <div :class="[titleactive == 2? 'title_active':'title']" @click="cheangetitact(2)">
                         {{currentLanguage == 'zh' ? '倉庫':'Warehouse'}}
                     </div>
+                    <div :class="[titleactive == 3? 'title_active':'title']" @click="cheangetitact(3)">
+                        {{currentLanguage == 'zh' ? '上架中':'Available now'}}
+                    </div>
+                    <div :class="[titleactive == 4? 'title_active':'title']" @click="cheangetitact(4)">
+                        {{currentLanguage == 'zh' ? '租賃中':'Lease'}}
+                    </div>
+                    <div :class="[titleactive == 5? 'title_active':'title']" @click="cheangetitact(5)">
+                        {{currentLanguage == 'zh' ? '交易中':'Trading'}}
+                    </div>
                 </div>
-                <div class="attr-box" v-show="attributeList.length > 0">
+                <div class="attr-box" v-show="attributeList.length > 0 && titleactive == 1">
                     <template v-for="(item , index) in attributeList.filter(item => { return item.own > 0})">
                         <div :key="item.id" v-if="index < 5" @click="checkFindGoods(item.id,item.own)"
                             :class="{'attr_active':attrCurrent.includes(item.id),'attr-box-item':true}">
@@ -361,11 +370,21 @@
                         <div style="text-align: end;">
                             <label style="color: #828080;"> {{moment(item?.updatetime * 1000).format('YYYY-MM-DD HH:mm:ss')}} </label>
                         </div>
+                        <div v-if="titleactive == 4">
+                            <label style="color: #828080;">{{currentLanguage == 'zh' ? '租賃狀態:':'Lease Status:'}}</label>
+                            <p>{{ currentLanguage == 'zh' ? (item.leaseuid > 0 ? '已租出':'未租出') : (item.leaseuid > 0 ? 'Rented':'Not rented out')}}</p>
+                        </div>
+                        <div v-if="titleactive == 4 || (titleactive == 2 && item.leasetime > 0)">
+                            <label style="color: #828080;">{{currentLanguage == 'zh' ? '租賃到期時間:':'Lease expiration date:'}}</label>
+                            <p>{{ item.leasetime > 0 ? moment(item.leasetime * 1000).format('YYYY-MM-DD HH:mm:ss') : '' }}</p>
+                        </div>
                         <div class="btn">
-                            <div class="btn1" v-if="item.status == '在售'">{{ currentLanguage == 'zh' ? '在售中':'On sale' }}</div>
-                            <div class="btn1" v-if="item.status != '在售' && item.status != '在仓库'" @click="transaction(item)">{{currentLanguage == 'zh' ?
+                            <div class="btn1" v-if="nftStatus == '可售'" @click="transaction(item,1)">{{currentLanguage == 'zh' ?
                                 '交易':'transaction'}}</div>
-                            <div class="btn2" v-if="item.status != '在售' && item.status != '在仓库'" @click="joinwarehouse">{{currentLanguage == 'zh' ? '加入倉庫':'Join Warehouse'}}</div>
+                                <div class="btn1" v-if="nftStatus == '可售'" @click="transaction(item,2)">{{currentLanguage == 'zh' ? '租賃':'lease'}}</div>
+                            <div class="btn2" v-if="nftStatus == '可售'" @click="joinwarehouse(item.id,1)">{{currentLanguage == 'zh' ? '加入倉庫':'Join Warehouse'}}</div>
+                            <div class="btn1" v-if="nftStatus == '在仓库'&& item.status == '在仓库'" @click="joinwarehouse(item.id,2)">{{currentLanguage == 'zh' ? '拿出倉庫':'Take out the warehouse'}}</div>
+                            <div class="btn1" v-if="titleactive == 2 && item.leaseuid == userInfos.id" @click="myNftRenewal(item)">{{currentLanguage == 'zh' ? '續租':'Renewal'}}</div>   
                         </div>
                     </div>
                 </div>
@@ -378,7 +397,7 @@
             </div>
         </div>
         <!-- 上架到交易中心 -->
-        <el-dialog :title="currentLanguage == 'zh' ? '交易' : 'transaction'" :visible.sync="dialogVisible" width="30%">
+        <el-dialog :title="currentLanguage == 'zh' ? (isLease ? '租賃' : '交易') : (isLease ? 'lease':'transaction')" :visible.sync="dialogVisible" width="30%">
             <div class="Top">
                 <div class="Top_left">
                     <img :src="baseUrl + transactionInfo.img" alt="" />
@@ -402,6 +421,16 @@
                 <div><el-input v-model="nftPrice"
                         :placeholder="currentLanguage == 'zh' ? '請輸入價格' : 'Please enter the price'"></el-input></div>
             </div>
+            <div class="nft" v-if="isLease">
+                <div style="margin-right: 1%;">{{ currentLanguage == 'zh' ? '時長(天)：' : 'Duration(days)：' }}</div>
+                <div><el-input v-model="nftDuration"
+                        :placeholder="currentLanguage == 'zh' ? '請輸入天數' : 'Please enter the number of days'"></el-input></div>
+            </div>
+            <div class="nft" v-if="isLease">
+                <div style="margin-right: 1%;">{{ currentLanguage == 'zh' ? '續租增幅(%)：' : 'Lease renewal rate (%)：' }}</div>
+                <div><el-input v-model="nftRenewal"
+                        :placeholder="currentLanguage == 'zh' ? '請輸入續租增幅' : 'Please enter the renewal increase'"></el-input></div>
+            </div>
             <div class="nft">
                 <div style="margin-right: 1%;">{{ currentLanguage == 'zh' ? '收款地址：' : 'Receiving address：' }}</div>
                 <div><el-input v-model="nftintAdress"
@@ -552,6 +581,10 @@
             el: '#app',
             data() {
                 return {
+                    nftrenewalInfos:{},//nft续租信息
+                    nftDuration:"",//时长
+                    nftRenewal:"",
+                    isLease:false,
                     sendId:"",//交易的nft的id
                     connectWalletType: "",
                     transactionInfo: {},
@@ -598,7 +631,7 @@
                     currentPage: 1, // 當前頁碼
                     csid: '',
                     userInfos: [],
-                    nftStatus: "",
+                    nftStatus: "可售",
                 }
             },
             async created() {
@@ -648,11 +681,78 @@
                 })
             },
             methods: {
+                myNftRenewal(item){
+                    this.nftrenewalInfos = {...item};
+                    let _that = this;
+                    let tipmessage = _that.currentLanguage == 'zh' ? '是否確定續租一個週期?' : 'Is it confirmed to renew the lease for one period?';
+                    let tip = this.currentLanguage == 'zh' ? '提示' : 'tips';
+                    let confirm = this.currentLanguage == 'zh' ? '確定' : 'confirm';
+                    let cancel = this.currentLanguage == 'zh' ? '取消' : 'cancel';
+                    _that.$confirm(tipmessage, tip, {
+                        confirmButtonText: confirm,
+                        cancelButtonText: cancel,
+                        type: 'warning'
+                    }).then(() => {
+                        let message = _that.currentLanguage == 'zh' ? '請連接錢包' : 'Please connect the wallet';
+                        if(!_that.userMoneyAdressAll){
+                            _that.$message.error(message);
+                            setTimeout(()=>{
+                                _that.moneyDialogVisible = true;
+                            },1000)
+                            return 
+                        }
+                        _that.creatRenewalOrder();   
+                    }).catch(() => {
+                        _that.$message("Failed");     
+                    });
+                },
+                creatRenewalOrder(){
+                    let _that = this;
+                    let tip = this.currentLanguage == 'zh' ? '提示' : 'tips';
+                    let confirm = this.currentLanguage == 'zh' ? '確定' : 'confirm';
+                    let cancel = this.currentLanguage == 'zh' ? '取消' : 'cancel';
+                    $.ajax({
+                        url: `${baseUrl}api/project/leasenft`,
+                        type: "post",
+                        data: {
+                            id: _that.nftrenewalInfos.id,
+                            fromaddress:_that.userMoneyAdressAll
+                        },
+                        headers:{
+                            token: _that.userInfos.token
+                        },
+                        success(res) {
+                            if (res.code === 1) {
+                                let tipmessage = _that.currentLanguage == 'zh' ? `請前往支付<span style="color:red;">續租費${res.data.bnb} BNB(包含GAS費:${res.data.gasfee} BNB)</span>` : `Please go to pay the <span style="color:red;">renewal fee ${res.data.bnb} BNB (including GAS fee: ${res.data.gasfee} BNB)</span>`;
+                                _that.$confirm(tipmessage, tip, {
+                                    confirmButtonText: confirm,
+                                    cancelButtonText: cancel,
+                                    dangerouslyUseHTMLString: true
+                                }).then(() => { 
+                                    let tipMessage1 = _that.currentLanguage == 'zh' ? '交易中，請勿刷新頁面...' : 'During the transaction, please do not refresh the page';
+                                    _that.orderLoading = _that.$loading({ lock: true, text: tipMessage1, spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
+                                    _that.websentMoney(res.data,'renewal');   
+                                }).catch(() => {
+                                    _that.$message("Failed");     
+                                });
+                            } else {
+                                _that.$message.error(res.msg)
+                            }
+                        },
+                        error(err) {
+                            _that.$message.error(err)
+                        }
+                    });  
+                },
                 submitNft() {
                     let _that = this;
                     let message = _that.currentLanguage == 'zh' ? '請輸入完整資訊' : 'Please enter complete information';
                     let message1 = _that.currentLanguage == 'zh' ? '請連接錢包' : 'Please connect the wallet';
-                    if (!_that.nftPrice || !_that.nftintAdress) return _that.$message.error(message);
+                    if (_that.isLease) {
+                        if (!_that.nftPrice || !_that.nftDuration || !_that.nftintAdress || !_that.nftRenewal) return _that.$message.error(message);
+                    } else {
+                        if (!_that.nftPrice || !_that.nftintAdress) return _that.$message.error(message);
+                    }
                     if(!_that.userMoneyAdressAll){
                         _that.$message.error(message1);
                         setTimeout(()=>{
@@ -660,7 +760,7 @@
                         },1000)
                         return 
                     }
-                    _that.creatOrder();
+                    _that.creatOrder()
                 },
                 //創建交易訂單
                 creatOrder(){
@@ -668,24 +768,39 @@
                     let confirm = this.currentLanguage == 'zh' ? '確定' : 'confirm';
                     let cancel = this.currentLanguage == 'zh' ? '取消' : 'cancel';
                     let _that = this;
-                    $.ajax({
-                        url: `${baseUrl}api/project/sale`,
-                        type: "post",
-                        data: {
+                    let params = {};
+                    let apiUrl = "";
+                    if(_that.isLease){
+                        params = {
+                            bnb: _that.nftPrice,
+                            id: _that.sendId,
+                            addr: _that.nftintAdress,
+                            day: _that.nftDuration,
+                            diffrate: _that.nftRenewal
+                        }
+                        apiUrl = "api/project/lease"
+                    }else{
+                        params = {
                             bnb: _that.nftPrice,
                             id: _that.sendId,
                             addr: _that.nftintAdress
-                        },
+                        }
+                        apiUrl = "api/project/sale"
+                    }
+                    $.ajax({
+                        url: baseUrl + apiUrl,
+                        type: "post",
+                        data: params,
                         headers: {
                             token: _that.userInfos.token
                         },
                         success(res) {
                             if (res.code === 1) {
-                                let tipmessage = _that.currentLanguage == 'zh' ? `請前往支付版權費(${res.data.salefee} BNB)和墊付GAS費(${res.data.gasfee} BNB)` : `Please go to pay the copyright fee (${res.data.salefee} BNB) and advance the GAS fee (${res.data.gasfee} BNB)`;
+                                let tipmessage = _that.currentLanguage == 'zh' ? `請前往支付<span style="color:red;">版權費(${res.data.salefee} BNB)</span><br>和墊付<span style="color:red;">GAS費(${res.data.gasfee} BNB)</span>` : `Please go to pay the <span style="color:red;">copyright fee (${res.data.salefee} BNB)</span><br> and advance the <span style="color:red;">GAS fee (${res.data.gasfee} BNB)</span>`;
                                 _that.$confirm(tipmessage, tip, {
                                     confirmButtonText: confirm,
                                     cancelButtonText: cancel,
-                                    type: 'warning'
+                                    dangerouslyUseHTMLString: true
                                 }).then(() => {
                                     _that.dialogVisible = false;   
                                     let tipMessage = _that.currentLanguage == 'zh' ? '交易中，請勿刷新頁面...' : 'During the transaction, please do not refresh the page';
@@ -704,7 +819,7 @@
                     });
                 },
                 //發起版權費+GAS費支付
-                async websentMoney(item) {
+                async websentMoney(item,renewalTxt) {
                     let _that = this;
                     const provider = window.web3?.currentProvider;
                     let web3 = null;
@@ -731,7 +846,7 @@
                         
                         if(result.transactionHash){
                             console.log("成功哈希:",result.transactionHash);
-                            this.submitHash(item.id,result.transactionHash);
+                            this.submitHash(item.id,result.transactionHash,renewalTxt);
                         }else{
                             let canaltip = this.currentLanguage == 'zh' ? '交易失敗！' : 'Transaction failed!';
                             this.$message.error(canaltip);
@@ -744,11 +859,13 @@
                     }
                 },
                 //支付完成提交hash
-                submitHash(id,tx){
+                submitHash(id,tx,renewalTxt){
                     let _that = this;
+                    let apiURL = "";
+                    renewalTxt == 'renewal' ? apiURL = 'api/common/payresult' : _that.isLease ? apiURL = "api/project/payedleaseorder" : apiURL = "api/project/payedsaleorder"
                     try {
                         $.ajax({
-                            url: `${baseUrl}api/project/payedsaleorder`,
+                            url: baseUrl + apiURL,
                             type: "post",
                             data: {id,tx},
                             headers: {
@@ -980,23 +1097,69 @@
                 cheangetitact(val) {
                     if (this.titleactive == val) { return }
                     this.titleactive = val;
-                    if (val == 2) {
-                        this.nftStatus = "在倉庫";
-                    } else {
-                        this.nftStatus = "";
+                    switch (val) {
+                        case 1:
+                            this.nftStatus = "可售";
+                            break;
+                        case 2:
+                            this.nftStatus = "在仓库";
+                            break;
+                        case 3:
+                            this.nftStatus = "在售";
+                            break;
+                        case 4:
+                            this.nftStatus = "租赁中";
+                            break;
+                        case 5:
+                            this.nftStatus = "交易中";
+                            break;
+                        default:
+                            this.nftStatus = "";
+                            break;
                     }
                     this.loadData();
                 },
                 //   交易倉庫
-                transaction(item) {
+                transaction(item,n) {
+                    n == 1 ? this.isLease = false : this.isLease = true;
                     this.transactionInfo = item.tpl_info;
                     this.sendId = item.id;
                     console.log(item.tpl_info, 'xxxxxxx');
                     this.dialogVisible = true;
                 },
-                joinwarehouse() {
-                    let message = this.currentLanguage == 'zh' ? '功能暫未開放，敬請期待！！！' : 'The function is not yet open, please stay tuned!!!';
-                    this.$message(message)
+                joinwarehouse(id,n) {
+                    let _that = this; 
+                    let message = this.currentLanguage == 'zh' ? (n == 1 ? '是否加入倉庫?' : '是否拿出倉庫') : (n == 1 ? 'Whether to join the warehouse?' : 'Take out the warehouse?');
+                    let tip = this.currentLanguage == 'zh' ? '提示' : 'tips';
+                    let confirm = this.currentLanguage == 'zh' ? '確定' : 'confirm';
+                    let cancel = this.currentLanguage == 'zh' ? '取消' : 'cancel';
+                    let apiSelect = "";
+                    n == 1 ? apiSelect = 'api/project/instore' : apiSelect = 'api/project/outstore'
+                    this.$confirm(message,tip,{
+                        confirmButtonText: confirm,
+                        cancelButtonText: cancel,
+                        type: 'warning'
+                    }).then(() => {
+                        $.ajax({
+                            url: baseUrl + apiSelect,
+                            type: 'post',
+                            data: {id},
+                            headers:{token: _that.userInfos.token},
+                            success(res){
+                                if(res.code === 1){
+                                    _that.$message.success("success");
+                                    setTimeout(()=>{
+                                        _that.loadData()
+                                    },1000)
+                                }
+                            },
+                            error(error){
+                                _that.$message.error("error");   
+                            }
+                        });
+                    }).catch(() => {
+                        _that.$message("Failed");     
+                    });
                 },
                 //   headers
                 mobileLang() {
diff --git a/static/js/publickDOM.js b/static/js/publickDOM.js
index 8bc59f4..875b392 100644
--- a/static/js/publickDOM.js
+++ b/static/js/publickDOM.js
@@ -56,7 +56,7 @@ const headerTxt = `
                                 <div id="isshouother">
                                     <li><a data-i18n="user.title1" href="profile.html" class="subtitle">Profile</a></li>
                                     <li><a href="nft.html" class="subtitle">NFT</a></li>
-                                    <li><a data-i18n="user.title6"  href="all-order.html" class="subtitle">Trading</a></li>
+                                    <li><a data-i18n="user.title6"  href="all-order.html" class="subtitle">Order</a></li>
                                     <li><a data-i18n="user.title3"   href="javascript:void(0);" class="subtitle">Set Up</a></li>
                                     <li><a data-i18n="user.title7"   href="javascript:void(0);" class="subtitle">Secure</a></li>
                                     <li><a data-i18n="user.title4"   href="javascript:void(0);" class="subtitle">Help</a></li>
diff --git a/static/js/translation.js b/static/js/translation.js
index 090b8d3..ec9fd1f 100644
--- a/static/js/translation.js
+++ b/static/js/translation.js
@@ -58,7 +58,7 @@ const translations = {
             title3: "Settings",
             title4: "Help",
             title5: "Sign Out",
-            title6: "Trading",
+            title6: "Order",
             title7: "Secure",
             seeMoney: "View Wallet",
             disMoney: "Disconnect"
@@ -130,7 +130,7 @@ const translations = {
             title3: "設置", 
             title4: "幫助",
             title5: "退出",
-            title6: "交易",
+            title6: "訂單",
             title7: "安全",
             seeMoney: "查看錢包",
             disMoney: "斷開連接"
diff --git a/trading-detail.html b/trading-detail.html
index b0fbfc1..f285889 100644
--- a/trading-detail.html
+++ b/trading-detail.html
@@ -169,6 +169,7 @@
                 </div>
                 <div class="trading_d_main">
                     <el-tabs v-model="activeName" @tab-click="tradingTabChange">
+                        <!-- NFT交易 -->
                         <el-tab-pane :label="currentLanguage == 'zh' ? 'NFT交易' : 'NFT Trading'" name="first">
                             <div class="cp_header">
                                 <div>
@@ -248,14 +249,13 @@
                                 </div>
                             </div>
                         </el-tab-pane>
-                        <!-- <el-tab-pane :label="currentLanguage == 'zh' ? '我的收藏' : 'My Collection'" name="second">
+                        <!-- NFT租赁 -->
+                        <el-tab-pane :label="currentLanguage == 'zh' ? 'NFT租賃' : 'NFT Leasing'" name="second">
                             <div class="cp_main">
                                 <div class="cp_main_left">
-                                    <div class="cp_header">
-                                        <div style="width: 100%;">
-                                            <el-input :placeholder="currentLanguage == 'zh' ? '搜索NFT':'Search NFTs'" prefix-icon="el-icon-search"
-                                                v-model="searchNft"></el-input>
-                                        </div>
+                                    <div>
+                                        <el-input :placeholder="currentLanguage == 'zh' ? '搜索NFT':'Search NFTs'" @blur="getLeaseNftList" prefix-icon="el-icon-search"
+                                            v-model="searchNft"></el-input>
                                     </div>
                                     <el-collapse v-model="activeNames">
                                         <el-collapse-item :title="currentLanguage == 'zh' ? '裝備類型' : 'Equipment Type'" name="1">
@@ -264,9 +264,10 @@
                                                     v-for="item in equipmentType"
                                                     :key="item.id"
                                                     :style="{
-                                                        'background-color':selectEqType == item.id ? '#409eff' : '#fff',
-                                                        'color':selectEqType == item.id ? '#fff' : '#5F6067'
+                                                        'background-color': selectEqType == item.id ? '#409eff' : '#fff',
+                                                        'color': selectEqType == item.id ? '#fff' : '#5F6067'
                                                     }"
+                                                    @click="searchEqListLease(item.id)"
                                                 >
                                                     {{ currentLanguage == 'zh' ? item.name_cn : item.name_en }}
                                                 </div>
@@ -284,55 +285,56 @@
                                 </div>
                                 <div class="cp_main_right">
                                     <div class="item_box">
-                                        <div class="nft_item">
+                                        <div class="nft_item" 
+                                            v-for="item in leaseNftData.data"
+                                            :key="item.id"
+                                        >
                                             <div class="c_m_p_all_detail">
                                                 <div class="c_m_r_title">
-                                                    <img src="static/ui/trading/shop.png" alt="">
+                                                    <img :src="baseUrl + item.tpl_info.img" alt="">
                                                     <div>
-                                                        <div>遊戲裝備</div>
-                                                        <div style="color: #000;font-weight: 700;">雙手斧頭</div>
-                                                        <div style="color: #000;">#0544646641</div>
+                                                        <div>{{ currentLanguage == 'zh' ? item.tpl_info.title_cn : item.tpl_info.title_en }}</div>
+                                                        <div style="color: #000;font-weight: 700;">{{ currentLanguage == 'zh' ? item.tpl_info.name_cn : item.tpl_info.name_en }}</div>
+                                                        <div style="color: #000;">#{{ item.tokenId }}</div>
                                                     </div>
                                                 </div>
-                                                <div class="c_m_r_infos">
-                                                    <div>物品等級</div>
-                                                    <div>30</div>
+                                                <div class="c_m_r_infos" style="height: 15vh;overflow: hidden;" v-html="currentLanguage == 'zh' ? item.tpl_info.desc_cn : item.tpl_info.desc_en"></div>
+                                                <div class="c_m_r_infos" style="margin-top: 2vh;">
+                                                    <div>{{ currentLanguage == 'zh' ? '價格':'price' }}</div>
+                                                    <div class="c_m_r_price">{{ item.salefee }} BNB</div>
                                                 </div>
                                                 <div class="c_m_r_infos">
-                                                    <div>混沌物品來源</div>
-                                                    <div>盯130</div>
+                                                    <div>{{ currentLanguage == 'zh' ? '時長':'Duration' }}</div>
+                                                    <div class="c_m_r_price">{{ item.leaseday }} 天</div>
                                                 </div>
                                                 <div class="c_m_r_infos">
-                                                    <div>財寶值</div>
-                                                    <div>6</div>
+                                                    <div>{{ currentLanguage == 'zh' ? '續租增幅':'Lease renewal rate' }}</div>
+                                                    <div class="c_m_r_price">{{ Number(item.leasediffrate) }} %</div>
                                                 </div>
                                                 <div class="c_m_r_infos">
-                                                    <div>混沌能量</div>
-                                                    <div>6216</div>
+                                                    <div>{{ currentLanguage == 'zh' ? 'GAS費':'GAS Fee' }}</div>
+                                                    <div class="c_m_r_price">{{ item.gasfee }} BNB</div>
                                                 </div>
-                                                <div class="c_m_r_infos">
-                                                    <div>混沌屬性</div>
-                                                    <div>武器攻擊暴擊度 +27%,最終傷害 +10%</div>
-                                                </div>
-                                                <div class="c_m_r_infos">
-                                                    <div>混沌詞綴</div>
-                                                    <div>[T5]武器傷害強化+39%</div>
-                                                </div>
-                                                <div class="c_m_r_price"><img src="static/ui/meiyuan.png">5000M</div>
-                                            </div> 
-                                            <button class="c_m_r_pryBtn"><i class="el-icon-shopping-cart-2"
-                                                style="font-size: 20px;margin-right: 8px;"></i>立即購買</button> 
+                                            </div>
+                                            <button @click.prevent="payNft(item)" class="c_m_r_pryBtn"><i class="el-icon-shopping-cart-2"
+                                                    style="font-size: 20px;margin-right: 8px;"></i>{{ currentLanguage == 'zh' ? '立即租賃':'Lease Now' }}</button>
                                         </div>
                                     </div>
+                                    <div style="height: 60px;display: flex;justify-content: flex-end;align-items: center;">
+                                        <el-pagination background layout="prev, pager, next" :page-size="8"
+                                            @current-change="handleCurrentChangeLease" :total="leaseNftData.total">
+                                        </el-pagination>
+                                    </div>
                                 </div>
                             </div>
-                        </el-tab-pane> -->
+                        </el-tab-pane>
+                        <!-- NFT求购 -->
                         <el-tab-pane :label="currentLanguage == 'zh' ? 'NFT求購' : 'NFT Purchase'" name="third">
                             <div class="cp_main">
                                 <div class="cp_main_left">
                                     <div class="cp_header">
                                         <div style="width: 100%;">
-                                            <el-input :placeholder="currentLanguage == 'zh' ? '搜索NFT':'Search NFTs'" prefix-icon="el-icon-search"
+                                            <el-input :placeholder="currentLanguage == 'zh' ? '搜索NFT':'Search NFTs'" @blur="getPurchasList" prefix-icon="el-icon-search"
                                                 v-model="searchNft"></el-input>
                                         </div>
                                     </div>
@@ -495,7 +497,7 @@
             </div>
         </el-dialog>
         <!-- 購買NFT彈窗 -->
-        <el-dialog :visible.sync="payNFTDialog" :title="currentLanguage == 'zh' ? '確定購買' : 'Confirm purchase'" width="20%" custom-class="paynft_dialog"
+        <el-dialog :visible.sync="payNFTDialog" :title="currentLanguage == 'zh' ? (activeName == 'first' ? '確定購買' :'確定租賃') : (activeName == 'first' ? 'Confirm purchase' : 'Confirm the lease')" width="20%" custom-class="paynft_dialog"
             :close-on-click-modal="false">
             <div style="display: flex;justify-content: space-between;">
                 <span>{{ currentLanguage == 'zh' ? '合集' : 'Collection' }}</span>
@@ -625,6 +627,7 @@
             el: "#app",
             data() {
                 return {
+                    leaseNftData:{},
                     nowPurchOrderObj:{},
                     receivDialogVisible:false,
                     receivAdress:"",
@@ -1098,6 +1101,43 @@
                         }
                     });
                 },
+                getLeaseNftList(){
+                    let _that = this;
+                    this.orderLoading = _that.$loading({ lock: true, text: 'loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' });
+                    let keywords_cn = "";
+                    let keywords_en = "";
+                    this.currentLanguage == 'zh' ? keywords_cn = this.searchNft : keywords_en = this.searchNft
+                    $.ajax({
+                        url:`${baseUrl}api/project/getenleasenftlist`,
+                        type:'get',
+                        data:{
+                            keywords_cn,
+                            keywords_en,
+                            typeid: _that.nownftId,
+                            page: _that.searchObj.page,
+                            listrow: _that.searchObj.pageSize,
+                            tplid: _that.selectEqType,
+                            sort:"",
+                            desc: true
+                        },
+                        headers:{
+                            token: _that.userInfos.token
+                        },
+                        success(res){
+                            if(res.code === 1){
+                                _that.leaseNftData = res.data.list;
+                                _that.orderLoading.close();
+                            }
+                        },
+                        error(err){
+                            console.log(err);
+                        }
+                    });
+                },
+                searchEqListLease(id){
+                    this.selectEqType = id;
+                    this.getLeaseNftList();
+                },
                 searchEqList(id){
                     this.selectEqType = id;
                     this.getNftList();
@@ -1142,8 +1182,10 @@
                 },
                 creatOrder(){
                     let _that = this;
+                    let apiString = "";
+                    _that.activeName == 'first' ? apiString = 'api/project/buynft' : apiString = 'api/project/leasenft'
                     $.ajax({
-                        url: `${baseUrl}api/project/buynft`,
+                        url: baseUrl + apiString,
                         type: "post",
                         data: {
                             id: _that.paynftObj.id,
@@ -1210,9 +1252,12 @@
                 },
                 submitHash(id,tx){
                     let _that = this;
+                    let apiString = "";
+                    // _that.activeName == 'first' ? apiString = 'api/common/payresult' : ''
                     try {
                         $.ajax({
-                            url: `${baseUrl}/api/common/payresult`,
+                            // url: baseUrl + apiString,
+                            url:`${baseUrl}api/common/payresult`,
                             type: "post",
                             data: {id,tx},
                             headers: {
@@ -1223,7 +1268,7 @@
                                     _that.$message.success('success');
                                     _that.orderLoading.close();
                                     setTimeout(()=>{
-                                        _that.getNftList();
+                                        _that.activeName == 'first' ? _that.getNftList() : _that.getLeaseNftList()
                                     },1000)
                                 } else {
                                     _that.$message.error(err)
@@ -1243,10 +1288,26 @@
                     this.searchObj.page = val;
                     this.getNftList();
                 },
+                handleCurrentChangeLease(){
+                    this.searchObj.page = val;
+                    this.getLeaseNftList();
+                },
                 tradingTabChange(tab) {
                     this.activeName = tab.name;
-                    if (this.activeName == 'third') {
-                        this.getPurchasList();
+                    this.searchObj = {
+                        page:1,
+                        pageSize:8
+                    };
+                    switch (tab.name) {
+                        case 'first':
+                            this.getNftList();
+                            break;
+                        case 'second':
+                            this.getLeaseNftList();
+                            break;
+                        case 'third':
+                            this.getPurchasList();
+                            break;
                     }
                 },
                 // <-- -------------------------錢包登錄開始 --------------------------->