From 2414d94600fa4da3b08e2b8515419ec5116ef9d9 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Wed, 28 Jul 2021 22:58:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=AA=E6=88=90=E5=B9=B4=E4=BF=9D=E6=8A=A4?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   3 +
 src/assets/scss/custom.scss                   |  92 +++++++++++++--
 src/components/dialog/ConfirmDialog.vue       |   2 +-
 src/main.js                                   |  10 ++
 src/pages/me/Me.vue                           |   4 +-
 src/pages/me/rightMenu/LookHistory.vue        |   9 +-
 .../MinorProtection/DetailSetting.vue         | 107 ++++++++++++++++++
 .../me/rightMenu/MinorProtection/Index.vue    |  63 +++++++++++
 .../rightMenu/MinorProtection/TriggerTime.vue |  74 ++++++++++++
 src/pages/me/userinfo/EditUserInfo.vue        |  25 ----
 src/router/index.js                           |   6 +
 src/utils/enums.js                            |   6 +
 12 files changed, 358 insertions(+), 43 deletions(-)
 create mode 100644 src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
 create mode 100644 src/pages/me/rightMenu/MinorProtection/Index.vue
 create mode 100644 src/pages/me/rightMenu/MinorProtection/TriggerTime.vue

diff --git a/src/App.vue b/src/App.vue
index f4ef6a4..3927a5e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,6 +65,9 @@ export default {
         '/chat-detail',
         '/set-remark',
         '/me/right-menu/look-history',
+        '/me/right-menu/minor-protection/index',
+        '/me/right-menu/minor-protection/detail-setting',
+        '/me/right-menu/minor-protection/trigger-time',
         '',
       ];
       const toDepth = routeDeep.indexOf(to.path)
diff --git a/src/assets/scss/custom.scss b/src/assets/scss/custom.scss
index bfb111f..bd4edb2 100644
--- a/src/assets/scss/custom.scss
+++ b/src/assets/scss/custom.scss
@@ -1,14 +1,86 @@
-.op0{
-    opacity: 0;
+@import "color";
+
+.op0 {
+  opacity: 0;
 }
+
 .global-notice {
-    position: fixed;
+  position: fixed;
+  color: white;
+  background: black;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: .7rem 1rem;
+  border-radius: 1px;
+  font-size: 1.4rem;
+}
+
+.row {
+  padding: 0 1.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 5rem;
+  font-size: 1.4rem;
+
+  &.no-active {
+    &:active {
+      background: $main-bg;
+    }
+  }
+
+  &:active {
+    background: $active-main-bg;
+  }
+
+  .left {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     color: white;
-    background: black;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    padding: .7rem 1rem;
-    border-radius: 1px;
-    font-size: 1.4rem;
+
+    img {
+      margin-right: 1rem;
+      width: 1.5rem;
+    }
+  }
+
+  .right {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: $second-text-color;
+
+    img {
+      margin-left: 1rem;
+      width: 1.5rem;
+    }
+  }
+}
+
+.button {
+  color: white;
+  height: 4rem;
+  line-height: 4rem;
+  text-align: center;
+  border-radius: .3rem;
+  //width: 100%;
+  font-size: 1.4rem;
+
+  &.primary {
+    background: $primary-btn-color;
+
+    &:active {
+      background: $disable-primary-btn-color;
+    }
+  }
+
+  &.dark {
+    background: $second-btn-color;
+
+    &:active {
+      background: $second-btn-color-tran;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/dialog/ConfirmDialog.vue b/src/components/dialog/ConfirmDialog.vue
index 42dd472..824ea3e 100644
--- a/src/components/dialog/ConfirmDialog.vue
+++ b/src/components/dialog/ConfirmDialog.vue
@@ -75,7 +75,7 @@ export default {
       .subtitle {
         margin-top: 1rem;
         color: $second-text-color;
-        font-size: 1.2rem;
+        font-size: 1.3rem;
       }
     }
 
diff --git a/src/main.js b/src/main.js
index 4252b8f..ae3ebe6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,6 +38,16 @@ app.component('Video1', Video)
 app.component('Footer', Footer)
 app.component('Mask', Mask)
 app.component('NoMore', NoMore)
+app.component('back', {
+  data(){
+    return{
+      src:require('./assets/img/icon/back.png')
+    }
+  },
+  render() {
+    return <img src={this.src} alt=""/>
+  },
+})
 app.mixin(mixin)
 app.use(router)
 app.use(store)
diff --git a/src/pages/me/Me.vue b/src/pages/me/Me.vue
index 3939a20..47c09c5 100644
--- a/src/pages/me/Me.vue
+++ b/src/pages/me/Me.vue
@@ -113,7 +113,7 @@
               <img src="../../assets/img/icon/card-gray.png" alt="">
               <span>我的二维码</span>
             </div>
-            <div class="li" @click="$nav('MyCard')">
+            <div class="li" @click="$nav('')">
               <img src="../../assets/img/icon/card-gray.png" alt="">
               <span>创作者服务中心</span>
             </div>
@@ -128,7 +128,7 @@
               <img src="../../assets/img/icon/card-gray.png" alt="">
               <span>抖音公益</span>
             </div>
-            <div class="li" @click="$nav('MyCard')">
+            <div class="li" @click="$nav('/me/right-menu/minor-protection/index')">
               <img src="../../assets/img/icon/umbrella-gray.png" alt="">
               <span>未成年保护工具</span>
             </div>
diff --git a/src/pages/me/rightMenu/LookHistory.vue b/src/pages/me/rightMenu/LookHistory.vue
index cbf9b94..cbb192b 100644
--- a/src/pages/me/rightMenu/LookHistory.vue
+++ b/src/pages/me/rightMenu/LookHistory.vue
@@ -4,7 +4,7 @@
       <template v-slot:center>
         <span class="f16">观看历史</span>
       </template>
-      <template v-slot:right>
+      <template v-slot:right v-if="list">
         <span class="second-text-color f13" @click="clear">清空</span>
       </template>
     </BaseHeader>
@@ -16,9 +16,8 @@
           v-model:active-index="currentSlideItemIndex">
       </Indicator>
       <SlideRowList v-model:active-index="currentSlideItemIndex" style="height: calc(100vh - 12rem);">
-        <SlideItem class="tab1">
-
-          <Posters :list="list" v-if="list" style="overflow:auto;"></Posters>
+        <SlideItem class="tab1"  style="overflow:auto;">
+          <Posters :list="list" v-if="list"></Posters>
           <div class="empty" v-else>
             <img src="../../../assets/img/icon/head-image.jpeg" alt="">
             <div class="title">暂无内容</div>
@@ -47,7 +46,7 @@ export default {
   data() {
     return {
       currentSlideItemIndex: 0,
-      list: 20,
+      list: 2,
     }
   },
   computed: {},
diff --git a/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue b/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
new file mode 100644
index 0000000..659e68f
--- /dev/null
+++ b/src/pages/me/rightMenu/MinorProtection/DetailSetting.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="DetailSetting">
+    <BaseHeader/>
+    <div class="content" v-if="type === 0">
+      <div class="notice">
+        <img src="../../../../assets/img/icon/head-image.jpeg" alt="">
+        <span>时间锁已关闭</span>
+      </div>
+      <div class="row mt1r no-active">
+        <div class="left">
+          <back></back>
+          <span>可为时间锁设置一个触发时间</span>
+        </div>
+      </div>
+      <div class="row mt1r no-active">
+        <div class="left">
+          <back></back>
+          <span>开启时间锁后，单日使用时长超过触发时间，需输入密码才能继续使用</span>
+        </div>
+      </div>
+      <div class="row mt1r mb1r no-active">
+        <div class="left">
+          <back></back>
+          <span>开启时间锁，需先设置独立密码；忘记密码后可通过申诉重置密码</span>
+        </div>
+      </div>
+      <div class="row mt1r mb1r" @click="$nav('trigger-time',{triggerTime})">
+        <div class="left">
+          <span>触发时间</span>
+        </div>
+        <div class="right">
+          <span>{{ triggerTime }}分钟</span>
+          <back></back>
+        </div>
+      </div>
+      <div class="button primary ">
+        开启时间锁
+      </div>
+    </div>
+    <div class="content"></div>
+  </div>
+</template>
+<script>
+
+import enums from "../../../../utils/enums";
+
+export default {
+  name: "DetailSetting",
+  data() {
+    return {
+      type: 0,
+      enums,
+      triggerTime: enums.TRIGGER_TIME.TIME60
+    }
+  },
+  computed: {},
+  created() {
+    this.type = this.$route.query.type
+    let triggerTime = localStorage.getItem('changeTriggerTime')
+    if (triggerTime !== null) this.triggerTime = triggerTime
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../../../assets/scss/index";
+
+.DetailSetting {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .content {
+    padding-top: 6rem;
+
+    .notice {
+      margin: 6rem 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      font-size: 1.6rem;
+      color: $second-text-color;
+
+      img {
+        width: 1.5rem;
+        margin-bottom: 1.5rem;
+      }
+
+    }
+
+    .button {
+      position: fixed;
+      bottom: 1rem;
+      left: 1rem;
+      right: 1rem;
+    }
+  }
+
+}
+</style>
diff --git a/src/pages/me/rightMenu/MinorProtection/Index.vue b/src/pages/me/rightMenu/MinorProtection/Index.vue
new file mode 100644
index 0000000..3befb3e
--- /dev/null
+++ b/src/pages/me/rightMenu/MinorProtection/Index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="index">
+    <BaseHeader>
+      <template v-slot:center>
+        <span class="f16">未成年保护工具</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <div class="row" @click="$nav('detail-setting',{type:0})">
+        <div class="left">时间锁</div>
+        <div class="right">
+          <span>未开启</span>
+          <img src="../../../../assets/img/icon/back.png" alt="">
+        </div>
+      </div>
+      <div class="row" @click="$nav('detail-setting',{type:1})">
+        <div class="left">青少年模式</div>
+        <div class="right">
+          <span>未开启</span>
+          <img src="../../../../assets/img/icon/back.png" alt="">
+        </div>
+      </div>
+      <div class="row" @click="$nav('detail-setting',{type:2})">
+        <div class="left">亲子平台</div>
+        <div class="right">
+          <span>未开启</span>
+          <img src="../../../../assets/img/icon/back.png" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "index",
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../../../assets/scss/index";
+
+.index {
+  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/pages/me/rightMenu/MinorProtection/TriggerTime.vue b/src/pages/me/rightMenu/MinorProtection/TriggerTime.vue
new file mode 100644
index 0000000..a395d48
--- /dev/null
+++ b/src/pages/me/rightMenu/MinorProtection/TriggerTime.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="TriggerTime">
+    <BaseHeader>
+      <template v-slot:center>
+        <span class="f16">触发时间</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <div class="row" @click="setTriggerTime(enums.TRIGGER_TIME.TIME40)">
+        <div class="left">40分钟</div>
+        <div class="right" v-if="triggerTime === enums.TRIGGER_TIME.TIME40">
+          <img src="../../../../assets/img/icon/back.png" alt="">
+        </div>
+      </div>
+      <div class="row" @click="setTriggerTime(enums.TRIGGER_TIME.TIME60)">
+        <div class="left">60分钟</div>
+        <div class="right" v-if="triggerTime === enums.TRIGGER_TIME.TIME60">
+          <img src="../../../../assets/img/icon/back.png" alt="">
+        </div>
+      </div>
+      <div class="row" @click="setTriggerTime(enums.TRIGGER_TIME.TIME90)">
+        <div class="left">90分钟</div>
+        <div class="right" v-if="triggerTime === enums.TRIGGER_TIME.TIME90">
+          <img src="../../../../assets/img/icon/back.png" alt="">
+        </div>
+      </div>
+      <div class="row" @click="setTriggerTime(enums.TRIGGER_TIME.TIME120)">
+        <div class="left">120分钟</div>
+        <div class="right" v-if="triggerTime === enums.TRIGGER_TIME.TIME120">
+          <img src="../../../../assets/img/icon/back.png" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import enums from "../../../../utils/enums";
+
+export default {
+  name: "TriggerTime",
+  data() {
+    return {
+      enums,
+      triggerTime: enums.TRIGGER_TIME.TIME60
+    }
+  },
+  created() {
+    this.triggerTime = ~~this.$route.query.triggerTime
+  },
+  methods: {
+    setTriggerTime(type) {
+      this.triggerTime = type
+      localStorage.setItem('changeTriggerTime', type)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../../../assets/scss/index";
+
+.TriggerTime {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  color: white;
+
+  .content {
+    padding-top: 6rem;
+  }
+}
+</style>
diff --git a/src/pages/me/userinfo/EditUserInfo.vue b/src/pages/me/userinfo/EditUserInfo.vue
index 2c136ca..cc27087 100644
--- a/src/pages/me/userinfo/EditUserInfo.vue
+++ b/src/pages/me/userinfo/EditUserInfo.vue
@@ -207,31 +207,6 @@ export default {
 
   }
 
-  .row {
-    padding: 0 1.5rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 5rem;
-    font-size: 1.4rem;
-
-    &:active {
-      background: $active-main-bg;
-    }
-
-    .right {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      color: $second-text-color;
-
-
-      img {
-        margin-left: 1rem;
-        width: 15px;
-      }
-    }
-  }
 }
 
 .change-dialog {
diff --git a/src/router/index.js b/src/router/index.js
index 388272c..1035ac5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -31,6 +31,9 @@ import Chat from "../pages/message/Chat";
 import ChatDetail from "../pages/message/ChatDetail";
 import SetRemark from "../pages/message/SetRemark";
 import LookHistory from "../pages/me/rightMenu/LookHistory";
+import MinorProtectionIndex from "../pages/me/rightMenu/MinorProtection/Index";
+import MinorProtectionDetailSetting from "../pages/me/rightMenu/MinorProtection/DetailSetting";
+import TriggerTime from "../pages/me/rightMenu/MinorProtection/TriggerTime";
 
 const routes = [
   // {path: '', component: Music},
@@ -66,6 +69,9 @@ const routes = [
   {path: '/chat-detail', component: ChatDetail},
   {path: '/set-remark', component: SetRemark},
   {path: '/me/right-menu/look-history', component: LookHistory},
+  {path: '/me/right-menu/minor-protection/index', component: MinorProtectionIndex},
+  {path: '/me/right-menu/minor-protection/detail-setting', component: MinorProtectionDetailSetting},
+  {path: '/me/right-menu/minor-protection/trigger-time', component: TriggerTime},
 ]
 
 export default VueRouter.createRouter({
diff --git a/src/utils/enums.js b/src/utils/enums.js
index 66a39f7..332914f 100644
--- a/src/utils/enums.js
+++ b/src/utils/enums.js
@@ -3,6 +3,12 @@ export default {
     ALL: 0,
     SCHOOL: 1,
     ME: 2,
+  },
+  TRIGGER_TIME: {
+    TIME40: 40,
+    TIME60: 60,
+    TIME90: 90,
+    TIME120: 120,
   }
 }