202 lines
6.7 KiB
Vue
202 lines
6.7 KiB
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="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>
|