renshou/htmllogin/login/login.vue

<template>
	<view class="pages">
		<image src="../static/common/images/dlbg.png" class="dlbg"></image>
		<view class="title">用户登录</view>
		<view class="item dflex"><input type="number" maxlength="11" focus placeholder="请输入手机号"
				placeholder-class="placegolder" v-model="mobile" /></view>

		<view class="item dflex" v-if="isLoginType == 0">
			<input type="number" maxlength="6" placeholder="请输入验证码" placeholder-class="placegolder" v-model="code" />
			<view class="huoqu"  @click="getCode()"
				v-text="sendMsg"></view>
		</view>
		<view class="item dflex" v-else><input placeholder="请输入密码" password="true" placeholder-class="placegolder"
				type="text" v-model="pwd" /></view>
		<view class="xieyi dflex">
			<image :src="'../static/common/images/' + (isCheckXY ? 'xyico_h' : 'xyico') + '.png'" @click="checkXY()">
			</image>
			<view class="dflex">
				<text @click="checkXY()">已经阅读并同意</text>
				<navigator :url="'/mine/page/page?title=用户协议&isXieyi=true'" hover-class="none">《用户隐私协议》</navigator>
			</view>
		</view>
		<view class="submit" @click="submitLogin">登录</view>
		<view class="bot dflex">
			<!-- <navigator url="/comm/code/code" hover-class="none" @click="swiLoginWay()">{{ isLoginType == 0 ? '账号密码登录' : '验证码登录' }}</navigator> -->
			<!-- <navigator url="/comm/password/password" hover-class="none">忘记密码？</navigator> -->
		</view>
		<!-- <view class="other dflex">更多登录方式</view>
		<view class="list dflex">
			<view class="li" @click="wxLogin()">
				<image src="../static/common/images/wechat.png"></image>
				<text>微信授权登录</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	const api = require('../../utils/api.js');
	const util = require('../../utils/util.js');
	const req = require('../../utils/request.js');

	export default {
		data() {
			return {
				isCheckXY: false,
				isGetCodeDisabled: false,
				isLoginType: 0,
				mobile: '', //手机号
				code: '', //code
				pwd: '', //密码
				sendMsg: '获取验证码'
			};
		},
		onLoad() {},
		onShow() {},

		methods: {
			wxLogin() {
				uni.redirectTo({
					url: '/comm/authorize/authorize'
				})
				// uni.login({
				// 	provider: 'weixin',
				// 	success: function(loginRes) {
				// 		console.log('微信登录返回的微信数据>>>>>>', loginRes.authResult);
				// 	}
				// });
			},
			checkXY() {
				this.isCheckXY = !this.isCheckXY;
			},
			//切换登录方式
			swiLoginWay() {
				if (this.isLoginType == 0) {
					this.isLoginType = 1;
				} else {
					this.isLoginType = 0;
				}
			},

			getCode() {
				if(this.isGetCodeDisabled==true) return false
				if (!this.mobile) {
					req.msg('请输入手机号');
					return;
				}
				// console.log(!util.isMobile(this.mobile))
				if (!util.isMobile(this.mobile)) {
					req.msg('请输入11位有效手机号');
					return;
				}
				req.postRequest(api.api_sms_login, {
						mobile: this.mobile
					},
					data => {
						req.msg('验证码获取成功');
						let time = 60;
						let interval = setInterval(() => {
							time--;
							if (time == 0) {
								this.isGetCodeDisabled = false;
								this.sendMsg = '获取验证码';
								clearInterval(interval);
							} else {
								this.isGetCodeDisabled = true;
								this.sendMsg = time + '秒后再获取';
							}
						}, 1000);
					},
					true
				);
			},
			submitLogin: function() {
				var dataP = {};
				var apiUrl = '';
				if (!this.mobile) {
					req.msg('请输入手机号');
					return;
				}
				if (!util.isMobile(this.mobile)) {
					req.msg('请输入11位有效手机号');
					return;
				}

				if (this.isLoginType == 0) {
					apiUrl = api.api_code_login;
					if (!this.code) {
						req.msg('请输入验证码');
						return;
					}
					dataP.phone = this.mobile;
					dataP.code = this.code;
				} else {
					apiUrl = api.api_account_login;
					if (!this.pwd) {
						req.msg('请输入密码');
						return;
					}
					dataP.account = this.mobile;
					dataP.password = this.pwd;
				}

				if (!this.isCheckXY) {
					req.msg('请先阅读并同意《用户隐私协议》');
					return;
				}
				req.postRequest(
					apiUrl,
					dataP,
					data => {
						// console.log('登录完成》》》》', data);
						//缓存用户数据
						req.setStorage('userInfo', data);
						req.setStorage('AUTH_TOKEN', data.token);
						uni.navigateBack();
					},
					true
				);
			}
		}
	};
</script>

<style>
	@import './login.css';
	page {
		background: #fff;
	}
</style>