feat: 新增登录功能交互

pages/login/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <view class="login-wrapper">
+    <image class="bg" src="./images/bg.png"></image>
+    <!-- 头部内容 -->
+    <view class="login-header">
+      <!-- 卡通形象 -->
+      <image class="login-avatar" src="./images/dh.png" mode="widthFix"></image>
+      <image
+        class="login-title"
+        src="./images/dhwq.png"
+        mode="widthFix"
+      ></image>
+
+      <!-- 描述 -->
+      <view class="login-desc">您好，欢迎来到朵花温泉！</view>
+    </view>
+
+    <!-- 按钮区域 -->
+    <view class="login-btn-area">
+      <!-- 同意隐私协议并获取手机号按钮 -->
+
+      <button
+        v-if="!isAgree"
+        class="login-btn"
+        type="primary"
+        @click="handleAgreeAndGetPhone"
+      >
+        微信一键登录
+      </button>
+      <button
+        v-if="isAgree"
+        class="login-btn"
+        open-type="getPhoneNumber"
+        type="primary"
+        @getphonenumber="onLogin"
+      >
+        微信一键登录
+      </button>
+    </view>
+
+    <!-- 协议勾选 -->
+    <view class="login-agreement">
+      <CheckBox v-model="isAgree">
+        <text class="login-agreement-text">阅读并同意</text>
+        <navigator
+          url="/pages/service-agreement/service-agreement"
+          class="login-agreement-link"
+          >《服务协议》</navigator
+        >
+        <text class="login-agreement-text">和</text>
+        <navigator
+          url="/pages/privacy-policy/privacy-policy"
+          class="login-agreement-link"
+          >《隐私协议》</navigator
+        >
+      </CheckBox>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import CheckBox from "@/components/CheckBox/index.vue";
+import { loginAuth, bindPhone, checkPhone } from "@/manager/LoginManager";
+import { goHome } from "@/hooks/useGoHome";
+
+const isAgree = ref(false);
+
+// 同意隐私协议并获取手机号
+const handleAgreeAndGetPhone = () => {
+  if (!isAgree.value) {
+    uni.showToast({
+      title: "请先同意服务协议和隐私协议",
+      icon: "none",
+    });
+    return;
+  }
+};
+
+const onLogin = (e) => {
+  const { code } = e.detail;
+  console.error("onLogin code", code);
+
+  loginAuth()
+    .then(async () => {
+      // 检测是否绑定手机号，已绑定则直接跳转首页，未绑定则获取手机号并绑定
+      const res = await checkPhone();
+
+      if (res.data) {
+        return goHome();
+      }
+
+      const { data } = await bindPhone({
+        wechatPhoneCode: code,
+        clientId: "2",
+      });
+
+      if (data) {
+        goHome();
+      }
+    })
+    .catch((err) => {
+      console.error("登录失败", err);
+    });
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>