pxx-pc/src/views/order/orderList.vue

<template>
	<div class="order-wrapper">
		<!-- <breadcrumb :item-name="['订单管理', '订单列表']"></breadcrumb> -->
		<div class="empty-order" v-if="orderToken.length == 0">
			<div class="dr-wrap hand">
				<i class="el-icon-document dr-icon"></i>
				<div class="dr-tit">点击上传token获取订单</div>
				<input type="file" ref="fileInput" @change="readTxtFile('fileInput')" class="dr-int" />
			</div>
		</div>
		<el-card v-else>
			<!-- 搜索区域 -->
			<el-row>
				<el-col>
					<div class="flex" style="justify-content: flex-end;padding-bottom: 20px;">
						<div class="redr">
							<el-button>重新导入</el-button>
							<input type="file" ref="fileInputt" @change="readTxtFile('fileInputt')" class="dr-int" />
						</div>
						<el-button type="primary" @click="oneWork(list)" :loading="yjloading">一键处理订单</el-button>
					</div>
				</el-col>
				<!-- <el-col :span="8">
					<el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select">
						<el-button slot="append" icon="el-icon-search" @click="getList()"></el-button>
					</el-input>
				</el-col> -->
			</el-row>
			<!-- 订单表格区域 -->
			<el-table :data="list" border style="width: 100%" max-height="620">
				<!-- <el-table-column fixed="left" type="selection" width="55">
				</el-table-column> -->
				<el-table-column prop="id" label="id" width="80">
				</el-table-column>
				<el-table-column prop="order_id" label="订单编号" width="200">
				</el-table-column>
				<el-table-column prop="goods_name" label="商品名称" width="200">
					<template slot-scope="scope">
						<span>{{scope.row.goods_name.length > 10 ?  (scope.row.goods_name.substr(0, 10) + '...') : scope.row.goods_name}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="sys_address" label="是否系统默认" width="170">
					<template slot-scope="scope">
						<span
							:style="{'color': (scope.row.sys_address == 1 || scope.row.sys_phone == 1 )? '': '#67c23a'}">{{(scope.row.sys_address == 1 || scope.row.sys_phone == 1 )? '是': '否'}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="订单状态" width="170">
					<template slot-scope="scope">
						{{scope.row.status| showStatus}}
					</template>
				</el-table-column>
				<el-table-column prop="consignee_name" label="收货人" width="200">
				</el-table-column>
				<el-table-column prop="consignee_phone" label="收货手机号" width="200">
				</el-table-column>
				<el-table-column prop="consignee_address" label="收货地址" width="350">
				</el-table-column>
				<el-table-column prop="pay_price" label="支付金额(元)" width="150">
				</el-table-column>
				<el-table-column prop="commission" label="手续费(元)" width="150">
				</el-table-column>
				<el-table-column prop="compensation" label="赔付金额(元)" width="150">
					<template slot-scope="scope">
						{{scope.row.status == 5 ? scope.row.compensation: ''}}
					</template>
				</el-table-column>
				<!-- <el-table-column prop="token" label="Token" width="350">
				</el-table-column> -->
				<!-- <el-table-column prop="status" label="是否已使用">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.status == 0">待使用</el-tag>
						<el-tag type="info" v-if="scope.row.status == 1">已使用</el-tag>
					</template>
				</el-table-column> -->
				<el-table-column prop="createtime" label="创建时间" width="300">
					<template slot-scope="scope">
						{{showTime(scope.row.createtime)}}
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="250">
					<template slot-scope="scope">
						<div class="flex"
							style="width: 250px;justify-content: center;align-items: center;flex-direction: column;">
							<i class="el-icon-loading" style="font-size: 30px;" v-if="scope.row.loading"></i>
							<div class="flex">
								<el-button v-if="scope.row.status > 2"
									@click="getExpressDelivery(scope.row)">查看物流</el-button>
								<!-- showBtn -->
								<template v-if="scope.row.status <= 4">
									<el-button v-if="showBtn(scope.row.refund_time_check) && scope.row.status > 2"
										@click="handleOrder('您确定立即申请退货？',scope.row)" type="primary">退货</el-button>
									<el-button v-else type="danger">退货</el-button>
								</template>
							</div>


							<el-tag type="danger" v-if="scope.row.tag"
								style="margin-top: 10px;">{{scope.row.tag}}</el-tag>

						</div>

					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.page" :page-sizes="[10, 20, 50, 100]" :page-size="queryInfo.limit"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
		<!-- 修改地址对话框 -->
		<el-dialog title="购买Token" :visible.sync="dialogTableVisible">
			<el-form :model="form">
				<el-form-item label="购买数量" :label-width="formLabelWidth">
					<el-input v-model="form.num" type="number"></el-input>
				</el-form-item>
				<el-form-item label="交易密码" :label-width="formLabelWidth">
					<el-input v-model="form.transaction" type="password"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogTableVisible = false">取 消</el-button>
				<el-button type="primary" @click="goBuy">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="物流进度" :visible.sync="logProgDialogVisible" width="30%">
			<el-timeline>
				<el-timeline-item v-for="(activity, index) in logProgInfo" :key="index" :timestamp="activity.time">
					{{ activity.context }}
				</el-timeline-item>
			</el-timeline>
		</el-dialog>
		<div class="mb" v-if="yjloading"></div>
	</div>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		createCode,
		getCodeList,
		createToken,
		getTokenList,
		getExpressDelivery
	} from '@/request/agent.js'
	import {
		getOrderList,
		batchOrder
	} from '@/request/user.js'
	import {
		showTime
	} from '@/assets/js/tools.js'
	import {
		Switch
	} from 'element-ui'
	export default {
		name: 'Order',
		data() {
			return {
				today: new Date(new Date().setHours(0,0,0,0)-0*24*60*60*1000).getTime(),
				newTime: new Date().getTime(),
				yjloading: false,
				logProgInfo: [],
				logProgDialogVisible: false,
				loading: false,
				formLabelWidth: '80px',
				form: {
					num: '',
					transaction: ''
				},
				dialogTableVisible: false,
				queryInfo: {
					token: '',
					page: 1,
					limit: 10
				},
				list: [],
				total: 0,
				dataloading: false,
				sqtkitem: {},
				num: 0,
			}
		},
		created() {

		},
		computed: {
			...mapState(['orderToken'])
		},
		mounted() {
			if (this.orderToken.length == 0) {

			} else {
				this.queryInfo.token = this.orderToken.join(',')
				this.getList()
			}
		},
		filters: {
			showStatus(val) {
				let str = ''
				if (val) {
					switch (val) {
						case 0:
							str = '待支付'
							break;
						case 1:
							str = '待发货'
							break;
						case 2:
							str = '待收货'
							break;
						case 3:
							str = '已收货'
							break;
						case 4:
							str = '退款'
							break;
						case 5:
							str = '赔付'
							break;
						case 6:
							str = '结算'
							break;
						case 7:
							str = '结束'
							break;
						default:
							break;
					}
				}
				return str
			}
		},
		methods: {
			...mapMutations(['setOrderToken']),
			showTime,
			showBtn(time) {
				return this.newTime >= time * 1000
			},
			//加载token文件
			readTxtFile(refs) {
				let that = this
				const input = this.$refs[refs]
				const file = input.files[0]

				const reader = new FileReader()
				reader.onload = (e) => {
					let srt = e.target.result.replace(/\n\r/g, ',').replace(/\r\n/g, ',')
					let arr = srt.split(',').filter(item => item !== '')
					that.setOrderToken(arr)
					that.queryInfo.token = that.orderToken.join(',')
					that.getList('reload')
				}
				reader.readAsText(file)
			},
			getExpressDelivery(item) {
				getExpressDelivery({
					code: item.deliverycode,
					sn: item.delivery_sn
				}).then(res => {
					console.log(res);
					this.logProgInfo = res.data.data.map(item => {
						item.time = item.time.split(' ')[1]
						return item
					})
					this.logProgDialogVisible = true
				})
			},
			handleOrder(tit, item) {
				// batchOrder({
				// 	id: item.id,
				// 	status: item.status
				// }).then(res => {
				// 	// console.log(res);
				// 	item.tag = res.msg
				// })
				if (item.loading || this.loading) {
					return
				}

				this.$confirm(tit, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					callback: action => {
						if (action == 'confirm') {
							item.loading = true
							this.loading = true
							batchOrder({
								id: item.id,
							}).then(res => {
								// console.log(res);
								item.loading = false
								item.tag = res.msg
								this.$msg.success('已提交，请等待审核处理')
								this.loading = false
							}).catch(err => {
								item.loading = false
								this.loading = false
							})
						}
					}
				});
			},
			sqlp(item) {

			},
			oneWork(arr, i = 0) {
				// batchOrder({
				// 	id: 0
				// }).then(res => {
				// 	this.$msg.success(res.msg)
				// 	this.getList()
				// })
				console.log('ddd');
				let that = this
				that.yjloading = true
				if (i < arr.length) {
					if(arr[i].lasttime*1000 > this.today) {
						++this.num
					}
					if (arr[i].status < 5 && arr[i].lasttime*1000 < this.today) {
						if (arr[i].loaded) {
							that.oneWork(arr, ++i)
						} else {
							arr[i].loading = true
							setTimeout(() => {

								batchOrder({
									id: arr[i].id,
									status: arr[i].status
								}).then(res => {
									arr[i].tag = res.msg
									arr[i].loading = false
									arr[i].loaded = true
									that.oneWork(arr, ++i)
								}).catch(err => {
									console.log(i);
									arr[i].loading = false
									that.yjloading = false
								})
							}, 2000)
						}
					} else {
						that.oneWork(arr, ++i)
					}
				} else {
					that.yjloading = false
					console.log(that.num);
					if(that.num != that.list.length) {
						that.num = 0
						this.getList('yjcl')
					}else {
						that.$msg.success('一键处理完成')
					}
				}
			},
			handleSelectionChange(val) {
				console.log(val);
			},
			openBuy() {
				this.dialogTableVisible = true
			},
			goBuy() {
				let that = this
				if (that.loading) {
					return
				}
				if (!that.form.num) {
					return that.$msg.error('请输入购买数量')
				}
				if (!that.form.transaction) {
					return that.$msg.error('请输入交易密码')
				}
				that.loading = true
				createToken(that.form).then(res => {
					console.log(res);
					that.$msg.success('购买成功')
					that.dialogTableVisible = false
					that.loading = false
					that.getList('reload')
				}).catch(err => {
					that.loading = false
				})
			},
			getList(type) {
				let that = this
				if (that.dataloading) {
					return
				}
				if (type == 'reload') {
					that.queryInfo.page = 1
				}
				that.dataloading = true
				getOrderList(that.queryInfo).then(res => {
					that.total = res.data.count
					that.list = res.data.data.map(item => {
						item.loading = false
						item.loaded = false
						return item
					})
					that.dataloading = false
					if (type == 'yjcl') {
						that.oneWork(this.list)
					}
				}).catch(err => {
					that.dataloading = false
				})
			},
			handleSizeChange(newPageSize) {
				this.queryInfo.limit = newPageSize
				this.queryInfo.page = 1
				this.getList()
			},
			handleCurrentChange(newPageNum) {
				this.queryInfo.page = newPageNum
				this.getList()
			},
			qrsh() {

			}
		},

	}
</script>

<style scoped lang="scss">
	.empty-order {
		width: 1376px;
		height: 567px;
		background-color: #fff;
		margin: auto;
		position: relative;
	}

	.dr-wrap {
		width: 140px;
		height: 125px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		border: 1px #999 dashed;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 12px;

		.dr-icon {
			font-size: 32px;
			color: #007aff;
		}

		.dr-tit {
			margin-top: 20px;
		}

		// .dr-int {
		// 	width: 140px;
		// 	height: 125px;
		// }
	}

	.dr-int {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		outline: medium none;
		cursor: pointer;
		-moz-opacity: 0;
		opacity: 0;
		filter: alpha(opacity=0);
	}

	.redr {
		position: relative;
		margin-right: 20px;
	}

	.mb {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;
		margin: auto;
		width: 100%;
		height: 100%;
	}

	/deep/ .el-table__cell {
		button {
			padding: 6px 10px;
		}
	}
</style>