前端订单接口实现

电玩女神 2021-07-24 15:37 448阅读 0赞

# 一 课程页面 #

## 1 api ##

import request from '~/utils/request'
    export default {
      createOrder(courseId) {
        return request({
          baseURL: 'http://localhost:8170',
          url: `/api/trade/order/auth/save/${courseId}`,
          method: 'post'
        })
      },
    }

## 2 购买按钮 ##

## 3 创建订单脚本 ##

// 下订单
        createOrder() {
          orderApi.createOrder(this.course.id).then(response => {
            // 跳转到订单预览页面
            this.$router.push({ path: '/order/' + response.data.orderId })
          })
        },

# 二 订单页面 #

<template>
      <div class="Page Confirm">
        <div class="Title">
          <h1 class="fl f18">订单确认</h1>
          <div class="clear"/>
        </div>
        <table class="GoodList">
          <tbody>
            <tr>
              <td colspan="3" class="teacher">讲师：{
       { order.teacherName }}</td>
            </tr>
            <tr class="good">
              <td class="name First">
                <a :href="'https://localhost:3000/course/'+order.courseId" target="_blank">
                  <img :src="order.courseCover">
                </a>
                <div class="goodInfo">
                  <a :href="'https://localhost:3000/course/'+ order.courseId" target="_blank">{
       { order.courseTitle }}</a>
                </div>
              </td>
              <td class="red priceNew Last">￥<strong>{
       { order.totalFee/100 }}</strong></td>
            </tr>
          </tbody>
        </table>
        <div class="Finish">
          <div class="check fr">
            <el-checkbox v-model="agree">我已阅读并同意<a href="javascript:" target="_blank">《谷粒学院购买协议》</a></el-checkbox>
          </div>
          <div class="clear"/>
          <div class="Main fl">
            <div class="fl">
              <a :href="'/course/'+order.courseId">返回课程详情页</a>
            </div>
          </div>
          <el-button :disabled="!agree" type="danger">去支付</el-button>
          <div class="clear"/>
        </div>
      </div>
    </template>
    
    <script>
    import orderApi from '~/api/order'
    export default {
      data() {
        return {
          order: {},
          agree: true
        }
      }
    }
    </script>

# 三 测试结果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/a556f186423445db84eff9671df7ef4c.png