LSM_OIL_SITE/pages/Auth/Auth.vue

<template>
	<view class="page-content my-bg">
		<cu-custom :isBack="true" class="main-topbar bg-main-oil" bgColor="bg-main-oil">
			<block slot="content">绑定星油云站</block>
			<block slot="backText">返回</block>
		</cu-custom>
		<view class="pannel">
			<view class="logo margin-top">
				<img :src="baseURL+'/static/img/order-xy.png'" mode="" />
				<view class="text-center">
					<text class="text-bold text-lg text-black">{{oilSite.oilSiteName}}</text>
				</view>
			</view>
			<view class="bg-gradual-orange margin padding radius  shadow-warp">
				<view class="text-bold text-lg padding-bottom text-center">
					星油云站欢迎您的加入
				</view>
				<view class=" padding-bottom text-center">
					请确认您的手机号码已注册星油云站管理员账号
				</view>
				<view class="radius">

					<view class="cu-form-group">
						<view class="title text-black">姓名</view>
						<input v-model="auth.userName" placeholder="请输入姓名" name="input"></input>
					</view>
					<!-- 		<view class="cu-form-group">
					<view class="title text-black">工号</view>
					<input v-model="oilSiteNo" placeholder="请输入云站编号" name="input"></input>
				</view> -->
					<view class="cu-form-group">
						<view class="title text-black">身份证</view>
						<input type="idcard" v-model="auth.idNumber" placeholder="请输入身份证号" name="input"></input>
					</view>
					<view class="cu-form-group">
						<view class="title text-black">手机号</view>
						<input type="number" v-model="auth.phone" placeholder="请输入手机号" name="input"></input>
						<button class='cu-btn bg-main-oil shadow' @tap="sendMsg">验证码</button>
					</view>
					<view class="cu-form-group">
						<view class="title text-black">验证码</view>
						<input type="number" :maxlength="6" v-model="auth.captcha" placeholder="请输入六位数字验证码" name="input"></input>
					</view>
				</view>
			</view>
			<view class="margin margin-top-xl">
				<!-- 	<button class="bg-main-oil" @tap="beforeLogin" open-type="getUserInfo" @getuserinfo="getUserInfo">
					确认
				</button> -->
				<button class="bg-main-oil" @tap="beforeLogin">
					注册
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import loginApi from '@/api/login.js'
	export default {
		data() {
			return {
				baseURL: this.global.baseURL,
				forcedLogin: true,
				oilSiteNo: '',
				oilSite: {},
				auth: {

				}
			};
		},
		created() {
			// this.loginWeixin()
			uni.getStorage({
				key: 'oilSiteCode',
				success: (res) => {
					this.oilSiteNo = res.data
					console.log(this.oilSiteNo)
				}
			})
			this.oilSite = uni.getStorageSync('oilSite')
		},
		methods: {
			sendMsg() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						const code = loginRes.code
						console.log(code)
						const data2 = {
							code: code,
							idCard: this.auth.idNumber,
							name: this.auth.userName,
							phone: this.auth.phone,
							oilSiteCode: this.oilSiteNo
						}
						loginApi.registerWeixinSMS(data2).then(res => {
							console.log('res', res)
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						})
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			register() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						const code = loginRes.code
						console.log(code)
						const data1 = {
							code: code,
							name: this.auth.userName,
							idCard: this.auth.idNumber,
							phone: this.auth.phone,
							authCode: this.auth.captcha,
							oilSiteCode: this.oilSiteNo
						}
						loginApi.registerWeixin(data1).then(res => {
							console.log('res', res)
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						})
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			beforeLogin() {
				if (!this.auth.userName) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none',
						duration: 3000
					})
					return false
				}
				if (!this.auth.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 3000
					})
					return false
				}
				if (!this.auth.idNumber) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none',
						duration: 3000
					})
					return false
				}
				if (!this.auth.captcha) {
					uni.showToast({
						title: '请输入短信验证码',
						icon: 'none',
						duration: 3000
					})
					return false
				}
				this.register()

			},
			nextStep() {
				if (this.oilSiteNo) {
					uni.navigateTo({
						url: ''
					})
				} else {
					uni.showToast({
						title: '请输入云站号',
						duration: 3000,
						icon: 'none'
					})
				}
			},
			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();
				}

			},
			loginWeixin() {
				uni.login({
					provider: 'weixin',
					success: loginRes => {
						const code = loginRes.code
						console.log(code)
						loginApi.loginWeixin(code).then(res => {
							console.log('res', res)
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						})
					},
					fail: err => {
						console.log(err)
					}
				});
			}
		}
	};
</script>

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

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

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