diff --git a/src/components/chain/Market.js b/src/components/chain/Market.js
index 8d46bf7..65c6c3c 100644
--- a/src/components/chain/Market.js
+++ b/src/components/chain/Market.js
@@ -33,7 +33,7 @@ export class ImtblMarket {
    * 准备一个ERC721的挂单
    * @returns 
    */
-  async _prepareERC721Listing({ contractAddress, tokenId, type = 'ERC721', currencyAddress, currencyAmount}){
+  async _prepareERC721Listing({ contractAddress, tokenId, type = 'ERC721', currencyAddress, currencyAmount, orderExpiry}){
     const offerer = await this.signer.getAddress();
     const buyData = {
       amount: currencyAmount,
@@ -52,6 +52,7 @@ export class ImtblMarket {
         tokenId,
         type,
       },
+      orderExpiry
     });
   
     let orderSignature = ''
@@ -112,9 +113,9 @@ export class ImtblMarket {
    * @param {string} currencyAddress NATIVE 或者 ERC20的合约地址
    * @param {string} currencyAmount 出售价格, 单位 wei
    */
-  async beginSellERC721({contractAddress, tokenId, currencyAddress, currencyAmount}) {
+  async beginSellERC721({contractAddress, tokenId, currencyAddress, currencyAmount, orderExpiry}) {
     const { preparedListing, orderSignature } = 
-      await this._prepareERC721Listing({contractAddress, tokenId, currencyAddress, currencyAmount});
+      await this._prepareERC721Listing({contractAddress, tokenId, currencyAddress, currencyAmount, orderExpiry});
     const order = await this._createListing(preparedListing, orderSignature, currencyAmount);
     return order
   }
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index 2571264..1dc6cac 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -5,7 +5,7 @@
       <div class="content">
         <div class="top-left">
           <div class="top-left-img">
-            <img src="@/assets/img/marketplace/GenesisHeroes_NFT.png" alt="">
+            <img :src="detailData.image" alt="">
           </div>
         </div>
         <div class="top-right">
@@ -58,8 +58,8 @@
             3、使用
             -->
             <div v-else>
-              <div class="sell" v-if="!detailData.event">上架</div>
-              <div class="cancel" v-if="detailData.event">下架</div>
+              <div class="sell" @click="beginSell" v-if="!detailData.event">上架</div>
+              <div class="cancel" @click="cancelSell" v-if="detailData.event">下架</div>
               <div class="redeem" @click="lockToGame">使用</div>
             </div>
           </div>
@@ -173,6 +173,41 @@ const lockToGame = async() => {
 
 }
 
+const beginSell = async() => {
+  if (detailData.event) return
+  try {
+    //TODO:: 根据输入的内容出售
+    const sellData = {
+      contractAddress: detailData.contract_address,
+      tokenId: detailData.token_id,
+      currencyAddress: import.meta.env.VUE_APP_MARKET_CURRENCY,
+      currencyAmount: '1000000000000000000',
+      orderExpiry: null
+    }
+    await new BlockChain().market.beginSellERC721(sellData)
+    console.log('beginSell success')
+  } catch (e) {
+    console.log('beginSell fail', e.message)
+  }
+
+}
+
+const cancelSell = async() => {
+  if (!detailData.event) return
+  try {
+    await new BlockChain().market.cancelOrder([detailData.event.data.id])
+    console.log('cancelSell success')
+  } catch (e) {
+    try {
+      await new BlockChain().market.cancelOrdersOnChain([detailData.event.data.id])
+      console.log('cancelSell success')
+    } catch (e2) {
+      console.log('cancelSell fail', e.message)
+    }
+    console.log('cancelSell fail', e.message)
+  }
+}
+
 // 处理地址
 const sliceAddress = (address) => {
   if (!address) return "-";