xiamen-sb-uniapp/pages/login/login.vue

<template>
    <view>
        <u-toast ref="uToast" />
        <view class="d-flex f-column a-center top">
            <image src="../../static/logo.png" mode=""></image>
            <text class="main-color-text f-weight-bold m2">欢迎使用设备管理系统！</text>
        </view>
        <view class="f-weight-bold name text-center">账号登录</view>
        <view class="input">
            <input
                type="text"
                v-model="userName"
                placeholder="请输入用户名"
                placeholder-class="placeholder-class"
            />
            <input
                type="password"
                v-model="passWord"
                placeholder="请输入密码"
                placeholder-class="placeholder-class"
            />
        </view>
        <view class="tip" @tap="forgetPass">
            忘记密码
            <text class="mx1">
                <u-icon name="question"></u-icon>
            </text>
        </view>
        <view class=" mui-input-row mui-checkbox ">
            <checkbox-group @change="checkboxChange">
                <checkbox
                    id="chkRem"
                    type="checkbox"
                    :checked="rememberPsw"
                    @tap="rememberPsw = !rememberPsw"
                    class="RememberCheck"
                >
                    记住密码
                </checkbox>
            </checkbox-group>
        </view>
        <button class="main-color-bg text-color-white login" @tap="login">登录</button>
        <view class="wechat p-fixed left0 right0" style="bottom: 60rpx;">
            <button open-type="getUserInfo" @click="getUserInfo" class="d-flex j-center a-center">
                <image src="/static/images/weixin.png" mode=""></image>
            </button>
        </view>
    </view>
</template>

<script>
import { encryptPassword } from '@/utils/password';

export default {
    data() {
        return {
            userName: '', // 用户名
            passWord: '', // 密码
            rememberPsw: true, // 记住密码
            Code: '',
            session_key: '',
            openid: ''
        };
    },
    // 页面初始加载
    mounted() {
        const that = this;

        // 缓存的账号
        const cache_userName = uni.getStorageSync('cache_userName');
        // 缓存的密码
        const cache_passWord = uni.getStorageSync('cache_passWord');
        // 有缓存就赋值给文本没有就清空
        if (cache_userName && cache_passWord) {
            that.userName = cache_userName;
            that.passWord = cache_passWord;
        } else {
            that.userName = '';
            that.passWord = '';
        }
    },
    onShow() {
        if (this.$BaseTool.Util.isDev()) {
            this.userName = 'superadmin'
            this.passWord = '123456'
        }
    },
    methods: {
        // 找回密码
        forgetPass() {
        },
        // 复选框
        checkboxChange: function(e) {
            if (e.detail.value.length == 1) {
                // 获取缓存的账号
                uni.getStorageSync('cache_userName', this.userName);
                uni.getStorageSync('cache_passWord', this.passWord);
            } else {
                uni.removeStorageSync('cache_userName');
                uni.removeStorageSync('cache_passWord');
            }
        },
        // 登录
        login() {
            if (!this.userName) {
                return this.$refs.uToast.show({
                    title: '请输入用户名',
                    type: 'default',
                    icon: false
                });
            } else if (!this.passWord) {
                return this.$refs.uToast.show({
                    title: '请输入密码',
                    type: 'default',
                    icon: false
                });
            }
            this.$Http
                .mobileLogin({
                    username: this.userName,
                    password: encryptPassword(this.passWord),
                    grant_type: 'password',
                    scope: 'server'
                })
                .then(res => {
                    // 缓存账号和密码
                    if (this.rememberPsw) {
                        uni.setStorageSync('cache_userName', this.userName);
                        uni.setStorageSync('cache_passWord', this.passWord);
                    } else {
                        uni.removeStorageSync('cache_userName');
                        uni.removeStorageSync('cache_passWord');
                    }
                    // 如果openId有，则绑定openId
                    const openId = uni.getStorageSync('openId', this.userName);
                    if (openId != null && openId !== '') {
                        this.$Http
                            .bindUserAndOpenId(openId)
                            .then(res => {
                                uni.removeStorageSync('openId');
                            });
                    }
                });
        },
        // 微信登录获取openid
        getUserInfo() {
            // 登录
            uni.login({
                provider: 'weixin',
                success: res => {
                    // console.log('登录成功：', res);
                    // 获取临时登录凭证code
                    this.Code = res.code;
                    // 获取openid，session_key
                    const appid = 'wx38f46845be704faa' // 需替换
                    const secret = '9bt1F6ojLU6JLv76Boo4qaeEU6PcW75nGjjLyauDtAF' // 需替换
                    const url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' + secret +
                        '&js_code=' +
                        this.Code + '&grant_type=authorization_code';
                    uni.request({
                        url: url, // 请求路径
                        success: res => {
                            // console.log('openid session_key:', res.data);
                            this.openid = res.data.openid
                            this.session_key = res.data.session_key
                            console.log('openid：', this.openid)
                            uni.showToast({ title: this.openid, icon: 'none' })
                        },
                        fail: err => {
                            console.log('请求失败：', err)
                        }
                    });
                },
                fail: err => {
                    console.log('登录失败：', err)
                }
            })
        }
    }
};
</script>

<style lang="scss" scoped>
.top {
    font-size: unit(28, rpx);
    padding-top: unit(90, rpx);

    image {
        width: unit(170, rpx);
        height: unit(123, rpx);
    }
}

.name {
    font-size: unit(42, rpx);
    color: #333333;
    margin: unit(80, rpx) 0 unit(80, rpx);
}

.input {
    width: unit(600, rpx);
    margin: 0 auto;

    input {
        border-bottom: unit(1, rpx) solid #e6e6e6;
        height: unit(100, rpx);
        line-height: unit(100, rpx);
    }
}

.login {
    width: unit(600, rpx);
    height: unit(100, rpx);
    margin: unit(100, rpx) auto 0;
    border-radius: unit(80, rpx);
}

.tip {
    width: unit(600, rpx);
    margin: unit(30, rpx) auto;
    text-align: right;
    font-size: unit(26, rpx);
    font-weight: 500;
}
.wechat{
    margin-top:  unit(90, rpx);
    button{
        background-color: #FFFFFF;
        &::after{
            border: none;
        }
        image{
            width: unit(90, rpx);
            height: unit(90, rpx);
        }
    }
}

.mui-checkbox input[type='checkbox']:checked:before {
    color: #00bbb1;
}
.RememberPass {
    color: #adadad;
    margin-top: 5px;
}
.RememberCheck {
    margin-left: 30px;
    color: #adadad;
}
</style>