jztAdmin/src/pages/order/three/index.vue

<template>
	<!-- 订单-售后订单 -->
	<div>
		<!-- <Card :bordered="false" dis-hover class="ivu-mt" :padding="0">
			<div class="new_card_pd">
				<Form ref="pagination" inline :model="pagination" :label-width="labelWidth"
					:label-position="labelPosition" @submit.native.prevent>
					<FormItem label="支付状态：">
						<Select v-model="pagination.paid" class="input-add">
							<Option v-for="(item, index) in num" :value="item.value" :key="index">{{ item.name }}
							</Option>
						</Select>
					</FormItem>
					<FormItem label="员工ID：" label-for="title">
						<div class='flex-search'>
							<Input v-model="pagination.work_member_id" icon="ios-search" @on-click='openmid'
								placeholder="请输入员工ID" class="input-add mr14" />
						</div>
					</FormItem>
					<FormItem label="用户ID：" label-for="title">
						<div class='flex-search'>
							<Input v-model="pagination.uid" icon="ios-search" @on-click='openuid' placeholder="请输入用户ID"
								class="input-add mr14" />
						</div>
					</FormItem>

					<FormItem label="订单搜索：" label-for="title">
						<Input v-model="pagination.order_id" placeholder="请输入订单号" class="input-add mr14" />
						<Button type="primary" @click="orderSearch()">查询</Button>
					</FormItem>
				</Form>
			</div>
		</Card> -->
		<Card :bordered="false" dis-hover class="ivu-mt">
			<!-- 售后订单表格 -->
			<Table :columns="thead" :data="tbody" ref="table" :loading="loading" highlight-row no-userFrom-text="暂无数据"
				no-filtered-userFrom-text="暂无筛选结果">
				<template slot-scope="{ row }" slot="order_id">
					<span v-text="row.order_id" style="display: block"></span>
					<span v-show="row.is_del === 1 && row.delete_time == null" class="span-del">用户已删除</span>
				</template>
				<template slot-scope="{ row }" slot="nickname">
					<div>姓名：{{ row.real_name }}</div>
					<div>充值号码：{{ row.rechargeno }}</div>
				</template>
				<template slot-scope="{ row, index }" slot="kf">
					<span class="tabBox_pice">{{showName(row.work_member_id)}}</span>
				</template>
				<template slot-scope="{ row }" slot="goods_name">
					<div class="tabBox_serve" >
						{{row.goods_name}} ( {{row.pay_price}} )
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="pay_price">
					<span class="tabBox_pice">{{row.pay_price}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="reservation_time">
					<span class="tabBox_pice">{{showTime(row.reservation_time)}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="status">
					<div class="tabBox_serve" v-if="row.status==0">
						待下单
					</div>
					<div class="tabBox_serve" v-if="row.status==1">
						未充值
					</div>
					<div class="tabBox_serve" v-if="row.status==2">
						已充值
					</div>
					<div class="tabBox_serve" v-if="row.status== -1">
						已取消
					</div>
				</template>
				<template slot-scope="{ row }" slot="pay_type">
					<div class="tabBox_serve" v-if="row.pay_type=='weixin'">
						微信
					</div>
					<div class="tabBox_serve" v-if="row.pay_type=='yue'">
						余额
					</div>
					<div class="tabBox_serve" v-if="row.pay_type=='offline'">
						线下
					</div>
					<div class="tabBox_serve" v-if="row.pay_type=='alipay'">
						支付宝
					</div>
					<div class="tabBox_serve" v-if="row.pay_type=='cash'">
						现金
					</div>
				</template>
				<template slot-scope="{ row }" slot="paid">
					<div class="tabBox_serve" v-if="row.paid==0" style="color: red;">
						未支付
					</div>
					<div class="tabBox_serve" v-if="row.paid==1" style="color: #57a3f3;">
						已支付
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="add_time">
					<span class="tabBox_pice">{{showTime(row.add_time)}}</span>
				</template>
				<template slot-scope="{ row }" slot="action">
					<a @click="changeMenu(row)">修改状态</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>
		<Modal v-model="modals" scrollable title="修改订单状态" class="order_box" :closable="false">
			<Form :label-width="80">
				<FormItem label="订单状态：" prop="chooseId">
					<Select v-model="chooseId" style="width: 250px">
						<Option v-for="item in ygList" :key="item.id" :value="item.id">{{ item.name }}</Option>
					</Select>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button type="primary" @click="goCancal">提交</Button>
				<Button @click="cancal">取消</Button>
			</div>
		</Modal>
		<Modal v-model="userListShow" width='80' mask title="用户选择">
			<userlist @imageObject='checkUser'></userlist>
			<template #footer>
				<Button @click="userListShow=false">取消</Button>
			</template>
		</Modal>
		<Modal v-model="memberListShow" width='80' mask title="员工选择">
			<staffList @getProductId='checkmember'></staffList>
			<template #footer>
				<Button @click="memberListShow=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>

<script>
	import {
		mapState
	} from "vuex";
	import {
		getServeOrder,
		member_update,
		active_refund_order,
		getRechargeList,
		getRechargeOrderList,
		completeOrderLst,
		deleteOrderLst
	} from "@/api/order";
	import {
		getYgList
	} from "@/api/store"
	import {
		erpConfig
	} from "@/api/erp";
	import userlist from "@/components/customerInfo/index";
	import staffList from "@/components/staffList/index";
	export default {
		components: {
			userlist,
			staffList
		},
		data() {
			return {
				delModel: false,
				delData: {
					id: '',
					remarks: ''
				},
				memberListShow: false,
				// 显示用户列表
				userListShow: false,
				modals: false,
				order_id: '',
				ygList: [],
				chooseId: 0,
				openErp: false,
				thead: [
					{
						title: "id",
						align: "center",
						key: "id",
						minWidth: 160,
					},
					{
						title: "用户信息",
						slot: "nickname",
						minWidth: 140,
					},
					{
						title: "商品信息",
						slot: "goods_name",
						minWidth: 250,
					},
					{
						title: "支付金额",
						slot: "pay_price",
						minWidth: 70,
					},
					{
						title: "支付方式",
						slot: "pay_type",
						minWidth: 80,
					},
					{
						title: "支付状态",
						slot: "paid",
						minWidth: 70,
					},
					{
						title: "状态",
						slot: "status",
						minWidth: 80,
					},
					{
						title: "下单时间",
						key: "create_time",
						minWidth: 130,
					},
					{
						title: "操作",
						slot: "action",
						fixed: "right",
						minWidth: 150,
						align: "center",
					},
				],
				tbody: [],
				num: [{
						name: '待支付',
						value: 0
					},
					{
						name: '已支付',
						value: 1
					}
				],
				loading: false,
				total: 0,
				pagination: {
					page: 1,
					limit: 15,
					order_id: "",
					time: "",
					status: 0,
					uid: '',
					work_member_id: ''
				},
			};
		},
		computed: {
			labelWidth() {
				return this.isMobile ? undefined : 96;
			},
			labelPosition() {
				return this.isMobile ? "top" : "right";
			},
		},
		created() {
			this.getYgList()
			this.getOrderList();
			this.getRechargeList()
			this.getRechargeOrderList()
		},
		methods: {
			getRechargeList() {
				getRechargeList().then(res => {
					console.log(res)
				})
			},
			getRechargeOrderList() {
				getRechargeOrderList().then(res => {
					console.log(res)
				})
			},
			delConfirm(row) {
				const that = this;
				that.delModel = false;
				that.$Modal.confirm({
					title: "确认删除",
					content: '<p>确定删除吗？</p><p>删除后将无法恢复，请谨慎操作！</p>',
					onOk: () => {
						console.log('进入');
						setTimeout(function() {
							that.$Modal.remove();
							deleteOrderLst({
								goods_id: row.id
							}).then((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;
			},
			// 打开弹窗
			openmid(e) {
				this.memberListShow = true;
			},
			// 选中员工
			checkmember(res) {
				let data = res[0];
				this.memberListShow = false;
				this.pagination.work_member_id = data.id;
			},
			// 选中用户
			checkUser(res) {
				this.userListShow = false;
				this.pagination.uid = res.uid;
			},
			// 打开弹窗
			openuid(e) {
				this.userListShow = true;
			},
			showName(id) {
				let yg = this.ygList.find(item => {
					return item.id == id
				})
				// console.log(yg,'ygygygyg')
				return yg ? yg.name : ''
			},
			getYgList() {
				// getYgList({
				// 	page: 1,
				// 	limit: 1000
				// }).then(res => {
				// 	this.ygList = res.data.list
				// })
				this.ygList = [
					{
						name: '待下单',
						id: 0
					},
					{
						name: '未充值',
						id: 1
					},
					{
						name: '已充值',
						id: 2
					},
					{
						name: '已取消',
						id: -1
					}
				]
				
			},
			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.toFixed(2)
			},
			// 操作
			changeMenu(row, name) {
				this.modals = true
				this.order_id = row.id
			},
			cancal() {
				this.modals = false
			},
			getygList() {
				getYgList().then(res => {
					console.log(res)
					this.ygList = res.data.list
				})
			},
			goCancal() {
				if (this.chooseId == '') {
					return this.$Message.error('请选择订单状态')
				}
				this.modals = false
				completeOrderLst({
					id: this.order_id,
					status: this.chooseId
				}).then(res => {
					this.$Message.success(res.msg)
					this.getOrderList()
				}).catch(err => {
					this.$Message.error(err.msg)
				})

			},
			// 订单列表
			getOrderList() {
				this.loading = true;
				getRechargeOrderList(this.pagination)
					.then((res) => {
						this.loading = false;
						const {
							count,
							list,
							num
						} = res.data;
						this.total = count;
						this.tbody = list;
					})
					.catch((err) => {
						this.loading = false;
						this.$Message.error(err.msg);
					});
			},
			// 分页
			pageChange(index) {
				this.pagination.page = index;
				this.getOrderList();
			},
			// 订单搜索
			orderSearch() {
				this.pagination.page = 1;
				this.getOrderList();
			},
		},
	};
</script>

<style lang="stylus" scoped>
	.span-del {
		color: #ed4014;
		display: block
	}

	.code {
		position: relative;
	}

	.QRpic {
		width: 180px;
		height: 259px;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.tabBox {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tabRow {
			width: 0;
			flex-grow: 1;
			display: flex;
		}

		.tabBox_serve {
			flex-shrink: 0;
			padding-left: 5px;
		}

		.tabBox_content {
			width: 0;
			flex-grow: 1;
			padding-left: 5px;
		}

		.tabBox_pice {
			flex-shrink: 0;
		}

		.tabBox_img {
			width: 30px;
			height: 30px;
			flex-shrink: 0;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.tabBox_tit {
			flex-grow: 1;
			font-size: 12px !important;
			letter-spacing: 1px;
			box-sizing: border-box;
		}
	}

	.tabBox+.tabBox {
		margin-top: 5px;
	}

	.pictrue-box {
		display: flex;
		align-item: center;
	}

	.pictrue {
		width: 25px;
		height: 25px;
	}

	.flex-search {
		display: flex;
	}
</style>