临时用户列表,客户反馈,消息推送管理

src/layout/Index.vue

@@ -27,12 +27,12 @@ const { menuClose } = useLayoutState()
 <style lang="scss" scoped>
 .layout-wrap {
   min-height: 100%;
-  padding-top: 60px;
+  padding-top: 48px;
   padding-left: 180px;
   transition: all .3s;
   .layout-content {
     padding: 30px;
-    min-height: calc(100% - 64px);
+    min-height: calc(100% - 52px);
   }
 }
 .layout-wrap__max{

src/layout/components/HeaderWrap.vue

@@ -154,6 +154,7 @@ function handleCommand(command){
   .system-user-box{
     display: flex;
     align-items: center;
+    outline: none;
     img{
         width:28px;
         height: 28px;

src/styles/element.scss

@@ -23,4 +23,7 @@
 .el-pagination {
   padding: 16px 20px;
   background-color: #fff;
+}
+.el-table thead th.el-table__cell{
+    background-color:#E7E7E7!important;
 }

src/utils/config.js

@@ -0,0 +1 @@
+export const pageSize = 10

src/views/customer/FeedbackList.vue

@@ -1,13 +1,86 @@
 <script setup>
 import { ref, reactive } from 'vue'
+
+const tableColumns = [
+    {
+        label:'手机号',
+        key:'mobile',
+        sortable:false
+    },{
+        label:'反馈内容',
+        key:'feedbackContent',
+        sortable:false
+    },{
+        label:'反馈时间',
+        key:'feedbackTime',
+        sortable:true
+    }
+]
+
+const tableQuery = reactive({
+    /* keyWord:'', */
+    currentPage:1,
+    pageSize:10,
+    totals:0
+})
+const tableData = ref([])
+function getTableData(){
+    tableData.value = [{
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },]
+}
+getTableData()
+function handlePageChange(){}
 </script>
 
 <template>
-    <div>
-        客户反馈列表
+    <div class="feedback-wrap">
+        <div class="table-box">
+            <el-table stripe border :data="tableData">
+                <el-table-column 
+                    align="center"
+                    v-for="column in tableColumns" :key="column.key"
+                    :prop="column.key" :label="column.label" :sortable="column.sortable"/>
+            </el-table>
+            <el-pagination
+                background
+                layout="total,prev,pager,next,jumper"
+                :current-page="tableQuery.page"
+                :page-size="tableQuery.pageSize"
+                :total="tableQuery.totals"
+                @current-change="handlePageChange"
+                style=" justify-content: flex-end;border:1px solid #ebeef5;border-top: none;"
+            />
+        </div>
     </div>
 </template>
 
 <style scoped lang="scss">
-
+.feedback-wrap{
+    height: calc(100vh - 108px);
+}
 </style>

src/views/customer/NotificationList.vue

@@ -1,13 +1,131 @@
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+
+const tableQuery = reactive({
+    keyWord:'',
+    classify:'',
+    labels:'',
+    author:'',
+    currentPage:1,
+    pageSize:10,
+    totals:0,
+})
+
+const classifyOptions = ref([])
+const labelOptions = ref([])
+const authorList = ref([])
+
+const reportColumns = [
+    {label:'报告名称',key:'name',},
+    {label:'摘要',key:'abs',},
+    {label:'分类',key:'classify',},
+    {label:'研究员',key:'author',},
+    {label:'标签',key:'label',},
+    {label:'发布/审批时间',key:'time',width:250,sortable:true}
+]
+const audioColumns = [
+    {label:'音频名称',key:'name',},
+    {label:'研究员',key:'author',},
+    {label:'标签',key:'label',},
+    {label:'添加时间',key:'time',width:250,sortable:true}
+]
+const videoColumns = [
+    {label:'视频封面',key:'cover',},
+    {label:'视频名称',key:'name',},
+    {label:'研究员',key:'author',},
+    {label:'标签',key:'label',},
+    {label:'添加时间',key:'time',width:250,sortable:true}
+]
+
+const activeType = ref('report')
+const tableColumns = computed(()=>{
+    return {
+        'report':reportColumns,
+        'audio':audioColumns,
+        'video':videoColumns
+    }[activeType.value]
+})
+function handleTabChange(){
+    //重置页码
+    //getTableData
+}
+function handlePageChange(){}
+const tableData = ref([])
+function getTableData(){
+    tableData.value = [
+        {
+            name:'aaa',
+            time:'2024-08-02 12:30'
+        }
+    ]
+}
+getTableData()
+
+function handleClassifyChange(){}
+function handleLabelChange(){}
 </script>
 
 <template>
-    <div>
-        消息推送管理
+    <div class="notification-list-wrap">
+        <div class="select-box">
+            <el-cascader style="width:160px" placeholder="分类" v-model="tableQuery.classify" :options="classifyOptions" @change="handleClassifyChange" v-if="activeType==='report'"></el-cascader>
+            <el-cascader style="width:160px" placeholder="标签" v-model="tableQuery.labels" :options="labelOptions" @change="handleLabelChange"></el-cascader>
+            <el-select style="width:160px" placeholder="研究员"></el-select>
+            <el-input style="width:400px" placeholder="报告名称" v-model="tableQuery.keyWord" :prefix-icon="Search" clearable></el-input>
+        </div>
+        <div class="tab-box">
+            <el-tabs v-model="activeType" class="tabs" @tab-change="handleTabChange">
+                <el-tab-pane label="报告" name="report"></el-tab-pane>
+                <el-tab-pane label="音频" name="audio"></el-tab-pane>
+                <el-tab-pane label="视频" name="video"></el-tab-pane>
+            </el-tabs>
+        </div>
+        <div class="table-box">
+            <el-table stripe border :data="tableData">
+                <el-table-column 
+                    align="center"
+                    v-for="column in tableColumns" :key="column.key"
+                    :prop="column.key" :label="column.label" :sortable="column.sortable" :width="column.width">
+
+                </el-table-column>
+                <el-table-column label="操作">
+
+                </el-table-column>
+            </el-table>
+            <el-pagination
+                background
+                layout="total,prev,pager,next,jumper"
+                :current-page="tableQuery.page"
+                :page-size="tableQuery.pageSize"
+                :total="tableQuery.totals"
+                @current-change="handlePageChange"
+                style=" justify-content: flex-end;border:1px solid #ebeef5;border-top: none;"
+            />
+        </div>
     </div>
 </template>
 
 <style scoped lang="scss">
-
+.notification-list-wrap{
+    .select-box{
+        display: flex;
+        gap:16px;
+        .el-input{
+            margin-left: auto;
+        }
+    }
+    .tab-box{
+        margin-top: 20px;
+        :deep(.el-tabs__header){
+            background-color: #fff;
+        }
+        :deep(.el-tabs--top .el-tabs__item.is-top:nth-child(2)){
+            padding-left: 20px !important;
+        }
+        :deep(.el-tabs__nav-wrap:after){
+            background-color: transparent;
+        }
+    }
+}
 </style>

src/views/customer/TempUserList.vue

@@ -1,13 +1,115 @@
 <script setup>
 import { ref, reactive } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+
+const tableColumns = [
+    {
+        label:'手机号',
+        key:'mobile',
+        sortable:false
+    },{
+        label:'最近一次阅读时间',
+        key:'lastReadTime',
+        sortable:true
+    },{
+        label:'累计阅读次数',
+        key:'readNum',
+        sortable:true
+    },{
+        label:'注册时间',
+        key:'loginTime',
+        sortable:true
+    }
+]
+
+const tableQuery = reactive({
+    keyWord:'',
+    currentPage:1,
+    pageSize:10,
+    totals:0
+})
+const tableData = ref([])
+function getTableData(){
+    tableData.value = [
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+        {
+            mobile:'123456'
+        },
+    ]
+}
+getTableData()
+function handlePageChange(){}
 </script>
 
 <template>
-    <div>
-        临时用户列表
+    <div class="temp-user-list-wrap">
+        <div class="search-box">
+            <el-input 
+                v-model="tableQuery.keyWord"
+                :prefix-icon="Search" clearable
+                style="width:400px"
+                placeholder="请输入手机号"></el-input>
+        </div>
+        <div class="table-box">
+            <el-table stripe border :data="tableData">
+                <el-table-column 
+                    align="center"
+                    v-for="column in tableColumns" :key="column.key"
+                    :prop="column.key" :label="column.label" :sortable="column.sortable"/>
+            </el-table>
+            <el-pagination
+                background
+                layout="total,prev,pager,next,jumper"
+                :current-page="tableQuery.page"
+                :page-size="tableQuery.pageSize"
+                :total="tableQuery.totals"
+                @current-change="handlePageChange"
+                style=" justify-content: flex-end;border:1px solid #ebeef5;border-top: none;"
+            />
+        </div>
     </div>
 </template>
 
 <style scoped lang="scss">
-
+.temp-user-list-wrap{
+    height: calc(100vh - 108px); //layout padding 30*2 headHeight 48
+    /* display: flex;
+    flex-direction: column; */
+    .search-box{
+        text-align: right;
+        margin-bottom: 20px;
+    }
+    /* .table-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .el-table{
+            flex:1;
+            overflow-y: auto;
+        }
+    } */
+}
 </style>