From 858778383e03574a27e61c693a469db150ea71cb Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Wed, 5 Aug 2020 16:55:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E6=81=AF=E9=80=9A=E7=9F=A5=E8=B0=83?=
 =?UTF-8?q?=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/user/notice/notice.vue    | 148 +++++++++++++----
 src/pages/user/notice/setNotice.vue | 245 ++++++++++++++++++++++++++++
 src/store/index.js                  |   4 +
 3 files changed, 367 insertions(+), 30 deletions(-)
 create mode 100644 src/pages/user/notice/setNotice.vue

diff --git a/src/pages/user/notice/notice.vue b/src/pages/user/notice/notice.vue
index 3f2802e..48b53b4 100644
--- a/src/pages/user/notice/notice.vue
+++ b/src/pages/user/notice/notice.vue
@@ -13,7 +13,7 @@
         <div class="notcie_filter">
           <a :class="{ current: unread }" @click.prevent="filterAction(true)">
             <span class="btn_text">未读消息</span>
-            <span class="width_num" v-text="unreadCount"></span>
+            <span class="width_num" v-text="unreadMessageCount"></span>
           </a>
           <a :class="{ current: !unread }" @click.prevent="filterAction(false)">
             <span class="btn_text">全部消息</span>
@@ -28,12 +28,13 @@
             <img :src="require('../../../assets/imgs/msg_icon_qkxx.png')" />
             <span class="btn_text">清空所有消息</span>
           </a>
-          <a style="cursor: text;">
-            <span style="font-size: 12px;color: #d0d5e7;">|</span>
-          </a>
-          <a @click.prevent="setMessage">
-            <img :src="require('../../../assets/imgs/msg_icon_xxsz.png')" />
-            <span class="btn_text" style="color: #0f2683;">消息设置</span>
+          <span style="font-size: 12px;color: #d0d5e7;">|</span>
+          <a class="set_notice_btn">
+            <span>
+              <img :src="require('../../../assets/imgs/msg_icon_xxsz.png')" />
+              <span class="btn_text" style="color: #0f2683;">消息设置</span>
+            </span>
+            <set-notice></set-notice>
           </a>
         </div>
       </div>
@@ -52,7 +53,10 @@
             <p class="notice_time" v-text="getTime(item.create_time)"></p>
           </div>
           <div class="notice_action">
-            <a @click.prevent="readItem(item)">
+            <a v-if="item.readed === 1" class="disabled">
+              <img :src="require('../../../assets/imgs/msg_icon_yidu.png')" />
+            </a>
+            <a v-else @click.prevent="readItem(item)">
               <img :src="require('../../../assets/imgs/msg_icon_yidu.png')" />
             </a>
             <a @click.prevent="removeItem(item)">
@@ -78,11 +82,14 @@
 
 <script>
 import ListPagination from "@/components/comments-pagination";
+import setNotice from "./setNotice";
 import helper from "@/services/helper.js";
+import { mapState, mapMutations } from "vuex";
 
 export default {
   components: {
     ListPagination,
+    setNotice,
   },
   data: () => ({
     unread: true,
@@ -91,17 +98,38 @@ export default {
     pageSizes: [10, 20, 50],
     pageSize: 10,
     currentPage: 1,
-    unreadCount: 0,
     initDisabled: false,
   }),
+  computed: {
+    ...mapState({
+      unreadMessageCount: "unreadMessageCount",
+    }),
+  },
   methods: {
+    ...mapMutations({
+      setUnreadMessageCount: "setUnreadMessageCount",
+    }),
     initList() {
-      let url = this.unread
-        ? "/apaas/service/v3/mymsg/unread"
-        : "/apaas/service/v3/mymsg/all";
+      let _self = this;
 
       this.initDisabled = true;
 
+      this.getMessage({
+        unread: this.unread,
+        callback(data) {
+          _self.list = data.data || [];
+          _self.listTotal = data.total || 0;
+        },
+        finallyCallback() {
+          _self.initDisabled = false;
+        },
+      });
+    },
+    getMessage({ unread, callback, finallyCallback }) {
+      let url = unread
+        ? "/apaas/service/v3/mymsg/unread"
+        : "/apaas/service/v3/mymsg/all";
+
       this.$http
         .get(url, {
           params: {
@@ -111,21 +139,16 @@ export default {
         })
         .then(({ data }) => {
           if (data.success === 1) {
-            this.list = data.data.data || [];
-            this.listTotal = data.data.total || 0;
-
-            if (this.unread) {
-              this.unreadCount = data.data.total || 0;
+            if (unread) {
+              this.setUnreadMessageCount(data.data.total || 0);
             }
-          } else {
-            console.log("消息列表请求失败");
+            typeof callback === "function" && callback(data.data);
           }
-
-          this.initDisabled = false;
+          typeof finallyCallback === "function" && finallyCallback();
         })
         .catch((error) => {
           console.log(error);
-          this.initDisabled = false;
+          typeof finallyCallback === "function" && finallyCallback();
         });
     },
     getType(type = 0) {
@@ -170,20 +193,59 @@ export default {
       this.currentPage = value;
       this.initList();
     },
+    refreshList() {
+      this.initList(); // 刷新列表
+
+      if (!this.unread) {
+        console.log("刷新未读消息数");
+        this.getMessage({
+          unread: true,
+        });
+      }
+    },
+    readAction(ids) {
+      this.$http
+        .post("/apaas/service/v3/mymsg/setread", ids)
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.$message.success("操作成功");
+            this.refreshList();
+          } else {
+            this.$message.error(data.errMsg || "操作失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("操作失败");
+        });
+    },
+    removeAction(ids) {
+      this.$http
+        .post("/apaas/service/v3/mymsg/clear", ids)
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.$message.success("操作成功");
+            this.refreshList();
+          } else {
+            this.$message.error(data.errMsg || "操作失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("操作失败");
+        });
+    },
     readItem(item) {
-      console.log("readItem", item.id);
+      this.readAction([item.id]);
     },
     removeItem(item) {
-      console.log("removeItem", item.id);
+      this.removeAction([item.id]);
     },
     readAll() {
-      console.log("readAll");
+      this.readAction([]);
     },
     removeAll() {
-      console.log("removeAll");
-    },
-    setMessage() {
-      console.log("setMessage");
+      this.removeAction([]);
     },
   },
   created() {
@@ -202,6 +264,10 @@ export default {
   align-items: stretch;
   overflow: auto;
 }
+.notice_container a.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
 .main_container {
   flex-grow: 1;
   display: flex;
@@ -225,7 +291,7 @@ export default {
   color: #8890a7;
   cursor: pointer;
 }
-.notice_header a + a {
+.notice_header > div > * + * {
   margin-left: 30px;
 }
 .notice_header a > * {
@@ -338,4 +404,26 @@ export default {
 .notice_item:hover .notice_action {
   display: flex;
 }
+.set_notice_btn {
+  position: relative;
+}
+.set_notice_btn::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 100%;
+  width: 100%;
+  height: 30px;
+  z-index: 665;
+}
+.set_notice_btn > .set_notice {
+  position: absolute;
+  top: 40px;
+  right: 0;
+  z-index: 666;
+  display: none;
+}
+.set_notice_btn:hover > .set_notice {
+  display: block;
+}
 </style>
diff --git a/src/pages/user/notice/setNotice.vue b/src/pages/user/notice/setNotice.vue
new file mode 100644
index 0000000..ef5c187
--- /dev/null
+++ b/src/pages/user/notice/setNotice.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="set_notice">
+    <div class="type_item">
+      <p class="item_title">服务推送</p>
+      <p class="item_description">关闭后用户将接收不到服务推送的消息通知</p>
+      <div class="item_action">
+        <a
+          :class="{ on: data.service_message === 1 }"
+          @click="toggleAction('service_message', 1)"
+        >
+          <img
+            class="icon_off"
+            :src="require('../../../assets/imgs/btn_off_hov.png')"
+          />
+          <img
+            class="icon_on"
+            :src="require('../../../assets/imgs/btn_on_hov.png')"
+          />
+        </a>
+      </div>
+    </div>
+    <div class="type_item">
+      <p class="item_title">平台维护</p>
+      <p class="item_description">关闭后用户将接收不到平台维护的消息通知</p>
+      <div class="item_action">
+        <a
+          :class="{ on: data.platform_message === 1 }"
+          @click="toggleAction('platform_message', 2)"
+        >
+          <img
+            class="icon_off"
+            :src="require('../../../assets/imgs/btn_off_hov.png')"
+          />
+          <img
+            class="icon_on"
+            :src="require('../../../assets/imgs/btn_on_hov.png')"
+          />
+        </a>
+      </div>
+    </div>
+    <div class="type_item">
+      <p class="item_title">版本更新</p>
+      <p class="item_description">关闭后用户将接收不到版本更新的消息通知</p>
+      <div class="item_action">
+        <a
+          :class="{ on: data.version_message === 1 }"
+          @click="toggleAction('version_message', 3)"
+        >
+          <img
+            class="icon_off"
+            :src="require('../../../assets/imgs/btn_off_hov.png')"
+          />
+          <img
+            class="icon_on"
+            :src="require('../../../assets/imgs/btn_on_hov.png')"
+          />
+        </a>
+      </div>
+    </div>
+    <div class="type_item">
+      <p class="item_title">系统通知</p>
+      <p class="item_description">关闭后用户将接收不到系统通知的消息通知</p>
+      <div class="item_action">
+        <a
+          :class="{ on: data.system_message === 1 }"
+          @click="toggleAction('system_message', 4)"
+        >
+          <img
+            class="icon_off"
+            :src="require('../../../assets/imgs/btn_off_hov.png')"
+          />
+          <img
+            class="icon_on"
+            :src="require('../../../assets/imgs/btn_on_hov.png')"
+          />
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      data: {
+        service_message: 0,
+        platform_message: 0,
+        version_message: 0,
+        system_message: 0,
+      },
+      disabledstate: {},
+    };
+  },
+  methods: {
+    getOptions() {
+      this.$http.get("/apaas/backmgt/center/messageSets").then(({ data }) => {
+        if (data.success === 1) {
+          let options = data.data;
+
+          this.data.service_message = options.service_message;
+          this.data.platform_message = options.platform_message;
+          this.data.version_message = options.version_message;
+          this.data.system_message = options.system_message;
+        }
+      });
+    },
+    setOption(typeStr, type, state) {
+      this.$set(this.disabledstate, typeStr, true);
+
+      let finallycallback = () => {
+        this.$set(this.disabledstate, typeStr, false);
+        this.getOptions();
+      };
+
+      this.$http
+        .put("/apaas/backmgt/center/messageSets", null, {
+          params: {
+            type,
+            state,
+          },
+        })
+        .then(({ data }) => {
+          if (data.success === 1) {
+            this.$message.success("设置成功");
+          } else {
+            this.$message.error(data.errMsg || "设置失败");
+          }
+          finallycallback();
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$message.error("设置失败");
+          finallycallback();
+        });
+    },
+    toggleAction(typeStr, type) {
+      if (this.disabledstate[typeStr]) {
+        this.$message.warning("你操作的频率过快，请稍等");
+        return;
+      }
+
+      let state = this.data[typeStr] === 1 ? 0 : 1;
+
+      this.$set(this.data, typeStr, state);
+      this.setOption(typeStr, type, state);
+    },
+  },
+  created() {
+    this.getOptions();
+  },
+};
+</script>
+
+<style>
+.set_notice {
+  width: 410px;
+  background-color: #fff;
+  border: 1px solid #e3e5ef;
+  box-sizing: border-box;
+  border-radius: 10px;
+}
+.set_notice::before {
+  content: "";
+  position: absolute;
+  top: -16px;
+  right: 20px;
+  border-top: 0 solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 16px solid #e3e5ef;
+  border-left: 8px solid transparent;
+}
+.set_notice::after {
+  content: "";
+  position: absolute;
+  top: -14px;
+  right: 21px;
+  border-top: 0 solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 14px solid #fff;
+  border-left: 7px solid transparent;
+}
+.type_item {
+  position: relative;
+  padding: 12px 100px 12px 35px;
+}
+.type_item + .type_item {
+  border-top: 1px solid #e3e5ef;
+}
+.type_item p {
+  font-size: 14px;
+  line-height: 24px;
+  color: #242c43;
+}
+.type_item p.item_title {
+  position: relative;
+}
+.type_item p.item_title::before {
+  content: "";
+  position: absolute;
+  top: 8px;
+  left: -18px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+.type_item:nth-child(1) p.item_title::before {
+  background-color: #e8740f;
+}
+.type_item:nth-child(2) p.item_title::before {
+  background-color: #3c61ff;
+}
+.type_item:nth-child(3) p.item_title::before {
+  background-color: #ffa80b;
+}
+.type_item:nth-child(4) p.item_title::before {
+  background-color: #7785ec;
+}
+.type_item p.item_description {
+  color: #a9aec0;
+}
+.item_action {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.item_action a {
+  font-size: 0;
+  cursor: pointer;
+}
+.item_action a .icon_on {
+  display: none;
+}
+.item_action a.on .icon_on {
+  display: inline-block;
+}
+.item_action a.on .icon_off {
+  display: none;
+}
+</style>
diff --git a/src/store/index.js b/src/store/index.js
index dbde787..e67e4a9 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -27,6 +27,7 @@ const store = new Vuex.Store({
       queryType: '',
       id: '',
     }, //智能制图服务详情id
+    unreadMessageCount: 0
   },
   getters: {
     // 1：超管 2：组织管理员 3：普通用户 4：开发者
@@ -72,6 +73,9 @@ const store = new Vuex.Store({
     setZnztDetailsParams(state, newValue) {
       state.znztDetailsParams = newValue;
     },
+    setUnreadMessageCount(state, newValue) {
+      state.unreadMessageCount = newValue;
+    },
   },
 });
 
-- 
2.26.0