From d351b0f396cc5d5460fb8ea5c5c19fbe66cdf6b7 Mon Sep 17 00:00:00 2001
From: 13176889840 <13176889840@163.com>
Date: Wed, 16 Mar 2022 14:34:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E6=81=AF=E9=80=9A=E7=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/store/index.js      |  2 +-
 src/views/main-content.vue | 54 +++++++++++++++++++++
 src/views/tips.vue         | 97 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 src/views/tips.vue

diff --git a/src/js/store/index.js b/src/js/store/index.js
index 483238a6..a803ca87 100644
--- a/src/js/store/index.js
+++ b/src/js/store/index.js
@@ -37,7 +37,7 @@ export default new Vuex.Store({
       menuList: [],
       activeName: "",
     },
-
+    tipsList: [],
     inIframe: window.self !== window.top,
   },
   modules: {
diff --git a/src/views/main-content.vue b/src/views/main-content.vue
index 08c7e249..5ce37b09 100644
--- a/src/views/main-content.vue
+++ b/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>
diff --git a/src/views/tips.vue b/src/views/tips.vue
new file mode 100644
index 00000000..7e1092b3
--- /dev/null
+++ b/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>
\ No newline at end of file