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>

pages/login/prompt.md

@@ -0,0 +1,12 @@
+## 登录页面
+
+## 提示词：
+
+使用 uniapp + vue3 组合式 api 开发微信小程序，要求如下：
+1、按照提供的图片高度还原交互设计
+2、要求布局样式结构简洁明了，class 命名请按照模块名称来命名，例如：.login-wrapper
+3、可以使用 uniapp 内置的组件
+
+## 备注
+
+仅供学习、交流使用，请勿用于商业用途。

pages/login/styles/index.scss

@@ -0,0 +1,70 @@
+.login-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+  font-family: PingFang SC, PingFang SC;
+  height: 100vh;
+  padding-top: 168px;
+  position: relative;
+  
+  .bg {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+  }
+
+
+  .login-header {
+    text-align: center;
+
+    .login-avatar {
+      width: 150px;
+      display: block;
+    }
+
+    .login-title {
+      width: 137px;
+      margin: 6px auto;
+    }
+
+    .login-desc {
+      font-size: 12px;
+      color: #1E4C69;
+      line-height: 24px;
+    }
+  }
+
+  .login-btn-area {
+    margin-top: 46px;
+    width: 297px;
+
+    .login-btn {
+      background: linear-gradient( 246deg, #22A7FF 0%, #2567FF 100%);
+      width: 100%;
+      border-radius: 50px;
+    }
+  }
+
+  .login-agreement {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+
+    .login-agreement-text {
+      font-size: 14px;
+      color: #666;
+    }
+
+    .login-agreement-link {
+      font-size: 14px;
+      color: #007aff;
+      margin: 0 5px;
+    }
+  }
+}