factory_mp/pages/auth/login.vue

<template>
	<view class="container">
		<image src="/static/banner.jpg" mode="widthFix" style="width:100%"></image>
		<uni-segmented-control :current="current" :values="items" styleType="button" @clickItem="onClickItem">
		</uni-segmented-control>
		<view style="height: 8rpx;"></view>
		<uni-section>
		<view v-if="current==0" style="background-color;:white">
			<uni-forms ref="form1" :modelValue="formData" label-position="left" border :rules="rules1">
				<uni-forms-item required label="用户名" name="username">
					<uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item required label="密码" name="password">
					<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view v-if="current==1" style="background-color;:white">
			<uni-forms ref="form2" :modelValue="formData2" label-position="left" border :rules="rules2">
				<uni-forms-item label="手机号" name="phone" required>
					<uni-easyinput type="number" v-model="formData2.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="验证码" name="code" required>
					<view style="display: flex;">
						<view style="width: 60%;">
							<uni-easyinput type="number" v-model="formData2.code" placeholder="请输入验证码" />
						</view>
						<view style="width: 40%;display: flex;justify-content: center;align-items: center;">
							<span @click="getCode">{{content}}</span>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		</uni-section>
		<button style="background-color:#2979ff;color:white" @click="login(current)">登录</button>
		<view style="text-align: center;margin-top: 20rpx;">
			<uni-icons type="weixin" size="36" color="green" @click="wxmpLogin"></uni-icons>
			<view style="text-align: center;font-size: 32rpx;">微信登陆</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				items: ['密码登录', '验证码登录'],
				content: '获取验证码',
				formData: {},
				formData2: {},
				timer: null,
				time: 30,
				rules1:{
					username: {
						rules: [{
							required: true,
							errorMessage: '请填写',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请填写',
						}]
					}
				},
				rules2:{
					phone: {
						rules: [{
							required: true,
							errorMessage: '请填写',
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请填写',
						}]
					}
				},
				wxmp_openid: null
			}
		},
		onLoad(options) {
			var that = this
			var autoLoading = options.autoLoading;
			if(autoLoading != 'no'){
				// #ifdef APP-PLUS
				that.appLogin()
				// #endif
				// #ifdef MP-WEIXIN
				that.wxmpLogin()
				// #endif
			}
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			uni.hideHomeButton()
			// #endif
		},
		methods: {
			wxmpLogin() {
				var that = this;
				uni.showLoading({
					title: '自动登录中...',
					mask: true
				})
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						that.$api.wxmpLogin({code: loginRes.code}).then(res=>{
							uni.setStorageSync('access', res.access)
							that.$api.getUserInfo().then(res=>{
								uni.setStorageSync('userInfo', res)
								uni.reLaunch({
									url: '/pages/index/index'
								})
							
						})
					}).catch(e=>{
						this.wxmp_openid = e.data.wxmp_openid
					})
					},
					complete:function(){
						uni.hideLoading();
					},
				})
			},
			appLogin() {
				var that = this;
				// App自动登录
				uni.showLoading({
					title: '自动登录中...',
					mask: true
				})
				uni.getStorage({
					key: 'mySecret',
					success: function(res) {
						let secret = res.data
						if (secret) {
							that.$api.loginSecret(JSON.parse(secret)).then(res => {
								uni.setStorageSync('access', res.access)
								that.$api.getUserInfo().then(res=>{
									uni.setStorageSync('userInfo', res)
									uni.reLaunch({
										url: '/pages/index/index'
									})
								})
							})
						}
					},
					complete:function(){
						uni.hideLoading();
					},
					
				});
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			countDown() {
				var that = this;
				if (that.time >= 0) {
					that.content = that.time.toString() + '秒';
					--that.time
				} else {
					clearInterval(that.timer)
					that.timer = null
					that.content = '获取验证码'
				}
			},
			getCode() {
				var that = this
				if (that.content == '获取验证码') {
					if (that.$check.mobile(that.formData2.phone)) {
						that.$api.getCode({
							phone: that.formData2.phone
						}).then(res => {
							uni.showToast({
								icon: "none",
								title: '验证码已发送'
							})
							setInterval(that.countDown, 1000)
						})
					} else {
						uni.showToast({
							icon: "none",
							title: '手机号格式有误'
						})
					}
				}
			},
			login() {
				var that = this;
				if(that.current == 1){
					that.$refs.form2.validate().then(res0=>{
						that.$api.codeLogin(res0).then(res=>{
							uni.setStorageSync('access', res.access)
							that.$api.getUserInfo().then(res=>{
								uni.setStorageSync('userInfo', res)
								that.bindXX()
								uni.reLaunch({
									url: '/pages/index/index'
								})
							})
						})
					}).catch(err =>{
						console.log('表单错误信息：', err);
					})
				}
				else if(that.current == 0){
					that.$refs.form1.validate().then(res0=>{
						that.$api.login(res0).then(res=>{
							uni.setStorageSync('access', res.access)
							that.bindXX()
							that.$api.getUserInfo().then(res=>{
								uni.setStorageSync('userInfo', res)
								uni.reLaunch({
									url: '/pages/index/index'
								})
							})
						})
					}).catch(err =>{
						console.log('表单错误信息：', err);
					})
				}
			},
			bindXX() {
				// #ifdef APP-PLUS
				let userInfo = uni.getStorageSync("userInfo")
				let secret = that.ranStr(12)
				let mySecret = {
					'username': userInfo.username,
					'secret': secret
				}
				this.$api.bindSecret({
					secret: secret
				}).then(res => {
					uni.setStorageSync('mySecret', JSON.stringify(mySecret))
				}).catch(e => {})
				// #endif
				// #ifdef MP-WEIXIN
				if(this.wxmp_openid != null) {
					this.$api.bindWxmp({"openid": this.wxmp_openid}).then(res=>{
						
					})
				}
				// #endif
			}
		}
	}
</script>

<style>

</style>