From 0ddc5527b866de3983e195d23817b88a4f506fde Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Wed, 28 Jul 2021 01:16:52 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=82=E7=9C=8B=E5=8E=86=E5=8F=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dialog/ConfirmDialog.vue       | 47 ++++++++++--
 src/components/dialog/FadeDialog.vue          | 36 ++++++++++
 src/components/dialog/SimpleConfirmDialog.vue | 72 +++++++++++++++++++
 src/components/slide/SlideItem.vue            |  3 +-
 src/pages/me/rightMenu/LookHistory.vue        | 43 +++++++++--
 src/pages/me/userinfo/AddSchool.vue           |  2 +-
 src/pages/me/userinfo/EditUserInfoItem.vue    |  2 +-
 src/pages/message/SetRemark.vue               |  2 +-
 src/utils/global-methods.js                   | 35 ++++++++-
 9 files changed, 224 insertions(+), 18 deletions(-)
 create mode 100644 src/components/dialog/FadeDialog.vue
 create mode 100644 src/components/dialog/SimpleConfirmDialog.vue

diff --git a/src/components/dialog/ConfirmDialog.vue b/src/components/dialog/ConfirmDialog.vue
index 6173e1a..42dd472 100644
--- a/src/components/dialog/ConfirmDialog.vue
+++ b/src/components/dialog/ConfirmDialog.vue
@@ -1,10 +1,13 @@
 <template>
   <div class="ConfirmDialog " @click="$emit('dismiss')">
     <div class="content" @click.stop="null">
-      <div class="item">{{ title }}</div>
+      <div class="body">
+        <div class="title">{{ title }}</div>
+        <div class="subtitle" v-if="subtitle">{{ subtitle }}</div>
+      </div>
       <div class="footer">
-        <div class="cancel" @click.stop="$emit('cancel')">放弃</div>
-        <div class="ok" @click.stop="$emit('ok')">保存</div>
+        <div class="cancel" @click.stop="$emit('cancel')">取消</div>
+        <div class="ok" @click.stop="$emit('ok')">确定</div>
       </div>
     </div>
   </div>
@@ -22,6 +25,12 @@ export default {
       default() {
         return ''
       }
+    },
+    subtitle: {
+      type: String,
+      default() {
+        return ''
+      }
     }
   },
   data() {
@@ -31,6 +40,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import "../../assets/scss/index";
 
 .ConfirmDialog {
   z-index: 10;
@@ -51,16 +61,41 @@ export default {
     width: 80%;
     border-radius: 2px;
     box-sizing: border-box;
-    padding: 1.5rem 2rem;
     font-size: 1.5rem;
+    text-align: center;
+
+    .body {
+      padding: 1rem;
+
+      .title {
+        margin-top: 1rem;
+        font-size: 1.5rem;
+      }
+
+      .subtitle {
+        margin-top: 1rem;
+        color: $second-text-color;
+        font-size: 1.2rem;
+      }
+    }
 
     .footer {
+      height: 4rem;
       margin-top: 2rem;
       display: flex;
-      justify-content: flex-end;
+      border-top: 1px solid whitesmoke;
+      font-size: 1.4rem;
+
+      .cancel, .ok {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 49%;
+      }
 
       .cancel {
-        margin-right: 2.5rem;
+        color: $second-text-color;
+        border-right: 1px solid whitesmoke;
       }
 
     }
diff --git a/src/components/dialog/FadeDialog.vue b/src/components/dialog/FadeDialog.vue
new file mode 100644
index 0000000..5448506
--- /dev/null
+++ b/src/components/dialog/FadeDialog.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="FadeDialog">
+     <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "FadeDialog",
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/scss/index";
+
+.FadeDialog {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .content {
+    padding-top: 6rem;
+  }
+}
+</style>
diff --git a/src/components/dialog/SimpleConfirmDialog.vue b/src/components/dialog/SimpleConfirmDialog.vue
new file mode 100644
index 0000000..6173e1a
--- /dev/null
+++ b/src/components/dialog/SimpleConfirmDialog.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="ConfirmDialog " @click="$emit('dismiss')">
+    <div class="content" @click.stop="null">
+      <div class="item">{{ title }}</div>
+      <div class="footer">
+        <div class="cancel" @click.stop="$emit('cancel')">放弃</div>
+        <div class="ok" @click.stop="$emit('ok')">保存</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "ConfirmDialog",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default() {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.ConfirmDialog {
+  z-index: 10;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #000000bb;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: black;
+
+
+  .content {
+    background: white;
+    width: 80%;
+    border-radius: 2px;
+    box-sizing: border-box;
+    padding: 1.5rem 2rem;
+    font-size: 1.5rem;
+
+    .footer {
+      margin-top: 2rem;
+      display: flex;
+      justify-content: flex-end;
+
+      .cancel {
+        margin-right: 2.5rem;
+      }
+
+    }
+
+  }
+
+
+}
+</style>
diff --git a/src/components/slide/SlideItem.vue b/src/components/slide/SlideItem.vue
index 1d56688..51ce8f7 100644
--- a/src/components/slide/SlideItem.vue
+++ b/src/components/slide/SlideItem.vue
@@ -13,7 +13,8 @@ export default {
 <style scoped lang="scss">
 .base-slide-item {
   min-width: 100vw;
-  min-height: 100vh;
+  //min-height: 100vh;
+  min-height: 100%;
   position: relative;
 }
 
diff --git a/src/pages/me/rightMenu/LookHistory.vue b/src/pages/me/rightMenu/LookHistory.vue
index 331519b..cbf9b94 100644
--- a/src/pages/me/rightMenu/LookHistory.vue
+++ b/src/pages/me/rightMenu/LookHistory.vue
@@ -15,12 +15,22 @@
           :tabTexts="['熟人列表','发现熟人']"
           v-model:active-index="currentSlideItemIndex">
       </Indicator>
-      <SlideRowList v-model:active-index="currentSlideItemIndex" style="height: calc(100vh - 6rem);">
+      <SlideRowList v-model:active-index="currentSlideItemIndex" style="height: calc(100vh - 12rem);">
         <SlideItem class="tab1">
-          <Posters></Posters>
-          <NoMore></NoMore>
+
+          <Posters :list="list" v-if="list" style="overflow:auto;"></Posters>
+          <div class="empty" v-else>
+            <img src="../../../assets/img/icon/head-image.jpeg" alt="">
+            <div class="title">暂无内容</div>
+            <div class="subtitle">暂无观看历史记录</div>
+          </div>
         </SlideItem>
         <SlideItem class="tab2">
+          <div class="empty">
+            <img src="../../../assets/img/icon/head-image.jpeg" alt="">
+            <div class="title">暂无内容</div>
+            <div class="subtitle">暂无观影历史记录</div>
+          </div>
         </SlideItem>
       </SlideRowList>
     </div>
@@ -36,7 +46,8 @@ export default {
   },
   data() {
     return {
-      currentSlideItemIndex: 0
+      currentSlideItemIndex: 0,
+      list: 20,
     }
   },
   computed: {},
@@ -44,8 +55,9 @@ export default {
   },
   methods: {
     clear() {
-      this.$showConfirmDialog('确定清空？',()=>{
-
+      this.$showConfirmDialog('确定清空？', '清空后，以往观看记录不再展示', () => {
+        this.list = 0
+        console.log(this.list)
       })
     }
   }
@@ -67,6 +79,25 @@ export default {
 
   .content {
     padding-top: 6rem;
+
+    .empty {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+
+      .title {
+        margin-top: 1rem;
+        font-size: 1.5rem;
+      }
+
+      .subtitle {
+        font-size: 1.3rem;
+        margin-top: 1rem;
+        color: $second-text-color;
+      }
+    }
   }
 }
 </style>
diff --git a/src/pages/me/userinfo/AddSchool.vue b/src/pages/me/userinfo/AddSchool.vue
index 45e00ca..c6e9781 100644
--- a/src/pages/me/userinfo/AddSchool.vue
+++ b/src/pages/me/userinfo/AddSchool.vue
@@ -137,7 +137,7 @@ export default {
     },
     back() {
       if (this.isChanged) {
-        this.$showConfirmDialog('学校信息30天内只允许修改一次，是否保存修改', this.save, () => {
+        this.$showSimpleConfirmDialog('学校信息30天内只允许修改一次，是否保存修改', this.save, () => {
           localStorage.clear()
           this.$back()
         })
diff --git a/src/pages/me/userinfo/EditUserInfoItem.vue b/src/pages/me/userinfo/EditUserInfoItem.vue
index 3a39501..71bd39a 100644
--- a/src/pages/me/userinfo/EditUserInfoItem.vue
+++ b/src/pages/me/userinfo/EditUserInfoItem.vue
@@ -78,7 +78,7 @@ export default {
   methods: {
     back() {
       if (this.isChanged) {
-        this.$showConfirmDialog('是否保存修改', this.save, this.$back)
+        this.$showSimpleConfirmDialog('是否保存修改', this.save, this.$back)
       } else {
         this.$back()
       }
diff --git a/src/pages/message/SetRemark.vue b/src/pages/message/SetRemark.vue
index 838fc1a..8e85688 100644
--- a/src/pages/message/SetRemark.vue
+++ b/src/pages/message/SetRemark.vue
@@ -44,7 +44,7 @@ export default {
   methods: {
     back() {
       if (this.isChanged) {
-        this.$showConfirmDialog('是否保存修改', this.save, this.$back)
+        this.$showSimpleConfirmDialog('是否保存修改', this.save, this.$back)
       } else {
         this.$back()
       }
diff --git a/src/utils/global-methods.js b/src/utils/global-methods.js
index 4c1d198..ec50b61 100644
--- a/src/utils/global-methods.js
+++ b/src/utils/global-methods.js
@@ -1,5 +1,6 @@
 import * as Vue from "vue";
 import SelectDialog from "../components/dialog/SelectDialog";
+import SimpleConfirmDialog from "../components/dialog/SimpleConfirmDialog";
 import ConfirmDialog from "../components/dialog/ConfirmDialog";
 import Loading from "../components/Loading";
 
@@ -41,7 +42,7 @@ export default {
     document.body.append(parent)
     app.mount(parent)
   },
-  $showConfirmDialog(title, okCb, cancelCb) {
+  $showSimpleConfirmDialog(title, okCb, cancelCb) {
     let remove = () => {
       let parent = document.querySelector('.dialog-ctn')
       parent.classList.replace('fade-in', 'fade-out')
@@ -59,7 +60,37 @@ export default {
     }
     const app = Vue.createApp({
       render() {
-        return <ConfirmDialog onCancel={tempCancelCb} onDismiss={remove} title={title} onOk={tempOkCb}/>
+        return <SimpleConfirmDialog onCancel={tempCancelCb} onDismiss={remove} title={title} onOk={tempOkCb}/>
+      },
+    })
+    let parent = document.createElement('div')
+    parent.classList.add(...['dialog-ctn', 'fade-in'])
+    document.body.append(parent)
+    app.mount(parent)
+  },
+  $showConfirmDialog(title, subtitle, okCb, cancelCb) {
+    let remove = () => {
+      let parent = document.querySelector('.dialog-ctn')
+      parent.classList.replace('fade-in', 'fade-out')
+      setTimeout(() => {
+        parent.remove()
+      }, 300)
+    }
+    let tempOkCb = e => {
+      remove()
+      okCb(e)
+    }
+    let tempCancelCb = e => {
+      remove()
+      cancelCb(e)
+    }
+    const app = Vue.createApp({
+      render() {
+        return <ConfirmDialog onCancel={tempCancelCb}
+                              onDismiss={remove}
+                              title={title}
+                              subtitle={subtitle}
+                              onOk={tempOkCb}/>
       },
     })
     let parent = document.createElement('div')