|
|
@@ -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;
|
xgwangman
