在线教育项目-day15【课程详情页面功能完善】

一、修改课程详情接口

1、在service_order模块添加接口

根据用户id和课程id查询订单信息

@GetMapping("isBuyCourse/{memberid}/{id}") public boolean isBuyCourse(@PathVariable String memberid, @PathVariable String id) { //订单状态是1表示支付成功 int count = orderService.count(new QueryWrapper<TOrder>().eq("member_id", memberid).eq("course_id", id).eq("status", 1)); if(count>0) { return true; } else { return false; } }

 

 

 

 

 

 

 

 

 

 

 

1

@GetMapping("isBuyCourse/{memberid}/{id}")

2

public boolean isBuyCourse(@PathVariable String memberid,

3

                           @PathVariable String id) {

4

    //订单状态是1表示支付成功

5

    int count = orderService.count(new QueryWrapper<TOrder>().eq("member_id", memberid).eq("course_id", id).eq("status", 1));

6

    if(count>0) {

7

        return true;

8

    } else {

9

        return false;

10

    }

11

}

 

 

2、在service_edu模块课程详情接口远程调用

（1）创建OrderClient接口

@Component @FeignClient(value = "service-order", fallback = OrderFile.class) public interface OrderClient { //查询订单信息 @GetMapping("/orderservice/order/isBuyCourse/{memberid}/{id}") public boolean isBuyCourse(@PathVariable("memberid") String memberid, @PathVariable("id") String id); }

 

 

 

 

 

x

 

 

 

 

 

1

@Component

2

@FeignClient(value = "service-order", fallback = OrderFile.class)

3

public interface OrderClient {

4

    //查询订单信息

5

    @GetMapping("/orderservice/order/isBuyCourse/{memberid}/{id}")

6

    public boolean isBuyCourse(@PathVariable("memberid") String memberid, @PathVariable("id") String id);

7

}

 

 

（2）在课程详情接口调用

 

 

 

 

 

x

 

 

 

 

 

1

//根据id查询课程详情信息

2

@GetMapping("getCourseInfo/{id}")

3

public R getCourseInfo(@PathVariable String id, HttpServletRequest request) {

4

    //课程查询课程基本信息

5

    CourseFrontInfo courseFrontInfo = courseService.getFrontCourseInfo(id);

6

    //查询课程里面大纲数据

7

    List<ChapterVo> chapterVideoList = chapterService.getChapterVideoById(id);

8

9

    //远程调用，判断课程是否被购买

10

    boolean buyCourse = orderClient.isBuyCourse(JwtUtils.getMemberIdByJwtToken(request), id);

11

12

    return R.ok().data("courseFrontInfo",courseFrontInfo).data("chapterVideoList",chapterVideoList).data("isbuy",buyCourse);

13

}

 

 

二、修改课程详情页面

1、页面内容修改

<section v-if="isbuy || 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>

 

 

 

 

 

 

 

 

 

 

 

1

<section v-if="isbuy || Number(courseInfo.price)===0" class="c-attr-mt">

2

              <a href="#" title="立即观看" class="comm-btn c-btn-3" >立即观看</a>

3

</section>

4

<section v-else class="c-attr-mt">

5

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

6

</section>

 

 

2、调用方法修改

 

 

 

 

 

 

 

 

 

1

<script>

2

import course from '@/api/course'

3

export default {

4

  // asyncData({ params, error }) {

5

  //   return course.getCourseInfo(params.id)

6

  //     .then(response => {

7

  //       return {

8

  //         courseInfo: response.data.data.courseFrontInfo,

9

  //         chapterVideoList: response.data.data.chapterVideoList,

10

  //         isbuy: response.data.data.isbuy,

11

  //         courseId:params.id

12

  //       }

13

  //     })

14

  // },

15

   //和页面异步开始的

16

  asyncData({ params, error }) {

 

 

17

    return {courseId: params.id}

18

19

  },

20

  data() {

21

    return {

22

      courseInfo: {},

23

          chapterVideoList: [],

24

          isbuy: false,

25

    }

26

  },

27

  created() {

28

    this.initCourseInfo()

29

  },

30

  methods:{

31

    initCourseInfo() {

32

      course.getCourseInfo(this.courseId)

33

        .then(response => {

34

          this.courseInfo=response.data.data.courseFrontInfo,

35

          this.chapterVideoList=response.data.data.chapterVideoList,

36

          this.isbuy=response.data.data.isbuy

37

        })

38

    },

39

    createOrder(){

40

      course.createOrder(this.courseId).then(response => {

41

        if(response.data.success){

42

            this.$router.push({ path: '/order/'+ response.data.data.orderId })

43

        }

44

      })

45

    }

46

  }

47

};

48

</script>