我的订单前后端实现

心已赠人 2021-07-24 21:57 463阅读 0赞

# 一 订单列表接口 #

## 1 web层 ##

/**
    * 功能描述：获取当前用户订单列表
    *
    * @author cakin
    * @date 2021/1/3
    * @param request http请求
    * @return R 返回给前端的数据
    */
    @ApiOperation(value = "获取当前用户订单列表")
    @GetMapping("auth/list")
    public R list(HttpServletRequest request) {
        JwtInfo jwtInfo = JwtUtils.getMemberIdByJwtToken(request);
        List<Order> list = orderService.selectByMemberId(jwtInfo.getId());
        return R.ok().data("items", list);
    }

## 2 service层 ##

接口

/**
         * 功能描述：获取当前用户订单列表
         *
         * @author cakin
         * @date 2021/1/3
         * @param request http请求
         * @return R 返回给前端的数据
         */
        @ApiOperation(value = "获取当前用户订单列表")
        @GetMapping("auth/list")
        public R list(HttpServletRequest request) {
            JwtInfo jwtInfo = JwtUtils.getMemberIdByJwtToken(request);
            List<Order> list = orderService.selectByMemberId(jwtInfo.getId());
            return R.ok().data("items", list);
        }

实现

/**
    * 功能描述：获取当前用户订单列表
    *
    * @param memberId 用户Id
    * @return List<Order> 订单列表
    * @author cakin
    * @date 2021/1/3
    */
    @Override
    public List<Order> selectByMemberId(String memberId) {
        QueryWrapper<Order> queryWrapper = new QueryWrapper<>();
        queryWrapper
                .orderByDesc("gmt_create")
                .eq("member_id", memberId);
        return baseMapper.selectList(queryWrapper);
    }

# 二 删除订单接口 #

## 1 web层 ##

/**
    * 功能描述：删除订单
    *
    * @author cakin
    * @date 2021/1/3
    * @param orderId 订单Id
    * @param request http请求
    * @return R 返回给前端的数据
    */
    @ApiOperation(value = "删除订单")
    @DeleteMapping("auth/remove/{orderId}")
    public R remove(@PathVariable String orderId, HttpServletRequest request) {
        JwtInfo jwtInfo = JwtUtils.getMemberIdByJwtToken(request);
        boolean result = orderService.removeById(orderId, jwtInfo.getId());
        if (result) {
            return R.ok().message("删除成功");
        } else {
            return R.error().message("数据不存在");
        }
    }

## 2 service层 ##

接口

/**
    * 功能描述：removeById
    *
    * @param orderId  订单Id
    * @param memberId 会员Id
    * @return boolean 是否删除成功
    * @author cakin
    * @date 2021/1/3
    */
    boolean removeById(String orderId, String memberId);

实现

/**
    * 功能描述：removeById
    *
    * @param orderId  订单Id
    * @param memberId 会员Id
    * @return boolean 是否删除成功
    * @author cakin
    * @date 2021/1/3
    */
    @Override
    public boolean removeById(String orderId, String memberId) {
        QueryWrapper<Order> queryWrapper = new QueryWrapper<>();
        queryWrapper
                .eq("id", orderId)
                .eq("member_id", memberId);
        return this.remove(queryWrapper);
    }

# 三 前端 #

## 1 api ##

getList() {
        return request({
          baseURL: 'http://localhost:8170',
          url: '/api/trade/order/auth/list',
          method: 'get'
        })
      },
    
      removeById(orderId) {
        return request({
          baseURL: 'http://localhost:8170',
          url: `/api/trade/order/auth/remove/${orderId}`,
          method: 'delete'
        })
      }

## 2 html ##

<template>
      <article class="col-7 fl">
        <div class="u-r-cont">
          <section>
            <div>
              <section class="c-infor-tabTitle c-tab-title">
                <a href="javascript: void(0)" title="我的订单" class="current">
                  订单列表
                </a>
              </section>
            </div>
            <div class="mt40">
              <section v-if="orderList.length === 0" class="no-data-wrap">
                <em class="icon30 no-data-ico"> </em>
                <span class="c-666 fsize14 ml10 vam" >您还没有订单哦！</span>
              </section>
              
              <el-table
                v-if="orderList.length>0"
                :data="orderList"
                border
                fit
                highlight-current-row>
                <el-table-column label="课程信息" align="center" >
                  <template slot-scope="scope">
                    <div class="info" >
                      <div class="pic">
                        <img :src="scope.row.courseCover" alt="scope.row.courseTitle" width="100px">
                      </div>
                      <div class="title">
                        <a :href="'/course/'+scope.row.courseId">{
       { scope.row.courseTitle }}</a>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="讲师名称" width="100" align="center">
                  <template slot-scope="scope">
                    {
       { scope.row.teacherName }}
                  </template>
                </el-table-column>
                <el-table-column label="价格" width="100" align="center" >
                  <template slot-scope="scope">
                    {
       { scope.row.totalFee / 100 }}
                  </template>
                </el-table-column>
                <el-table-column label="创建时间" width="180" align="center">
                  <template slot-scope="scope">
                    {
       { scope.row.gmtCreate }}
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="订单状态" width="100" align="center" >
                  <template slot-scope="scope">
                    <el-tag :type="scope.row.status === 0 ? 'warning' : 'success'">{
       { scope.row.status === 0 ? '未支付' : '已支付' }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                  <template slot-scope="scope" >
                    <router-link v-if="scope.row.status === 0" :to="'/order/'+scope.row.id">
                      <el-button type="text" size="mini" icon="el-icon-edit">去支付</el-button>
                    </router-link>
                    <router-link v-if="scope.row.status === 1" :to="'/course/'+scope.row.courseId">
                      <el-button type="text" size="mini" icon="el-icon-edit">去学习</el-button>
                    </router-link>
                    <i
                      class="el-icon-delete"
                      style="cursor:pointer"
                      title="删除订单"
                      @click="removeById(scope.row.id)"/>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </section>
        </div>
      </article>
    </template>

## 3 脚本 ##

# 四 测试 #

![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/f85170b4e46942009db9c8fb2a9b08ad.png