ROBOT-APP/code/HBX/pages/native/login.vue

<template>
	<view class="nv-login">
		<image class="img1" src="../../static/loginBg.png" mode=""></image>
		<view class="nv-position">

			<view class="nv-header">
				<image class="logo" src="../../static/logo.png" mode=""></image>
			</view>
			<view class="nv-center" elevation="5px">
				<view class="title">
					<text class="text">巡检机器人手机客户端</text>
				</view>
				<view class="n-input">
					<uni-easyinput prefixIcon="icon-ren" @blur="inputStyles1.borderColor = '#DCDCDC'"
						@focus="inputStyles1.borderColor = '#2B85E0'" :styles="inputStyles1" :disabled="loading"
						custom-prefix="iconfont" v-model="user.account" placeholder="请输入账号/手机号"></uni-easyinput>
				</view>
				<view class="n-input">
					<uni-easyinput type="password" prefixIcon="icon-mima1" @blur="inputStyles2.borderColor = '#DCDCDC'"
						@focus="inputStyles2.borderColor = '#2B85E0'" :styles="inputStyles2" :disabled="loading"
						custom-prefix="iconfont" v-model="user.password" placeholder="请输入密码"></uni-easyinput>
				</view>
				<checkbox-group class="checkbox"  @change="changeValue">
						<checkbox style="transform: scale(0.7);margin-left: auto;" :value="1" :checked="checked" />记住密码
				</checkbox-group>
				<button elevation="3px" class="nv-but" type="primary" :disabled="loading" :loading="loading"
					@click="login">登录</button>
				<view class="nv-server" @click="changeConfig">服务代理设置</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getToken,
		getUser
	} from '../../common/api.js'
	import {
		getAuthsArr,
        BeforeNavigateTo
	} from '../../common/utils.js'
	import {
		Encrypt
	} from '@/common/aes.js';
    import {api_config} from '@/config.js'
	export default {
		data() {
			return {
				checked:false,
				inputStyles1: {
					color: '#222',
					borderColor: '#DCDCDC'
				},
				inputStyles2: {
					color: '#222',
					borderColor: '#DCDCDC'
				},
				user: {
					account: "",
					password: null,
					methodName: "login",
					"timestamp": new Date()
				},
				loading: false,
				activeIndex: 0,
				width: 120,
				height: 45,
				keys: {},
				code: '',
				codeKey: '',
				clientInfo: ''

			}
		},
		mounted() {

		},
		onShow() {
			this.clientInfo = plus.push.getClientInfo().clientid
			if(uni.getStorageSync('XJAPP-PASSWORD')){
				this.user = uni.getStorageSync('XJAPP-PASSWORD')
				this.checked = true
			}
		},
		methods: {
            changeConfig() {console.log(1234)
                uni.navigateTo({
                        animationType: 'pop-in',
                        animationDuration: 300,
                    	url: '../../pages/webview/changeConfig',
            })
            },
			changeValue(e){
				if(e.target.value && e.target.value[0]){
					this.checked = true
				}
				else{
					this.checked = false
				}
			},
			async login() {
				if (!this.user.account) {
					uni.showToast({
						icon: 'none',
						title: '账号/手机号不能为空',
						duration: 2000
					});
					return false
				}
				if (!this.user.password) {
					uni.showToast({
						icon: 'none',
						title: '密码不能为空',
						duration: 2000
					});
					return false
				}
				if (this.loading) return
				this.loading = true
				let params = {
						...this.user,
						// password: Encrypt(this.user.password, this.keys.tokenKey),
				}
       /* export function getToken(data) { //登录接口
            return new RequestFun().fetch(
                '/app/user/loginApp',
                'POST',
                data
            )
        }

        export function getUser(data) { //查看个人信息
            return new RequestFun().fetch(
                `/app/user/getUserInfo`,
                'GET',
                data
            )
        }*/
        /*var sseverUrl = "http://"+uni.getStorageSync("xjappserver").url+':'+uni.getStorageSync("xjappserver").port
        uni.request({
            url: sseverUrl+'/app/user/loginApp', //仅为示例，并非真实接口地址。
            data: params,
            header: {
                appId: uni.getStorageSync('storage_users').uid,
                authorization: uni.getStorageSync('storage_token')
            },

            method: "POST",
            success: (res) => {
            console.log(111111);
            console.log(res);

			this.$store.dispatch("setToken", res.data.data.userId)
			this.checked ?  uni.setStorageSync('XJAPP-PASSWORD', {
					...this.user
			}) : uni.removeStorageSync('XJAPP-PASSWORD')
			uni.request({
			        url: sseverUrl+'/app/user/getUserInfo', //仅为示例，并非真实接口地址。
			        data: {
                        userId:res.data.data.userId
					},
			        header: {
			            appId: uni.getStorageSync('storage_users').uid,
			            authorization: uni.getStorageSync('storage_token')
			        },

			        method: "GET",
			        success: (response) => {
			        console.log(222222);
			        console.log(response);
					this.$store.dispatch("setUsers",response.data.data)
						this.loading = false
						uni.switchTab({
							url: "/pages/native/work"
						});

			}
			})
    },
        fail: (e) => {console.log(e)
            this.loading = false
            plus.nativeUI.toast("无法连接服务器,请检查服务代理设置")

		}
    })*/
        getToken(params).then(res => {
					this.$store.dispatch("setToken", res.userId)
					this.checked ?  uni.setStorageSync('XJAPP-PASSWORD', {
						 ...this.user
					 }) : uni.removeStorageSync('XJAPP-PASSWORD')
					getUser({
						userId:res.userId
					}).then(response => {
						uni.setStorageSync("getRealNews",response.msgStatus)
						this.$store.dispatch("setUsers",response)
						this.loading = false
						uni.switchTab({
							url: "/pages/native/work"
						});

					}).catch(e => {
						this.loading = false
					})
				}).catch(e => {
					plus.nativeUI.toast(e.data.msg)
					this.loading = false
					console.log(e)
				})

        	this.loading = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.canvas-img-code {
		display: inline-block;
	}

	.nv-login {
		background: #fff;

		.img1 {
			height: 691rpx;
			width: 750rpx;
		}

		.nv-position {
			position: absolute;
			top: 220rpx;
			left: 20rpx;
			right: 20rpx;
			z-index: 999;

		}

		.nv-header {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.logo {
				width: 180rpx;
				height: 180rpx;
			}
		}

		.nv-center {
			margin-top: 120rpx;
			background-color: #fff;
			border-radius: 50rpx;
			padding: 58rpx 0rpx;
			margin-bottom: 30rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			box-shadow: #ccc 0 0 10px;

			.title {
				text-align: center;
				border-bottom: 1px solid #EFEFF4;
				padding-bottom: 64rpx;

				.text {
					font-size: 42rpx;
					color: #000000;
					font-weight: bold;
				}
			}

			.nv-but {
				height: 88rpx;
				line-height: 88rpx;
				background: #0581FD;
				border-radius: 16rpx;
				font-weight: bold;
				font-size: 38rpx;
				box-shadow: #BBBBBB 0 0 10px;
				margin: 30rpx 40rpx 20rpx 40rpx;
			}
			.nv-server{
				margin-bottom: 110rpx;
				margin-right: 40rpx;
				text-align: right;
				color: #0581FD;
			}
			.checkbox{
				margin: 20rpx 42rpx 0 42rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
			}
			.n-input {
				font-size: 34rpx;
				margin: 60rpx 42rpx 0 42rpx;

				.t3 {
					font-size: 26rpx;
					color: #999999;
				}

				.input1 {
					font-size: 34rpx;
					height: 74rpx;
				}
			}
		}
	}
</style>