liruiqiang
2 months ago
3 changed files with 214 additions and 6 deletions
@ -1,11 +1,185 @@ |
|||||
<script setup lang="ts"> |
|
||||
// |
|
||||
</script> |
|
||||
|
|
||||
<template> |
<template> |
||||
<view class="login">login</view> |
|
||||
|
<view class="viewport"> |
||||
|
<view class="logo"> |
||||
|
<image |
||||
|
src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/logo_icon.png" |
||||
|
></image> |
||||
|
</view> |
||||
|
<view class="login"> |
||||
|
<!-- 网页端表单登录 --> |
||||
|
<!-- <input class="input" type="text" placeholder="请输入用户名/手机号码" /> --> |
||||
|
<!-- <input class="input" type="text" password placeholder="请输入密码" /> --> |
||||
|
<!-- <button class="button phone">登录</button> --> |
||||
|
|
||||
|
<!-- 小程序端授权登录 --> |
||||
|
<button class="button phone" open-type="getPhoneNumber" @getphonenumber="onGetphonenumber"> |
||||
|
<text class="icon icon-phone"></text> |
||||
|
手机号快捷登录 |
||||
|
</button> |
||||
|
<view class="extra"> |
||||
|
<view class="caption"> |
||||
|
<text>其他登录方式</text> |
||||
|
</view> |
||||
|
<view class="options"> |
||||
|
<!-- 通用模拟登录 --> |
||||
|
<button> |
||||
|
<text class="icon icon-phone">模拟快捷登录</text> |
||||
|
</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="tips">登录/注册即视为你同意《服务条款》和《小兔鲜儿隐私协议》</view> |
||||
|
</view> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { onLoad } from '@dcloudio/uni-app' |
||||
|
import { ref } from 'vue' |
||||
|
import { postLoginAPI, postLoginWxMinAPI, postLoginWxMinSimpleAPI } from '@/services/login' |
||||
|
|
||||
|
// 获取 code 登录凭证 |
||||
|
let code = '' |
||||
|
onLoad(async () => { |
||||
|
const res = await wx.login() |
||||
|
code = res.code |
||||
|
}) |
||||
|
|
||||
|
// 获取用户手机号码 |
||||
|
const onGetphonenumber: UniHelper.ButtonOnGetphonenumber = async (ev) => { |
||||
|
// 获取参数 |
||||
|
const encryptedData = ev.detail.encryptedData! |
||||
|
const iv = ev.detail.iv! |
||||
|
// 登录请求 |
||||
|
await postLoginWxMinAPI({ code, encryptedData, iv }) |
||||
|
// 成功提示 |
||||
|
uni.showToast({ icon: 'none', title: '登录成功' }) |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
<style lang="scss"> |
<style lang="scss"> |
||||
// |
|
||||
|
page { |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.viewport { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
padding: 20rpx 40rpx; |
||||
|
} |
||||
|
|
||||
|
.logo { |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
image { |
||||
|
width: 220rpx; |
||||
|
height: 220rpx; |
||||
|
margin-top: 15vh; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.login { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 60vh; |
||||
|
padding: 40rpx 20rpx 20rpx; |
||||
|
|
||||
|
.input { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
font-size: 28rpx; |
||||
|
border-radius: 72rpx; |
||||
|
border: 1px solid #ddd; |
||||
|
padding-left: 30rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.button { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
font-size: 28rpx; |
||||
|
border-radius: 72rpx; |
||||
|
color: #fff; |
||||
|
.icon { |
||||
|
font-size: 40rpx; |
||||
|
margin-right: 6rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.phone { |
||||
|
background-color: #28bb9c; |
||||
|
} |
||||
|
|
||||
|
.wechat { |
||||
|
background-color: #06c05f; |
||||
|
} |
||||
|
|
||||
|
.extra { |
||||
|
flex: 1; |
||||
|
padding: 70rpx 70rpx 0; |
||||
|
.caption { |
||||
|
width: 440rpx; |
||||
|
line-height: 1; |
||||
|
border-top: 1rpx solid #ddd; |
||||
|
font-size: 26rpx; |
||||
|
color: #999; |
||||
|
position: relative; |
||||
|
text { |
||||
|
transform: translate(-40%); |
||||
|
background-color: #fff; |
||||
|
position: absolute; |
||||
|
top: -12rpx; |
||||
|
left: 50%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.options { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-top: 70rpx; |
||||
|
button { |
||||
|
padding: 0; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.icon { |
||||
|
font-size: 24rpx; |
||||
|
color: #444; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
|
||||
|
&::before { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
margin-bottom: 6rpx; |
||||
|
font-size: 40rpx; |
||||
|
border: 1rpx solid #444; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
} |
||||
|
.icon-weixin::before { |
||||
|
border-color: #06c05f; |
||||
|
color: #06c05f; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tips { |
||||
|
position: absolute; |
||||
|
bottom: 80rpx; |
||||
|
left: 20rpx; |
||||
|
right: 20rpx; |
||||
|
font-size: 22rpx; |
||||
|
color: #999; |
||||
|
text-align: center; |
||||
|
} |
||||
</style> |
</style> |
||||
@ -0,0 +1,19 @@ |
|||||
|
import type { LoginResult } from '@/types/member' |
||||
|
import { http } from '@/utils/http' |
||||
|
|
||||
|
type LoginWxMinParams = { |
||||
|
code: string |
||||
|
encryptedData?: string |
||||
|
iv?: string |
||||
|
} |
||||
|
/** |
||||
|
* 小程序登录 |
||||
|
* @param data 请求参数 |
||||
|
*/ |
||||
|
export const postLoginWxMinAPI = (data: LoginWxMinParams) => { |
||||
|
return http<LoginResult>({ |
||||
|
method: 'POST', |
||||
|
url: '/login/wxMin', |
||||
|
data, |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
/** 小程序登录 登录用户信息 */ |
||||
|
export type LoginResult = { |
||||
|
/** 用户ID */ |
||||
|
id: number |
||||
|
/** 头像 */ |
||||
|
avatar: string |
||||
|
/** 账户名 */ |
||||
|
account: string |
||||
|
/** 昵称 */ |
||||
|
nickname?: string |
||||
|
/** 手机号 */ |
||||
|
mobile: string |
||||
|
/** 登录凭证 */ |
||||
|
token: string |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue