[add] message system

src/api/user.js

@@ -357,10 +357,28 @@ export function getCodeApi() {
   return request.get("verify_code", {}, { login: false });
 }
 
+/**
+ * 获取 VIP 信息
+ */
 export function getVIP() {
   return request.get("user/vip/info");
 }
-
+/**
+ * 领取佣金
+ */
 export function drawVIP() {
   return request.post("user/vip/withdraw");
 }
+/**
+ * 获取邮件列表
+ */
+export function getMails() {
+  return request.get("user/mails");
+}
+/**
+ * 操作邮件
+ * 0 已读, 1 删除
+ */
+export function opMails(ids, op) {
+  return request.post("user/mails_oper", { ids: ids, oper: op });
+}

src/assets/addfont/addfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1421146",
+      "name": "已读",
+      "font_class": "ryes",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "1421713",
+      "name": "未读",
+      "font_class": "weidu",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
     {
       "icon_id": "17674910",
       "name": "Icon-vip",

src/main.js

@@ -20,6 +20,31 @@ import "@assets/css/style.css";
 import { isWeixin, parseQuery } from "@utils";
 import vueLazyLoad from "vue-lazyload";
 
+Date.prototype.Format = function(fmt) {
+  //author: meizz
+  var o = {
+    "M+": this.getMonth() + 1, //月份
+    "d+": this.getDate(), //日
+    "h+": this.getHours(), //小时
+    "m+": this.getMinutes(), //分
+    "s+": this.getSeconds(), //秒
+    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
+    S: this.getMilliseconds() //毫秒
+  };
+  if (/(y+)/.test(fmt))
+    fmt = fmt.replace(
+      RegExp.$1,
+      (this.getFullYear() + "").substr(4 - RegExp.$1.length)
+    );
+  for (var k in o)
+    if (new RegExp("(" + k + ")").test(fmt))
+      fmt = fmt.replace(
+        RegExp.$1,
+        RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
+      );
+  return fmt;
+};
+
 Vue.use(vueLazyLoad, {
   preload: 1.3, //加载高度比。
   loading: require("@assets/images/noPictrue.png"), //加载时的过渡图片

src/router/module/activity.js

@@ -49,12 +49,24 @@ export default [
     path: "/activity/bargain/record",
     name: "Message",
     meta: {
+      idx: 6,
       title: "消息中心",
       keepAlive: true,
       auth: true
     },
     component: () => import("@views/user/Message.vue")
   },
+  {
+    path: "/message/detail/:id",
+    name: "MessageDetail",
+    meta: {
+      idx: 7,
+      title: "消息详情",
+      keepAlive: true,
+      auth: true
+    },
+    component: () => import("@views/user/MessageDetail.vue")
+  },
   {
     path: "/activity/group",
     name: "GoodsGroup",

src/views/user/Message.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="Message">
+    <NavBar></NavBar>
+    <div v-if="list.length > 0">
+      <div
+        class="list"
+        v-for="item in list"
+        :key="item.id"
+        @click="$router.push({ name: 'MessageDetail', params: { data: item } })"
+      >
+        <div class="item">
+          <div class="top">
+            <div class="title">{{ item.subject }}</div>
+            <div :class="item.read == 0 ? 'on' : 'off'">
+              <span
+                class="addfont"
+                :class="item.read == 0 ? 'icon-weidu' : 'icon-ryes'"
+              ></span>
+            </div>
+          </div>
+          <div class="body">{{ item.desc }}</div>
+          <div class="bottom">
+            <div class="date">
+              {{ new Date(item.add_time * 1000).Format("yyyy-MM-dd hh:mm:ss") }}
+            </div>
+            <div class="sender">{{ item.sender }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="nodata">
+      暂时没有数据
+    </div>
+  </div>
+</template>
+<script>
+import { getMails, opMails } from "@api/user";
+import NavBar from "@components/NavBar";
+
+export default {
+  name: "Message",
+  components: {
+    NavBar
+  },
+  data() {
+    return {
+      list: [],
+      productId: 0,
+      orderId: ""
+    };
+  },
+  watch: {
+    $route(n) {
+      if (n.name === "Message") {
+        this.getList();
+      }
+    }
+  },
+  methods: {
+    getList() {
+      var that = this;
+      getMails()
+        .then(res => {
+          that.list = res.data.sort(function(a, b) {
+            return a.read > b.read;
+          });
+        })
+        .catch(err => {
+          that.$dialog.error(err.msg);
+        });
+    }
+  },
+  mounted() {
+    this.getList();
+  }
+};
+</script>
+<style scoped>
+.Message .list {
+  padding: 0rem;
+}
+.Message .nodata {
+  text-align: center;
+  color: gray;
+  padding-top: 1rem;
+}
+.Message .list .item {
+  margin: 0.3rem 0.1rem;
+  padding: 0.2rem;
+  border-radius: 0.2rem;
+  background-color: #fff;
+}
+.Message .list .item .top {
+  display: flex;
+}
+.Message .list .item .top .addfont {
+  font-size: 0.6rem;
+}
+.Message .list .item .top .on .addfont {
+  color: #ff3366;
+}
+.Message .list .item .top .off .addfont {
+  color: grey;
+}
+.Message .list .item .top .title {
+  font-weight: 600;
+  font-size: 0.3rem;
+  line-height: 0.4rem;
+  width: 7rem;
+}
+.Message .list .item .body {
+  line-height: 0.6rem;
+}
+.Message .list .item .bottom {
+  display: flex;
+}
+.Message .list .item .bottom .date {
+  width: 70%;
+  color: gray;
+}
+.Message .list .item .bottom .sender {
+  width: 30%;
+  font-weight: bold;
+  text-align: center;
+}
+</style>

src/views/user/MessageDetail.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="MessageDetail">
+    <NavBar></NavBar>
+    <div class="page">
+      <div class="title">{{ data.subject }}</div>
+      <div class="sub">
+        <div class="date">
+          <div>
+            开始日期:
+            {{ new Date(data.add_time * 1000).Format("yyyy-MM-dd hh:mm:ss") }}
+          </div>
+          <div v-if="data.expire_at * 1000 > 0">
+            截止日期:
+            {{ new Date(data.expire_at * 1000).Format("yyyy-MM-dd hh:mm:ss") }}
+          </div>
+        </div>
+        <div :class="data.expire_at * 1000 > 0 ? 'sender_btm' : 'sender'">
+          {{ data.sender }}
+        </div>
+      </div>
+      <div v-html="data.body" class="content"></div>
+    </div>
+    <div class="footer bg-color-red" @click="delClick">
+      <div>删除</div>
+    </div>
+  </div>
+</template>
+<script>
+import { opMails } from "@api/user";
+import NavBar from "@components/NavBar";
+
+export default {
+  name: "MessageDetail",
+  components: {
+    NavBar
+  },
+  data() {
+    return {
+      data: {}
+    };
+  },
+  watch: {
+    $route(n) {
+      if (n.name === "MessageDetail") {
+        // this.getList();
+      }
+    }
+  },
+  methods: {
+    opMails(op) {
+      var that = this;
+      opMails([that.data.id], op)
+        .then(res => {})
+        .catch(err => {
+          that.$dialog.error(err.msg);
+        });
+    },
+    delClick() {
+      var that = this;
+      opMails([that.data.id], 1)
+        .then(res => {
+          that.$dialog.message("删除成功!");
+          setTimeout(() => {
+            that.$router.back();
+          }, 1);
+        })
+        .catch(err => {
+          that.$dialog.error(err.msg);
+        });
+    }
+  },
+  mounted() {
+    this.data = this.$route.params.data;
+    this.opMails(0);
+  }
+};
+</script>
+<style>
+.MessageDetail .page {
+  margin: 0.2rem;
+  text-align: center;
+}
+.MessageDetail .page .title {
+  font-size: 0.4rem;
+  font-weight: bold;
+  padding-bottom: 0.2rem;
+}
+.MessageDetail .page .sub {
+  display: flex;
+  padding-bottom: 0.1rem;
+}
+.MessageDetail .page .sub .sender {
+  width: 30%;
+}
+.MessageDetail .page .sub .sender_btm {
+  width: 30%;
+  padding-top: 0.4rem;
+}
+.MessageDetail .page .sub .date {
+  text-align: left;
+  color: gray;
+  padding-left: 0.3rem;
+  width: 70%;
+  padding-bottom: 0.2rem;
+}
+.MessageDetail .page .content {
+}
+.MessageDetail .footer {
+  position: fixed;
+  width: 100%;
+  color: #fff;
+  height: 1rem;
+  text-align: center;
+  bottom: 0rem;
+  line-height: 1rem;
+  font-size: 0.3rem;
+}
+</style>

src/views/user/User.vue

@@ -172,6 +172,11 @@
               v-if="item.wap_url"
             >
               <div class="pictrue">
+                <span
+                  v-if="item.name == '我的消息' && userInfo.mails.unread > 0"
+                  class="order-status-num"
+                  >{{ userInfo.mails.unread }}</span
+                >
                 <img :src="item.pic" />
               </div>
               <div>{{ item.name }}</div>