chore: 通用注册页

pages/activity/register.vue

@@ -3,9 +3,12 @@ import {ref} from "vue";
 import RegisterLayer from "../../components/RegisterLayer.vue";
 import {useUserStore} from "../../stores/user";
 import {jump, JumpType} from "../../utils";
+import md from "../../md";
+import Checkbox from "./toggle-button/index.vue";
 
 const userStore = useUserStore();
 const showRegisterLayer = ref(false);
+const readProtocol = ref(true);
 
 function onRegisterConfirm(data) {
   console.log('注册确认:', data);
@@ -32,6 +35,46 @@ async function getRealtimePhoneNumber(e) {
   });
 }
 
+// 页面跳转
+const navigateTo = (url) => {
+  uni.navigateTo({
+    url,
+    animationDuration: 0,
+    fail: (err) => {
+      console.error("页面跳转失败:", err);
+      uni.showToast({
+        title: "页面跳转失败",
+        icon: "none",
+      });
+    },
+  });
+};
+
+const handleHot = (e) => {
+  const type = e.currentTarget.dataset.type;
+  md.sensorLog(e);
+
+  console.log("handleHot", type);
+  md.sensorComponentLogTake({
+    xcxComponentClick: "true",
+    pageName: "我的页面",
+    componentName: "查看协议",
+    componentContent: type === "member" ? "会员规则" : "隐私协议"
+  })
+  if (type === "member") {
+    navigateTo("/pages/webview/webview?type=MEMBER_URL");
+  } else if (type === "privacy") {
+    navigateTo("/pages/webview/webview?type=PRIVACY_URL");
+  }
+};
+
+function clickRegister(e){
+  uni.showToast({
+    title: "请先阅读并同意协议《会员规则》及《隐私协议》",
+    icon: "none",
+  });
+}
+
 function testClick() {
   jump({
     type: JumpType.MINI,
@@ -45,19 +88,97 @@ function testClick() {
 
 <template>
   <div class="page">
-    <button type="primary" open-type="getPhoneNumber" @getphonenumber="getRealtimePhoneNumber">
-      注册
-    </button>
-    <button @click="testClick">
-      测试
-    </button>
+    <div class="content">
+      <div class="logo-container">
+        <image src="@/assets/logo.png" class="logo"/>
+        <text>星妈会</text>
+      </div>
+      <button v-if="readProtocol" class="register-button" open-type="getPhoneNumber" @getphonenumber="getRealtimePhoneNumber">
+        授权登录
+      </button>
+      <button v-else class="register-button disabled" @click="clickRegister">
+        授权登录
+      </button>
+      <!--    <button @click="testClick">
+            测试
+          </button>-->
+      <view class="protocol-container">
+        <Checkbox v-model="readProtocol" class="checkbox"/>
+        我已阅读并同意
+        <view class="link" :data-log="{
+        xcxClick: '注册页面点击',
+        pageName: '注册页面',
+        buttonName: '会员规则',
+      }" @click="handleHot" data-type="member">《会员规则》
+        </view>
+        及
+        <view class="link" :data-log="{
+        xcxClick: '注册页面点击',
+        pageName: '注册页面',
+        buttonName: '隐私协议',
+      }" @click="handleHot" data-type="privacy">《隐私协议》
+        </view>
+      </view>
+    </div>
+    <RegisterLayer v-model="showRegisterLayer" @confirm="onRegisterConfirm"/>
   </div>
-  <RegisterLayer v-model="showRegisterLayer" @confirm="onRegisterConfirm"/>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 .page {
-  margin-top: 100px;
-  width: 90%;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .logo-container{
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    flex-direction: column;
+    background-image: linear-gradient(180deg, #F4E2B2 0%, transparent 100%);
+
+    padding-top: 350rpx;
+    padding-bottom: 80rpx;
+
+    .logo{
+      width: 176rpx;
+      height: 176rpx;
+    }
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .register-button {
+      width: 600rpx;
+      height: 94rpx;
+      border-radius: 100rpx;
+      background-color: #d3a358;
+      color: white;
+      margin-top: 130rpx;
+
+      &.disabled{
+        background-color: #E3CC9E;
+      }
+    }
+
+    .protocol-container {
+      margin: 40rpx 0;
+      font-size: 24rpx;
+      display: flex;
+      align-items: center;
+      gap: 4rpx;
+      color: #797979;
+
+      .link {
+        color: #d3a358;
+      }
+    }
+  }
+
 }
 </style>
\ No newline at end of file

pages/activity/toggle-button/index.vue

+<script setup>
+import { ref } from 'vue'
+import checkSelectImg from './assets/check-select.png'
+import checkUnselectImg from './assets/check-unselect.png'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const handleClick = () => {
+  emit('update:modelValue', !props.modelValue)
+}
+</script>
+
+<template>
+  <div class="checkbox-wrapper">
+    <img :src="modelValue ? checkSelectImg : checkUnselectImg" class="checkbox" @click="handleClick"/>
+  </div>
+</template>
+
+<style scoped lang="less">
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .checkbox {
+    width: 22rpx;
+    height: 22rpx;
+  }
+}
+</style>
\ No newline at end of file