实名认证页面

assets/scss/mobileCommon.scss

@@ -307,3 +307,21 @@
 .mint-popup-bottom {
   top: 50%;
 }
+
+
+//等待审核中
+
+.page-last {
+  h4 {
+    span{
+      font-size: .5rem;
+      color: #323232;
+      font-weight: normal;
+    }
+  }
+  p{
+    text-align: left;
+    font-size: .3rem;
+    color: #8b8b8b;
+  }
+}

components/mobile/realNameCertification/index.js

@@ -0,0 +1,4 @@
+import stepOne from './stepOne.vue'
+import stepLast from './stepLast.vue'
+
+export {stepOne, stepLast}

components/mobile/realNameCertification/stepLast.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="f-main">
+    <template v-if="step === 'await'">
+      <div class="content-top">
+        <p>实名认证</p>
+      </div>
+      <div class="page-part page-last">
+        <h4><img src="/images/all/await.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: ['step'],
+    methods: {
+      sureAccount () {
+        this.$router.push('/cloudcenter')
+      }
+    }
+  }
+</script>

components/mobile/realNameCertification/stepOne.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="f-main">
+    <div class="content-top">
+      <p>实名认证{{valid.realName}}</p>
+    </div>
+    <div class="f-form">
+      <div class="page-part">
+        <mt-field placeholder="真实姓名"
+                  v-model="valid.realName"
+                  :state="state.realName"
+                  @blur.native.capture="validateRealName"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <mt-field placeholder="身份证号"
+                  v-model="valid.idCard"
+                  :state="state.idCard"
+                  @blur.native.capture="validateIdCard"
+        ></mt-field>
+      </div>
+      <div class="page-part">
+        <div>
+        <!--<checkbox v-model="checked"></checkbox>-->
+        <span class="agree">我已阅读并同意 <a href="/common/agreement">《优软云服务条款》</a></span>
+        </div>
+        </div>
+      <div class="page-part">
+        <mt-button size="large" type="primary" @click="sureAccount('await')">提 交</mt-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'step-one',
+    data () {
+      return {
+        state: {
+          realName: 'error',
+          idCard: 'error'
+        },
+        valid: {
+          realName: '',
+          idCard: ''
+        }
+      }
+    },
+    methods: {
+      // 弹窗处理
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 验证姓名
+      validateRealName () {
+        if (!this.valid.realName) {
+          this.downToast('请先填写您的姓名')
+          this.state.realName = 'error'
+        } else {
+          if (this.valid.realName.length > 20) {
+            this.downToast('输入长度过长，限定20个字符以内')
+            this.state.realName = 'warning'
+          } else {
+            this.state.realName = 'success'
+          }
+        }
+      },
+      // 验证身份证
+      validateIdCard () {
+        let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
+        if (!this.valid.idCard) {
+          this.downToast('请填写您的身份证号')
+          this.state.idCard = 'error'
+        } else {
+          if (!reg.test(this.valid.idCard)) {
+            this.downToast('您的身份证有误，请检查')
+            this.state.idCard = 'warning'
+          } else {
+            this.$http.get(`/api/user/idCard/valid`, {params: {idCard: this.valid.idCard}})
+              .then(response => {
+                if (!response.data.content.isValid) {
+                  this.state.idCard = 'success'
+                } else {
+                  this.state.idCard = 'warning'
+                  this.downToast('身份已被认证，请确认。')
+                }
+              }).catch((err) => {
+                this.$indicator.close()
+                this.downToast(err.errMsg)
+              })
+          }
+        }
+      },
+      sureAccount (type) {
+        if (this.state.realName !== 'success' ||
+          this.state.idCard !== 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else {
+          this.$indicator.open('验证过程中...')
+          let param = new FormData()
+          param.append('realName', this.valid.realName)
+          param.append('idCard', this.valid.idCard)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/valid/user/identity/submit', param, config)
+            .then(response => {
+              this.$indicator.close()
+              if (response.data.success) {
+                this.$emit('stepEvent', type)
+              } else {
+                this.downToast(response.data.errMsg)
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      }
+    }
+  }
+</script>

pages/certification/realNameCertification.vue

@@ -1,17 +1,47 @@
 <template>
   <div>
-    <accountCenter-header/>
-    <realName-certification/>
+    <template v-if="isMobile">
+      <step-one v-if="step === 'first'" @stepEvent="setStep"/>
+      <step-last v-if="step === 'await'" :step="step"/>
+    </template>
+    <template v-else>
+      <accountCenter-header/>
+      <realName-certification/>
+    </template>
   </div>
 </template>
 <script>
   import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
   import RealNameCertification from '~components/certification/RealNameCertification.vue'
+  import {stepOne, stepLast} from '~components/mobile/realNameCertification'
   export default {
-    layout: 'default',
+    layout (content) {
+      return content.store.state.option.isMobile ? 'mobile' : 'default'
+    },
+    transition: {
+      name: 'fade',
+      mode: 'out-in'
+    },
+    data () {
+      return {
+        step: 'first'
+      }
+    },
     components: {
       AccountCenterHeader,
-      RealNameCertification
+      RealNameCertification,
+      stepOne,
+      stepLast
+    },
+    computed: {
+      isMobile () {
+        return this.$store.state.option.isMobile
+      }
+    },
+    methods: {
+      setStep (step) {
+        this.step = step
+      }
     }
   }
 </script>