猫舍管理 内容推荐

src/views/ohplay/recommend/index.vue

@@ -3,25 +3,28 @@
     <!-- 搜索 -->
     <el-form inline label-width="100px" size="mini">
       <el-form-item label="内容：">
-        <el-input placeholder="请输入内容" />
+        <el-input v-model="form.content" placeholder="请输入内容" />
       </el-form-item>
       <el-form-item label="内容类型：">
-        <el-select placeholder="请选择内容类型">
-          <el-option />
+        <el-select v-model="form.contentType" placeholder="请选择内容类型">
+          <el-option v-for="item in dict.type.content_type" :key="item.value" :label="item.label"
+            :value="item.value" />
         </el-select>
       </el-form-item>
       <el-form-item label="内容分类：">
-        <el-select placeholder="请选择内容分类">
-          <el-option />
+        <el-select v-model="form.type" placeholder="请选择内容分类">
+          <el-option v-for="item in dict.type.content_classify" :key="item.value" :label="item.label"
+            :value='item.value' />
         </el-select>
       </el-form-item>
       <el-form-item label="当前状态：">
-        <el-select placeholder="请选择当前状态">
-          <el-option />
+        <el-select v-model="form.recommendStatus" placeholder="请选择当前状态">
+          <el-option v-for="item in dict.type.recommend_status" :key="item.value" :label="item.label"
+            :value='item.value' />
         </el-select>
       </el-form-item>
       <el-form-item label="更新时间：">
-        <el-date-picker type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" />
+        <el-date-picker v-model="date" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search">搜索</el-button>
@@ -29,42 +32,99 @@
       </el-form-item>
     </el-form>
     <!-- 列表 -->
-    <el-table :data="tableData">
-      <el-table-column label="内容" align="center" />
-      <el-table-column label="图片" align="center" />
-      <el-table-column label="回复/点赞" align="center" />
-      <el-table-column label="内容位置" align="center" />
-      <el-table-column label="权重" align="center" />
-      <el-table-column label="当前状态" align="center" />
-      <el-table-column label="有效期" align="center" />
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column label="内容" prop="content" align="center" />
+      <el-table-column label="图片" align="center" width="100px">
+        <template v-if="scope.row.images" slot-scope="scope">
+          <el-image v-for="item in scope.row.images.split(',')" :key="item" :src="item" />
+        </template>
+      </el-table-column>
+      <el-table-column label="回复/点赞" prop="replyOrLike" align="center" />
+      <el-table-column label="内容位置" prop="recommendLocation" align="center" :formatter="locationFormatter" />
+      <el-table-column label="权重" prop="recommendWeight" align="center" />
+      <el-table-column label="当前状态" prop="recommendStatus" align="center" :formatter="statusFormatter" />
+      <el-table-column label="有效期" align="center">
+        <template slot-scope="scope">
+          <div>{{ scope.row.startRecommendTime }}</div>
+          <div>至</div>
+          <div>{{ scope.row.endRecommendTime }}</div>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center">
-        <template>
-          <el-button type="text" @click="dialogVisible = true">详情</el-button>
-          <el-button type="delete">结束推荐</el-button>
+        <template slot-scope="scope">
+          <el-button type="text" @click="dialogVisible = true, getDetail(scope.row.id)">详情</el-button>
+          <el-button type="delete" @click="getRemove(scope.row.id)">结束推荐</el-button>
         </template>
       </el-table-column>
     </el-table>
+    <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
+      @pagination="getList" />
+
     <!-- 弹窗 -->
-    <el-dialog :visible.sync="dialogVisible" title="详情" width="500px">
-      <div class="dialog_item" v-for="item in 15" :key="item">
+    <el-dialog :visible.sync="dialogVisible" title="详情" width="600px">
+      <div class="item_box">
+        <!-- 话题 -->
         <el-row>
           <el-col :span="3">
-            <el-avatar />
+            <el-avatar :src="dialogList.userAvatar" />
           </el-col>
           <el-col :span="16">
-            <div>xxxx</div>
-            <div>2022-03-08 14:08:22</div>
+            <div>{{ dialogList.userName }}</div>
+            <div>{{ dialogList.creatTime }}</div>
           </el-col>
           <el-col :span="5">
-            <el-button type="delete">隐藏</el-button>
-            <el-button type="text">显示</el-button>
+            <el-button v-if="dialogList.isDelete === '0'" type="delete" @click="getChange(dialogList, 1)">隐藏
+            </el-button>
+            <el-button v-else type="text" @click="getChange(dialogList, 0)">显示</el-button>
           </el-col>
         </el-row>
         <div class="item_content">
-          <div>
-            qwertyuioopasdfghjklzxcvbnm
+          <div>{{ dialogList.content }}</div>
+          <div style="margin-top: 10px">点赞：{{ dialogList.likeNum }}</div>
+        </div>
+        <!-- 评论 -->
+        <div class="dialog_list" v-for="item in dialogList.commentList" :key="item.id">
+          <el-row>
+            <el-col :span="3">
+              <el-avatar :src="item.toUserAvatar" />
+            </el-col>
+            <el-col :span="16">
+              <div>{{ item.toUserName }}</div>
+              <div>{{ item.createTime }}</div>
+            </el-col>
+            <el-col :span="5">
+              <el-button v-if="item.isDelete === 0" type="delete" @click="getCommentChange(item, 1)">隐藏
+              </el-button>
+              <el-button v-else type="text" @click="getCommentChange(item, 0)">显示</el-button>
+            </el-col>
+          </el-row>
+          <div class="item_content">
+            <div>{{ item.content }}</div>
+            <div style="margin-top: 10px">点赞：</div>
+          </div>
+          <!-- 评论的评论 -->
+          <div class="item_children">
+            <div class="item_i" v-for="i in item.children" :key="i.id">
+              <el-row>
+                <el-col :span="3">
+                  <el-avatar :src="i.toUserAvatar" />
+                </el-col>
+                <el-col :span="16">
+                  <div>{{ i.toUserName }}</div>
+                  <div>{{ i.createTime }}</div>
+                </el-col>
+                <el-col :span="5">
+                  <el-button v-if="i.isDelete === 0" type="delete" @click="getCommentChange(i, 1)">隐藏
+                  </el-button>
+                  <el-button v-else type="text" @click="getCommentChange(i, 0)">显示</el-button>
+                </el-col>
+              </el-row>
+              <div class="item_content">
+                <div>{{ i.content }}</div>
+                <div style="margin-top: 10px">点赞：</div>
+              </div>
+            </div>
           </div>
-          <div style="margin-top: 10px">点赞：10</div>
         </div>
       </div>
     </el-dialog>
@@ -72,57 +132,147 @@
 </template>
 
 <script>
-import { list } from '@/api/ohplay/recommend'
+import { list, remove } from '@/api/ohplay/recommend'
+import { detail, showOrHide, commentShowOrHide } from '@/api/ohplay/content'
 export default {
+  dicts: ['location_type', 'recommend_status', 'content_type', 'content_classify'],
   data() {
     return {
+      // 遮罩层
+      loading: false,
       // 表单
       form: {
         pageNum: 1,
         pageSize: 10
       },
-      tableData: [{
-        id: 1
-      }],
+      date: [],
+      // 数据总数
+      total: 0,
+      // 列表
+      tableData: [],
       // 弹窗
-      dialogVisible: false
+      dialogVisible: false,
+      dialogList: {}
+    }
+  },
+  watch: {
+    date(val) {
+      this.form.startDate = val[0]
+      this.form.endtDate = val[1]
     }
   },
-  mounted(){
+  mounted() {
     this.getList()
   },
-  methods:{
-    getList(){
+  methods: {
+    // 列表
+    getList() {
+      this.loading = true
       list(this.form).then(res => {
-        console.log(res);
+        if (res.code === 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+          this.loading = false
+        }
       })
+    },
+
+    // 详情
+    getDetail(id) {
+      detail(id).then(res => {
+        if (res.code === 0) {
+          this.dialogList = res.data
+        }
+      })
+    },
+
+    // 结束推荐
+    getRemove(id) {
+      remove(id).then(res => {
+        if (res.code === 0) {
+          this.$message.success('成功结束推荐！')
+          this.getList()
+        }
+      })
+    },
+
+    // 隐藏显示
+    getChange(row, type) {
+      showOrHide(row.id, type).then(res => {
+        let tip = type === 0 ? '显示' : '隐藏'
+        if (res.code === 0) {
+          this.$message.success(`${tip}成功！`)
+          this.getDetail(row.id)
+        }
+      })
+    },
+
+    getCommentChange(row, type) {
+      commentShowOrHide(row.id, type).then(res => {
+        let tip = type === 0 ? '显示' : '隐藏'
+        if (res.code === 0) {
+          this.$message.success(`${tip}成功！`)
+          this.getDetail(row.id)
+        }
+      })
+    },
+
+    // 字典翻译
+    locationFormatter(row) {
+      return this.selectDictLabel(this.dict.type.location_type, row.recommendLocation)
+    },
+    statusFormatter(row) {
+      return this.selectDictLabel(this.dict.type.recommend_status, row.recommendStatus)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.dialog_item {
-  border-bottom: 1px solid #eee;
-  padding: 10px 0;
+.item_box {
+  height: 700px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: 1px solid #eee;
+  box-shadow: 10px 5px 10px 0px #eee;
+  padding: 20px;
 
-  .el-row {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  .dialog_list {
+    border: 1px solid #eee;
+    box-shadow: 10px 5px 10px 0px #eee;
+    padding: 10px;
+    width: calc(100% - 20px);
+    margin-top: 20px;
+
+    .el-row {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .item_content {
+      margin-top: 10px;
+    }
   }
 
-  .item_content {
-    margin-top: 10px;
+  .dialog_item:last-child {
+    border: none;
   }
-}
-::v-deep .el-dialog__body {
-  height: 700px;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
 
-.dialog_item:last-child {
-  border: none;
+  .item_children {
+    width: calc(100% - 40px);
+    margin-top: 20px;
+    border: 1px solid #eee;
+    box-shadow: 10px 5px 10px 0px #eee;
+
+    .item_i {
+      padding: 20px;
+      border-bottom: 1px solid #eee;
+    }
+
+    .item_i:last-child {
+      border: none;
+    }
+  }
 }
 </style>