表单支付

src/action/ArticleAction.js

@@ -11,4 +11,5 @@ export default class ArticleAction {
   register2 (obj) { return articleApi.register2(obj).then(res => res) }
   getUserInfo (obj) { return articleApi.getUserInfo(obj).then(res => res) }
   getFormDetail () { return articleApi.getFormDetail().then(res => res) }
+  getOrder (obj) { return articleApi.getOrder(obj).then(res => res) }
 }

src/api/article_api.js

@@ -21,4 +21,6 @@ export default class ScoreAPI extends BaseAPI {
   getUserInfo = () => this.get('/api/passport/account/get-user-info')
   // 表单回显
   getFormDetail = () => this.get('/api/microservices/api/v3/apply/teacher-form-detail')
+  // 下单
+  getOrder = (obj = {}) => this.post('/api/microservices/api/v3/apply/unified-order', obj)
 }

src/pages/train/components/payPop.vue

@@ -13,7 +13,7 @@
       <div class="tips-top">
         <div class="name">支付方式：</div>
         <div class="pay-method">
-          <div :class="payMethod === 0 ? 'li active' : 'li'" @click="tabPayMethod(0)">
+          <div :class="payMethod === 2 ? 'li active' : 'li'" @click="tabPayMethod(2)">
             <div class="icon"></div>
             <div class="pay-text">支付宝支付</div>
           </div>
@@ -23,30 +23,69 @@
           </div>
         </div>
       </div>
-      <div class="pay-btn" @click="isCodeShow = true">去支付</div>
+      <div class="pay-btn" @click="getOrder">去支付</div>
       <div class="tips-text">注：请核对报名表信息，支付后将不能修改报名信息。</div>
     </div>
     <div class="content-box ewm-code" v-if="isCodeShow">
       <i class="el-icon-close" @click="$emit('closePayPop')"></i>
       <div class="title">{{ payMethod ? '微信支付' : '支付宝支付' }}</div>
       <div class="ewm-box">
-        <div class="block"></div>
+        <div class="block">
+          <qrcode-vue :value="payInfo.url" size="200"></qrcode-vue>
+        </div>
         <div class="text">微信扫一扫支付</div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import action from '@action'
+import QrcodeVue from 'qrcode.vue'
 export default {
+  components: {
+    QrcodeVue
+  },
+  props: {
+    formData: {
+      type: Object
+    }
+  },
   data() {
     return {
-      payMethod: 0,
-      isCodeShow: false
+      payMethod: 2,
+      isCodeShow: false,
+      product_id: '6734697826573352960',
+      payInfo: {}
     }
   },
   methods: {
     tabPayMethod(n) {
       this.payMethod = n
+    },
+    getOrder() {
+      const param = {
+        pay_type: this.payMethod,
+        product_id: this.product_id,
+        form_id: this.formData.id.toString()
+      }
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      console.log(param)
+      action.articleAction.getOrder(param).then(res => {
+        if (res.code === 200) {
+          this.payInfo = res.data
+          this.isCodeShow = true
+          loading.close()
+        } else {
+          this.$message.error(res.msg)
+          loading.close()
+        }
+        // isCodeShow = true
+      })
     }
   }
 }
@@ -68,7 +107,8 @@ export default {
         margin: 43px auto 0;
         text-align: center;
         .block{
-          height: 220px;
+          height: 200px;
+          padding: 10px;
           border: 1px solid #D0D0D0;
         }
         .text{

src/pages/train/form.vue

@@ -113,7 +113,7 @@
         </el-form-item>
       </el-form>
     </div>
-    <pay-pop v-if="isPayPopShow" @closePayPop="closePayPop" class="payPop"/>
+    <pay-pop v-if="isPayPopShow" :formData="form" @closePayPop="closePayPop" class="payPop"/>
   </div>
 </template>
 <script>
@@ -176,6 +176,8 @@ export default {
     action.articleAction.getFormDetail().then(res => {
       if (res.code === 200) {
         this.form = res.data.detail
+        this.form.sex = this.form.sex.toString()
+        this.form.live_status = this.form.live_status.toString()
       }
     })
     // $('#name label').html('姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名')
@@ -221,9 +223,13 @@ export default {
       }
     }, */
     onSubmit() {
+      console.log(this.isLogin, this.form)
       if (this.isLogin) {
         this.form.mobile = '13111111111'
         this.form.checked_code = '1234'
+        if (this.form.order_no === '') {
+          this.form.order_no = '1'
+        }
       }
       let flag = true
       // console.log(this.form)
@@ -530,6 +536,6 @@ export default {
   width: 100%;
   height: 100%;
   background: rgba( #000000, .5);
-  z-index: 9999;
+  z-index: 99;
 }
 </style>