小记者详情

src/views/reporter/components/ReportDetail.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="detail-report">
+    <i class="el-icon-close" @click="closeDialog"></i>
+    <div class="detail-left">
+        <el-carousel :interval="5000" arrow="always">
+            <el-carousel-item v-for="item in infoDetail.res_urls" :key="item">
+                <el-image class="image"
+                    :src="item"
+                    :fit="'contain'"
+                    :style="'width:802px;height:870px;'">
+                    <div slot="placeholder" class="image-slot" :style="'line-height:130px'">
+                        加载中<span class="dot">...</span>
+                    </div>
+                </el-image>
+            </el-carousel-item>
+        </el-carousel>
+    </div>
+    <div class="detail-right">
+        <div class="right-top">
+            <div class="creator-info">
+                <el-image
+                    :src="infoDetail.creator_img_url?infoDetail.creator_img_url:require('../../../assets/avatar.png')"
+                    fit="cover" style="width:32px;height:32px;margin-right: 8px;">
+                </el-image>
+                <span class="name">{{infoDetail.creator_name}}</span>
+            </div>
+            <h3>{{infoDetail.art_title}}</h3>
+            <p>{{infoDetail.art_content}}</p>
+            <b>{{infoDetail.create_time.substring(0,10)}}</b>
+        </div>
+        <div class="right-bottom">
+            <h4>共 {{infoDetail.comment_count>999?'999+':infoDetail.comment_count}} 条评论</h4>
+        </div>
+        <div class="input-box">
+            <div class="ding-box">
+                <svg-icon icon-class="like-line" className="chat"></svg-icon>
+                <span>{{infoDetail.ding_count}}</span>
+                <svg-icon icon-class="chat-line" className="chat"></svg-icon>
+                <span>{{infoDetail.comment_count}}</span>
+            </div>
+            <el-input
+                placeholder="输入评论"
+                v-model="searchInput" maxlength="100">
+            </el-input>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  name: "publishReport",
+  props: ["info"],
+  data() {
+    return {
+      infoDetail: JSON.parse(JSON.stringify(this.info)),
+      searchInput: ''
+    };
+  },
+  watch: {},
+  computed: {
+  },
+  methods: {
+    handleData(){
+        console.log(this.infoDetail)
+    },
+    closeDialog(){
+        this.$emit('closeDetail')
+    }
+  },
+  created() {
+
+  },
+  mounted() {
+    this.handleData()
+  },
+  beforeDestroy() {
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.detail-report{
+    display: flex;
+    position: relative;
+    .el-icon-close{
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        color: rgba(0, 0, 0, 0.88);
+        top: 24px;
+        right: 24px;
+        z-index: 1;
+    }
+    .detail-left{
+        width: 802px;
+        height: 870px;
+    }
+    .detail-right{
+        position: relative;
+        flex: 1;
+        .right-top{
+            padding: 24px 24px 16px 24px;
+            border-bottom: 1px solid #F1F1F1;
+        }
+        .creator-info{
+            display: flex;
+            align-items: center;
+            span{
+                color: #2F3742;
+                font-size: 14px;
+                font-weight: 500;
+                line-height: 22px;
+            }
+        }
+        h3{
+            color: #2F3742;
+            font-size: 18px;
+            font-weight: 500;
+            line-height: 24px;
+            margin: 16px 0;
+        }
+        p{
+            color: #2F3742;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 24px;
+            margin: 0 0 16px 0;
+        }
+        b{
+            color: #C6C6C6;
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 20px;
+        }
+    }
+    .right-bottom{
+        padding: 16px 24px;
+        h4{
+            color: #2F3742;
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 20px;
+            margin: 0;
+        }
+    }
+    .input-box{
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        padding: 24px 16px;
+        border-top: 1px solid rgba(0, 0, 0, 0.08);
+        background: #FFF;
+        .ding-box{
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 22px;
+            display: flex;
+            align-items: center;
+            margin-bottom: 16px;
+            .svg-icon{
+                width: 24px;
+                height: 24px;
+                &.chat{
+                    color: rgba(0, 0, 0, 0.85);
+                }
+            }
+            span{
+                margin: 0 16px 0 4px;
+            }
+        }
+        .el-input{
+            border-radius: 8px;
+            background: #F4F4F4;
+        }
+    }
+}
+</style>
+<style lang="scss">
+.detail-report{
+    .el-carousel__container{
+        height: 870px;
+    }
+    .input-box{
+        .el-input__inner{
+            background: #F4F4F4;
+        }
+    }
+}
+</style>

src/views/reporter/index.vue

@@ -32,7 +32,7 @@
         :imgsArr="imgsArr"
         @scrollReachBottom="getData"
       >
-        <div class="info" slot-scope="props">
+        <div class="info" slot-scope="props" @click="lookDetail(props.value.id)">
             <el-image class="image"
                 :src="props.value.cover_img_url"
                 :fit="'cover'"
@@ -71,6 +71,16 @@
         v-if="publishFlag">
         <publish-report @closeDialog="closeDialog"></publish-report>
     </el-dialog>
+    <el-dialog
+        :visible.sync="reportDetailFlag"
+        :show-close="false"
+        :close-on-click-modal="false"
+        width="1286px"
+        :modal="false"
+        class="login-dialog"
+        v-if="reportDetailFlag">
+        <report-detail :info="reportInfo" @closeDetail="closeDetail"></report-detail>
+    </el-dialog>
   </div>
 </template>
 
@@ -81,9 +91,10 @@ import Header from "../../components/Header.vue";
 import vueWaterfallEasy from "vue-waterfall-easy";
 import { getLogin } from "@/api/ajax";
 import PublishReport from "./components/PublishReport.vue"
+import ReportDetail from './components/ReportDetail.vue';
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { Header, vueWaterfallEasy, PublishReport },
+  components: { Header, vueWaterfallEasy, PublishReport, ReportDetail },
   props: {},
   data() {
     //这里存放数据
@@ -120,7 +131,9 @@ export default {
       publishFlag: false, // 发布弹窗
       searchInput: '',
       labelList:['中英双语','少儿必读','3-6 岁'],
-      labelActiveIndex: null
+      labelActiveIndex: null,
+      reportDetailFlag: false,
+      reportInfo: null
     }
   },
   //计算属性 类似于data概念
@@ -255,6 +268,23 @@ export default {
     closeDialog(){
         this.publishFlag = false
         this.getData(1)
+    },
+    // 查看详情
+    lookDetail(id){
+       let MethodName = "/PaperServer/Client/Xjz/XjzArticleDetail";
+        let data = {
+            id: id
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+                this.reportInfo = res.data
+                this.reportDetailFlag = true
+            }
+        }) 
+    },
+    closeDetail(){
+        this.reportDetailFlag = false
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -567,8 +597,8 @@ export default {
     }
 }
 .vue-waterfall-easy{
-    width: 1440px !important;
-    margin-left: -720px !important;
+    // width: 1440px !important;
+    // margin-left: -720px !important;
     .img-inner-box{
         box-shadow: none !important;
     }