!222 优化商品评论

Merge pull request !222 from 疯狂的世界/owen_dev
This commit is contained in:
芋道源码 2023-08-26 12:58:49 +00:00 committed by Gitee
commit d09366b9bd
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
5 changed files with 84 additions and 64 deletions

View File

@ -36,10 +36,6 @@
<el-form-item label="评论内容" prop="content">
<el-input type="textarea" v-model="formData.content" />
</el-form-item>
<!-- TODO @疯狂formData.scores 是通过后端计算的哈不要前端传递 -->
<el-form-item label="评分星级" prop="scores">
<el-rate v-model="formData.scores" />
</el-form-item>
<el-form-item label="描述星级" prop="descriptionScores">
<el-rate v-model="formData.descriptionScores" />
</el-form-item>
@ -60,9 +56,9 @@
</template>
<script setup lang="ts">
import * as CommentApi from '@/api/mall/product/comment'
import SpuTableSelect from '@/views/mall/product/comment/components/SpuTableSelect.vue'
import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
import * as ProductSpuApi from '@/api/mall/product/spu'
import SkuTableSelect from '@/views/mall/product/comment/components/SkuTableSelect.vue'
import SkuTableSelect from '@/views/mall/product/spu/components/SkuTableSelect.vue'
const { t } = useI18n() //
const message = useMessage() //
@ -79,7 +75,6 @@ const formData = ref({
spuId: undefined,
spuName: undefined,
skuId: undefined,
scores: 5,
descriptionScores: 5,
benefitScores: 5,
content: undefined,
@ -91,7 +86,6 @@ const formRules = reactive({
userAvatar: [{ required: true, message: '用户头像不能为空', trigger: 'blur' }],
userNickname: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
content: [{ required: true, message: '评论内容不能为空', trigger: 'blur' }],
scores: [{ required: true, message: '评分星级不能为空', trigger: 'blur' }],
descriptionScores: [{ required: true, message: '描述星级不能为空', trigger: 'blur' }],
benefitScores: [{ required: true, message: '服务星级不能为空', trigger: 'blur' }]
})
@ -157,7 +151,6 @@ const resetForm = () => {
userAvatar: undefined,
spuId: undefined,
skuId: undefined,
scores: 5,
descriptionScores: 5,
benefitScores: 5,
content: undefined,

View File

@ -0,0 +1,77 @@
<template>
<Dialog title="回复" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="回复内容" prop="replyContent">
<el-input type="textarea" v-model="formData.replyContent" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitReplyForm" type="primary" :disabled="formLoading"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import * as CommentApi from '@/api/mall/product/comment'
import { ElInput } from 'element-plus'
defineOptions({ name: 'ProductComment' })
const message = useMessage() //
const { t } = useI18n() //
const dialogVisible = ref(false) //
const formLoading = ref(false) // 12
const formData = ref({
id: undefined,
replyContent: undefined
})
const formRules = reactive({
replyContent: [{ required: true, message: '回复内容不能为空', trigger: 'blur' }]
})
const formRef = ref() // Ref
/** 打开弹窗 */
const open = async (id?: number) => {
resetForm()
formData.value.id = id
dialogVisible.value = true
}
defineExpose({ open }) // open
/** 提交表单 */
const emit = defineEmits(['success']) // success
const submitReplyForm = async () => {
const valid = await formRef?.value?.validate()
if (!valid) return
formLoading.value = true
try {
await CommentApi.replyComment(formData.value)
message.success(t('common.createSuccess'))
dialogVisible.value = false
//
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
replyContent: undefined
}
formRef.value?.resetFields()
}
</script>

View File

@ -60,7 +60,6 @@
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="false">
<el-table-column label="评论编号" align="center" prop="id" min-width="60" />
<!-- TODO @疯狂后端貌似没读取 -->
<el-table-column label="用户名称" align="center" prop="userNickname" width="80" />
<el-table-column label="商品信息" align="center" min-width="210">
<template #default="scope">
@ -144,33 +143,15 @@
<!-- 表单弹窗添加/修改 -->
<CommentForm ref="formRef" @success="getList" />
<Dialog title="回复" v-model="replyDialog.visible">
<el-form
ref="replyFormRef"
:model="replyDialog.formData"
:rules="replyDialog.formRules"
label-width="100px"
v-loading="replyDialog.loading"
>
<el-form-item label="回复内容" prop="replyContent">
<el-input type="textarea" v-model="replyDialog.formData.replyContent" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitReplyForm" type="primary" :disabled="replyDialog.loading"
>
</el-button>
<el-button @click="replyDialog.visible = false"> </el-button>
</template>
</Dialog>
<!-- 回复表单弹窗 -->
<ReplyForm ref="replyFormRef" @success="getList" />
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import * as CommentApi from '@/api/mall/product/comment'
import CommentForm from './CommentForm.vue'
import { ElInput } from 'element-plus'
import ReplyForm from '@/views/mall/product/comment/ReplyForm.vue'
defineOptions({ name: 'ProductComment' })
@ -242,39 +223,10 @@ const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
// TODO @
/** 回复 **/
/** 回复按钮操作 **/
const replyFormRef = ref()
const replyDialog = reactive({
visible: false,
loading: false,
formData: {
id: -1,
replyContent: ''
},
formRules: {
replyContent: [{ required: true, message: '回复内容不能为空', trigger: 'blur' }]
}
})
const handleReply = (id: number) => {
replyDialog.formData.id = id
replyDialog.formData.replyContent = ''
replyDialog.visible = true
}
const submitReplyForm = async () => {
const valid = await replyFormRef?.value?.validate()
if (!valid) return
replyDialog.loading = true
try {
await CommentApi.replyComment(replyDialog.formData)
message.success(t('common.createSuccess'))
replyDialog.visible = false
await getList()
} finally {
replyDialog.loading = false
}
replyFormRef.value.open(id)
}
/** 显示/隐藏 **/

View File

@ -37,7 +37,6 @@ import { ElTable } from 'element-plus'
import * as ProductSpuApi from '@/api/mall/product/spu'
import { propTypes } from '@/utils/propTypes'
// TODO @ spu components
defineOptions({ name: 'SkuTableSelect' })
const props = defineProps({

View File

@ -86,7 +86,6 @@ import { defaultProps, handleTree } from '@/utils/tree'
import * as ProductCategoryApi from '@/api/mall/product/category'
import * as ProductSpuApi from '@/api/mall/product/spu'
// TODO @ spu components
defineOptions({ name: 'SpuTableSelect' })
const message = useMessage() //