<template>
|
<view class="content">
|
<view class="logo">
|
<!-- <up-text type="primary" size="30" text="LOGO"></up-text> -->
|
<image class="image-logo" lazy-load src="../../static/image/loginlogo.png"></image>
|
</view>
|
<view class="card" v-if="loginShow">
|
<view class="login-phone">
|
<view class="phone">
|
<up-input placeholder="请输入手机号" border="bottom" v-model="phone" prefixIcon="phone"
|
prefixIconStyle="font-size: 22px;color: #909399" size="small"></up-input>
|
</view>
|
<view class="code">
|
<view class="code-input">
|
<up-input placeholder="请输入验证码" border="bottom" v-model="code" prefixIcon="bell"
|
prefixIconStyle="font-size: 22px;color: #909399" size="small"></up-input>
|
</view>
|
<view class="wrap">
|
<u-toast ref="uToastRef"></u-toast>
|
<u-code :seconds="seconds" @end="end()" @start="start()" ref="uCodeRef"
|
@change="codeChange"></u-code>
|
<u-button type="primary" @tap="getCode" size="small" :disabled="canSandMsg">{{ tips
|
}}</u-button>
|
</view>
|
</view>
|
<view class="submit">
|
<u-button size="large" type="primary" @click="submit">登录</u-button>
|
</view>
|
</view>
|
</view>
|
<view class="info" v-if="userProfileShow">
|
<UserProfile @saveCB="userProfileCB" />
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from "vue";
|
import { useBasicInfoStore } from "../../store/basicInfo"
|
import { GetSMSCode, GetWXCode2Session, RegisterUserByCellphone, LoginByWXOpenID } from "../../apis/authapi"
|
import { GetVIPOrganization } from "../../apis/api"
|
import UserProfile from "../../components/userProfile/userProfile.vue"
|
|
export default {
|
components: { UserProfile },
|
setup() {
|
const userStore = useBasicInfoStore()
|
const { proxy } = getCurrentInstance();
|
const state = reactive({
|
loginShow: false,
|
phone: '',
|
code: '',
|
tips: '',
|
seconds: 60,
|
bindingPhone: '',
|
canSandMsg: false,
|
userProfileShow: false,
|
})
|
|
onMounted(() => {
|
Init();
|
});
|
|
const Init = () => {
|
getOpenID();
|
|
// uni.navigateTo({
|
// url: '/pages/question/type'
|
// });
|
// uni.switchTab({
|
// url: '/pages/question/type' // 目标页面路径
|
// });
|
}
|
|
const getOpenID = () => {
|
uni.login({
|
provider: 'weixin',
|
success: function (loginRes) {
|
// 登录成功
|
uni.getUserInfo({
|
provider: 'weixin',
|
success: function (info) {
|
userStore.$state.userinfo = info.userInfo;
|
// 获取用户信息成功, info.authResult保存用户信息
|
|
// uni.showLoading({
|
// title: '身份获取中...',
|
// });
|
GetWXCode2Session(loginRes.code).then((res) => {
|
// uni.hideLoading();
|
if (res) {
|
let session_key = res.data.session_key;
|
let openid = res.data.openid;
|
|
let params2 = {
|
session_key: session_key,
|
openid: openid,
|
};
|
userStore.$state.userinfo.openid = openid;
|
|
uni.showLoading({
|
title: '身份获取中...',
|
});
|
LoginByWXOpenID(params2).then((res2) => {
|
uni.hideLoading();
|
|
let token = '';
|
if (res2) {
|
if (res2.code == 200) {
|
if (res2.data) {
|
token = res2.data.token;
|
uni.setStorageSync('token', token)
|
userStore.$state.hasLogin = true;
|
for (const key in res2.data) {
|
userStore.userinfo[key] = res2.data[key]
|
}
|
|
if (!res2.data.avatarurl || !res2.data.nickname) {
|
state.userProfileShow = true;
|
userStore.school = null
|
userStore.college = null
|
userStore.major = null
|
} else {
|
GetVIPOrganization(userStore.userinfo.id).then((res3) => {
|
if (!res3) {
|
uni.navigateTo({
|
url: '/pages/index/index'
|
});
|
} else {
|
for (const key in res3) {
|
userStore.masterOrganization[key] = res3[key]
|
}
|
userStore.schoolName = userStore.masterOrganization.organizationname
|
userStore.collegeName = userStore.masterOrganization.departmentname
|
userStore.majorName = userStore.masterOrganization.majorname
|
userStore.updatecount = userStore.masterOrganization.updatecount ? userStore.masterOrganization.updatecount : 0
|
uni.switchTab({
|
url: '/pages/question/list'
|
});
|
}
|
|
|
// uni.navigateTo({
|
// url: '/pages/question/list'
|
// });
|
})
|
}
|
}
|
} else if (res2.message == 'MSG_ERROR_USER_NOT_EXISTED') {
|
state.loginShow = true
|
console.log("未绑定手机号")
|
}
|
}
|
});
|
}
|
// else {
|
// uni.hideLoading();
|
// }
|
})
|
}
|
})
|
|
},
|
fail: function (err) {
|
// 登录授权失败
|
// err.code是错误码
|
}
|
});
|
}
|
|
|
const codeChange = (text) => {
|
state.tips = text;
|
};
|
|
const getCode = () => {
|
if (state.canSandMsg == true) {
|
return;
|
}
|
if (!state.phone) {
|
uni.$u.toast('请输入手机号');
|
return;
|
}
|
if (!/(^1[3|4|5|7|8|9][0-9]{9}$)/.test(state.phone)) {
|
uni.$u.toast('请输入正确的手机号码');
|
return;
|
}
|
uni.showLoading({
|
title: '正在获取验证码',
|
});
|
GetSMSCode(state.phone).then(resp => {
|
uni.hideLoading();
|
if (resp.code == 200) {
|
setTimeout(() => {
|
// 这里此提示会被start()方法中的提示覆盖
|
uni.$u.toast('验证码已发送');
|
// 通知验证码组件内部开始倒计时
|
proxy.$refs.uCodeRef.start();
|
}, 2000);
|
} else {
|
uni.$u.toast('验证码已发送失败');
|
}
|
}).catch(err => {
|
uni.hideLoading();
|
uni.$u.toast('验证码已发送失败');
|
});
|
};
|
|
const end = () => {
|
state.canSandMsg = false
|
//uni.$u.toast('倒计时结束');
|
};
|
|
const start = () => {
|
state.canSandMsg = true
|
//uni.$u.toast('倒计时开始');
|
};
|
|
const submit = () => {
|
if (!state.phone) {
|
uni.$u.toast('请输入手机号');
|
return;
|
}
|
if (!/(^1[3|4|5|7|8|9][0-9]{9}$)/.test(state.phone)) {
|
uni.$u.toast('请输入正确的手机号码');
|
return;
|
}
|
uni.showLoading({
|
title: '登录中...',
|
});
|
let params2 = {
|
openid: userStore.$state.userinfo.openid,
|
cellphone: state.phone,
|
randomcode: state.code
|
};
|
RegisterUserByCellphone(params2).then((res2) => {
|
uni.hideLoading();
|
let token = '';
|
if (res2) {
|
if (res2.code == 200) {
|
if (res2.data) {
|
token = res2.data.token;
|
userStore.userinfo.id = res2.data.id
|
uni.setStorageSync('token', token)
|
userStore.$state.hasLogin = true;
|
state.loginShow = false
|
state.userProfileShow = true
|
// uni.navigateTo({
|
// url: '/pages/question/type'
|
// });
|
}
|
} else {
|
uni.$u.toast('登录失败');
|
}
|
}
|
});
|
}
|
|
const userProfileCB = () => {
|
uni.navigateTo({
|
url: '/pages/index/index'
|
});
|
}
|
|
|
|
|
return { ...toRefs(state), userStore, codeChange, getCode, end, start, submit, userProfileCB }
|
}
|
}
|
|
|
|
</script>
|
|
<style scoped lang="scss">
|
.center {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
// justify-content: center;
|
}
|
|
.content {
|
@extend .center;
|
height: 100vh;
|
width: 100%;
|
background-color: #f5f5f5;
|
}
|
|
.logo {
|
@extend .center;
|
height: 25vh;
|
justify-content: center;
|
.image-logo{
|
height: 25vh;
|
width: 50vw;
|
}
|
}
|
|
.card {
|
width: calc(90% - 80rpx);
|
//height: 15vh;
|
overflow: auto;
|
border-radius: 10px;
|
background-color: #fff;
|
margin-top: 5vh;
|
padding: 20rpx 40rpx 60rpx 40rpx;
|
|
.login-phone {
|
width: 100%;
|
overflow: auto;
|
margin-top: 20rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
.phone {
|
width: 95%;
|
height: 60rpx;
|
margin-top: 20rpx;
|
}
|
|
.code {
|
width: 95%;
|
height: 100rpx;
|
margin-top: 50rpx;
|
display: flex;
|
justify-content: space-between;
|
|
.code-input {
|
padding: 24rpx 0rpx;
|
width: 70%;
|
}
|
|
.wrap {
|
padding: 24rpx 0rpx;
|
}
|
}
|
|
.submit {
|
width: 95%;
|
overflow: auto;
|
margin-top: 100rpx;
|
}
|
}
|
}
|
|
.info {
|
width: 80%;
|
//height: 15vh;
|
overflow: auto;
|
border-radius: 10px;
|
background-color: #fff;
|
margin-top: 5vh;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
</style>
|
