eduepos_ui_store/pages/order/index.vue

<template>
    <view class="order-page">
        <view class="tabs-wrap">
            <view class="tabs">
                <view class="tab" :class="{ curr: active == 1 }" @click="handTimeTabhange">近两日</view>
                <view class="tab" :class="{ curr: active == 2 }" @click="handChangeDate">
                    <view class="name" style="margin-right: 10rpx;">{{ params.searchDate || '选择日期' }}</view>
                    <u-icon name="arrow-down" color="#fff" size="14" v-if="active == 2"></u-icon>
                    <u-icon name="arrow-down" color="#0F40F5" size="14" v-if="active == 1"></u-icon>
                </view>
            </view>
            <view class="search" @click="goToSearchPage">
                <u-icon name="search" size="30" color="#6c6c6c"></u-icon>
            </view>
        </view>
        <view class="tabs-switch-wrap">
            <u-tabs
                class="tabs"
                :list="tabs"
                :itemStyle="itemStyle"
                :is-scroll="false"
                :current="params.active"
                @click="handTabhange"
                @change="handTabhange">
            </u-tabs>
        </view>
        <view class="scroll-list-wrap">
            <view class="item" v-for="order in orderList" :key="order.date">
                <view class="item-date">
                    <view class="label">{{ order.date }}</view>
                    <view class="collect" @click="handItemMoreCollect(order)">
                        <view class="name">当日汇总</view>
                        <u-icon name="arrow-right" size="14" color="#6c6c6c"></u-icon>
                    </view>
                </view>
                <view class="scroll-list-content">
                    <item v-for="item in order.list" :item="item" @loadOrder="loadOrder" :key="item.id" />
                </view>
            </view>
        </view>
		<uni-calendar 
			ref="calendar"
			:insert="pickVisible"
			@confirm="orderDateConfirm"
			@change="orderDateConfirm"
			 />
    </view>
</template>
<script>
import item from '@/pages/components/order.vue'
import {mapState} from 'vuex';
export default {
	components: {
        item
	},
    data () {
        return {
			listUrl: '/storeOrderApi/getOrderListForStoreSearch',
            active: 1,
            pickVisible: false,
            params: {
                active: 0,
                searchDate: ''
            },
            itemStyle: {
                width: '25vw',
                height: '80rpx'
            },
            tabs: [
                {
                    name: '全部'
                },
                {
                    name: '进行中'
                },
                {
                    name: '已完成'
                },
                {
                    name: '退款'
                }
            ],
            orderList: []
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {
        handChangeDate () {
            this.$refs.calendar.open();
        },
        handTabhange (e) {
            this.params.active = e.index
			this.loadData();
        },
		loadOrder () {
			this.loadData()
		},
		handTimeTabhange () {
			this.active = 1;
			this.params.searchDate = "";
			this.loadData();
		},
        // 跳转至搜索页
        goToSearchPage () {
            uni.navigateTo({
                url: '/pages/search/index'
            })
        },
        // 当日汇总
        handItemMoreCollect (item) {
            uni.navigateTo({
                url: '/pages/search/collect?day=' + item.requireDateStr
            })
        },
        orderDateConfirm (e) {

            this.params.searchDate = e.fulldate
            this.pickVisible = false
			this.active = 2
			this.loadData()
        },
		loadData() {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			let date1 = "";
			if (this.active == 1) {
				// 获取近两天
				const date = new Date();
				let month = ((date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1));
				const startDate = date.getFullYear() + "-" + month + "-" + ((date.getDate() - 1) < 10 ? ("0" + (date.getDate() - 1)) : (date.getDate() - 1));
				const endDate = date.getFullYear() + "-" + month + "-" + (date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate());
				date1 = startDate + "/" + endDate;
			} else {
				date1 = this.params.searchDate;
			}
			let that = this;
			this.requst({
				url: this.listUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					status2: this.params.active,
					dateStr: date1
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading();
						this.orderList = this.splitOrderList(res.data.list);
					} else {
						uni.hideLoading();
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			})
			
		},
		splitOrderList(list) {
			if (!list || list.length == 0) {
				return [];
			}
			let orderList = [];
			list.map(item => {
				const date = item.requireDateStr.slice(5,10);
				if (orderList.length == 0) {
					let arr = [];
					arr.push(item)
					const obj = {
						date: date,
						requireDate: item.requireDate,
						requireDateStr: item.requireDateStr,
						list: arr
					}
					orderList.push(obj)
				} else {
					let obj = orderList.find(w => w.date == date);
					if (obj) {
						obj.list.push(item)
					} else {
						let arr = [];
						arr.push(item)
						const obj = {
							date: date,
							requireDate: item.requireDate,
							requireDateStr: item.requireDateStr,
							list: arr
						}
						orderList.push(obj)
					}
				}
			})
			if (orderList.length > 0) {
				orderList.sort((a, b) => {
					return new Date(a.requireDate).getTime() - new Date(b.requireDate).getTime()
				})
				orderList.reverse()
			}
			return orderList;
		}
    },
    onLoad () {
    },
	onShow () {
		this.loadData();
	}
}
</script>
<style lang="scss" scoped>
.order-page {
    background-color: #f5f5f5;
}
.tabs-wrap {
    position: relative;
    height: 100rpx;
    @include flexCenter;
    .tabs {
        width: 456rpx;
        height: 60rpx;
        @include flexCenter;
        border-radius: 30rpx;
        border: 2rpx solid $theme-color;
        color: $theme-color;
        overflow: hidden;
        .tab {
            flex: 1;
            height: 60rpx;
            @include flexCenter;
            font-size: $font-base;
        }
        .tab.curr {
            background-color: $theme-color;
            color: #fff;
        }
    }
    .search {
        position: absolute;
        right: 20rpx;
        top: 0;
        height: 100rpx;
        @include flexCenter;
    }
}
.tabs-switch-wrap {
    width: 100vw;
    height: 80rpx;
    @include flexCenter;
    background-color: #fff;
}
.scroll-list-wrap {
    .item-date {
        padding: 0 20rpx;
        box-sizing: border-box;
    }
    .item-date, .collect {
        @include between;
        height: 80rpx;
        font-size: $font-base;
    }
}
.scroll-list-content {
    width: calc(100vw - 40rpx);
    margin-left: 20rpx;
    padding-bottom: 2rpx;
}
</style>