一 訂單列表接口
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 腳本
<script>
import orderApi from '~/api/order'
export default {
data() {
return {
orderList: []
}
},
created() {
this.fetchOrderList()
},
methods: {
fetchOrderList() {
orderApi.getList().then(response => {
this.orderList = response.data.items
})
},
removeById(id) {
this.$confirm('確認要刪除當前訂單嗎?', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return orderApi.removeById(id)
}).then((response) => {
this.fetchOrderList()
this.$message({
type: 'success',
message: response.message
})
}).catch(error => {
if (error === 'cancel') {
this.$message({
message: '取消刪除'
})
}
})
}
}
}
</script>四 測試
