dreamland/pages/user/login.vue

<template>
	<gui-page :customHeader="true">
		<view slot="gHeader">
			<view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-padding">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<gui-header-leading :onlyBack="true"></gui-header-leading>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text class="gui-h4 gui-ellipsis gui-text-center gui-header-content gui-primary-color">登录</text>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</view>
		<view slot="gBody" class="register">
		
			<view class="content">
				<!-- 头部logo -->
				<view class="header" v-if="system_logo">
					<image :src="system_logo" @click="Dever.viewPic([system_logo], system_logo)"></image>
				</view>
				<!-- 主体 -->
				<view class="main">
					<wInput
						v-model="phoneData"
						type="text"
						maxlength="11"
						placeholder="手机号"
					></wInput>
					<wInput
						v-model="passData"
						type="password"
						maxlength="11"
						placeholder="登录密码"
						isShowPass
						style="display: none;"
					></wInput>
					<wInput
						v-model="verCode"
						type="number"
						maxlength="6"
						placeholder="验证码"
						
						isShowCode
						ref="runCode"
						@setCode="getVerCode()"
					></wInput>
						
				</view>
					
				<wButton 
					class="wbutton"
					text="登 录"
					:rotate="isRotate" 
					@click.native="startLogin()"
				></wButton>
				
				<view class="other_agree">
					<text
						@tap="isShowAgree" 
						class="cuIcon"
						:class="showAgree?'cuIcon-radiobox':'cuIcon-round'"
					> 同意</text>
					<!-- 协议地址 -->
					<view @click="goView('agreement', '入记协议')">《入记协议》</view>
				</view>
				
				<!-- 其他登录 -->
				<view class="other_login cuIcon" style="display: none;">
					<view class="login_icon">
						<view class="cuIcon-weixin" @tap="login_weixin"></view>
					</view>
				</view>
				
				<!-- 底部信息 -->
				<view class="footer" style="display: none;">
					<navigator url="forget" open-type="navigate">找回密码</navigator>
					<text>|</text>
					<navigator url="register" open-type="navigate">注册账号</navigator>
				</view>
			</view>
		</view>
	</view>
	</gui-page>
</template>

<script>
	var self;
	import wInput from '@/lib/watch-login/watch-input.vue' //input
	import wButton from '@/lib/watch-login/watch-button.vue' //button
	
	export default {
		data() {
			return {
				id : 0,
				code : '',
				info : {},
				system_logo : '',
				system_name : '',
				phoneData:'', // 用户/电话
				passData:'', //密码
				verCode:"", //验证码
				showAgree:true, //协议是否选择
				isRotate: false, //是否加载旋转
			}
		},
		components:{
			wInput,
			wButton,
		},
		onLoad(option) {
			self = this;
			self.id = option.id;
			self.code = option.code;
			self.getData();
		},
		methods: {
			getData : function() {
				if (self.id || self.code) {
					var data = {};
					if (self.id) {
						data.id = self.id;
					}
					if (self.code) {
						data.code = self.code;
					}
					self.Dever.get(self, 'app/collection/?l=api.getConfig', data, function(t) {
						uni.setNavigationBarTitle({
							title:t.info.name
						});
						self.system_logo = t.info.logo;
						self.system_name = t.info.name;
						self.info = t.info;
					});
				} else {
					self.system_logo = self.Dever.config.system_logo;
				}
			},
			goView : function(key, name) {
				var path = this.Dever.api_host + 'main/?l=page&key=' + key;
				this.Dever.location(path, 'webview', name);
			},
			isShowAgree(){
				//是否选择协议
				self.showAgree = !self.showAgree;
			},
			getVerCode(){
				//获取验证码
				if (self.phoneData.length != 11) {
					self.Dever.alert('手机号不正确');
				    return false;
				}
				self.$refs.runCode.$emit('runCode');
				self.Dever.post('package/passport/?l=reg.getMCode', {noloading:1, mobile: self.phoneData}, function(t) {
					if (t.indexOf('::') != -1) {
						var temp = t.split('::');
						t = temp[0];
						self.verCode = temp[1];
					}
					self.Dever.alert(t);
				});
			},
			login_weixin : function() {
				this.Dever.alert('暂未开通');
			},
		    startLogin() {
				if(self.isRotate){
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (self.showAgree == false) {
					self.Dever.alert('请先同意《入记协议》');
				    return false;
				}
				if (self.phoneData.length !=11) {
					self.Dever.alert('手机号不正确');
				    return false;
				}
				/*
		        if (self.passData.length < 6) {
					self.Dever.alert('密码不正确');
		            return false;
		        }
				*/
				if (self.verCode.length != 6) {
					self.Dever.alert('验证码不正确');
				    return false;
				}
				
				var type = '';
				var type_id = '';
				if (self.id || self.code) {
					type = 'collection/info';
					type_id = self.info.id;
				}
				
				self.isRotate = true;
				self.Dever.post('package/passport/?l=app.login', {noloading:1, mobile: self.phoneData, mcode: self.verCode, source_type: self.Dever.source, system_source:self.Dever.source_id, type:type, type_id:type_id}, function(t) {
					self.isRotate = false;
					self.Dever.setToken(t.signature);
					self.Dever.jump();
				}, function(t) {
					self.Dever.alert(t.msg);
					self.isRotate = false;
				});
		    }
		}
	}
</script>

<style>
	@import url("@/lib/watch-login/css/icon.css");
	@import url("@/lib/watch-login/css/main.css");
	.other_agree {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
		text-align: center;
	}
	.other_login {
		margin-top: 130rpx;
	}
</style>