Merge branch 'master' of http://192.168.3.207:10080/jianyu/jy-docs

jydocs-pc/src/views/purchase/purchase.vue

@@ -41,7 +41,12 @@
         </div>
         <div class="doc_bindphone">
           <div class="phone_label">手机号码</div>
-          <input type="text" :value="tel" placeholder="请输入您的手机号码"  class="phone_ipt">
+          <el-input v-model="tel" @input="getValue()" placeholder="请输入您的手机号码" class="phone_ipt"></el-input>
+          <!-- <input type="text" :value="tel"   placeholder="请输入您的手机号码"  class="phone_ipt"> -->
+          <p class="phone_tips" v-show="setShow" >
+            <span class="icon_error"></span>
+            <span class="tip_text">手机号格式不正确</span>
+          </p>
         </div>
         <div class="doc_balance">
           <span class="balance_label">剑鱼币余额：</span>
@@ -58,7 +63,7 @@
           <el-checkbox v-model="checked" >我已阅读并同意<a href="/front/staticPage/serviceterms.html" class="agree_link">《剑鱼标讯线上购买与服务条款》</a></el-checkbox>
         </div>
         <div class="doc_surepur">
-          <button class="btnsure" @click="setExhange()" :disabled="!this.checked" id="btnsure">确定兑换</button>
+          <button class="btnsure" @click="setExhange()" :disabled="!this.btnChecked" id="btnsure">确定兑换</button>
         </div>
       </div>
     </div>
@@ -66,19 +71,23 @@
 </template>
 
 <script>
-import { checkbox } from 'element-ui'
+import { checkbox, input } from 'element-ui'
 import { getDocPays, getJYchannel, getDetails } from '../../api/modules/purchase'
 
 export default {
   name: 'purchasePage',
   components: {
-    [checkbox.name]: checkbox
+    [checkbox.name]: checkbox,
+    [input.name]: input
   },
   data () {
     return {
       checked: true,
+      phoneChecked: true,
+      btnChecked: true,
       query: '',
       tel: '',
+      setShow: false,
       response: {
         docName: '',
         price: '',
@@ -129,6 +138,27 @@ export default {
           this.$router.push('/purchasesuccess/' + this.response.price)
         }
       })
+    },
+    // 手机号输入事件
+    getValue () {
+      var regex = /^(0|\+?86|17951)?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/
+      var bool = regex.test(this.tel)
+      if (bool || this.tel === '') {
+        this.setShow = false
+        this.phoneChecked = true
+      } else {
+        this.setShow = true
+        this.phoneChecked = false
+      }
+      this.btnSure()
+    },
+    // 判断按钮是否可以点击
+    btnSure () {
+      if (this.checked === true && this.phoneChecked === true) {
+        this.btnChecked = true
+      } else {
+        this.btnChecked = false
+      }
     }
   }
 }
@@ -275,6 +305,7 @@ export default {
         }
       }
       .doc_bindphone{
+          position: relative;
         display: flex;
         align-items: center;
         margin-top: 21px;
@@ -289,19 +320,40 @@ export default {
           padding: 6px 10px;
           margin-left: 64px;
           width: 570px;
-          height: 36px;
+          // height: 36px;
           border-radius: 4px;
           background: #FFFFFF;
           border: none;
           outline: none;
           box-shadow:none;
-          border: 1px solid #E0E0E0;
+          // border: 1px solid #E0E0E0;
+          .el-input__inner{
+            height: 36px;
+          }
         }
         .phone_ipt::placeholder{
           color: #AAAAAA;
           font-size: 14px;
           line-height: 36px;
         }
+        .phone_tips{
+          display: flex;
+          align-items: center;
+          position: absolute;
+          right: 286px;
+          .icon_error{
+            margin-right: 4px;
+            display: flex;
+            width: 16px;
+            height: 16px;
+            background: url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAwADADASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAACAAFBwEJ/8QALhAAAQMDAQYFBAMBAAAAAAAAAQIDBAUGEQAIEiExYYETIiVRcQdDkbEys/BB/8QAFwEAAwEAAAAAAAAAAAAAAAAABAUHBv/EAC0RAAEBBAcHBQEAAAAAAAAAAAECAAMREgQFBhMxQYEUFSEyUZHBFiJiofCS/9oADAMBAAIRAxEAPwD1T1VXFdNKtKAZlXnNQY/IFw+ZZ9kpHFR6AHUum44lpW/Nq004jxkbxA5qPJKR1JIHfQvu27qt9QrgVMmrcfedXuR4zeVJbBPlbQn8dSeugaTSQ4EBxJbYWfs+uuVqePFSuk4nMnoPJybdKvtU0mM8pFNosqcgHHiPupYB6gAKP5xqUnappUh1KajRJUJB5rYdS9jsQnRzqFNl0mY5EnRnocpv+bL6Chaf+jIPHUp1Nl1eY3EgxnpkpzO4ywgrWrAycAceWlG2v5sdINUfSVS3UZOEOaY98YfTOi3LppV208TaTNbmxzwJRwUk+ykniD0I1a6DVo3dVfp9cCJsJa2Xml7j8ZeUpdSDxQtP56g9dNC1rii3bb8GrwzliU2FhJOSg8lJPUEEH403o1JD8QPAhpdaCz66mWlbtUzpWBzB6Hwc2yPapqzke36JTkqwiVIW8se/hpAH9mjnTahIpFQjTornhSYzqXml4zuqScg4+RpGbVNIck2/RakhJUiJIWyvA5BxIIJ7t476OdNp8irVCNBiN+LKkupZaQDjeUo4Ayep0ops20HSDVGyV1uVEYQ903c46QZAejbRts/apl5wW/gLH7LZPdJPXzT0bZytn7VTvOc38hA/YbB7qI6eWejbOVs/aqd5zm/kIH7DYPdRHTyz0baNtn7VMvOC38BY/ZbJ7pJ6+Yvtew/atlf63dN++V3N+ix/qVQkVeoSZ0pzxZMl1Tzq8Y3lKOScfJ0jNlaruSbfrVNWoqREkIeRk8g4kggd2899HOo09+k1CTBlN+FJjOqZdRkHdWkkEZHUaReytSXI9v1uoqThEqQhlB9/DSSf7NCUKa/GsW1Vrbrcq4Qh7Ze4w0i2u3TbsW7bfnUiYMsSmygqAyUHmlQ6ggHtoXXfaNV+n9wLgzULZeaXvMSUZCXUg8FoP+IPDnpzaqrjtalXdTzCq8JubHPEBfBST7pUOKT1B03pNGD8RHAhpdZ+0C6mWpDxMzpWIzB6jyM2C06oSqpKXJmyXpclf83n3CtavknidSBUZdKlolQpT0OSjO69HcKFpyMHChxGkZVtlalSHVKp1blQkHkh9pL2O4KddpGytSozyV1KtSpyAc+GwylgHoSSo/jSjYqRNhrFqj6tqW65zhyynthD7bCrQtCq3/X0QYLa3nXFbz8heSlpJPFaz/iTy46aNrW5EtG34VJhDEeMjdBPNR5qUepJJ765blrUq0aeIVIgtQmBxIQPMs+6lHio9SdW2m9GowcCJ4ktLrQWgXXKw7diV0nAZk9T4GTf/9k=) no-repeat;
+            background-size: contain;
+          }
+          .tip_text{
+            font-size: 14px;
+            color: #FF3A20;
+          }
+        }
       }
       .doc_balance{
         margin-top: 20px;