mcwl-pc/app/components/PictureDetail.vue

<script setup lang="ts">
import { commonApi } from "@/api/common";
import { CopyOutline, Heart, PersonAddOutline } from '@vicons/ionicons5';
import { Download, PartyPopper } from "lucide-vue-next";
import { NConfigProvider, NMessageProvider } from "naive-ui";
import { ref } from "vue";
const emit = defineEmits(["updateLike"]);

const userStore = useUserStore();
const message = useMessage();
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});
const dataInfo = ref({});
const isAttention = ref(false)
async function getDetail() {
  if (props.item && props.item.id) {
    const res = await request.get(`/image/detail?id=${props.item.id}`);
    if (res.code === 200) {
      dataInfo.value = res.data;
      const res1 = await request.get(`/attention/selectAttention?userId=${res.data.userId}`)
      if(res1.code === 200){
        isAttention.value = res1.data
      }
      getDictType();
    }
  }
}
getDetail();
const tagsList = ref([]);
// 获取图片标签
async function getDictType() {
  try {
    const res = await commonApi.dictType({ type: "image_label" });
    if (res.code === 200 && res.data.length > 0) {
      for (let i = 0; i < res.data.length; i++) {
        for (let j = 0; j < dataInfo.value.tags.length; j++) {
          if (res.data[i].dictValue === dataInfo.value.tags[j]) {
            tagsList.value.push(res.data[i].dictLabel);
          }
        }
      }
    }
  } catch (error) {
    console.log(error);
  }
}

function onShowModel() {
  // ruleForm.value.nickName = userInfo.nickName
  // ruleForm.value.avatar = userInfo.avatar
  // ruleForm.value.brief = userInfo.brief
  // ruleForm.value.userId = userInfo.userId
}

const isVisible = ref(false);
function onCloseModel() {
  isVisible.value = false;
}
const commentHeight = ref(200);

//点赞
async function onLike() {
  try {
    const res = await request.get(`/image/imageLike?id=${props.item.id}`);
    if (res.code === 200) {
      // emit('updateLike')
      if (dataInfo.value.isLike === 1) {
        dataInfo.value.isLike = 0;
        dataInfo.value.likeNum -= 1;
        message.success("取消点赞成功");
      } else {
        dataInfo.value.isLike = 1;
        dataInfo.value.likeNum += 1;
        message.success("点赞成功");
      }
    }
  } catch (err) {
    console.log(err);
  }
}

// 关注用户/取消关注
async function onChangeAttention() {
  try {
    const res = await request.get(`/attention/addAttention?userId=${dataInfo.value.userId}`)
    if (res.code === 200) {
      isAttention.value = res.data
      if (res.data) {
        message.success('关注成功')
      }
      else {
        message.success('取消关注成功')
      }
    }
  }
  catch (err) {
    console.log(err)
  }
}


defineExpose({
  isVisible,
});
</script>

<template>
  <NModal
    v-model:show="isVisible"
    :on-after-leave="onCloseModel"
    :on-after-enter="onShowModel"
    preset="card"
    style="width: auto; border-radius: 10px; box-sizing: border-box"
    :mask-closable="false"
  >
    <div class="p-2 w-[700px]" style="box-sizing: border-box">
      <div class="flex w-full">
        <div class="flex-1 p-1">
          <img class="w-full h-[350px] rounded-lg" :src="item.imagePaths" alt="" />
          <div class="flex mt-2">
            <div
              class="mr-2 w-40 px2 py-3 flex items-center justify-center text-[#8a4200] cursor-pointer rounded-lg bg-gradient-to-r from-[#ffe9c8] to-[#ffd264]"
            >
              <Download size="16" class="mr-1" />
              下载无水印原图
            </div>
            <div
              class="flex items-center bg-[#eceef4] px2 py-3 w-20 justify-center cursor-pointer rounded-lg"
            >
              <n-icon
                class="mr-2"
                size="20"
                :color="dataInfo.isLike === 1 ? '#ff0000' : '#ccc'"
                @click="onLike"
              >
                <Heart />
              </n-icon>
              {{ dataInfo.likeNum }}
            </div>
          </div>
          <div class="bg-[#f6f9fe] p-2 text-[12px] mt-2 rounded-lg">
            作者添加了水印，成为会员后可下载无水印原图。
            <span class="text-[#4a69ed] cursor-pointer">直接下载</span>带水印的图片
          </div>
        </div>
        <div class="flex-1 p-1">
          <div class="flex items-center">
            <div>
              <img
                class="w-10 h-10 rounded-full mr-2"
                :src="dataInfo.userAvatar"
                alt=""
              />
              <div>
                {{ dataInfo.userName }}
              </div>
            </div>
            <div class="flex-1 flex justify-end" v-if="userStore?.userInfo?.userId !== props.item.userId">
              <div class="flex items-center font-bold px-1 justify-center w-24 h-10 rounded-full text-[#426af7] border-2 border-[#426af7] border-solid cursor-pointer" @click="onChangeAttention">
                <n-icon v-if="!isAttention" size="20" class="mr-2">
                  <PersonAddOutline />
                </n-icon>
                {{ isAttention ? '已关注' : '关注' }}
              </div>
            </div>

          </div>

          <div class="text-[20px] mt-3">
            {{ dataInfo.title }}
          </div>

          <div class="text-[14px] mt-2 text-gray-400">
            {{ dataInfo.description }}
          </div>

          <div class="text-[14px] mt-2 text-gray-400">
            {{ dataInfo.createTime }}
          </div>
          <div class="flex mt-2">
            <div
              class="flex w-[100px] items-center bg-[#eceef4] px2 py-3 justify-center cursor-pointer rounded-lg mr-2"
            >
              <n-icon class="mr-2" size="20" color="#ccc">
                <CopyOutline />
              </n-icon>
              复制全部
            </div>
            <div
              class="flex w-[200px] items-center px2 py-3 bg-[#416af6] text-white rounded-lg justify-center cursor-pointer"
            >
              <PartyPopper size="16" class="mr-1" />一键生图
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="p-1 flex flex-wrap">
          <div
            v-for="(item, index) in tagsList"
            :key="index"
            class="text-[#5d79ba] bg-[#ecf2fe] p-2 text-[12px] font-bold mr-2 mt-2 w-auto rounded-lg"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <div class="mt-4">
        <div style="padding: 20px">
          <NConfigProvider>
            <NMessageProvider>
              <BaseComment
                v-if="dataInfo.id"
                type="pictrue"
                :height="commentHeight"
                :details-info="dataInfo"
              />
            </NMessageProvider>
          </NConfigProvider>
        </div>
      </div>
    </div>
  </NModal>
</template>

<style scoped></style>