diancan_uni/pages/staff/login/index.vue

<template>
    <!-- index.wxml -->
    <view class="container">
        <view class="logo">
            <cover-image src="/static/pages/resource/img/logo.png"></cover-image>
        </view>
        <view class="register">
            <van-cell-group :border="false">
                <van-field :value="phoneNum" type="number" clearable label="手机号" placeholder="请输入您的手机号码" :border="false" @change="onPhoneChange" />
                <van-field
                    v-if="!showPS"
                    :value="password"
                    type="password"
                    use-button-slot
                    label="密码"
                    placeholder="请输入您的密码"
                    :border="false"
                    @input="onPasswordChange"
                    icon="closed-eye"
                    @click-icon="onClickShowPassword"
                />
                <van-field
                    v-else
                    :value="password"
                    use-button-slot
                    label="密码"
                    placeholder="请输入您的密码"
                    :border="false"
                    @input="onPasswordChange"
                    icon="eye-o"
                    @click-icon="onClickShowPassword"
                />
            </van-cell-group>
            <van-button type="info" custom-class="tijiao" size="large" :round="true" @click="loginAction">登录</van-button>
        </view>
        <van-toast id="van-toast" />
    </view>
</template>

<script>
// pages/staff/login/index.js
let myPro = require('../../../utils/wxRequest.js');

let util = require('../../../utils/util.js');

var app = getApp();
export default {
    data() {
        return {
            phoneNum: '',
            password: '',
            showPS: false,
            latitude: 0,
            longitude: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        // wx.hideHomeButton()
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        console.log(uni.getStorageSync('staffphone'));
        var that = this;
        var staffphone = uni.getStorageSync('staffphone');

        if (staffphone != undefined && staffphone != null) {
            this.setData({
                phoneNum: staffphone
            });
        }

        uni.getLocation({
            type: 'wgs84',
            // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                that.setData({
                    latitude: res.latitude,
                    longitude: res.longitude
                });
            }
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        onPhoneChange(e) {
            this.setData({
                phoneNum: e.detail
            });
        },

        onPasswordChange(e) {
            this.setData({
                password: e.detail
            });
        },

        onClickShowPassword() {
            this.setData({
                showPS: !this.showPS
            });
        },

        loginAction() {
            if (this.phoneNum === undefined || this.phoneNum === null || this.phoneNum === '') {
                Toast('请输入手机号');
                return;
            }

            if (this.password === undefined || this.password === null || this.password === '') {
                Toast('请输入密码');
                return;
            }

            uni.showLoading({
                mask: true
            });
            var that = this;
            var params = {
                phone: this.phoneNum,
                password: this.password
            };
            myPro
                .wxRequest('staff/login', 'POST', params)
                .then((res) => {
                    uni.hideLoading();
                    var res = res.data;
                    console.log(res);

                    if (res.code === 200) {
                        app.globalData.token = res.result.token;
                        app.globalData.xxInfo = res.result.user;
                        app.globalData.showedWaterDialog = false;
                        uni.setStorage({
                            key: 'xxInfo',
                            data: res.result.user
                        });
                        uni.setStorage({
                            key: 'token',
                            data: res.result.token
                        });
                        uni.setStorage({
                            key: 'staffphone',
                            data: this.phoneNum
                        });
                        uni.switchTab({
                            url: '../index/index'
                        });
                    } else {
                        Toast(res.msg);
                    } // wx.reLaunch({
                    // 	url: '/pages/index/index'
                    // });
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                }); // wx.redirectTo({
            //   url: '../../index/index'
            // });
        }
    }
};
</script>
<style>
/* pages/staff/login/index.wxss */
.logo {
    width: 293rpx;
    height: 300rpx;
    margin: 30rpx auto 0;
}
.register {
    margin-top: 88rpx;
    padding: 0 40rpx;
}
.register .van-cell {
    padding: 50rpx 0 20rpx;
    border-bottom: 2rpx solid rgba(235, 235, 235, 1);
}

.register .van-cell__title {
    min-width: 102rpx !important;
    max-width: 102rpx !important;
    margin-right: 30rpx;
}
.van-button.sendvericode {
    display: inline-block;
    width: 198rpx;
    height: 48rpx !important;
    border: 2rpx solid rgba(85, 141, 224, 1);
    border-radius: 8rpx;
    color: rgba(85, 141, 224, 1);
    font-size: 22rpx;
    line-height: 48rpx !important;
    text-align: center;
    background: #ffffff;
}
.van-button.sendvericode.sended {
    border: 2rpx solid rgba(184, 188, 204, 1);
    color: rgba(184, 188, 204, 1);
}
.sendvericode.van-button--plain.van-button--primary.sended {
    color: rgba(184, 188, 204, 1);
}
.sendvericode.van-button--normal {
    padding: 0;
    font-size: 22rpx;
}
.sendvericode.van-button--plain.van-button--primary {
    color: #558de0;
}
.tijiao.van-button {
    margin-top: 60rpx;
    font-size: 30rpx !important;
    height: 80rpx !important;
    line-height: 80rpx !important;
    border-radius: 12rpx !important;
    background: rgba(85, 141, 224, 1);
}
.tijiao.van-button.van-button--info {
    border: 0 none;
}
.agreement {
    margin-top: 30rpx;
}
.agreement .text {
    display: inline-block;
    color: #558de0;
    font-size: 22rpx !important;
}
.van-radio__label {
    font-size: 22rpx !important;
    color: #b8bccc;
}
.wechat_wrap {
    padding-top: 214rpx;
    width: 576rpx;
    margin: 0 auto;
    text-align: center;
}
.wechat_wrap .wechat_title {
    color: rgba(82, 86, 102, 1);
    font-size: 24rpx;
}
.wechat_wrap .wechat_title::before,
.wechat_wrap .wechat_title::after {
    content: '';
    display: inline-block;
    width: 200rpx;
    height: 1rpx;
    background: rgba(184, 188, 204, 1);
    vertical-align: middle;
}
.wechat_wrap .wechat_title::before {
    margin-right: 40rpx;
}
.wechat_wrap .wechat_title::after {
    margin-left: 40rpx;
}
.wechat_wrap .wechat {
    margin: 60rpx auto 123rpx;
    text-align: center;
}
.wechat_wrap .wechat .icon {
    display: inline-block;
    width: 88rpx;
    height: 88rpx;
}
.wechat_wrap .wechat .info {
    margin-top: 20rpx;
    font-size: 22rpx;
    font-weight: 500;
    color: rgba(82, 86, 102, 1);
}
</style>