|
|
@@ -1,32 +1,44 @@
|
|
|
<template>
|
|
|
<div class="app-content">
|
|
|
- <div class="module-com input-line-wrap">
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">手机号</div>
|
|
|
- <input placeholder-class="phcolor" class="tui-input" name="name" placeholder="请输入手机号" maxlength="50" type="number" />
|
|
|
- </tui-list-cell>
|
|
|
- <tui-list-cell class="line-cell code-wrap" :hover="false">
|
|
|
- <div class="tui-title">验证码</div>
|
|
|
- <input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="请输入验证码" maxlength="50" type="number" />
|
|
|
- <div class="tui-code">获取验证码</div>
|
|
|
- </tui-list-cell>
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">姓名</div>
|
|
|
- <input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="选填" maxlength="50" type="number" />
|
|
|
- </tui-list-cell>
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">生日</div>
|
|
|
- <input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="选填" maxlength="50" type="number" />
|
|
|
- </tui-list-cell>
|
|
|
- <div class="btn-wrap">
|
|
|
- <button class="button-com red big">确认</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <form @submit="formSubmit">
|
|
|
+ <div class="module-com input-line-wrap">
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">手机号</div>
|
|
|
+ <input v-model="form.mobile" placeholder-class="phcolor" class="tui-input" name="mobile" placeholder="请输入手机号" type="phone" />
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell code-wrap" :hover="false">
|
|
|
+ <div class="tui-title">验证码</div>
|
|
|
+ <input v-model="form.code" placeholder-class="phcolor" class="tui-input" name="code" placeholder="请输入验证码" type="number" />
|
|
|
+ <div class="tui-code" v-if="isSend">{{ countDown + 's' }}</div>
|
|
|
+ <div class="tui-code" v-else @click="getCode">获取验证码</div>
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">姓名</div>
|
|
|
+ <input v-model="form.realName" placeholder-class="phcolor" class="tui-input" name="realName" placeholder="选填" type="text" />
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">生日</div>
|
|
|
+ <picker mode="date" :value="form.birthday" @change="selTimeFn" class="tui-input">
|
|
|
+ <input v-model="form.birthday" hidden placeholder-class="phcolor" class="tui-input" name="birthday" />
|
|
|
+ <div v-if="form.birthday">{{ form.birthday }}</div>
|
|
|
+ <div class="tui-placeholder" v-else>请选择生日</div>
|
|
|
+ </picker>
|
|
|
+ <!-- <input placeholder-class="phcolor" class="tui-input" name="phone" placeholder="选填" maxlength="50" type="number" /> -->
|
|
|
+ </tui-list-cell>
|
|
|
+ <div class="btn-wrap">
|
|
|
+ <button class="button-com red big" formType="submit">确认</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import TuiListCell from '@/components/plugin/list-cell'
|
|
|
+const form = require('@/utils/formValidation.js')
|
|
|
+// api
|
|
|
+import { register } from '@/api/login'
|
|
|
+import { sendSms } from '@/api/common'
|
|
|
export default {
|
|
|
name: 'register',
|
|
|
components: {
|
|
|
@@ -34,20 +46,99 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- aaa: {
|
|
|
- cat_id: '',
|
|
|
- limit: 5,
|
|
|
- name: '',
|
|
|
- order: 'newest',
|
|
|
- owner_user_id: '7',
|
|
|
- page: 1
|
|
|
- }
|
|
|
+ form: {
|
|
|
+ mobile: '',
|
|
|
+ code: '',
|
|
|
+ realName: '',
|
|
|
+ birthday: ''
|
|
|
+ },
|
|
|
+ isSend: 0,
|
|
|
+ countDown: 59,
|
|
|
+ timer: null
|
|
|
}
|
|
|
},
|
|
|
- onLoad(option) {
|
|
|
- console.log(this.$util.parse(this.aaa))
|
|
|
- },
|
|
|
- methods: {}
|
|
|
+ onLoad(option) {},
|
|
|
+ methods: {
|
|
|
+ getCode() {
|
|
|
+ if (!this.form.mobile || !this.$util.checkMobile(this.form.mobile)) {
|
|
|
+ this.$msg('请输入正确的手机号！')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ this.isSend = 1
|
|
|
+ sendSms({
|
|
|
+ type: 1,
|
|
|
+ mobile: this.form.mobile
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.beginCountDown()
|
|
|
+ this.$msg('发送成功！')
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.isSend = 0
|
|
|
+ this.$msg('发送失败！')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ selTimeFn(e) {
|
|
|
+ this.form.birthday = e.detail.value
|
|
|
+ },
|
|
|
+ confirmFn() {
|
|
|
+ register(this.form).then(res => {
|
|
|
+ this.$msg('注册成功！')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$util.pageTo('/pages/home/user')
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 倒计时
|
|
|
+ beginCountDown() {
|
|
|
+ this.countDown = 59
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ if (this.countDown === 0) {
|
|
|
+ clearInterval(this.timer)
|
|
|
+ this.isSend = 0
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.countDown -= 1
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ // 表单验证
|
|
|
+ formSubmit(e) {
|
|
|
+ // 表单规则
|
|
|
+ let rules = [
|
|
|
+ {
|
|
|
+ name: 'mobile',
|
|
|
+ rule: ['required'],
|
|
|
+ msg: ['请输入手机号']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'code',
|
|
|
+ rule: ['required'],
|
|
|
+ msg: ['请输入验证码']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'realName',
|
|
|
+ rule: ['required'],
|
|
|
+ msg: ['请输入名字']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'birthday',
|
|
|
+ rule: ['required'],
|
|
|
+ msg: ['请选择生日']
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ // 进行表单检查
|
|
|
+ let formData = e.detail.value
|
|
|
+ let checkRes = form.validation(formData, rules)
|
|
|
+ // 验证通过!
|
|
|
+ if (!checkRes) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.confirmFn()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$msg(checkRes)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -68,25 +159,25 @@ export default {
|
|
|
.phcolor {
|
|
|
color: #ccc;
|
|
|
}
|
|
|
- }
|
|
|
- .btn-wrap {
|
|
|
- width: 90%;
|
|
|
- margin: 60px auto;
|
|
|
- .button-com {
|
|
|
- width: 100%;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
- }
|
|
|
- .code-wrap {
|
|
|
+ }
|
|
|
+ .btn-wrap {
|
|
|
+ width: 90%;
|
|
|
+ margin: 60px auto;
|
|
|
+ .button-com {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .code-wrap {
|
|
|
.tui-input {
|
|
|
width: calc(100% - 410px);
|
|
|
font-size: 28px;
|
|
|
}
|
|
|
- .tui-code {
|
|
|
- width: 200px;
|
|
|
- text-align: center;
|
|
|
- border-left: 1px solid $borderColor;
|
|
|
- color: $mainColor;
|
|
|
- }
|
|
|
- }
|
|
|
+ .tui-code {
|
|
|
+ width: 200px;
|
|
|
+ text-align: center;
|
|
|
+ border-left: 1px solid $borderColor;
|
|
|
+ color: $mainColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
liujd