websoft-cms/pages/item/components/Comments.vue

<template>
  <form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-position="top"
      class="w-full sm:py-2"
      size="large"
      status-icon
  >
    <el-card shadow="hover" v-if="comments" class="hover:border-green-50 hover:border-2 mb-5">
      <template #header>
        <div class="card-header font-bold text-xl flex justify-between">
          <span>评分和评价</span>
          <div class="comments">
            <el-button @click="onComplaint">投诉</el-button>
            <el-button type="primary" @click="onComments">发表评论</el-button>
          </div>
        </div>
      </template>
      <template #default>
        <template v-if="comments.length > 0">
          <div class="w-full">
            <div v-for="(item,index) in comments" :key="index"
                 class="flex flex-col border-b-2 border-gray-200 pb-2 mb-3"
                 style="border-bottom:1px solid #f3f3f3">
              <el-space class="user-info flex items-start" style="align-items:normal">
                <div class="avatar">
                  <el-avatar :src="item.logo"/>
                </div>
                <div class="nickname flex flex-col">
                  <el-space class="text-sm text-gray-900">
                    <span class="font-bold">{{ item.tenantName }}</span>
                    <el-rate v-model="item.rate" disabled size="small"/>
                  </el-space>
                  <span class="text-xs text-gray-400">{{ item.createTime }}</span>
                  <div class="comments py-2" v-html="item.comments"></div>
                  <template v-if="item.children" v-for="(sub,index2) in item.children" :key="index2">
                    <el-space class="text-sm text-gray-900">
                      <el-avatar :src="sub.logo" size="small"/>
                      <span class="font-bold">{{ sub.tenantName }}</span>
                      <span class="text-xs text-gray-400">{{ sub.createTime }}</span>
                    </el-space>
                    <div class="comments py-2" v-html="sub.comments"></div>
                  </template>
                </div>
              </el-space>
            </div>
          </div>
          <div class="pagination flex justify-center">
            <el-pagination background layout="prev, pager, next" size="small" :total="count" @change="onPageChange"/>
          </div>
        </template>
        <template v-else>
          暂无用户评论
        </template>
      </template>
    </el-card>
    <!-- 发表评论 -->
    <el-dialog
        v-model="visible"
        title="发表评论"
        align-center
        width="500"
        :before-close="() => visible = false"
    >
      <el-form-item prop="rate">
        <el-rate v-model="form.rate" size="large" />
      </el-form-item>
      <el-form-item prop="comments">
        <el-input v-model="form.comments" :rows="5" type="textarea"
                  placeholder="最多300字，支持 markdown 语法。请认真填写评论内容，以便于帮助作者更好完善插件，如需反馈问题，请到下方插件提问进行提交。"/>
      </el-form-item>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="submitForm(formRef)">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 发起投诉 -->
    <el-dialog
        v-model="visible2"
        title="为什么举报此内容?"
        align-center
        width="500"
        :before-close="() => visible2 = false"
    >
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="与我无关" value="与我无关"/>
        <el-checkbox label="文章过时" value="文章过时"/>
        <el-checkbox label="标题有误" value="标题有误"/>
        <el-checkbox label="图像质量差或视觉缺陷" value="图像质量差或视觉缺陷"/>
        <el-checkbox label="垃圾邮件" value="垃圾邮件"/>
        <el-checkbox label="成人或违法违规内容" value="成人或违法违规内容"/>
        <el-checkbox label="侵犯知识产权" value="侵犯知识产权"/>
      </el-checkbox-group>
      <div class="py-3">
        <el-input v-model="form.comments" :rows="5" type="textarea"
                  placeholder="在此处输入反馈。请记住不要包含个人信息，如电话号码。"/>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visible2 = false">取消</el-button>
          <el-button type="primary" @click="submitForm(formRef)">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </form>
</template>

<script setup lang="ts">
import {FullScreen} from '@element-plus/icons-vue'
import type {ApiResult} from "~/api";
import type {FormInstance, FormRules} from "element-plus";
import {useClientRequest} from "~/composables/useClientRequest";
import {reactive, ref} from "vue";
import useFormData from "~/utils/use-form-data";
import type {CompanyComment} from "~/api/system/companyComment/model";


const props = withDefaults(
    defineProps<{
      title?: string;
      companyId?: number;
      comments?: CompanyComment[];
      count?: number;
    }>(),
    {}
);

const formRef = ref<FormInstance>()
const visible = ref<boolean>(false);
const visible2 = ref<boolean>(false);
const checkList = ref<string[]>([]);
const loading = ref<boolean>(true)

const emit = defineEmits<{
  (e: 'done', page: number): void
}>()

// 配置信息
const {form, resetFields} = useFormData<CompanyComment>({
  id: undefined,
  parentId: undefined,
  userId: undefined,
  companyId: undefined,
  rate: undefined,
  sortNumber: undefined,
  comments: undefined,
  status: undefined,
});

const rules = reactive<FormRules<any>>({
  rate: [
    {required: true, message: '请输入评分', trigger: 'blur'},
  ],
  comments: [
    {required: true, message: '请输入手机号码', trigger: 'blur'},
    {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'},
  ],
})

const onComments = () => {
  visible.value = true;
}

const onComplaint = () => {
  visible2.value = true;
}

const onPageChange = (page: number) => {
  emit('done', page)
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  if (form.rate === 0) {
    ElMessage.error('还没有评分哦!')
    return false;
  }
  form.companyId = Number(getIdBySpm(5));
  useClientRequest<ApiResult<any>>(`/system/company-comment`, {
    method: 'POST',
    body: form
  }).then(res => {
    if (res.code == 0) {
      ElMessage.success(res.message)
      visible.value = false
      resetFields();
      emit('done',0)
    } else {
      return ElMessage.error(res.message)
    }
  })
}
</script>