205 lines
8.5 KiB
Vue
205 lines
8.5 KiB
Vue
<template>
|
|
<div class="table_page">
|
|
<div style="margin-bottom: 20px">
|
|
<el-input style="width: 250px; height: 30px; margin-right: 10px; font-size: 14px" suffix-icon="Search" placeholder="请输入订单编号"
|
|
v-model="orderNumber"></el-input>
|
|
<el-button class="ml-5" type="primary" @click="load" style="height: 30px;">搜索</el-button>
|
|
<el-button type="warning" @click="reset" style="height:30px">重置</el-button>
|
|
</div>
|
|
<!-- 数据展示层 -->
|
|
<el-table v-loading="loading" :data="tableData" border stripe header-cell-class-name="headerBg"
|
|
:cell-style="{ 'text-align': 'center', 'font-size': '16px' }" @selection-change="handleSelectionChange"
|
|
:header-cell-style="{ 'text-align': 'center' }" :row-style="{ height: '70px' }">
|
|
<el-table-column type="selection" width="55" fixed="left"></el-table-column>
|
|
<el-table-column prop="id" label="订单序号" width="80">
|
|
<template #default="{ $index }">
|
|
{{ $index + 1 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="orderNumber" label="订单编号" width="300"></el-table-column>
|
|
<el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
|
|
<el-table-column prop="userName" label="用户名" width="120"></el-table-column>
|
|
<el-table-column label="所购买的商品" width="150">
|
|
<el-table-column label="展开" type="expand" width="150">
|
|
<template #default="props">
|
|
<el-table :data="props.row.orderItemList" border :cell-style="{ 'text-align': 'center', 'font-size': '14px'}">
|
|
<el-table-column label="商品名称" prop="goodSnapshot.name" width="200"/>
|
|
<el-table-column label="商品图片" prop="goodSnapshot.goodImg" width="200">
|
|
<template #default="scope">
|
|
<div>
|
|
<img :src="downloadUrl + scope.row.goodSnapshot.goodImg.split(';')[0]" alt="" style="height: 50px;">
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="类别" prop="goodSnapshot.type" width="200"/>
|
|
<el-table-column label="商品单价" prop="goodSnapshot.price" width="200" />
|
|
<!-- <el-table-column label="是否是限定商品" prop="goodSnapshot.festivalOrder" width="150"/>-->
|
|
<el-table-column label="数量" prop="quantity" width="200"/>
|
|
<el-table-column label="总价" prop="itemTotalAmount" width="200"/>
|
|
<el-table-column label="预约日期" prop="reservationDate" width="200"></el-table-column>
|
|
<el-table-column label="预约时间段" prop="timeSlot" width="200"></el-table-column>
|
|
</el-table>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table-column>
|
|
<el-table-column label="联系人信息" width="180">
|
|
<el-table-column prop="contactsSnapshot.name" label="姓名" />
|
|
<el-table-column prop="contactsSnapshot.phone" label="手机号" width="180"/>
|
|
</el-table-column>
|
|
<!-- <el-table-column label="优惠券信息" width="50">-->
|
|
<!-- <el-table-column prop="couponSnapshot.name" label="优惠卷名称" />-->
|
|
<el-table-column prop="couponSnapshot.conditionAmount" label="优惠金额" />
|
|
<!-- </el-table-column>-->
|
|
<el-table-column prop="totalAmount" label="订单实付金额"></el-table-column>
|
|
<el-table-column prop="orderStatus" label="订单状态"></el-table-column>
|
|
<el-table-column label="操作" width="160px" fixed="right">
|
|
<template #default="scope">
|
|
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
|
title="是否取消订单？" @confirm="cancelOrder(scope.row)" width=180>
|
|
<template #reference>
|
|
<el-button v-if="['待支付'].includes(scope.row.orderStatus)" size="small" type="primary"
|
|
plain>取消订单</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
<el-popconfirm confirm-button-text='是' cancel-button-text='否' icon="InfoFilled" icon-color="red"
|
|
title="订单已完成？" @confirm="orderTransaction(scope.row.id,'交易完成')" width=180>
|
|
<template #reference>
|
|
<el-button v-if="['待收货'].includes(scope.row.orderStatus)" size="small" type="primary"
|
|
plain>完成订单</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
|
title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
|
|
<template #reference>
|
|
<el-button v-if="['待发货','待收货'].includes(scope.row.orderStatus)" size="small" type="danger"
|
|
plain>退款</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<!-- 分页器 -->
|
|
<div style="padding: 10px 0">
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
:current-page="searchParams.current" :page-size="searchParams.pageSize" :page-sizes="[5, 10, 15, 20]"
|
|
:small="null" :disabled="null" :background="null" layout="total, sizes, prev, pager, next, jumper"
|
|
:total="total" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, ref } from "vue";
|
|
import myAxios from "@/api/myAxios";
|
|
import { ElMessage } from "element-plus";
|
|
import {SuccessInfo, ErrorInfo, WarnInfo} from "@/utils/messageInfo";
|
|
import { downloadUrl } from '@/utils/formatImgUpload'
|
|
|
|
const tableData: any = ref([]); //表单展示数据
|
|
const total = ref(0);
|
|
const orderNumber = ref('')
|
|
const searchParams: any = ref({ //封装分页
|
|
current: 1, //当前页码
|
|
pageSize: 5, //每页显示条数
|
|
sortField: "id", //根据ID分类
|
|
sortOrder: "descend", //降序
|
|
orderType: 'service'
|
|
})
|
|
const loading = ref(false)
|
|
onMounted(() => {
|
|
getOrderList() //页面加载获取订单列表
|
|
})
|
|
const handleSizeChange = (newSize: any) => {
|
|
searchParams.value.pageSize = newSize //新的页面数
|
|
getOrderList()
|
|
}
|
|
const handleCurrentChange = (Current: any) => {
|
|
searchParams.value.current = Current
|
|
getOrderList()
|
|
}
|
|
const handleSelectionChange = (row: any) => {
|
|
// id.value = JSON.parse(JSON.stringify(row));
|
|
}
|
|
//获取订单列表
|
|
const getOrderList = async () => {
|
|
try {
|
|
searchParams.value.orderNumber = orderNumber.value
|
|
const res = await myAxios.post('/order/list/page', { ...searchParams.value });
|
|
// console.log('订单信息--->', res.data.data);
|
|
if (res.data.code === 1) {
|
|
tableData.value = res.data.data.records;
|
|
total.value = parseInt(res.data.data.total)
|
|
console.log('表单信息--->', tableData.value);
|
|
} else {
|
|
ElMessage({
|
|
message: '获取数据失败',
|
|
});
|
|
}
|
|
} catch (error) {
|
|
ElMessage({
|
|
message: '发生错误',
|
|
});
|
|
}
|
|
}
|
|
|
|
const deleteOrder = async (row : any) => { //微信退款
|
|
loading.value = true
|
|
// console.log('row-->',row)
|
|
const res = await myAxios.post('/wechat/refund/create', { id: row.id }) //传入订单号取消订单并退款
|
|
// console.log(res)
|
|
setTimeout(async ()=>{
|
|
if(res.data.code === 1) {
|
|
SuccessInfo('退款成功')
|
|
await orderTransaction(row.id,'已退款')
|
|
await getOrderList()
|
|
loading.value = false
|
|
}
|
|
},3000)
|
|
}
|
|
const reset = () => { //重置搜索框
|
|
orderNumber.value = ''
|
|
};
|
|
const load = () => {
|
|
getOrderList()
|
|
} //搜索的方法
|
|
const cancelOrder = async (row:any)=>{ //取消订单的方法(未支付能取消)
|
|
// console.log('点击的这一行--->',row);
|
|
const res = await myAxios.post('/order/cancel/id',{ id: row.id })
|
|
if(res.data.code === 1) {
|
|
getOrderList()
|
|
SuccessInfo('取消订单成功')
|
|
} else {
|
|
ErrorInfo('请求错误')
|
|
}
|
|
}
|
|
const orderTransaction = async (oid: any, msg: string) => { //订单完成方法
|
|
// console.log('当前订单信息---->',oid)
|
|
// loading.value = true
|
|
const res = await myAxios.post('/order/update/all/orderStatus',{
|
|
id: oid,
|
|
orderStatus: msg
|
|
})
|
|
if (res.data.code === 1) {
|
|
SuccessInfo('订单完成')
|
|
getOrderList()
|
|
loading.value = false
|
|
} else {
|
|
WarnInfo('更新失败')
|
|
loading.value = false
|
|
}
|
|
loading.value = false
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.el-table__header th {
|
|
text-align: center; /* 表头居中 */
|
|
font-size: 14px; /* 设置字体大小 */
|
|
font-weight: bold; /* 设置字体加粗 */
|
|
font-family: 'Arial', sans-serif; /* 设置字体 */
|
|
}
|
|
.table_page {
|
|
min-width: 1000px;
|
|
overflow: auto;
|
|
}
|
|
</style> |