b2894lxlx/yunxinwei-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
gxwebsoft
2023-08-04 13:04:21 +08:00
commit 7a73b38bd5
764 changed files with 166417 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

377
pages/login/components/main.vue Executable file
View File

@@ -0,0 +1,377 @@
<template>
<view class="container">
<!-- 页面头部 -->
<view class="header">
<view class="title">
<text>账号登录</text>
</view>
<!-- <view class="sub-title">
<text>未注册的手机号登录后将自动注册</text>
</view> -->
</view>
<!-- 表单 -->
<view class="login-form">
<!-- 手机号 -->
<view class="form-item">
<input class="form-item--input" type="number" v-model="mobile" maxlength="20" placeholder="请输入登录账号|手机号码|邮箱" />
</view>
<view class="form-item">
<input class="form-item--input" type="text" v-model="password" maxlength="30" placeholder="请输入登录密码" />
</view>
<!-- 图形验证码 -->
<view class="form-item">
<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5" placeholder="请输入图形验证码" />
<view class="form-item--parts">
<view class="captcha" @click="getCaptcha()">
<image class="image" :src="captcha.base64"></image>
</view>
</view>
</view>
<!-- 短信验证码 -->
<view class="form-item" style="display: none;">
<input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
<view class="form-item--parts">
<view class="captcha-sms" @click="handelSmsCaptcha()">
<text v-if="!smsState" class="activate">获取验证码</text>
<text v-else class="un-activate">重新发送({{ times }})秒</text>
</view>
</view>
</view>
<!-- 登录按钮 -->
<view class="login-button" @click="handleLogin">
<text>登录</text>
</view>
</view>
<!-- 微信授权手机号一键登录 -->
<!-- #ifdef MP-WEIXIN -->
<MpWeixinMobile :isParty="isParty" :partyData="partyData" />
<!-- #endif -->
</view>
</template>
<script>
import store from '@/store'
import storage from '@/utils/storage'
import {
ACCESS_TOKEN,
USER_ID
} from '@/store/mutation-types'
import { getCaptcha, login, sendSmsCaptcha } from '@/websoft/api/login.js'
import * as Verify from '@/utils/verify'
import http from '@/websoft/api'
import MpWeixinMobile from './mp-weixin-mobile'
// 倒计时时长(秒)
const times = 60
// 表单验证场景
const GET_CAPTCHA = 10
const SUBMIT_LOGIN = 20
export default {
components: {
MpWeixinMobile
},
props: {
// 是否存在第三方用户信息
isParty: {
type: Boolean,
default: () => false
},
// 第三方用户信息数据
partyData: {
type: Object
}
},
data() {
return {
// 正在加载
isLoading: false,
// 图形验证码信息
captcha: {},
// 短信验证码发送状态
smsState: false,
// 倒计时
times,
// 手机号
mobile: '',
password: '',
// 图形验证码
captchaCode: '',
// 短信验证码
smsCode: ''
}
},
/**
* 生命周期函数--监听页面加载
*/
created() {
// 获取图形验证码
this.getCaptcha()
},
methods: {
// 获取图形验证码
getCaptcha() {
const app = this
getCaptcha()
.then(result => app.captcha = result.data)
},
// 点击发送短信验证码
handelSmsCaptcha() {
const app = this
if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
app.sendSmsCaptcha()
}
},
// 表单验证
formValidation(scene = GET_CAPTCHA) {
const app = this
// 验证获取短信验证码
if (scene === GET_CAPTCHA) {
if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
return false
}
}
// 验证提交登录
if (scene === SUBMIT_LOGIN) {
if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
return false
}
}
return true
},
// 验证手机号
validteMobile(str) {
if (Verify.isEmpty(str)) {
this.$toast('请先输入手机号')
return false
}
if (!Verify.isMobile(str)) {
// this.$toast('请输入正确格式的手机号')
// return false
}
return true
},
// 验证图形验证码
validteCaptchaCode(str) {
if (Verify.isEmpty(str)) {
this.$toast('请先输入图形验证码')
return false
}
return true
},
// 验证短信验证码
validteSmsCode(str) {
if (Verify.isEmpty(str)) {
// this.$toast('请先输入短信验证码')
// return false
}
return true
},
// 请求发送短信验证码接口
sendSmsCaptcha() {
const app = this
app.isLoading = true
sendSmsCaptcha({
phone: app.mobile
})
.then(result => {
// 显示发送成功
app.$toast(result.message)
// 执行定时器
app.timer()
})
.catch(() => app.getCaptcha())
.finally(() => app.isLoading = false)
},
// 执行定时器
timer() {
const app = this
app.smsState = true
const inter = setInterval(() => {
app.times = app.times - 1
if (app.times <= 0) {
app.smsState = false
app.times = times
clearInterval(inter)
}
}, 1000)
},
// 点击登录
handleLogin() {
const app = this
if (!app.isLoading && app.formValidation(SUBMIT_LOGIN)) {
app.submitLogin()
}
},
// 确认登录
submitLogin() {
const app = this
app.isLoading = true
console.log("登录: ",'登录');
login({username: app.mobile,password:app.password}).then(res => {
// 老用户登录成功
const expiryTime = 30 * 86400 // 过期时间30天
storage.set(ACCESS_TOKEN, res.data.access_token, expiryTime)
storage.set(USER_ID, res.data.user.userId, expiryTime)
// 显示登录成功
http.setConfig((config) => {
config.header = {
Authorization: res.data.access_token
}
return config
})
app.$toast(res.message)
// 跳转回原页面
setTimeout(() => {
// app.onNavigateBack(1)
app.$navTo('pages/user/user')
}, 2000)
})
// store.dispatch('Login', {
// smsCode: app.smsCode,
// mobile: app.mobile,
// isParty: app.isParty,
// partyData: app.partyData,
// refereeId: store.getters.refereeId
// })
// .then(result => {
// // 显示登录成功
// app.$toast(result.message)
// // 跳转回原页面
// setTimeout(() => {
// app.onNavigateBack(1)
// }, 2000)
// })
// .catch(err => {
// // 跳转回原页面
// if (err.result.data.isBack) {
// setTimeout(() => app.onNavigateBack(1), 2000)
// }
// })
// .finally(() => app.isLoading = false)
},
/**
* 登录成功-跳转回原页面
*/
onNavigateBack(delta = 1) {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack({
delta: Number(delta || 1)
})
} else {
this.$navTo('pages/index/index')
}
}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 100rpx 60rpx;
min-height: 100vh;
background-color: #fff;
}
// 页面头部
.header {
margin-bottom: 60rpx;
.title {
color: #191919;
font-size: 54rpx;
}
.sub-title {
margin-top: 20rpx;
color: #b3b3b3;
font-size: 28rpx;
}
}
// 输入框元素
.form-item {
display: flex;
padding: 18rpx;
border-bottom: 1rpx solid #f3f1f2;
margin-bottom: 30rpx;
height: 96rpx;
&--input {
font-size: 28rpx;
letter-spacing: 1rpx;
flex: 1;
height: 100%;
}
&--parts {
min-width: 100rpx;
height: 100%;
}
// 图形验证码
.captcha {
height: 100%;
.image {
display: block;
width: 192rpx;
height: 100%;
}
}
// 短信验证码
.captcha-sms {
font-size: 28rpx;
line-height: 50rpx;
padding-right: 20rpx;
.activate {
color: $main-bg;
}
.un-activate {
color: #9e9e9e;
}
}
}
// 登录按钮
.login-button {
width: 100%;
height: 86rpx;
margin-top: 80rpx;
background: linear-gradient(to right, $main-bg, $main-bg2);
color: $main-text;
border-radius: 80rpx;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
letter-spacing: 5rpx;
display: flex;
justify-content: center;
align-items: center;
}
</style>

144
pages/login/components/mp-weixin-mobile.vue Executable file
View File

@@ -0,0 +1,144 @@
<template>
<!-- 微信授权手机号一键登录 -->
<view class="wechat-auth">
<button class="btn-normal" open-type="getPhoneNumber" @getphonenumber="handelMpWeixinMobileLogin($event)" @click="clickPhoneNumber">
<view class="wechat-auth-container">
<image class="icon" src="../../../static/channel/wechat.png"></image>
<text class="title">微信手机号一键登录</text>
</view>
</button>
</view>
</template>
<script>
import store from '@/store'
import { isEmpty, inArray } from '@/utils/util'
export default {
props: {
// 是否存在第三方用户信息
isParty: {
type: Boolean,
default: () => false
},
// 第三方用户信息数据
partyData: {
type: Object
}
},
data() {
return {
// 微信小程序登录凭证 (code)
// 提交到后端，用于换取openid
code: ''
}
},
methods: {
// 按钮点击事件: 获取微信手机号按钮
// 实现目的: 在getphonenumber事件触发之前获取微信登录code
// 因为如果在getphonenumber事件中获取code的话,提交到后端的encryptedData会存在解密不了的情况
async clickPhoneNumber() {
this.code = await this.getCode()
},
// 微信授权获取手机号一键登录
// getphonenumber事件的回调方法
async handelMpWeixinMobileLogin({ detail }) {
const app = this
if (detail.errMsg != 'getPhoneNumber:ok') {
console.log('微信授权获取手机号失败', detail.errMsg)
// app.$error(detail.errMsg)
return
}
if (detail.errMsg == 'getPhoneNumber:ok') {
app.isLoading = true
store.dispatch('LoginMpWxMobile', {
code: app.code,
encryptedData: detail.encryptedData,
iv: detail.iv,
isParty: app.isParty,
partyData: app.partyData,
refereeId: store.getters.refereeId
})
.then(result => {
// 显示登录成功
app.$toast(result.message)
// 跳转回原页面
setTimeout(() => {
app.onNavigateBack(1)
}, 2000)
})
.catch(err => {
const resultData = err.result.data
// 显示错误信息
if (isEmpty(resultData)) {
app.$toast(err.result.message)
}
// 跳转回原页面
if (resultData.isBack) {
setTimeout(() => app.onNavigateBack(1), 2000)
}
})
.finally(() => app.isLoading = false)
}
},
// 获取微信登录的code
// https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
getCode() {
return new Promise((resolve, reject) => {
uni.login({
provider: 'weixin',
success: res => {
console.log('code', res.code)
resolve(res.code)
},
fail: reject
})
})
},
/**
* 登录成功-跳转回原页面
*/
onNavigateBack(delta = 1) {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack({
delta: Number(delta || 1)
})
} else {
this.$navTo('pages/index/index')
}
}
}
}
</script>
<style lang="scss" scoped>
// 微信授权登录
.wechat-auth {
width: 320rpx;
margin: 50rpx auto 0 auto;
.wechat-auth-container {
display: flex;
justify-content: center;
}
.icon {
width: 38rpx;
height: 38rpx;
margin-right: 15rpx;
}
.title {
font-size: 28rpx;
color: #666666;
}
}
</style>

238
pages/login/components/mp-weixin.vue Executable file
View File

@@ -0,0 +1,238 @@
<template>
<view class="container">
<view class="wechatapp">
<view class="header">
<!-- <open-data class="avatar" type="userAvatarUrl"></open-data> -->
<image class="image"
:src="storeInfo && storeInfo.image_url ? storeInfo.image_url : '/static/default-avatar.png'"></image>
</view>
</view>
<view class="auth-title">申请获取以下权限</view>
<view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
<view class="login-btn">
<!-- 获取微信用户信息 -->
<button class="button btn-normal" @click.stop="getUserProfile">授权登录</button>
</view>
<view class="no-login-btn">
<button class="button btn-normal" @click="handleCancel">暂不登录</button>
</view>
</view>
</template>
<script>
import store from '@/store'
import { isEmpty } from '@/utils/util'
import SettingModel from '@/common/model/Setting'
export default {
data() {
return {
// 商城基本信息
storeInfo: undefined,
// 微信小程序登录凭证 (code)
// 提交到后端，用于换取openid
code: ''
}
},
created() {
// 获取商城基本信息
this.getStoreInfo()
},
methods: {
// 获取商城基本信息
getStoreInfo() {
SettingModel.item('store').then(store => this.storeInfo = store)
// SettingModel.h5Url(true)
},
// 获取code
// https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
getCode() {
return new Promise((resolve, reject) => {
uni.login({
provider: 'weixin',
success: res => {
console.log('code', res.code)
resolve(res.code)
},
fail: reject
})
})
},
// 获取微信用户信息(新版)
getUserProfile() {
const app = this
wx.canIUse('getUserProfile') && wx.getUserProfile({
lang: 'zh_CN',
desc: '获取用户相关信息',
success({ userInfo }) {
console.log('用户同意了授权')
console.log('userInfo：', userInfo)
// 授权成功事件
app.onAuthSuccess(userInfo)
},
fail() {
console.log('用户拒绝了授权')
}
})
},
// 授权成功事件
// 这里分为两个逻辑:
// 1.将code和userInfo提交到后端，如果存在该用户 则实现自动登录，无需再填写手机号
// 2.如果不存在该用户, 则显示注册页面, 需填写手机号
// 3.如果后端报错了, 则显示错误信息
async onAuthSuccess(userInfo) {
const app = this
// 提交到后端
store.dispatch('LoginMpWx', {
partyData: {
code: await app.getCode(),
oauth: 'MP-WEIXIN',
userInfo
},
refereeId: store.getters.refereeId
})
.then(result => {
// 一键登录成功
app.$toast(result.message)
// 跳转回原页面
setTimeout(() => {
app.onNavigateBack()
}, 2000)
})
.catch(err => {
const resultData = err.result.data
// 显示错误信息
if (isEmpty(resultData)) {
app.$toast(err.result.message)
}
// 跳转回原页面
if (resultData.isBack) {
setTimeout(() => app.onNavigateBack(1), 2000)
}
// 判断还需绑定手机号
if (resultData.isBindMobile) {
app.onEmitSuccess(userInfo)
}
})
},
// 将oauth提交给父级
// 这里要重新获取code, 因为上一次获取的code不能复用(会报错)
async onEmitSuccess(userInfo) {
const app = this
app.$emit('success', {
oauth: 'MP-WEIXIN', // 第三方登录类型: MP-WEIXIN
code: await app.getCode(), // 微信登录的code, 用于换取openid
userInfo // 微信用户信息
})
},
/**
* 暂不登录
*/
handleCancel() {
// 跳转回原页面
this.onNavigateBack()
},
/**
* 登录成功-跳转回原页面
*/
onNavigateBack(delta = 1) {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack({
delta: Number(delta || 1)
})
} else {
this.$navTo('pages/index/index')
}
}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 0 60rpx;
font-size: 32rpx;
background: #fff;
min-height: 100vh;
}
.wechatapp {
padding: 80rpx 0 48rpx;
border-bottom: 1rpx solid #e3e3e3;
margin-bottom: 72rpx;
text-align: center;
.header {
width: 190rpx;
height: 190rpx;
border: 4rpx solid #fff;
margin: 0 auto 0;
border-radius: 50%;
overflow: hidden;
box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);
.image {
display: block;
width: 100%;
height: 100%;
}
}
}
.auth-title {
color: #585858;
font-size: 34rpx;
margin-bottom: 40rpx;
}
.auth-subtitle {
color: #888;
margin-bottom: 88rpx;
font-size: 28rpx;
}
.login-btn {
padding: 0 20rpx;
.button {
height: 88rpx;
background: #04be01;
color: #fff;
font-size: 30rpx;
border-radius: 999rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.no-login-btn {
margin-top: 20rpx;
padding: 0 20rpx;
.button {
height: 88rpx;
background: #dfdfdf;
color: #fff;
font-size: 30rpx;
border-radius: 999rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>

124
pages/login/components/wx-official.vue Executable file
View File

@@ -0,0 +1,124 @@
<template>
<!-- 跳转到微信授权地址 -->
</template>
<script>
import queryStringify from '@/js_sdk/queryStringify'
import store from '@/store'
import { isEmpty, urlEncode } from '@/utils/util'
import * as Api from '@/api/wxofficial'
export default {
data() {
return {
// 页面来源是否为微信回调
isCallback: false
}
},
created() {
// 处理微信回调
this.onCallback()
// 跳转到微信授权
this.redirectUrl()
},
methods: {
// 处理微信回调
onCallback() {
// 接收微信传来的参数
const wxParam = queryStringify.parse(window.location.search)
if (!isEmpty(wxParam)) {
const url = window.location.href.replace(window.location.search, '')
window.location.href = url + '?' + urlEncode(wxParam)
return
}
// 获取code参数
const query = this.$route.query
if (isEmpty(query) || !query.code) {
return
}
// 请求后端获取微信用户信息
this.isCallback = true
Api.oauthUserInfo(query.code)
.then(({ data }) => {
console.log('用户同意了授权')
console.log('userInfo：', data)
// 授权成功事件
this.onAuthSuccess(data)
})
},
// 授权成功事件
// 这里分为两个逻辑:
// 1.将openid和userInfo提交到后端，如果存在该用户 则实现自动登录，无需再填写手机号
// 2.如果不存在该用户, 则显示注册页面, 需填写手机号
// 3.如果后端报错了, 则显示错误信息
async onAuthSuccess({ userInfo, encryptedData, iv }) {
const app = this
// 提交到后端
store.dispatch('LoginWxOfficial', {
partyData: { oauth: 'H5-WEIXIN', userInfo, encryptedData, iv },
refereeId: store.getters.refereeId
})
.then(result => {
// 一键登录成功
app.$toast(result.message)
// 跳转回原页面
setTimeout(() => app.onNavigateBack(), 2000)
})
.catch(err => {
const resultData = err.result.data
// 显示错误信息
if (isEmpty(resultData)) {
app.$toast(err.result.message)
}
// 判断还需绑定手机号
if (resultData.isBindMobile) {
app.onEmitSuccess({ userInfo, encryptedData, iv })
}
})
},
// 跳转到微信授权
redirectUrl() {
if (this.isCallback) {
return
}
const callbackUrl = window.location.href
Api.oauthUrl(callbackUrl)
.then(result => {
const url = result.data.redirectUrl
window.location.href = url
})
},
// 将oauth提交给父级
async onEmitSuccess({ userInfo, encryptedData, iv }) {
this.$emit('success', {
oauth: 'H5-WEIXIN', // 第三方登录类型: H5-WEIXIN
userInfo,
encryptedData,
iv
})
},
/**
* 登录成功-跳转回原页面
*/
onNavigateBack(delta = 1) {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack({
delta: Number(delta || 1)
})
} else {
this.$navTo('pages/index/index')
}
}
}
}
</script>