訂單詳情前後端實現

一 後端接口

根據訂單id獲取訂單

1 控制器

必須是自己的訂單才能查看

/**
* 功能描述：獲取訂單詳情
*
* @param orderId 訂單Id
* @param request http請求
* @return R 返回給前端的數據
* @author cakin
* @date 2021/1/3
*/
@ApiOperation("獲取訂單")
@GetMapping("auth/get/{orderId}")
public R get(@PathVariable String orderId, HttpServletRequest request) {
    JwtInfo jwtInfo = JwtUtils.getMemberIdByJwtToken(request);
    Order order = orderService.getByOrderId(orderId, jwtInfo.getId());
    return R.ok().data("item", order);
}

2 Service

接口

/**
* 功能描述：獲取訂單詳情
*
* @param orderId 訂單Id
* @param memberId 會員id
* @return Order 訂單詳情
* @author cakin
* @date 2021/1/3
*/
Order getByOrderId(String orderId, String memberId);

實現

/**
* 功能描述：獲取訂單詳情
*
* @param orderId  訂單Id
* @param memberId 會員id
* @return Order 訂單詳情
* @author cakin
* @date 2021/1/3
*/
@Override
public Order getByOrderId(String orderId, String memberId) {
    QueryWrapper<Order> queryWrapper = new QueryWrapper<>();
    queryWrapper.eq("id", orderId).eq("member_id", memberId);
    return baseMapper.selectOne(queryWrapper);
}

二 前端實現

1 api

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

2 訂單頁面

  created() {
    orderApi.getById(this.$route.params.id).then(response => {
      this.order = response.data.item
    })
  }

三 測試