路由配置
This commit is contained in:
parent
6b56f8241d
commit
536c0ff19f
|
|
@ -4,8 +4,8 @@ import router from '../router'
|
|||
|
||||
const myAxios = axios.create({
|
||||
withCredentials:true,
|
||||
// baseURL: 'http://localhost:9092/api'
|
||||
baseURL: 'http://123.249.108.160:8888/api' //测试服务器
|
||||
baseURL: 'http://localhost:9092/api'
|
||||
// baseURL: 'http://123.249.108.160:8888/api' //测试服务器
|
||||
});
|
||||
// 添加请求拦截器
|
||||
axios.interceptors.request.use(function (config) {
|
||||
|
|
|
|||
|
|
@ -237,10 +237,10 @@ export const constantRoute = [
|
|||
},
|
||||
{
|
||||
path: '/ManagementCenter',
|
||||
name: '写真产品详情',
|
||||
name: '写真产品中心',
|
||||
component: ()=> import("@/views/CostumeAppointments/ManagementCenter.vue"),
|
||||
meta: {
|
||||
title: '写真产品详情' ,
|
||||
title: '写真产品中心' ,
|
||||
icon: 'Tickets',
|
||||
hidden: false
|
||||
}
|
||||
|
|
@ -256,7 +256,7 @@ export const constantRoute = [
|
|||
}
|
||||
},
|
||||
{
|
||||
path: '/OutfitOrderDetail',
|
||||
path: '/OutfitOrderDetail/:id',
|
||||
name: '写真预约订单详情',
|
||||
component: ()=> import("@/views/CostumeAppointments/OutfitOrderDetail.vue"),
|
||||
meta: {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<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-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' }">
|
||||
: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 }">
|
||||
|
|
@ -24,18 +24,21 @@
|
|||
<el-button size="small" @click="showDetail(scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="deleteOrder(scope.row)" type="danger" plain>
|
||||
退款
|
||||
</el-button>
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
|
||||
<template #reference>
|
||||
<el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" type="danger" plain>退款</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页器 -->
|
||||
<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" />
|
||||
: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>
|
||||
|
||||
|
|
@ -43,8 +46,8 @@
|
|||
import { onMounted, ref } from "vue";
|
||||
import myAxios from "@/api/myAxios";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { SuccessInfo , ErrorInfo } from "@/utils/messageInfo";
|
||||
import { useRouter , useRoute } from "vue-router";
|
||||
import { SuccessInfo, ErrorInfo } from "@/utils/messageInfo";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import emitter from "@/utils/emitter";
|
||||
const tableData: any = ref([]); //表单展示数据
|
||||
const total = ref(0);
|
||||
|
|
@ -94,25 +97,27 @@ const getOrderList = async () => {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
//查看订单详情
|
||||
const showDetail = (row: any) => {
|
||||
router.push({
|
||||
path: '/OutfitOrderDetail'
|
||||
router.push({ //不会将参数显示到地址栏中,这么做要修改routes中对应的path
|
||||
name: '写真预约订单详情',
|
||||
params: {
|
||||
id: row.id
|
||||
}
|
||||
})
|
||||
};
|
||||
const deleteOrder = async (row : any) => { //微信退款
|
||||
const deleteOrder = async (row: any) => { //微信退款
|
||||
loading.value = true
|
||||
console.log('row-->',row)
|
||||
console.log('row-->', row)
|
||||
const res = await myAxios.post('/wechat/refund/create', { id: row.id }) //传入订单号取消订单并退款
|
||||
console.log(res)
|
||||
setTimeout(()=>{
|
||||
if(res.data.code === 1) {
|
||||
setTimeout(() => {
|
||||
if (res.data.code === 1) {
|
||||
SuccessInfo('退款成功')
|
||||
getOrderList()
|
||||
loading.value = false
|
||||
}
|
||||
},10000)
|
||||
}, 10000)
|
||||
}
|
||||
const reset = () => { //重置搜索框
|
||||
orderNumber.value = ''
|
||||
|
|
@ -120,10 +125,10 @@ const reset = () => { //重置搜索框
|
|||
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) {
|
||||
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 {
|
||||
|
|
@ -135,9 +140,13 @@ const cancelOrder = async (row:any)=>{ //取消订单的方法(未支付能取
|
|||
<style lang="scss" scoped>
|
||||
/* 使用 ::v-deep 来修改表头的对齐方式 */
|
||||
::v-deep .el-table__header th {
|
||||
text-align: center; /* 表头居中 */
|
||||
font-size: 14px; /* 设置字体大小 */
|
||||
font-weight: bold; /* 设置字体加粗 */
|
||||
font-family: 'Arial', sans-serif; /* 设置字体 */
|
||||
text-align: center;
|
||||
/* 表头居中 */
|
||||
font-size: 14px;
|
||||
/* 设置字体大小 */
|
||||
font-weight: bold;
|
||||
/* 设置字体加粗 */
|
||||
font-family: 'Arial', sans-serif;
|
||||
/* 设置字体 */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,23 +1,200 @@
|
|||
<template>
|
||||
<div>
|
||||
1
|
||||
<div class="detail-container">
|
||||
<el-card shadow="hover">
|
||||
<div class="operate-container">
|
||||
<i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
|
||||
<span class="color-danger">当前订单状态：{{ orderObj.orderStatus }}</span>
|
||||
<div class="operate-button-container" v-show="orderObj.orderStatus === '待支付'">
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要取消订单吗？" @confirm="cancelOrder" width=180>
|
||||
<template #reference>
|
||||
<el-button style="height: 25px" class="ml-5" type="danger">取消订单 <el-icon
|
||||
style="margin-left: 5px;">
|
||||
<Remove />
|
||||
</el-icon></el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<div class="operate-button-container" v-show="orderObj.orderStatus === '待发货'">
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要退款吗？" @confirm="refund" width=180>
|
||||
<template #reference>
|
||||
<el-button style="height: 25px" class="ml-5" type="danger">退款 <el-icon
|
||||
style="margin-left: 5px;">
|
||||
<Remove />
|
||||
</el-icon></el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<svg-icon icon-class="marker" style="color: #606266"></svg-icon>
|
||||
<span class="font-small">基本信息</span>
|
||||
</div>
|
||||
<div class="table-layout">
|
||||
<el-row>
|
||||
<el-col :span="4" class="table-cell-title">订单编号</el-col>
|
||||
<el-col :span="4" class="table-cell-title">拍摄地点</el-col>
|
||||
<el-col :span="4" class="table-cell-title">拍摄日期</el-col>
|
||||
<el-col :span="4" class="table-cell-title">拍摄时间</el-col>
|
||||
<el-col :span="4" class="table-cell-title">妆造服务</el-col>
|
||||
<el-col :span="4" class="table-cell-title">拍摄服务</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4" class="table-cell">{{ orderObj.orderNumber }}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{ orderObj.isIndoors ? '室内' : '室外' }}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{ orderObj.specificDate }}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{ orderObj.timePoint }}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{ orderObj.isMakeup ? '带妆造' : '不带妆造' }}</el-col>
|
||||
<el-col :span="4" class="table-cell">{{ orderObj.isPhotography ? '是' : '否' }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<svg-icon icon-class="marker" style="color: #606266"></svg-icon>
|
||||
<span class="font-small">收货人信息</span>
|
||||
</div>
|
||||
<div class="table-layout">
|
||||
<el-row>
|
||||
<el-col :span="12" class="table-cell-title">联系人</el-col>
|
||||
<el-col :span="12" class="table-cell-title">手机号码</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12" class="table-cell">{{ contactsSnapshot.name }}</el-col>
|
||||
<el-col :span="12" class="table-cell">{{ contactsSnapshot.phone }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<svg-icon icon-class="marker" style="color: #606266"></svg-icon>
|
||||
<span class="font-small">商品信息</span>
|
||||
</div>
|
||||
<div class="table-layout">
|
||||
<el-row>
|
||||
<el-col :span="6" class="table-cell-title">服装图片</el-col>
|
||||
<el-col :span="6" class="table-cell-title">服装名</el-col>
|
||||
<el-col :span="6" class="table-cell-title">服装类别</el-col>
|
||||
<el-col :span="6" class="table-cell-title">服装价格</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="6" class="table-cell-product"><img :src="photoProductsSnapshot.introImg"
|
||||
style="height: 70px; width: 70px;" alt=""></el-col>
|
||||
<el-col :span="6" class="table-cell-product">{{ photoProductsSnapshot.name }}</el-col>
|
||||
<el-col :span="6" class="table-cell-product">{{ photoProductsSnapshot.categoryName }}</el-col>
|
||||
<el-col :span="6" class="table-cell-product">{{ photoProductsSnapshot.price }}</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div style="float: right;margin: 20px">
|
||||
合计：<span class="color-danger">￥{{ totalAmount }}</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import myAxios from "@/api/myAxios";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { SuccessInfo , ErrorInfo } from "@/utils/messageInfo";
|
||||
import { useRouter , useRoute } from "vue-router";
|
||||
import { SuccessInfo, ErrorInfo } from "@/utils/messageInfo";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const route = useRoute();
|
||||
console.log(route.params.id);
|
||||
onMounted(()=>{
|
||||
|
||||
const orderObj: any = ref({}) //订单对象
|
||||
const orderStatus = ref<String>() //订单状态
|
||||
const contactsSnapshot: any = ref({}) //联系人快照
|
||||
const photoProductsSnapshot: any = ref({}) //商品快照
|
||||
const totalAmount: any = ref(0) //订单总价
|
||||
onMounted(() => {
|
||||
getOrderItem()
|
||||
})
|
||||
const getOrderItem = async () => { //获取订单详情
|
||||
const oid = route.params.id //传递订单id
|
||||
const res = await myAxios.post('/advanceOrder/list', { id: oid })
|
||||
if (res.data.code === 1) {
|
||||
orderObj.value = res.data.data.records[0];
|
||||
orderStatus.value = res.data.data.records[0].orderStatus
|
||||
contactsSnapshot.value = res.data.data.records[0].contactsSnapshot
|
||||
photoProductsSnapshot.value = res.data.data.records[0].photoProductsSnapshot
|
||||
totalAmount.value = res.data.data.records[0].totalAmount
|
||||
}
|
||||
}
|
||||
const cancelOrder = async () => { //取消订单方法
|
||||
const res = await myAxios.post('/advanceOrder/cancel/id', { id: route.params.id })
|
||||
console.log(res);
|
||||
|
||||
if (res.data.code === 1) {
|
||||
SuccessInfo('退款成功')
|
||||
getOrderItem()
|
||||
}
|
||||
}
|
||||
const refund = async () => { //退款方法
|
||||
const res = await myAxios.post('/wechat/refund/photo/create', { id: route.params.id })
|
||||
if (res.data.code === 1) {
|
||||
SuccessInfo('退款成功')
|
||||
getOrderItem()
|
||||
} else {
|
||||
ErrorInfo('退款失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-container {
|
||||
width: 80%;
|
||||
padding: 20px 20px 20px 20px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.operate-container {
|
||||
background: #F2F6FC;
|
||||
height: 80px;
|
||||
margin: -20px -20px 0;
|
||||
line-height: 80px;
|
||||
}
|
||||
|
||||
.color-danger {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.operate-button-container {
|
||||
float: right;
|
||||
margin-right: 20px
|
||||
}
|
||||
|
||||
.table-layout {
|
||||
margin-top: 20px;
|
||||
border-left: 1px solid #DCDFE6;
|
||||
border-top: 1px solid #DCDFE6;
|
||||
}
|
||||
|
||||
.table-cell-title {
|
||||
border-right: 1px solid #DCDFE6;
|
||||
border-bottom: 1px solid #DCDFE6;
|
||||
padding: 10px;
|
||||
background: #F2F6FC;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
height: 60px;
|
||||
line-height: 40px;
|
||||
border-right: 1px solid #DCDFE6;
|
||||
border-bottom: 1px solid #DCDFE6;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.table-cell-product {
|
||||
height: 100px;
|
||||
line-height: 80px;
|
||||
border-right: 1px solid #DCDFE6;
|
||||
border-bottom: 1px solid #DCDFE6;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<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-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' }">
|
||||
: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 }">
|
||||
|
|
@ -21,8 +21,9 @@
|
|||
<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 :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>
|
||||
|
|
@ -30,25 +31,25 @@
|
|||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类别" prop="goodSnapshot.type" width="200"/>
|
||||
<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="quantity" width="200" />
|
||||
<el-table-column label="总价" prop="itemTotalAmount" width="200" />
|
||||
</el-table>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="地址信息" width="180">
|
||||
<el-table-column prop="addressSnapshot.name" label="收货人" />
|
||||
<el-table-column prop="addressSnapshot.phone" label="手机号" width="180"/>
|
||||
<el-table-column prop="addressSnapshot.region" label="地区" width="180"/>
|
||||
<el-table-column prop="addressSnapshot.detailAddress" label="详细地址" width="180"/>
|
||||
<el-table-column prop="addressSnapshot.phone" label="手机号" width="180" />
|
||||
<el-table-column prop="addressSnapshot.region" label="地区" width="180" />
|
||||
<el-table-column prop="addressSnapshot.detailAddress" label="详细地址" width="180" />
|
||||
</el-table-column>
|
||||
<!-- <el-table-column label="优惠券信息" width="50">-->
|
||||
<!-- <el-table-column prop="couponSnapshot.name" label="优惠卷名称" />-->
|
||||
<!-- <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>-->
|
||||
<el-table-column prop="totalAmount" label="订单实付金额"></el-table-column>
|
||||
<el-table-column prop="orderStatus" label="订单状态"></el-table-column>
|
||||
<el-table-column prop="trackingNumber" label="快递单号"></el-table-column>
|
||||
|
|
@ -57,24 +58,29 @@
|
|||
<el-button size="small" @click="showDetail(scope.$index, scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="openShipmentDialog(scope.row.id)" > <!-- @click="deliverGoods(scope.row)"-->
|
||||
<el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small"
|
||||
@click="openShipmentDialog(scope.row.id)"> <!-- @click="deliverGoods(scope.row)"-->
|
||||
发货
|
||||
</el-button>
|
||||
<!-- <el-button :disabled="!['待支付'].includes(scope.row.orderStatus)" size="small" @click="cancelOrder(scope.row)" type="warning" plain>-->
|
||||
<!-- 取消订单-->
|
||||
<!-- </el-button>-->
|
||||
<el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="deleteOrder(scope.row)" type="danger" plain>
|
||||
退款
|
||||
</el-button>
|
||||
<!-- <el-button :disabled="!['待支付'].includes(scope.row.orderStatus)" size="small" @click="cancelOrder(scope.row)" type="warning" plain>-->
|
||||
<!-- 取消订单-->
|
||||
<!-- </el-button>-->
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要退款吗？" @confirm="deleteOrder(scope.row)" width=180>
|
||||
<template #reference>
|
||||
<el-button :disabled="!['待发货'].includes(scope.row.orderItemStatus)" size="small" type="danger"
|
||||
plain>退款</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页器 -->
|
||||
<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" />
|
||||
: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>
|
||||
<!-- 弹窗-->
|
||||
<el-dialog title="订单详情信息" v-model="DialogVisible" width="60%">
|
||||
|
|
@ -107,9 +113,9 @@
|
|||
|
||||
<!-- 这里的商品明细就不放图片了 -->
|
||||
<div style="display: flex"></div>
|
||||
<el-form-item label="订单状态" style="width: 250px">
|
||||
<el-input v-model="editForm.orderStatus" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单状态" style="width: 250px">
|
||||
<el-input v-model="editForm.orderStatus" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex">
|
||||
<el-form-item label="订单总金额" style="width: 250px">
|
||||
|
|
@ -120,33 +126,33 @@
|
|||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="订单实付金额" style="width: 250px">
|
||||
<el-input v-model="editForm.totalAmount" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单实付金额" style="width: 250px">
|
||||
<el-input v-model="editForm.totalAmount" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="快递单号" style="width: 300px">
|
||||
<el-input v-model="editForm.trackingNumber" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="快递单号" style="width: 300px">
|
||||
<el-input v-model="editForm.trackingNumber" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex">
|
||||
<el-form-item label="下单时间" style="width: 300px;">
|
||||
<el-form-item label="下单时间" style="width: 300px;">
|
||||
<el-input v-model="editForm.createTime" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="更新时间" style="width: 300px;">-->
|
||||
<!-- <el-input v-model="editForm.updateTime" autocomplete="off"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="更新时间" style="width: 300px;">-->
|
||||
<!-- <el-input v-model="editForm.updateTime" autocomplete="off"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button style="height: 30px;" @click="DialogVisible = false">取消</el-button>
|
||||
<el-button style="height: 30px" type="primary" @click="DialogVisible = false" >确认</el-button>
|
||||
<el-button style="height: 30px" type="primary" @click="DialogVisible = false">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 发货弹窗-->
|
||||
<el-dialog title="发货" v-model="shipments" width="60%">
|
||||
<el-form label-width="100px" size="default" >
|
||||
<el-form label-width="100px" size="default">
|
||||
<el-form-item label="快递单号" style="width: 300px;">
|
||||
<el-input v-model="shipment.trackingNumber"></el-input>
|
||||
</el-form-item>
|
||||
|
|
@ -164,13 +170,13 @@
|
|||
import { onMounted, ref } from "vue";
|
||||
import myAxios from "@/api/myAxios";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { SuccessInfo , ErrorInfo } from "@/utils/messageInfo";
|
||||
import { SuccessInfo, ErrorInfo } from "@/utils/messageInfo";
|
||||
const tableData: any = ref([]); //表单展示数据
|
||||
const total = ref(0);
|
||||
const title = ref('')
|
||||
const disabled = ref(true)
|
||||
const editForm: any = ref({});//编辑表单
|
||||
const shipment:any = ref({
|
||||
const shipment: any = ref({
|
||||
trackingNumber: null
|
||||
})//物流单号
|
||||
const DialogVisible = ref(false); //详情展示
|
||||
|
|
@ -229,7 +235,7 @@ const showDetail = (index: number, row: any) => {
|
|||
couponAmount.value = row.couponSnapshot.conditionAmount;
|
||||
}
|
||||
totalAmount.value = row.totalAmount + couponAmount.value;
|
||||
console.log('editForm--->',editForm.value);
|
||||
console.log('editForm--->', editForm.value);
|
||||
editForm.value = row;
|
||||
};
|
||||
//发货方法
|
||||
|
|
@ -256,27 +262,27 @@ const deliverGoods = async () => { //发货方法
|
|||
}
|
||||
shipments.value = false;
|
||||
}
|
||||
const deleteOrder = async (row : any) => { //微信退款
|
||||
const deleteOrder = async (row: any) => { //微信退款
|
||||
loading.value = true
|
||||
console.log('row-->',row)
|
||||
console.log('row-->', row)
|
||||
const res = await myAxios.post('/wechat/refund/create', { id: row.id }) //传入订单号取消订单并退款
|
||||
console.log(res)
|
||||
setTimeout(()=>{
|
||||
if(res.data.code === 1) {
|
||||
setTimeout(() => {
|
||||
if (res.data.code === 1) {
|
||||
SuccessInfo('退款成功')
|
||||
getOrderList()
|
||||
loading.value = false
|
||||
}
|
||||
},3)
|
||||
}, 3)
|
||||
}
|
||||
const reset = () => { //重置搜索框
|
||||
orderNumber.value = '';
|
||||
};
|
||||
const load = () => { } //搜索的方法
|
||||
const cancelOrder = async (row:any)=>{ //取消订单的方法(未支付能取消)
|
||||
console.log('点击的这一行--->',row);
|
||||
const res = await myAxios.post('/order/cancel/id',{ id: row.id })
|
||||
if(res.data.code === 1) {
|
||||
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 {
|
||||
|
|
@ -288,9 +294,13 @@ const cancelOrder = async (row:any)=>{ //取消订单的方法(未支付能取
|
|||
<style lang="scss" scoped>
|
||||
/* 使用 ::v-deep 来修改表头的对齐方式 */
|
||||
::v-deep .el-table__header th {
|
||||
text-align: center; /* 表头居中 */
|
||||
font-size: 14px; /* 设置字体大小 */
|
||||
font-weight: bold; /* 设置字体加粗 */
|
||||
font-family: 'Arial', sans-serif; /* 设置字体 */
|
||||
text-align: center;
|
||||
/* 表头居中 */
|
||||
font-size: 14px;
|
||||
/* 设置字体大小 */
|
||||
font-weight: bold;
|
||||
/* 设置字体加粗 */
|
||||
font-family: 'Arial', sans-serif;
|
||||
/* 设置字体 */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,16 +2,16 @@
|
|||
<div style="margin-bottom: 20px;">
|
||||
<div style="display: flex; justify-content: space-around; align-items: center">
|
||||
<div>
|
||||
<span>商品编号：</span><el-input style=" width: 150px; height: 30px; margin-right: 20px; font-size: 14px" suffix-icon="Search"
|
||||
placeholder="请输入商品id" v-model="goodId"></el-input>
|
||||
<span>商品编号：</span><el-input style=" width: 150px; height: 30px; margin-right: 20px; font-size: 14px"
|
||||
suffix-icon="Search" placeholder="请输入商品id" v-model="goodId"></el-input>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<DatePicker/>
|
||||
<DatePicker />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<TimePicker/>
|
||||
<TimePicker />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -22,8 +22,8 @@
|
|||
</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' }">
|
||||
: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 }">
|
||||
|
|
@ -50,13 +50,13 @@
|
|||
<el-table-column label="展开进行查看" type="expand" width="300">
|
||||
<template #default="props">
|
||||
<el-table :data="props.row.pendingServiceOrderVOList" border :row-style="{ height: '50px' }"
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '14px'}">
|
||||
<el-table-column label="订单明细id" prop="orderItemId" width="200"/>
|
||||
:cell-style="{ 'text-align': 'center', 'font-size': '14px' }">
|
||||
<el-table-column label="订单明细id" prop="orderItemId" width="200" />
|
||||
<el-table-column label="订单编号" prop="orderNumber" width="300"></el-table-column>
|
||||
<el-table-column label="联系人姓名" prop="name" width="200"/>
|
||||
<el-table-column label="联系人姓名" prop="name" width="200" />
|
||||
<el-table-column label="联系人手机号" prop="phone" width="200" />
|
||||
<el-table-column label="购买数量" prop="quantity" width="200"/>
|
||||
<el-table-column label="预估支付金额" prop="itemTotalAmount" width="200"/>
|
||||
<el-table-column label="购买数量" prop="quantity" width="200" />
|
||||
<el-table-column label="预估支付金额" prop="itemTotalAmount" width="200" />
|
||||
<el-table-column label="订单明细状态" prop="orderItemStatus" width="200"></el-table-column>
|
||||
|
||||
|
||||
|
|
@ -65,9 +65,12 @@
|
|||
<el-button size="small" @click="showDetail(scope.$index, scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
<el-button :disabled="!['待发货'].includes(scope.row.orderItemStatus)" size="small" @click="refundOrder(scope.row)" type="danger" plain>
|
||||
退款
|
||||
</el-button>
|
||||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="InfoFilled" icon-color="red"
|
||||
title="确定要退款吗？" @confirm="refundOrder(scope.row)" width=180>
|
||||
<template #reference>
|
||||
<el-button :disabled="!['待发货'].includes(scope.row.orderItemStatus)" size="small" type="danger" plain>退款</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
|
@ -80,9 +83,9 @@
|
|||
<!-- 分页器 -->
|
||||
<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" />
|
||||
: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>
|
||||
<!-- 弹窗-->
|
||||
<el-dialog title="待处理订单详情信息" v-model="DialogVisible" width="60%">
|
||||
|
|
@ -113,25 +116,25 @@
|
|||
<el-input v-model="editForm.orderItemStatus" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <div style="display: flex">-->
|
||||
<!-- <el-form-item label="下单时间" style="width: 300px;">-->
|
||||
<!-- <el-input v-model="editForm.createTime" autocomplete="off"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="更新时间" style="width: 300px;">-->
|
||||
<!-- <el-input v-model="editForm.updateTime" autocomplete="off"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div style="display: flex">-->
|
||||
<!-- <el-form-item label="下单时间" style="width: 300px;">-->
|
||||
<!-- <el-input v-model="editForm.createTime" autocomplete="off"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="更新时间" style="width: 300px;">-->
|
||||
<!-- <el-input v-model="editForm.updateTime" autocomplete="off"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </div>-->
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button style="height: 30px;" @click="DialogVisible = false">取消</el-button>
|
||||
<el-button style="height: 30px" type="primary" @click="DialogVisible = false" >确认</el-button>
|
||||
<el-button style="height: 30px" type="primary" @click="DialogVisible = false">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 发货弹窗-->
|
||||
<el-dialog title="发货" v-model="shipments" width="60%">
|
||||
<el-form label-width="100px" size="default" >
|
||||
<el-form label-width="100px" size="default">
|
||||
<el-form-item label="快递单号" style="width: 300px;">
|
||||
<el-input v-model="shipment.trackingNumber"></el-input>
|
||||
</el-form-item>
|
||||
|
|
@ -139,7 +142,7 @@
|
|||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button style="height: 30px;" @click=" shipments = false">取消</el-button>
|
||||
<el-button style="height: 30px" type="primary" @click="deliverGoods ">确认</el-button>
|
||||
<el-button style="height: 30px" type="primary" @click="deliverGoods">确认</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
|
@ -149,17 +152,17 @@
|
|||
import { onMounted, ref } from "vue";
|
||||
import myAxios from "@/api/myAxios";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { SuccessInfo , ErrorInfo } from "@/utils/messageInfo";
|
||||
import { SuccessInfo, ErrorInfo } from "@/utils/messageInfo";
|
||||
import DatePicker from "@/layout/components/DatePicker.vue";
|
||||
import TimePicker from "@/layout/components/TimePicker.vue";
|
||||
import emitter from "@/utils/emitter";
|
||||
import {checkObjectProperties} from "@/layout/js/validUtils";
|
||||
import { checkObjectProperties } from "@/layout/js/validUtils";
|
||||
const tableData: any = ref([]); //表单展示数据
|
||||
const total = ref(0);
|
||||
const title = ref('')
|
||||
const disabled = ref(true)
|
||||
const editForm: any = ref({});//编辑表单
|
||||
const shipment:any = ref({
|
||||
const shipment: any = ref({
|
||||
trackingNumber: null
|
||||
})//物流单号
|
||||
const DialogVisible = ref(false); //详情展示
|
||||
|
|
@ -179,11 +182,11 @@ const searchParams: any = ref({ //封装分页
|
|||
})
|
||||
const loading = ref(false)
|
||||
onMounted(() => {
|
||||
emitter.on('getReservationDate', (val:any) => {
|
||||
emitter.on('getReservationDate', (val: any) => {
|
||||
reservationDate.value = val
|
||||
searchParams.value.reservationDate = val
|
||||
})
|
||||
emitter.on('getTimeSlot', (val:any) => {
|
||||
emitter.on('getTimeSlot', (val: any) => {
|
||||
timeSlot.value = val
|
||||
searchParams.value.timeSlot = val
|
||||
})
|
||||
|
|
@ -209,9 +212,9 @@ const getOrderList = async () => {
|
|||
if (res.data.code === 1) {
|
||||
tableData.value = res.data.data.records;
|
||||
console.log(tableData.value)
|
||||
tableData.value.forEach((item:any) => {
|
||||
tableData.value.forEach((item: any) => {
|
||||
let total = 0;
|
||||
for (var i = 0; i < item.pendingServiceOrderVOList.length; i ++ ) {
|
||||
for (var i = 0; i < item.pendingServiceOrderVOList.length; i++) {
|
||||
total += item.pendingServiceOrderVOList[i].quantity;
|
||||
}
|
||||
item.currentNumber = total
|
||||
|
|
@ -236,7 +239,7 @@ const showDetail = (index: number, row: any) => {
|
|||
title.value = "订单详情"
|
||||
DialogVisible.value = true;
|
||||
editForm.value = row;
|
||||
console.log('editForm--->',editForm.value);
|
||||
console.log('editForm--->', editForm.value);
|
||||
};
|
||||
//发货方法
|
||||
const currentId = ref<number | null>(null);
|
||||
|
|
@ -262,18 +265,18 @@ const deliverGoods = async () => { //发货方法
|
|||
}
|
||||
shipments.value = false;
|
||||
}
|
||||
const refundOrder = async (row : any) => { //微信退款
|
||||
const refundOrder = async (row: any) => { //微信退款
|
||||
loading.value = true
|
||||
console.log('row-->',row)
|
||||
console.log('row-->', row)
|
||||
const res = await myAxios.post('/wechat/refund/create', { id: row.orderItemId }) //传入订单号取消订单并退款
|
||||
console.log(res)
|
||||
setTimeout(()=>{
|
||||
if(res.data.code === 1) {
|
||||
setTimeout(() => {
|
||||
if (res.data.code === 1) {
|
||||
SuccessInfo('退款成功')
|
||||
getOrderList()
|
||||
loading.value = false
|
||||
}
|
||||
},2000)
|
||||
}, 2000)
|
||||
}
|
||||
const reset = () => { //重置搜索框
|
||||
goodId.value = ''
|
||||
|
|
@ -291,10 +294,10 @@ const reset = () => { //重置搜索框
|
|||
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) {
|
||||
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 {
|
||||
|
|
@ -306,10 +309,13 @@ const cancelOrder = async (row:any)=>{ //取消订单的方法(未支付能取
|
|||
<style lang="scss" scoped>
|
||||
/* 使用 ::v-deep 来修改表头的对齐方式 */
|
||||
::v-deep .el-table__header th {
|
||||
text-align: center; /* 表头居中 */
|
||||
font-size: 14px; /* 设置字体大小 */
|
||||
font-weight: bold; /* 设置字体加粗 */
|
||||
font-family: 'Arial', sans-serif; /* 设置字体 */
|
||||
text-align: center;
|
||||
/* 表头居中 */
|
||||
font-size: 14px;
|
||||
/* 设置字体大小 */
|
||||
font-weight: bold;
|
||||
/* 设置字体加粗 */
|
||||
font-family: 'Arial', sans-serif;
|
||||
/* 设置字体 */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -53,9 +53,9 @@
|
|||
<el-table-column prop="orderStatus" label="订单状态"></el-table-column>
|
||||
<el-table-column label="操作" width="220px" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="showDetail(scope.$index, scope.row)">
|
||||
<!-- <el-button size="small" @click="showDetail(scope.$index, scope.row)">
|
||||
详情
|
||||
</el-button>
|
||||
</el-button> -->
|
||||
<!-- <el-button :disabled="!['待发货'].includes(scope.row.orderStatus)" size="small" @click="openShipmentDialog(scope.row.id)" > <!– @click="deliverGoods(scope.row)"–>-->
|
||||
<!-- 发货-->
|
||||
<!-- </el-button>-->
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user