wit-uniapp/pages/index/BillPending/BillPending.vue

<template>
    <view class="">
        <h3 class="userInfotenantName">{{userInfotenantName}}</h3>
        <view class="subsection">
            <u-subsection :list="list" fontSize="30rpx" :current="current" @change="sectionChange"></u-subsection>
        </view>

        <!-- 账单明细 -->
        <view class="" v-show="cdshow==0">
            <view class="topbilledit">
                <view class="changetime1">
                    <picker mode="date" :value="myday" fields="month" @change="dateChange">
                        <view class="selestDate">{{myday}}</view>
                    </picker>
                </view>
                <view class="changetime2">
                    <u-icon name="arrow-down-fill" color="#666666" size="20"></u-icon>
                </view>
            </view>

            <view style="padding:20rpx 0 0 30rpx">
                共有 <span style="color: red">{{totalnumber}}</span>条记录
            </view>

            <view class="u-listdata">
                <u-list @scrolltolower="scrolltolower" :pagingEnabled='true'>
                    <u-list-item v-for="(item, index) in indexList1" :key="index">
                        <view class="paisong">
                            <view class="outstanding1" v-if='item.status==1'>
                                已支付
                            </view>
                            <view class="outstanding2" v-if='item.status==2'>
                                待支付
                            </view>
                            <view class="outstanding3" v-if='item.status==3'>
                                支付失败
                            </view>


                            <view class="Currentamount" @click="paybills(item)">
                                <checkbox :checked="item.check"/>
                                物业费: <span>￥{{item.amount}}</span>
                            </view>
                            <view class="Currentamount1">
                                管理费:{{item.billLists[0].amount}}
                            </view>
                            <view class="Currentamount1">
                                中央空调使用费:{{item.billLists[1].amount}}
                            </view>
                            <view class="Currentamount1">
                                电梯费:{{item.billLists[2].amount}}
                            </view>

                        </view>
                    </u-list-item>

                </u-list>
            </view>
            <view class="zhifu" v-show="zhifumk">
                <view class="zhifuleft">
                    <checkbox :checked="quanxuan"/>
                    全选
                </view>
                <view class="zhifuright" @click="Immediatepayment">
                    <view class="heji">
                        合计：<span>￥ {{heji}}</span>
                    </view>
                    <view class="likezhifu">
                        <u-button type="primary" size='mini' shape='circle' text="立即支付"></u-button>
                    </view>
                </view>
            </view>
        </view>
        <!--缴费记录 -->
        <view class="" v-show="cdshow==1">
            <!-- 	列表 -->
            <view class="u-listdata">
                <view class="topbilledit" @click="typechange">
                    <view class="changetime1">
                        {{mytype}}
                    </view>
                    <view class="changetime2">
                        <u-icon name="arrow-down-fill" color="#666666" size="20"></u-icon>
                    </view>
                </view>

                <view style="padding:20rpx 0 0 30rpx">
                    共有 <span style="color: red">{{totalnumber}}</span>条记录
                </view>

                <u-list @scrolltolower="scrolltolower2" :pagingEnabled='true'>
                    <u-list-item v-for="(item, index) in indexList2" :key="index">

                        <view class="paisong2">
                            <view class="settled1" v-if="item.type=='Subsidy'">
                                补助
                            </view>
                            <view class="settled2" v-if="item.type=='PreStorage'">
                                预存
                            </view>
                            <!-- 	<view class="settled3" v-if="item.type==3">
                                普通
                            </view> -->

                            <h3>{{item.tenantInfo.name}}</h3>
                            <view class="Currentamount1">
                                扣缴金额:{{item.amount}}
                            </view>
                            <view class="Currentamount1">
                                账户金额:{{item.surplus}}
                            </view>
                            <view class="Currentamount1">
                                租户电话:{{item.tenantInfo.tel}}
                            </view>
                            <view class="Currentamount1">
                                操作人:{{item.createName}}
                            </view>
                            <view class="Currentamount1">
                                扣缴时间:{{item.createDate}}
                            </view>
                        </view>

                    </u-list-item>
                </u-list>

                <view class="Predeposit" v-show="Predepositshow">
                    <u-button type="primary" text="预存充值" @click="Predeposit"></u-button>
                </view>
            </view>

        </view>


        <u-picker :show="showtype" :columns="columnstype" keyName="dictLabel" @confirm="confirmtype"
                  @cancel='canceltype'></u-picker>

        <u-popup :show="showpay" @close="closepay" @open="openpay" mode="bottom" :round="10" :closeable=true
                 :closeOnClickOverlay=true>
            <view class="paytall">
                <!-- <text>请选择支付方式</text> -->
                <view class="hejitop">
                    ￥ {{heji}}
                </view>
                <view class="zhifufs">
                    <u-radio-group @change="groupChange" v-model="radiovalue1" placement="column" iconPlacement="right">
                        <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
                                 :label="item.name" :name="item.id">
                        </u-radio>
                    </u-radio-group>
                </view>
                <view style="margin: 0 30rpx;">
                    <u-button type="primary" text="确认支付" @click="Confirmationpayment"></u-button>
                </view>
            </view>
        </u-popup>


        <u-modal :show="showjiaofei" title="提示" content='当前账户余额不足,请问是否充值？' @confirm="jiaofeiconfirm"
                 @cancel='jiaofeicancel' :showCancelButton=true></u-modal>

<view class="canys" v-if="zhifucanvas">
    <h4>请用微信扫码二维码</h4>
    <canvas  class="zhifucanvas" canvas-id='canvas'></canvas>
   <view class="guanbi">
       <u-button type="primary" :plain="true" text="关闭" @click="guanbi"></u-button>
   </view>
</view>


        <u-popup :show="showpayjine" @close="closepay1" @open="openpay1" mode="bottom" :round="10" :closeable=true
                 :closeOnClickOverlay=true>
            <view class="paytall1">
                <!-- <text>请选择支付方式</text> -->
                <view class="hejitop">
                    预存
                </view>
                <view class="zhifufs">
                    <u--form
                            labelWidth="100"
                            labelPosition="left"
                            :model="model1"
                            :rules="rules"
                            ref="uForm"
                    >
                        <u-form-item
                                label="金额"
                                prop="userInfo.amount"
                                borderBottom
                                ref="item1"
                        >
                            <u--input
                                    v-model="model1.userInfo.amount"
                                    border="none"
                            ></u--input>
                        </u-form-item>

                    </u--form>
                </view>
                <view style="margin: 0 30rpx;">
                    <u-button type="primary" text="确认支付" @click="Confirmationpaymentjine"></u-button>
                </view>
            </view>
        </u-popup>

        <u-notify ref="uNotify" message=""></u-notify>
    </view>
</template>

<script>

    var QRCode = require('@/utils/qrcode.js');
    const BaseApi = require("@/http/baseApi.js");
    //	import {isEmpty,getDictDataList} from "@/utils/index";
    export default {
        name: 'Workordertodone',
        data() {
            const currentDate = this.getDate({
                format: 'yyyy-mm'
            })
            return {
                model1: {
                    userInfo: {
                        amount: '',
                    },
                },
                rules: {
                    'userInfo.amount': {
                        type: 'string',
                        required: true,
                        message: '请填写预存金额',
                        trigger: ['blur', 'change']
                    },
                },
                Predepositshow:true,
                showpayjine: false,
                showcw: false,
                zhifucanvas: false,
                radiolist1: [],
                radiovalue1: '微信',
                showjiaofei: false,
                showpay: false,
                quanxuan: true,
                zhifumk: false,
                mytype: '全部',
                myday: currentDate,
                totalnumber: 0,
                jfnodata: false,
                showtype: false,
                cdshow: 0,
                fatherparameter: {},
                expensedata: '全部',
                list: ['账单明细', '缴费记录',],
                current: 0,
                dataForm: {
                    tenantId: '',
                    costCycle: currentDate,
                    type: '',
                    page: 1,
                    limit: 10,
                },
                zhanghuyue: 0,
                heji: 0,
                indexList1: [],
                indexList2: [],
                payStatusList: [],
                nodata: true,
                pd: true,
                zhifufangshi: '',
                columnstype: [],
                repairTypeList: [],
                UrgencyTypelist: [],
                PayStatus: [],
                PropertyType: [],
                userInfotenantName: '',
            }
        },
        //监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
        onLoad: function (options) { //option为object类型，会序列化上个页面传递的参数
            let userInfo = JSON.parse(decodeURIComponent(options.info));
            // console.log('userInfo', userInfo);
            this.userInfotenantName = userInfo.tenantName;
            this.dataForm.tenantId = userInfo.tenantId;

            let getDictDataList = uni.getStorageSync('getDictDataList');
            console.log('111111111111111111', getDictDataList)
            for (let i = 0; i < getDictDataList.length; i++) {
                if (getDictDataList[i].dictType == 'PayType') {
                    this.columnstype = [getDictDataList[i].dataList]
                }
                if (getDictDataList[i].dictType == 'PayStatus') {
                    this.PayStatus = [getDictDataList[i].dataList]
                }
                if (getDictDataList[i].dictType == 'PropertyType') {
                    this.PropertyType = [getDictDataList[i].dataList]
                }
            }


            console.log('111111111111111111', this.PayStatus)

            this.getpaisongdata();

        },
        //监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
        onReady() {
        },
        //监听页面隐藏
        onHide() {
        },
        //监听窗口尺寸变化
        onResize() {
        },
        //监听页面卸载
        onUnload() {
        },
        //监听用户下拉动作，一般用于下拉刷新
        onPullDownRefresh() {
        },


        methods: {
            guanbi(){
                this.zhifucanvas=false;
                this.Predepositshow=true;
                this.queryOrder1();
                this.queryOrder2();
            },
            Confirmationpaymentjine() {
                this.zhifucanvas=true;
                this.$refs.uForm.validate().then(res => {
                    uni.$u.toast('校验通过')
                    console.log('111111111111111111', this.model1.userInfo.amount)
                    this.showpayjine=false;
                    this.Predepositshow=false;
                  //  this.Immediatepayment();
                    let postdata = {
                        totalFee: '0.01',
                        tenantId: Math.floor(this.dataForm.tenantId),
                        tradeType: 'NATIVE',
                        billIds: ''
                    }
                    uni.request({
                        url: BaseApi.BaseApi + '/pay/createOrder',
                        method: "POST",
                        data: postdata,
                        header: {
                            'content-type': 'application/x-www-form-urlencoded',
                            "token": uni.getStorageSync('tokendata'),
                        },
                        success: (res) => {
                            //	window.open(res.codeUrl, '_blank);
                            let qrcode = new QRCode('canvas', {
                                text: res.data.codeUrl, // weixin://wxpay/bizpayurl?pr=sZz****
                                width: 213,
                                height: 213,
                                colorDark: "black",
                                colorLight: "white",
                                correctLevel: QRCode.CorrectLevel.H,
                            });
                         //   10秒之后调取查询订单
                            let that = this;
                            setTimeout(function () {
                                that.queryOrder2();
                            }, 15000);

                        }
                    });


                }).catch(errors => {
                    uni.$u.toast('校验失败')
                })
            },
            groupChange(n) {
                console.log('groupChange', n);
                this.zhifufangshi = n;
            },
            Predeposit() {
                this.showpayjine = true;
            },
            queryOrder1() {
                this.Predepositshow=true;
                this.zhifucanvas = false;
                //this.cdshow = 0;
                this.indexList1 = [];
                this.dataForm.page = 1;
                this.getpaisongdata();

            },

            queryOrder2() {
                this.Predepositshow=true;
                this.zhifucanvas = false;
                this.indexList2 = [];
                this.dataForm.page = 1;
                this.getpayrecord();
            },
            Confirmationpayment() {
                if (this.zhifufangshi == 'zhanghu') {
                    if (this.zhanghuyue >= this.heji) {
                        console.log('账户余额支付',)
                        //this.showpay=false;
                        let billIdslist = [this.indexList1[0].billLists[0].id, this.indexList1[0].billLists[1].id,
                            this.indexList1[0].billLists[2].id];
                        let postdata = {
                            amount: String(this.zhanghuyue - this.heji),
                            tenantId: this.dataForm.tenantId,
                            payType: 'Account',
                            billIds: billIdslist
                        }

                        this.$api.post('/billinfo/billPay', postdata)
                            .then(res => {
                                console.log('111111111111111111', res)
                                if (res.data.code == 0) {
                                    this.zhifucanvas = true;
                                    this.$refs.uNotify.success(res.data.msg)
                                    this.showpay = false;
                                    this.indexList1 = [];
                                    this.dataForm.page = 1;
                                    this.getpaisongdata();
                                } else {
                                    this.$refs.uNotify.error(res.data.msg)
                                    this.showpay = false;
                                    this.indexList1 = [];
                                    this.dataForm.page = 1;
                                    this.getpaisongdata();
                                }
                            })

                    } else if (this.zhanghuyue < this.heji) {
                        this.showjiaofei = true;

                    }

                } else if (this.zhifufangshi == 'weixin') {
                    this.zhifucanvas = true;
                    this.showpay = false;
                    let billIdslist = this.indexList1[0].billLists[0].id + ',' +
                        this.indexList1[0].billLists[1].id + ',' + this.indexList1[0].billLists[2].id;
                    // let postdata = {
                    // 	totalFee: String(this.heji),
                    // 	tenantId:Math.floor(this.dataForm.tenantId),
                    // 	tradeType: 'NATIVE',
                    // 	billIds: billIdslist
                    // }

                    let postdata = {
                        totalFee: '0.01',
                        tenantId: Math.floor(this.dataForm.tenantId),
                        tradeType: 'NATIVE',
                        billIds: billIdslist
                    }
                    uni.request({
                        url: BaseApi.BaseApi + '/pay/createOrder',
                        method: "POST",
                        data: postdata,
                        header: {
                            'content-type': 'application/x-www-form-urlencoded',
                            "token": uni.getStorageSync('tokendata'),
                        },
                        success: (res) => {
                            //	window.open(res.codeUrl, '_blank);
                            let qrcode = new QRCode('canvas', {
                                text: res.data.codeUrl, // weixin://wxpay/bizpayurl?pr=sZz****
                                width: 213,
                                height: 213,
                                colorDark: "black",
                                colorLight: "white",
                                correctLevel: QRCode.CorrectLevel.H,
                            });
                            //10秒之后调取查询订单
                            let that = this;
                            setTimeout(function () {
                                that.queryOrder1();
                            }, 15000);

                        }
                    });


                }
            },
            jiaofeiconfirm() {
                this.showpay = false;
                console.log('111111111111111111', this.heji - this.zhanghuyue)
                let billIdslist = this.indexList1[0].billLists[0].id + ',' +
                    this.indexList1[0].billLists[1].id + ',' + this.indexList1[0].billLists[2].id;
                let postdata = {
                    totalFee: String(this.heji - this.zhanghuyue),
                    tenantId: Math.floor(this.dataForm.tenantId),
                    tradeType: 'NATIVE',
                    billIds: billIdslist
                }
                uni.request({
                    url: BaseApi.BaseApi + '/pay/createOrder',
                    method: "POST",
                    data: postdata,
                    header: {
                        'content-type': 'application/x-www-form-urlencoded',
                        "token": uni.getStorageSync('tokendata'),
                    },
                    success: (res) => {
                        //	window.open(res.codeUrl, '_blank);
                        let qrcode = new QRCode('canvas', {
                            text: res.data.codeUrl, // weixin://wxpay/bizpayurl?pr=sZz****
                            width: 213,
                            height: 213,
                            colorDark: "black",
                            colorLight: "white",
                            correctLevel: QRCode.CorrectLevel.H,
                        });
                        //10秒之后调取查询订单
                        let that = this;
                        setTimeout(function () {
                            that.queryOrder1();
                        }, 15000);

                    }
                });
            },
            jiaofeicancel() {
                this.showjiaofei = false;
            },

            Immediatepayment() {

                this.$api.get('/accountinfo/detail/' + this.dataForm.tenantId, {})
                    .then(res => {
                        this.zhanghuyue = res.data.data.amount;
                        this.showpay = true;
                        this.radiolist1 = [{
                            name: '微信',
                            disabled: false,
                            id: 'weixin',
                        },
                            {
                                name: '账户余额' + '(可用￥' + this.zhanghuyue + ')',
                                disabled: false,
                                id: 'zhanghu'
                            },
                        ]
                    })
            },
            openpay() {
                console.log('open');
            },
            closepay() {
                this.showpay = false
                // console.log('close');
            },
            openpay1() {
                console.log('open');
            },
            closepay1() {
                this.showpayjine = false
                // console.log('close');
            },

            paybills(e) {
                e.check = !e.check;
                if (e.check) {
                    console.log('111111111111111111',e.check)
                    this.zhifumk = e.check
                } else {
                    console.log('222222',e.check)
                    this.zhifumk = e.check
                }
            },
            dateChange(e) {
                this.myday = e.target.value;
                this.dataForm.costCycle = e.target.value;
                this.dataForm.page = 1;
                this.indexList1 = [];
                this.getpaisongdata();
            },


            sectionChange(index) {
                this.current = index;
                if (index == 0) {
                    this.cdshow = 0;
                    this.indexList1 = [];
                    this.dataForm.page = 1;
                    this.getpaisongdata();
                } else if (index == 1) {
                    this.cdshow = 1;
                    this.indexList2 = [];
                    this.dataForm.page = 1;
                    this.getpayrecord();
                }

            },
            scrolltolower() {
                if (this.pd) {
                    this.getpaisongdata();
                } else {
                    return
                }
            },
            scrolltolower2() {
                if (this.pd) {
                    this.getpayrecord();
                } else {
                    return
                }
            },
            getpayrecord() {
                this.$api.get('/payrecord/page', this.dataForm)
                    .then(res => {
                        this.totalnumber = res.data.data.total;
                        console.log('111111111111111111', res.data.data)

                        if (res.data.data.list.length != 0) {

                            this.indexList2.push(...res.data.data.list);
                            this.dataForm.page = this.dataForm.page + 1;
                            this.pd = true;
                            this.jfnodata = false;
                        } else {
                            uni.showToast({
                                title: '暂无更多数据了',
                                icon: 'none',
                                duration: 1500
                            })
                            this.pd = false;
                            //this.jfnodata=true
                        }

                    })
            },
            getpaisongdata() {
                this.$api.post('/billinfo/billDetail', this.dataForm)
                    .then(res => {
                        this.totalnumber = res.data.data.length;
                        //console.log('111111111111111111', res.data.data)

                        if (res.data.data.length != 0) {
                            //check
                            for (let i = 0; i < res.data.data.length; i++) {
                                res.data.data[i].check = false;
                            }
                            this.heji = res.data.data[0].amount;
                            this.indexList1.push(...res.data.data);
                            this.dataForm.page = this.dataForm.page + 1;
                            this.pd = true;
                            this.jfnodata = false;
                        } else {
                            uni.showToast({
                                title: '暂无更多数据了',
                                icon: 'none',
                                duration: 1500
                            })
                            this.pd = false;
                            //this.jfnodata=true
                        }

                    })
            },
            getDate(type) {
                const date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                if (type === 'start') {
                    year = year - 60;
                } else if (type === 'end') {
                    year = year + 2;
                }
                month = month > 9 ? month : '0' + month;
                // day = day > 9 ? day : '0' + day;
                return `${year}-${month}`;
            },
            typechange() {
                this.showtype = true;
            },
            confirmtype(e) {
                this.indexList2 = [];
                //console.log('111111111111111111', e.value[0])
                this.showtype = false;
                if (e.value[0].dictValue == 'all') {
                    this.mytype = e.value[0].dictLabel;
                    this.dataForm.type = '';
                    this.dataForm.page = 1;
                    this.getpayrecord();
                } else {
                    this.mytype = e.value[0].dictLabel;
                    this.dataForm.type = e.value[0].dictValue;
                    this.dataForm.page = 1;
                    this.getpayrecord();
                }

            },
            canceltype() {
                this.showtype = false;
            },
            dict_filter(val, list) {
                if (isEmpty(val)) {
                    return "";
                }
                return this[list].find((item) => item.dictValue == val);
            },

        }
    }
</script>

<style lang="scss">

    .Predeposit {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 750rpx;
    }

    .nodata {
        text-align: center;
        padding-top: 400rpx;
    }

    .zhifucanvas {
        width: 400rpx;
        height: 400rpx;
       margin: 0 auto;
    }
.canys{
    width: 500rpx;
    height: 600rpx;
    position: fixed;
    top: 30%;
    left: 140rpx;
    background: #e6e6e6;
    h4{
        width: 500rpx;
        text-align: center;
        height: 80rpx;
        line-height: 80rpx;
    }
}
.guanbi{
    margin-top: 50rpx;
}

    .zhifufs {
        padding: 30rpx;

        ::v-deep .u-radio-label--right {
            margin-top: 30rpx;
        }

        ::v-deep .u-radio__icon-wrap {
            width: 40rpx !important;
            height: 40rpx !important;
        }

        ::v-deep .u-radio__text {
            font-size: 32rpx !important;
        }
    }

    .hejitop {
        width: 750rpx;
        text-align: center;
        font-weight: bold;
        font-size: 40rpx;
        margin-bottom: 30rpx;
    }

    .paytall {
        width: 750rpx;
        height: 400rpx;
        background-color: #fff;
    }

    .paytall1 {
        width: 750rpx;
        height: 330rpx;
        background-color: #fff;
    }

    .heji span {
        color: #ED3A25;
    }

    .likezhifu {
        margin-left: 20rpx;
        margin-right: 30rpx;
    }

    .zhifu {
        position: fixed;
        right: 0 ;
        bottom: 0 ;
        left: 0 ;
        height: 140rpx;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .zhifuleft {
        margin-left: 30rpx;
    }

    .zhifuright {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .outstanding1 {
        background-color: #09C700;
        width: 100rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        color: #fff;
        font-size: 14 rpx;
        position: absolute;
        top: 0px;
        right: 0px;
        border-top-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .outstanding2 {
        background-color: #ED3A25;
        width: 100rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        color: #fff;
        font-size: 14rpx;
        position: absolute;
        top: 0px;
        right: 0px;
        border-top-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .outstanding3 {
        background-color: #e6e6e6;
        width: 100rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        color: #fff;
        font-size: 14 rpx;
        position: absolute;
        top: 0px;
        right: 0px;
        border-top-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .userInfotenantName {
        text-align: center;
        margin-bottom: 10rpx;
        font-size: 34rpx;
    }

    .topbilledit {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .changetime1 {
        padding-right: 10rpx;
    }

    .paisong {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 220rpx;
        background-color: #fff;
        margin: 30rpx;
        border-radius: 9rpx;
        position: relative;

        h3 {
            height: 70rpx;
            line-height: 70rpx;
            padding-left: 30rpx;
        }
    }

    .paisong2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 330rpx;
        background-color: #fff;
        margin: 30rpx;
        border-radius: 9rpx;
        position: relative;

        h3 {
            height: 70rpx;
            line-height: 70rpx;
            padding-left: 30rpx;
        }
    }

    .companylist {
        margin: 20rpx 30rpx;
        background: #fff;
        height: 280rpx;
        border-radius: 10px;
        position: relative;

        h3 {
            height: 70rpx;
            line-height: 70rpx;
            padding-left: 30rpx;
        }
    }

    .settled1 {
        background-color: #09C700;
        width: 100rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        color: #fff;
        font-size: 14rpx;
        position: absolute;
        top: 0px;
        right: 0px;
        border-top-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .settled2 {
        background-color: #30D3A2;
        width: 100rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        color: #fff;
        font-size: 14 rpx;
        position: absolute;
        top: 0px;
        right: 0px;
        border-top-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .settled3 {
        background-color: #30D3A2;
        width: 100rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        color: #fff;
        font-size: 14rpx;
        position: absolute;
        top: 0px;
        right: 0px;
        border-top-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }


    .Currentamount {
        padding-left: 30rpx;
        height: 50rpx;
        line-height: 50rpx;
        color: #BCB3A7;

        span {
            color: #FA5555;
            padding-left: 9rpx;
        }
    }

    .Currentamount1 {
        padding-left: 30rpx;
        height: 45rpx;
        line-height: 45rpx;
        color: #BCB3A7;

        span {
            color: #FA5555;
            padding-left: 9rpx;
        }
    }

    .records1 {
        background-color: #FA5555;
        width: 100rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        color: #fff;
        font-size: 14rpx;
        position: absolute;
        top: 0px;
        right: 0px;
        border-top-right-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
    }

    .records {
        display: flex;
        flex-direction: column;
        // justify-content: center;
        position: relative;
        width: 690rpx;
        height: 210rpx;
        background: #fff;
        margin: 0 auto;
        border-radius: 9rpx;
    }

    .onerecord {
        width: 750rpx;
        height: 90rpx;
        line-height: 90rpx;
        padding-left: 30rpx;
        color: #999;

        span {
            color: red;
        }
    }

    .topbilledit {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        height: 60rpx;
    }

    .changetime2 {
        padding-left: 10rpx;
    }

    .subsection {
        padding: 30rpx;
        background: #fff;
    }

    .topname {
        height: 44px;
        width: 750rpx;
        display: flex;
        align-items: center;
    }

    .topname1 {
        width: 50rpx;
        padding-left: 10rpx;
    }

    .topname2 {
        width: 700rpx;
        text-align: center;
        font-weight: bold;
    }
</style>