From 163b1b4780001dc82dd39ef8975865bee885d886 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9B=B9=E7=A3=8A?= <45566618@qq.com>
Date: Sat, 8 Jun 2024 17:31:46 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=8C=85=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                 |   2 +
 src/views/bl/order/packageOrder.vue | 444 ++++++++++++++++++++++++++++
 2 files changed, 446 insertions(+)
 create mode 100644 src/views/bl/order/packageOrder.vue

diff --git a/src/router/index.js b/src/router/index.js
index 58103dd..d047673 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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) {
diff --git a/src/views/bl/order/packageOrder.vue b/src/views/bl/order/packageOrder.vue
new file mode 100644
index 0000000..2f6718d
--- /dev/null
+++ b/src/views/bl/order/packageOrder.vue
@@ -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>&nbsp;&nbsp;
+		</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>&nbsp;&nbsp;
+		</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
+		>&nbsp;&nbsp;
+		<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>