refund

src/api/order.js

@@ -667,3 +667,10 @@ export function putOpenRefund(data) {
   });
 };
 
+export function getServeRefund(data) {
+	return request({
+	    url: `refund/refund_lst`,
+	    method: 'post',
+	    data
+	});
+}

src/pages/order/serveRefund/index.vue

@@ -0,0 +1,644 @@
+<template>
+	<div>
+		<!-- <div class="i-layout-page-header"> -->
+		<!-- <PageHeader
+        class="product_tabs"
+        :title="$route.meta.title"
+        hidden-breadcrumb
+      ></PageHeader> -->
+		<!-- </div> -->
+		<Card :bordered="false" dis-hover class="ivu-mt mt15">
+			<Form ref="pagination" :model="pagination" :label-width="labelWidth" :label-position="labelPosition"
+				@submit.native.prevent>
+				<Row type="flex" class="mt10">
+					<Col class="ivu-text-left mr">
+					<FormItem label="订单状态：">
+						<Select v-model="pagination.refund_type" style="width: 250px"
+							@on-change="selectChange2(pagination.refund_type)">
+							<Option v-for="item in num" :key="item.value" :value="item.value">{{ item.name }}</Option>
+						</Select>
+						<!-- <RadioGroup
+              v-model="pagination.refund_type"
+              type="button"
+              @on-change="selectChange2(pagination.refund_type)"
+            >
+              <Radio v-for="(item, index) in num" :key="index" :label="index"
+                >{{ item.name }} {{ '(' + item.num + ')' }}</Radio
+              >
+            </RadioGroup> -->
+					</FormItem>
+					</Col>
+					<Col class="ml15">
+					<FormItem label="退款时间：">
+						<DatePicker :editable="false" @on-change="onchangeTime" :value="timeVal" format="yyyy/MM/dd"
+							type="daterange" placement="bottom-start" placeholder="自定义时间" style="width: 250px"
+							:options="options"></DatePicker>
+					</FormItem>
+					</Col>
+					<Col class="ivu-text-left">
+					<FormItem label="订单搜索：" label-for="title">
+						<Input enter-button v-model="pagination.order_id" placeholder="请输入订单号" style="width: 250px" />
+						<Button type="primary" class="ml10 search" @click="orderSearch">搜索</Button>
+					</FormItem>
+					</Col>
+
+				</Row>
+			</Form>
+		</Card>
+		<Card :bordered="false" dis-hover class="ivu-mt mt15">
+
+			<Table :columns="thead" :data="tbody" ref="table" class="mt10" :loading="loading" highlight-row
+				no-userFrom-text="暂无数据" no-filtered-userFrom-text="暂无筛选结果">
+				<template slot-scope="{ row, index }" slot="order_id">
+					<span v-text="row.order_id" style="display: block"></span>
+					<span v-show="row.is_del === 1 && row.delete_time == null"
+						style="color: #ed4014; display: block">用户已删除</span>
+				</template>
+				<template slot-scope="{ row, index }" slot="user">
+					<div>用户名：{{ row.nickname }}</div>
+					<div>用户ID：{{ row.uid }}</div>
+				</template>
+				<template slot-scope="{ row, index }" slot="refund_status">
+					<div v-if="row.refund_status == 1">待审核</div>
+					<div v-else-if="row.refund_status == 2">第一次审核通过</div>
+					<div v-else-if="row.refund_status == 3">第二次审核通过</div>
+					<div v-else-if="row.refund_status == 4">已全部退款</div>
+					<div v-else-if="row.refund_status == 5">已部分退款</div>
+					<div v-else-if="row.refund_status == -1">
+						<div>拒绝退款</div>
+						<div>原因：{{ row.refuse_reason }}</div>
+					</div>
+				</template>
+				<template slot-scope="{ row, index }" 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>
+						<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_price">
+					<span class="tabBox_pice">{{'￥' + showPrice(row.info)}}</span>
+				</template>
+				<template slot-scope="{ row, index }" slot="add_time">
+					<span class="tabBox_pice">{{showTime(row.add_time)}}</span>
+				</template>
+				<template slot-scope="{ row, index }" slot="statusName">
+					<div v-html="row.refund_reason" class="pt5"></div>
+					<div v-html="row.refund_explain" class="pt5"></div>
+					<div class="pictrue-box">
+						<div v-viewer v-if="row.refund_img" v-for="(item, index) in row.refund_img || []" :key="index">
+							<img class="pictrue mr10" v-lazy="item" :src="item" />
+						</div>
+					</div>
+				</template>
+				<template slot-scope="{ row, index }" slot="statusGoodName">
+					<div v-html="row.refund_goods_explain" class="pt5"></div>
+					<div class="pictrue-box">
+						<div v-viewer v-if="row.refund_goods_img" v-for="(item, index) in row.refund_goods_img || []"
+							:key="index">
+							<img class="pictrue mr10" v-lazy="item" :src="item" />
+						</div>
+					</div>
+				</template>
+				<template slot-scope="{ row, index }" slot="action">
+					<a @click="changeMenu(row, 1)" v-show="[1].includes(row.refund_status)">通过</a>
+					<Divider type="vertical" v-show="[1].includes(row.refund_status)"/>
+					<a @click="changeMenu(row, 0)">拒绝</a>
+				</template>
+			</Table>
+			<div class="acea-row row-right page">
+				<Page :total="total" :current="pagination.page" show-elevator show-total @on-change="pageChange"
+					:page-size="pagination.limit" />
+			</div>
+		</Card>
+		<!-- 编辑 退款 退积分 不退款-->
+		<edit-from ref="edits" :FromData="FromData" @submitFail="submitFail"></edit-from>
+		<!-- 详情 -->
+		<details-from ref="detailss" :orderDatalist="orderDatalist" :orderId="orderId"
+			:rowActive="rowActive"></details-from>
+		<!-- 备注 -->
+		<order-remark ref="remarks" remarkType="refund" :orderId="orderId" @submitFail="submitFail"></order-remark>
+		<!-- 记录 -->
+		<order-record ref="record"></order-record>
+	</div>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex'
+	import {
+		orderRefundList,
+		getDataInfo,
+		getRefundDataInfo,
+		getRefundFrom,
+		getnoRefund,
+		refundIntegral,
+		getDistribution,
+		getRefundOrderFrom,
+		getServeRefund
+	} from '@/api/order'
+	import editFrom from '@/components/from/from'
+	import detailsFrom from '../orderList/components/orderDetails'
+	import orderRemark from '../orderList/components/orderRemark'
+	import orderRecord from '../orderList/components/orderRecord'
+	export default {
+		components: {
+			editFrom,
+			detailsFrom,
+			orderRemark,
+			orderRecord
+		},
+		data() {
+			return {
+				grid: {
+					xl: 7,
+					lg: 7,
+					md: 12,
+					sm: 24,
+					xs: 24,
+				},
+				thead: [{
+						title: '订单号',
+						align: 'center',
+						slot: 'order_id',
+						minWidth: 150,
+					},
+					{
+						title: '用户昵称',
+						key: 'real_name',
+						minWidth: 130,
+					},
+					{
+						title: '用户联系方式',
+						key: 'user_phone',
+						minWidth: 130,
+					},
+					{
+						title: '商品信息',
+						slot: 'info',
+						minWidth: 300,
+					},
+					{
+						title: '实际支付',
+						slot: 'pay_price',
+						minWidth: 70,
+					},
+					{
+						title: '发起退款时间',
+						slot: 'add_time',
+						minWidth: 100,
+					},
+					{
+						title: '退款状态',
+						slot: 'refund_status',
+						minWidth: 100,
+					},
+					// {
+					// 	title: '退款信息',
+					// 	slot: 'statusName',
+					// 	minWidth: 100,
+					// },
+					// {
+					// 	title: '退货信息',
+					// 	slot: 'statusGoodName',
+					// 	minWidth: 100,
+					// },
+					// {
+					// 	title: '售后备注',
+					// 	key: 'remark',
+					// 	minWidth: 80,
+					// },
+					{
+						title: '操作',
+						slot: 'action',
+						// fixed: "right",
+						minWidth: 150,
+						align: 'center',
+					},
+				],
+				tbody: [],
+				num: [],
+				orderDatalist: null,
+				loading: false,
+				FromData: null,
+				total: 0,
+				orderId: 0,
+				animal: 1,
+				pagination: {
+					page: 1,
+					limit: 15,
+					refund_status: 1,
+					order_id: '',
+					time: '',
+					refund_type: 0,
+				},
+				options: {
+					shortcuts: [{
+							text: '今天',
+							value() {
+								const end = new Date()
+								const start = new Date()
+								start.setTime(
+									new Date(
+										new Date().getFullYear(),
+										new Date().getMonth(),
+										new Date().getDate()
+									)
+								)
+								return [start, end]
+							},
+						},
+						{
+							text: '昨天',
+							value() {
+								const end = new Date()
+								const start = new Date()
+								start.setTime(
+									start.setTime(
+										new Date(
+											new Date().getFullYear(),
+											new Date().getMonth(),
+											new Date().getDate() - 1
+										)
+									)
+								)
+								end.setTime(
+									end.setTime(
+										new Date(
+											new Date().getFullYear(),
+											new Date().getMonth(),
+											new Date().getDate() - 1
+										)
+									)
+								)
+								return [start, end]
+							},
+						},
+						{
+							text: '最近7天',
+							value() {
+								const end = new Date()
+								const start = new Date()
+								start.setTime(
+									start.setTime(
+										new Date(
+											new Date().getFullYear(),
+											new Date().getMonth(),
+											new Date().getDate() - 6
+										)
+									)
+								)
+								return [start, end]
+							},
+						},
+						{
+							text: '最近30天',
+							value() {
+								const end = new Date()
+								const start = new Date()
+								start.setTime(
+									start.setTime(
+										new Date(
+											new Date().getFullYear(),
+											new Date().getMonth(),
+											new Date().getDate() - 29
+										)
+									)
+								)
+								return [start, end]
+							},
+						},
+						{
+							text: "上月",
+							value() {
+								const end = new Date();
+								const start = new Date();
+								const day = new Date(start.getFullYear(), start.getMonth(), 0).getDate();
+								start.setTime(
+									start.setTime(
+										new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1)
+									)
+								);
+								end.setTime(
+									end.setTime(
+										new Date(new Date().getFullYear(), new Date().getMonth() - 1, day)
+									)
+								);
+								return [start, end];
+							},
+						},
+						{
+							text: '本月',
+							value() {
+								const end = new Date()
+								const start = new Date()
+								start.setTime(
+									start.setTime(
+										new Date(new Date().getFullYear(), new Date().getMonth(), 1)
+									)
+								)
+								return [start, end]
+							},
+						},
+						{
+							text: '本年',
+							value() {
+								const end = new Date()
+								const start = new Date()
+								start.setTime(
+									start.setTime(new Date(new Date().getFullYear(), 0, 1))
+								)
+								return [start, end]
+							},
+						},
+					],
+				},
+				timeVal: [],
+				modal: false,
+				qrcode: null,
+				name: '',
+				spin: false,
+				rowActive: {},
+			}
+		},
+		computed: {
+			...mapState('order', ['orderChartType']),
+			// ...mapState("admin/layout", ["isMobile"]),
+			labelWidth() {
+				return this.isMobile ? undefined : 75
+			},
+			labelPosition() {
+				return this.isMobile ? 'top' : 'right'
+			},
+		},
+		created() {
+			this.getOrderList()
+		},
+		methods: {
+			showTime(time) {
+				var date = new Date(time * 1000);
+				var year = date.getFullYear(); // 获取年份
+				var month = ("0" + (date.getMonth() + 1)).slice(-2); // 获取月份（注意月份从 0 开始，需要加 1）
+				var day = ("0" + date.getDate()).slice(-2); // 获取日期
+				var hours = ("0" + date.getHours()).slice(-2); // 获取小时
+				var minutes = ("0" + date.getMinutes()).slice(-2); // 获取分钟
+				var seconds = ("0" + date.getSeconds()).slice(-2); // 获取秒钟
+				var dateString = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; // 自定义时间格式
+				return dateString
+			},
+			showPrice(list) {
+				let price = 0;
+				list.forEach(item => {
+					price += item.pay_price * 1
+				})
+				return price
+			},
+			onchangeCode(e) {
+				this.animal = e
+				this.qrcodeShow()
+			},
+			// 具体日期搜索()；
+			onchangeTime(e) {
+				this.pagination.page = 1
+				this.timeVal = e
+				this.pagination.time = this.timeVal[0] ? this.timeVal.join('-') : ''
+				this.getOrderList()
+			},
+			// 操作
+			changeMenu(row, name) {
+				let titile;
+				if(name == 1) {
+					titile = '通过该退款审核？'
+				}else {
+					titile = '拒绝该退款审核？'
+				}
+				this.delfromData = {
+					title: titile,
+					url: `/refund/agree/${id}`,
+					method: 'get',
+				}
+			},
+			// 获取退款表单数据
+			getRefundData(id, refund_type) {
+				if (refund_type == 2) {
+					this.delfromData = {
+						title: '立即退货',
+						url: `/refund/agree/${id}`,
+						method: 'get',
+					}
+					this.$modalSure(this.delfromData)
+						.then((res) => {
+							this.$Message.success(res.msg)
+							this.getOrderList()
+							this.getData(this.orderId, 1)
+						})
+						.catch((res) => {
+							this.$Message.error(res.msg)
+						})
+				} else {
+					this.$modalForm(getRefundOrderFrom(id)).then(() => {
+						this.getOrderList()
+						this.getData(this.orderId, 1)
+						this.$emit('changeGetTabs')
+					})
+				}
+			},
+			// 获取退积分表单数据
+			getRefundIntegral(id) {
+				refundIntegral(id)
+					.then(async (res) => {
+						this.FromData = res.data
+						this.$refs.edits.modals = true
+					})
+					.catch((res) => {
+						this.$Message.error(res.msg)
+					})
+			},
+
+			// 获取详情表单数据
+			getData(id, type) {
+				getRefundDataInfo(id)
+					.then(async (res) => {
+						if (!type) {
+							this.$refs.detailss.modals = true
+						}
+						this.$refs.detailss.activeName = 'detail'
+						this.orderDatalist = res.data
+						// if (this.orderDatalist.orderInfo.refund_reason_wap_img) {
+						//   try {
+						//     this.orderDatalist.orderInfo.refund_reason_wap_img = JSON.parse(
+						//       this.orderDatalist.orderInfo.refund_reason_wap_img
+						//     );
+						//   } catch (e) {
+						//     this.orderDatalist.orderInfo.refund_reason_wap_img = [];
+						//   }
+						// }
+					})
+					.catch((res) => {
+						this.$Message.error(res.msg)
+					})
+			},
+			// 删除单条订单
+			delOrder(row, data) {
+				if (row.is_del === 1) {
+					this.$modalSure(data)
+						.then((res) => {
+							this.$Message.success(res.msg)
+							this.getOrderList()
+						})
+						.catch((res) => {
+							this.$Message.error(res.msg)
+						})
+				} else {
+					const title = '错误！'
+					const content =
+						'<p>您选择的的订单存在用户未删除的订单，无法删除用户未删除的订单！</p>'
+					this.$Modal.error({
+						title: title,
+						content: content,
+					})
+				}
+			},
+			// 修改成功
+			submitFail() {
+				this.getOrderList()
+				this.getData(this.orderId, 1)
+			},
+			// 订单选择状态
+			selectChange2(tab) {
+				this.pagination.page = 1
+				this.pagination.refund_type = tab
+				this.getOrderList(tab)
+			},
+			// 不退款表单数据
+			getNoRefundData(id) {
+				this.$modalForm(getnoRefund(id)).then(() => {
+					this.getOrderList()
+					this.getData(this.orderId, 1)
+					this.$emit('changeGetTabs')
+				})
+			},
+			// 订单列表
+			getOrderList() {
+				this.loading = true
+				getServeRefund(this.pagination)
+					.then((res) => {
+						this.loading = false
+						const {
+							count,
+							list,
+							num
+						} = res.data
+						this.total = count
+						this.tbody = list
+						num.forEach((item, index) => {
+							num[index] = ((Object.assign({}, item, {
+								value: index
+							})))
+
+						})
+						this.num = num
+						list.forEach((item) => {
+							if (item.id == this.orderId) {
+								this.rowActive = item
+							}
+						})
+					})
+					.catch((err) => {
+						this.loading = false
+						this.$Message.error(err.msg)
+					})
+			},
+			// 分页
+			pageChange(index) {
+				this.pagination.page = index
+				this.getOrderList()
+			},
+			nameSearch() {
+				this.pagination.page = 1
+				this.getOrderList()
+			},
+			// 订单搜索
+			orderSearch() {
+				this.pagination.page = 1
+				console.log(111)
+				this.getOrderList()
+			},
+			// 配送信息表单数据
+			delivery(row) {
+				getDistribution(row.id)
+					.then(async (res) => {
+						this.FromData = res.data
+						this.$refs.edits.modals = true
+					})
+					.catch((res) => {
+						this.$Message.error(res.msg)
+					})
+			},
+		},
+	}
+</script>
+
+<style lang="stylus" scoped>
+	/deep/.ivu-select-selected-value {
+		font-size: 12px !important;
+	}
+
+	.code {
+		position: relative;
+	}
+
+	.QRpic {
+		width: 180px;
+		height: 259px;
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.search {
+		width: 86px;
+		height: 32px;
+	}
+
+	.tabBox {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+
+		.tabBox_img {
+			width: 36px;
+			height: 36px;
+
+			img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+
+		.tabBox_tit {
+			width: 60%;
+			font-size: 12px !important;
+			margin: 0 2px 0 10px;
+			letter-spacing: 1px;
+			padding: 5px 0;
+			box-sizing: border-box;
+		}
+	}
+
+	.pictrue-box {
+		display: flex;
+		align-item: center;
+	}
+
+	.pictrue {
+		width: 25px;
+		height: 25px;
+	}
+</style>

src/router/modules/order.js

@@ -52,6 +52,15 @@ export default {
 			},
 			component: () => import('@/pages/order/refund/index')
 		},
+		{
+			path: 'serveRefund',
+			name: `${pre}serveRefund`,
+			meta: {
+				auth: ['store-order-serveRefund'],
+				title: '预约退款'
+			},
+			component: () => import('@/pages/order/serveRefund/index')
+		},
 		{
 			path: `${Setting.routePre}/recharge/index`,
 			name: `${pre}recharge`,