|
|
@@ -1,188 +1,22 @@
|
|
|
<template>
|
|
|
- <div class="app-content">
|
|
|
- <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="number" />
|
|
|
- </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>
|
|
|
+ <view>
|
|
|
|
|
|
+ </view>
|
|
|
+</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',
|
|
|
+ name: 'birthday',
|
|
|
components: {
|
|
|
TuiListCell
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- form: {
|
|
|
- mobile: '',
|
|
|
- code: '',
|
|
|
- realName: '',
|
|
|
- birthday: 0
|
|
|
- },
|
|
|
- isSend: 0,
|
|
|
- countDown: 119,
|
|
|
- timer: null
|
|
|
}
|
|
|
},
|
|
|
- onLoad(option) {},
|
|
|
+ onLoad() {},
|
|
|
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({
|
|
|
- url: '/pages/callback/index',
|
|
|
- query: {
|
|
|
- pageStatus: 6
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- // 倒计时
|
|
|
- beginCountDown() {
|
|
|
- this.countDown = 119
|
|
|
- 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>
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
- // 公共
|
|
|
- .line-cell {
|
|
|
- .tui-title {
|
|
|
- width: 210upx;
|
|
|
- color: $fontColor2;
|
|
|
- }
|
|
|
- .tui-input {
|
|
|
- width: calc(100% - 210upx);
|
|
|
- font-size: 28upx;
|
|
|
- }
|
|
|
- .tui-placeholder {
|
|
|
- color: #ccc;
|
|
|
- }
|
|
|
- .phcolor {
|
|
|
- color: #ccc;
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-wrap {
|
|
|
- width: 90%;
|
|
|
- margin: 60upx auto;
|
|
|
- .button-com {
|
|
|
- width: 100%;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
- }
|
|
|
- .code-wrap {
|
|
|
- .tui-input {
|
|
|
- width: calc(100% - 410upx);
|
|
|
- font-size: 28upx;
|
|
|
- }
|
|
|
- .tui-code {
|
|
|
- width: 200upx;
|
|
|
- text-align: center;
|
|
|
- border-left: 1upx solid $borderColor;
|
|
|
- color: $mainColor;
|
|
|
- }
|
|
|
- }
|
|
|
</style>
|
