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.
357 lines
9.6 KiB
357 lines
9.6 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" @input="input"
|
|
backgroundColor="#f2f2f2"></fui-input>
|
|
</view>
|
|
|
|
<view style="width: 95%;margin: auto;">
|
|
<fui-input borderTop :padding="['20rpx','32rpx']" v-model="password1" placeholder="登录密码"
|
|
:password="password" @input="input" 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=学员
|
|
loginType_str:'',//登陆类型中文名字
|
|
loginType_Arr:[
|
|
{
|
|
value: '1',
|
|
text: '教师登陆'
|
|
},
|
|
{
|
|
value: '2',
|
|
text: '销售登陆'
|
|
},
|
|
{
|
|
value: '3',
|
|
text: '学员登陆'
|
|
}
|
|
],
|
|
picker_show_loginType:false,//是否显示下拉窗组件
|
|
|
|
|
|
path_arr:{
|
|
'1':'/pages/coach/home/index',//教练
|
|
'2':'/pages/market/index/index',//销售
|
|
'3':'/pages/student/index/index',//学员
|
|
},
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.loginType = options.loginType ?? '2'//登陆类型|1=教练,2=销售,3=学员
|
|
const selectedItem = this.loginType_Arr.find(item => item.value === String(this.loginType));
|
|
this.loginType_str = selectedItem ? selectedItem.text : '未知类型';
|
|
// uni.hideHomeButton()
|
|
// console.log(uni.getStorageSync('um_id'))
|
|
// 防止 onShow 触发后重复 init
|
|
|
|
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
|
|
},
|
|
input(e) {
|
|
//console.log(e)
|
|
},
|
|
change() {
|
|
this.password = !this.password
|
|
},
|
|
forgot() {
|
|
uni.navigateTo({
|
|
url: '/pages/student/login/forgot'
|
|
})
|
|
},
|
|
//登陆
|
|
async login() {
|
|
|
|
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
|
|
}
|
|
|
|
let item = {};
|
|
item['username'] = this.user
|
|
item['password'] = this.password1
|
|
|
|
let res
|
|
//判断登陆类型|1=教练,2=销售,3=学员
|
|
if(this.loginType == 1){
|
|
//销售
|
|
let params = {
|
|
'phone': this.user,
|
|
'password': this.password1,
|
|
'login_type': 1,
|
|
'mini_wx_openid':this.mini_wx_openid,//微信小程序openid
|
|
}
|
|
res = await apiRoute.personnelLogin(params)
|
|
}else if(this.loginType == 2){
|
|
|
|
//销售
|
|
let params = {
|
|
'phone': this.user,
|
|
'password': this.password1,
|
|
'login_type': 2,
|
|
'mini_wx_openid':this.mini_wx_openid,//微信小程序openid
|
|
}
|
|
res = await apiRoute.personnelLogin(params)
|
|
console.log(123123,res)
|
|
|
|
}else if (this.loginType == 3){
|
|
//学生
|
|
let params = {
|
|
'phone': this.user,
|
|
'password': this.password1,
|
|
'login_type': 2,
|
|
'mini_wx_openid':this.mini_wx_openid,//微信小程序openid
|
|
}
|
|
res = await apiRoute.xy_login(params)
|
|
}
|
|
|
|
if(!res.code){
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.setStorageSync('expires_time', res.data.expires_time);//token过期时间
|
|
uni.setStorageSync('token', res.data.token);
|
|
let userType = res.data.user_type
|
|
console.log('用户类型', userType)
|
|
uni.setStorageSync('userType', userType);
|
|
uni.setStorageSync('tabBerIndex', 0);
|
|
|
|
let url_path = ''
|
|
switch (String(userType)) {
|
|
case '1': //教练
|
|
url_path = '/pages/coach/home/index'
|
|
break;
|
|
case '2': //销售
|
|
url_path = '/pages/market/index/index'
|
|
break;
|
|
case '3': //学员
|
|
url_path = '/pages/student/index/index'
|
|
break;
|
|
default:
|
|
uni.showToast({
|
|
title: '用户类型错误',
|
|
icon: 'none'
|
|
})
|
|
return;
|
|
}
|
|
uni.navigateTo({
|
|
url: url_path
|
|
})
|
|
},
|
|
|
|
//获取微信小程序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
|
|
|
|
//@todo 上线时请删除这个判断
|
|
if(this.loginType == 1){
|
|
//教师端
|
|
this.user= '15374889135' //账户
|
|
this.password1= '15374889135' //密码
|
|
}else if(this.loginType == 2){
|
|
//销售端
|
|
this.user= '15148228108' //账户
|
|
this.password1= '123123' //密码
|
|
}else{
|
|
//学生端
|
|
this.user= '13042409890' //账户
|
|
this.password1= '13042409890' //密码
|
|
}
|
|
|
|
},
|
|
|
|
//检测首页是否正确跳转-不正确则进行重定向
|
|
async openViewHome() {
|
|
const userType = String(uni.getStorageSync('userType') || '');
|
|
const token = uni.getStorageSync('token') || ''
|
|
|
|
if(!userType || !token){
|
|
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
|
|
});
|
|
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>
|