服务包订单
This commit is contained in:
parent
c96980e315
commit
163b1b4780
|
|
@ -127,6 +127,8 @@ const mainRoutes = {
|
||||||
{ path: '/conversionRate', component: _import('conversionRate/conversionRate'), name: 'conversionRate', meta: { title: '转化率列表', isTab: true } },
|
{ path: '/conversionRate', component: _import('conversionRate/conversionRate'), name: 'conversionRate', meta: { title: '转化率列表', isTab: true } },
|
||||||
// 2024.06.05
|
// 2024.06.05
|
||||||
{ path: '/massagePackage', component: _import('bl/massage/massagePackage'), name: 'massagePackage', meta: { title: '服务包列表', isTab: true } },
|
{ path: '/massagePackage', component: _import('bl/massage/massagePackage'), name: 'massagePackage', meta: { title: '服务包列表', isTab: true } },
|
||||||
|
// 2024.06.08
|
||||||
|
{ path: '/packageOrder', component: _import('bl/order/packageOrder'), name: 'packageOrder', meta: { title: '服务包订单', isTab: true } },
|
||||||
|
|
||||||
],
|
],
|
||||||
beforeEnter(to, from, next) {
|
beforeEnter(to, from, next) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,444 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 服务包订单 -->
|
||||||
|
<div style="position: relative; display: inline-block; margin: 5px">
|
||||||
|
<span>订单号：</span>
|
||||||
|
<el-input
|
||||||
|
style="width: 200px"
|
||||||
|
placeholder="请输入订单号"
|
||||||
|
v-model="ordersNo"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div style="position: relative; display: inline-block">
|
||||||
|
<span>服务类型：</span>
|
||||||
|
<el-select
|
||||||
|
clearable
|
||||||
|
v-model="type"
|
||||||
|
style="width: 150px; margin-left: 10px">
|
||||||
|
<el-option
|
||||||
|
v-for="item in typeDictData"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.value"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<div style="position: relative; display: inline-block">
|
||||||
|
<span>服务名称：</span>
|
||||||
|
<el-input
|
||||||
|
style="width: 200px"
|
||||||
|
placeholder="请输入服务名称"
|
||||||
|
v-model="packageName">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div style="position: relative; display: inline-block">
|
||||||
|
<span>状态：</span>
|
||||||
|
<el-select
|
||||||
|
clearable
|
||||||
|
v-model="status"
|
||||||
|
style="width: 150px; margin-left: 10px">
|
||||||
|
<el-option value="1" label="已支付"></el-option>
|
||||||
|
<el-option value="2" label="已退款"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
<el-button
|
||||||
|
style="margin: 10px"
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
icon="document"
|
||||||
|
@click="handleSelect"
|
||||||
|
>查询
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
style="margin: 10px"
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
icon="document"
|
||||||
|
@click="handleClear"
|
||||||
|
>重置
|
||||||
|
</el-button
|
||||||
|
>
|
||||||
|
<el-table v-loading="tableDataLoading" :data="tableData.list">
|
||||||
|
<el-table-column prop="ordersId" label="编号" width="60" fixed="left"></el-table-column>
|
||||||
|
<el-table-column prop="ordersNo" label="订单号" width="180" fixed="left"></el-table-column>
|
||||||
|
<el-table-column prop="userName" label="下单用户"></el-table-column>
|
||||||
|
<el-table-column prop="type" label="服务类型" width="80">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ showDictValue(scope.row.type, typeDictData) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="packageName" label="服务名称" width="150">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="vipRate" label="会员优惠比" width="120">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ scope.row.vipRate }}%</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="price" label="单价" width="80"></el-table-column>
|
||||||
|
<el-table-column prop="quantity" label="数量" width="80"></el-table-column>
|
||||||
|
<el-table-column prop="oldSumMoney" label="金额" width="80"></el-table-column>
|
||||||
|
<el-table-column prop="sumMoney" label="应付金额" width="80"></el-table-column>
|
||||||
|
<el-table-column prop="payMoney" label="支付金额" width="80"></el-table-column>
|
||||||
|
<el-table-column prop="payWay" label="支付方式" width="120">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.payWay==1">app微信</span>
|
||||||
|
<span v-if="scope.row.payWay==2">微信公众号</span>
|
||||||
|
<span v-if="scope.row.payWay==3">微信小程序</span>
|
||||||
|
<span v-if="scope.row.payWay==4">微信公众号浏览器支付</span>
|
||||||
|
<span v-if="scope.row.payWay==5">零钱</span>
|
||||||
|
<span v-if="scope.row.payWay==6">支付宝</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="payTime" label="支付时间" width="100"></el-table-column>
|
||||||
|
<el-table-column prop="status" label="订单状态" fixed="right" width="80">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span style="color: #009900;" v-if="scope.row.status==1">已支付</span>
|
||||||
|
<span style="color: #FF0000;" v-if="scope.row.status==2">已退款</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="couponCount" label="优惠券数量" width="120">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span style="color: #008000;cursor: pointer;"
|
||||||
|
@click="showCoupon(scope.row)">{{ scope.row.couponCount }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="couponMoney" label="优惠券金额" width="120">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span style="color: #008000;cursor: pointer;"
|
||||||
|
@click="showCoupon(scope.row)">{{ scope.row.couponMoney }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="refundTime" label="退款时间" width="100"></el-table-column>
|
||||||
|
<el-table-column prop="refundMoney" label="退款金额" width="80"></el-table-column>
|
||||||
|
<el-table-column label="操作" prop="id" width="100" fixed="right">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
style="margin: 5px"
|
||||||
|
@click="showDetailView(scope.row)"
|
||||||
|
>项目详情
|
||||||
|
</el-button>
|
||||||
|
<el-button v-if="scope.row.status==1"
|
||||||
|
size="mini"
|
||||||
|
type="danger"
|
||||||
|
style="margin: 5px"
|
||||||
|
@click="showRefundView(scope.row)"
|
||||||
|
>退款
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div style="text-align: center; margin-top: 10px">
|
||||||
|
<el-pagination
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:page-sizes="[10, 20, 30, 40]"
|
||||||
|
:page-size="limit"
|
||||||
|
:current-page="page"
|
||||||
|
layout="total,sizes, prev, pager, next,jumper"
|
||||||
|
:total="tableData.totalCount"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 显示代金券 -->
|
||||||
|
<el-dialog title="代金券" :visible.sync="dialogVisibleCoupon" width="600px" center>
|
||||||
|
<el-table v-loading="couponTableDataLoading" :data="couponTableData">
|
||||||
|
<el-table-column prop="couponName" label="名称" width="450"></el-table-column>
|
||||||
|
<el-table-column prop="couponMoney" label="金额"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 显示详情 -->
|
||||||
|
<el-dialog title="订单项目详情" :visible.sync="dialogVisibleDetail" center>
|
||||||
|
<el-table v-loading="detailTableDataLoading" :data="detailTableData">
|
||||||
|
<el-table-column prop="massageTypeId" label="项目编号"></el-table-column>
|
||||||
|
<el-table-column prop="title" label="项目名称" width="360"></el-table-column>
|
||||||
|
<el-table-column prop="massageImg" label="图片">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<img
|
||||||
|
v-if="scope.row.massageImg && scope.row.massageImg != ''"
|
||||||
|
:src="scope.row.massageImg"
|
||||||
|
width="40"
|
||||||
|
height="40"
|
||||||
|
/>
|
||||||
|
<span v-else>暂无图片</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="price" label="现价"></el-table-column>
|
||||||
|
<el-table-column prop="packagePrice" label="服务包价格"></el-table-column>
|
||||||
|
<el-table-column prop="usedQuantity" label="使用数量"></el-table-column>
|
||||||
|
<el-table-column prop="unUsedQuantity" label="未用数量"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<!-- 退款 -->
|
||||||
|
<el-dialog title="退款" :visible.sync="dialogFormVisibleRefund" center>
|
||||||
|
<div style="margin-bottom: 10px">
|
||||||
|
<span style="width: 200px; display: inline-block; text-align: right">订单号：</span>
|
||||||
|
<span style="width: 50%; display: inline-block; text-align: left">{{ ordersNo }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="margin-bottom: 10px">
|
||||||
|
<span style="width: 200px; display: inline-block; text-align: right">服务类型：</span>
|
||||||
|
<span style="width: 50%; display: inline-block; text-align: left">{{ showDictValue(type, typeDictData) }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="margin-bottom: 10px">
|
||||||
|
<span style="width: 200px; display: inline-block; text-align: right">服务名称：</span>
|
||||||
|
<span style="width: 50%; display: inline-block; text-align: left">{{ packageName }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="margin-bottom: 10px">
|
||||||
|
<span style="width: 200px; display: inline-block; text-align: right">支付金额：</span>
|
||||||
|
<span style="width: 50%; display: inline-block; text-align: left">{{ payMoney }}</span>
|
||||||
|
</div>
|
||||||
|
<div style="margin-bottom: 10px">
|
||||||
|
<span style="width: 200px; display: inline-block; text-align: right">退款金额：</span>
|
||||||
|
<el-input
|
||||||
|
style="width: 50%"
|
||||||
|
v-model="refundMoney"
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
placeholder="请输入退款金额"
|
||||||
|
></el-input>
|
||||||
|
</div>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogFormVisibleRefund = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="handleRefund()">确 定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from "axios";
|
||||||
|
import {jsonp} from "vue-jsonp";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableDataLoading: false,
|
||||||
|
tableData: {},
|
||||||
|
typeDictData: [],
|
||||||
|
page: 1,
|
||||||
|
limit: 10,
|
||||||
|
status: "",//状态
|
||||||
|
ordersId:"",//订单编号
|
||||||
|
ordersNo: "",//订单号
|
||||||
|
type: "",//服务类型
|
||||||
|
packageName: "",//服务名称
|
||||||
|
payMoney:0,//支付金额
|
||||||
|
|
||||||
|
dialogVisibleCoupon: false,//代金券弹窗
|
||||||
|
couponTableDataLoading: false,//代金券loading
|
||||||
|
couponTableData: [],//代金券表格数据
|
||||||
|
|
||||||
|
|
||||||
|
dialogVisibleDetail: false,//详情弹窗
|
||||||
|
detailTableDataLoading: false,//详情loading
|
||||||
|
detailTableData: [],//详情
|
||||||
|
|
||||||
|
refundMoney: 0,//退款金额
|
||||||
|
dialogFormVisibleRefund: false,//退款弹窗
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
showDictValue(data, datas){
|
||||||
|
const dictItem = datas.find(item => data === item.id);
|
||||||
|
return dictItem ? dictItem.value : '';
|
||||||
|
},
|
||||||
|
// 服务包类型
|
||||||
|
typeDictSelect() {
|
||||||
|
this.$http({
|
||||||
|
url: this.$http.adornUrl("sys/dict/selectDictList"),
|
||||||
|
method: "get",
|
||||||
|
params: this.$http.adornParams({
|
||||||
|
type: "service_package",
|
||||||
|
}),
|
||||||
|
}).then(({data}) => {
|
||||||
|
this.typeDictData = data.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 项目类型
|
||||||
|
fwSelect() {
|
||||||
|
this.$http({
|
||||||
|
url: this.$http.adornUrl("sys/dict/selectDictList"),
|
||||||
|
method: "get",
|
||||||
|
params: this.$http.adornParams({
|
||||||
|
type: "服务类型",
|
||||||
|
}),
|
||||||
|
}).then(({ data }) => {
|
||||||
|
let returnData = data.data;
|
||||||
|
this.fwData = returnData;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取服务包订单列表数据
|
||||||
|
handleSelect() {
|
||||||
|
this.tableDataLoading = true;
|
||||||
|
this.$http({
|
||||||
|
url: this.$http.adornUrl("user/package/order/findPage"),
|
||||||
|
method: "get",
|
||||||
|
params: this.$http.adornParams({
|
||||||
|
page: this.page,
|
||||||
|
limit: this.limit,
|
||||||
|
status: this.status,
|
||||||
|
type: this.type,
|
||||||
|
ordersNo: this.ordersNo,
|
||||||
|
packageName: this.packageName
|
||||||
|
}),
|
||||||
|
}).then(({data}) => {
|
||||||
|
if (data.code == 0) {
|
||||||
|
let returnData = data.data;
|
||||||
|
this.tableData = returnData;
|
||||||
|
} else {
|
||||||
|
this.$notify({
|
||||||
|
title: "提示",
|
||||||
|
duration: 1800,
|
||||||
|
message: data.msg,
|
||||||
|
type: "warning",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.tableDataLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 重置
|
||||||
|
handleClear() {
|
||||||
|
this.status = "";
|
||||||
|
this.type = "";
|
||||||
|
this.ordersNo = "";
|
||||||
|
this.packageName = "";
|
||||||
|
this.page = 1;
|
||||||
|
this.handleSelect();
|
||||||
|
},
|
||||||
|
|
||||||
|
//分页
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.limit = val;
|
||||||
|
this.handleSelect();
|
||||||
|
},
|
||||||
|
|
||||||
|
//翻页
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.page = val;
|
||||||
|
this.handleSelect();
|
||||||
|
},
|
||||||
|
|
||||||
|
//显示代金券
|
||||||
|
showCoupon(row){
|
||||||
|
this.dialogVisibleCoupon = true;
|
||||||
|
this.couponTableDataLoading = true;
|
||||||
|
this.$http({
|
||||||
|
url: this.$http.adornUrl("user/package/order/findCoupon"),
|
||||||
|
method: "get",
|
||||||
|
params: this.$http.adornParams({
|
||||||
|
ordersId: row.ordersId,
|
||||||
|
}),
|
||||||
|
}).then(({data}) => {
|
||||||
|
this.couponTableData = data.data;
|
||||||
|
this.couponTableDataLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//显示订单项目详情
|
||||||
|
showDetailView(row){
|
||||||
|
this.dialogVisibleDetail = true;
|
||||||
|
this.detailTableDataLoading = true;
|
||||||
|
this.$http({
|
||||||
|
url: this.$http.adornUrl("user/package/detail/findDetailUsedQuantity"),
|
||||||
|
method: "get",
|
||||||
|
params: this.$http.adornParams({
|
||||||
|
ordersId: row.ordersId,
|
||||||
|
}),
|
||||||
|
}).then(({data}) => {
|
||||||
|
this.detailTableData = data.data;
|
||||||
|
this.detailTableDataLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 显示退款窗体
|
||||||
|
showRefundView(row){
|
||||||
|
this.ordersId = row.ordersId;
|
||||||
|
this.ordersNo = row.ordersNo;
|
||||||
|
this.type = row.type;
|
||||||
|
this.packageName = row.packageName;
|
||||||
|
this.payMoney = row.payMoney;
|
||||||
|
this.dialogFormVisibleRefund = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 退款
|
||||||
|
handleRefund() {
|
||||||
|
if(this.refundMoney > this.payMoney){
|
||||||
|
this.$message({
|
||||||
|
message: "退款失败，退款金额不能大于支付金额！",
|
||||||
|
type: "warning",
|
||||||
|
duration: 1500
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$http({
|
||||||
|
url: this.$http.adornUrl("user/package/order/refund"),
|
||||||
|
method: "post",
|
||||||
|
params: this.$http.adornParams({
|
||||||
|
refundMoney: this.refundMoney,
|
||||||
|
ordersId: this.ordersId,
|
||||||
|
}),
|
||||||
|
}).then(({data}) => {
|
||||||
|
if (data.code == 0) {
|
||||||
|
this.$message({
|
||||||
|
message: "退款成功",
|
||||||
|
type: "success",
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
this.handleRefundClear();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
this.dialogFormVisibleRefund = false;
|
||||||
|
} else {
|
||||||
|
this.$message({
|
||||||
|
message: data.msg,
|
||||||
|
type: "warning",
|
||||||
|
duration: 1500,
|
||||||
|
onClose: () => {
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
handleRefundClear() {
|
||||||
|
this.ordersId = "";
|
||||||
|
this.ordersNo = "";
|
||||||
|
this.type = "";
|
||||||
|
this.packageName = "";
|
||||||
|
this.payMoney = 0;
|
||||||
|
this.handleSelect();
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.handleSelect();
|
||||||
|
this.typeDictSelect();
|
||||||
|
this.fwSelect();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.customWidth {
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
.el-dialog--center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tooltip__popper {
|
||||||
|
width: 200px;
|
||||||
|
padding: 10px;
|
||||||
|
color: #000 !important;
|
||||||
|
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
|
||||||
|
background-color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue