From c0881225ea080d14f52dee54a17fbf5be5bc1045 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Tue, 17 Aug 2021 20:55:36 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   3 +-
 .../img/icon/components/check/round-gray.png  | Bin 0 -> 6498 bytes
 src/assets/scss/anim.scss                     |  12 ++
 src/assets/scss/index.scss                    |   2 +
 src/components/Check.vue                      |  40 +++++
 src/pages/login/Login.vue                     |  94 ++++++++--
 src/pages/login/OtherLogin.vue                |  62 +++++--
 src/pages/login/PasswordLogin.vue             | 168 ++++++++++++++++++
 src/pages/login/components/Tooltip.vue        |  62 +++++++
 src/pages/message/Message.vue                 |   2 +-
 src/router/index.js                           |   4 +-
 11 files changed, 418 insertions(+), 31 deletions(-)
 create mode 100644 src/assets/img/icon/components/check/round-gray.png
 create mode 100644 src/assets/scss/anim.scss
 create mode 100644 src/components/Check.vue
 create mode 100644 src/pages/login/PasswordLogin.vue
 create mode 100644 src/pages/login/components/Tooltip.vue

diff --git a/src/App.vue b/src/App.vue
index c84023c..8e9dea4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -70,7 +70,8 @@ export default {
         '/me/right-menu/minor-protection/trigger-time',
         '/me/right-menu/setting',
         '/login',
-        '/other-login',
+        '/login/other',
+        '/login/password',
 
 
         '/service-protocol',
diff --git a/src/assets/img/icon/components/check/round-gray.png b/src/assets/img/icon/components/check/round-gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa189ba1223643b8c13f85dc84db78400bbf6633
GIT binary patch
literal 6498
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
JD^=`>{|9Q}4z>UQ

literal 0
HcmV?d00001

diff --git a/src/assets/scss/anim.scss b/src/assets/scss/anim.scss
new file mode 100644
index 0000000..13cc41a
--- /dev/null
+++ b/src/assets/scss/anim.scss
@@ -0,0 +1,12 @@
+.anim-bounce {
+  animation: bounce .1s ease-in-out 5 alternate;
+}
+
+@keyframes bounce {
+  from {
+    transform: translateX(-1rem);
+  }
+  to {
+    transform: translateX(1rem);
+  }
+}
\ No newline at end of file
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
index 5bcffa1..f0ad56f 100644
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@@ -8,6 +8,8 @@
 //颜色 
 @import "layout"; //布局
 
+@import "anim";
+
 
 html, body {
   width: 100%;
diff --git a/src/components/Check.vue b/src/components/Check.vue
new file mode 100644
index 0000000..7f7e319
--- /dev/null
+++ b/src/components/Check.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="Check" @click="$emit('update:modelValue',!modelValue)">
+    <img v-show="!modelValue" src="../assets/img/icon/components/check/round-gray.png" alt="">
+    <img v-show="modelValue && mode === 'gray'" src="../assets/img/icon/components/check/check-gray.png" alt="">
+    <img v-show="modelValue && mode === 'red'" src="../assets/img/icon/components/check/check-red.png" alt="">
+  </div>
+</template>
+<script>
+export default {
+  name: "Check",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    mode: {
+      type: String,
+      default: 'gray'//red
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+@import "../assets/scss/index";
+
+.Check {
+  img {
+    width: 1.4rem;
+  }
+
+}
+</style>
diff --git a/src/pages/login/Login.vue b/src/pages/login/Login.vue
index eaf9f78..601f017 100644
--- a/src/pages/login/Login.vue
+++ b/src/pages/login/Login.vue
@@ -12,12 +12,14 @@
         <div class="sub-title">认证服务由中国移动提供</div>
       </div>
 
-      <div class="button primary no-active">一键登录</div>
-      <div class="button white" @click="$nav('/other-login')">其他手机号码登录</div>
+      <div class="button primary no-active" @click="login">一键登录</div>
+      <div class="button white" @click="$nav('/login/other')">其他手机号码登录</div>
 
-      <div class="protocol">
-        <!--      TODO -->
-        <div class="left"></div>
+      <div class="protocol" :class="showAnim?'anim-bounce':''">
+        <Tooltip style="top: -100%;left: -1rem;" v-model="showTooltip"/>
+        <div class="left">
+          <Check v-model="isAgree"/>
+        </div>
         <div class="right">
           我已阅读并同意
           <span class="link" @click="$nav('/service-protocol',{type:'“抖音”用户服务协议'})">用户协议</span>
@@ -31,25 +33,57 @@
         </div>
       </div>
 
-
-<!--      TODO -->
       <div class="other-login">
-        <span class="link">其他方式登录</span>
+        <transition name="fade">
+          <div v-if="isOtherLogin" class="icons">
+            <img src="../../assets/img/icon/login/toutiao-round.png" alt="">
+            <img src="../../assets/img/icon/login/qq-round.webp" alt="">
+            <img src="../../assets/img/icon/login/wechat-round.png" alt="">
+            <img src="../../assets/img/icon/login/weibo-round.webp" alt="">
+          </div>
+        </transition>
       </div>
-
+      <transition name="fade">
+        <span v-if="!isOtherLogin" class="other-login-text link" @click="isOtherLogin = !isOtherLogin">其他方式登录</span>
+      </transition>
     </div>
   </div>
 </template>
 <script>
+import Check from "../../components/Check";
+import Tooltip from "./components/Tooltip";
+
 export default {
   name: "login",
+  components: {
+    Check,
+    Tooltip
+  },
   data() {
-    return {}
+    return {
+      isAgree: false,
+      isOtherLogin: false,
+      showAnim: false,
+      showTooltip: false,
+    }
   },
   computed: {},
   created() {
   },
-  methods: {}
+  methods: {
+    login() {
+      if (!this.isAgree && !this.showAnim && !this.showTooltip) {
+        this.showAnim = true
+        setTimeout(() => {
+          this.showAnim = false
+          this.showTooltip = true
+        }, 500)
+        setTimeout(() => {
+          this.showTooltip = false
+        }, 3000)
+      }
+    }
+  }
 }
 </script>
 
@@ -69,7 +103,6 @@ export default {
 
   .content {
     padding: 6rem 3rem;
-    //padding-top: 6rem;
 
     .notice {
       margin-bottom: 8rem;
@@ -95,24 +128,53 @@ export default {
     }
 
     .button {
+      width: 100%;
       margin-bottom: .5rem;
     }
 
-    .protocol{
+    .protocol {
+      position: relative;
       color: gray;
       margin-top: 2rem;
       font-size: 1.2rem;
+      display: flex;
+
+      .left {
+        padding-top: .1rem;
+        margin-right: .5rem;
+      }
     }
 
-    .other-login{
+
+    .other-login {
       position: absolute;
       bottom: 4rem;
       font-size: 1.2rem;
-      left: 50%;
+      display: flex;
+      justify-content: center;
+      width: calc(100vw - 6rem);
       transform: translateX(-50%);
-    }
+      left: 50%;
 
+      .icons {
+        img {
+          width: 4rem;
+          margin-right: 1.5rem;
 
+          &:nth-last-child(1) {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+
+    .other-login-text {
+      position: absolute;
+      bottom: 5.5rem;
+      font-size: 1.2rem;
+      transform: translateX(-50%);
+      left: 50%;
+    }
   }
 }
 </style>
diff --git a/src/pages/login/OtherLogin.vue b/src/pages/login/OtherLogin.vue
index 6580cbf..034a761 100644
--- a/src/pages/login/OtherLogin.vue
+++ b/src/pages/login/OtherLogin.vue
@@ -16,12 +16,14 @@
           <span>+86</span>
           <div class="arrow"></div>
         </div>
-        <input type="text" class="right" placeholder="请输入手机号">
+        <input v-model="phone" type="text" class="right" placeholder="请输入手机号">
       </div>
 
-      <div class="protocol">
-        <!--      TODO -->
-        <div class="left"></div>
+      <div class="protocol" :class="showAnim?'anim-bounce':''">
+        <Tooltip style="top: -150%;left: -1rem;" v-model="showTooltip"/>
+        <div class="left">
+          <Check v-model="isAgree"/>
+        </div>
         <div class="right">
           已阅读并同意
           <span class="link" @click="$nav('/service-protocol',{type:'“抖音”用户服务协议'})">用户协议</span>
@@ -31,10 +33,12 @@
         </div>
       </div>
 
-      <div class="button primary no-active disabled">获取短信验证码</div>
+      <div class="button primary no-active" :class="phone.length>10?'':'disabled'" @click="getCode">
+        获取短信验证码
+      </div>
 
       <div class="options">
-        <span class="link">密码登录</span>
+        <span class="link" @click="$nav('/login/password')">密码登录</span>
         <span class="link">其他方式登录</span>
       </div>
 
@@ -42,15 +46,41 @@
   </div>
 </template>
 <script>
+import Check from "../../components/Check";
+import Tooltip from "./components/Tooltip";
+
 export default {
   name: "OtherLogin",
+  components: {
+    Check,
+    Tooltip
+  },
   data() {
-    return {}
+    return {
+      isAgree: false,
+      phone: '',
+      isOtherLogin: false,
+      showAnim: false,
+      showTooltip: false  ,
+    }
   },
   computed: {},
   created() {
   },
-  methods: {}
+  methods: {
+    getCode() {
+      if (!this.isAgree && !this.showAnim && !this.showTooltip && this.phone.length > 10) {
+        this.showAnim = true
+        setTimeout(() => {
+          this.showAnim = false
+          this.showTooltip = true
+        }, 500)
+        setTimeout(() => {
+          this.showTooltip = false
+        }, 3000)
+      }
+    }
+  }
 }
 </script>
 
@@ -102,6 +132,7 @@ export default {
         margin-right: 1rem;
         padding-right: 1rem;
         position: relative;
+
         .arrow {
           margin-top: .4rem;
           margin-left: .5rem;
@@ -111,14 +142,14 @@ export default {
           border-top: .5rem solid black;
         }
 
-        &::before{
+        &::before {
           content: ' ';
           position: absolute;
           width: 1px;
           height: .8rem;
           top: 4px;
           right: 0;
-          background: gray;
+          background: gainsboro;
         }
       }
 
@@ -127,7 +158,7 @@ export default {
         outline: none;
         border: none;
         background: whitesmoke;
-        caret-color:red;
+        caret-color: red;
         //background: red;
       }
     }
@@ -137,13 +168,20 @@ export default {
     }
 
     .protocol {
+      position: relative;
       color: gray;
       margin-top: 2rem;
       margin-bottom: 2rem;
       font-size: 1.2rem;
+      display: flex;
+
+      .left {
+        padding-top: .1rem;
+        margin-right: .5rem;
+      }
     }
 
-    .options{
+    .options {
       font-size: 1.2rem;
       margin-top: 2rem;
       display: flex;
diff --git a/src/pages/login/PasswordLogin.vue b/src/pages/login/PasswordLogin.vue
new file mode 100644
index 0000000..8dc2b37
--- /dev/null
+++ b/src/pages/login/PasswordLogin.vue
@@ -0,0 +1,168 @@
+<template>
+  <div class="PasswordLogin">
+    <BaseHeader>
+      <template v-slot:right>
+        <span class="f16">帮助</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <div class="notice">
+        <div class="title">登录看朋友内容</div>
+        <div class="sub-title">未注册的手机号验证通过后将自动注册</div>
+      </div>
+
+      <div class="input-number">
+        <div class="left">
+          <span>+86</span>
+          <div class="arrow"></div>
+        </div>
+        <input type="text" class="right" placeholder="请输入手机号">
+      </div>
+
+      <div class="protocol">
+        <div class="left">
+          <Check v-model="isAgree"/>
+        </div>
+        <div class="right">
+          已阅读并同意
+          <span class="link" @click="$nav('/service-protocol',{type:'“抖音”用户服务协议'})">用户协议</span>
+          和
+          <span class="link" @click="$nav('/service-protocol',{type:'“抖音”隐私政策'})">隐私政策</span>
+          ，同时登录并使用抖音火山版（原“火山小视频”）和抖音
+        </div>
+      </div>
+
+      <div class="button primary no-active disabled">获取短信验证码</div>
+
+      <div class="options">
+        <span class="link">密码登录</span>
+        <span class="link">其他方式登录</span>
+      </div>
+
+    </div>
+  </div>
+</template>
+<script>
+import Check from "../../components/Check";
+
+export default {
+  name: "PasswordLogin",
+  components: {
+    Check
+  },
+  data() {
+    return {
+      isAgree:false
+    }
+  },
+  computed: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/scss/index";
+
+.PasswordLogin {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: black;
+  font-size: 1.4rem;
+  background: white;
+
+  .content {
+    padding: 6rem 3rem;
+    //padding-top: 6rem;
+
+    .notice {
+      margin-bottom: 2rem;
+      margin-top: 4rem;
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+
+      .title {
+        font-size: 2rem;
+        margin-bottom: 1rem;
+      }
+
+      .sub-title {
+        font-size: 1.2rem;
+        color: $second-text-color;
+      }
+    }
+
+    .input-number {
+      display: flex;
+      background: whitesmoke;
+      padding: 1.5rem 1rem;
+
+      .left {
+        font-size: 1.2rem;
+        display: flex;
+        align-items: center;
+        margin-right: 1rem;
+        padding-right: 1rem;
+        position: relative;
+        .arrow {
+          margin-top: .4rem;
+          margin-left: .5rem;
+          width: 0;
+          height: 0;
+          border: .3rem solid transparent;
+          border-top: .5rem solid black;
+        }
+
+        &::before{
+          content: ' ';
+          position: absolute;
+          width: 1px;
+          height: .8rem;
+          top: 4px;
+          right: 0;
+          background: gainsboro;
+        }
+      }
+
+      .right {
+        flex: 1;
+        outline: none;
+        border: none;
+        background: whitesmoke;
+        caret-color:red;
+        //background: red;
+      }
+    }
+
+    .button {
+      margin-bottom: .5rem;
+    }
+
+    .protocol {
+      color: gray;
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+      font-size: 1.2rem;
+      display: flex;
+
+      .left {
+        padding-top: .1rem;
+        margin-right: .5rem;
+      }
+    }
+
+    .options{
+      font-size: 1.2rem;
+      margin-top: 2rem;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>
diff --git a/src/pages/login/components/Tooltip.vue b/src/pages/login/components/Tooltip.vue
new file mode 100644
index 0000000..55f7742
--- /dev/null
+++ b/src/pages/login/components/Tooltip.vue
@@ -0,0 +1,62 @@
+<template>
+  <transition name="fade">
+    <div class="Tooltip" v-if="modelValue">
+      <div class="arrow"></div>
+      <span>请先勾选同意后再进行登录</span>
+    </div>
+  </transition>
+</template>
+<script>
+export default {
+  name: "Popover",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+@import "../../../assets/scss/index";
+
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.3s ease;
+}
+
+.scale-enter-from,
+.scale-leave-to {
+  //transform: scale(0);
+  opacity: 0;
+}
+
+.Tooltip {
+  z-index: 9;
+  position: absolute;
+  font-size: 1.2rem;
+  color: white;
+  padding: 1rem;
+  border-radius: .8rem;
+  background: black;
+
+  .arrow {
+    width: 0;
+    height: 0;
+    border: .7rem solid transparent;
+    border-top: .7rem solid black;
+    position: absolute;
+    left: 1rem;
+    bottom: -1.4rem;
+  }
+}
+
+</style>
diff --git a/src/pages/message/Message.vue b/src/pages/message/Message.vue
index c589bac..e8d31c5 100644
--- a/src/pages/message/Message.vue
+++ b/src/pages/message/Message.vue
@@ -212,7 +212,7 @@ export default {
   },
   computed: {
     selectFriends() {
-      let videos = this.friends.filter(v => v.select)
+      let res = this.friends.filter(v => v.select)
       return res.length
     }
   },
diff --git a/src/router/index.js b/src/router/index.js
index 95b5bc4..78d02bd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -38,6 +38,7 @@ import Setting from "../pages/me/rightMenu/Setting";
 import Me2 from "../pages/me/Me2";
 import Login from "../pages/login/Login";
 import OtherLogin from "../pages/login/OtherLogin";
+import PasswordLogin from "../pages/login/PasswordLogin";
 
 const routes = [
   // {path: '', component: Music},
@@ -79,7 +80,8 @@ const routes = [
   {path: '/me/right-menu/minor-protection/trigger-time', component: TriggerTime},
   {path: '/me/right-menu/setting', component: Setting},
   {path: '/login', component: Login},
-  {path: '/other-login', component: OtherLogin},
+  {path: '/login/other', component: OtherLogin},
+  {path: '/login/password', component: PasswordLogin},
 ]
 
 export default VueRouter.createRouter({