修改购买弹窗

This commit is contained in:
yuyongdong 2024-06-25 13:47:32 +08:00
parent a8aba49eb1
commit 0121f5e1e9
4 changed files with 82 additions and 14 deletions

View File

@ -27,8 +27,8 @@
</div>
<div class="shelves-price">
<div class="price-top">
<div>
<a-input :value="priceValue" @pressEnter="overviewData" placeholder="Basic usage">
<div class="price-top-input">
<a-input v-model:value="priceValue" placeholder="Enter Listing Price">
<template #prefix>
<search-outlined style="color: #9588ac;" />
</template>
@ -40,7 +40,7 @@
</div>
</div>
<div class="price-btm">
<span>The floor Price: {{ 0.18 }}</span>
<span>The floor Price: None</span>
<img src="@/assets/img/marketplace/ETHicon.png" alt="">
</div>
</div>
@ -48,7 +48,7 @@
<div class="expected">Expected profits</div>
<div class="profits">
<!-- <div>{{ priceCalculated(sellDataArr[0].event.data.buy[0].amount) }}</div> -->
<div class="price-img"><span>{{ 0.08 }}</span><img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
<div class="price-img"><span>{{ Number(priceValue) - Number(priceValue)*0.02 }}</span><img src="@/assets/img/marketplace/ETHicon.png" alt=""></div>
</div>
</li>
</div>
@ -60,7 +60,7 @@
</div>
</template>
<script setup>
import { ref, toRaw, defineEmits } from "vue";
import { ref, toRaw, defineEmits, onMounted } from "vue";
import {priceCalculated} from "@/configs/priceCalculate.js"
import {PassportWallet} from "@/wallet/passPort.js"
// const passProd = ref(new PassportWallet())
@ -76,12 +76,18 @@ const props = defineProps({
});
const emit = defineEmits(['handleClose'])
const priceValue = ref(0.02)
const priceValue = ref()
const handleOk = (e) => {
emit('handleClose')
};
const overviewData = (e) => {
// marketplaceList.overview = e.target.value
// emit('clickOverviewChild',e.target.value)
console.log(e)
}
const currency = import.meta.env.VUE_APP_MARKET_CURRENCY
const sellConfirm = async () => {
@ -109,6 +115,12 @@ const sellConfirm = async () => {
const handleCancel = (e) => {
emit('handleClose')
}
onMounted(() => {
})
</script>
<style lang="scss" scoped>
@ -213,10 +225,44 @@ const handleCancel = (e) => {
.price-top {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 54px;
background: #2d2738;
border-radius: 20px;
.price-top-input {
width: 120px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #2d2738;
span {
padding: 0;
background: #2d2738;
border: 0px;
}
.ant-input {
background: #2d2738;
color: #fff;
border: 0px;
}
.ant-input::input-placeholder {
color: #fff;
}
.ant-input::-webkit-input-placeholder { //WebKit browsersChrome
color: #fff;
}
.ant-input::-moz-placeholder { //Mozilla Firefox 4 to 18
color: #fff;
}
.ant-input::-moz-placeholder { //Mozilla Firefox 19+
color: #fff;
}
.ant-input::-ms-input-placeholder { //Internet Explorer 10+
color: #fff;
}
}
div {
display: flex;
align-items: center;

View File

@ -34,6 +34,8 @@ import { ref, toRaw, onMounted, getCurrentInstance } from "vue"
import SellDialog from "@/components/Dialogs/sellDialog.vue"
import {PassportWallet} from "@/wallet/passPort.js"
import { useDetailStore } from "@/store/detail"
import { apiGetPrice } from "@/utils/marketplace"
import {
apiAddCartList
} from "@/utils/marketplace"
@ -48,14 +50,28 @@ const props = defineProps({
},
});
//
const getPrice = async () => {
const data = {
net_id: props.nftData.net_id,
contract_address: props.nftData.contract_address,
item_id: props.nftData.item_id,
quality: props.nftData.detail.quality,
}
console.log(data)
let res = await apiGetPrice()
console.log(res)
}
const sellDialogVisible = ref(false)
const sellDataArr = ref([])
const currency = import.meta.env.VUE_APP_MARKET_CURRENCY
// NFT
const sellNft = async (val) => {
console.log(toRaw(val).token_id,toRaw(val).contract_address)
sellDialogVisible.value = true
sellDataArr.value = val
getPrice()
console.log(toRaw(val))
// sellDialogVisible.value = true
// sellDataArr.value = val
return
const data = {
// import.meta.env.VUE_APP_PASSPORT_MARKET_ADDRESS

View File

@ -76,8 +76,8 @@ const getCartList = async () => {
// let token = localStorage.getItem('assessToken')
// if(token) {
try {
// let res = await useMarketplaceStore().cartList
let res = '-------------------------'
let res = await useMarketplaceStore().cartList
// let res = '-------------------------'
// cartList.value = res
console.log(res)
} catch (e) {

View File

@ -42,15 +42,21 @@ export const apiMarketplaceState = async (data) => {
return httpPost(url, data)
}
// 获取nft地板价
export const apiGetPrice = async (data) => {
const url = `${API_BASE}/api/market/product/query_price`
return httpGet(url, data)
}
// 获取我拥有得资产
export const apiAssetsState = async (account_address, data) => {
const url = `/api/asset/${net_id}/${account_address}`
const url = `${API_BASE}/api/asset/${net_id}/${account_address}`
return httpGet(url, data)
}
// 获取上架出售得NFTS
export const apiHangingState = async (account_address, data) => {
const url = `/api/asset/${net_id}/${account_address}`
const url = `${API_BASE}/api/asset/${net_id}/${account_address}`
return httpGet(url, data)
}
@ -68,7 +74,7 @@ export const apiDetail = async (account_address) => {
// 获取购物车列表
export const apiGetCartList = async () => {
const url = `/api/shopcart/list`
const url = `${API_BASE}/api/shopcart/list`
return httpGet(url, {})
}