eduepos_ui_store/pages/search/collect.vue

<template>
    <view class="collect-page">
        <view class="info">
            <view class="total-collect">
                预计总收入： <text class="price">¥{{ moneyConverter(form.total) }}</text>
            </view>
            <view class="order">
                <view class="col">已完成： <text class="num">{{ form.completedNum }}</text>单</view>
                <view class="col">进行中： <text class="num">{{ form.progressNum }}</text>单</view>
            </view>
            <view class="income">
                <view class="col">预计收入： <text class="price">{{ moneyConverter(form.completedMoney) }}</text></view>
                <view class="col">预计收入： <text class="price">{{ moneyConverter(form.progressMoney) }}</text></view>
            </view>
            <view class="cancel">
                已取消/退款: <text class="price">{{ form.refundNum }}</text>单
            </view>
            <view class="collect">
                总计: <text class="price">¥{{ moneyConverter(form.refundMoney) }}</text>
            </view>
        </view>
    </view>
</template>
<script>
import {mapState} from 'vuex';
export default {
    data () {
        return {
			summaryUrl: '/storeOrderApi/orderSummary',
			dateStr: '',
            form: {
                completedNum: 0,
                progressNum: 0,
                refundNum: 0,
				completedMoney: 0,
				progressMoney: 0,
				refundMoney: 0,
				total: 0,
            }
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {
		loadData() {
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			uni.showLoading({
				title: '加载中'
			});
			let that = this;
			this.requst({
				url: this.summaryUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					dateStr: this.dateStr,
					storeId: this.storeInfo.storeId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading();
						this.form = res.data.obj
					} else {
						if (res.data.rtnBean.rtnMsg != '') {
							uni.hideLoading();
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			})
		}
	},
    onLoad (opt) {
        if (!opt.day) return
		let date = opt.day.slice(0, 10);
		this.dateStr = date;
		this.loadData();
        uni.setNavigationBarTitle({
            title: date + ' 营业汇总'
        })
    }
}
</script>
<style lang="scss" scoped>
.collect-page {
    background-color: #f5f5f5;
    min-height: 100vh;
    border-top: 2rpx solid #f5f5f5;
}
.info {
    width: calc(100vw - 40rpx);
    margin: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
}
.price {
    font-size: 40rpx;
    margin: 0 20rpx;
}
.total-collect {
    margin: 30rpx 0 50rpx;
    font-size: 40rpx;
    .price {
        color: $uni-color-button;
        font-weight: bold;
    }
}
.order, .income {
	margin-top: 8rpx;
    @include between;
    .col {
        flex: 1;
    }
    .num {
        font-weight: bold;
        margin: 0 20rpx;
        font-size: 40rpx;
        margin-bottom: 20rpx;
    }
    .price {
        color: $uni-color-button;
    }
}
.cancel {
    margin: 40rpx 0 10rpx;
    .price {
        color: #000;
        font-weight: bold;
    }
}
.collect {
    margin-bottom: 40rpx;
}

</style>