LSM_OIL_SITE/pages/login/posLogin/posLogin.vue

<!-- pos机账号登录入口 -->
<template>
	<view class="page-content my-bg">
		<cu-custom class="main-topbar bg-main-oil" bgColor="bg-main-oil" :isBack="true">
			<block slot="content">星油云站</block>
		</cu-custom>
		<view class="bg-img margin flex padding-lg radius align-center text-center" :style="'background-image: url('+mainURL+'login-bg.png)'">
			<view class="padding-lg margin text-center text-lg text-white w100">
				<text class>油站工作人员绑定油站</text>
			</view>
		</view>
		<view class="pannel">
			<view class="bg-white margin padding radius shadow-warp">
				<view class="cu-form-group">
					<view class="title mini-label text-black">手机号</view>
					<input type="number" v-model="auth.phone" placeholder="请输入手机号" name="input" />
				</view>
				<view class="cu-form-group  padding-top-sm" v-if="showRandom">
					<view class="title text-black mini-label">验证码</view>
					<input type="number" :maxlength="6" v-model="auth.captcha" placeholder="六位数字验证码" name="input" />
					<text :class="frozen?'text-gray':'oil-main-color'" @tap="sendMsg">{{tips}}</text>
				</view>
				<view class=" cu-form-group padding-top-sm" v-else>
					<view class="title mini-label text-black">密码</view>
					<input type="password" v-model="auth.password" placeholder="请输入登入密码" name="input" />
				</view>
			</view>

			<view class="margin-right padding-right-lg text-right" @tap="showRandom=true" v-if="!showRandom">
				<text class="text-sm text-red padding-right">短信验证码登录</text>
			</view>
			<view class="margin-right padding-right-lg text-right" @tap="showRandom=false" v-else>
				<text class="text-sm text-red padding-right">密码登录</text>
			</view>
		</view>
		<view class="margin-lg  padding-lg bottom-bg">
			<button class="bg-main-oil round" v-if="showRandom" @tap="loginRandom">登录</button>
			<button class="bg-main-oil round" v-else @tap="loginPwd">登录</button>

		</view>
		<official-account @binderror="bindload" @bindload="binderror"></official-account>
		<view class="bottom-part">
			<service-hotline />
		</view>
	</view>
</template>

<script>
	import cloudSiteApi from '@/api/cloud-site.js'
	import loginApi from '@/api/login.js'
	import md5 from 'js-md5'

	export default {
		data() {
			return {
				baseURL: this.global.baseURL,
				mainURL: this.global.mainURL,
				forcedLogin: true,
				oilSiteNo: '',
				showRandom: true,
				auth: {},
				tips: '发送验证码',
				frozen: false // 二维码冷却时间

			}
		},
		created() {
			uni.showShareMenu()
		},
		methods: {
			bindload(){
				console.log('组件夹杂')
			},
			binderror(){
				console.log('组件夹杂失败')
			},	
			loginWeixin() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						const code = loginRes.code
						console.log('启动页code', code)
						loginApi.loginWeixin(code).then(res => {
							if (res.code === 20000) {
								uni.reLaunch({
									url: '/pages/index/index',
									fail: (err) => {
										console.log(err)
									}
								})
								uni.showToast({
									title: res.msg,
									icon: 'success',
									duration: 3000
								})
								uni.setStorage({
									key: 'Authorization',
									data: res.data.accessToken,
									success: () => {
										console.log('Authorization成功', res.data.accessToken)
									}
								})
								uni.setStorage({
									key: 'device',
									data: res.data.openid,
									success: () => {
										console.log('deviceopenid', res.data.openid)
									}
								})
								uni.setStorageSync('userMenu', res.data.loginUser.procedureAuthList)
								uni.setStorageSync('loginUser', {
									id: res.data.loginUser.id,
									name: res.data.loginUser.name,
									userPhone: res.data.loginUser.userPhone
								})
							} else {
								uni.reLaunch({
									url: '/pages/login/boforeLogin/boforeLogin',
									fail: (err) => {
										console.log(err)
									}
								})
								console.log('res', res.code)
							}


						}).catch(err => {
							uni.reLaunch({
								url: '/pages/login/boforeLogin/boforeLogin',
								fail: (err) => {
									console.log(err)
								}
							})
						})
					},
					fail: err => {
						console.log(err)
					}
				});
			},

			loginPwd() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						const code = loginRes.code
						console.log(code)
						console.log('加密', this.auth.password)
						const data3 = {
							username: this.auth.phone,
							password: md5(this.auth.password),
							code: code
						}
						loginApi.loginWeiXinByPassword(data3).then(res => {
							console.log('res', res)
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})

							console.log('oilSiteCode', this.oilSiteNo)
							if (res.code === 20000) {

								uni.reLaunch({
									url: '/pages/index/index',
									fail: (err) => {
										console.log(err)
									}
								})
								uni.showToast({
									title: res.msg,
									icon: 'success',
									duration: 3000
								})
								uni.setStorage({
									key: 'Authorization',
									data: res.data.accessToken,
									success: () => {
										console.log('Authorization成功', res.data.accessToken)
									}
								})
								uni.setStorage({
									key: 'device',
									data: res.data.openid,
									success: () => {
										console.log('deviceopenid', res.data.openid)
									}
								})
								uni.setStorageSync('userMenu', res.data.loginUser.procedureAuthList)
								uni.setStorageSync('loginUser', {
									id: res.data.loginUser.id,
									name: res.data.loginUser.name,
									userPhone: res.data.loginUser.userPhone
								})
							}
						})
					},
					fail: err => {
						console.log(err)
					}
				});

			},
			loginWeixin() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						const code = loginRes.code
						console.log(code)
						loginApi.loginWeixin(code).then(res => {
							if (res.code === 20000) {
								uni.reLaunch({
									url: '/pages/index/index',
									fail: (err) => {
										console.log(err)
									}
								})
								uni.showToast({
									title: res.msg,
									icon: 'success',
									duration: 3000
								})
								uni.setStorage({
									key: 'Authorization',
									data: res.data.accessToken,
									success: () => {
										console.log('Authorization成功', res.data.accessToken)
									}
								})
								uni.setStorage({
									key: 'device',
									data: res.data.openid,
									success: () => {
										console.log('deviceopenid', res.data.openid)
									}
								})
								uni.setStorageSync('userMenu', res.data.loginUser.procedureAuthList)
								uni.setStorageSync('loginUser', {
									id: res.data.loginUser.id,
									name: res.data.loginUser.name,
									userPhone: res.data.loginUser.userPhone
								})
							} else {
								console.log('res', res.code)
								uni.showToast({
									title: '未绑定微信',
									icon: 'none',
									duration: 1500
								})
							}


						})
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			sendMsg() {
				if (!this.frozen) {
					if (this.auth.phone) {
						const data2 = {
							phone: this.auth.phone
						}
						loginApi.loginAppSendSms(data2).then(res => {
							console.log('res', res)
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							if (res.code === 20000) {

								this.frozen = true
								setTimeout(() => {
									this.frozen = false
									clearInterval(timer)
									this.tips = `发送验证码`
								}, 1000 * 60);
								let second = 60
								const timer = setInterval(() => {
									second--
									if (second) {
										this.tips = `${second}秒后重发`
									} else {
										this.tips = `发送验证码`
										this.disabled = false
										this.btnColor = '#FE0505'
									}
								}, 1000)

							}

						})

					} else {
						uni.showToast({
							title: '请输入您的账号',
							icon: 'none'
						})
					}
				}
			},

			loginRandom() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						const code = loginRes.code
						console.log(code)
						const data2 = {
							phone: this.auth.phone,
							username: this.auth.phone, //类型：String  必有字段  备注：手机号
							verifyCode: this.auth.captcha, //类型：String  必有字段  备注：验证码
							code: code //类型：String  必有字段  备注：微信code
						}
						loginApi.loginWeiXinSMS(data2).then(res => {
							console.log('res', res)
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})

							console.log('oilSiteCode', this.oilSiteNo)
							if (res.code === 20000) {
								uni.reLaunch({
									url: '/pages/index/index',
									fail: (err) => {
										console.log(err)
									}
								})
								uni.showToast({
									title: res.msg,
									icon: 'success',
									duration: 3000
								})
								uni.setStorage({
									key: 'Authorization',
									data: res.data.accessToken,
									success: () => {
										console.log('Authorization成功', res.data.accessToken)
									}
								})
								uni.setStorage({
									key: 'device',
									data: res.data.openid,
									success: () => {
										console.log('deviceopenid', res.data.openid)
									}
								})
								uni.setStorageSync('userMenu', res.data.loginUser.procedureAuthList)
								uni.setStorageSync('loginUser', {
									id: res.data.loginUser.id,
									name: res.data.loginUser.name,
									userPhone: res.data.loginUser.userPhone
								})
							}
						})
					},
					fail: err => {
						console.log(err)
					}
				});

			},
			getMsg() {
				uni.requestSubscribeMessage({
					tmplIds: ['W5XD3NQVa6knC5jXHeWT8GS7q5CHrDUMY_sF79kLkKk'],
					success: (res) => {
						console.log(res)
					}
				})
			},
			getUserInfo({
				detail
			}) {
				console.log('三方登录只演示登录api能力，暂未关联云端数据');
				console.log('detail', detail)
				if (detail.userInfo) {
					this.loginLocal(detail.userInfo.nickName);
				} else {
					uni.showToast({
						icon: 'none',
						title: '登陆失败'
					});
				}

			},
			loginLocal(nickName) {
				uni.setStorageSync('login_type', 'local')
				uni.setStorageSync('username', nickName)
				this.toMain(nickName);
			},
			toMain(userName) {
				// this.login(userName)
				console.log(userName)
				/**
				 * 强制登录时使用reLaunch方式跳转过来
				 * 返回首页也使用reLaunch方式
				 */
				if (this.forcedLogin) {
					uni.reLaunch({
						url: '/pages/index/index',
						success: () => {
							console.log('success')
						},
						fail: err => {
							console.log(err)
						}
					});
				} else {
					uni.navigateBack();
				}

			}
		}
	};
</script>

<style scoped>
	.page-content {
		min-height: 100%;
		position: relative;
	}

	.logo {
		min-width: 100%;
		text-align: center;
	}

	.logo img {
		width: 200upx;
		height: 200rpx;
		background-size: contain;
		margin: auto;
	}

	.bottom-bg {
		position: sticky;
		bottom: 50upx;
	}
</style>