|
|
@@ -1,228 +1,113 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <navigation-bar background-color="#fff" front-color="#000000" />
|
|
|
- <view class="remain">
|
|
|
- <h1>账号注册</h1>
|
|
|
- </view>
|
|
|
- <view class="form">
|
|
|
- <u-form :model="form" ref="uForm" label-width="100px" label-position="top">
|
|
|
- <u-form-item label="手机号" prop="phone">
|
|
|
- <view class="form-input">
|
|
|
- <u-input v-model="form.phone" type="number" border="surround" maxlength='11'
|
|
|
- placeholder='请输入手机号码' :clearable='false' />
|
|
|
- </view>
|
|
|
- </u-form-item>
|
|
|
- <!-- <u-form-item label="选择你的身份" prop="type">
|
|
|
- <view class="form-input" @click="show=true" >
|
|
|
- <u-input v-model="form.type" type="text"
|
|
|
- placeholder='请选择你的身份' :clearable='false' disabled />
|
|
|
- <u-picker :show="show" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker>
|
|
|
- </view>
|
|
|
- </u-form-item> -->
|
|
|
- <u-form-item label="验证码" prop="smsCode">
|
|
|
- <view class="form-input">
|
|
|
- <u-input placeholder="请输入验证码" v-model="form.smsCode">
|
|
|
- <template slot="suffix">
|
|
|
- <span class="code" @click="getCode">{{code}}</span>
|
|
|
- </template>
|
|
|
- </u-input>
|
|
|
- </view>
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="密码" prop="password">
|
|
|
- <view class="form-input">
|
|
|
- <u-input v-model="form.password" type="password" placeholder='请输入密码' :clearable='false' />
|
|
|
- </view>
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="确认密码" prop="rePassword">
|
|
|
- <view class="form-input">
|
|
|
- <u-input v-model="form.rePassword" type="password" placeholder='请输入密码' :clearable='false' />
|
|
|
- </view>
|
|
|
- </u-form-item>
|
|
|
- </u-form>
|
|
|
- <view class="btn">
|
|
|
- <view style="margin-bottom: 20rpx;font-size: 28rpx;">
|
|
|
- <u-checkbox-group v-model="value" :wrap="true">
|
|
|
- <u-checkbox name="1"></u-checkbox>登录同意<text class="blue-class" @click="getAgreement(1)">《用户协议》</text>和<text
|
|
|
- class="blue-class" @click="getAgreement(2)">《隐私政策》</text>
|
|
|
- </u-checkbox-group>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <u-button type="error" shape="circle" text="注册" @click="submit()"></u-button>
|
|
|
- </view>
|
|
|
- <view class="tip" @click="toLogin()">已有账号，去<text class="blue-class"
|
|
|
- style="margin-left: 10rpx;">登录</text></view>
|
|
|
+ <view class="login">
|
|
|
+ <view class="dk" style="margin-top: 30px">
|
|
|
+ <view class="bg">
|
|
|
+ <text class="icon"></text>
|
|
|
+ <input type="number" v-model="form.phone" placeholder="请输入手机号" />
|
|
|
</view>
|
|
|
-
|
|
|
+ <view class="bg">
|
|
|
+ <text class="icon"></text>
|
|
|
+ <input type="number" v-model="form.smsCode" placeholder="验证码" />
|
|
|
+ <view class="label">获取验证码</view>
|
|
|
+ </view>
|
|
|
+ <view class="bg">
|
|
|
+ <text class="icon"></text>
|
|
|
+ <input :password="show" v-model="form.password" placeholder="请输入密码" />
|
|
|
+ <view class="label"><view class="icon" :class="{ active: !show }" @click="show = !show"></view></view>
|
|
|
+ </view>
|
|
|
+ <view class="bg">
|
|
|
+ <text class="icon"></text>
|
|
|
+ <input :password="show" v-model="form.rePassword" placeholder="确认密码" />
|
|
|
+ <view class="label"><view class="icon" :class="{ active: !show }" @click="show = !show"></view></view>
|
|
|
+ </view>
|
|
|
+ <view class="xy">
|
|
|
+ <u-checkbox-group class="checkbox" v-model="form.checked">
|
|
|
+ <u-checkbox size="15" shape="circle" label="我已阅读并同意" labelSize="13" name="true"></u-checkbox>
|
|
|
+ </u-checkbox-group>
|
|
|
+ <text class="a" @click="getAgreement(1)">《用户协议》</text>
|
|
|
+ <text>和</text>
|
|
|
+ <text class="a" @click="getAgreement(2)">《隐私政策》</text>
|
|
|
+ </view>
|
|
|
+ <button class="btn" @click="submit()">确定</button>
|
|
|
+ <button class="btn register" @click="toLogin()">返回</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- const passwordValid = (rule, value, callback) => {
|
|
|
- value == this.form.password ? callback() : callback(new Error('两次输入密码不一致'))
|
|
|
- };
|
|
|
- return {
|
|
|
- time: 60,
|
|
|
- code: '获取验证码',
|
|
|
- value: ['1'],
|
|
|
- form: {
|
|
|
- phone: '',
|
|
|
- smsCode: '',
|
|
|
- password: '',
|
|
|
- type: '',
|
|
|
- rePassword: '',
|
|
|
- },
|
|
|
- rules: {
|
|
|
- phone: [{
|
|
|
- required: true,
|
|
|
- message: '请输入手机号',
|
|
|
- trigger: 'blur,change'
|
|
|
- },
|
|
|
- {
|
|
|
- validator: (rule, value, callback) => {
|
|
|
- // return uni.$u.test.mobile(value);
|
|
|
- },
|
|
|
- message: '手机号码不正确',
|
|
|
- trigger: ['change', 'blur'],
|
|
|
- }
|
|
|
- ],
|
|
|
- password: [{
|
|
|
- required: true,
|
|
|
- message: '请输入密码',
|
|
|
- trigger: 'blur,change'
|
|
|
- }],
|
|
|
- rePassword: [{
|
|
|
- validator: passwordValid,
|
|
|
- required: true,
|
|
|
- trigger:'blur'
|
|
|
-
|
|
|
- }],
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- this.$refs.uForm.setRules(this.rules);
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- console.log(option.type)
|
|
|
- this.form.type=option.type
|
|
|
- },
|
|
|
- created() {},
|
|
|
- methods: {
|
|
|
- startCount() {
|
|
|
- setTimeout(() => {
|
|
|
- let time = this.time;
|
|
|
- if (time == 0) {
|
|
|
- this.code = '重新获取';
|
|
|
- this.time = 60;
|
|
|
- return;
|
|
|
- }
|
|
|
- this.time = --time;
|
|
|
- this.code = time + '后重新获取';
|
|
|
- this.startCount();
|
|
|
- }, 1000)
|
|
|
- },
|
|
|
- getCode() {
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show: true,
|
|
|
+ time: 60,
|
|
|
+ code: '获取验证码',
|
|
|
+ form: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.form.type = option.type;
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ startCount() {
|
|
|
+ setTimeout(() => {
|
|
|
let time = this.time;
|
|
|
- if (time > 0 && time < 60) {
|
|
|
- return;
|
|
|
- }
|
|
|
- let phone = this.form.phone;
|
|
|
- if (!this.$common.isPhone(phone)) {
|
|
|
- this.$common.toast('请输入正确的手机号');
|
|
|
+ if (time == 0) {
|
|
|
+ this.code = '重新获取';
|
|
|
+ this.time = 60;
|
|
|
return;
|
|
|
}
|
|
|
+ this.time = --time;
|
|
|
+ this.code = time + '后重新获取';
|
|
|
this.startCount();
|
|
|
- this.$api.getPhoneSmsCode().then(resp => {
|
|
|
- this.$common.toast('已发送');
|
|
|
- })
|
|
|
- },
|
|
|
- submit() {
|
|
|
- this.$refs.uForm.validate().then(res => {
|
|
|
- let value = this.value;
|
|
|
- if (value.length == 0) {
|
|
|
- this.$common.toast('请先同意协议');
|
|
|
- return;
|
|
|
- }
|
|
|
- this.$api.doRefister(this.form).then(res => {
|
|
|
- if (res.code == 200) {
|
|
|
- uni.$u.toast('注册成功')
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/login/login'
|
|
|
- });
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
- }).catch(errors => {})
|
|
|
- },
|
|
|
- toLogin() {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/login/login'
|
|
|
- });
|
|
|
- },
|
|
|
- getAgreement(id) {
|
|
|
- this.$common.to('/pages/login/userAgreement?id='+id)
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ getCode() {
|
|
|
+ let time = this.time;
|
|
|
+ if (time > 0 && time < 60) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let phone = this.form.phone;
|
|
|
+ if (!this.$common.isPhone(phone)) {
|
|
|
+ this.$common.toast('请输入正确的手机号');
|
|
|
+ return;
|
|
|
}
|
|
|
- // changeHandler(e){
|
|
|
- // console.log(e)
|
|
|
- // this.form.type=e.value[0]
|
|
|
- // },
|
|
|
- // confirm(e) {
|
|
|
- // // console.log(e)
|
|
|
- // this.show=false
|
|
|
- // }
|
|
|
+ this.startCount();
|
|
|
+ this.$api.getPhoneSmsCode().then(resp => {
|
|
|
+ this.$common.toast('已发送');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ let rule = [
|
|
|
+ { name: 'phone', checkType: 'phone', errorMsg: '请输入正确的手机号' },
|
|
|
+ { name: 'smsCode', checkType: 'notnull', errorMsg: '请输入验证码' },
|
|
|
+ { name: 'password', checkType: 'notnull', errorMsg: '请输入密码' },
|
|
|
+ { name: 'rePassword', checkType: 'same', checkRule: this.form.password, errorMsg: '两次输入不一致' },
|
|
|
+ { name: 'checked', checkType: 'notnull', errorMsg: '请同意并勾选协议' }
|
|
|
+ ];
|
|
|
+ if (!this.verify.check(this.form, rule)) {
|
|
|
+ uni.showModal({ content: this.verify.error, showCancel: false });
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.$api.doRefister(this.form).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.$u.toast('注册成功');
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/login/login'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toLogin() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/login/login'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getAgreement(id) {
|
|
|
+ uni.navigateTo({ url: '/pages/login/userAgreement?id=' + id });
|
|
|
}
|
|
|
}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
- page {
|
|
|
- background-color: #fff;
|
|
|
- padding: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .remain {
|
|
|
- margin: 10px;
|
|
|
- margin: 30rpx 150rpx 0;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .wel {
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .form {
|
|
|
- height: 200px;
|
|
|
- }
|
|
|
-
|
|
|
- .form-input {
|
|
|
- width: 100%;
|
|
|
- background-color: #f5f5f5;
|
|
|
- margin-top: 5px;
|
|
|
- border-radius: 20rpx;
|
|
|
- border: none;
|
|
|
- }
|
|
|
-
|
|
|
- .btn {
|
|
|
- margin: 25px 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .tip {
|
|
|
- margin-top: 30px;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .code {
|
|
|
- color: red;
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
-
|
|
|
- .blue-class {
|
|
|
- color: #55aaff;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-</style>
|
|
|
+<style lang="scss"></style>
|
李书文