日志

src/layouts/header/index.vue

@@ -25,9 +25,32 @@
             </div>
         </div>
 
-        <el-dialog title="更新日志" :visible.sync="logVisible" :close-on-click-modal="false" custom-class="user-dia" append-to-body width="1000px">
-            <log></log>
-        </el-dialog>
+        <div class="log-mask" v-if="logVisible"></div>
+        <div class="log-dia" v-if="logVisible">
+          <img class="bg1" src="@/assets/img/log-bg.png" alt="">
+          <img class="bg2" src="@/assets/img/log-bg1.png" alt="">
+          <p class="log-title">更新日志</p>
+          <div class="log-wrap">
+            <div class="logs">
+              <div class="item" v-for="(item, i) in list" :key="i" v-show="!i || (i && logAll)">
+                <h6>{{ item.versionName }}</h6>
+                <img v-if="item.coverUrl" :src="item.coverUrl" alt="" class="cover">
+                <ul class="detail">
+                  <li v-for="(item, i) in item.logContents" :key="i">
+                    <p class="name"><img :src="require('@/assets/img/' + funcList.find(e => e.id === item.type).icon + '.png')" alt=""> {{ funcList.find(e => e.id === item.type).name }}</p>
+                    <div class="val">
+                      <p v-for="(item, i) in item.content" :key="i">{{ i + 1 }}、{{ item }}</p>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="more-wrap">
+              <p>更多功能介绍，点击 <span class="more" @click="logAll = !logAll">了解更多</span></p>
+              <el-button class="know" type="primary" size="small" @click="logVisible = false">知道了</el-button>
+            </div>
+          </div>
+        </div>
     </div>
 </template>
 <script>
@@ -41,7 +64,26 @@ export default {
         return {
             token: util.local.get(Setting.tokenKey),
             isIndex: Setting.whiteList.find(e => e === this.$route.path), // 是否是在白名单页面
-            logVisible: false
+            logVisible: false,
+            list: [],
+            logAll: false,
+            funcList: [
+                {
+                    id: 0,
+                    name: '新功能',
+                    icon: 'func'
+                },
+                {
+                    id: 1,
+                    name: '修复',
+                    icon: 'bug'
+                },
+                {
+                    id: 2,
+                    name: '优化',
+                    icon: 'optimize'
+                }
+            ]
         };
     },
     components: {
@@ -67,11 +109,25 @@ export default {
         ...mapActions("user", [
             "logout", "setTitle", "setLogoUrl", "setAvatar", "setUserName"
         ]),
+        // 获取日志列表
+        getLog() {
+          this.$get(`${this.api.platformLogList}?platformId=${Setting.platformId}&port=1&versionName=`).then(({ logList }) => {
+            logList.map((e, i) => {
+              e.logContents.map(n => {
+                n.content = n.content.split('\n')
+              })
+            })
+            this.list = logList
+          }).catch(res => {})
+        },
         // 获取日志状态
         getLogStatus() {
             this.$get(this.api.logNotification).then(({ notification }) => {
               this.SET_LOG() // 把查看日志状态设置为true
-              if (notification) this.logVisible = true // 返回true，则显示日志弹框
+              if (notification) {
+                this.logVisible = true // 返回true，则显示日志弹框
+                this.getLog()
+              }
             }).catch(res => {})
         },
         getSystemDetail () {
@@ -207,67 +263,98 @@ $height: 64px;
         }
     }
 }
-/deep/.timeline {
-    display: flex;
-    flex-direction: column;
-    .item {
-        display: flex;
-        justify-content: center;
-        margin-bottom: 30px;
-    }
-    .date {
-        width: 350px;
-        margin-right: 50px;
-        text-align: right;
-        color: #6a6a6a;
-        font-size: 14px;
-    }
-    .right {
-        flex: 1;
-    }
-    h6 {
-        margin-bottom: 15px;
-        font-size: 18px;
-        color: #333;
-        line-height: 1;
+.log-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-color: rgba(0, 0, 0, .4);
+}
+/deep/.log-dia {
+  position: absolute;
+  top: calc((100vh - 500px) / 2);
+  left: 50%;
+  width: 500px;
+  transform: translateX(-50%);
+  background-color: #fff;
+  border-radius: 6px;
+  .bg1 {
+    width: 100%;
+    height: 200px;
+  }
+  .bg2 {
+    position: absolute;
+    top: -150px;
+    left: 0;
+    max-width: 100%;
+  }
+  .log-title {
+    position: absolute;
+    top: 90px;
+    left: 130px;
+    font-size: 40px;
+    color: #fff;
+    font-weight: 600;
+  }
+  .log-wrap {
+    padding-bottom: 30px;
+  }
+  .logs {
+    max-height: 300px;
+    padding: 0 60px;
+    margin: 30px 0;
+    overflow: auto;
+  }
+  h6 {
+    margin-bottom: 15px;
+    font-size: 18px;
+    color: #333;
+    line-height: 1;
+  }
+  .more-wrap {
+    padding: 0 60px;
+    font-size: 14px;
+    color: #333;
+  }
+  .more {
+    font-size: 14px;
+    color: $main-color;
+    cursor: pointer;
+    &:hover {
+      opacity: .9;
     }
-    .cover {
-        max-width: 400px;
-        margin: 10px 0 20px;
+  }
+  .know {
+    margin-top: 15px;
+  }
+  .cover {
+      max-width: 400px;
+      margin: 10px 0 20px;
+  }
+  .detail {
+    li {
+        margin-bottom: 20px;
     }
-    .detail {
-        li {
-            margin-bottom: 20px;
-        }
-        .name {
-            display: flex;
-            align-items: center;
-            margin-bottom: 5px;
-            font-size: 14px;
-            img {
-                width: 20px;
-                margin-right: 8px;
-            }
+    .name {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+        font-size: 14px;
+        img {
+            width: 20px;
+            margin-right: 8px;
         }
-        .val {
-            font-size: 15px;
-            line-height: 1.8;
-            white-space: pre-wrap;
-            p {
-              position: relative;
-              color: #505050;
-              &:before {
-                content: '';
-                display: inline-block;
-                width: 5px;
-                height: 5px;
-                margin: 0 15px 0 8px;
-                vertical-align: middle;
-                border-radius: 20px;
-                background-color: $main-color;
-              }
-            }
+    }
+    .val {
+        font-size: 15px;
+        line-height: 1.8;
+        white-space: pre-wrap;
+        p {
+          position: relative;
+          color: #505050;
         }
     }
+  }
 }
 </style>