登录页

pages/user/login.vue

@@ -10,9 +10,10 @@
     </view>
 
     <view class="login-area">
-      <view class="agreement flex-c">
+      <view :class="[isShake ? 'animation-shake' : '', 'agreement flex-c']">
-        <view class="clickable-area flex-r">
+        <view class="clickable-area flex-r" @click="select()">
-          <me-icon class="icon" type="icon-checkbox-blank-circle" size="40rpx" color="var(--summaryColor)"></me-icon>
+          <me-icon v-if="checked" class="icon" type="icon-checkbox-circle" size="40rpx" color="var(--themeColor)"></me-icon>
+          <me-icon v-else class="icon" type="icon-checkbox-blank-circle" size="40rpx" color="var(--summaryColor)"></me-icon>
           阅读并同意
         </view>
         <view class="text">&nbsp<text>用户协议</text>、<text>隐私协议</text></view>
@@ -28,6 +29,32 @@
 
 import MeIcon from "../../components/me-icon/me-icon.vue";
 import MeButton from "../../components/me-button/me-button.vue";
+import { ref, reactive, computed, watch } from 'vue'
+import helpers from "../../utils/helpers";
+
+//是否勾选协议
+const checked = ref(false)
+
+//是否抖动
+const isShake = ref(false)
+
+//手机号登录
+const phoneLogin = () => {
+  if (checked.value === false) {
+    helpers.showToast("请阅读并勾选用户协议")
+    isShake.value = true
+    setTimeout(() => {
+      isShake.value = false
+    }, 1000)
+
+    return false
+  }
+}
+
+//勾选协议
+const select = () => {
+  checked.value = !checked.value
+}
 </script>
 <style>
 page {
@@ -93,6 +120,28 @@ page {
         }
       }
     }
+    .animation-shake{
+      animation: shake 800ms ease-in-out;
+    }
+
+    /* 水平抖动特效*/
+    @keyframes shake {
+      10%, 90% {
+        transform: translate3d(-1px, 0, 0);
+      }
+      20%, 80% {
+        transform: translate3d(+2px, 0, 0);
+      }
+      30%, 70% {
+        transform: translate3d(-4px, 0, 0);
+      }
+      40%, 60% {
+        transform: translate3d(+4px, 0, 0);
+      }
+      50% {
+        transform: translate3d(-4px, 0, 0);
+      }
+    }
     .btn-area {
       width: 100%;
       height: 96rpx;