zhongpin_Phase-II_MP_WX/BagAuth/pages/login/register.vue

<!-- 验证码登录 账密登录 -->
<template>
	<view class="login-page bg-white">
		<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-white">
		</cu-custom>
		<view class="bg-img bg-mask flex align-center"
			:style="'background-image: url('+imgURL+'login-bg-top.png);height: 480upx;'">
			<view class="padding-xl ">
				<view class="image login-bg">
					<image :src="imgURL+'new-logo.png'" mode="widthFix"></image>
					<view class="text-bold text-lg padding-top">
						一路油你 中品加油
					</view>
					<view class="text-df text-grey padding-top-xs padding-bottom">
						注册为个人会员
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="bg-white nav padding login-shadow">
			<view v-show="!setPwd">

				<view class="flex text-center padding-bottom" v-if="!sended">
					<view class="cu-item text-bold text-lg flex-sub">

					</view>
					<view class="cu-item text-red cur text-bold text-lg  flex-sub ">
						个人账号
					</view>
					<view class="cu-item text-bold text-lg flex-sub">

					</view>
				</view>
				<view class="text-grey padding" v-else>
					验证码已发送至 <text class="padding-left-sm">{{driver.username|phoneHide}}</text>
				</view>
				<form>
					<view class=" cu-form-group padding-top yu-input" v-if="!sended">
						<input placeholder="请输入手机号码" label="手机号" v-model="driver.username" type="number" name="input" />
					</view>

					<view class="cu-form-group yu-input" v-if="sended">
						<input placeholder="请输入验证码" type="number" v-model="random" name="input" />
						<view class='oil-main-color' @tap="sendRandom"> {{tips}}</view>
					</view>
				</form>
				<view class=" flex flex-direction">
					<button class="cu-btn margin bg-main-oil  lg" @tap="sendRandom" v-if="!sended">
						下一步
					</button>
					<button class="cu-btn margin bg-main-oil  lg" @tap="userRegister" v-else>
						确定
					</button>
				</view>
			</view>
			<view class="" v-show="setPwd">
				<view class="text-grey padding">
					设置登录密码
				</view>
				<form>
					<view class=" cu-form-group padding-top yu-input">
						<input placeholder="6-16位密码" v-model="password" name="input" />
					</view>
				</form>
				<view class=" flex flex-direction">
					<button class="cu-btn margin bg-main-oil  lg" @tap="savePwd">
						保存
					</button>
					<button class="cu-btn margin   lg" @tap="skipPwd">
						跳过
					</button>
				</view>
			</view>



		</scroll-view>

		<view class="cu-load load-modal" v-if="loadModal">
		</view>
		<loginBottom @onCheck="checkAgree" />

	</view>
</template>

<script>
	import loginBottom from './components/loginBottom.vue'
	import authApi from '@/api/auth.js'
	import userApi from '@/api/user.js'
	export default {
		components: {
			loginBottom
		},
		data() {
			return {
				tips: '发送验证码',
				accuntSource: false,
				imgURL: this.global.imgURL,
				password: "",
				random: '',
				driver: {
					username: uni.getStorageSync('username') ? uni.getStorageSync('username') : ''
				},
				sended: false,
				intervalID: '',
				setPwd: false,
				verifyCodeToken:''
			}
		},

		onShow() {},
		methods: {
			savePwd() {
				userApi.setUserPwd({
					userName:this.driver.username,
					password:this.password
				}).then(res=>{
					if(res.code===20000){
						uni.showToast({
							title: '修改密码成功',
							icon: 'success',
							duration: 2000
						})
						
						this.skipPwd()
					}else{
						uni.showToast({
							title: '修改密码失败',
							icon: 'success',
							duration: 2000
						})
					}
				})
			},
			skipPwd() {
				uni.reLaunch({
					url: '/BagAuth/pages/login/login'
				})
			},
			sendRandom() {
				if (this.tips == '发送验证码') {
					authApi.getRegisterRandom({
						username: this.driver.username
					}).then(res => {
						if (res.code == 20000) {
							this.sended = true
							var second = 60
							this.verifyCodeToken = res.data.verifyCodeToken
							this.intervalID = setInterval(() => {
								if (second > 0) {
									this.tips = second + '秒后可重发'
									second--
								} else {
									clearInterval(this.intervalID)
									this.tips = '发送验证码'
								}
							}, 1000)
						}
					})
				} else {
					uni.showToast({
						title: '别急，等会儿再发哦',
						icon: 'none',
						position: 'bottom'
					})
				}
			},
			loginSuccess(res) {
				let resData = res.data
				if (resData.authTokenDTO.loginFlag) {
					uni.setStorageSync('Authorization', resData.authTokenDTO.accessToken)
					uni.setStorageSync('accountStatus', resData.isCompanyAccount)
					uni.getUserProfile({
						success: (res) => {
							uni.setStorageSync('wxInfo', JSON.parse(res.rawData))
						}
					})
					let user = resData.oilCustomerAccount
					uni.setStorageSync('user', user)

					setTimeout(() => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							complete: (err) => {
							}
						})
					}, 1000);
					this.setPwd = true
					//  这里有问题
					// uni.reLaunch({
					// 	url: '/pages/tabbar/home/home'
					// })
				}
			},
			userRegister() {
				authApi.userRegister({
					username: this.driver.username,
					verifyCode: this.random,
					verifyCodeToken:this.verifyCodeToken,
					unionId: uni.getStorageSync('unionid')

				}).then(res => {
					if (res.code == 20000) {
						this.sended = true
						this.loginSuccess(res)
					}
				})
			},
			checkAgree(val) {
				this.checked = val
			},
		},
		filters: {
			phoneHide(value) {
				if (value) {
					var pat = /(\d{3})\d*(\d{4})/
					var b = value.replace(pat, '$1****$2');
					return b
				} else {
					return value
				}
			}
		}
	}
</script>

<style>
	.login-bg {
		width: 100%;
	}

	.login-bg image {
		width: 100upx;
		vertical-align: bottom;
	}

	.login-page {
		height: 750rpx;
		background-color: #fff;
	}

	.login-shadow {
		border-radius: 50upx 50upx 0 0;
		box-shadow: 0px -10px 20px 2px rgba(0, 0, 0, 0.06);
		margin-top: -50upx;
		position: relative;
		z-index: 2;
	}

	.bg-mask {
		background-color: transparent;
	}

	.bg-mask::after {
		background-color: transparent;
	}

	.yu-input {
		background: #FAFAFA
	}
</style>