sz-kjsxy-wx-new/packages/register/login.vue

<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('login-top.png')"></image>
		<view class="login">
			<image class="login-logo" :src="base.imgHost('login-logo.png')"></image>
			<view class="login-form">
				<view>
					<u-input :custom-style="inputStyle" :clearable="false" v-model="form.mobile"
						placeholder="手机号"></u-input>
				</view>
				<view class="sendmsg">
					<u-input v-model="form.code" :custom-style="inputSendStyle" :clearable="false"
						placeholder="验证码"></u-input>
					<view @click="getSmsCode" class="send" :class="{'hasSend':hasSend}">{{hasSend?'已发送':'获取验证码'}}<text
							v-if="hasSend">({{count}}s)</text></view>
				</view>
			</view>
			<view class="login-btn">
				<view @click="handleMsgLogin">登录</view>
			</view>
			<view class="login-msg" @click="toRegister">注册账号</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasSend: false,
				isDonate:false,
				count: 60,
				inputStyle: {
					'padding': '0rpx 30rpx',
					'height': '80rpx',
					'border': '1rpx solid #dad8d8;',
					'border-radius': '20rpx'
				},
				inputSendStyle: {
					'padding': '0rpx 30rpx',
					'height': '80rpx',
					'border': '1rpx solid #dad8d8;',
					'border-radius': '20rpx 0 0 20rpx'
				},
				form: {
					mobile: '',
					code: '',
				},
				sendTimer: null,
				type: 'me'
			}
		},
		onLoad(options) {
			this.type = options.id ? 'course' : 'me'
			this.isDonate = options.isDonate?true:false
		},
		onUnload() {
			if (this.sendTimer) {
				clearInterval(this.sendTimer);
				this.sendTimer = null
			}
		},
		onHide() {
			if (this.sendTimer) {
				clearInterval(this.sendTimer);
				this.sendTimer = null
			}
		},
		methods: {
			getSmsCode() {
				if (this.hasSend) {
					return
				}
				if (this.base.isNull(this.form.mobile)) {
					this.base.toast('手机号码不能为空')
					return
				}
				if (!this.base.isMobile(this.form.mobile)) {
					this.base.toast('手机号码错误')
					return
				}
				let that = this
				this.$u.api.sendSms({
					mobile: this.form.mobile
				}).then(res => {
					this.base.toast("发送成功")
					this.hasSend = true
					this.sendTimer = setInterval(function() {
						if (that.count > 1) {
							that.count--
						} else {
							clearInterval(that.sendTimer);
							that.sendTimer = null
							that.count = 60
							that.hasSend = false;
						}
					}, 1000)
				})
			},
			handleMsgLogin() {
				if (this.base.isNull(this.form.mobile)) {
					this.base.toast('请输入手机号')
					return
				}
				if (this.base.isNull(this.form.code)) {
					this.base.toast('请输入验证码')
					return
				}
				let that = this
				console.log("this.type", this.type)
				this.$u.api.checkMobile({
					mobile: this.form.mobile,
					code: this.form.code
				}).then(res => {
					this.base.toast('绑定成功')
					if (that.sendTimer) {
						clearInterval(that.sendTimer);
						that.hasSend = false;
					}
					uni.removeStorageSync("stbc1_lifeData")
					uni.setStorageSync("stbc1_lifeData", {
						'vuex_token': res.token
					})

					if (that.type == 'course') {
						uni.switchTab({
							url: '/pages/course/index'
						})
					} else if (that.isDonate) {
						uni.redirectTo({
							url: '/packages/donate/index'
						})
					} else {
						uni.switchTab({
							url: '/pages/me/index'
						})
					}
					// this.$u.api.user().then(res => {
					// 	this.$u.vuex('vuex_user', res.user)

					// })
				})
			},
			toRegister() {
				uni.redirectTo({
					url: '/packages/register/index'
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		overflow: scroll;
		background: #fefcf7;
		position: relative;

		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 509rpx;
			height: 369rpx;
		}

		.login {
			width: 590rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			&-logo {
				width: 345rpx;
				height: 72rpx;
				margin: 0 auto;
				display: block;
			}

			&-form {
				margin: 100rpx 0;

				&>view {
					border-radius: 20rpx;

					&:first-child {
						margin-bottom: 50rpx;
					}
				}

				.sendmsg {
					display: flex;
					justify-content: space-between;
					align-items: center;

					u-input {
						width: calc(100% - 200rpx);

					}

					.send {
						background: #c69c6d;
						color: #fff;
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 0 20rpx 20rpx 0;
						width: 200rpx;
						text-align: center;
						border: 1px solid #c69c6d;
						box-sizing: content-box;
					}

					.hasSend {
						background: #dad8d8;
						color: #333;
						border: 1px solid #dad8d8;
					}
				}
			}

			&-btn {
				width: 100%;
				position: relative;

				&>view {
					width: 70%;
					text-align: center;
					margin: 0 auto;
					color: #fff;
					background: linear-gradient(to right, #e4cdb4, #c69c6d);
					border-radius: 30rpx;
					padding: 20rpx;
				}
			}

			&-msg {
				text-align: center;
				padding: 20rpx 0;
				color: #0d0398;
			}
		}
	}
</style>