调用购买合约

components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     ACollapsePanel: typeof import('ant-design-vue/es')['CollapsePanel']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
+    AModal: typeof import('ant-design-vue/es')['Modal']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASpace: typeof import('ant-design-vue/es')['Space']
@@ -25,6 +26,7 @@ declare module 'vue' {
     ATableColumn: typeof import('ant-design-vue/es')['TableColumn']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     Banner: typeof import('./src/components/home/banner.vue')['default']
+    BuyDialog: typeof import('./src/components/Dialogs/buyDialog.vue')['default']
     Card: typeof import('./src/components/common/card.vue')['default']
     Cart: typeof import('./src/components/cart/index.vue')['default']
     ChainModel: typeof import('./src/components/home/ChainModel.vue')['default']
@@ -59,6 +61,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Sort: typeof import('./src/components/common/searchView/Sort.vue')['default']
+    StarTimer: typeof import('./src/components/common/starTimer.vue')['default']
     Status: typeof import('./src/components/common/searchView/status.vue')['default']
     Stotus: typeof import('./src/components/common/searchView/stotus.vue')['default']
     TeamMember: typeof import('./src/components/about/TeamMember.vue')['default']

src/components/Dialogs/buyDialog.vue

@@ -0,0 +1,251 @@
+<template>
+    <a-modal :class="'buyDia'" v-model:open="props.buyDialogVisible" :closable="false" :footer="null" @ok="handleOk">
+      <!-- <template #footer>
+        <a-button key="back" @click="handleCancel">Return</a-button>
+        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">Submit</a-button>
+      </template> -->
+      <div class="top-close" @click="handleCancel">
+        <img src="@/assets/img/marketplace/Close counter.png" alt="">
+      </div>
+      <div class="content">
+        <div class="content-title">Transaction confirmation ( 2 )</div>
+        <div class="content-table">
+          <div>NFT</div>
+          <div>Token ID</div>
+          <div>Price</div>
+        </div>
+        <div class="content-nfts">
+          <li>
+            <div class="nft">
+              <div class="nft-img">
+                <img src="" alt="">
+              </div>
+              <div class="nft-name">NFT Name</div>
+            </div>
+            <div class="id">2516</div>
+            <div class="price">
+              <div>0.018</div>
+              <div class="price-img"><img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
+            </div>
+          </li>
+        </div>
+      </div>
+      <div class="btm">
+        <div class="btm-left">
+          <li>Total&nbsp;:&nbsp;</li>
+          <li>
+            <div>
+              <span>0.36</span>
+              <img src="@/assets/img/marketplace/ETHicon.png" alt="">
+            </div>
+            <div class="money">$ 400</div>
+          </li>
+        </div>
+        <div class="btm-right" @click="buyConfirm">Confirm</div>
+      </div>
+    </a-modal>
+</template>
+<script setup>
+import { ref, toRaw, defineEmits } from "vue";
+import {PassportWallet} from "@/wallet/passPort.js"
+// const passProd = ref(new PassportWallet())
+const props = defineProps({
+  buyDialogVisible: {
+    type: Boolean,
+    required: true,
+  },
+  buyDataArr: {
+    type: Array,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['handleClose'])
+
+const handleOk = (e) => {
+  emit('handleClose')
+};
+const buyConfirm = async () => {
+  const pass = new PassportWallet()
+  
+  let ids = []
+  ids.push(toRaw(props.buyDataArr)[0].nft.token_id)
+  // console.log(toRaw(props.buyDataArr)[0].nft.token_id)
+  // return
+  let res = await pass.beginBuy(toRaw(props.buyDataArr)[0].nft.token_id)
+  console.log('购买', res)
+}
+
+const handleCancel = (e) => {
+  emit('handleClose')
+}
+</script>
+
+<style lang="scss">
+// .ant-modal-wrap{
+
+.buyDia {
+    width: 1140px !important;
+    color: #fff;
+    .ant-modal-content {
+      padding: 0px;
+      background: #1a1821;
+      border: 1px solid #B966FF;
+      box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
+      border-radius: 100px;
+      .top-close {
+        position: absolute;
+        top: -53px;
+        right: -53px;
+        width: 106px;
+        height: 106px;
+        cursor: pointer;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .ant-modal-body {
+        padding: 30px 50px;
+        padding-bottom: 10px;
+        .content {
+          .content-title {
+            font-family: 'Anton';
+            font-weight: 400;
+            font-size: 48px;
+            margin-left: 50px;
+          }
+          .content-table {
+            width: 1017px;
+            height: 48px;
+            line-height: 48px;
+            margin: 0 auto;
+            background: #2d2738;
+            border-radius: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            color: #A8A5AC;
+            font-size: 14px;
+            div {
+              width: 240px;
+              text-align: center;
+              &:nth-child(1) {
+                width: 540px;
+                text-align: left;
+                padding-left: 100px;
+                box-sizing: border-box;
+              }
+              &:nth-child(3) {
+                text-align: right;
+                padding-right: 100px;
+                box-sizing: border-box;
+              }
+            }
+          }
+          .content-nfts {
+            width: 1017px;
+            margin: 0 auto;
+            li {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin: 20px 0;
+              >div {
+                width: 240px;
+                font-family: 'Poppins';
+                font-weight: 500;
+                font-size: 30px;
+                text-align: center;
+              }
+              .nft {
+                display: flex;
+                align-items: center;
+                width: 540px;
+                .nft-img {
+                  width: 110px;
+                  height: 164px;
+                  border: 1px solid #fff;
+                  margin-left: 50px;
+                }
+                .nft-name {
+                  font-weight: bold;
+                  margin-left: 20px;
+                }
+              }
+              .id {
+              }
+              .price {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                .price-img {
+                  width: 28px;
+                  height: 28px;
+                  margin-left: 10px;
+                  img {
+                    width: 100%;
+                    height: 100%;
+                  }
+                }
+              }
+            }
+          }
+        }
+        .btm {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-left: 60px;
+          padding-top: 20px;
+          border-top: 2px solid #3A3B57;
+          box-sizing: border-box;
+          .btm-left {
+            display: flex;
+            margin-left: 20px;
+            li {
+              font-family: 'Anton';
+              font-weight: 400;
+              font-size: 42px;
+              color: #BB7FFF;
+              div {
+                display: flex;
+                align-items: center;
+                img {
+                  width: 39px;
+                  height: 39px;
+                  margin-left: 20px;
+                }
+              }
+              .money {
+                font-family: 'Poppins';
+                font-weight: 400;
+                font-size: 24px;
+              }
+            }
+          }
+          .btm-right {
+            width: 240px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            line-height: 40px;
+            margin-right: 20px;
+            background: #fec25d;
+            color: #2D2738;
+            font-family: 'Poppins';
+            font-weight: 500;
+            font-size: 14px;
+            text-align: center;
+            border-radius: 20px;
+            box-shadow: 0 0 5px 0px #fec25d;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+}
+  
+// }
+</style>

src/components/cart/index.vue

@@ -32,7 +32,8 @@ import { ref, defineEmits, onMounted } from "vue"
 import { useRouter, useRoute } from "vue-router";
 import { useImmutableStore } from "@/store/immutable"
 import {
-  apiGetCartList
+  apiGetCartList,
+  apiClearCartList,
 } from "@/utils/marketplace"
 const router = useRouter();
 // console.log(marketplaceStore.cartList,'Cart-------')
@@ -49,8 +50,14 @@ const toMarketplace = () => {
   router.push('/marketplace');
 }
 
-const clearCart = () => {
+const clearCart = async () => {
   console.log('清楚购物车')
+  try {
+    let res = await apiClearCartList()
+    console.log(res)
+  } catch (e) {
+    console.log(e)
+  }
 }
 
 const getCartList = async () => {
@@ -66,7 +73,7 @@ const getCartList = async () => {
 }
 
 onMounted(()=> {
-  // getCartList()
+  getCartList()
 })
 
 </script>

src/components/common/card.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="cards">
-    <div class="card-top" v-if="nftData">
+    <div class="card-top" v-if="nftData" @click="toDetail">
       <div class="card-img">
         <img :src="nftData.nft.image" alt="图片">
       </div>
@@ -18,27 +18,26 @@
         <div>{{ nftData.nft.owner_address.substr(0,6) }}...{{ nftData.nft.owner_address.substr(-6) }}</div>
       </div>
     </div>
-    <div class="card-btn" @click="getData(nftData)">
+    <div class="card-btn">
-      <span>Buy Now</span>
+      <div class="card-buy" @click="buyNft(nftData)">Buy Now</div>
       <div class="card-cat" @click.stop="addCart(nftData)">
         <img src="@/assets/img/marketplace/Add shopping cart02.png" alt="">
       </div>
     </div>
+    <BuyDialog :buyDialogVisible="buyDialogVisible" :buyDataArr="buyDataArr" @handleClose="buyHandleClose" />
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, getCurrentInstance } from "vue"
+import { ref, toRaw, onMounted, getCurrentInstance } from "vue"
-import axios from "axios"
+import BuyDialog from "@/components/Dialogs/buyDialog.vue"
 import { useDetailStore } from "@/store/detail"
 import {
   apiAddCartList
 } from "@/utils/marketplace"
 const detailData = useDetailStore()
-
 import { useRouter } from "vue-router";
 const router = useRouter();
-
 const { proxy } = getCurrentInstance();
 const props = defineProps({
   nftData: {
@@ -46,22 +45,23 @@ const props = defineProps({
     required: true,
   },
 });
-// const nftData = proxy.props.nftData
 
+const buyDialogVisible = ref(false)
+const buyDataArr = ref([])
 
-const getData = (val) => {
+// 确认购买弹窗
-  // console.log(JSON.parse(JSON.stringify(props.nftData)).token_id)
+const buyNft = (val) => {
-  detailData.nftData = JSON.parse(JSON.stringify(props.nftData))
+  buyDataArr.value.push(val)
-  router.push('/detail');
+  buyDialogVisible.value = true
 }
 
 const getImageUrl = (name) => {
   return new URL(`@/assets/img/marketplace/${name}.png`, import.meta.url).href
 }
 
+// 去详情页面
 const toDetail = () => {
-  // console.log((data))
+  detailData.nftData = toRaw(props.nftData)
-  detailData.nftData = JSON.parse(JSON.stringify(props.nftData))
   router.push('/detail');
 }
 
@@ -77,16 +77,23 @@ const addCart = async (val) => {
       }
     ]
   }
-  return
+  console.log(data)
+  // return
   try {
     // let res = await axios.post(`/api/shopcart/add`,{})
-    let res = await apiAddCartList()
+    let res = await apiAddCartList(data)
     console.log(res)
   } catch (e) {
     console.log(e)
   }
 }
 
+// 关闭弹窗
+const buyHandleClose = () => {
+  buyDialogVisible.value = false
+  buyDataArr.value = []
+}
+
 onMounted(() => {
   // console.log(JSON.parse(JSON.stringify(props.nftData)), "-=-=-");
 });
@@ -136,30 +143,34 @@ onMounted(() => {
     width: 95%;
     height: 50px;
     margin: 0 auto;
-    // padding: 5px;
     margin-bottom: 5px;
-    background: #1778f1;
     border-radius: 10px;
     display: flex;
     justify-content: center;
     align-items: center;
-    position: relative;
+    margin-bottom: 5px;
-    span {
+    >div {
+      height: 57px;
+      background: #1778f1;
+      border-radius: 12px;
+      text-align: center;
+    }
+    .card-buy {
+      width: 272px;
+      line-height: 57px;
       color: #fff;
       font-weight: 700;
       font-size: 28px;
     }
     .card-cat {
-      position: absolute;
+      width: 71px;
-      top: 5px;
+      display: flex;
-      right: 20px;
+      justify-content: center;
-      // transform: translateY(-50%);
+      align-items: center;
-      width: 40px;
+      margin-left: 3px;
-      height: 40px;
-      z-index: 99;
       img {
-        width: 100%;
+        width: 43px;
-        height: 100%;
+        height: 39px;
       }
     }
   }

src/components/common/starTimer.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    {{day}}d:{{hour}}h:{{min}}m
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, defineComponent } from 'vue';
+const props = defineProps({
+  getAddress: {
+    type: String,
+    required: true,
+  },
+});
+console.log(new Date(props.getAddress).getTime(),'----')
+let remainingTime = ref(0); // 24小时 = 86400秒
+const day = ref(0);
+const hour = ref(0);
+const min = ref(0);
+const sec = ref(0);
+const entTime = ref(new Date(props.getAddress).getTime());
+let intervalId = null
+const emit = defineEmits(['stopTime'])
+const starTimer = () => {
+  let nowTime = new Date().getTime();
+  // let str = localStorage.getItem(`openTime${props.getAddress}`)
+  // let strTime = (1718098200000 - nowTime) / 1000
+  let strTime = (entTime.value - nowTime) / 1000
+  intervalId = setInterval(() => {
+    if (strTime >= 1) {
+      // remainingTime.value -= 1;
+      strTime--;
+        //js获取剩余天数
+        let d = Math.floor(strTime / 60 / 60 / 24);
+        d = d < 10 ? "0" + d : d;
+        //js获取剩余小时
+        let h = Math.floor((strTime / 60 / 60) % 24);
+        h = h < 10 ? "0" + h : h;
+        //js获取剩余分钟
+        let m = Math.floor((strTime / 60) % 60);
+        m = m < 10 ? "0" + m : m;
+        //js获取剩余秒
+        let s = Math.floor(strTime % 60);
+        s = s < 10 ? "0" + s : s;
+        //赋值给当前变量
+        day.value = d;
+        hour.value = h;
+        min.value = m;
+        sec.value = s;
+    } else {
+      emit('stopTime')
+      localStorage.removeItem(`openTime${props.getAddress}`)
+      clearInterval(intervalId);
+      intervalId = null
+    }
+  }, 1000);
+}
+// 判断是否登录 判断是否显示mint成功倒计时
+const isOpenTime = () => {
+      let openTime = localStorage.getItem(`openTime${props.getAddress}`)
+      if(props.getAddress) {
+        // if(props.getAddress == openTime.split('-')[0]) {
+          starTimer()
+        // }
+      }
+    }
+
+onMounted(() => {
+  isOpenTime()
+  // 清除定时器
+  onUnmounted(() => {
+    clearInterval(intervalId);
+  });
+});
+
+</script>

src/components/layout/NavBar.vue

@@ -159,7 +159,7 @@ const formatAddress = computed(() => {
   const accountId = localStorage.getItem('assessAddress');
   if (!accountId) return "-";
   if (accountId.length >= 10) {
-    return `${accountId.substring(0, 6)}......${accountId.slice(-4)}`;
+    return `${accountId.substring(0, 6)}......${accountId.slice(-6)}`;
   }
   return accountId;
 });
@@ -254,6 +254,10 @@ const immuTableLogin = async () => {
 
 const immuTableLogout = async () => {
   try {
+    localStorage.removeItem('assessToken')
+    localStorage.removeItem('assessAddress')
+    immutableStore.accessToken = ''
+    immutableStore.accounts = ''
     await new PassportWallet().logout()
   } catch (e) {
     console.log(e)
@@ -271,7 +275,7 @@ const myCart = async () => {
 }
 
 watch(() => route.path,(newPath, oldPath) => { 
-  if(newPath == '/marketplace' || newPath == '/assets') {
+  if(newPath == '/marketplace' || newPath == '/assets' || newPath == '/detail') {
     isCart.value = true
   } else {
     isCart.value = false
@@ -482,6 +486,7 @@ watch(() => route.path,(newPath, oldPath) => {
   justify-content: center;
   align-items: center;
   // right: 11px;
+  margin-right: 50px;
 
   .metaMask-logo {
     width: 60px;
@@ -643,7 +648,7 @@ watch(() => route.path,(newPath, oldPath) => {
   }
 }
 .cart-con {
-  position: absolute;
+  position: fixed;
   right: 0;
   top: 84px;
   background: #1e1b23;

src/utils/marketplace.js

@@ -65,7 +65,7 @@ export const apiMarketplaceState = async () => {
 // 详情
 export const apiDetail = async (account_address) => {
   const url = `/api/market/transaction/history/${net_id}/${account_address}`
-  return httpGet(url, {data})
+  return httpGet(url, {})
 }
 
 // 获取购物车列表

src/views/DetailView.vue

@@ -19,14 +19,14 @@
               <div>Price</div>
               <div class="time">
                 <img src="@/assets/img/marketplace/time.png" alt="图片">
-                <span>Time remaining: 6d:10h:22m</span>
+                <div>Time remaining: &nbsp;<StarTimer :getAddress="detailData.nftData.event.data.end_at" /></div>
               </div>
             </li>
             <li>
               <div class="price">
-                <span class="bold">0.01</span>
+                <span class="bold">{{ priceWei(detailData.nftData.event.data.buy[0].amount) }}&nbsp;</span>
                 <img src="@/assets/img/marketplace/ETHicon.png" alt="ICON">
-                <span>($ 37.64)</span>
+                <span>( $ 37.64 )</span>
               </div>
             </li>
           </div>
@@ -37,24 +37,34 @@
             3、购买
             4、
             -->
-            {{ detailData.nftData.nft }}
+            <div v-if="myAddress != detailData.nftData.nft.owner_address">
-            <div>
+              <div class="buy" @click="buyNow">Buy Now</div>
-              <div class="add">Add to cart</div>
+              <div class="add">
-              <div class="remove">Remove from cart</div>
+                <span>Add to cart </span>
+                <div>
+                  <img src="@/assets/img/marketplace/Add shopping cart.png" alt="">
+                </div>
+              </div>
+              <div class="remove" v-if="!myAddress">
+                <span>Remove from cart</span>
+                <div>
+                  <img src="@/assets/img/marketplace/Move out.png" alt="">
+                </div>
+              </div>
             </div>
             <!--
             1、上架
             2、下架
             3、使用
             -->
-            <div>
+            <div v-else>
               <div class="sell">上架</div>
               <div class="cancel">下架</div>
               <div class="redeem">使用</div>
             </div>
           </div>
-          <h2>Info</h2>
           <div class="info">
+            <h2>Info</h2>
             <li>
               <div>Contract address</div>
               <div>{{ sliceAddress(detailData.nftData.nft.contract_address) }}</div>
@@ -79,18 +89,77 @@
         </div>
       </div>
       <div class="content">
+        <div class="btm-left">
+          <h2>Property</h2>
+          <div class="btm-detail">
+            <li v-for="(item, val, index) in nftAbilities" :key="index">
+              <div v-show="val == 'quality'">
+                <h5>Tier</h5>
+                <p>{{ item }}</p>
+              </div>
+              <div v-show="val == 'max_mining_days'">
+                <h5>Active Days</h5>
+                <p>{{ item }}</p>
+              </div>
+              <div v-show="val == 'wealth'">
+                <h5>Wealth Value</h5>
+                <p>{{ parseInt(item) }}</p>
+              </div>
+              <div v-show="val == 'lucky'">
+                <h5>Luck Value</h5>
+                <p>{{ parseInt(item) }}</p>
+              </div>
+              <div v-show="val == 'hp'">
+                <h5>HP</h5>
+                <p>{{ parseInt(item) }}</p>
+              </div>
+              <div v-show="val == 'atk'">
+                <h5>Attack</h5>
+                <p>{{ parseInt(item) }}</p>
+              </div>
+              <div v-show="val == 'def'">
+                <h5>Defense</h5>
+                <p>{{ Number(item).toFixed(2) }}%</p>
+              </div>
+              <div v-show="val == 'block'">
+                <h5>Block Rate</h5>
+                <p>{{ Number(item).toFixed(2) }}%</p>
+              </div>
+              <div v-show="val == 'crit'">
+                <h5>Crit Rate</h5>
+                <p>{{ Number(item).toFixed(2) }}%</p>
+              </div>
+            </li>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue"
+import { ref, toRaw, onMounted } from "vue"
+import StarTimer from "@/components/common/starTimer.vue"
 import { apiDetail } from "@/utils/marketplace"
 import { useDetailStore } from "@/store/detail"
 const detailData = useDetailStore()
-console.log(detailData.nftData)
+console.log(toRaw(detailData.nftData))
-
+import { PassportWallet } from "@/wallet/passPort"
+// const nftData = ref()
+const myAddress = localStorage.getItem("assessAddress")
+const nftAbilities = ref(detailData.nftData.nft.detail)
+// const newAbilitiesName = (data) => {
+//   const newName = {
+//     Tier: "",
+//     Active Days: "",
+//     Tier: "",
+//     Tier: "",
+//     Tier: "",
+//     Tier: "",
+//     Tier: "",
+//     Tier: "",
+//   }
+// }
 
 
 // const formatAddress = computed(() => {
@@ -102,6 +171,23 @@ console.log(detailData.nftData)
 //   return accountId;
 // });
 
+// 购买
+const buyNow = async () => {
+  let tokenIds = []
+  tokenIds.push(detailData.nftData.nft.token_id)
+  console.log(tokenIds)
+
+  console.log(await new PassportWallet().batchBuy(tokenIds))
+  return 
+  try {
+    let res = await batchBuy(tokenIds)
+    console.log(rse)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+// 处理地址
 const sliceAddress = (address) => {
   if (!address) return "-";
   if (address.length >= 10) {
@@ -110,55 +196,66 @@ const sliceAddress = (address) => {
   return address;
 }
 
+// 处理货币
+const priceWei = (price) => {
+  let toPrice = parseInt(BigInt(price))/1e18
+  return priceFixed(toPrice)
+}
+const priceFixed = (num) => {
+  if(isNaN(num)){return num};
+    //处理不需要转换的数字
+    var str = ''+num;
+    if(!/e/i.test(str)){return num;};
+    //先获取到精确的小数位
+    var fixed = (''+num).match(/\d+$/)[0];
+    //拿到保留指定的小数
+    return new Number(num).toFixed(fixed);
+}
+
 const getDetail = async () => {
   let address = localStorage.getItem('address')
   let res = await apiDetail(address)
-  console.log(res)
+  console.log('getDetail',toRaw(res))
+  nftData.value = res.rows
 }
 
 onMounted(() => {
-  getDetail()
+  // getDetail()
 })
 </script>
 
 <style lang="scss" scoped>
 .detail {
   width: 100%;
-  height: calc(100vh);
-  // height: 800px;
-  // margin-top: 85px;
-  // padding-top: 80px;
   box-sizing: border-box;
-  // background: #16141b;
+  background: url('@/assets/img/marketplace/BG01.jpg') no-repeat;
-  // background: url('./../assets/img/home/BG01.png') no-repeat;
+  background-size: 100% 100%;
-  // background-size: 100% 100%;
-  overflow: hidden;
   .detail-bg {
     width: 100%;
-    height: 95px;
+    height: 84px;
-    background: #040304;
   }
   .detail-content {
     width: 100%;
     height: 100%;
-    background: url('./../assets/img/home/BG01.png') no-repeat;
-    background-size: 100% 100%;
     .content {
-      width: 1200px;
+      width: 1266px;
-      background: #666;
       margin: 0 auto;
-      padding-top: 50px;
+      padding-top: 76px;
       display: flex;
       justify-content: space-between;
       color: #fff;
       .top-left {
-        background: #ccc;
+        width: 453px;
         .top-left-img {
-          width: 453px;
           height: 678px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
         }
       }
       .top-right {
+        width: 719px;
         h2 {
           font-size: 42px;
           font-family: 'Poppins';
@@ -189,7 +286,6 @@ onMounted(() => {
             display: flex;
             justify-content: space-between;
             >div {
-              width: 50%;
               display: flex;
               font-size: 28px;
               color: #9950FD;
@@ -197,22 +293,30 @@ onMounted(() => {
             .time {
               display: flex;
               align-items: center;
+              justify-content: end;
               font-size: 18px;
               img {
                 width: 25px;
                 height: 28px;
                 margin-right: 5px;
               }
+              div {
+                display: flex;
+                align-items: center;
+              }
             }
             .price {
               display: flex;
               align-items: center;
-              font-size: 18px;
+              span {
-              color: #BB7FFF;
+                font-family: 'Poppins';
+                font-weight: 400;
+                font-size: 24px;
+                color: #BB7FFF;
+              }
               .bold {
                 font-weight: bold;
                 font-size: 48px;
-                color: #BB7FFF;
               }
               img {
                 width: 30px;
@@ -225,19 +329,67 @@ onMounted(() => {
         .top-right-btns {
           div {
             display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin: 10px 0;
+            >div {
+              height: 57px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              font-family: 'Poppins';
+              font-weight: bold;
+              font-size: 28px;
+              color: #FFFFFF;
+              border-radius: 12px;
+              cursor: pointer;
+            }
+            .buy {
+              background: #6336d7;
+              width: 348px;
+            }
+            .add {
+              span {
+                width: 269px;
+                height: 100%;
+                line-height: 57px;
+                border-radius: 12px;
+                text-align: center;
+                display: inline-block;
+                background: #1778f1;
+              }
+              div {
+                width: 76px;
+                height: 100%;
+                background: #1778f1;
+                margin-left: 2px;
+                img {
+                  width: 43px;
+                  height: 44px;
+                }
+              }
+            }
           }
         }
         .info {
-          border-top: 2px solid #3A3B57;
-          padding-top: 10px;
           color: #B3B5DA;
+          margin-top: 40px;
+          h2 {
+            font-family: 'Poppins';
+            font-weight: bold;
+            font-size: 30px;
+            color: #fff;
+            border-bottom: 2px solid #3A3B57;
+          }
           li {
             display: flex;
             justify-content: space-between;
             margin-top: 10px;
             div {
               width: 300px;
+              font-size: 22px;
               text-align: left;
+              margin-top: 10px;
               a {
                 color: #B3B5DA;
               }
@@ -245,6 +397,45 @@ onMounted(() => {
           }
         }
       }
+      .btm-left {
+        padding-bottom: 90px;
+        h2 {
+          font-size: 30px;
+          font-family: 'Poppins';
+          font-weight: bold;
+          margin-bottom: 10px;
+        }
+        .btm-detail {
+          display: flex;
+          flex-wrap: wrap;
+          clear: both;
+          width: 489px;
+          li {
+            width: 154px;
+            height: 84px;
+            background: #2d2738;
+            border-radius: 20px;
+            margin-right: 9px;
+            margin-bottom: 10px;
+            div {
+              text-align: center;
+              font-size: 22px;
+              color: #B3B5DA;
+              font-family: "Poppins";
+              h5 {
+                font-weight: bold;
+              }
+              p {
+                font-weight: 400;
+                color: #fff;
+              }
+            }
+          }
+        }
+      }
+      &:nth-child(2) {
+        padding-top: 20px;
+      }
     }
   }
 }

src/wallet/passPort.js

@@ -179,7 +179,9 @@ class LPassportWallet {
    * @param {*} listingId 
    */
   async beginBuy(listingId) {
-    const fulfiller = await this.signer.getAddress();
+    // const fulfiller = await this.signer.getAddress();
+    const fulfiller = marketAddress
+    console.log(listingId,fulfiller)
     const { actions, expiration, order } = await this.client.fulfillOrder(
       listingId,
       fulfiller,
@@ -200,7 +202,9 @@ class LPassportWallet {
    * @param { string[] } listingIds: listingId列表
    */
   async batchBuy(listingIds) {
-    const fulfiller = await this.signer.getAddress();
+    // const fulfiller = await this.signer.getAddress();
+    console.log(listingIds, marketAddress,'---')
+    // return
     try {
       const fulfillResponse = await this.client.fulfillBulkOrders(
         listingIds.map((listingId) => ({
@@ -208,7 +212,7 @@ class LPassportWallet {
           // you could have up to 2 marketplace fees
           takerFees: [],
         })),
-        fulfiller
+        marketAddress
       );
   
       if (fulfillResponse.sufficientBalance) {