消息通知

src/js/store/index.js

@@ -37,7 +37,7 @@ export default new Vuex.Store({
       menuList: [],
       activeName: "",
     },
-
+    tipsList: [],
     inIframe: window.self !== window.top,
   },
   modules: {

src/views/main-content.vue

@@ -69,18 +69,48 @@
         <router-view />
       </keep-alive>
     </template>
+
+    <Tips v-for="item in $store.state.tipsList" :key="item" @look="handleLook(item)" />
+
+    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
+      <el-form :model="form">
+        <el-form-item label="活动名称" :label-width="formLabelWidth">
+          <el-input v-model="form.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="活动区域" :label-width="formLabelWidth">
+          <el-select v-model="form.region" placeholder="请选择活动区域">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </main>
 </template>
 
 <script>
 import { isURL } from "@/utils/validate";
 import Cookie from "js-cookie";
+import Tips from './tips.vue'
 export default {
+  components: {
+    Tips
+  },
   data() {
     return {
+      dialogFormVisible: false,
       iframeUrl: "",
       token: "",
       customerId: "",
+      form: {
+
+      },
+      formLabelWidth: '120px',
+      tipsList: []
     };
   },
   created() {
@@ -89,6 +119,8 @@ export default {
     // })
     this.token = localStorage.getItem("token");
     this.customerId = localStorage.getItem("customerId");
+    
+    // this.loopTips()
   },
   methods: {
     changeCustomerName(customerName) {
@@ -174,6 +206,28 @@ export default {
       // }, '*')
       iframe.postMessage({ name: "lalalal" }, "*");
     },
+    loopTips() {
+      let id = 1
+      this.timer = setInterval(() => {
+        id = id + 1
+        if (id == 5) clearInterval(this.timer)
+        this.tipsList.push(id)
+        console.log('id------0', id)
+      }, 1000)
+    },
+    handleLook(id) {
+      console.log('look-----', id)
+      this.dialogFormVisible = true
+    }
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.aui-content {
+  position: relative;
+  // height: calc(100vh -50px) !important;
+  overflow: hidden;
+}
+
+</style>

src/views/tips.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="msg-tips" :class="showTips ? 'show-tips' : 'hide-tips'">
+    <el-card class="tips-card">
+      <div class="tips-wr">
+        <div class="tips-wr-title">通知提醒</div>
+        <div class="tips-wr-name">工作日志</div>
+        <div class="tips-wr-desc">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
+        <div class="tips-wr-time">2022-03-15</div>
+        <div class="tips-btn">
+          <el-button type="text" size="small" @click="handleClose">我知道了</el-button>
+          <el-button class="diy-button--search" size="small" @click="handleLook">查看详情</el-button>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      showTips: false
+    }
+  },
+  created() {
+    this.showTips = this.show
+  },
+  methods: {
+    handleClose() {
+      this.showTips = false
+    },
+    handleLook() {
+      this.$emit('look')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.msg-tips {
+  position: fixed;
+  right: 0;
+  z-index: 999;
+  transition: bottom .5s;
+  .tips-card {
+    width: 400px;
+    height: 200px;
+    background: #fff;
+  }
+  .tips-wr-title {
+    font-size: 16px;
+    color: #3E8EF7;
+  }
+  .tips-wr-name {
+    margin-top: 10px;
+    padding-left: 20px;
+    font-weight: bold;
+  }
+  .tips-wr-desc {
+    width: 100%;
+    margin-top: 10px;
+    padding-left: 20px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+
+  }
+  .tips-wr-time {
+    margin-top: 10px;
+    padding-left: 20px;
+  }
+  .tips-btn {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: 10px;
+    padding: 0 20px;
+    text-align: center;
+  }
+}
+.hide-tips {
+  bottom: -220px;
+  
+}
+.show-tips {
+  bottom: 0px;
+}
+</style>