登录方法添加

src/pages/login/login.vue

@@ -7,9 +7,9 @@
     </view>
     <view class="login">
       <!-- 网页端表单登录 -->
-      <!-- <input class="input" type="text" placeholder="请输入用户名/手机号码" /> -->
-      <!-- <input class="input" type="text" password placeholder="请输入密码" /> -->
-      <!-- <button class="button phone">登录</button> -->
+      <!-- <input v-model="form.account" class="input" type="text" placeholder="请输入用户名/手机号码" />
+      <input v-model="form.password" class="input" type="text" password placeholder="请输入密码" />
+      <button @tap="onSubmit" class="button phone">登录</button> -->
 
       <!-- 小程序端授权登录 -->
       <button class="button phone" open-type="getPhoneNumber" @getphonenumber="onGetphonenumber">
@@ -22,8 +22,8 @@
         </view>
         <view class="options">
           <!-- 通用模拟登录 -->
-          <button>
-            <text class="icon icon-phone" @tap="onGetphonenumberSimple">模拟快捷登录</text>
+          <button @tap="onGetphonenumberSimple">
+            <text class="icon icon-phone">模拟快捷登录</text>
           </button>
         </view>
       </view>
@@ -35,15 +35,15 @@
 <script setup lang="ts">
 import { onLoad } from '@dcloudio/uni-app'
 import { ref } from 'vue'
-import { postLoginWxMinAPI, postLoginWxMinSimpleAPI } from '@/services/login'
+import { postLoginAPI, postLoginWxMinAPI, postLoginWxMinSimpleAPI } from '@/services/login'
 import { useMemberStore } from '@/stores'
 import type { LoginResult } from '@/types/member'
 
 // 获取 code 登录凭证
 let code = ''
 onLoad(async () => {
-  const res = await wx.login()
-  code = res.code
+  // const res = await wx.login()
+  // code = res.code
 })
 
 // 获取用户手机号码
@@ -59,7 +59,20 @@ const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = async (ev) => {
 
 // 模拟手机号码快捷登录（开发练习）
 const onGetphonenumberSimple = async () => {
-  const res = await postLoginWxMinSimpleAPI('18730880302')
+  console.log(111)
+  const res = await postLoginWxMinSimpleAPI('13123456789')
+  loginSuccess(res.result)
+}
+
+// 传统表单登录，测试账号：13123456789 密码：123456，测试账号仅开发学习使用。
+const form = ref({
+  account: '13123456789',
+  password: '',
+})
+
+// 表单提交
+const onSubmit = async () => {
+  const res = await postLoginAPI(form.value)
   loginSuccess(res.result)
 }
 
@@ -164,6 +177,9 @@ page {
       button {
         padding: 0;
         background-color: transparent;
+        &::after {
+          border: none;
+        }
       }
     }
 
@@ -193,6 +209,31 @@ page {
   }
 }
 
+@keyframes animate__shakeY {
+  0% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(0, -5rpx);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+.animate__shakeY {
+  animation: animate__shakeY 0.2s ease-in-out 3;
+}
+
+.button-privacy-wrap {
+  position: relative;
+  .button-opacity {
+    opacity: 0;
+    position: absolute;
+    z-index: 1;
+  }
+}
+
 .tips {
   position: absolute;
   bottom: 80rpx;
@@ -201,5 +242,17 @@ page {
   font-size: 22rpx;
   color: #999;
   text-align: center;
+
+  .radio {
+    transform: scale(0.6);
+    margin-right: -4rpx;
+    margin-top: -4rpx;
+    vertical-align: middle;
+  }
+
+  .link {
+    display: inline;
+    color: #28bb9c;
+  }
 }
 </style>

src/services/login.ts

@@ -32,3 +32,19 @@ export const postLoginWxMinSimpleAPI = (phoneNumber: string) => {
     },
   })
 }
+
+type LoginParams = {
+  account: string
+  password: string
+}
+/**
+ * 传统登录-用户名+密码
+ * @param data 请求参数
+ */
+export const postLoginAPI = (data: LoginParams) => {
+  return http<LoginResult>({
+    method: 'POST',
+    url: '/login',
+    data,
+  })
+}