From ecdfa6841886c71f349d4d7dfa634dd4d7100e88 Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期三, 09 十月 2024 19:55:52 +0800
Subject: [PATCH] add:评价列表
---
pages/order/evaluation/index.vue | 286 +++++++++++++++++++++++++++++++++++
components/order/evaluation-table.vue | 145 ++++++++++++++++++
2 files changed, 431 insertions(+), 0 deletions(-)
diff --git a/components/order/evaluation-table.vue b/components/order/evaluation-table.vue
new file mode 100644
index 0000000..c670ac6
--- /dev/null
+++ b/components/order/evaluation-table.vue
@@ -0,0 +1,145 @@
+<template>
+ <div class="after-sale-table">
+ <div class="table-header">
+ <div class="table-th" style="margin-left: 20px">商品名称</div>
+ <div class="table-th ">订单编号</div>
+ <div class="table-th">评价星级</div>
+ <div class="table-th">供应商信息</div>
+ <div class="table-th">评价内容</div>
+ <div class="table-th" style="margin-left: 20px">买家</div>
+ <div class="table-th">评价时间</div>
+ <div class="table-th" style="margin-left: 20px">操作</div>
+ </div>
+ <div v-for="item in list" :key="item.id" class="table-item">
+ <div class="table-body">
+ <div class="table-td">
+ <div class="flex">
+ <el-bus-image :src="item.flowerCover" class="w-60 h-60 mr-8" />
+ <div class="leading-20">
+ <div class="text-14 font-bold">
+ {{ item.flowerName }}
+ </div>
+ <div class="leading-20">
+ <span>规格：{{ item.flowerUnit }}</span>
+ </div>
+ <div class="leading-20">
+ <span>等级：{{ item.flowerLevel }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="table-td">
+ <div class="leading-20">{{ item.orderNo }}</div>
+ </div>
+ <div class="table-td">
+ <div class="leading-20">{{item.commentGrade }}星</div>
+ </div>
+ <div class="table-td">
+ <div class="leading-20">{{ item.supplierName }}[ID:{{ item.supplierId }}]</div>
+ </div>
+
+ <div class="table-td">
+ <div class="leading-20">{{ item.comment }}</div>
+ </div>
+
+ <div class="table-td">
+ <div class="leading-20">
+ <div class="leading-20">
+ <span>UID： {{ item.customerName }}</span>
+ </div>
+ <div class="leading-20">
+ <span>昵称： {{ item.customerName }}</span>
+ </div>
+
+ </div>
+ </div>
+
+ <div class="table-td">
+ <div class="leading-20">{{ item.createTime }}</div>
+ </div>
+
+ <div class="table-td !flex-none w-180 flex items-center">
+ <el-button type="text" @click="onDetail(item)">查看</el-button>
+ <el-button v-if="item.showFlag == '1'" type="text" @click="onShow(item)" >显示</el-button>
+ <el-button v-if="item.showFlag == '0'" type="text" @click="onHide(item)" >隐藏</el-button>
+ <el-button type="text" @click="onHandle(item)" >回复</el-button>
+ <el-button type="text" @click="onDelete(item)" >删除</el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ list: {
+ type: Array,
+ default: () => [],
+ },
+ },
+ methods: {
+ onDetail(item) {
+ this.$emit('detail', item)
+ },
+ onHandle(item) {
+ this.$emit('handle', item)
+ },
+ onDelete(item) {
+ this.$emit('delete', item)
+ },
+ onShow(item) {
+ this.$emit('show', item)
+ },
+ onHide(item) {
+ this.$emit('hide', item)
+ },
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+.after-sale-table {
+ .table-header {
+ display: flex;
+ align-items: center;
+ font-size: 14px;
+ color: $main-title-color;
+ background-color: #f4f4f5;
+ .table-th {
+ flex: 1;
+ height: 45px;
+ line-height: 45px;
+ font-weight: bold;
+ }
+ }
+ .table-item {
+ margin-top: 10px;
+ border-bottom: 1px solid #eee;
+ &__title {
+ height: 35px;
+ line-height: 35px;
+ background-color: #f4f4f5;
+ font-size: 14px;
+ color: $main-title-color;
+ padding: 0 10px;
+ & > span {
+ margin-right: 10px;
+ }
+ }
+ .table-body {
+ display: flex;
+ align-items: stretch;
+ font-size: 12px;
+ color: $main-title-color;
+ .table-td {
+ flex: 1;
+ padding: 15px 10px;
+ &:not(:last-child) {
+ border-right: 1px solid #eee;
+ }
+ }
+ }
+ }
+}
+</style>
diff --git a/pages/order/evaluation/index.vue b/pages/order/evaluation/index.vue
new file mode 100644
index 0000000..e03d133
--- /dev/null
+++ b/pages/order/evaluation/index.vue
@@ -0,0 +1,286 @@
+<template>
+ <el-bus-crud ref="crud" v-bind="tableConfig">
+ <template #table="{ list }">
+ <template v-if="list && list.length > 0">
+ <evaluation-table :list="list" @detail="onDetail" @handle="onHandle" @delete="onDelete" @show="onShow" @hide="onHide"/>
+ </template>
+ <el-bus-empty v-else />
+ </template>
+ </el-bus-crud>
+</template>
+
+<script>
+import EvaluationTable from '@/components/order/evaluation-table'
+export default {
+ components: {
+ EvaluationTable,
+ },
+ data() {
+ return {
+ tableConfig: {
+ evaluationId: null,
+ url: 'flower/api/v2/flower-comment/page',
+ hasNew: false,
+ hasEdit: false,
+ hasDelete: true,
+ operationAttrs: {
+ width: 150,
+ fixed: 'right',
+ },
+
+ searchForm: [
+ {
+ type: 'row',
+ items: [
+ { label: '订单编号', id: 'orderId', type: 'input' },
+ { label: '商品名称', id: 'flowerName', type: 'input' },
+ {
+ label: '评价星级',
+ id: 'commentGrade',
+ type: 'bus-select-dict',
+ el: {
+ code: 'comment_grade',
+ clearable: true,
+ style: 'width:100%',
+ },
+ },
+ {
+ label: '申请日期',
+ component: 'el-bus-date-range',
+ id: 'createDateBeginStr',
+ commonFormat: true,
+ commonFormatProps: ['createDateBeginStr', 'createDateEndStr'],
+ customClass: 'in-bus-form',
+ },
+ ],
+ },
+ ],
+ form: [
+ // { label: '评价内容1', id: 'comment', type: 'input' },
+ ],
+ extraDialogs: [
+ {
+ title: '评价详情',
+ readonly: true,
+ dialogAttrs: {
+ width: '70%',
+ },
+ form: [
+ {
+ label: '订单编号：',
+ id: 'orderId',
+ type: 'input',
+ readonly: true,
+ },
+ {
+ label: '商品名称：',
+ id: 'flowerName',
+ type: 'input',
+ readonly: true,
+ },
+ {
+ label: '商品封面图：',
+ id: 'flowerCover',
+ type: 'bus-upload',
+ readonly: true,
+ el: {
+ listType: 'picture-card',
+ limitSize: 2,
+ },
+ },
+ {
+ label: '商品等级：',
+ id: 'flowerLevel',
+ type: 'input',
+ readonly: true,
+ },
+ {
+ label: '商品规格：',
+ id: 'flowerUnit',
+ type: 'input',
+ readonly: true,
+ },
+ {
+ label: '供应商信息：',
+ id: 'supplierName',
+ type: 'input',
+ readonly: true,
+ },
+ {
+ label: '用户信息：',
+ id: 'customerName',
+ type: 'input',
+ readonly: true,
+ },
+ {
+ label: '评价星级：',
+ id: 'commentGrade',
+ type: 'input',
+ readonly: true,
+ },
+ {
+ label: '评论显示状态：',
+ id: 'showFlag',
+ type: 'input',
+ readonly: true,
+ },
+ {
+ label: '评价内容：',
+ id: 'comment',
+ type: 'input',
+ readonly: true,
+ },
+ {
+ label: '回复内容：',
+ id: 'replayContent',
+ type: 'input',
+ readonly: true,
+ },
+ {
+ label: '评价时间：',
+ id: 'createTime',
+ type: 'input',
+ readonly: true,
+ },
+ {
+ label: '评价图片：',
+ id: 'commentImages',
+ type: 'image',
+ readonly: true,
+ },
+ ]
+ },
+ {
+ title: '回复评价',
+ form: [
+ {
+ label: '评价内容：',
+ id: 'comment',
+ type: 'input',
+ readonly: true,
+ },
+ {
+ label: '回复内容：',
+ id: 'replayContent',
+ type: 'input',
+ el: {
+ rows: 6,
+ type: 'textarea',
+ },
+ rules: {
+ required: true,
+ message: '请输入回复内容',
+ trigger: 'blur',
+ },
+ },
+ ],
+ atConfirm: async (val) => {
+ const { code } = await this.$elBusHttp.request(
+ 'flower/api/v2/flower-comment/replay/' + this.evaluationId + '',
+ {
+ method: 'put',
+ data: val,
+ }
+ )
+ if (code === 0) {
+ this.$message.success('回复成功')
+ }
+ },
+ },
+ ],
+ },
+ }
+ },
+ head() {
+ return {
+ title: '评价列表',
+ }
+ },
+ methods:{
+ onHandle(item) {
+ this.evaluationId = item.id
+ this.$refs.crud.$refs.extraDialog[1].show({
+ comment: item.comment,
+ })
+ },
+ async onDetail(item) {
+ const {code, data} = await this.$elBusHttp.request(
+ 'flower/api/v2/flower-comment/list',
+ {params: {id: item.id}}
+ )
+ if (code === 0) {
+ console.log(data);
+ console.log(data[0].orderId);
+ this.$refs.crud.$refs.extraDialog[0].show(data[0])
+
+ }
+ },
+ async onDelete(item) {
+ try {
+ await this.$elBusUtil.confirm(
+ `确定要删除这个商品吗？`
+ )
+ const {code, data} = await this.$elBusHttp.request(
+ 'flower/api/v2/flower-comment/' + item.id + '',
+ {
+ method: 'delete',
+ }
+ )
+ if (code === 0) {
+ this.$message.success(`删除成功`)
+ this.$refs.crud.getList()
+ } else {
+ return false
+ }
+ } catch (error) {
+ return false
+ }
+ },
+ async onShow(item) {
+ try {
+ await this.$elBusUtil.confirm(
+ `确定要显示这个评价吗？`
+ )
+ const {code} = await this.$elBusHttp.request(
+ 'flower/api/v2/flower-comment/show/' + item.id + '',
+ {
+ method: 'put',
+ data: {showFalg: 0},
+ }
+ )
+ if (code === 0) {
+ this.$message.success(`显示成功`)
+ this.$refs.crud.getList()
+ }
+ } catch (e) {
+ return false
+ }
+ },
+
+ async onHide(item) {
+ try {
+ await this.$elBusUtil.confirm(
+ `确定要隐藏这个评价吗？`
+ )
+ const {code} = await this.$elBusHttp.request(
+ 'flower/api/v2/flower-comment/show/' + item.id + '',
+ {
+ method: 'put',
+ data: {showFalg: 1},
+ }
+ )
+ if (code === 0) {
+ this.$message.success(`隐藏成功`)
+ this.$refs.crud.getList()
+ }
+ } catch (e) {
+ return false
+ }
+ }
+ }
+}
+</script>
+
+<style scoped>
+
+</style>
--
Gitblit v1.9.3