账号申诉页面

components/mobile/validation/StepAppeal.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>账号申诉</p>
+      <!--<a href="javascript:void(0)" class="back" @click="jump('select')"><i class="el-icon-back"></i></a>-->
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <mt-field placeholder="新手机号码"
+                  v-model="valid.mobile"
+                  :state="state.mobile"
+                  type="tel"
+                  @blur.native.capture="validateMobile"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field auto-complete="off"
+                  placeholder="短信验证码"
+                  v-model="valid.token"
+                  :state="state.token"
+                  @blur.native.capture="validateCode">
+          <span class="token" @click="getCheckCode" v-text="tokenText" v-if="state.mobile === 'success'">获取验证码</span>
+          <span class="token-no" v-text="tokenText" v-if="state.mobile !== 'success'">获取验证码</span>
+        </mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="登录密码"
+                  type="password"
+                  v-model="valid.password"
+                  auto-complete="off"
+                  :state="state.password"
+                  @blur.native.capture="validatePassword"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="申诉说明"
+                  type="textarea"
+                  rows="4"
+                  v-model="valid.description"
+                  @blur.native.capture="validateDescription"></mt-field>
+        <p class="pwd">请描述您申诉的原因，并尽可能多地列举出证明此 账号为您所有的证据</p>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="姓名"
+                  v-model="valid.contactName"
+                  :state="state.contactName"
+                  @blur.native.capture="validateContactName"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="联系电话"
+                  v-model="valid.contactTel"
+                  :state="state.contactTel"
+                  type="tel"
+                  @blur.native.capture="validateContactTel"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="电子邮箱"
+                  v-model="valid.contactEmail"
+                  :state="state.contactEmail"
+                  type="email"
+                  @blur.native.capture="validateContactEmail"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('appeal')">提 交</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-one',
+    data () {
+      return {
+        state: {
+          mobile: 'error',
+          token: 'error',
+          password: 'error',
+          description: 'error',
+          contactName: 'error',
+          contactTel: 'error',
+          contactEmail: 'error'
+        },
+        valid: {
+          mobile: '',
+          token: '',
+          password: '',
+          description: '',
+          contactName: '',
+          contactTel: '',
+          contactEmail: ''
+        },
+        tokenCode: '',
+        tokenTime: 60,
+        tokenText: '获取验证码'
+      }
+    },
+    methods: {
+      jump (type) {
+        this.$emit('stepEvent', type)
+      },
+      // 弹窗处理
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 验证手机号
+      validateMobile () {
+        if (!this.valid.mobile) {
+          this.downToast('请先填写手机号')
+          this.state.mobile = 'error'
+        } else {
+          let reg = /^1[0-9]{10}$/
+          if (!reg.test(this.valid.mobile)) {
+            this.downToast('请填写正确的手机号')
+            this.state.mobile = 'warning'
+          } else {
+            this.$http.get(`/update/user/mobile/hasRegister`, {params: {mobile: this.valid.mobile}})
+              .then(response => {
+                if (response.data.content.hasRegister) {
+                  this.downToast('该手机号已被注册')
+                  this.state.mobile = 'warning'
+                } else {
+                  this.state.mobile = 'success'
+                }
+              })
+          }
+        }
+      },
+      // 验证正确的验证码
+      validateCode () {
+        console.log('tokenCode', this.tokenCode)
+        if (!this.valid.token) {
+          this.downToast('请先填写验证码')
+          this.state.token = 'error'
+        } else {
+          if (!this.valid.mobile) {
+            this.downToast('请先填写正确的手机号码')
+            this.state.token = 'warning'
+          } else {
+            if (this.tokenCode) {
+              let param = new FormData()
+              param.append('mobile', this.valid.mobile)
+              param.append('token', this.tokenCode)
+              param.append('code', this.valid.token)
+              let config = {
+                headers: {'Content-Type': 'multipart/form-data'}
+              }
+              this.$http.post('/appeal/check/mobile', param, config)
+                .then(response => {
+                  if (response.data.success) {
+                    this.state.token = 'success'
+                  } else {
+                    this.$toast({
+                      message: response.data.errMsg,
+                      iconClass: 'el-icon-error'
+                    })
+                    return Promise.reject(response.data)
+                  }
+                }).catch(() => {
+                  this.downToast('请检查网络是否正常或联系服务商')
+                })
+            } else {
+              this.downToast('请点击先获取验证码信息')
+              this.state.token = 'warning'
+            }
+          }
+        }
+      },
+      // 获取验证码
+      getCheckCode () {
+        if (this.tokenTime > 0 && this.tokenTime < 60) {
+          this.downToast('请稍后再点击，我在倒计时')
+        } else {
+          if (this.state.mobile === 'success') {
+            this.$indicator.open('获取中...')
+            let _this = this
+            this.$http.get('/appeal/check/mobile', {params: {mobile: this.valid.mobile}})
+              .then(response => {
+                this.$indicator.close()
+                if (response.data) {
+                  console.log('res', response.data)
+                  this.tokenCode = response.data.content.token
+                  this.$toast({
+                    message: '验证码已经发送到您的手机，请注意查收',
+                    iconClass: 'el-icon-success'
+                  })
+                  this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                  let setTime = setInterval(() => {
+                    _this.tokenTime--
+                    this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                    if (this.tokenTime <= 0) {
+                      clearInterval(setTime)
+                      _this.tokenText = '获取验证码'
+                      _this.tokenTime = 60
+                    }
+                  }, 1000)
+                }
+              }).catch(() => {
+                this.$indicator.close()
+                this.downToast('请检查网络是否正常或联系服务商')
+              })
+          }
+        }
+      },
+      // 验证密码
+      validatePassword () {
+        if (!this.valid.password) {
+          this.downToast('请填写密码')
+          this.state.password = 'error'
+        } else {
+          this.state.password = 'success'
+        }
+      },
+      // 申诉
+      validateDescription () {
+        if (!this.valid.description) {
+          this.downToast('请填写申诉说明')
+          this.state.description = 'error'
+        } else {
+          if (this.valid.description.length >= 100) {
+            this.downToast('输入长度过长，100个字符以内')
+            this.state.description = 'warning'
+          } else {
+            this.state.description = 'success'
+          }
+        }
+      },
+      // 验证姓名
+      validateContactName () {
+        if (!this.valid.contactName) {
+          this.downToast('请填写您的姓名')
+          this.state.contactName = 'error'
+        } else {
+          if (this.valid.contactName.length > 20) {
+            this.downToast('输入长度过长，限定20个字符以内')
+            this.state.contactName = 'warning'
+          } else {
+            this.state.contactName = 'success'
+          }
+        }
+      },
+      // 验证电话
+      validateContactTel () {
+        let reg = /^1[0-9]{10}$/
+        if (!this.valid.contactTel) {
+          this.downToast('请填写联系电话')
+          this.state.contactTel = 'error'
+        } else {
+          if (!reg.test(this.valid.contactTel)) {
+            this.downToast('请填写正确的联系电话')
+            this.state.contactTel = 'warning'
+          } else {
+            this.state.contactTel = 'success'
+          }
+        }
+      },
+      // 验证邮箱
+      validateContactEmail () {
+        let reg = /^([\w-])+(\.\w+)*@([\w-])+((\.\w{2,3}){1,3})$/
+        if (!this.valid.contactEmail) {
+          this.downToast('请填写联系电子邮箱')
+          this.state.contactEmail = 'error'
+        } else {
+          if (!reg.test(this.valid.contactEmail)) {
+            this.downToast('请输入正确的邮箱地址格式')
+            this.state.contactEmail = 'warning'
+          } else {
+            this.state.contactEmail = 'success'
+          }
+        }
+      },
+      sureAccount (type) {
+        if (this.state.mobile !== 'success' ||
+          this.state.token !== 'success' ||
+          this.state.password !== 'success' ||
+          this.state.description !== 'success' ||
+          this.state.contactName !== 'success' ||
+          this.state.contactTel !== 'success' ||
+          this.state.contactEmail !== 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else {
+          this.$indicator.open('验证过程中...')
+          let param = new FormData()
+          param.append('mobile', this.valid.mobile)
+          param.append('code', this.valid.token)
+          param.append('password', this.valid.password)
+          param.append('description', this.valid.description)
+          param.append('contactName', this.valid.contactName)
+          param.append('contactTel', this.valid.contactTel)
+          param.append('contactEmail', this.valid.contactEmail)
+          param.append('token', this.tokenCode)
+          param.append('appId', this.$store.state.option.appId)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/appeal/account', param, config)
+            .then(response => {
+              this.$indicator.close()
+              if (response.data.success) {
+                this.$emit('stepEvent', type)
+                this.$emit('lastEvent', 'appeal')
+              } else {
+                this.downToast(response.data.errMsg)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      }
+    }
+  }
+</script>

components/mobile/validation/ValidationPhoneStepSelect.vue

@@ -33,7 +33,6 @@
 <script>
   export default {
     name: 'step-select',
-    // middleware: 'authenticated',
     data () {
       return {
         hasEmail: false,

components/mobile/validation/ValidationPhoneStepSuccess.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="f-main">
-    <div class="content-top">
-      <p>验证手机</p>
-    </div>
-    <template>
+    <template v-if="stepLast === 'last'">
+      <div class="content-top">
+        <p>验证手机</p>
+      </div>
       <div class="page-part page-last">
         <h4><img src="/images/all/pass.png"><span>重置成功</span></h4>
         <p>及时更新最的手机号码能极大地提高账号安全性！</p>
@@ -12,12 +12,25 @@
         <mt-button size="large" type="primary" @click="sureAccount()">完 成</mt-button>
       </div>
     </template>
+    <template v-if="stepLast === 'appeal'">
+      <div class="content-top">
+        <p>账号申诉</p>
+      </div>
+      <div class="page-part page-last">
+        <h4><img src="/images/all/pass.png"><span>申诉已提交</span></h4>
+        <p>申诉内容已提交，请耐心等待审核</p>
+      </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount()">确 认</mt-button>
+      </div>
+    </template>
   </div>
 </template>
 
 <script>
   export default {
     name: 'step-success',
+    props: ['stepLast'],
     methods: {
       sureAccount () {
         this.$router.push('/')

components/mobile/validation/index.js

@@ -4,5 +4,6 @@ import ValidationPhoneStepEmail from './ValidationPhoneStepEmail.vue'
 import ValidationPhoneStepSecurity from './ValidationPhoneStepSecurity'
 import ValidationPhoneStepNew from './ValidationPhoneStepNew.vue'
 import ValidationPhoneStepSuccess from './ValidationPhoneStepSuccess.vue'
+import StepAppeal from './StepAppeal.vue'
 
-export {ValidationPhoneStepSelect, ValidationPhoneStepMobile, ValidationPhoneStepEmail, ValidationPhoneStepSecurity, ValidationPhoneStepNew, ValidationPhoneStepSuccess}
+export {ValidationPhoneStepSelect, ValidationPhoneStepMobile, ValidationPhoneStepEmail, ValidationPhoneStepSecurity, ValidationPhoneStepNew, ValidationPhoneStepSuccess, StepAppeal}

pages/validation/phoneValidation.vue

@@ -7,6 +7,7 @@
       <validationPhone-stepSecurity v-if="step === 'questions'" @stepEvent="setStep" @tokenEvent="loadToken"/>
       <validationPhone-stepNew v-if="step === 'new'" @stepEvent="setStep" @lastEvent="setStepLast" :stepLast="stepLast" :tokenId="tokenId"/>
       <validationPhone-stepSuccess v-if="step === 'last'" @stepEvent="setStep" :stepLast="stepLast"/>
+      <step-appeal v-if="step === 'appeal'" @stepEvent="setStep" @lastEvent="setStepLast"/>
     </template>
     <template v-else>
       <accountCenter-header/>
@@ -17,7 +18,7 @@
 <script>
   import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
   import PhoneValidation from '~components/validation/PhoneValidation.vue'
-  import {ValidationPhoneStepSelect, ValidationPhoneStepMobile, ValidationPhoneStepEmail, ValidationPhoneStepSecurity, ValidationPhoneStepNew, ValidationPhoneStepSuccess} from '~components/mobile/validation'
+  import {ValidationPhoneStepSelect, ValidationPhoneStepMobile, ValidationPhoneStepEmail, ValidationPhoneStepSecurity, ValidationPhoneStepNew, ValidationPhoneStepSuccess, StepAppeal} from '~components/mobile/validation'
   export default {
     layout (context) {
       return context.store.state.option.isMobile ? 'mobile' : 'default'
@@ -43,7 +44,8 @@
       ValidationPhoneStepEmail,
       ValidationPhoneStepSecurity,
       ValidationPhoneStepNew,
-      ValidationPhoneStepSuccess
+      ValidationPhoneStepSuccess,
+      StepAppeal
     },
     computed: {
       isMobile () {
@@ -55,6 +57,7 @@
     },
     methods: {
       setStep (type) {
+        console.log(type)
         this.step = type
       },
       setInfo (style) {
@@ -64,6 +67,7 @@
         this.tokenId = token
       },
       setStepLast (type) {
+        console.log(type)
         this.stepLast = type
       }
     }