第一次提交
This commit is contained in:
caolc
242
BagAuth/pages/login/register.vue
Normal file
242
BagAuth/pages/login/register.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<!-- 验证码登录 账密登录 -->
|
||||
<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'
|
||||
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() {
|
||||
|
||||
},
|
||||
skipPwd() {
|
||||
uni.switchTab({
|
||||
url: '/pages/tabbar/home/home'
|
||||
})
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user