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

<template>
	<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.status" style="width: 250px"
							@on-change="selectChange2(pagination.status)">
							<Option v-for="item in num" :key="item.value" :value="item.value">{{ item.name }}</Option>
						</Select>
					</FormItem>
					</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>
					</FormItem>
					</Col>
					<Col class="ivu-text-left mr">
					<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>
					</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 }" slot="real_name">
					<div>用户名：{{ row.real_name }}()</div>
					<div>手机号：{{ row.user_phone }}</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="kf">
					<span class="tabBox_pice">{{showName(row.work_member_id)}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<a @click="changeMenu(row, 0)" v-if="row.status == 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>
		<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 @getUserId='checkUser'></userlist>
			<template #footer>
				<Button @click="userListShow=false">取消</Button>
			</template>
		</Modal>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getYgList
	} from "@/api/check";
	import {
		getServeOrder,
		member_update
	} from '@/api/order'
	import userlist from "@/components/userList/index";
	export default {
		components: {
			userlist
		},
		data() {
			return {
				// 显示用户列表
				userListShow: false,
				order_id: '',
				ygList: [],
				chooseId: 0,
				modals:false,
				thead: [{
						title: '订单号',
						align: 'center',
						slot: 'order_id',
						minWidth: 160,
					},
					{
						title: '用户信息',
						slot: 'real_name',
						minWidth: 150,
					},
					{
						title: '预约员工',
						slot: 'kf',
						minWidth: 80,
					},
					{
						title: '商品信息',
						slot: 'info',
						minWidth: 300,
					},
					{
						title: '实际支付',
						slot: 'pay_price',
						minWidth: 70,
					},
					{
						title: '下单时间',
						slot: 'add_time',
						minWidth: 130,
					},
					{
						title: '操作',
						slot: 'action',
						fixed: "right",
						minWidth: 150,
						align: 'center',
					},
				],
				tbody: [],
				num: [{
						name: '待服务',
						value: 0
					},
					{
						name: '已完成',
						value: 2
					}, {
						name: '退款',
						value: -1
					},
				],
				loading: false,
				total: 0,
				pagination: {
					page: 1,
					limit: 15,
					work_member_id:'',
					order_id:'',
					uid: '',
					status: 0,
				},
			}
		},
		computed: {
			labelWidth() {
				return this.isMobile ? undefined : 75
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'right'
			},
		},
		created() {
			this.getOrderList()
			this.getygList()
		},
		methods: {
			// 选中用户
			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
				})
				return yg? yg.name: ''
			},
			getygList() {
				getYgList({
					page: 1,
					limit: 1000
				}).then(res => {
					console.log(res)
					this.ygList = res.data.list
				})
			},
			cancal() {
				this.modals = false
			},
			goCancal() {
				if(this.chooseId == '' ) {
					return this.$Message.error('请选择员工')
				}
				this.modals = false
				member_update({
					id: this.order_id,
					work_member_id: this.chooseId
				}).then(res => {
					this.$Message.success(res.msg)
					this.getOrderList()
				}).catch(err => {
					this.$Message.error(err.msg)
				})
				
			},
			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
			},
			// 订单选择状态
			selectChange2(tab) {
				this.pagination.page = 1
				this.pagination.refund_status = tab
				this.getOrderList(tab)
			},
			// 订单列表
			getOrderList() {
				this.loading = true
				getServeOrder(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
					})
					.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>
	/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>