eduepos_ui_store/pages/tools/settle.vue

<template>
    <view class="settle-page">
        <view class="settle-info">
            <view class="label">未结算金额</view>
            <view class="not-settle-price">¥{{moneyConverter(form.unSettleMoney)}}</view>
            <view class="label yjs">已结算金额: ¥{{moneyConverter(form.settledMoney)}}</view>
        </view>
        <view class="settle-tabs">
            <view class="tabs-wrap">
                <u-tabs
                    class="tabs"
                    :list="tabs"
                    :activeStyle="{ color: '#1A78F6' }"
                    :itemStyle="itemStyle"
                    :is-scroll="false"
					@change="activeChange"
                    :current="active">
                </u-tabs>
            </view>
            <scroll-view class="settle-list" :scroll-y="true">
                <view class="line"></view>
                <view class="item" v-for="item in settleList" :key="item.accountDate" @click="handItemInfo(item)">
                    <view class="label">{{ item.accountDate }}</view>
                    <view class="value">
                        <view class="price" :class="{ sr: item.actualIncom > 0 }">{{ item.actualIncom > 0 ? '+¥' : '-¥' }}{{ moneyConverter(Math.abs(item.actualIncom)) }}</view>
                        <u-icon class="more" name="arrow-right" size="22" color="#6c6c6c"></u-icon>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>
<script>
import {mapState} from 'vuex';
export default {
    data () {
        return {
			listUrl: '/storeSettlementApi/getStoreStatementListForStore',
            active: 0,
            itemStyle: {
                width: 'calc(50vw - 20rpx)',
                height: '80rpx'
            },
            tabs: [
                {
                    name: '未结算金额'
                },
                {
                    name: '已结算金额'
                }
            ],
			form: {
				settledMoney: 0,
				unSettleMoney: 0
			},
            settleList: []
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
    methods: {
        handItemInfo (item) {
            uni.navigateTo({
                url: `/pages/tools/settle-info?time=${item.accountDate}&money=${item.actualIncom}&orderNum=${item.orderNum}`
            });
        },
		activeChange(e) {
			this.active = e.index
			this.loadData()
		},
		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,
					status: this.active,
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading();
						this.settleList = res.data.list;
						this.form = res.data.obj;
					} else {
						uni.hideLoading();
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
							return;
						}
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			})
		}
    },
    onLoad () {
		this.loadData()
	}
}
</script>
<style lang="scss" scoped>
.settle-page {
    min-height: 100vh;
    background-color: #f5f5f5;
}
.settle-info {
    background-color: $theme-color;
    height: 324rpx;
    color: #fff;
    padding: 40rpx 40rpx 70rpx;
    box-sizing: border-box;
    border-radius: 0 0 20rpx 20rpx;
    .not-settle-price {
        font-weight: bold;
        font-size: 56rpx;
        text-align: center;
        margin: 10rpx 0 42rpx;
    }
    .yjs {
        font-size: $font-base;
    }
}
.settle-tabs {
    width: calc(100vw - 40rpx);
    height: calc(100vh - 324rpx - constant(safe-area-inset-bottom));
    height: calc(100vh - 324rpx - env(safe-area-inset-bottom));
    margin-left: 20rpx;
    border-radius: 10rpx;
    position: relative;
    top: -40rpx;
    background-color: #fff;
}
.settle-list {
    width: 100%;
	height: calc(100vh - 444rpx - constant(safe-area-inset-bottom));
	height: calc(100vh - 444rpx - env(safe-area-inset-bottom));
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    .line {
        height: 2rpx;
        width: 100%;
        background-color: #ececec;
    }
    .item {
        border-bottom: 2rpx solid #ececec;
        height: 100rpx;
        @include between;
    }
    .value {
        @include between(flex-end);
    }
    .price {
        margin-right: 10rpx;
    }
    .price.sr {
        color: $uni-color-button;
    }
}
</style>