bt/imcs-bt-fe/imcs-bt-fe/uni-mall/pages/ucenter/order/order.vue

<template>
	<view class="container">

		<picker @change="bindPickerChange" v-model="index" :range="array" :range-key="'name'">
			<view class="picker">
				<view class="label">状态</view>
				<view class="fb-type">
					<view class="type-label">{{array[index].name}}</view>
					<image class="type-icon"
						src="/static/images/icon_select.png">
					</image>
				</view>
			</view>
		</picker>

		<picker @change="bindPickerChange2" v-model="index2" :range="deviceList" :range-key="'name'">
			<view class="picker" style="position: relative;">
				<view class="label">设备</view>
				<view class="fb-type">
					<view class="type-label">{{deviceList[index2].name}}</view>
					<image class="type-icon"
						src="/static/images/icon_select.png">
					</image>
				</view>
			</view>
		</picker>

		<view class="picker" style="position: relative;">
			<view class="label" v-if="isToday">今日订单</view>
			<view class="fb-type">
				<text>{{range[0]?range[0]:''}} - {{range[1]?range[1]:''}}</text>
				<button type="primary" @click="onShowDatePicker('range')" :disabled="isToday" >选择</button>
			</view>
		</view>
		<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'开始'"           
			 :end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onCancel" />

		<view class="statistics">
			<view class="cell">
				<text class="val">{{orderCount}}</text>
				<text class="txt">订单总数</text>
			</view>
			<view class="cell">
				<text class="val">{{orderSum}}</text>
				<text class="txt">订单销售总金额</text>
			</view>
		</view>
		<view class="orders" v-if="orderList.length>0">
			<navigator :url="'../order/orderDetail?id='+item.id" class="order" v-for="(item, index) in orderList"
				:key="item.id">
				<view class="h">
					<view class="l">创建时间：{{item.createTime||''}}</view>
					<view class="r">{{array[parseInt(item.orderStatus)+1].name}}</view>
				</view>
				<view class="h">
					<view class="l">订单编号：{{item.id||''}}</view>
					<view class="r">￥{{item.orderAmount||'0'}}</view>
				</view>
				<view class="h">
					<view class="l">会员名称：{{item.orderMemberName||''}}</view>
				</view>
				<view class="h">
					<view class="l">设备名称：{{item.deviceName||''}}</view>
				</view>
				<view class="h">
					<view class="l">产品名称：{{item.orderGoodsName||''}}</view>
				</view>
				<view class="h" v-if="item.errorMsg && item.orderStatus==2">
					<view class="l">异常原因：{{item.errorMsg}}</view>
				</view>
				<view class="b" v-if="false">
					<view class="l"></view>
					<view class="r">
						<button class="btn" :data-order-index="index" @click.stop.prevent="payOrder">立即支付</button>
					</view>
				</view>
			</navigator>
		</view>
		<tui-show-empty v-else text="暂无订单"></tui-show-empty>
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	const util = require("@/utils/util.js");
	const api = require('@/utils/api.js');
	export default {
		data() {
			return {
				range: [],
				value: '',
				type: '',
				showPicker: false,
				index: 0,
				index2: 0,
				isToday: true,
				//statusId: '0',
				//deviceId: '',
				deviceList: [{
					id: '',
					name: '全部'
				}],
				orderCount: 2,
				orderSum: 0.0,
				array: [{
					id: "",
					name: '全部'
				},{id:"0", name: '未支付'},{id:"1", name: '已支付'},{id:"2", name:'已取消'},{id:"3", name:'生产完成'},{id:"4", name: '异常'},{id:"5", name: '转入退款'},],
				orderList: [
					/*{
					name: '美式咖啡',
					memberName: '飞起来的虫',
					orderSn: 'DD202106010',
					deviceName: '果奶机02',
					createTime: '2021-07-04 12:13',
					status: '1',
					price: '15.2',
					errorMsg: '生产中断'
				}, {
					name: '美式咖啡',
					memberName: '飞起来的虫',
					orderSn: 'DD202106020',
					deviceName: '果奶机01',
					createTime: '2021-08-06 16:25',
					status: '2',
					price: '15.0',
					errorMsg: '生产失败'
				}, {
					name: '美式咖啡',
					memberName: '飞起来的虫',
					orderSn: 'DD202106030',
					deviceName: '果奶机03',
					createTime: '2021-10-14 19:25',
					status: '3',
					price: '15.0',
					errorMsg: ''
				}*/
				],
				queryParams: util.initQueryParams(),
				totalPages: 1,
				totalPages2: 1
			}
		},
		components: {
			MxDatePicker
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.detail.value
				//this.statusId = this.array[this.index].id				
				this.orderList = []
				this.queryParams.current = 1
				let pages = getCurrentPages();
				let page = pages[pages.length - 1].$page.fullPath;
				let oType = page.split('type=')[1]
				this.getOrderList(oType)
			},
			bindPickerChange2: function(e) {
				this.index2 = e.detail.value;
				//this.deviceId = this.deviceList[this.index2].id
				this.orderList = []
				this.queryParams.current = 1
				//this.queryParams.model.orderEquId = this.deviceId
				let pages = getCurrentPages();
				let page = pages[pages.length - 1].$page.fullPath;
				let oType = page.split('type=')[1]
				this.getOrderList(oType)
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			onShowDatePicker(type) { //显示
				console.log(JSON.stringify(type))
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			onSelected(e) { //选择
				console.log(JSON.stringify(e))
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
				}
				this.orderList = []
				this.queryParams.current = 1
				let pages = getCurrentPages();
				let page = pages[pages.length - 1].$page.fullPath;
				let oType = page.split('type=')[1]
				console.log(oType)
				this.getOrderList(oType) 
			},
			onCancel(e) {
				this.range = []
				this.showPicker = false;
				if (e) {
					this[this.type] = '';
				}
				this.orderList = []
				this.queryParams.current = 1
				let pages = getCurrentPages();
				let page = pages[pages.length - 1].$page.fullPath;
				let oType = page.split('type=')[1]
				this.getOrderList(oType)
			},
			getDeviceList(equId) {
				let that = this;
				util.request(api.DeviceList, {}, 'post', 'application/json').then(function(res) {
					if (res.code === 0) {
						//that.orderList = that.orderList.concat(res.data.data)
						//that.page = res.data.currentPage + 1
						that.totalPages2 = res.pages
						that.deviceList = that.deviceList.concat(res.data.records)
					    if(equId){
					    	that.deviceId = equId;
					    	that.index2 = that.deviceList.findIndex(function(item){
					    		return item.id === equId;
					    	});
					    }
					}
				});
			},
			getOrderList(type) {
				let that = this;
				if(type=="1"){
					that.range=[util.getNowDate(0), util.getNowDate(1)];
					that.isToday = true
				}else{
					if(type=="2"){
						that.index = 5
					}
					that.isToday = false					
				}
				if (that.index2) {
					that.queryParams.model.orderEquId = that.deviceList[that.index2].id
				}
				if(that.index){
					that.queryParams.model.orderStatus = that.array[that.index].id					
				}else if(that.index==''){
					that.queryParams.model.orderStatus =''
				}
				console.log(that.range)
				if (that.range.length > 0) {
					that.queryParams.map.createTime_st = that.range[0];
					that.queryParams.map.createTime_ed = that.range[1];
				}
				util.request(api.OrderList, that.queryParams, 'post', 'application/json').then(function(res) {
					if (res.code === 0) {						
						res.data.records = res.data.records.filter(item=>{
							if(item.id==null){							   
							   that.orderSum = item.orderSum;
							   return false
							}
							return true;
						})						
						that.orderList = that.orderList.concat(res.data.records);
						//that.page = res.data.currentPage + 1
						that.totalPages = res.data.pages
						that.orderCount = res.data.total
					}
				});
			},
			payOrder(event) {
				let that = this;
				let orderIndex = event.currentTarget.dataset.orderIndex;
				let order = that.orderList[orderIndex];
				util.payOrder(parseInt(order.id)).then(res => {
					that.getOrderList();
				}).catch(res => {
					util.toast('支付失败');
				});
			}
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			let pages = getCurrentPages();
			let page = pages[pages.length - 1].$page.fullPath;
			let type = page.split('type=')[1]
			type = type? type: ""
			if (this.totalPages > this.queryParams.current) {
				this.queryParams.current = this.queryParams.current + 1
			} else {
				return false;
			}
			this.getOrderList(type)
		},
		onLoad: function(option) {	
			let type = option.type? option.type : ""
			let equId = option.equId? option.equId : ""
			this.getDeviceList(equId);
			this.getOrderList(type);
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		background: #f4f4f4;
	}

	.orders {
		height: auto;
		width: 100%;
		overflow: hidden;
	}

	.order {
		margin-top: 20rpx;
		background: #fff;
	}

	.order .h {
		height: 83.3rpx;
		line-height: 83.3rpx;
		margin-left: 31.25rpx;
		padding-right: 31.25rpx;
		border-bottom: 1px solid #f4f4f4;
		font-size: 30rpx;
		color: #333;
	}

	.order .h .l {
		float: left;
	}

	.order .h .r {
		float: right;
		color: #b4282d;
		font-size: 24rpx;
	}

	.order .goods {
		display: flex;
		align-items: center;
		height: 199rpx;
		margin-left: 31.25rpx;
	}

	.order .goods .img {
		height: 145.83rpx;
		width: 145.83rpx;
		background: #f4f4f4;
	}

	.order .goods .img image {
		height: 145.83rpx;
		width: 145.83rpx;
	}

	.order .goods .info {
		height: 145.83rpx;
		flex: 1;
		padding-left: 20rpx;
	}

	.order .goods .name {
		margin-top: 30rpx;
		display: block;
		height: 44rpx;
		line-height: 44rpx;
		color: #333;
		font-size: 30rpx;
	}

	.order .goods .number {
		display: block;
		height: 37rpx;
		line-height: 37rpx;
		color: #666;
		font-size: 25rpx;
	}

	.order .goods .status {
		width: 105rpx;
		color: #b4282d;
		font-size: 25rpx;
	}

	.order .b {
		height: 103rpx;
		line-height: 103rpx;
		margin-left: 31.25rpx;
		padding-right: 31.25rpx;
		border-top: 1px solid #f4f4f4;
		font-size: 30rpx;
		color: #333;
	}

	.order .b .l {
		float: left;
	}

	.order .b .r {
		float: right;
	}

	.order .b .btn {
		margin-top: 19rpx;
		height: 64.5rpx;
		line-height: 64.5rpx;
		text-align: center;
		padding: 0 20rpx;
		border-radius: 5rpx;
		font-size: 26rpx;
		color: #fff;
		background: #b4282d;
	}

	.statistics {
		display: flex;
		height: 200rpx;
		width: 100%;
		flex-flow: row wrap;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		margin: 50rpx 0;
		box-sizing: border-box;
	}

	.statistics .cell {
		width: 48%;
		text-align: center;
		display: block;
		vertical-align: middle;

	}

	.statistics .cell .val {
		font-size: 50rpx;
		padding: 40rpx;
		margin-left: 32%;
	}

	.statistics .cell .txt {
		font-size: 30rpx;
		padding: 40rpx 0;
		margin-left: 32%;
	}

	.fb-type {
		height: 104rpx;
		width: 80%;
		margin-left: 20%;
		background: #fff;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.fb-type .type-label {
		height: 36rpx;
		flex: 1;
		color: #333;
		font-size: 28rpx;
	}

	.fb-type .type-icon {
		height: 36rpx;
		width: 36rpx;
	}

	.label {
		position: absolute;
		top: 27rpx;
		left: 30rpx;
		height: 50rpx;
		width: 100%;
		color: #333;
		line-height: 50rpx;
		font-size: 28rpx;
	}
	
</style>