前端订单接口实现

最新推荐文章于 2022-04-21 16:08:53 发布

chengqiuming

最新推荐文章于 2022-04-21 16:08:53 发布

阅读量865

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/chengqiuming/article/details/112131453

版权

Vue 专栏收录该内容

161 篇文章 16 订阅

订阅专栏

一课程页面

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 购买按钮

            <section v-else class="c-attr-mt">
              <a
                href="javascript:void(0)"
                title="立即购买"
                class="comm-btn c-btn-3"
                @click="createOrder()">立即购买</a>
            </section>

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>