front-end/admin-update/src/views/order/list.vue

<template>
	<div class="app-list-content">
		<cl-crud class="liu-crud-wrap order-list-wrap" @load="onLoad">
			<!-- tabs -->
			<template #slot-tabs="{ scope }">
				<el-tabs
					class="liu-tabs"
					type="border-card"
					v-model="tabIndex"
					@tab-click="handleClick"
				>
					<el-tab-pane
						v-for="(item, index) in tabsData"
						:key="index"
						:label="`${item.text}(${item.val})`"
						:name="item.key"
					></el-tab-pane>
				</el-tabs>
			</template>

			<!-- 单号 -->
			<template #table-column-orderSn="{scope}">
                <el-link :underline="false" @click="detailShowFn(scope.row)" style="font-size:12px;">{{ scope.row.orderSn}}</el-link>
			</template>

			<!-- 订花人 -->
			<template #table-column-bookName="{scope}">
				<div class="book-wrap">
					<cl-avatar
						shape="circle"
						:size="20"
						:src="scope.row.bookAvatar"
					></cl-avatar>
					<div>{{ scope.row.bookName }}</div>
				</div>
			</template>

			<!-- 订花人手机号 -->
			<template #table-column-bookMobile="{scope}">
					<div v-if="scope.row.bookMobile == ''">-</div>
					<div v-else>{{ scope.row.bookMobile }}</div>
			</template>

			<!-- 收花人 -->
			<template #table-column-receiveUserName="{scope}">
					<div v-if="scope.row.receiveUserName == ''">-</div>
					<div v-else>{{ scope.row.receiveUserName }}</div>
			</template>

			<!-- 收花人电话 -->
			<template #table-column-receiveMobile="{scope}">
                <div v-if="scope.row.receiveMobile == ''">-</div>
                <div v-else>{{ scope.row.receiveMobile }}</div>
			</template>

			<!-- 状态 -->
			<template #table-column-status="{scope}">
				<el v-if="scope.row.status == 1">待配送</el>
				<el v-else-if="scope.row.status == 2"
					>配送中</el
				>
				<el v-else-if="scope.row.status == 3"
					>待通知</el
				>
				<el v-else-if="scope.row.status == 4"
					>已取消</el
				>
				<el v-else-if="scope.row.status == 5"
					>已完成</el
				>
				<el v-else>待付款</el>
			</template>

			<!-- 进度 -->
			<template #table-column-currentFlow="{scope}">
				<div class="steps-wrap">
					<el-steps
						:space="180"
						:active="parseInt(scope.row.currentFlow)"
						finish-status="success"
						size="mini"
						align-center=true
					>
						<el-step
							title=""
							v-for="(item, index) in parseInt(5)"
							:key="index"
						></el-step>
					</el-steps>
				</div>
				<!-- <div>{{ scope.row.currentFlow }}</div> -->
			</template>

			<!-- 操作 -->
			<!-- 发货 -->
			<template #slot-column-option="{scope}">
				<template v-if="scope.row.status == 0">
					<el-button type="text" size="small" disabled>自取</el-button>
					<el-button type="text" size="small" disabled>发货</el-button>
				</template>

				<template v-else-if="['4','5','6'].indexOf(scope.row.status) != -1">
				</template>
				<template v-else>

                                <template v-if="scope.row.currentFlow == 0">
                					<el-button type="text" size="small" @click="noSendShipFn(scope.row)"
                						>自取</el-button
                					>
                					<el-button type="text" size="small" @click="shipDrawFn(scope.row)"
                						>发货</el-button
                					>
                				</template>
                				<template v-else>
                									<el-button type="text" size="small" @click="shipDrawFn(scope.row)"
                                						>继续</el-button
                                					>
				                </template>


				</template>
			</template>
		</cl-crud>
		<!-- 用户详情 -->
		<order-detail ref="orderDetail" :orderOperate="optionData" />
		<!-- 发货状态 -->
		<sel-order ref="selOrder" :orderData="optionData" />
	</div>
</template>

<script>
import SelOrder from './components/sel-order';
import OrderDetail from './components/order-detail';
export default {
	components: {
		SelOrder,
		OrderDetail
	},
	data() {
		return {
			// cl-crud
			app: null,
			tabIndex: '-1',
			tabsData: [
				{
					text: '全部',
					key: '-1',
					val: 0
				},
				{
					text: '待付款',
					key: '0',
					val: 0
				},
				{
					text: '待配送',
					key: '1',
					val: 0
				},
				{
					text: '配送中',
					key: '2',
					val: 0
				},
				{
					text: '已完结',
					key: '5',
					val: 0
				}
			],
			// dialog
			optionData: {}
			// drawer
			// 详情drawer
			// shipData: []
		};
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			this.$store.dispatch('getCategory');
			this.$store.dispatch('getUsage');
		},
		// drawer
		noSendShipFn(item) {
			this.$confirm('确认不需要发货？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$service.order.freeShipping({ id: item.id }).then(res => {
						this.$message.success('操作成功！');
						item.currentFlow = 1;
					});
				})
				.catch(() => {});
		},
		shipDrawFn(item) {
			this.optionData = item;
			setTimeout(() => {
				this.$refs.selOrder.init();
			});
		},
		// 详情 drawer
		detailShowFn(item) {
			this.optionData = item;
			setTimeout(() => {
				this.$refs.orderDetail.init();
			});
		},
		// dialog
		// crud
		handleClick(tab, e) {
			console.log(tab, e);
			this.app.refresh({ status: this.tabIndex });
		},
		onLoad({ ctx, app }) {
			this.app = app;
			ctx.service(this.$service.order)
				.set('table', {
					columns: [
						// {
						// 	type: 'selection',
						// 	align: 'center',
						// 	width: '60'
						// },
						{
							prop: 'orderSn',
							label: '单号',
							align: 'center',
							width: '240'
						},
						{
							prop: 'bookName',
							label: '订花人',
							align: 'center',
							width: '120'
						},
                        {
                            prop: 'bookMobile',
                            label: '手机号',
                            align: 'center',
                            width: '110'
                        },
						{
							prop: 'receiveUserName',
							label: '收花人',
							align: 'center',
							width: '100'
						},
						{
							prop: 'receiveMobile',
							label: '手机号',
							align: 'center',
							width: '110'
						},
						{
							prop: 'prePrice',
							label: '总价',
							align: 'center'
						},
						{
							prop: 'actPrice',
							label: '实付款',
							align: 'center',
							emptyText: '无',
							'min-width': 100
						},
                        {
                            prop: 'sendNum',
                            label: '编号',
                            align: 'center',
                            width: 80
                        },
						{
							prop: 'currentFlow',
							label: '进度',
							align: 'center',
							width: 180
						},
						{
							prop: 'status',
							label: '状态',
							align: 'center'
						},
						{
							prop: 'reachTime',
							label: '送达时间',
							align: 'center'
						},
                        {
                            prop: 'reachTime',
                            label: '通知送到',
                            align: 'center'
                        },
					],

					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					},
					op: {
						visible: true, // 是否显示
						// 同 element-ui Table-column Attributes
						props: {
							width: 150,
							align: 'center',
							fixed: 'right',
							label: '操作'
						},
						// 布局，请移步 `layout`
						layout: ['slot-column-option']
					}
				})
				.set('search', {
					key: { placeholder: '订单号 / 订花人手机号' }
				})
				.set('layout', [
					['slot-tabs'],
					['search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					// 继续执行刷新
					let { asset } = await next(params);
					this.tabsData[0].val = asset.totalOrder;
					this.tabsData[1].val = asset.unPayOrder;
					this.tabsData[2].val = asset.unSendOrder;
					this.tabsData[3].val = asset.sendingOrder;
					this.tabsData[4].val = asset.finishOrder;
				})
				.done();
			app.refresh({ status: this.tabIndex });
		}
	}
};
</script>
<style lang="scss" scoped>
.book-wrap {
	@include disFlex(center, flex-start);
	& > div {
		margin-left: 6px;
		&:first-child {
			margin-left: 0;
		}
	}
}
.steps-wrap {
	width: 150px;
	// height: 26px;
	margin:0 auto;
}
</style>

<style lang="scss">
.order-list-wrap {
	.el-step__head.is-process {
		color: #21bc88;
		border-color: #21bc88;
		.el-step__icon.is-text {
			background-color: #21bc88;
		}
	}
	.el-step__head.is-success {
		color: #3385ff;
		border-color: #3385ff;
		.el-step__icon.is-text {
			background-color: #3385ff;
			font-size:1px;
		}
		.el-step__line {
			background-color: #3385ff;
			.el-step__line-inner{
			    display:inline-block;
			}
		}
	}
	.el-step__head.is-wait {
		.el-step__icon.is-text {
			background-color: #c0c4cc;
		}
	}
	.el-step__icon-inner{
	    font-size:1px;
	}
	.el-step__icon {
		width: 10px;
		height: 10px;
	}
	.el-step.is-horizontal .el-step__line {
		height: 1px;
		left: 16px;
		right: -16px;
		top: 10px;
	}

}

</style>