最新版公众号前端

src/views/Message.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="home">
+    <div class="bj"></div>
+    <div class="container">
+      <div class="message" v-if="list.length>0">
+        <ul>
+          <li v-for="item in list" :key="item.id">
+            <div class="time">{{item.ctime}}</div>
+            <div class="nr" :class="{'on':item.isYes==2}">
+              <h2>
+                <em></em>
+                {{item.title}}
+                <p>{{item.body}}</p>
+              </h2>
+            </div>
+            <!-- <div class="nr on" >
+              <h2>
+                <em></em>
+                {{item.title}}
+                <p>{{item.body}}</p>
+              </h2>
+            </div>-->
+          </li>
+        </ul>
+      </div>
+      <van-empty description="暂无消息" v-else style="padding-top:90px"/>
+    </div>
+    <dh />
+  </div>
+</template>
+
+
+<script>
+// @ is an alias to /src
+import { apiMsgCenter, apiMsgRead } from "@/request/api.js";
+import { Empty } from "vant";
+import dh from "@/components/nav.vue";
+export default {
+  components: {
+    dh
+  },
+  data() {
+    return {
+      title: "",
+      list: []
+    };
+  },
+  mounted() {
+    // console.log(this.$route.meta.title);
+    this.title = this.$route.meta.title;
+    apiMsgCenter().then(res => {
+      this.list = res.data;
+      this.setRead();
+    });
+  },
+  methods: {
+    setRead() {
+      apiMsgRead().then(res => {});
+    }
+  }
+};
+</script>
+
+<style>
+.custom-image .van-empty__image {
+  width: 90px;
+  height: 90px;
+}
+</style>
+<style scoped lang="scss">
+.bj {
+  background: #f5f5f5;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  z-index: -1;
+}
+.message {
+  padding: 30px 0px;
+  ul li {
+    margin-bottom: 30px;
+    .time {
+      text-align: center;
+      padding-bottom: 15px;
+    }
+    .nr {
+      background: #fff;
+      padding: 20px;
+      border-radius: 10px;
+      h2 {
+        font-size: 30px;
+        padding-bottom: 10px;
+        em {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: #ee0a24;
+          margin-right: 10px;
+        }
+        p {
+          color: #888;
+          font-size: 24px;
+          padding: 5px 0px;
+          padding-top: 10px;
+        }
+      }
+      h3 {
+        border-top: 1px solid #f5f5f5;
+        padding-top: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 26px;
+      }
+    }
+    .nr.on em {
+      display: none;
+    }
+  }
+}
+</style>