123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230 |
- <template>
- <view class="container">
- <view class="bg">
- <image src="../../static/img/login-bg.png" mode="widthFix"></image>
- </view>
- <view class="login_text">
- <view class="login_title">
- 校企联合评分系统
- </view>
- <view class="login_input flex">
- <view class="login_img">
- <image src="../../static/icon/user.png" mode="widthFix"></image>
- </view>
- <view class="login_name"><input class="uni-input" v-model="username" focus placeholder="请输入手机号" />
- </view>
- </view>
- <view class="login_input flex">
- <view class="login_img">
- <image src="../../static/icon/pwd.png" mode="widthFix"></image>
- </view>
- <view class="login_name">
- <input class="uni-input" type="password" v-model="passward" focus placeholder="请输入密码" />
- </view>
- </view>
- <view><button type="green" class="uni-button uni-button-green" @click="toLogin">登录</button></view>
- </view>
- </view>
- </template>
- <script>
- import {
- mapMutations
- } from 'vuex';
- import {
- login
- } from '@/api/login.js';
- import {
- getUserInfo
- } from '@/api/user.js';
- export default {
- data() {
- return {
- checked: false, //是否同意条款
- username: '',
- passward: '',
- successUrl: '/pages/index/index'
- };
- },
- onLoad() {
- let obj = this;
- },
- methods: {
- ...mapMutations('user', ['setUserInfo', 'login', 'logout']),
- // 监听隐私条例
- changeChecked(check) {
- this.checked = check;
- },
- loginGl(userinfo) {
- let ur = uni.getStorageSync('present') || this.successUrl;
- // 用于处理缓存bug
- if (ur == 'pages/product/product') {
- ur = this.successUrl
- }
- if (!userinfo.phone) {
- uni.showModal({
- title: '提示',
- content: '请先绑定手机号',
- showCancel: false,
- success: res => {
- if (res.confirm) {
- uni.navigateTo({
- url: '/pages/set/phone',
- });
- }
- },
- });
- } else {
- uni.switchTab({
- url: ur,
- fail(e) {
- uni.navigateTo({
- url: ur,
- fail(e) {
- uni.navigateTo({
- url: this.successUrl,
- });
- }
- });
- }
- });
- }
- },
- //登录
- async toLogin() {
- let obj = this;
- if (obj.username == '') {
- obj.$api.msg('请输入手机号');
- return;
- }
- if (obj.passward == '') {
- obj.$api.msg('请输入密码');
- return;
- }
- obj.logining = true;
- login({
- account: obj.username,
- password: obj.passward
- })
- .then(function(e) {
- uni.setStorageSync('token', e.data.userinfo.token);
- obj.$store.commit('hasLogin', true);
- obj.login();
- // 保存返回用户数据
- obj.setUserInfo(e.data.userinfo);
- let ur = uni.getStorageSync('present') || obj.successUrl;
- //成功跳转首页
- uni.reLaunch({
- url: ur,
- fail(e) {
- uni.switchTab({
- url: obj.successUrl,
- });
- }
- })
- })
- .catch(function(e) {
- console.log(e);
- });
- },
- // 关闭更多弹窗
- close() {
- this.$refs.popup.close();
- }
- }
- };
- </script>
- <style lang="scss">
- page {
- height: 100%;
- background-color: #FFFFFF;
- padding-top: 44px;
- background: #488ff0;
- }
- .bg {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- width: 750rpx;
- image {
- width: 100%;
- }
- }
- .container {
- width: 100%;
- height: 100%;
- background-size: 100%;
- padding-top: 150rpx;
- }
- .login_text {
- margin: 0 auto;
- position: relative;
- background-color: #ffffff;
- width: 700rpx;
- box-shadow: 0px 0px 22rpx 5rpx rgba(209, 212, 217, 0.49);
- border-radius: 30rpx;
- padding: 100rpx 70rpx 156rpx;
- .login_title {
- text-align: center;
- font-size: 40rpx;
- font-family: Source Han Sans SC;
- font-weight: 500;
- color: #2A9CEC;
- padding-bottom: 100rpx;
- }
- .login_input {
- border-bottom: 1px solid #f0f0f0;
- margin-bottom: 30rpx;
- padding: 16rpx 0;
- line-height: 1;
- .login_img {
- width: 30rpx;
- flex-shrink: 0;
- font-size: 30rpx;
- margin-right: 20rpx;
- color: $font-base;
- image {
- width: 100%;
- }
- }
- .uni-input {
- text-align: left;
- width: 100%;
- font-size: 28rpx !important;
- }
- .login_name {
- color: #333333;
- flex-grow: 1;
- }
- }
- .uni-button-green {
- color: #ffffff;
- background-color: $base-color;
- margin: 90rpx 0 0;
- border-radius: 50rpx;
- }
- .uni-button {
- height: 80rpx;
- line-height: 80rpx;
- font-size: 28rpx;
- width: 100%;
- }
- }
- </style>
|