购买带入手机号

jydocs-mobile/src/api/main.ts

@@ -127,3 +127,15 @@ export function getListDetail (data: any) {
     params: data
   })
 }
+
+// 获取绑定的手机号
+
+export function getAccountInfo (data: any) {
+  data = qs.stringify(data)
+  return $request({
+    baseURL: '',
+    url: '/jypay/user/getAccountInfo',
+    method: 'post',
+    params: data
+  })
+}

jydocs-mobile/src/store/modules/main.ts

@@ -14,7 +14,8 @@ import {
   getCoin,
   getShare,
   getDocPay,
-  getIndexTags
+  getIndexTags,
+  getAccountInfo
 } from '@/api/main'
 
 interface InterfaceStore<S> extends StoreOptions<S> {
@@ -226,6 +227,13 @@ const modulesOption: modulesOption = {
         console.log(res)
         return res.data
       } catch (error) {}
+    },
+    // 获取绑定手机号
+    async getAccountInfo (state, data) {
+      try {
+        const res = await getAccountInfo(data)
+        return res.data
+      } catch (error) {}
     }
   },
   getters: {}

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

@@ -34,18 +34,18 @@
         </div>
       </div>
       <div class="docs_phone">
-        <!-- <van-cell-group>
-          <van-field v-model="tel" type="number" label="手机号码" placeholder="请输入手机号码" />
-        </van-cell-group> -->
-        <van-field
-          class="editable"
-          v-model="tel"
-          name="phone"
-          type="tel"
-          label="手机号码"
-          placeholder="请输入手机号码"
-          :rules="phoneRules"
-        />
+        <van-form validate-first>
+          <van-field
+            class="editable"
+            v-model="tel"
+            name="validator"
+            type="tel"
+            label="手机号码"
+            placeholder="请输入手机号码"
+            @input="iptValue()"
+            :rules="[{ validator, message: '手机号格式错误' }]"
+          />
+        </van-form>
       </div>
     </div>
     <div class="j-footer exchange_footer">
@@ -62,7 +62,7 @@
         <van-checkbox v-model="checked" checked-color="#2ABED1" >我已阅读并同意<a href="javascript:;" class="clause" @click="clause()">《剑鱼文库线上购买及服务条款》</a><a href="javascript:;" class="clause" @click="clause2()">《剑鱼标讯产品与服务线上购买服务条款》</a></van-checkbox>
       </div>
       <div class="apply_footer">
-        <button class="apply_button" :disabled="!this.checked" @click="exchange()">确定兑换</button>
+        <button class="apply_button" :disabled="!this.btnChecked" @click="exchange()">确定兑换</button>
       </div>
     </div>
   </div>
@@ -70,23 +70,24 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import { Checkbox, CheckboxGroup, Field, CellGroup } from 'vant'
+import { Checkbox, CheckboxGroup, Field, CellGroup, Form } from 'vant'
 import { mapActions } from 'vuex'
 // import { getDocPay } from '../../api/main'
-const regPhoneExg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[0-9])[0-9]{8}$/
 @Component({
   name: 'purchase-page',
   components: {
     [Checkbox.name]: Checkbox,
     [CheckboxGroup.name]: CheckboxGroup,
     [Field.name]: Field,
+    [Form.name]: Form,
     [CellGroup.name]: CellGroup
   },
   methods: {
     ...mapActions({
       getDocPay: 'main/getDocPay',
       getDetails: 'main/getDetails',
-      getListDetail: 'main/getListDetail'
+      getListDetail: 'main/getListDetail',
+      getAccountInfo: 'main/getAccountInfo'
     })
   }
 })
@@ -94,8 +95,11 @@ export default class extends Vue {
   protected getDocPay!: any
   protected getDetails!: any
   protected getListDetail!: any
+  protected getAccountInfo!: any
   checked = false
+  btnChecked = true
   tel = ''
+  regPhoneExg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[0-9])[0-9]{8}$/
   query: any
   $router: any
   response = {
@@ -111,6 +115,38 @@ export default class extends Vue {
   created () {
     this.query = location.href.split('/')[location.href.split('/').length - 1] // 获取id
     this.getWordInfor()
+    this.getBindPhone()
+  }
+
+  validator (val: any) {
+    console.log(val)
+    if (this.tel === '') {
+      return true
+    }
+    return this.regPhoneExg.test(val)
+  }
+
+  // 判断按钮是否可以点击
+  iptValue () {
+    let bool = this.validator(this.tel)
+    if (this.tel === '') {
+      bool = true
+    } else {
+      bool = false
+    }
+    if (this.checked === true && bool === true) {
+      this.btnChecked = true
+    } else {
+      this.btnChecked = false
+    }
+  }
+
+  // 获取绑定的手机号
+  getBindPhone () {
+    this.getAccountInfo().then((res: any) => {
+      console.log(res)
+      this.tel = res.data.phone
+    })
   }
 
   // 文档信息
@@ -147,18 +183,6 @@ export default class extends Vue {
     })
   }
 
-  phoneRules = [{
-    validator: (val: string) => {
-      const status = regPhoneExg.test(val)
-      if (val === '') {
-        console.log(true)
-        return true
-      }
-      return status
-    },
-    message: '手机号格式错误'
-  }]
-
   // 剑鱼文库线上购买及服务条款
   clause () {
     this.$router.push('/onlineterm')

jydocs-pc/src/api/modules/purchase.js

@@ -37,3 +37,14 @@ export function getDetails (data) {
     data: data
   })
 }
+
+// 获取已绑定的手机号
+export function getBindPhone (data) {
+  data = qs.stringify(data)
+  return request({
+    baseURL: '',
+    url: '/jypay/user/getAccountInfo',
+    method: 'post',
+    data: data
+  })
+}

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

@@ -72,7 +72,7 @@
 
 <script>
 import { checkbox, input } from 'element-ui'
-import { getDocPays, getJYchannel, getDetails } from '../../api/modules/purchase'
+import { getDocPays, getJYchannel, getDetails, getBindPhone } from '../../api/modules/purchase'
 
 export default {
   name: 'purchasePage',
@@ -128,6 +128,10 @@ export default {
           this.response.channel = res.data.data.points.balance
         }
       })
+      getBindPhone().then((res) => {
+        console.log(res)
+        this.tel = res.data.data.phone
+      })
     },
     // 确定兑换
     setExhange () {