服务包订单
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 } },
|
||||
// 2024.06.05
|
||||
{ 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) {
|
||||
|
|
|
|||
|
|
@ -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