驗證碼登錄
<template>
<view class="wx-login">
<view class="login-Box">
<text class="title">
歡迎登錄
</text>
<text class="subTitle">
再就業(yè)男團系統(tǒng)
</text>
<view class="login-Form">
<text>手機號碼</text>
<input v-model="formData.phone" :auto-height="true" placeholder="請輸入手機號碼" class="login-Form-value"
confirm-type="done" />
</view>
<view class="login-Form">
<text>驗證碼</text>
<input v-model="formData.code" :auto-height="true" placeholder="請輸入驗證碼" class="login-Form-value"
confirm-type="done" />
<button @click="getSysCode" :disabled="isGet" class="getCode"
:class="{'sendCode':(isGet === true)}">{{ isGet ? "重新發(fā)送"+(num) : "獲取驗證碼" }}</button>
</view>
<view class="loginBtn" @click="submit">
登錄
</view>
<view class="forgetPassword" @click="empowerFn">微信一鍵登錄</view>
</view>
</view>
</template>
<script>
import {
getWXLoginCode
} from "../../utils/wxTool.js"
import {
getWXTestPhone,
getWXCode,
updateWXPassword,
getWXPhoneLogin
} from "../../api/login.js"
import {
showToast
} from "../../utils/common.js"
export default {
name: "WxLogin",
data() {
return {
formData: {
phone: '',
code: '',
},
isGet: false,
timer: "",
num: 60,
}
},
watch: {
num(newValue) {
if (newValue == 0) {
this.num = 60;
clearInterval(this.timer);
this.isGet = false;
}
},
},
mounted() {},
methods: {
// 取消登錄
cancelLogin() {
uni.navigateBack({
});
},
// onShow: function () {
// wx.hideHomeButton();
// },
//
getSysCode() {
if(!this.formData.phone){
showToast('請輸入手機號');
return
}
getWXCode({
phone: this.formData.phone,
type:1,
}).then(res => {
if (res.code == 0) {
showToast(res.msg);
this.isGet = true;
this.timer = setInterval(() => {
this.num--;
}, 1000);
}
})
},
// 登錄
submit() {
if(!this.formData.phone){
showToast('請輸入手機號');
return
}
if(!this.formData.code){
showToast('請獲取驗證碼');
return
}
getWXPhoneLogin({
phone: this.formData.phone,
code: this.formData.code,
}).then(res => {
console.log(res,'resuuuu')
if(res) {
const {
tokenInfo,
name,
userId,
enterpriseName,
phone,
type,
enterpriseType,
enterpriseId
} = res;
// console.log(phone,'phone');
this.$store.commit("login/setUserToken", tokenInfo.tokenValue);
// this.$store.commit("login/setUserName", name);
this.$store.commit("login/setPhone", phone);
this.$store.commit("login/setenterpriseType", enterpriseType);
this.$store.commit("login/setenterpriseId", enterpriseId);
this.$store.commit("login/setUserDetail", {
...res
});
this.$store.commit("login/setUserID", userId)
if(type == 2 && !enterpriseId){
showToast('當前賬號正在審核中，審核通過后才可登陸')
}else{
uni.switchTab({
url: "../home/home"
})
}
}
console.log(5555)
}).catch(err => {
console.log(err)
})
},
empowerFn(){
uni.reLaunch({
url: '/pages/login/wxLogin'
})
}
}
}
</script>
<style lang="scss" scoped>
@import "@/static/css/variable.scss";
.wx-login {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
box-sizing: border-box;
height: 100vh;
background-image: url(../../static/img/mescroll/loginBG.png);
background-size: 100% 100%;
}
.login-Box {
width: 606rpx;
margin-top: 249rpx;
display: flex;
flex-direction: column;
.title {
font-size: 48rpx;
font-weight: 700;
line-height: 56rpx;
color: #282F38;
}
.subTitle {
font-size: 28rpx;
font-weight: 400;
line-height: 41rpx;
color: #282F38;
margin-top: 8rpx;
}
.login-Form {
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0px;
line-height: 40rpx;
color: #282F38;
margin-top: 40rpx;
position: relative;
&-value {
margin-top: 36rpx;
padding: 0 0 16rpx 6rpx;
width: 100%;
display: flex;
border-bottom: 1px solid #E5E6EB;
}
.getCode {
width: 102px;
height: 32px;
line-height: 32px;
// border-radius: 20px;
background: rgba(0, 122, 255, 1);
font-size: 14px;
color: rgba(255, 255, 255, 1);
position: absolute;
top: 55rpx;
right: 0;
}
.sendCode {
width: 106px !important;
height: 32px;
line-height: 32px;
background: rgba(232, 243, 255, 1) !important;
color: rgba(148, 191, 255, 1) !important;
border: 1px solid transparent !important;
box-sizing: border-box;
}
}
.loginBtn {
margin-top: 144rpx;
border-radius: 328rpx;
background-color: #166DF1;
width: 100%;
height: 88rpx;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 32rpx;
font-weight: 400;
}
.forgetPassword {
font-size: 12px;
font-weight: 400;
letter-spacing: 0px;
line-height: 22px;
color: rgba(134, 144, 156, 1);
text-align: center;
vertical-align: top;
margin-top: 28px;
}
}
</style>
文章來源：http://www.zghlxwxcb.cn/news/detail-600020.html
微信一鍵登錄
<template>
<view class="wx-login">
<view class="login-Box">
<view class="img">
<image src="../../static/img/icons/logowx.png" style="width: 100px;height: 100px; "></image>
</view>
<view class="subTitle">再就業(yè)男團系統(tǒng)</view>
<view class="subTitle">登錄前需要您的授權</view>
<view class="title" style="margin-top:48rpx">再就業(yè)男團系統(tǒng)不會將您的</view>
<view class="title">個人信息提供給第三方僅用于該小程序！</view>
<button class="loginBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手機號快捷登錄</button>
<view class="forgetPassword" @click="login">手機驗證碼登錄</view>
</view>
</view>
</template>
<script>
import {
getWXLoginCode
} from "../../utils/wxTool.js"
import {
getWXLoginToken
} from "../../api/login.js"
import {
showToast
} from "../../utils/common.js"
import {
getWXLogin
} from "../../api/login.js"
export default {
name: "WxLogin",
data() {
return {
formData: {
loginName: '',
password: ''
}
}
},
mounted() {},
methods: {
onShow: function () {
wx.hideHomeButton();
},
// 登錄
async getPhoneNumber(e) {
// 允許授權跳轉(zhuǎn)首頁
if (e.detail.errMsg == 'getPhoneNumber:ok') {
let code= e.detail.code;
getWXLogin({
code:code
}).then(res=>{
console.log(res,'res')
if(res.code == 0) {
const {
tokenInfo,
name,
userId,
enterpriseName,
phone,
type,
enterpriseType,
enterpriseId
} = res.data;
// console.log(phone,'phone');
this.$store.commit("login/setUserToken", tokenInfo.tokenValue);
// this.$store.commit("login/setUserName", name);
this.$store.commit("login/setPhone", phone);
this.$store.commit("login/setenterpriseType", enterpriseType);
this.$store.commit("login/setenterpriseId", enterpriseId);
this.$store.commit("login/setUserDetail", {
...res
});
this.$store.commit("login/setUserID", userId)
if(type == 2 && !enterpriseId){
showToast('當前賬號正在審核中，審核通過后才可登陸')
}else{
uni.switchTab({
url: "../home/home"
})
}
}
}).catch(err => {
console.log(err)
}else if (e.detail.errMsg === 'getPhoneNumber:fail user deny' ||
e.detail.errMsg === 'getPhoneNumber:fail:user deny') {
// 拒絕授權的操作
}
})
},
login(){
uni.navigateTo({
url: '/pages/login/phoneLogin'
})
}
}
}
</script>
<style lang="scss" scoped>
@import "@/static/css/variable.scss";
.wx-login {
display: flex;
// align-items: center;
justify-content: center;
width: 100%;
box-sizing: border-box;
height: 100vh;
background-image: url(../../static/img/mescroll/loginBG.png);
background-size: 100% 100%;
}
.login-Box {
width: 606rpx;
margin-top: 112rpx;
.img {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 110rpx;
}
.subTitle {
font-size: 16px;
font-weight: 700;
letter-spacing: 0px;
line-height: 22px;
color: rgba(26, 26, 26, 1);
text-align: center;
}
.title{
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 20.27px;
color: rgba(102, 102, 102, 1);
text-align: center;
}
.loginBtn {
margin-top: 72rpx;
border-radius: 328rpx;
background-color: #166DF1;
width: 100%;
height: 88rpx;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 32rpx;
font-weight: 400;
}
.forgetPassword {
font-size: 12px;
font-weight: 400;
letter-spacing: 0px;
line-height: 22px;
color: rgba(134, 144, 156, 1);
text-align: center;
vertical-align: top;
margin-top: 28px;
}
}
</style>
文章來源地址http://www.zghlxwxcb.cn/news/detail-600020.html
到了這里，關于微信小程序的微信一鍵登錄與驗證碼登錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
