CounterFireGames/src/components/common/card.vue

<template>
  <div class="cards">
    <div class="card-top" v-if="nftData" @click="toDetail">
      <div class="card-img">
        <img :src="nftData.nft.image" alt="图片">
      </div>
      <div class="card-name">
        <div>Cotnesford park</div>
        <div>{{nftData.nft.name}}</div>
      </div>
      <div class="card-price">
        <div>
          <span>
            0.085
          </span>
          <img src="@/assets/img/marketplace/ETHicon.png" alt="图片">
        </div>
        <div>{{ nftData.nft.owner_address.substr(0,6) }}...{{ nftData.nft.owner_address.substr(-6) }}</div>
      </div>
    </div>
    <div class="card-btn">
      <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, toRaw, onMounted, getCurrentInstance } from "vue"
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: {
    type: Object,
    required: true,
  },
});

const buyDialogVisible = ref(false)
const buyDataArr = ref([])

// 确认购买弹窗
const buyNft = (val) => {
  buyDataArr.value.push(val)
  buyDialogVisible.value = true
}

const getImageUrl = (name) => {
  return new URL(`@/assets/img/marketplace/${name}.png`, import.meta.url).href
}

// 去详情页面
const toDetail = () => {
  detailData.nftData = toRaw(props.nftData)
  router.push('/detail');
}

// 添加购物车
const addCart = async (val) => {
  console.log('-',val.nft)
  const data = {
    net_id: import.meta.env.VUE_APP_NET_ID,
    tokens: [
      {
        token_id: val.nft.token_id,
        token_type: val.nft.type,
      }
    ]
  }
  console.log(data)
  // return
  try {
    // let res = await axios.post(`/api/shopcart/add`,{})
    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)), "-=-=-");
});
</script>

<style lang="scss" scoped>
.cards {
  background: #2d2738;
  border-radius: 20px;
  color: #fff;
  // padding: 20px;
  overflow: hidden;
  .card-top {
    padding: 30px 30px 20px 30px;
    .card-img {
      width: 240px;
      height: 360px;
      margin: 0 auto;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .card-name {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px 0;
    }
    .card-price {
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          width: 25px;
          height: 25px;
          margin-left: 10px;
        }
      }
    }
  }
  .card-btn {
    width: 95%;
    height: 50px;
    margin: 0 auto;
    margin-bottom: 5px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    >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 {
      width: 71px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 3px;
      img {
        width: 43px;
        height: 39px;
      }
    }
  }
}
</style>