xiangqinim/addons/fastim/uniapp/pages/center/login.vue

<template>
	<view>
		<u-modal v-model="modelShow" :content="modelContent"></u-modal>
		<common :tips='commonTips'></common>
		<image class="login-bg" src="../../static/img/login-bg.png" mode="widthFix"></image>
		<view class="login-menu-box">
			<view class="login-menu">
				<view @click="tab(0)" class="login-button" :class="tabIndex==0 ? 'login-button-active':''">账号登录</view>
				<view @click="tab(1)" class="login-button" :class="tabIndex==1 ? 'login-button-active':''">手机登录</view>
			</view>
		</view>
		<u-form :model="form" class="login-form" label-width="150" :label-style="{textAlign: 'justify', textAlignLast: 'justify', display: 'inline-block', paddingRight:'10px'}" ref="uForm">
			<u-form-item v-if="tabIndex==0" label="账　号" prop="username">
				<u-input v-model="form.username" placeholder="请输入账号" name="username" />
			</u-form-item>
			<u-form-item v-if="tabIndex==0" label="密　码" prop="password">
				<u-input v-model="form.password" :password-icon="true" placeholder="请输入密码" type="password" name="password" />
			</u-form-item>
			<u-form-item v-if="tabIndex==0" label="验证码" prop="captcha">
				<u-input v-model="form.captcha" placeholder="请输入验证码" type="number"></u-input>
				<image @click="downloadCaptcha" class="captcha-img" slot="right" :src="captchaPath" mode="widthFix"></image>
			</u-form-item>
			
			<u-form-item v-if="tabIndex==1" label="手机号" prop="mobile">
				<u-input v-model="form.mobile" placeholder="请输入手机号" type="number" name="mobile" />
			</u-form-item>
			<u-form-item v-if="tabIndex==1" label="验证码" prop="code">
				<u-input placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
				<u-button slot="right" type="primary" size="mini" @click="getCode">{{codeTips}}</u-button>
			</u-form-item>
			<u-button @click="submit" :custom-style="loginFormButtonStyle" :ripple="true" :disabled="loginFormButtonDisabled" ripple-bg-color="rgba(45,211,232, 0.8)" shape="circle">
				<u-icon name="arrow-rightward"></u-icon>
			</u-button>
			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		</u-form>
		<view class="login-footer-box">
			<view @click="goRegister" class="login-footer-box-left">注册新用户</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				form: {
					mobile: '',
					username: '',
					password: '',
					captcha: ''
				},
				rules: {
					mobile: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['blur'],
						}
					],
					username: [
						{
							required: true, 
							message: '请输入账号',
							trigger: ['change', 'blur']
						}
					],
					password: [
						{
							required: true,
							min: 6, 
							message: '请输入正确的密码', 
							trigger: 'blur'
						}
					],
					captcha: [
						{
							required: true,
							min: 4,
							message: '请输入正确的验证码',
							trigger: ['change', 'blur']
						}
					]
				},
				loginFormButtonStyle: {
					backgroundImage: "linear-gradient(to bottom right, #34E4E8, #1FAEE8)",
					border: 'none',
					color: '#ffffff',
					outline: 'none',
					marginTop: '80rpx',
					height: '100rpx',
					width: '100rpx'
				},
				loginFormButtonDisabled: false,
				modelShow: false,
				modelContent: '',
				codeTips: '请输入验证码',
				commonTips: '',
				captchaPath: ''
			}
		},
		onReady() {
			this.downloadCaptcha()
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			tab: function (index) {
				this.tabIndex = index
			},
			downloadCaptcha: function() {
				var that = this
				that.form.captcha = ''
				that.$u.post('/addons/fastim/api.user/captchaPre', {}).then(res => {
					that.ws.captchaId = res.data.captcha_id;
					that.captchaPath = this.ws.buildUrl('default') + '/addons/fastim/api.user/captcha?captcha_id=' + res.data.captcha_id
				}).catch(res => {
					that.$u.toast('验证码请求失败，请重试！');
				})
			},
			getCode: function () {
				var that = this
				if (!that.form.mobile) {
					that.$u.toast('请输入手机号');
					return ;
				}
				if(that.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					});
					that.$u.post('/api/sms/send', {
						event: 'login',
						mobile: that.form.mobile
					}).then(res => {
						if (res.code == 1) {
							uni.hideLoading();
							that.$u.toast('验证码已发送');
							that.$refs.uCode.start();
						} else {
							that.modelContent = res.msg
							that.modelShow = true
						}
					}).catch(res => {
						that.$u.toast('请求失败，请重试！');
					})
				} else {
					that.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			submit: function() {
				var that = this
				that.$refs.uForm.validate(valid => {
					if (valid) {
						that.loginFormButtonDisabled = true
						that.form.tab = that.tabIndex
						that.form.captcha_id = that.ws.captchaId
						that.form.account = (that.tabIndex == 0) ? that.form.username:that.form.mobile;
						that.$u.post('/addons/fastim/api.user/login', that.form).then(res => {
							that.loginFormButtonDisabled = false
							if (res.code == 1) {
								uni.setStorageSync('userinfo', res.data.userinfo);
								that.ws.init(res.data.userinfo.token, res.data.userinfo.auth_token)
								uni.reLaunch({
									url: '/pages/message/message'
								})
							} else {
								that.downloadCaptcha()
								that.modelContent = res.msg
								that.modelShow = true
							}
						}).catch(res => {
							that.downloadCaptcha()
							that.loginFormButtonDisabled = false
							that.$u.toast('请求失败，请重试！');
						})
					}
				});
			},
			goRegister: function() {
				uni.navigateTo({
					url: '/pages/center/register'
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: $--bg-color;
}
.login-bg {
	width: 100vw;
}
.login-menu-box {
	position: relative;
}
.login-menu {
	display: flex;
	width: 80vw;
	margin: 0 auto;
	align-items: center;
	background-color: $--white;
	border-radius: 50rpx;
	position: absolute;
	top: -40rpx;
	left: 10vw;
	box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
.login-button {
	height: 80rpx;
	width: 50%;
	font-size: 30rpx;
	font-weight: bold;
	text-align: center;
	line-height: 80rpx;
	color: $--gray;
	border-radius: 50rpx;
	background: $--white;
}
.login-button-active {
	color: $--white;
	background-image: linear-gradient(to bottom right, #34E4E8, #1FAEE8);
}
.login-form {
	display: block;
	width: 78vw;
	padding-top: 140rpx;
	margin: 0 auto;
}
.login-footer-box {
	position: fixed;
	bottom: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
}
.login-footer-box-left {
	text-decoration: underline;
	font-size: 28rpx;
	color: $--blue;
}
.captcha-img {
	width: 200rpx;
	max-height: 100rpx;
}
</style>