feat: 新增评论组件

src/renderer/constant/rate.ts

@@ -50,3 +50,51 @@ export const channels: Item[] = [
         score: 4.5
     }
 ]
+
+interface ListItem {
+    id: number
+    userName: string
+    content: string
+    createTime: string
+    channelName: string
+    channelIcon: any
+    imageList: any[]
+    score: number
+}
+
+export const commentList: ListItem[] = [
+    {
+        id: 1,
+        userName: '用户98882',
+        content: '环境不错，温泉也很好',
+        createTime: '2022-11-09 16:24:30',
+        channelName: '携程',
+        channelIcon: xc,
+        imageList: [
+            xc,
+            xc,
+            xc,
+            xc,
+            xc,
+            xc,
+        ],
+        score: 5,
+    },
+    {
+        id: 2,
+        userName: '用户98882',
+        content: '环境不错，温泉也很好',
+        createTime: '2022-11-09 16:24:30',
+        channelName: '抖音',
+        channelIcon: dy,
+        imageList: [
+            dy,
+            dy,
+            dy,
+            dy,
+            dy,
+            dy,
+        ],
+        score: 5,
+    },
+]

src/renderer/views/rate/components/RateContentSection/index.vue

@@ -1,12 +1,14 @@
 <template>
-    <div class="box-border border-[1px] border-[#E5E8EE] rounded-[16px] p-[16px]">
-        <el-tabs v-model="activeName" class="demo-tabs">
+    <div class="flex flex-col box-border border-[1px] border-[#E5E8EE] rounded-[16px] p-[16px]">
+        <el-tabs v-model="activeName">
             <el-tab-pane :label="`${item.label}(${item.total})`" :name="item.name" v-for="item in tabs"
                 :key="item.label" />
         </el-tabs>
 
         <RateFilterSection />
 
+        <RateListSection :list="commentList" />
+
         <!-- 分页 -->
         <Pagination v-model:current-page="queryParams.pageIndex" :page-size="queryParams.pageSize" :total="total" />
     </div>
@@ -14,8 +16,10 @@
 
 <script setup lang="ts" name="RateContentSection">
 import { ref } from 'vue'
+import { commentList } from '@/constant/rate'
 import Pagination from '@/components/Pagination/index.vue'
 import RateFilterSection from '../RateFilterSection/index.vue'
+import RateListSection from '../RateListSection/index.vue'
 
 const activeName = ref('all')
 const tabs = ref([
@@ -35,6 +39,7 @@ const tabs = ref([
         total: 50,
     }
 ])
+const list = ref([])
 const total = ref(200)
 const queryParams = ref({
     pageIndex: 1,

src/renderer/views/rate/components/RateListSection/index.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="list h-[420px] px-[16px] overflow-y-auto">
+        <div class="mb-[16px]" v-for="item in list" :key="item.id">
+            <div class="flex items-center text-[14px] select-none">
+                <el-image :src="item.channelIcon" />
+                <span class="text-[#1B74F5] ml-[12px]">{{ item.channelName }}</span>
+                <span class="text-[#1B74F5] mx-[3px]">-</span>
+                <span class="text-[#171717]">{{ item.userName }}</span>
+                <span class="text-[#99A0AE] mx-[6px]">·</span>
+                <span class="text-[#2B7FFF]">评分{{ item.score }}</span>
+                <span class="text-[#99A0AE] ml-auto">{{ item.createTime }}</span>
+            </div>
+            <div class="content pl-[60px]">
+                <p class="text-[14px] text-[#525866] leading-[20px] mb-[8px]">{{ item.content }}</p>
+
+                <div class="grid grid-cols-3 gap-[8px] w-[316px]">
+                    <el-image :src="img" class="w-[100px] h-[100px] rounded-[8px]"
+                        v-for="(img, index) in item.imageList" :key="index" />
+                </div>
+            </div>
+            <div class="reply pl-[60px]">
+                <span class="text-[14px] text-[#2B7FFF] cursor-pointer">回复</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="RateContentSection">
+import { defineProps } from 'vue'
+
+defineProps({
+    list: {
+        type: Array,
+        default: () => [],
+    }
+})
+</script>