新增表彰详情功能

src/api/allApi.js

@@ -49,6 +49,15 @@ export function commendPage(query) {
   })
 }
 
+// 表彰详情
+export function commendDetail(query) {
+  return request({
+    url: '/mall-commend/commend/staff/info',
+    method: 'get',
+    params: query
+  })
+}
+
 //证书类型
 export function certificatType(query) {
   return request({

src/router/index.js

@@ -38,6 +38,10 @@ const routes = [
         path: '/home/commend',
         component: () => import('@/views/HomeView/Commend.vue')
       },
+      {
+        path: '/home/commend/commendDetail',
+        component: () => import('@/views/HomeView/CommendDetail.vue')
+      },
       {
         path: '/home/earnPoints',
         component: () => import('@/views/HomeView/EarnPoints.vue')

src/views/HomeView/Commend.vue

@@ -7,7 +7,7 @@
                     <div v-else class="content-body">
                         <div v-for="(item,index) in dataList" :key="index" class="serie">
                             <div class="badge-icon-list">
-                                <div v-for="(childItem,childIndex) in item.userInfos" :key="childIndex" class="badge-icon-item">
+                                <div v-for="(childItem,childIndex) in item.recipientsList" :key="childIndex" @click="handleClickCommend(childItem)" class="badge-icon-item">
                                     <div class="badge-item-icon">
                                         <img :src="httpFile + childItem.headImage" style="border-radius: 50%;">
                                     </div> 
@@ -25,7 +25,7 @@
                     <div v-else class="content-body">
                         <div v-for="(item,index) in dataList" :key="index" class="serie">
                             <div class="badge-icon-list">
-                                <div v-for="(childItem,childIndex) in item.userInfos" :key="childIndex" class="badge-icon-item">
+                                <div v-for="(childItem,childIndex) in item.recipientsList" :key="childIndex" @click="handleClickCommend(childItem)" class="badge-icon-item">
                                     <div class="badge-item-icon">
                                         <img :src="httpFile + childItem.headImage" style="border-radius: 50%;">
                                     </div> 
@@ -44,7 +44,7 @@
                     <div v-else class="content-body">
                         <div v-for="(item,index) in dataList" :key="index" class="serie">
                             <div class="badge-icon-list">
-                                <div v-for="(childItem,childIndex) in item.userInfos" :key="childIndex" class="badge-icon-item">
+                                <div v-for="(childItem,childIndex) in item.recipientsList" :key="childIndex" @click="handleClickCommend(childItem)" class="badge-icon-item">
                                     <div class="badge-item-icon">
                                         <img :src="httpFile + childItem.headImage" style="border-radius: 50%;">
                                     </div> 
@@ -64,7 +64,7 @@
     </div>
 </template>
 <script scoped>
-import { commendPage, } from "@/api/allApi";
+import { commendPage } from "@/api/allApi";
 export default {
     data() {
         return {
@@ -77,6 +77,17 @@ export default {
         this.getList(32);
     },
     methods: {
+        handleClickCommend(val) {
+            debugger
+            console.log(val);
+            this.$router.push({
+                path: '/home/commend/commendDetail',
+                query: {
+                    id: val.commendId,
+                    loginId:val.loginId
+                }
+            });
+        },
         getList(val){
             commendPage({type:val}).then(response=>{
                 this.httpFile = response.data.data.httpFile;

src/views/HomeView/CommendDetail.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="timeline-container">
+      <div class="timeline-content">
+          <div class="timeline-entry-list">
+              <div class="article">
+                  <div class="article-title">
+                    表彰详情
+                      <!-- {{ data.title }} -->
+                  </div>
+                  <div class="author-info-block">
+                      <div class="meta-box"> 
+                          {{ data.createTime }}
+                      </div>
+                  </div>
+                  <div class="markdown-body" v-html="data.content"></div>
+                  
+              </div>
+          </div>
+          <SiderInfo></SiderInfo>
+      </div>
+  </div>
+</template>
+<script>
+import { commendDetail } from "@/api/allApi";
+import SiderInfo from '@/components/SiderInfo.vue'
+export default{
+components: {
+  SiderInfo
+},
+data() {
+  return {
+      data:{},
+  };
+},
+created(){
+  this.getDataInfo(this.$route.query.id,this.$route.query.loginId);
+},
+methods:{
+      getDataInfo(id,loginId){
+        commendDetail({commendId:id,loginId:loginId}).then(response => {
+                  this.data = response.data.data;
+              }).catch(() => {})
+      },
+},
+}
+</script>
+<style scoped>
+.userInfo{
+  width: 65px;
+  position: absolute;
+  top: 37%;
+  left: 46%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+}
+.timeline-container{
+  margin: 0 auto;
+}
+.timeline-entry-list{
+  margin-right: 17.5rem;
+  border-radius: 2px;
+  width: 720px;
+  position: relative;
+}
+.timeline-entry-list .article{
+  border-radius: 4px 4px 0 0;
+  position: relative;
+  padding-top: 2.667rem;
+  z-index: 1;
+  overflow: hidden;
+  background-color: #fff;
+  padding-left: 2.67rem;
+  padding-right: 2.67rem;
+  margin-bottom: 2rem;
+  box-sizing: border-box;
+}
+.article .article-title{
+  margin: 0 0 1rem;
+  font-size: 1.2rem;
+  font-weight: 600;
+  line-height: 1.31;
+  color: #252933;
+}
+.article .author-info-block{
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.667rem
+}
+.article .markdown-body {
+  overflow: hidden;
+  line-height: 1.75;
+  font-size: 15px;
+  /* background-image: linear-gradient(90deg,rgba(72,42,10,.05) 5%,rgba(72,42,10,0) 0),linear-gradient(1turn,rgba(72,42,10,.05) 5%,rgba(72,42,10,0) 0); */
+  background-size: 20px 20px;
+  background-position: 50%;
+  padding-top: 0!important;
+  min-height: 280px;
+}
+.markdown-body img {
+  max-width: 100%;
+}
+.markdown-body p {
+  color: #412c0c;
+  letter-spacing: 1px;
+  font-weight: 400;
+}
+.author-info-block .meta-box{
+  font-size: 1rem;
+  color: #8a919f;
+  margin-top: 2px;
+  line-height: 22px;
+}
+</style>

src/views/HomeView/Index.vue

@@ -45,7 +45,7 @@
     </div>
 </template>
 <script scoped>
-import { msgList,useInfo } from "@/api/allApi";
+import { msgList } from "@/api/allApi";
 import SiderInfo from '@/components/SiderInfo.vue';
 import { debounce } from '@/utils/index';
 export default{
@@ -59,9 +59,6 @@ export default{
             {
                 url: require('@/assets/image/banner4.png')
             },
-            // {
-            //     url: require('@/assets/image/banner.jpg')
-            // },
         ],
         dataList:[],
         page:1,
@@ -70,14 +67,6 @@ export default{
   },
  created(){
     this.getDataList();
-    // useInfo().then(response=>{
-    //     let lockStatus = response.data.data.lockStatus;
-    //     if(lockStatus==0){
-
-    //     }else{
-    //         this.getDataList();
-    //     }
-    // })
   },
   methods:{
     handleClickMag(id) {