171 lines
3.5 KiB
Vue
171 lines
3.5 KiB
Vue
<template>
|
|
<view class="login-page" v-if="show">
|
|
<view class="title">
|
|
<text class="title-tip">wflow-pro 登录</text>
|
|
<text class="title-desc">体验wflow-pro移动端完整功能</text>
|
|
</view>
|
|
<view>
|
|
<input class="login-input" type="text" placeholder="账号" clearable />
|
|
<input class="login-input" password type="text" placeholder="密码" clearable />
|
|
</view>
|
|
<view class="opration">
|
|
<label>
|
|
<checkbox style="transform: scale(0.8);" activeBackgroundColor="#4478F7" iconColor="#ffffff" value="cb"
|
|
checked="true" />记住我
|
|
</label>
|
|
<text>忘记密码了</text>
|
|
</view>
|
|
<button type="primary" style="border-radius: 13rpx;" @click="chooseUser">选择体验用户</button>
|
|
<view class="other-login">
|
|
<text>其他方式登录</text>
|
|
</view>
|
|
<view class="login-type">
|
|
<image class="img" src="/static/qqlogin.png" mode="aspectFit"></image>
|
|
<image class="img" src="/static/wxlogin.png" mode="aspectFit"></image>
|
|
</view>
|
|
<org-picker ref="orgPicker" showNav :multiple="false" type="user" :selected="loginUser ? [loginUser]:null"
|
|
@ok="selectOk"></org-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
login
|
|
} from '@/api/org.js'
|
|
import OrgPicker from '@/components/OrgPicker.vue'
|
|
import {
|
|
onMounted,
|
|
ref
|
|
} from 'vue';
|
|
|
|
const orgPicker = ref()
|
|
const show = ref(false)
|
|
const loginUser = ref(null)
|
|
const loginParams = ref({
|
|
username: '',
|
|
password: ''
|
|
})
|
|
|
|
onMounted(() => {
|
|
|
|
// loginUser.value = uni.getStorageSync('loginUser')
|
|
// if (loginUser.value) {
|
|
// uni.reLaunch({
|
|
// url: '/pages/submit/submit'
|
|
// })
|
|
// }
|
|
})
|
|
|
|
function doLogin(userId) {
|
|
login(userId).then(rsp => {
|
|
//登录信息设置到本地
|
|
uni.setStorageSync('loginUser', rsp.data)
|
|
uni.setStorageSync('wflow-token', rsp.data.token)
|
|
uni.showToast({
|
|
title: '欢迎' + rsp.data.userName,
|
|
icon: 'success'
|
|
})
|
|
uni.reLaunch({
|
|
url: '/pages/submit/submit'
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: '登录失败',
|
|
icon: 'error'
|
|
})
|
|
})
|
|
}
|
|
|
|
function selectOk(users) {
|
|
loginUser.value = users[0]
|
|
orgPicker.value.close()
|
|
doLogin(loginUser.value.id)
|
|
}
|
|
|
|
//演示系统选择登录的用户
|
|
function chooseUser() {
|
|
orgPicker.value.show()
|
|
uni.showToast({
|
|
title: '请选择要体验的用户',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
page {
|
|
background-color: white !important;
|
|
}
|
|
|
|
.login-page {
|
|
padding: 0 32rpx;
|
|
|
|
.title {
|
|
padding: 256rpx 0 96rpx 0;
|
|
|
|
.title-tip {
|
|
display: block;
|
|
color: #373E60;
|
|
font-size: 50rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 13rpx;
|
|
}
|
|
|
|
.title-desc {
|
|
font-weight: 500;
|
|
color: #959595;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.login-input {
|
|
font-size: 32rpx;
|
|
padding: 25.6rpx 48rpx;
|
|
background-color: #F7F8F9;
|
|
border-radius: 13rpx;
|
|
margin: 32rpx 0;
|
|
width: calc(100% - 96rpx);
|
|
}
|
|
|
|
.opration {
|
|
display: flex;
|
|
margin-bottom: 32rpx;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #4478F7;
|
|
}
|
|
|
|
.other-login {
|
|
margin: 128rpx 0;
|
|
width: 100%;
|
|
height: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-bottom: 1px solid #878787;
|
|
color: #878787;
|
|
|
|
text {
|
|
background-color: white;
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
|
|
.login-type {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.img:first-child {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
}
|
|
|
|
.img {
|
|
margin: 0 32rpx;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |