购买弹窗

src/components/Dialogs/sellDialog.vue

@@ -37,6 +37,29 @@
                   </div>
                 </li>
               </div>
+              <div class="content-nfts-top-right-title">Period</div>
+              <div class="content-nfts-top-right-period">
+                <div class="option-day">
+                  <a-space>
+                    <a-select ref="select" v-model:value="optionDayValue" :options="optionsDay" @focus="focus" @change="handleChange">
+                    </a-select>
+                  </a-space>
+                </div>
+                <div class="calendar">
+                  <img src="@/assets/img/marketplace/Calendar .png" alt="">
+                  <span>{{ formatDateGMT() }} PM</span>
+                </div>
+              </div>
+              <div class="content-nfts-top-right-total">
+                <div class="left">
+                  <div>Total price</div>
+                  <div><down-outlined /> <up-outlined /></div>
+                </div>
+                <div class="right">
+                  <span>0.018</span>
+                  <img src="@/assets/img/marketplace/ETHicon.png" alt="">
+                </div>
+              </div>
             </div>
           </div>
           <div class="content-nfts-btm">
@@ -84,7 +107,8 @@
 </template>
 <script setup>
 import { ref, toRaw, defineEmits, onMounted } from "vue";
-import {priceCalculated} from "@/configs/priceCalculate.js"
+import { DownOutlined, UpOutlined } from "@ant-design/icons-vue"
+import { priceCalculated, timeFormat } from "@/configs/priceCalculate.js"
 import {PassportWallet} from "@/wallet/passPort.js"
 // const passProd = ref(new PassportWallet())
 const props = defineProps({
@@ -103,6 +127,25 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['handleClose'])
+const optionsDay = ref([
+  {
+    value: "86400000",
+    label: "1 day",
+  },
+  {
+    value: "604800000",
+    label: "7 day",
+  },
+  {
+    value: "2592000000",
+    label: "30 day",
+  },
+  {
+    value: "15552000000",
+    label: "180 day",
+  }
+])
+const optionDayValue = ref('1day')
 const priceValue = ref()
 
 const handleOk = (e) => {
@@ -115,17 +158,24 @@ const overviewData = (e) => {
   console.log(e)
 }
 
+const handleChange = (value) => {
+  console.log(value)
+  // marketplaceList.sort = value
+};
 
 const currency = import.meta.env.VUE_APP_MARKET_CURRENCY
 const sellConfirm = async () => {
   if(priceValue.value) {
+    let curDate = new Date()
+    let orderData = new Date(curDate.getTime() + 24*60*60*1000)
     const pass = new PassportWallet()
     const data = {
       // import.meta.env.VUE_APP_PASSPORT_MARKET_ADDRESS
       contractAddress: props.sellDataArr.contract_address,
       tokenId: props.sellDataArr.token_id,
       currencyAddress: currency,
-      currencyAmount: '1000000000000000000'
+      currencyAmount: '1000000000000000000',
+      orderExpiry: orderData,
     }
     // sellDataArr.value.push(val)
     // buyDialogVisible.value = true
@@ -143,6 +193,13 @@ const handleCancel = (e) => {
   emit('handleClose')
 }
 
+// 获取当前时间
+const formatDateGMT = () => {
+      // let date = new Date().toGMTString();
+      let date = timeFormat(new Date());
+      return date;
+    }
+
 
 onMounted(() => {
 })
@@ -293,6 +350,38 @@ onMounted(() => {
                     }
                   }
                 }
+                .content-nfts-top-right-period {
+                  display: flex;
+                  justify-content: space-between;
+                  .option-day {
+                    width: 205px;
+                    height: 54px;
+                    margin-top: 8px;
+                    background: pink;
+                  }
+                  .calendar {
+                    display: flex;
+                    align-items: center;
+                    width: 413.5px;
+                    height: 54px;
+                    margin-top: 8px;
+                    background: rgba(179,181,218,0);
+                    border-radius: 27px;
+                    border: 2px solid rgba(74,75,110,0.7);
+                    img {
+                      width: 33px;
+                      height: 33px;
+                      margin-left: 29px;
+                      margin-right: 17px;
+                    }
+                    span {
+                      font-family: 'Poppins';
+                      font-weight: 500;
+                      font-size: 24px;
+                      color: #FFFFFF;
+                    }
+                  }
+                }
               }
             }
             .content-nfts-btm {