eduepos_ui_store/pages/tools/settle-info.vue

<template>
    <view class="settle-info-page">
        <view class="settle-date">
            {{ order.date }}
        </view>
        <view class="curr-day">
            <view class="item">
                <view class="label">当日收入(元)</view>
                <view class="value">{{moneyConverter(order.money)}}</view>
            </view>
            <view class="item">
                <view class="label">完成单量</view>
                <view class="value">{{order.orderNum}}</view>
            </view>
        </view>
        <view class="order-info" v-for="item in orderList" :key="item.orderId">
            <view class="order-top">
                <view class="order-no">订单编号: {{ item.orderCode }}</view>
                <view class="more" @click="goToOrderSearch(item.orderCode)">{{item.statusStr}} <u-icon name="arrow-right" size="20" color="#6c6c6c"></u-icon></view>
            </view>
            <view class="order-title">收入明细</view>
            <view class="order-dis-price">
                <view class="item">
                    <view class="label">订单金额</view>
                    <view class="price sr">¥{{moneyConverter(item.orderFee)}}</view>
                </view>
                <view class="item">
                    <view class="label">扣除配送费</view>
                    <view class="price">-¥{{item.status > -50 && item.status < 0 ? 0 : moneyConverter(item.deliveryFee + item.sortingFee + item.climbingFee)}}</view>
                </view>
                <view class="item">
                    <view class="label">微信扣点</view>
                    <view class="price">-¥{{item.status < 0 ? 0 : moneyConverter(calcPoints(item.wxPoint / 1000, item.orderFee))}}</view>
                </view>
                <view class="item">
                    <view class="label">平台扣点</view>
                    <view class="price">-¥{{ commissionPoint(item) }}</view>
                </view>
				<view class="item" v-if="item.status < 0">
				    <view class="label">退款金额</view>
				    <view class="price">-¥{{moneyConverter(item.refundFee)}}</view>
				</view>
            </view>
            <view class="curr-order">
                <view class="label">本单收入</view>
                <view class="price">{{item.status == -50 ? '-' : ''}}¥{{incomeFormatter(item)}}</view>
            </view>
        </view>
    </view>
</template>
<script>
	import {mapState} from 'vuex';
export default {
    data () {
        return {
			listUrl: '/storeOrderApi/getOrderListForStoreSearch',
            order: {
                date: '',
            },
			orderList: []
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {
        goToOrderSearch (no) {
            uni.navigateTo({
                url: `/pages/search/index?no=${no}`
            });
        },
		loadData() {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			let that = this;
			this.requst({
				url: this.listUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					dateStr: this.order.date,
					type: 1
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading();
						this.orderList = res.data.list;
					} else {
						if (res.data.rtnBean.rtnMsg != '') {
							uni.hideLoading();
							this.$api.msg(res.data.rtnBean.rtnMsg);
							return;
						}
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			})
			
		},
		calcPoints(rate, orderFee) {
		    return (Number(orderFee) * Number(rate));
		},
		toFixed2(money) {
			return Math.round(money * 100) / 100
		},
		commissionPoint(item) {
			let point = item.status < 0 ? 0 : this.moneyConverter(this.calcPoints(Number(item.commissionRate) / Number(1000) , item.orderFee - item.deliveryFee - item.sortingFee - item.climbingFee));
			return point > 0 ? point : 0;
		},
		incomeFormatter(item) {
			if (item.status == -40 || item.status == -20 || item.status == -10 || item.status == -1) {
				return 0;
			} else if (item.status == -50) {
				return this.moneyConverter(item.sortingFee + item.deliveryFee + item.climbingFee)
			} else {
				return this.toFixed2(this.moneyConverter(item.orderFee)
				- this.moneyConverter(item.deliveryFee + item.sortingFee + item.climbingFee) 
				- this.moneyConverter(this.calcPoints(item.wxPoint / 1000, item.orderFee)) 
				- this.commissionPoint(item))
			}
		}
    },
    onLoad (opt) {
        this.order.money = opt.money
		this.order.orderNum = opt.orderNum
        this.order.date = opt.time
		this.loadData()
    }
}
</script>
<style lang="scss" scoped>
.settle-info-page {
    min-height: 100vh;
    background-color: #f5f5f5;
    border-top: 2rpx solid #f5f5f5;
}
.settle-date {
    font-size: $font-base;
    margin: 10rpx 0;
    padding: 0 20rpx;
    box-sizing: border-box;
}
.curr-day {
    width: calc(100% - 40rpx);
    margin: 0 20rpx 26rpx;
    @include flexCenter;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    box-sizing: border-box;
    height: 186rpx;
    .item {
        flex: 1;
        text-align: center;
    }
    .label {
        margin-bottom: 30rpx;
        font-size: $font-base;
        color: $text-color;
    }
    .value {
        color: $uni-color-button;
        font-size: 36rpx;
        font-weight: bold;
    }
}
.order-info {
    width: calc(100vw - 40rpx);
    margin: 0 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    box-sizing: border-box;
	margin-bottom: 20rpx;
    .order-top {
        @include between;
        font-size: $font-base;
        border-bottom: 2rpx solid #ececec;
        padding-bottom: 20rpx;
        box-sizing: border-box;
    }
    .more {
        @include between(flex-end);
    }
    .order-title {
        font-weight: bold;
        color: #000;
        font-size: $font-base;
        margin: 20rpx 0;
    }
}
.order-dis-price {
    border-bottom: 2rpx solid #ececec;
    margin-bottom: 20rpx;
    .item {
        @include between;
        font-size: $font-base;
        margin-bottom: 20rpx;
    }
    .label {
        color: $desc-color;
    }
    .price.sr {
        color: $uni-color-button;
    }
}
.curr-order {
    @include flexEnd;
    font-size: 36rpx;
    font-weight: bold;
    .label {
        margin-right: 10rpx;
        color: $title-color;
    }
    .price {
        color: $uni-color-button;
    }
}
</style>