案例组件

src/components/Case/caseItems.vue

@@ -0,0 +1,157 @@
+<template>
+  <div style="">
+    <div class="article-list" v-for="(item, idx) in items" :key="idx">
+      <div class="article-info" @click="jumpRouter(item)">
+        <div class="article-info-title">
+          <span v-if="item.isRead" class="readed">【已查看】</span>
+          <span class="noRead" v-else>【未查看】</span>
+          <span class="title one-line-ellipsis" v-html="$keywordActiveShow(item.cases.title,keyword)"></span>
+    
+        </div>
+        <div v-html="$keywordActiveShow(item.cases.summary,keyword)" class="article-info-summary two-line-ellipsis">
+        </div>
+        <!-- v-html="$keywordActiveShow(item.summary,keyword)" -->
+        <div style="display:flex;justify-content: space-between;">
+          <div class="article-info-tools">
+          <!-- <authorInfo :avatar="item.avatar" :name="item.name" :info="item.orgInfo"></authorInfo> -->
+          <span style="color: #999999;">{{ item.time }}</span>
+          <span v-if="type=='myShare'" style="color: #999999;font-size: 14px;">分享给{{item.toAname}}</span>
+          <span v-else>{{item.sysCreateBy}}分享给我</span>
+          <!-- <interactBar ref="shareDialog" :type="0" :data="item" :shares="false" :views="false"></interactBar> -->
+        </div>
+        <div>
+          <el-button style="color: #8590A6;" v-if="!item.isRead&&type=='myShare'" type="text" icon="el-icon-refresh-right" @click.stop="deleteshares(item)">撤回</el-button>
+        </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import apiShares from '@/api/modules/shares.js';
+export default {
+    name:'caseItems',
+    props:{
+      items: {
+      //name,
+      type: Array,
+      default: () => []
+    },
+    type:{
+      type:String,
+      default:()=>{
+        return 'myShare'
+      }
+    },
+     keyword:{
+      type:String,
+      default:()=>{
+        return ''
+      }
+    }
+    },
+     mounted:{
+      deleteshares(item){
+      this.$emit('confirm',item)
+    },
+    },
+    created() {
+      console.log(this.items)
+    },
+   
+}
+</script>
+<style lang="scss" scoped>
+.article-status1 {
+  padding: 3px;
+  border: 1px dotted #1ea0fa;
+  color: #1ea0fa;
+}
+.article-status2 {
+  padding: 3px;
+  border: 1px dotted #00aa00;
+  color: #00aa00;
+}
+.article-status3 {
+  padding: 3px;
+  border: 1px dotted #ff0000;
+  color: #ff0000;
+}
+.article-list {
+  border-bottom: 1px solid #dddddd;
+  // padding: 10px;
+  padding-bottom: 20px;
+  margin-top: 20px;
+  border-bottom: 1px solid #e9e9e9;
+  cursor: pointer;
+}
+
+.article-info {
+  cursor: pointer;
+  .article-info-title {
+    font-size: 16px;
+    font-weight: 400;
+    display: flex;
+    justify-content: flex-start;
+    
+    align-items: center;
+    .readed{
+      font-size: 18px;
+      color: #3e7fff;
+      // margin-bottom: 6px;
+    }
+    .noRead{
+      font-size: 18px;
+      color:#FF3E3E;
+      // margin-bottom: 6px;
+    }
+    .title{
+      line-height: 25px;
+      margin-left: 10px;
+      font-size: 18px;
+      flex-shrink: 10000;
+      font-weight: 500;
+      color: #333333;
+    }
+    .el-button{
+      margin-left: auto;
+    }
+    // .article-info-date {
+    //   height: 40px;
+    //   line-height: 40px;
+    //   float: right;
+    //   font-weight: 200;
+    //   color: #999999;
+    //   i {
+    //     margin-right: 5px;
+    //   }
+    // }
+  }
+  .article-info-summary {
+    height: 46px;
+    font-weight: 200;
+    font-size: 16px;
+    line-height: 1.5;
+    margin:7px 0;
+  }
+  .article-info-tools {
+    color: #999999;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    >span{
+      font-size: 14px;
+       color: #747474;
+
+      // margin-top: -2px;
+    }
+    // >span:first-of-type{
+    //   margin-left: 10px;
+    // }
+    // >span:last-of-type{
+    //   margin-top: -4px;
+    //   margin-right:auto;
+    // }
+  }
+}
+</style>

src/views/share/MyList.vue

@@ -49,27 +49,26 @@
           </div>
         </el-tab-pane>
         <el-tab-pane label="案例" name="case">
-           <div>
+           <div style="min-height: 500px;">
-              <!-- <qa-items @confirm="confirm" :items="qaList.list"></qa-items> -->
+            <case-items  @confirm="confirm" :items="caseList.list"></case-items>
-              <!-- v-if="qaList.count>qaList.pageSize" -->
+            <div v-if="caseList.list.length > 0" style="text-align: center;margin-top:57px;">
-              <!-- <div v-if="qaList.list.length > 0" style="text-align: center;margin-top:57px;">
                 <el-pagination
                   background
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
-                  :current-page="qaList.pageIndex"
+                  :current-page="caseList.pageIndex"
                   :page-sizes="[10, 20, 30, 40]"
-                  :page-size="qaList.pageSize"
+                  :page-size="articleList.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
-                  :total="qaList.count"
+                  :total="caseList.count"
                 ></el-pagination>
-              </div> -->
+              </div>
-              <!-- <div v-else>
+              <div v-else>
-                <div v-if="qaList.list.length == 0">
+                <div v-if="caseList.list.length == 0">
                   <div v-if="isSearh" class="zan-wu">没有查询到相关内容</div>
                   <div v-else class="zan-wu">暂无数据</div>
                 </div>
-              </div> -->
+              </div>
            </div>
         </el-tab-pane>
         <el-tab-pane label="文章" name="article">
@@ -133,9 +132,10 @@
   import qaItems from '@/components/Qa/shareList.vue'
   import apiShares from '@/api/modules/shares.js';
   import apiUser from '@/api/system/user.js';
+  import caseItems from '@/components/Case/caseItems.vue'
   export default {
     name: 'myShareIndex',
-    components:{articleItems,courseItems,qaItems},
+    components:{articleItems,courseItems,qaItems,caseItems},
     data(){
         return {
           isRead: '',
@@ -266,7 +266,13 @@
         let { pageIndex, pageSize } = this.caseList;
         let query = { pageIndex, pageSize,keyword:this.keyword,isRead: this.isRead,objType:3};
         apiShares.myCaseList(query).then(res=>{
-          console.log(res,'res');
+          console.log(res,'res');   
+          if(res.status == 200) {
+             this.caseList.count = res.result.count;
+             this.caseList.list = res.result.list;
+          }else {
+            this.$message.error(res.message);
+          }
         })
       },
       //问答数据查询
@@ -366,6 +372,9 @@
             if (this.tabName == 'course') {
               this.findCourse();
             }
+            if (this.tabName == 'case') {
+              this.findCase();
+            }
           }else{
             this.$message.error('撤回失败');
           }