xjc-vue/src/views/xjc-integratedmachine/components/collection_component.vue

<template>


    <div class="item-img" v-if="collectionList.length == 0">
      <img @click="collection" v-if="collectionList.length == 0" src="@/assets/images/environment/collage.png">
      <p @click="collection" v-if="collectionList.length == 0">收藏</p>
    </div>
  <div class="item-img" v-if="collectionList.length >= 1">
    <img @click="cancle_collection" v-if="collectionList.length >= 1" src="@/assets/images/environment/collaged.png">
    <p @click="cancle_collection" v-if="collectionList.length >= 1">取消收藏</p>
  </div>
    <div class="item-img">
      <img src="@/assets/images/environment/contrast.png">
<!--      <img src="@/assets/images/environment/contrasted.png">-->
      <p>对比</p>
    </div>
</template>

<script setup>
import {addCollection, getCollection, removeCollection} from '@/api/xjc-integratedmachine/environment/university.js'

const props = defineProps({
  collection: {
    contentType: null,
    contentId: null
  }
})

const collectionList = ref([])

function collection() {
  let data = {
    contentType: props.collection.contentType,
    contentId: props.collection.contentId
  }
  addCollection(data).then(resp => {
    queryConnection()
  })
}

function queryConnection() {
  let data = {
    contentType: props.collection.contentType,
    contentId: props.collection.contentId
  }
  getCollection(data).then(resp => {
    collectionList.value = resp.collection
  })
}

function cancle_collection() {
  let data = {
    id: collectionList.value[0].id,
  }
  removeCollection(data).then(resp => {
    queryConnection()
  })
}

</script>

<style scoped lang="scss">
p,div{
  margin: 0;
  padding: 0;
}
.item-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 400px;
  border: 1px solid;
  p {
    font-weight: 400;
    font-size: 20px;
    color: #515F6A;
  }

  img {
    width: 36px;
    height: 36px;
    border: 1px solid;
  }
}
</style>