44.微信支付功能

一、課程支付需求描述

二、數據庫設計

 創建相關表

訂單表t_order

CREATE TABLE `t_order` (
  `id` char(19) NOT NULL DEFAULT '',
  `order_no` varchar(20) NOT NULL DEFAULT '' COMMENT '訂單號',
  `course_id` varchar(19) NOT NULL DEFAULT '' COMMENT '課程id',
  `course_title` varchar(100) DEFAULT NULL COMMENT '課程名稱',
  `course_cover` varchar(255) DEFAULT NULL COMMENT '課程封面',
  `teacher_name` varchar(20) DEFAULT NULL COMMENT '講師名稱',
  `member_id` varchar(19) NOT NULL DEFAULT '' COMMENT '會員id',
  `nickname` varchar(50) DEFAULT NULL COMMENT '會員昵稱',
  `mobile` varchar(11) DEFAULT NULL COMMENT '會員手機',
  `total_fee` decimal(10,2) DEFAULT '0.01' COMMENT '訂單金額（分）',
  `pay_type` tinyint(3) DEFAULT NULL COMMENT '支付類型（1：微信 2：支付寶）',
  `status` tinyint(3) DEFAULT NULL COMMENT '訂單狀態（0：未支付 1：已支付）',
  `is_deleted` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '邏輯刪除 1（true）已刪除， 0（false）未刪除',
  `gmt_create` datetime NOT NULL COMMENT '創建時間',
  `gmt_modified` datetime NOT NULL COMMENT '更新時間',
  PRIMARY KEY (`id`),
  UNIQUE KEY `ux_order_no` (`order_no`),
  KEY `idx_course_id` (`course_id`),
  KEY `idx_member_id` (`member_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='訂單';

訂單支付表t_pay_log

CREATE TABLE `t_pay_log` (
  `id` char(19) NOT NULL DEFAULT '',
  `order_no` varchar(20) NOT NULL DEFAULT '' COMMENT '訂單號',
  `pay_time` datetime DEFAULT NULL COMMENT '支付完成時間',
  `total_fee` decimal(10,2) DEFAULT '0.01' COMMENT '支付金額（分）',
  `transaction_id` varchar(30) DEFAULT NULL COMMENT '交易流水號',
  `trade_state` char(20) DEFAULT NULL COMMENT '交易狀態',
  `pay_type` tinyint(3) NOT NULL DEFAULT '0' COMMENT '支付類型（1：微信 2：支付寶）',
  `attr` text COMMENT '其他屬性',
  `is_deleted` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '邏輯刪除 1（true）已刪除， 0（false）未刪除',
  `gmt_create` datetime NOT NULL COMMENT '創建時間',
  `gmt_modified` datetime NOT NULL COMMENT '更新時間',
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_order_no` (`order_no`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='支付日志表';

 

 

 三、微信支付功能【后端】

1、創建支付模塊和准備

1.1、在service模塊下創建子模塊service_order

1.2、在service_order模塊中引入依賴

<dependencies>
    <dependency>
        <groupId>com.github.wxpay</groupId>
        <artifactId>wxpay-sdk</artifactId>
        <version>0.0.3</version>
    </dependency>

    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
    </dependency>
</dependencies>

1.3、使用代碼生成器生成相關代碼

1.4、編寫application.properties配置文件

# 服務端口
server.port=8007
# 服務名
spring.application.name=service-order

# mysql數據庫連接
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/guli?characterEncoding=UTF-8&serverTimezone=GMT%2B8
spring.datasource.username=root
spring.datasource.password=123

#返回json的全局時間格式
spring.jackson.date-format=yyyy-MM-dd HH:mm:ss
spring.jackson.time-zone=GMT+8

#配置mapper xml文件的路徑
mybatis-plus.mapper-locations=classpath:com/atguigu/eduorder/mapper/xml/*.xml

#mybatis日志
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

# nacos服務地址
spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

#開啟熔斷機制
feign.hystrix.enabled=true
# 設置hystrix超時時間，默認1000ms
hystrix.command.default.execution.isolation.thread.timeoutInMilliseconds=3000

1.5、創建啟動類OrderApplication

@SpringBootApplication
@EnableDiscoveryClient //nacos注冊
@EnableFeignClients
@ComponentScan(basePackages = {"com.atguigu"})
@MapperScan("com.atguigu.eduorder.mapper")
public class OrdersApplication {
    public static void main(String[] args){
        SpringApplication.run(OrdersApplication.class, args);
    }
}

2、后端接口

2.1、在service_edu創建接口getCourseInfoDto

根據課程id查詢課程信息（僅課程信息，用於訂單遠程調用）

    //3 根據課程id查詢課程信息（僅課程信息，用於訂單遠程調用）
    @GetMapping("getCourseInfoDto/{courseId}")
    public CourseWebVoOrder getCourseInfoDto(@PathVariable String courseId) {
        CourseWebVo courseInfoForm = courseService.getBaseCourseInfo(courseId);
        CourseWebVoOrder courseInfo = new CourseWebVoOrder();
        BeanUtils.copyProperties(courseInfoForm,courseInfo);
        return courseInfo;
    }

2.2、在service_ucenter創建接口getInfoById

根據用戶id查詢用戶信息（僅用戶信息，用於訂單遠程調用）

@ApiOperation(value = "根據用戶id獲取用戶信息")
    @GetMapping("getInfoUc/{id}")
    public UcenterMemberOrder getInfoById(@PathVariable String id){
        try {
            UcenterMember ucenterMember = memberService.getById(id);
            UcenterMemberOrder member = new UcenterMemberOrder();
            BeanUtils.copyProperties(ucenterMember,member);
            return member;
        }catch (Exception e){
            e.printStackTrace();
            throw new GuliException(20001,"error");
        }
    }

2.3、在service_order中創建client文件夾

client文件夾下創建EduClient和UcenterClient接口，用於調用2.1和2.2接口

EduClient

@Component
@FeignClient("service-edu")
public interface EduClient {

    //根據課程id查詢課程信息（僅課程信息，用於訂單遠程調用）
    @GetMapping("/eduservice/coursefront/getCourseInfoDto/{courseId}")
    public CourseWebVoOrder getCourseInfoDto(@PathVariable("courseId") String courseId);
}

UcenterClient

@Component
@FeignClient("service-ucenter")
public interface UcenterClient {
    //根據用戶id獲取用戶信息
    @GetMapping("/educenter/member/getInfoUc/{id}")
    public UcenterMemberOrder getInfoById(@PathVariable("id") String id);
}

2.4、編寫service_order模塊中的

controller

需要編寫的接口有：①生成訂單的接口  ②根據訂單id查詢訂單信息  ③生成微信支付的二維碼  ④查詢訂單支付狀態接口

OrderController

@RestController
@RequestMapping("/eduorder/order")
@CrossOrigin
public class OrderController {
    @Autowired
    private OrderService orderService;

    //1 生成訂單的方法
    @PostMapping("createOrder/{courseId}")
    public R saveOrder(@PathVariable String courseId, HttpServletRequest request){

        //創建訂單，返回訂單號
        String orderNo = orderService.createOrders(courseId,JwtUtils.getMemberIdByJwtToken(request));

        return R.ok().data("orderNo",orderNo);
    }

    //2 根據訂單號id查詢訂單信息
    @GetMapping("getOrderInfo/{orderId}")
    public R getOrderInfo(@PathVariable String orderId) {
        QueryWrapper<Order> wrapper = new QueryWrapper<>();
        wrapper.eq("order_no",orderId);
        Order order = orderService.getOne(wrapper);
        return R.ok().data("item",order);
    }

}

PayLogController

@RestController
@RequestMapping("/eduorder/paylog")
@CrossOrigin
public class PayLogController {

    @Autowired
    private PayLogService payLogService;

    //3 生成微信支付二維碼接口
    //參數是訂單號
    @GetMapping("createNative/{orderNo}")
    public R createNative(@PathVariable String orderNo){
        //返回信息，包含二維碼地址，還有其他需要的信息
        Map map = payLogService.createNative(orderNo);
        return R.ok().data(map);
    }

    //4 查詢訂單支付狀態
    //參數：訂單號，根據訂單號查詢 支付狀態
    @GetMapping("/queryPayStatus/{orderNo}")
    public R queryPayStatus(@PathVariable String orderNo) {
        //調用查詢接口
        Map<String, String> map = payLogService.queryPayStatus(orderNo);
        if (map == null) {//出錯
            return R.error().message("支付出錯");
        }
        if (map.get("trade_state").equals("SUCCESS")) {//如果支付成功
            //添加記錄到支付表，更改訂單狀態
            payLogService.updateOrderStatus(map);
            return R.ok().message("支付成功");
        }

        return R.ok().code(25000).message("支付中");
    }
}

ServiceImpl

OrderServiceImpl

@Service
public class OrderServiceImpl extends ServiceImpl<OrderMapper, Order> implements OrderService {

    @Autowired
    private UcenterClient ucenterClient;

    @Autowired
    private EduClient eduClient;
    
    @Override
    public String createOrders(String courseId, String memberId) {
        //通過遠程調用獲取用戶信息
        UcenterMemberOrder ucenterMember = ucenterClient.getInfoById(memberId);

        //通過遠程調用獲取課程信息
        CourseWebVoOrder courseInfoDto = eduClient.getCourseInfoDto(courseId);
        Order order = new Order();
        order.setOrderNo(OrderNoUtil.getOrderNo());//訂單號
        order.setCourseId(courseId);//課程id
        order.setCourseTitle(courseInfoDto.getTitle());
        order.setCourseCover(courseInfoDto.getCover());
        order.setTeacherName(courseInfoDto.getTeacherName());
        order.setTotalFee(courseInfoDto.getPrice());
        order.setMemberId(memberId);
        order.setMobile(ucenterMember.getMobile());
        order.setNickname(ucenterMember.getNickname());

        order.setStatus(0);//支付狀態（0未支付，1支付）
        order.setPayType(1);//支付類型，微信1

        baseMapper.insert(order);
        return order.getOrderNo();
    }
}

PayLogServiceImpl

@Service
public class PayLogServiceImpl extends ServiceImpl<PayLogMapper, PayLog> implements PayLogService {

    @Autowired
    private OrderService orderService;

    //生成微信支付二維碼
    @Override
    public Map createNative(String orderNo) {
        try {
            //根據訂單id獲取訂單信息
            QueryWrapper<Order> wrapper = new QueryWrapper<>();
            wrapper.eq("order_no",orderNo);
            Order order = orderService.getOne(wrapper);

            Map m = new HashMap();
            //1、設置支付參數
            m.put("appid", "wx74862e0dfcf69954");
            m.put("mch_id", "1558950191");
            m.put("nonce_str", WXPayUtil.generateNonceStr());
            m.put("body", order.getCourseTitle());
            m.put("out_trade_no", orderNo);
            m.put("total_fee", order.getTotalFee().multiply(new BigDecimal("100")).longValue()+"");
            m.put("spbill_create_ip", "127.0.0.1");
            m.put("notify_url", "http://guli.shop/api/order/weixinPay/weixinNotify\n");
            m.put("trade_type", "NATIVE");

            //2、HTTPClient來根據URL訪問第三方接口並且傳遞參數
            HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");

            //client設置參數,設置xml格式
            client.setXmlParam(WXPayUtil.generateSignedXml(m, "T6m9iK73b0kn9g5v426MKfHQH7X8rKwb"));
            client.setHttps(true);//支持https訪問
            client.post();//post請求發送

            //3、返回第三方的數據（xml格式--》map集合）
            String xml = client.getContent();
            Map<String, String> resultMap = WXPayUtil.xmlToMap(xml);
            //4、封裝返回結果集

            Map map = new HashMap<>();
            map.put("out_trade_no", orderNo);
            map.put("course_id", order.getCourseId());
            map.put("total_fee", order.getTotalFee());
            map.put("result_code", resultMap.get("result_code"));//返回二維碼操作狀態碼
            map.put("code_url", resultMap.get("code_url"));//二維碼地址

            //微信支付二維碼2小時過期，可采取2小時未支付取消訂單
            //redisTemplate.opsForValue().set(orderNo, map, 120, TimeUnit.MINUTES);
            return map;
        } catch (Exception e) {
            e.printStackTrace();
            return new HashMap<>();
        }
    }

    //查詢訂單支付狀態
    @Override
    public Map<String, String> queryPayStatus(String orderNo) {
        try {
            //1、封裝參數
            Map m = new HashMap<>();
            m.put("appid", "wx74862e0dfcf69954");
            m.put("mch_id", "1558950191");
            m.put("out_trade_no", orderNo);
            m.put("nonce_str", WXPayUtil.generateNonceStr());

            //2、設置httpclient請求
            HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/orderquery");
            client.setXmlParam(WXPayUtil.generateSignedXml(m, "T6m9iK73b0kn9g5v426MKfHQH7X8rKwb"));
            client.setHttps(true);
            client.post();
            //3、返回第三方的數據
            String xml = client.getContent();
            Map<String, String> resultMap = WXPayUtil.xmlToMap(xml);
            //6、轉成Map
            //7、返回
            return resultMap;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    //添加支付記錄和更新訂單狀態
    @Override
    public void updateOrderStatus(Map<String, String> map) {
        //獲取訂單id
        String orderNo = map.get("out_trade_no");
        //根據訂單id查詢訂單信息
        QueryWrapper<Order> wrapper = new QueryWrapper<>();
        wrapper.eq("order_no",orderNo);
        Order order = orderService.getOne(wrapper);

        //更新訂單表訂單狀態
        if(order.getStatus().intValue() == 1) return;
        order.setStatus(1);//1代表已經支付
        orderService.updateById(order);

        //記錄支付日志
        PayLog payLog=new PayLog();
        payLog.setOrderNo(order.getOrderNo());//支付訂單號
        payLog.setPayTime(new Date());
        payLog.setPayType(1);//支付類型 1微信
        payLog.setTotalFee(order.getTotalFee());//總金額(分)
        payLog.setTradeState(map.get("trade_state"));//支付狀態
        payLog.setTransactionId(map.get("transaction_id"));
        payLog.setAttr(JSONObject.toJSONString(map));
        baseMapper.insert(payLog);//插入到支付日志表
    }
}

四、微信支付功能【前端】

1、頁面樣式修改

1.1、下載並復制樣式文件到assets

https://wwr.lanzous.com/i9fiXo7t3le
密碼:26xt

1.2、修改default.vue頁面

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"

2、課程支付前端

2.1、在api文件夾下創建order.js文件

import request from '@/utils/request'

export default {
    
    //1、創建訂單
    createOrder(cid) {
        return request({
            url: '/eduorder/order/createOrder/'+cid,
            method: 'post'
        })
    },
    //2、根據id獲取訂單
    getById(cid) {
        return request({
            url: '/eduorder/order/getOrderInfo/'+cid,
            method: 'get'
        })
    },
    //3、生成微信支付二維碼
    createNative(cid) {
        return request({
            url: '/eduorder/paylog/createNative/'+cid,
            method: 'get'
        })
    },
    //4、根據id獲取訂單支付狀態
    queryPayStatus(cid) {
        return request({
            url: '/eduorder/paylog/queryPayStatus/'+cid,
            method: 'get'
        })
    }
}

2.2、在課程詳情頁面中添加創建訂單方法

在“立即購買”位置添加事件@click="createOrders()"

<a @click="createOrders()" href="#" title="立即購買" class="comm-btn c-btn-3">立即購買</a>

//生成訂單
    createOrders(){
      orderApi.createOrder(this.courseId)
        .then(response=>{
          //獲取訂單號
          //跳轉到訂單顯示頁面
          this.$router.push({path:'/orders/'+response.data.data.orderNo});
        })
    }

2.3、創建訂單頁面，顯示訂單信息

在pages下面創建order文件夾，創建_oid.vue頁面

在_oid.vue頁面調用方法，獲取訂單信息

（1）頁面部分

<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>

（2）調用部分

<script>
import orderApi from '@/api/order'
export default {
  //根據訂單id獲取訂單信息
  asyncData({params, error}) {
      return orderApi.getById(params.oid).then(response => {
        return {
            order: response.data.data.item
            }
      })
  },
  methods: {
    //點擊去支付，跳轉到支付頁面
    toPay() {
      this.$router.push({path: '/pay/' + this.order.orderNo})
    }
  }
}
</script>

2.4、創建支付頁面，生成二維碼完成支付

在pages下面創建pay文件夾，創建_pid.vue頁面

（1）頁面部分

<template>
  <div class="cart py-container">
    <!--主內容-->
    <div class="checkout py-container  pay">
      <div class="checkout-tit">
        <h4 class="fl tit-txt"><span class="success-icon"></span><span class="success-info">訂單提交成功，請您及時付款！訂單號：{{payObj.out_trade_no}}</span>
        </h4>
        <span class="fr"><em class="sui-lead">應付金額：</em><em class="orange money">￥{{payObj.total_fee}}</em></span>
        <div class="clearfix"></div>
      </div>
      <div class="checkout-steps">
        <div class="fl weixin">微信支付</div>
        <div class="fl sao">
          <p class="red">請使用微信掃一掃。</p>
          <div class="fl code">
            <!-- <img id="qrious" src="~/assets/img/erweima.png" alt=""> -->
            <!-- <qriously value="weixin://wxpay/bizpayurl?pr=R7tnDpZ" :size="338"/> -->
            <qriously :value="payObj.code_url" :size="338"/>
            <div class="saosao">
              <p>請使用微信掃一掃</p>
              <p>掃描二維碼支付</p>
            </div>

          </div>

        </div>
        <div class="clearfix"></div>
        <!-- <p><a href="pay.html" target="_blank">> 其他支付方式</a></p> -->
        
      </div>
    </div>
  </div>
</template>

（2）調用部分

<script>
  import orderApi from '@/api/order'

  export default {
    //根據訂單id生成微信支付二維碼
    asyncData({params, error}) {
      return orderApi.createNative(params.pid).then(response => {
        return {
          payObj: response.data.data
        }
      })
    },
    data() {
      return {
        timer: null,  // 定時器名稱
        initQCode: '',
        timer1:''
      }
    },
    mounted() {
      //在頁面渲染之后執行
      //每隔三秒，去查詢一次支付狀態
      this.timer1 = setInterval(() => {
        this.queryPayStatus(this.payObj.out_trade_no)
      }, 3000);
    },
    methods: {
      //查詢支付狀態的方法
      queryPayStatus(out_trade_no) {
        orderApi.queryPayStatus(out_trade_no).then(response => {
          if (response.data.success) {
              //如果支付成功，清除定時器
              clearInterval(this.timer1)
            this.$message({
              type: 'success',
              message: '支付成功!'
            })
            //跳轉到課程詳情頁面觀看視頻
            this.$router.push({path: '/course/' + this.payObj.course_id})
          }
        })
      }
    }
  }
</script>

五、課程詳情頁面功能完善

1、修改課程詳情接口

1.1、在service_order模塊添加接口

根據用戶id和課程id查詢訂單信息

//根據課程id和用戶id查詢訂單表中訂單狀態
    @GetMapping("isBuyCourse/{memberId}/{courseId}")
    public boolean isBuyCourse(@PathVariable String memberId,
                               @PathVariable String courseId) {
        //訂單狀態是1表示支付成功
        int count = orderService.count(new QueryWrapper<Order>().eq("member_id", memberId).eq("course_id", courseId).eq("status", 1));
        if(count>0) {
            return true;
        } else {
            return false;
        }
    }

1.2、在service_edu模塊課程詳情接口遠程調用

（1）創建OrderClient接口

@FeignClient(name = "service-order",fallback = OrderClientImpl.class)//調用的服務器名稱
@Component
public interface OrderClient {

    //根據課程id和用戶id查詢訂單表中訂單狀態
    @GetMapping("/eduorder/order/isBuyCourse/{memberId}/{courseId}")
    public boolean isBuyCourse(@PathVariable("memberId") String memberId, @PathVariable("courseId") String courseId);
}

（2）在課程詳情接口調用【修改】

    //2 課程詳情的方法(包含課程和章節信息)
    @GetMapping("getCourseFrontInfo/{courseId}")
    public R getCourseFrontInfo(@PathVariable String courseId, HttpServletRequest request){
        //根據課程id，編寫sql語句查詢課程信息
        CourseWebVo courseWebVo = courseService.getBaseCourseInfo(courseId);

        //根據課程id查詢章節和小節
        List<ChapterVo> chapterVoList = chapterService.getChapterVideoByCourseId(courseId);

        //遠程調用，判斷課程是否被購買
        boolean buyCourse = orderClient.isBuyCourse(JwtUtils.getMemberIdByJwtToken(request), courseId);

        return R.ok().data("courseWebVo",courseWebVo).data("chapterVoList",chapterVoList).data("isbuyCourse",buyCourse);
    }

2、修改課程詳情頁面

2.1、頁面內容修改

<section v-if="isbuyCourse|| Number(courseInfo.price)===0" class="c-attr-mt">
              <a href="#" title="立即觀看" class="comm-btn c-btn-3" >立即觀看</a>
</section>
<section v-else class="c-attr-mt">
    <a href="#" title="立即購買" class="comm-btn c-btn-3" @click="createOrder()">立即購買</a>
</section>

2.2、調用方法修改

<script>
import course from '@/api/course'
export default {
  // asyncData({ params, error }) {
  //   return course.getCourseInfo(params.id)
  //     .then(response => {
  //       return {
  //         courseInfo: response.data.data.courseFrontInfo,
  //         chapterVideoList: response.data.data.chapterVideoList,
  //         isbuy: response.data.data.isbuy,
  //         courseId:params.id
  //       }
  //     })
  // },
   //和頁面異步開始的
  asyncData({ params, error }) {
    return {courseId: params.id}
    
  },
  data() {
    return {
      course:{},
      chapterVoList:[],
      isbuyCourse:false
    }
  },
  created() {
    this.initCourseInfo()
  },
  methods:{
    initCourseInfo() {
      course.getCourseInfo(this.courseId)
        .then(response => {
          this.course=response.data.data.course,
          this.chapterVoList=response.data.data.chapterVoList,
          this.isbuyCourse=response.data.data.isbuyCourse
        })
    },
    createOrder(){
      course.createOrder(this.courseId).then(response => {
        if(response.data.success){
            this.$router.push({ path: '/order/'+ response.data.data.orderNo})
        }
      })
    }
  }
};
</script>