epmet-work-uni/pages/login/login.vue

<template>
    <view>
        <!-- pages/register/register.wxml -->
        <view class="header">
            <view class="left">
                <image src="/static/images/login/hi.png" mode="" />
                <view style="margin-top: 30rpx">欢迎登录移动工作平台</view>
            </view>
            <view class="right">
                <image src="/static/images/login/right_bg.png" mode="" />
            </view>
        </view>
        <view class="login">
            <view class="input_box">
                <image src="/static/images/login/user.png" mode="" />
                <!-- 失去焦点的时候bindblur="handelBlurMobile" -->
                <input type="text" placeholder="请输入手机号" @blur="handelBlurMobile" :value="formData.phone" confirm-type="next" />
                <image src="/static/images/login/password.png" mode="" />
                <!-- 将值绑定formData.password中 -->
                <input type="text" confirm-type="go" :password="true" placeholder="请输入密码" @input="handelBlurPassword" @blur="handelBlurPassword" :value="formData.password" />
            </view>
            <text v-if="'{true}'">忘记密码</text>
            <!-- tap事件绑定到handelClickSubmit。tab事件，当触摸屏时 -->
            <button @tap="handelClickSubmit" style="font-weight: 600">登录</button>
        </view>
    </view>
</template>

<script>
// pages/register/register.js
// 到入一个
import { userLoginlog } from '../../utils/api';
export default {
    data() {
        return {
            formData: {
                phone: '',
                password: '',
				app:'gov',
				client:'h5',
				customerId:'1861289756549029889'
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        handelBlurMobile(e) {
            this.setData({
                // 获取绑定过的值，付给fromData.mobile
                'formData.phone': e.detail.value
            });
            console.log(this.formData);
        },

        handelBlurPassword(e) {
            this.setData({
                // 获取绑定过的值，付给fromData.password
                'formData.password': e.detail.value
            });
            console.log(this.formData);
        },

        handelClickSubmit() {
            if (!this.formData.phone) {
                // 微信的轻量级api
                uni.showToast({
                    title: '请填写手机号',
                    // 不显示图标
                    icon: 'none',
                    duration: 3000
                });
                return;
            }
            if (!this.formData.password) {
                uni.showToast({
                    title: '请输入密码',
                    icon: 'none',
                    // 提示时间为3s
                    duration: 3000
                });
                return;
            }
            const parm = {
                ...this.formData
            };
            // 轻量级api,在加载时进行显示
            uni.showLoading({
                title: '登录中'
            });
			userLoginlog(parm)
			    .then((res) => {
			        console.log(res);
			        // 判断登录是否成功
			        if (res.code == 0) {
			            //  用于跳转的api,跳转到某某某
			            uni.switchTab({
			                url: '/pages/index/index'
			            });
			            //加入本地内存的api
			            uni.setStorageSync('token', res.data.token);
			        }
			    })
			    .catch((err) => {
			        uni.showToast({
			            title: err.msg,
			            icon: 'none',
			            duration: 3000
			        });
			        console.log(err);
			    });
			uni.hideLoading();
			// uni.login({
			//     success: (res) => {
			//         parm.wxCode = res.code;
			//         console.log(parm.wxCode);
			//         // 调用登录的接口
			     
			//     }
			// });
            //微信的api,获取登录凭证,用户获取凭证
            // uni.getUserProfile({
            //     desc: '用于获取用户个人信息',
            //     success: function (res) {
            //         var userInfo = res.userInfo;
            //         var avatarUrl = userInfo.avatarUrl;
            //         uni.setStorageSync('avatarUrl', avatarUrl);
            //         console.log("User's Avatar URL:", avatarUrl);
                  
            //     }
            // });
        }
    }
};
</script>
<style>
/* pages/register/register.wxss */
page {
    /*宽度为100% */
    width: 100%;
    /* 最小高度 */
    min-height: 100vh;
    /* 垂直方向.元素溢出时,显示滚动条 */
    overflow-y: auto;
}
.header {
    height: 500rpx;
    width: 100%;
    /*渐变色 */
    background: linear-gradient(180deg, #1673ee 0%, #66a6fd 63%, #f7f7f7 100%);
    box-sizing: border-box;
    padding: 140rpx 0rpx 100rpx 50rpx;
    font-size: 40rpx;
    color: #ffffff;
    display: flex;
}
.header .left {
    display: flex;
    flex-direction: column;
}
.header .left image {
    width: 106rpx;
    height: 94rpx;
}
.header .right image {
    width: 280rpx;
    height: 232rpx;
    position: relative;
    top: -30rpx;
    left: 100rpx;
}
.header view {
    margin-top: 30rpx;
}
.login {
    width: 100%;
    height: auto;
    position: relative;
    top: -90rpx;
    border-radius: 60rpx 60rpx 0 0;
    background-color: #fff;
    box-sizing: border-box;
    padding: 80rpx 60rpx 0;
}
.login .input_box {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.login input {
    width: auto;
    height: 93rpx;
    background: #f5f5fa;
    border-radius: 47rpx;
    padding-left: 80rpx;
    font-size: 32rpx;
}
.login image {
    width: 46rpx;
    height: 46rpx;
    position: relative;
    left: 20rpx;
    top: 70rpx;
}
.login text {
    display: inline-block;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #3e92ff;
    margin-top: 36rpx;
    padding-left: 20rpx;
}
.login button {
    display: block;
    background: linear-gradient(87deg, #81b5fb 0%, #3e92ff 100%);
    border-radius: 43rpx;
    width: auto !important;
    color: #fff;
    font-size: 32rpx;
    font-family: PingFang SC;
    margin: 85rpx 0 0 !important;
    box-sizing: border-box;
    font-weight: 300;
    height: 86rpx;
    line-height: 86rpx;
    padding: 0 !important;
}
</style>