SEEC-Portal-Front/pages/pay.vue

<template>
  <div class="pay-card" v-loading="pageLoading">
    <h1 class="pay-card__title">
      课程购买
    </h1>
    <el-table
      :data="courses"
      stripe
      class="pay-card__table"
    >
      <el-table-column
        label="课程"
        width="200">
        <template slot-scope="scope">
          <img :src="scope.row.picture" class="pay-card__picture"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="course"
      >
      </el-table-column>
      <el-table-column
        prop="total"
        label="原价"
        width="100">
      </el-table-column>
      <el-table-column
        prop="num"
        label="数量"
        width="100">
      </el-table-column>
      <el-table-column
        prop="discount"
        label="折扣"
        width="100">
      </el-table-column>
    </el-table>
    <div class="pay-card__foot">
      <div class="pay-card__final">
        合计：16.00元
      </div>
      <el-button type="primary" plain @click="pay">确认支付</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "pay",
    data(){
      return{
        pageLoading: true,
        courses: [
          {course: 'JVM简要入门', total: '20.00', discount: '4.00', num: 1, picture: '/image/JVM.jpg',},
        ]
      }
    },
    mounted(){
      this.pageLoading = false;
    },
    methods:{
      pay(){
        this.$api.post('http://pay.seec.seecoder.cn/api/alipay/pay', {
          userId: 794,
          productId: 1,
          subject: '测试支付',
          platformType: 'SEEC_I',
          price: 16,
          returnUrl: window.location.protocol+"//"+window.location.host+'/return'
        }).then(resp => {
          const divForm = document.getElementsByTagName('div')
          if (divForm.length) {
            document.body.removeChild(divForm[0])
          }
          const div = document.createElement('div')
          div.innerHTML = resp.data.res // data就是接口返回的form 表单字符串
          document.body.appendChild(div)
          document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
          document.forms[0].submit()
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '~/assets/css/pay.scss';
</style>