生成课程订单前端整合

1、复制样式文件到项目中assets

2、在default.vue 引入css样式

java 复制代码

import '~/assets/css/reset.css'
import '~/assets/css/theme.css'
import '~/assets/css/global.css'
import '~/assets/css/web.css'
import '~/assets/css/base.css'
import '~/assets/css/activity_tab.css'
import '~/assets/css/bottom_rec.css'
import '~/assets/css/nice_select.css'
import '~/assets/css/order.css'
import '~/assets/css/swiper-3.3.1.min.css'
import "~/assets/css/pages-weixinpay.css"

3、创建生成订单过程

（1）在api下创建order.js文件，定义接口。

java 复制代码

import request from '@/utils/request'

export default {
  //生成课程支付订单
  createOrder(courseId) {
    return request({
      url: `/orderservice/order/createOrder/${courseId}`,
      method: 'get'
    })
  },
  //获取订单信息
  getOrderInfo(orderNo) {
    return request({
      url: `/orderservice/order/getOrderInfo/${orderNo}`,
      method: 'get'
    })
  }
}

（2）在课程详情pages/course/_id.vue页面调用接口，生成订单。 1)修改pages/course/_id.vue页面元素，调用方法。

java 复制代码

<a href="#" title="立即购买" class="comm-btn c-btn-3" @click="createOrderInfo()">立即购买</a>

在pages/course/_id.vue定义js方法。

java 复制代码

import order from "@/api/order";

export default {
  //异步请求操作
  //params:this.$route.params
  asyncData({ params, error }) {
    //调用接口
    return course.getCourseInfo(params.id).then(response => {
      //得到返回的两个结果
      return {
        courseInfo: response.data.data.courseWebVo,
        chapterVideoList: response.data.data.chapterVideoList,
        courseId:params.id
      };
    });
  },
  methods: {
    //生成订单
    createOrderInfo(){
      order.createOrder(this.courseId)
      .then(response=>{
        //创建订单成功后，跳转订单确认页面
        //动态路由跳转
        this.$router.push({path:'/order/'+response.data.data.orderNo})
      })
    }
  }

（3）生成订单后，跳转订单确认页面，创建页面。

（4）pages/order/_oid.vue页面元素实现。

java 复制代码

<template>
  <div class="Page Confirm">
    <div class="Title">
      <h1 class="fl f18">订单确认</h1>
      <img src="~/assets/img/cart_setp2.png" class="fr">
      <div class="clear"></div>
    </div>
    <form name="flowForm" id="flowForm" method="post" action="">
      <table class="GoodList">
        <tbody>
        <tr>
          <th class="name">商品</th>
          <th class="price">原价</th>
          <th class="priceNew">价格</th>
        </tr>
        </tbody>
        <tbody>
        <!-- <tr>
          <td colspan="3" class="Title red f18 fb"><p>限时折扣</p></td>
        </tr> -->
        <tr>
          <td colspan="3" class="teacher">讲师：{{order.teacherName}}</td>
        </tr>
        <tr class="good">
          <td class="name First">
            <a target="_blank" :href="'https://localhost:3000/course/'+order.courseId">
              <img :src="order.courseCover"></a>
            <div class="goodInfo">
              <input type="hidden" class="ids ids_14502" value="14502">
              <a target="_blank" :href="'https://localhost:3000/course/'+ order.courseId">{{order.courseTitle}}</a>
            </div>
          </td>
          <td class="price">
            <p>￥<strong>{{order.totalFee}}</strong></p>
            <!-- <span class="discName red">限时8折</span> -->
          </td>
          <td class="red priceNew Last">￥<strong>{{order.totalFee}}</strong></td>
        </tr>
        <tr>
          <td class="Billing tr" colspan="3">
            <div class="tr">
              <p>共 <strong class="red">1</strong> 件商品，合计<span
                class="red f20">￥<strong>{{order.totalFee}}</strong></span></p>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <div class="Finish">
        <div class="fr" id="AgreeDiv">
          
          <label for="Agree"><p class="on"><input type="checkbox" checked="checked">我已阅读并同意<a href="javascript:" target="_blank">《谷粒学院购买协议》</a></p></label>
        </div>
        <div class="clear"></div>
        <div class="Main fl">
          <div class="fl">
            <a :href="'/course/'+order.courseId">返回课程详情页</a>
          </div>
          <div class="fr">
            <p>共 <strong class="red">1</strong> 件商品，合计<span class="red f20">￥<strong
              id="AllPrice">{{order.totalFee}}</strong></span></p>
          </div>
        </div>
        <input name="score" value="0" type="hidden" id="usedScore">
        <button class="fr redb" type="button" id="submitPay" @click="toPay()">去支付</button>
        <div class="clear"></div>
      </div>
    </form>
  </div>
</template>

（5）pages/order/_oid.vue页面js方法实现。

java 复制代码

<script>
import order from "@/api/order";

export default {
    //异步请求操作
  //params:this.$route.params
  asyncData({ params, error }) {
    //调用接口
    return order.getOrderInfo(params.oid).then(response => {
      //得到返回的两个结果
      return {
        order:response.data.data.orderInfo
      };
    });
  }
}
</script>

4、测试