|
|
@@ -0,0 +1,188 @@
|
|
|
+<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>
|
|
|
+
|
|
|
+<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: {
|
|
|
+ TuiListCell
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ mobile: '',
|
|
|
+ code: '',
|
|
|
+ realName: '',
|
|
|
+ birthday: 0
|
|
|
+ },
|
|
|
+ isSend: 0,
|
|
|
+ countDown: 119,
|
|
|
+ timer: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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({
|
|
|
+ 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>
|
