learning-system-portal/src/components/Qa/toList.vue

<template>
  <div style="">
    <div class="article-list" v-for="(item,idx) in items" :key="idx">
      <div class="article-info">
        <div class="article-info-title">
          <div class="article-info-date">
            <!--
            <el-button type="text" icon="el-icon-share">分享</el-button>
            -->
          </div>
          <div style="padding-left: 5px;line-height: 30px;">
            <span v-if="item.status>1" class="qa-basic qa-solve">【已解决】</span>
            <span v-if="item.status==1" class="qa-basic qa-unSolve">【待解决】</span>
            <span style="padding-left: 5px;">
                <a :href="`${webBaseUrl}/qa/answer?id=1`" target="_blank">{{item.title}}</a>
            </span>
          </div>
        </div>
        <div class="article-info-summary">
          不懂就要问，求专家指点高刷新率、高色域、HDR的决定因素和限制条件
        </div>
        <div style="padding-left: 20px;color: #5a5a5a;">
          <span>最佳回答:</span>
          <div style="color: #5a5a5a;padding: 8px 0px 10px 20px;">这个对液晶、IC的要求都较高</div>
        </div>
        <div class="article-info-tools">
          <div class="article-info-tools-auth">
            <span style="font-size: 13px; color: #7b7b7b;"><i class="el-icon-user"></i> 2022-02-11 12:10:23 分享给 XXXX</span>
          </div>
          <div class="article-info-tools-btns">
			<interactBar :data="oData" :type="0" :views="false"></interactBar>
            <!-- <el-link icon="el-icon-chat-line-round" class="article-info-tools-btn" >回答57</el-link>
            <el-link icon="el-icon-s-promotion" class="article-info-tools-btn" >关注23</el-link>
            <el-link icon="el-icon-star-on" class="article-info-tools-btn">收藏12</el-link>
            <el-link icon="el-icon-thumb" class="article-info-tools-btn" >点赞20</el-link > -->
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="分享" :visible.sync="shareShow" :close-on-click-modal="false" width="500px" custom-class="g-dialog">
        <div style="height: 200px;padding-right: 30px;">

            <el-form  label-width="100px">
              <el-form-item label="工号或姓名">
                <el-input v-model="shareInfo.name" placeholder="您要分享的人的工号或姓名">
                  <el-button slot="append" icon="el-icon-search">搜索</el-button>
                </el-input>
              </el-form-item>
            </el-form>
            <div>
              关于如何查询要分享的人，使用工号是否可以
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="shareShow= false">取 消</el-button>
          <el-button type="primary" >提交分享</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
	import interactBar from '@/components/Portal/interactBar.vue'
  export default {
    name: 'articleItems',
    props: {
      items: { //name,
        type: Array,
        default:()=>[]
      },
      share:{
        type: Boolean,
        default:true
      },
      remove:{
        type: Boolean,
        default:true
      },
      edit:{
        type: Boolean,
        default:true
      },
      collect:{
        type: Boolean,
        default:false
      }
    },
    data(){
      return {
        shareShow:false,
        shareInfo:{
          aid:'',
          name:'',
          article:null
        },
		oData:{
			favorites:23,
			          comments:18,
			          shares:16,
			          praises:68,
			          
		}
      }
    },
    mounted() {

    },
	components:{
		interactBar
	},
    methods:{
      toStudy(item){
        this.$router.push({path:'/uc/study/index',params:{id:item.id}});
      },
      shareItem(item){
        this.shareInfo.article=item;
        this.shareShow=true;
      },
      editItem(item){
        this.$message({message:'编辑'+item.title+'内容',offset:50})
      },
      delItem(item,idx){
        this.$confirm('您确定要删除所选文章吗？', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.items.splice(idx,1);
          this.$message({type: 'success',message: '删除成功!',offset:50});
        }).catch(() => {
          this.$message({type: 'info',message: '已取消删除',offset:50});
        });
      },
      delCollectItem(item,idx){
        this.$confirm('您确定要取消收藏吗？', '取消提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.items.splice(idx,1);
          this.$message({type: 'success',message: '取消成功!',offset:50});
        }).catch(() => {

        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .text-status1{
    padding: 3px;
    color: #1ea0fa;
  }
  .text-status2{
    padding: 3px;
    color: #00aa00;
  }
  .text-status3{
    padding: 3px;
    color: #ff0000;
  }
  .article-list {
    margin: 5px 0;
    border: 1px solid #dddddd;
    padding: 10px;
  }

  .article-info {
    .article-info-title {
      font-size: 16px;
      font-weight: 400;
      height: 40px;
      line-height: 40px;
      .article-info-date {
        height: 40px;
        line-height: 40px;
        float: right;
        font-weight: 200;
        color: #999999;
        i {
          margin-right: 5px;
        }
      }
    }
    .article-info-summary {
      height: 65px;
      color: #999999;
    }
    .article-info-tools {
      height: 30px;
      .article-info-tools-auth {
        float: left;
        font-size: 13px;
        color: #999999;
        img {
          margin-right: 10px;
          width: 30px;
          border: 1px solid #eee;
          border-radius: 50%;
          vertical-align: middle;
        }
      }
      .article-info-tools-btns {
        float: right;
        .article-info-tools-btn {
          margin: 0 0 0 15px;
        }
      }
    }
  }

</style>