无数据

选择日期

1.账单列表

<template>
    <view class="layout bgcl" :style="'height:' + scrollHeight+'px'">

        <view>
            <view class="header p25 flex flex-space-between">
                <view class="time flex p25" @click="chooseTime" v-if="isChange">
                    <text class="mr10">{{defaultBillTime}}</text>
                    <u-icon name="arrow-down" size="15"></u-icon>
                </view>
<!--                <view class="time flex p25" @click="chooseTime" v-if="!isChange">
                    <view class="flex flex-column">
                        <text class="mr10">{{startTime}}</text>
                        <text class="mr10">{{endTime}}</text>
                    </view>
                    <u-icon name="arrow-down-fill" color="#5E77FF" size="15"></u-icon>
                </view> -->
                <view class="total-money flex cl99">
                    <text>收入:￥{{income}}</text>
                    <text>提现:￥{{withdraw}}</text>
                    <text>支出:￥{{spend}}</text>
                </view>
            </view>
            <view class="bank-list p25 flex flex-space-between" v-for="(item,index) in bankLists" @click="goTo(`billDetail/index?billId=${item.bill_id}`)"
             :key="index">
                <view class="bills-titile flex">
                    <text class="cl33 title">{{item.title}}</text>
                    <text class="cl99 u-margin-top-10">{{item.bill_time_desc}}</text>
                </view>
                <view class="bill-money">
                    <text :style="{color:item.account>0?'#F96A0E' :'#1BBB9C'}">{{item.account}}</text>
                </view>
            </view>
        </view>
        <view class="no-data flex flex-column-center" v-if="total==0">
            <image src="../../../static/images/no-data@2x.png" mode=""></image>
            <text>暂无数据</text>
        </view>
        <u-popup v-model="showTime" mode="bottom" height="80%">
            <view class="time-btn flex flex-space-between flex-align-center p30">
                <text @click="ChooseTiemClose">取消</text>
                <text @click="changeTime(isMonth)">完成</text>
            </view>
            <view class="p30" v-if="isMonth">
                <view class="date-choose-btn" @click="changeDate">
                    <text>按月选择 ⇋</text>
                </view>
                <view class="date-show">
                    <view class="uni-title" v-if="date1.year&&date1.month">
                        {{date1.year}}年{{date1.month}}月
                    </view>
                    <view class="uni-title" v-else style="color: #CCCCCC;">
                        请选择年月
                    </view>
                </view>
                <u-line color="#5E77FF" />
                <view class="mt20">
                    <u-button type="primary" plain @click="calendarShow=true">选择日期</u-button>
                </view>
                <w-picker :visible.sync="calendarShow" mode="date" startYear="2017" endYear="2030" fields="month" :current="true"
                 @confirm="onConfirmMonth($event,'date1')" ref="date1"></w-picker>

            </view>
            <view class="p30" v-if="!isMonth">
                <view class="date-choose-btn" @click="changeDate">
                    <text>按日选择 ⇋</text>
                </view>
                <view class="date-show flex">
                    <u-input type="text" v-model="dayTimeStart" input-align="center" placeholder="开始时间" />
                    <text class="cl99" style="padding: 0 20upx;">至</text>
                    <u-input type="text" v-model="dayTimeEnd" input-align="center" placeholder="结束时间" />
                </view>
                <u-line color="#5E77FF" />
                <view class="mt20">
                    <u-button type="primary" plain @click="calendarShow=true">选择日期</u-button>
                </view>
                <w-picker :visible.sync="calendarShow" mode="range" startYear="2017" endYear="2030" :current="true" @confirm="onConfirmDate($event,'date2')"
                 ref="date2"></w-picker>

            </view>
        </u-popup>

    </view>
</template>

<script>
    import Https from '../../../api/http.js'
    export default {
        data() {
            return {
                scrollHeight: '',
                bankLists: [],
                income: '',
                withdraw: '',
                spend: '',
                total: '',
                billId: '',
                defaultBillTime: '',
                defaultBillTime_Num: '',
                billTime: '',
                showTime: false,
                calendarShow: false,
                dayTimeStart: '',
                dayTimeEnd: '',
                startTime: '',
                endTime: '',
                monthTime: '',
                isMonth: true, //弹窗里日期筛选是按月
                isChange: true, //按月按日是否切换
                date1: {
                    year: '',
                    month: ''
                },
                date2: {
                    startTime: '',
                    endTime: ''
                },
                month: '', //获取列表需要的月份参数
                start_date: '', //获取列表需要的开始日期参数
                end_date: '' //获取列表需要的结束日期参数
            }
        },
        onLoad() {
            this.defaultBillTime = new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月'
            this.defaultBillTime_Num = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
            // this.scrollHeight = uni.getSystemInfoSync().windowHeight
            this.getBills()
        },
        methods: {
            async getBills() {
                let res = await Https.billsInfo({
                    month: this.defaultBillTime_Num,
                    start_date: this.start_date,
                    end_date: this.end_date,
                    page: 1,
                    page_size: 20
                })
                console.log(res)
                this.bankLists = res.data.result[0].lists
                this.total = res.data.total
                console.log(this.bankLists)
                this.income = res.data.result[0].collect.income_total
                this.withdraw = res.data.result[0].collect.take_total
                this.spend = res.data.result[0].collect.expend_total
                this.billId = res.data.result[0].lists.bill_id
                this.billTime = res.data.result[0].collect.month_desc

            },
            chooseTime() {
                this.showTime = true
            },
            ChooseTiemClose() {
                this.showTime = false
            },
            onConfirmMonth(res, type) {
                console.log(res)
                this.date1.year = res.obj.year
                this.date1.month = res.obj.month
                this.month = res.value
            },
            onConfirmDate(res, type) {
                console.log(res)
                let data = res.obj
                this.dayTimeStart = data.fyear + '年' + data.fmonth + '月' + data.fday + '日'
                this.dayTimeEnd = data.tyear + '年' + data.tmonth + '月' + data.tday + '日'
                this.start_date = res.value[0]
                this.end_date = res.value[1]
            },
            // 按月or按日
            changeDate() {
                this.isMonth = !this.isMonth
            },
            // 修改查询账单的时间
            changeTime(isMonth) {
                console.log(isMonth)
                if (!isMonth) {
                    if (!this.dayTimeStart || !this.dayTimeEnd) {
                        uni.showToast({
                            icon: 'none',
                            title: '未选择好开始时间或结束时间',
                            duration: 2000
                        })
                        return
                    } else {
                        this.startTime = this.dayTimeStart
                        console.log(this.startTime)
                        console.log(this.dayTimeStart)
                        this.endTime = this.dayTimeEnd
                        this.defaultBillTime_Num = ''
                        this.showTime = false
                        this.isChange = false
                        this.getBills()
                    }
                }
                if (isMonth) {
                    this.monthTime = this.date1.year + '年' + this.date1.month + '月'
                    if (this.monthTime == '' || this.monthTime == '年月') {
                        uni.showToast({
                            icon: 'none',
                            title: '未选择时间',
                            duration: 2000
                        })
                        return false
                    } else {
                        this.showTime = false
                        this.defaultBillTime = this.monthTime
                        this.defaultBillTime_Num = this.month
                        this.start_date = ''
                        this.end_date = ''
                        this.isChange = true
                        this.getBills()
                    }
                }


            },
            goTo(url) {
                uni.navigateTo({
                    url: url,
                    animationType: 'pop-in',
                    animationDuration: 300
                })
            },
            bindChange(e) {

            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../../assets/css/common.scss";
    @import "../../../assets/css/base.css";

    .layout {
        .p25 {
            padding: 0 25upx;
        }

        .p30 {
            padding: 0 30upx;
        }

        .no-data {
            image {
                margin-top: 350upx;
                width: 100%;
                height: 305upx;
            }

            text {
                color: #AEC3E7;
                font-size: $theme-f30;
            }
        }

        .header {
            height: 140upx;
            align-items: center;

            .time {
                height: 85upx;
                width: 300upx;
                align-items: center;
                background-color: $theme-words-color;
                border-radius: 40upx;
                justify-content: center;
            }

            .total-money {
                text-align: right;
                flex-direction: column;

            }
        }

        .bank-list {
            height: 130upx;
            background-color: $theme-words-color;
            align-items: center;

            .bills-titile {
                .title {
                    width: 475upx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                flex-direction: column;
                font-size: $theme-f30;
            }

            .total-money {
                font-size: $theme-f34;
            }
        }

        .time-btn {
            height: 80upx;
            font-size: $theme-f32;
        }

        .date-choose-btn {
            width: 185upx;
            height: 60upx;
            line-height: 60upx;
            text-align: center;
            font-size: $theme-f28;
            background-color: #F2F2F2;
            border-radius: 37upx;
            margin: 35upx 0 25upx;
            border: 1px solid #999999;
        }

        .date-show {
            height: 80upx;
            line-height: 80upx;
            text-align: center;

            u-input {
                color: #5E77FF;
            }
        }
    }

    picker-view {
        width: 100%;
        height: 500upx;
        margin-top: 20upx;
    }

    .item {
        line-height: 100rpx;
        text-align: center;
    }
</style>

2.账单详情

账单详情页

<template>
    <view class="layout bgcl" :style="'height:' + scrollHeight+'px'">
        <!-- 共有7种交易类型 -->
        <view class="bill">
            <view class="bill-title flex flex-column p40 cl33">
                <text class="title u-margin-bottom-18">{{billInfo.title}}</text>
                <text class="money">{{billInfo.account}}</text>
            </view>
            <view class="split-line">
                <image src="../../../../static/images/split-line@2x.png" mode=""></image>
            </view>
            <!-- 收入 -->
            <view class="bill-detail p40 flex flex-column u-margin-top-50" v-if="billInfo.trade_type==1">
                <view class="flex flex-space-between">
                    <text>当前状态</text>
                    <text>{{billInfo.status_desc}}</text>
                </view>
                <view class="flex flex-space-between">
                    <text>收入说明</text>
                    <text>{{billInfo.trade_desc}}</text>
                </view>
                <view class="flex flex-space-between">
                    <text>收入时间</text>
                    <text>{{billInfo.income_time}}</text>
                </view>
            </view>
            <!-- 提现 -->
            <view class="bill-detail p40 flex flex-column u-margin-top-50" v-if="billInfo.trade_type==2 ||billInfo.trade_type==3||billInfo.trade_type==4">
                <view class="flex flex-space-between">
                    <text>当前状态</text>
                    <text :style="{color: billInfo.trade_type==3?'#F96A0E':(billInfo.trade_type == 4?'#FF2525':'#333')}">{{billInfo.status_desc}}</text>
                </view>
                <view class="flex flex-space-between" v-if="billInfo.trade_type == 2 ||billInfo.trade_type == 3">
                    <text>提现金额</text>
                    <text>{{billInfo.take_account}}</text>
                </view>
                <view class="flex flex-space-between" v-if="billInfo.trade_type == 2 ||billInfo.trade_type == 3">
                    <text>手续费</text>
                    <text>{{billInfo.recharge_fee}}</text>
                </view>
                <view class="flex flex-space-between">
                    <text>申请时间</text>
                    <text>{{billInfo.apply_time}}</text>
                </view>
                <view class="flex flex-space-between">
                    <text>提现银行</text>
                    <text>{{billInfo.take_bank_name}}</text>
                </view>
                <view class="flex flex-space-between" v-if="billInfo.trade_type == 2">
                    <text>到账时间</text>
                    <text>{{billInfo.finish_time}}</text>
                </view>
                <view class="flex flex-space-between">
                    <text>提现单号</text>
                    <text>{{billInfo.take_order_number}}</text>
                </view>
            </view>
            <!-- 申请成为劳务店主 -->
            <view class="bill-detail p40 flex flex-column u-margin-top-50" v-if="billInfo.trade_type ==5">
                <view class="flex flex-space-between">
                    <text>当前状态</text>
                    <text>{{billInfo.status_desc}}</text>
                </view>
                <view class="flex flex-space-between">
                    <text>支付说明</text>
                    <text>{{billInfo.trade_desc}}</text>
                </view>
                <view class="flex flex-space-between">
                    <text>支付方式</text>
                    <text>{{billInfo.pay_type}}</text>
                </view>
                <view class="flex flex-space-between">
                    <text>支付时间</text>
                    <text>{{billInfo.income_time}}</text>
                </view>
            </view>
            <!-- 解雇赔偿金 -->
            <view class="bill-detail p40 flex flex-column u-margin-top-50" v-if="billInfo.trade_type ==6">
                <view class="flex flex-space-between">
                    <text>当前状态</text>
                    <text>{{billInfo.status_desc}}</text>
                </view>
                <view class="flex flex-space-between">
                    <text style="width: 30%;">收入说明</text>
                    <text style="text-align: right;">{{billInfo.trade_desc}}</text>
                </view>
                <view class="flex flex-space-between">
                    <text>支付时间</text>
                    <text>{{billInfo.income_time}}</text>
                </view>
            </view>
            <!-- 劳务店主管理费 -->
            <view class="bill-detail p40 flex flex-column u-margin-top-50" v-if="billInfo.trade_type ==7">
                <view class="flex flex-space-between">
                    <text>当前状态</text>
                    <text>{{billInfo.status_desc}}</text>
                </view>
                <view class="income flex flex-space-between">
                    <view class="" style="width: 30%;">
                        <text>收入说明</text>
                        <image @click="clickTips" src="../../../../static/images/q_logo@2x.png" mode=""></image>
                    </view>
                    <text style="text-align: right;">{{billInfo.trade_desc}}</text>
                </view>
                <view class="flex flex-space-between">
                    <text>收入时间</text>
                    <text>{{billInfo.income_time}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import Https from '../../../../api/http.js'
    export default {
        data() {
            return {
                billId: '',
                scrollHeight: '',
                billInfo: {}
            }
        },
        onLoad(options) {
            this.scrollHeight = uni.getSystemInfoSync().windowHeight
            console.log(options)
            this.billId = options.billId
            this.getBillDetail()
        },
        methods: {
            async getBillDetail() {
                let res = await Https.billDetail({
                    bill_id: this.billId
                })
                console.log(res)
                this.billInfo = res.data
            },
            clickTips() {
                console.log(111)
                uni.showModal({
                    title: '劳务店主收益说明',
                    content: '推广的工人，一天的工资收入在100-199 元时， 劳务店主可获取1 .5 元收益；工资收入大于等于200元时， 即可获取3元收益； 一个工人在一天内做了多份工资超过100元的工作， 可获得多份收益！',
                    confirmText: '知道了',
                    showCancel: false,
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../../../assets/css/base.css";
    @import "../../../../assets/css/common.scss";

    .layout {
        .p40 {
            padding: 0 40upx;
        }

        .bill {
            background-color: $theme-words-color;

            .bill-title {
                justify-content: center;
                height: 285upx;
                text-align: center;

                .title {
                    font-size: $theme-f34;
                }

                .money {
                    font-size: $theme-f60;
                }
            }

            .split-line {
                image {
                    height: 5upx;
                    width: 100%;
                }
            }

            .bill-detail {
                padding-bottom: 90upx;

                text {
                    font-size: $theme-f28;
                    margin-bottom: 30upx;
                }

                text:nth-child(1) {
                    color: #999999;
                }

                text:nth-child(2) {
                    color: #333333;
                }

                .income {
                    image {
                        width: 35upx;
                        height: 35upx;
                        vertical-align: middle;
                    }
                }
            }
        }

    }
</style>