智慧教务系统
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

328 lines
8.3 KiB

<template>
<view>
<view style="height: 500rpx;background-color:#fff;">
<view style="height: 150rpx;"></view>
<view class="image-container;">
<image :src="$util.img('/uniapp_src/static/images/login/login1.png')" class="base-image"></image>
<image :src="$util.img('/uniapp_src/static/images/login/login2.png')" class="overlay-image"></image>
</view>
<view style="width: 100%;font-size: 60rpx;color: #ccc;text-align: center;margin-top: 60rpx;">
运动识堂
</view>
</view>
<view :style="{'background-color':'#fff','width':'100%','height':'100vh' }">
<view style="width: 95%;height: 30rpx;"></view>
<view style="width: 95%;margin:30rpx auto;">
<fui-input borderTop placeholder="登录账号" v-model="user" backgroundColor="#f2f2f2"></fui-input>
</view>
<view style="width: 95%;margin: auto;">
<fui-input borderTop :padding="['20rpx','32rpx']" v-model="password1" placeholder="登录密码"
:password="password" backgroundColor="#f2f2f2">
<fui-icon :name="password?'invisible':'visible'" color="#B2B2B2" :size="50"
@click="change"></fui-icon>
</fui-input>
</view>
<view style="width: 95%;margin:30rpx auto;">
<fui-input @click="picker_show_loginType=true" v-model="loginType_str" placeholder="请选择登录类型"
backgroundColor="#f2f2f2">
<fui-icon name="arrowdown" color="#B2B2B2" :size="50" @click="change"></fui-icon>
</fui-input>
<fui-picker layer="1" :linkage="true" :options="loginType_Arr" :show="picker_show_loginType"
@change="changePicker_loginType" @cancel="picker_show_loginType=false"></fui-picker>
</view>
<view style="width: 95%;margin:60rpx auto;">
<fui-button background="#00be8c" radius="5rpx" @click="login">登录</fui-button>
</view>
<view style="width: 95%;margin:60rpx auto;">
<fui-button background="#fff" radius="5rpx" @click="forgot" color="#00be8c">忘记登录密码</fui-button>
</view>
</view>
</view>
</template>
<script>
import apiRoute from '@/api/apiRoute.js';
export default {
data() {
return {
inited: false, // 添加标记位控制 init 只执行一次
password: true,
user: '', //账户
password1: '', //密码
mini_wx_openid: '', //微信小程序openid
loginType: '', //登陆类型|1=市场,2=教练,3=销售,4=学员,5=教务
loginType_str: '', //登陆类型中文名字
loginType_Arr: [{
value: '1',
text: '市场登陆'
},
{
value: '2',
text: '教练登陆'
},
{
value: '3',
text: '销售登陆'
},
{
value: '2',
text: '教务登陆'
},
{
value: '4',
text: '学员登陆'
},
],
picker_show_loginType: false, //是否显示下拉窗组件
path_arr: {
'1': '/pages/market/home/index', //市场
'2': '/pages/coach/home/index', //教练
'3': '/pages/market/index/index', //销售
'4': '/pages/student/index/index', //学员
'5': '/pages/academic/home/index', //教务
},
}
},
onLoad(options) {
this.loginType = options.loginType ?? '1' //登陆类型|1=市场,2=教练,3=销售,4=学员,5=教务
const selectedItem = this.loginType_Arr.find(item => item.value === String(this.loginType));
this.loginType_str = selectedItem ? selectedItem.text : '未知类型';
let res_codes = options.res_codes || '' //这个是axios.js传错来的接口请求返回的code,如果是401时则说明登陆报错,此时不应进入下方初始化方法
if (!this.inited && !res_codes) {
this.openViewHome()
this.inited = true
}
},
methods: {
async init() {
//条件编译 微信小程序
//#ifdef MP-WEIXIN
await this.getMiNiWxOpenId()
//#endif
},
change() {
this.password = !this.password
},
forgot() {
this.$navigateTo({
url: '/pages/student/login/forgot'
})
},
//登陆
async login() {
try {
// 参数验证
if (!this.user) {
uni.showToast({
title: '请输入手机号',
icon: 'none'
});
return;
}
if (!this.password1) {
uni.showToast({
title: '请输入密码',
icon: 'none'
});
return;
}
if (!this.loginType) {
uni.showToast({
title: '请选择登录类型',
icon: 'none'
});
return;
}
const params = {
phone: this.user,
password: this.password1,
login_type: this.loginType,
mini_wx_openid: this.mini_wx_openid //微信小程序openid
};
console.log('登录参数:', params);
let res;
if (this.loginType != 4) {
//员工登录
res = await apiRoute.personnelLogin(params);
} else {
//学生
res = await apiRoute.xy_login(params);
}
if (res && res.code === 1) { // 成功状态码为1
// 登录成功
if (res.data && res.data.token) {
uni.setStorageSync("token", res.data.token);
// 保存用户类型
if (res.data.user_type) {
uni.setStorageSync("userType", res.data.user_type);
}
// 保存过期时间
if (res.data.expires_time) {
uni.setStorageSync("expires_time", res.data.expires_time);
}
// 返回用户信息
if (res.data.userinfo){
uni.setStorageSync('userInfo',res.data.userinfo)
}
}
uni.showToast({
title:'登录成功',
icon: 'success'
});
this.openViewHome();
} else {
uni.showToast({
title: res.msg || '登录失败',
icon: 'none'
});
}
} catch (error) {
console.error('登录失败:', error);
uni.showToast({
title: error || '登录失败,请重试',
icon: 'none'
});
}
},
//获取微信小程序openid
// 获取微信登录 code 并请求 openid
async getMiNiWxOpenId() {
uni.login({
provider: 'weixin',
success: (res) => {
const code = res.code;
this.fetchOpenId(code); // 调用单独方法
},
fail: () => {
uni.showToast({
title: '微信登录失败',
icon: 'none'
});
}
});
},
// 获取微信登录 code 并请求 openid
async fetchOpenId(code) {
let params = {
code: code,
}
let res = await apiRoute.common_getMiniWxOpenId(params)
if (res.code != 1) {
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.mini_wx_openid = res.data.openid
},
//登录类型选择相关
changePicker_loginType(e) {
console.log('监听选择', e)
this.loginType = e.value
this.loginType_str = e.text
this.picker_show_loginType = false
},
//检测首页是否正确跳转-不正确则进行重定向
async openViewHome() {
const userType = String(uni.getStorageSync('userType') || '');
const token = uni.getStorageSync('token') || ''
if (!userType) {
uni.showToast({
title: '您的角色不能访问本功能,请联系管理员',
icon: 'none'
})
return
}
if (!token) {
uni.showToast({
title: '请先登录',
icon: 'none'
})
return
}
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const thisPath = '/' + currentPage.route;
const openPath = this.path_arr[userType];
console.log('当前路径:', thisPath);
console.log('用户类型:', userType);
console.log('应跳转路径:', openPath);
if (thisPath !== openPath) {
// 如果不是正确的首页路径,则跳转到对应角色首页
uni.setStorageSync('tabBerIndex', 0)
// 使用 redirectTo 替代 navigateTo,避免页面栈堆积
uni.redirectTo({
url: openPath,
complete(e) {
console.log(e)
}
});
return
}
// 如果是正确的路径,交给 onShow 控制初始化
},
}
}
</script>
<style lang="less" scoped>
page {
font-weight: normal;
}
.fui-section__title {
margin-left: 32rpx;
}
.fui-left__icon {
padding-right: 24rpx;
}
.image-container {
margin: auto;
position: relative;
width: 150rpx;
/* 设置与第一张图片相同的宽度 */
height: 150rpx;
/* 设置与第一张图片相同的高度 */
}
.base-image {
width: 100%;
height: 100%;
}
.overlay-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100rpx;
height: 100rpx;
}
</style>