调试接口

jydocs-mobile/src/components/RechargeHave.vue

@@ -47,7 +47,7 @@
             </div>
             <div class="apply_footer">
                 <button class="j-button-cancel btn_active" @click="closePopup()">取消</button>
-                <button class="j-button-sure btn_active" :disabled="!this.checked" @click="exchange()">去充值</button>
+                <button class="j-button-sure btn_active" :disabled="!this.checked" @click="exchange()">剑鱼币购买</button>
             </div>
         </div>
     </van-popup>

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

@@ -3,25 +3,35 @@
     <div class="j-main exchange_main">
       <div class="docs_infor">
         <div class="docs_left">
-          <img src="" class="docs_img" alt="">
+          <img :src="response.previewImgId" class="docs_img" alt="">
+          <span class="icon_word"></span>
         </div>
         <div class="docs_right">
           <div class="docs_title ellipsis-2">
-            优化招投标市场营商环境与国企采购人主体责任、采购与招标优化招投标市场营商环境与国企采购人主体责任、采购与招标
+            {{response.docName}}
           </div>
           <div class="docs_other">
-            <div class="docs_auther">贡献者：张三</div>
+            <!-- <div class="docs_auther">贡献者：张三</div> -->
             <div class="docs_download">
-              <span>2020次下载</span> | 共18页 | 220K
+              <span>{{response.downTimes}}次下载</span> | 共{{response.docPageSize}}页 | {{response.docFileSize}}K
             </div>
-            <div class="docs_money"><span class="docs_num">500</span> 剑鱼币</div>
+            <div class="docs_money"><span class="docs_num">{{response.price}}</span> 剑鱼币</div>
           </div>
         </div>
       </div>
       <div class="docs_phone">
-        <van-cell-group>
+        <!-- <van-cell-group>
           <van-field v-model="tel" type="number" label="手机号码" placeholder="请输入手机号码" />
-        </van-cell-group>
+        </van-cell-group> -->
+        <van-field
+          class="editable"
+          v-model="tel"
+          name="phone"
+          type="tel"
+          label="手机号码"
+          placeholder="请输入手机号码"
+          :rules="phoneRules"
+        />
       </div>
     </div>
     <div class="j-footer exchange_footer">
@@ -30,7 +40,7 @@
           支付积分：
         </div>
         <div class="det_right">
-          <span class="det_money">500</span>
+          <span class="det_money">{{response.price}}</span>
           <span>剑鱼币</span>
         </div>
       </div>
@@ -48,7 +58,8 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { Checkbox, CheckboxGroup, Field, CellGroup } from 'vant'
 import { mapActions } from 'vuex'
-import { getDocPay } from '../../api/main'
+// 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: {
@@ -59,24 +70,68 @@ import { getDocPay } from '../../api/main'
   },
   methods: {
     ...mapActions({
-      getDocPay: 'main/getDocPay'
+      getDocPay: 'main/getDocPay',
+      getDetails: 'main/getDetails'
     })
   }
 })
 export default class extends Vue {
-  // protected getDocPay!: any
+  protected getDocPay!: any
+  protected getDetails!: any
   checked = false
   tel = ''
   $router: any
+  response = {
+    docName: '',
+    price: '',
+    downTimes: '',
+    docFileSize: '',
+    docPageSize: '',
+    previewImgId: ''
+  }
+
+  created () {
+    this.getWordInfor()
+  }
+
+  // 文档信息
+  getWordInfor () {
+    this.getDetails({ docId: '4f6c00ba-8882-11eb-8699-0050568f51e7' }).then((res: any) => {
+      console.log(res)
+      const item = res.data.detail
+      if (res.error_code === 0) {
+        this.response.docName = item.docName
+        this.response.price = item.price
+        this.response.downTimes = item.downTimes
+        this.response.docFileSize = item.docFileSize
+        this.response.docPageSize = item.docPageSize
+        this.response.previewImgId = item.previewImgId
+      }
+    })
+  }
 
   // 确定兑换
   exchange () {
-    getDocPay({ docId: 'RJ82241sM3DyHwrupW7w', phone: '18439509554' }).then((res: any) => {
+    this.getDocPay({ docId: '4f6c00ba-8882-11eb-8699-0050568f51e7', phone: '18439509554' }).then((res: any) => {
       console.log(res)
+      if (res.data === 'success') {
+        this.$router.push('/purchasesuccess')
+      }
     })
-    // this.$router.push('/purchasesuccess')
   }
 
+  phoneRules = [{
+    validator: (val: string) => {
+      const status = regPhoneExg.test(val)
+      if (val === '') {
+        console.log(true)
+        return true
+      }
+      return status
+    },
+    message: '手机号格式错误'
+  }]
+
   // 剑鱼标讯服务条款
   clause () {
     // this.$router.push('/readme')
@@ -95,6 +150,7 @@ export default class extends Vue {
         padding: 20px 16px;
         background: #ffffff;
         .docs_left{
+          position: relative;
           width: 100px;
           height: 124px;
           border-radius: 4px;
@@ -103,6 +159,16 @@ export default class extends Vue {
             width: 100%;
             height: 100%;
           }
+          .icon_word{
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            display: flex;
+            width: 24px;
+            height: 24px;
+            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJASURBVHgB7Zm/TuQwEMY/J5x016B7gC2oqbju2muuuOoKClooqEGiodliGxokqLdYXoACWireACpqin0ARAMCEvONcXaXf+sQjTdI+CclTuKJM+NMnBkbSCQSiTYxdYS+79gFCh7wcInbT8TG4MhabN5um8uwaACv/BlmofhzrizwK2TEHAIYgz1YKm9wmN2hV2S4RkRMhg6LDT5v2b/1P9PkM4Sw+O/KEvuxlXePKzEsHtDzp0sh+bABEw1jRmTjjgq6bW0DPivJgLZJBrRN8D/wHibHZXVsCyygARptJBdqm2RA20QzwAVlOfosd/MS84hE41EoBKPYPotFCdjtN5YF/iECUd6A9LoV5T1yLNcQAXUDqKiL5V9XML6XOmVUDfDKj5Sk9wzY+4OxAOsyrEERtW+AMfxfO6E8FT/h3/UpMcmdO/2WQ34bXZ5fs+4QCqi8ASq+WJpnPj7M77FVnRT3WKdBFyN5oCv3QAEVA9j7fbpLNVQOqeHKZPopGZaxWHd1cK41L/dAAa1voONLp/xb6ae7JnUYGdaBAqofcVnSVabkzlLHbQWKqBnAiage3eQiJOdltqCEjgEG+5x2GdQVdyOQ3KNAcwMqBVjah48r4+6ZaAMNCU4t/tihc6B5xtSUKlu72TZTdUzhdNt8CQOuZBczKXmJn6GuRR0DzmVXzqH7kYab4juqCgqPQ/LBaJRD0Kpb4HiK8Zc5OkSlHLcvCxzB/CH4BmSFRFZKGG0eYTaI4qd1VmcSiUSifR4BOQuhbc3lgT4AAAAASUVORK5CYII=) no-repeat;
+            background-size: contain;
+          }
         }
         .docs_right{
           flex: 1;

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

@@ -10,7 +10,7 @@
           <span class="icon_num"></span>
           <span class="money_num">500</span>
         </div>
-        <p class="success_days">2s后自动跳转到文档页面</p>
+        <p class="success_days">{{count}}s后自动跳转到文档页面</p>
       </div>
       <div class="logout_infor">
         <div class="infor_group">
@@ -42,30 +42,30 @@ import { Component, Vue } from 'vue-property-decorator'
 @Component({
   name: 'test',
   components: {
-  },
-  methods: {
-  },
-  computed: {
-    // ...mapState('logout', {
-    //   logout: function (state: any) {
-    //     return state.logoutdata
-    //   }
-    // })
   }
-//   beforeRouteLeave (to, form, next) {
-//     setTimeout(() => {
-//       history.go(-history.length + 1)
-//     }, 50)
-//     next(false)
-//   }
 })
 export default class extends Vue {
-  protected logout: any
+  count = 3
+  timer: any
+  $router: any
 
-  // 注销完成，返回我的页面
-  // complete () {
-  // history.go(-history.length + 1)
-  // }
+  created () {
+    this.setCountDown()
+  }
+
+  setCountDown () {
+    if (!this.timer) {
+      this.timer = setInterval(() => {
+        if (this.count > 0 && this.count <= 10) {
+          this.count--
+        } else {
+          clearInterval(this.timer)
+          this.timer = null
+          this.$router.push('/home')
+        }
+      }, 1000)
+    }
+  }
 }
 </script>
 <style lang="scss">