bind style

@@ -29,7 +29,7 @@ export default {
 
 
     // queryString中携带bind_code，则弹出绑定弹框
     // queryString中携带bind_code，则弹出绑定弹框
     if (this.$route.query.bind_code) {
     if (this.$route.query.bind_code) {
-      this.$createThirdBind().show();
+      this.$root.$createThirdBind().open();
     }
     }
   },
   },
   watch: {
   watch: {
@@ -47,7 +47,7 @@ export default {
 .route-view-forword-leave-active,
 .route-view-forword-leave-active,
 .route-view-back-enter-active,
 .route-view-back-enter-active,
 .route-view-back-leave-active {
 .route-view-back-leave-active {
-  will-change: true;
+  will-change: transform;
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
   position: absolute;
   position: absolute;
@@ -57,12 +57,12 @@ export default {
 
 
 .route-view-forword-leave-active,
 .route-view-forword-leave-active,
 .route-view-back-leave-active {
 .route-view-back-leave-active {
-  transition: all 200ms;
+  transition: all 300ms ease;
 }
 }
 
 
 .route-view-forword-enter-active,
 .route-view-forword-enter-active,
 .route-view-back-enter-active {
 .route-view-back-enter-active {
-  transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 }
 
 
 .route-view-forword-enter {
 .route-view-forword-enter {
@@ -79,12 +79,16 @@ export default {
 }
 }
 
 
 .route-view-back-enter {
 .route-view-back-enter {
-  z-index: -1;
   transform: translate3d(-30%, 0, 0);
   transform: translate3d(-30%, 0, 0);
 }
 }
 
 
+.route-view-back-enter-active {
+  z-index: -1;
+}
+
 .route-view-back-leave-active {
 .route-view-back-leave-active {
   transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
   z-index: 2;
   z-index: 2;
 }
 }
+
 </style>
 </style>

 <template>
 <template>
-  <div v-if="showBind" class="third-bind-wrapper">
+  <div v-if="dialogEnable" class="third-bind-wrapper">
     <div class="bind-dialog">
     <div class="bind-dialog">
       <p class="bind-title">关联有货UFO账户</p>
       <p class="bind-title">关联有货UFO账户</p>
       <div class="under-row">
       <div class="under-row">
         <div class="left-row-title">
         <div class="left-row-title">
-          <CubeSelect class="area-code-select" v-model="code" :options="options" :title="selectTitle"></CubeSelect>
+          <span @click="chooseArea">{{code}}</span>
+          <span class="iconfont icondownn"></span>
         </div>
         </div>
         <CubeInput class="bind-input" :class="phone ? '' : 'bind-input-phone'" v-model="phone"></CubeInput>
         <CubeInput class="bind-input" :class="phone ? '' : 'bind-input-phone'" v-model="phone"></CubeInput>
       </div>
       </div>
@@ -24,74 +25,44 @@
 
 
 <script>
 <script>
 
 
-import { Button, Input, Select } from 'cube-ui';
+import { Button, Input } from 'cube-ui';
 import { mapActions, mapState } from 'vuex';
 import { mapActions, mapState } from 'vuex';
 
 
-const areaList = [{
-      value: '+61',
-      name: '澳大利亚'
-  }, {
-      value: '+82',
-      text: '韩国'
-  }, {
-      value: '+1',
-      text: '加拿大'
-  }, {
-      value: '+60',
-      text: '马来西亚'
-  }, {
-      value: '+1',
-      text: '美国'
-  }, {
-      value: '+81',
-      text: '日本'
-  }, {
-      value: '+65',
-      text: '新加坡'
-  }, {
-      value: '+44',
-      text: '英国'
-  }, {
-      value: '+86',
-      text: '中国'
-  }, {
-      value: '+853',
-      text: '中国澳门'
-  }, {
-      value: '+886',
-      text: '中国台湾'
-  }, {
-      value: '+852',
-      text: '中国香港'
-  }];
-
 export default {
 export default {
   name: 'ThirdBind',
   name: 'ThirdBind',
   data() {
   data() {
     return {
     return {
       showBind: false,
       showBind: false,
       code: '+86',
       code: '+86',
-      options: areaList,
-      selectTitle: '选择国家和地区',
       phone: '',
       phone: '',
       smsCode: '',
       smsCode: '',
-      sendBtnText: ''
+      sendBtnText: '',
+      binded: false
     }
     }
   },
   },
   computed: {
   computed: {
+    dialogEnable() {
+      return this.showBind && !this.binded;
+    },
     submitDisable() {
     submitDisable() {
       return !(this.phone && this.smsCode);
       return !(this.phone && this.smsCode);
     }
     }
   },
   },
   methods: {
   methods: {
     ...mapActions(['sendBindSms', 'submitThirdBind']),
     ...mapActions(['sendBindSms', 'submitThirdBind']),
-    show() {
+    open() {
       this.bindCode = this.$route.query.bind_code;
       this.bindCode = this.$route.query.bind_code;
-      this.showBind = true;
+      this.phone = '';
+      this.smsCode = '';
+      this.clearSendTimer();
+      this.show();
     },
     },
     close() {
     close() {
       this.showBind = false;
       this.showBind = false;
     },
     },
+    show() {
+      this.showBind = true;
+    },
     toast(msg, time = 2000) {
     toast(msg, time = 2000) {
       this.$createToast && this.$createToast({
       this.$createToast && this.$createToast({
         txt: msg,
         txt: msg,
@@ -99,14 +70,22 @@ export default {
         time
         time
       }).show();
       }).show();
     },
     },
+    chooseArea() {
+      this.$router.push({
+        name: 'passport.area'
+      });
+    },
+    changeArea(code) {
+      code && (this.code = code);
+    },
     sendSMS() {
     sendSMS() {
       let total = 60;
       let total = 60;
-      let timer = setInterval(() => {
+
+      this.timer = setInterval(() => {
         if (--total) {
         if (--total) {
           this.sendBtnText = '重发' + total;
           this.sendBtnText = '重发' + total;
         } else {
         } else {
-          this.sendBtnText = '';
-          clearInterval(timer);
+          this.clearSendTimer();
         }
         }
       }, 1000);
       }, 1000);
       this.sendBtnText = '重发' + total;
       this.sendBtnText = '重发' + total;
@@ -116,6 +95,10 @@ export default {
         bindCode: this.bindCode
         bindCode: this.bindCode
       });
       });
     },
     },
+    clearSendTimer() {
+      this.sendBtnText = '';
+      clearInterval(this.timer);
+    },
     bindSubmit() {
     bindSubmit() {
       if (this.phone && this.smsCode) {
       if (this.phone && this.smsCode) {
         this.submitThirdBind({
         this.submitThirdBind({
@@ -124,6 +107,7 @@ export default {
           bindCode: this.bindCode
           bindCode: this.bindCode
         }).then(res => {
         }).then(res => {
           if (res.code === 200) {
           if (res.code === 200) {
+            this.binded = true;
             this.close();
             this.close();
           } else {
           } else {
             this.toast(res.message);
             this.toast(res.message);
@@ -136,7 +120,6 @@ export default {
   },
   },
   components: {
   components: {
     CubeInput: Input,
     CubeInput: Input,
-    CubeSelect: Select,
     CubeButton: Button
     CubeButton: Button
   }
   }
 };
 };
@@ -183,17 +166,9 @@ export default {
     flex-shrink: 0;
     flex-shrink: 0;
     color: #999;
     color: #999;
   }
   }
-}
-
-.area-code-select {
-  display: inline-block;
-
-  &:after {
-    border: 0;
-  }
 
 
-  /deep/ .cube-select-text {
-    font-size: 14px;
+  .iconfont {
+    font-size: 28px;
   }
   }
 }
 }
 
 

@@ -47,6 +47,7 @@ export default {
   font-size: 24px;
   font-size: 24px;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
+  background-color: #fff;
 
 
   .layout-context {
   .layout-context {
     flex: 1;
     flex: 1;

@@ -121,6 +121,13 @@ router.onReady(() => {
   }
   }
 
 
   router.beforeResolve((to, from, next) => {
   router.beforeResolve((to, from, next) => {
+
+    if (from.query.bind_code) {
+      app.$createThirdBind().close();
+    } else if (to.query.bind_code) {
+      app.$createThirdBind().show();
+    }
+
     try {
     try {
       trackPage(to.fullPath);
       trackPage(to.fullPath);
       const matched = router.getMatchedComponents(to);
       const matched = router.getMatchedComponents(to);

+<template>
+    <LayoutApp class="yohoufo-area-choose-page" title="选择国家或地区">
+      <div class="area-list">
+        <div class="area-item" v-for="(item, index) in list" :key="index" @click="chooseArea(item.value)">
+          <span class="code">{{item.value}}</span>
+          {{item.name}}
+        </div>
+      </div>
+    </LayoutApp>
+</template>
+
+<script>
+const areaList = [{
+    value: '+61',
+    name: '澳大利亚'
+}, {
+    value: '+82',
+    name: '韩国'
+}, {
+    value: '+1',
+    name: '加拿大'
+}, {
+    value: '+60',
+    name: '马来西亚'
+}, {
+    value: '+1',
+    name: '美国'
+}, {
+    value: '+81',
+    name: '日本'
+}, {
+    value: '+65',
+    name: '新加坡'
+}, {
+    value: '+44',
+    name: '英国'
+}, {
+    value: '+86',
+    name: '中国'
+}, {
+    value: '+853',
+    name: '中国澳门'
+}, {
+    value: '+886',
+    name: '中国台湾'
+}, {
+    value: '+852',
+    name: '中国香港'
+}];
+
+export default {
+  name: 'areaChoose',
+  data() {
+    return {
+      list: areaList
+    };
+  },
+  mounted() {
+    // this.$yoho.authRealName();
+  },
+  methods: {
+    chooseArea(code) {
+      this.$root.$createThirdBind().changeArea(code);
+      this.$router.go(-1);
+    }
+  }
+};
+</script>
+
+
+<style lang="scss" scoped>
+.area-list {
+  padding: 0 40px;
+  max-height: 100%;
+  overflow-y: scroll;
+}
+
+.area-item {
+  height: 100px;
+  line-height: 100px;
+  font-size: 32px;
+  color: #222;
+  border-bottom: 1px solid #e8e8e8;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  .code {
+    float: right;
+  }
+}
+
+</style>

 <template>
 <template>
-    <LayoutApp class="
-
-
-">
+    <LayoutApp class="yohoufo-real-auth-page" title="实名认证">
       <div class="auth-content">
       <div class="auth-content">
-        <div class="auth-title">实名认证</div>
-        <p class="auth-sub-title">信息仅用于身份验证，不对外展示，有货UFO平台将严保您的信息安全，请认证填写如下信息，确保上传的图片文字清晰可见。</p>
+        <p class="auth-sub-title">UFO平台将严格保密您的认证信息，请按照种类分别填写以下信息，保证上传的图片文字清晰可见。</p>
         <div class="auth-form">
         <div class="auth-form">
           <p class="form-title">姓名</p>
           <p class="form-title">姓名</p>
           <div class="form-input-block">
           <div class="form-input-block">
-            <CubeInput class="auth-input" v-model="name" :disabled="!!certName" placeholder="请输入真实姓名"></CubeInput>
+            <CubeInput class="auth-input" v-model="name" :disabled="!!certName" placeholder="请填写姓名"></CubeInput>
           </div>
           </div>
           <p class="form-title">身份证号</p>
           <p class="form-title">身份证号</p>
           <div class="form-input-block">
           <div class="form-input-block">
-            <CubeInput class="auth-input" v-model="idCode" :disabled="!!certIdCode" placeholder="请输入身份证号"></CubeInput>
+            <CubeInput class="auth-input" v-model="idCode" :disabled="!!certIdCode" placeholder="请填写身份证号"></CubeInput>
           </div>
           </div>
-          <p class="form-title">上传身份证正面照片 <a :href="exampleLink" class="upload-intro">示例照片</a></p>
+          <p class="form-title">上传身份证正面照片 <a :href="exampleLink" class="upload-intro"><span class="iconfont iconquestion"></span>示例照片</a></p>
           <div class="form-input-block">
           <div class="form-input-block">
             <div class="upload-btn" @click="uploadFrontCard">
             <div class="upload-btn" @click="uploadFrontCard">
               <div v-if="idCardFrontUrl" class="delete-img" @click.stop="clearInfo(['idCardFront', 'idCardFrontUrl'])">ㄨ</div>
               <div v-if="idCardFrontUrl" class="delete-img" @click.stop="clearInfo(['idCardFront', 'idCardFrontUrl'])">ㄨ</div>
@@ -173,24 +169,18 @@ export default {
 };
 };
 </script>
 </script>
 
 
-
 <style lang="scss" scoped>
 <style lang="scss" scoped>
   .auth-content {
   .auth-content {
-    height: calc(100% - 200px);
+    height: calc(100% - 144px);
     padding: 0 40px;
     padding: 0 40px;
     overflow-y: scroll;
     overflow-y: scroll;
 
 
-    .auth-title {
-      font-size: 68px;
-      line-height: 96px;
-      font-weight: 900;
-    }
-
     .auth-sub-title {
     .auth-sub-title {
       font-size: 24px;
       font-size: 24px;
       color: #999;
       color: #999;
       line-height: 1.5;
       line-height: 1.5;
-      margin-top: 20px;
+      margin: 40px 0 10px;
+      text-align: center;
     }
     }
 
 
     .auth-form {
     .auth-form {
@@ -201,11 +191,12 @@ export default {
       font-size: 36px;
       font-size: 36px;
       padding-top: 40px;
       padding-top: 40px;
       line-height: 1.6;
       line-height: 1.6;
+      font-weight: 500;
     }
     }
 
 
     .form-input-block {
     .form-input-block {
       padding-bottom: 16px;
       padding-bottom: 16px;
-      border-bottom: 1px solid #f6f6f6;
+      border-bottom: 1px solid #eee;
       position: relative;
       position: relative;
     }
     }
 
 
@@ -223,10 +214,19 @@ export default {
     }
     }
 
 
     .upload-intro {
     .upload-intro {
-      font-size: 28px;
+      font-size: 24px;
       line-height: 58px;
       line-height: 58px;
       color: #999;
       color: #999;
       float: right;
       float: right;
+      display: flex;
+      align-items: center;
+      font-weight: 300;
+
+      .iconfont {
+        font-size: 30px;
+        color: #d8d8d8;
+        margin-right: 10px;
+      }
     }
     }
 
 
     .upload-btn {
     .upload-btn {
@@ -319,11 +319,18 @@ export default {
   }
   }
 
 
   .auth-footer {
   .auth-footer {
-    padding: 40px;
+    padding: 28px 40px;
 
 
     .submit-btn {
     .submit-btn {
-      height: 120px;
+      height: 88px;
+      line-height: 88px;
+      padding: 0;
       background: #022c46;
       background: #022c46;
+      border-radius: 44px;
+
+      &:after {
+        border: 0;
+      }
 
 
       &.cube-btn_disabled {
       &.cube-btn_disabled {
         background: #ccc;
         background: #ccc;

-<template>
-    <div class="yohoufo-bind-page">
-      <div class="ufo-logo">UFO飞碟好物</div>
-
-
-    </div>
-</template>
-
-<script>
-export default {
-  name: 'bind',
-  activated() {
-  },
-  beforeRouteUpdate(to, from, next) {
-  },
-  mounted() {
-    // this.$yoho.authRealName();
-  },
-  methods: {
-  }
-};
-</script>

 export default [{
 export default [{
-    name: 'passport.bind',
-    path: '/xianyu/passport/bind',
-    component: () => import(/* webpackChunkName: "passport.bind" */ './bind')
+    name: 'passport.area',
+    path: '/xianyu/passport/area/choose',
+    component: () => import(/* webpackChunkName: "passport.area" */ './area')
 }, {
 }, {
     name: 'passport.auth',
     name: 'passport.auth',
     path: '/xianyu/passport/real/auth',
     path: '/xianyu/passport/real/auth',