lsq-book/packages/pc/src/views/Detail/components/Comment.vue

<template>
  <Drawer v-model:visible="show" title="评论" @close="emits('close')">
    <div class="comment">
      <template v-if="isLogin">
        <el-input
          v-model="message"
          type="textarea"
          :autosize="{ minRows: 8 }"
          placeholder="请留下您的评论，最多200字"
          :maxlength="200"
          show-word-limit
        />

        <el-button
          :loading="btnLoading"
          type="primary"
          style="margin: 10px 0 70px; width: 100%; height: 50px"
          @click="handleSubmit"
          >发表</el-button
        >
      </template>

      <el-empty v-if="noData" description="暂无数据" />
      <div class="comment-list" v-infinite-scroll="load">
        <div v-for="(item, idx) in list" :key="item.id" class="comment-item">
          <div class="comment-item-header">
            <p>{{ item.createBy }}</p>
            <p class="comment-item-header__date">{{ item.createTime }}</p>
            <svg-icon
              v-if="item.creatorId === userInfo.id"
              class="comment-item-header__del"
              name="icon_delete"
              width="16px"
              height="16px"
              color="var(--el-color-primary)"
              @click="handleDelete(item, idx)"
            />
          </div>
          <p class="comment-item__inner">
            {{ item.content }}
          </p>
        </div>
      </div>
    </div>
  </Drawer>
</template>

<script setup>
import { computed, ref } from "vue";
import { usePagination } from "@lsq/base";
import { getMessageListApi, saveMessageApi, deleteMessageApi } from "@/api";
import Drawer from "./Drawer.vue";
import { useBaseStore, useDetailStore } from "@/stores";
import { storeToRefs } from "pinia";

const props = defineProps(["visible"]);
const emits = defineEmits(["update:visible", "close"]);
const baseStore = useBaseStore();
const detailStore = useDetailStore();
const btnLoading = ref(false);
const message = ref("");
const { isLogin, userInfo } = storeToRefs(baseStore);

const { pageNum, loading, list, noData, noMore, getList } = usePagination(
  async (params) => {
    return getMessageListApi({
      ...params,
      auditStatus: 1,
      bookId: detailStore.detail.id,
    });
  }
);

const show = computed({
  get() {
    return props.visible;
  },
  set(v) {
    emits("update:visible", v);
  },
});

const load = () => {
  if (!noMore.value && !loading.value) {
    getList();
    pageNum.value++;
  }
};

const handleSubmit = async () => {
  try {
    btnLoading.value = true;
    await saveMessageApi({
      bookId: detailStore.detail.id,
      createBy: userInfo.value.nickName,
      content: message.value,
    });
    ElMessage.success("提交成功，等待审核");
    message.value = "";
  } finally {
    btnLoading.value = false;
  }
};

const handleDelete = async (item, idx) => {
  ElMessageBox.confirm("确认是否删除?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    beforeClose: async (action, instance, done) => {
      if (action === "confirm") {
        try {
          instance.confirmButtonLoading = true;
          await deleteMessageApi(item.id);
          list.value.splice(idx, 1);
          done();
        } finally {
          instance.confirmButtonLoading = false;
        }
      } else {
        done();
      }
    },
  });
};
</script>

<style lang="scss" scoped>
.comment {
  padding: 0 25px;

  &-item {
    &:not(:last-child) {
      margin-bottom: 20px;
      border-bottom: 1px solid #d9d9d9;
    }
    &-header {
      display: flex;
      align-items: center;
      gap: 12px;

      p {
        opacity: 0.5;
      }
      &__date {
        flex: 1;
        text-align: right;
      }
      &__del {
        position: relative;
        top: -2px;
        cursor: pointer;
      }
    }
    &__inner {
      margin: 8px 0 25px;
      padding-left: 12px;
      border-left: 5px solid var(--el-color-primary);
    }
  }
}
</style>