jztStore/src/pages/order/serveRefund/index.vue

<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>