2024-1-11

src/api/order.js

@@ -698,3 +698,11 @@ export function member_update(data) {
 	    method: 'post',
 	    data});
 }
+
+//服务项目退单
+export function active_refund_order(data) {
+	return request({
+	    url: `refund/active_refund_order`,
+	    method: 'post',
+	    data});
+}

src/pages/order/serveOrder/index.vue

@@ -14,9 +14,8 @@
 					</Col>
 					<Col class="ivu-text-left mr">
 					<FormItem label="员工：">
-						<Select v-model="pagination.work_member_id" style="width: 250px">
-							<Option value="">全部</Option>
-							<Option v-for="item in ygList" :key="item.id" :value="item.id">{{ item.name }}</Option>
+						<Select  filterable clearable v-model="pagination.work_member_id" style="width: 250px">
+							<Option v-for="item in ygList" :key="item.id" :value="item.id">{{ item.name }}(ID:{{item.uid}})</Option>
 						</Select>
 					</FormItem>
 					</Col>
@@ -47,7 +46,7 @@
 						style="color: #ed4014; display: block">用户已删除</span>
 				</template>
 				<template slot-scope="{ row }" slot="real_name">
-					<div>用户名：{{ row.real_name }}()</div>
+					<div>用户名：{{ row.real_name }}</div>
 					<div>手机号：{{ row.user_phone }}</div>
 				</template>
 				<template slot-scope="{ row, index }" slot="refund_status">
@@ -61,13 +60,21 @@
 						<div>原因：{{ row.refuse_reason }}</div>
 					</div>
 				</template>
-				<template slot-scope="{ row, index }" slot="info">
+				<template slot-scope="{ row }" slot="info">
 					<div class="tabBox" v-for="(val, i) in row.info" :key="i">
-						<div class="tabBox_img" v-viewer>
-							<img v-lazy="val.slider_image" />
+						<div class="tabRow">
+							<div class="tabBox_img" v-viewer>
+								<img v-lazy="val.slider_image" />
+							</div>
+							<div class="tabBox_content">
+								<div class="tabBox_tit" :title="val.store_name">{{ val.store_name }}</div>
+								<div class="tabBox_pice">{{'￥' + val.pay_price}}</div>
+							</div>
+						</div>
+						<div class="tabBox_serve" v-if="val.project_user_id">
+							服务卡<br />
+							ID：{{val.project_user_id}}
 						</div>
-						<span class="tabBox_tit">{{ val.store_name }}</span>
-						<span class="tabBox_pice">{{'￥' + val.pay_price}}</span>
 					</div>
 				</template>
 				<template slot-scope="{ row, index }" slot="pay_type">
@@ -90,6 +97,18 @@
 				</template>
 				<template slot-scope="{ row, index }" slot="action">
 					<a @click="changeMenu(row, 0)" v-if="row.status == 0">修改员工</a>
+					<Divider type="vertical" v-if="row.status >=0" />
+					<a @click="del(row)" v-if="row.status >=0">退单</a>
+				</template>
+				<template slot-scope="{ row }" slot="status">
+					<div class="tabBox" v-for="(val, i) in row.info" :key="i">
+						<div class="tabBox_serve" v-if="val.paid>0">
+							<Tag color="blue" size="medium">已付款</Tag>
+						</div>
+						<div class="tabBox_serve" v-else>
+							<Tag color="gold" size="medium">待付款</Tag>
+						</div>
+					</div>
 				</template>
 			</Table>
 			<div class="acea-row row-right page">
@@ -124,6 +143,17 @@
 				<Button @click="userListShow=false">取消</Button>
 			</template>
 		</Modal>
+		<Modal v-model="delModel" scrollable title="退单" class="order_box" :closable="false">
+			<Form :label-width="80">
+				<FormItem label="备注：">
+					<Input v-model="delData.remarks" placeholder="请输入退单备注" />
+				</FormItem>
+			</Form>
+			<div slot="footer">
+				<Button type="primary" @click="delConfirm">提交</Button>
+				<Button @click="delModel=false">取消</Button>
+			</div>
+		</Modal>
 	</div>
 </template>
 
@@ -136,7 +166,8 @@
 	} from "@/api/check";
 	import {
 		getServeOrder,
-		member_update
+		member_update,
+		active_refund_order
 	} from '@/api/order'
 	import userlist from "@/components/userList/index";
 	export default {
@@ -145,6 +176,11 @@
 		},
 		data() {
 			return {
+				delModel: false,
+				delData: {
+					id: '',
+					remarks: ''
+				},
 				// 显示用户列表
 				userListShow: false,
 				order_id: '',
@@ -160,7 +196,7 @@
 					{
 						title: '用户信息',
 						slot: 'real_name',
-						minWidth: 150,
+						minWidth: 140,
 					},
 					{
 						title: '预约员工',
@@ -170,7 +206,7 @@
 					{
 						title: '商品信息',
 						slot: 'info',
-						minWidth: 300,
+						minWidth: 250,
 					},
 					{
 						title: '实际支付',
@@ -180,7 +216,12 @@
 					{
 						title: '支付方式',
 						slot: 'pay_type',
-						minWidth: 70,
+						minWidth: 80,
+					},
+					{
+						title: "支付状态",
+						slot: "status",
+						minWidth: 80,
 					},
 					{
 						title: '下单时间',
@@ -233,6 +274,32 @@
 			this.getygList()
 		},
 		methods: {
+			delConfirm() {
+				const that = this;
+				that.delModel = false;
+				that.$Modal.confirm({
+					title: "确认退单",
+					content: '<p>确定退单吗？</p><p>退单后将无法恢复，请谨慎操作！</p>',
+					onOk: () => {
+						console.log('进入');
+						setTimeout(function() {
+							that.$Modal.remove();
+							active_refund_order(that.delData).then((res) => {
+								console.log(res);
+								that.getOrderList()
+								that.$Message.success("退单成功");
+							}).catch((err) => {
+								that.$Message.error(err.msg);
+							})
+						}, 300);
+					}
+				});
+			},
+			del(row) {
+				const that = this;
+				that.delModel = true;
+				that.delData.id = row.id;
+			},
 			// 选中用户
 			checkUser(res) {
 				this.userListShow = false;
@@ -374,10 +441,19 @@
 		height: 100%;
 		display: flex;
 		align-items: center;
+		justify-content: space-between;
+		.tabRow{
+			display: flex;
+		}
+		.tabBox_serve {
+			flex-shrink: 0;
+			padding-left: 5px;
+		}
 
 		.tabBox_img {
 			width: 36px;
 			height: 36px;
+			flex-shrink: 0;
 
 			img {
 				width: 100%;
@@ -386,7 +462,7 @@
 		}
 
 		.tabBox_tit {
-			width: 60%;
+			flex-grow: 1;
 			font-size: 12px !important;
 			margin: 0 2px 0 10px;
 			letter-spacing: 1px;