retail-app/pages/accountRecharge/index.vue

<template>
    <view class="account">
        <view class="search flex aic">
            <u-search placeholder="请输入充值账户" searchIconColor="#2A200A" placeholderColor="#959AA3" bgColor="#F2F3F7" v-model="searchValue" :showAction="false" maxlength="30" height="60rpx" @search="upCallback"></u-search>
            <view class="date flex aic" @click="show = true">
                <text>日期</text>
                <re-icon name="icon-xiala" :customStyle="{ fontSize: '10rpx',marginLeft:'10rpx'}"></re-icon>
            </view>
        </view>
        <view class="tabulation">
            <mescroll-body height="100%" ref="mescrollRef" bottom="200" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
                <view class="list" v-if="list.length">
                    <view class="list-item" v-for="(item,index) in list" :key="index">
                        <view class="top flex aic jcsb">
                            <text class="word">{{item.packageName}}</text>
                            <text class="money">+{{item.totalAmount}}</text>
                        </view>
                        <view class="btom flex-column">
                            <text>充值账户：178 8394 2382</text>
                            <text>有效期至：{{item.expireTime}}</text>
                            <text>赠送用户明细：{{item.trafficSize}}</text>
                            <text>套餐金额：{{item.trafficPrice}}</text>
                            <text>套餐折扣：178 8394 2382</text>
                            <text>实付金额：178 8394 2382</text>
                            <text>预估收益：178 8394 2382</text>
                            <text>充值时间：{{item.payTime}}</text>
                        </view>
                    </view>
                </view>
                <no-data :statusType="2" :top="0" tipsText="暂无数据" v-if="!isInit&&!list.length"></no-data>
            </mescroll-body>
        </view>
        <u-datetime-picker ref="datetimePicker" closeOnClickOverlay :show="show" v-model="value" mode="date" @confirm="confirm" @close="show = false" @cancel="show = false"></u-datetime-picker>
    </view>
</template>
<script>
import MescrollMixin from "@/plugins/mescroll/components/mescroll-uni/mescroll-mixins.js"
import MescrollBody from '@/plugins/mescroll/components/mescroll-uni/mescroll-uni.vue'
import { getOrderPage } from '@/apis/main'
export default {
    components: {
        MescrollBody
    },
    data(){
        return{
            isInit: true, // 初次进入页面
            show:false,
            searchValue:'',
            value: Number(new Date()),
            list:[]
        }
    },
    onShow(){
        if(!this.isInit){
            this.initPage()
        }
        
    },
    mixins: [MescrollMixin],
    methods: {
        // 初始化
		initPage() {
            this.$nextTick(()=> {
                this.mescroll.resetUpScroll()
			    this.mescroll.scrollTo(0, 300)
            })
			
		},
        confirm(e) {
            console.log('confirm', e)
            this.show = false
            this.date = e.value[0].label
            this.$nextTick(() => {
                this.mescroll.resetUpScroll()
                this.mescroll.scrollTo(0, 300)
            })
        },
        // 获取数据
        async upCallback(page){
            const res = await getOrderPage({
                current:page.num,
                size:page.size,
                username:this.searchValue
            })
            if (res) {
                //设置列表数据
                if (page.num === 1) { //如果是第一页需手动制空列表
                    this.list = res.records
                } else {
                    this.list = this.list.concat(res.records) //追加新数据
                }
                this.mescroll.endSuccess(res.records.length, res.total > this.list.length)
            }else{
                this.mescroll.endErr()
            }
            uni.hideLoading()
            this.isInit = false
        }
    },

}
</script>
<style lang="scss" scoped>
    .account{
        height: 100%;
        background: #fff;
        display: flex;
        flex-direction: column;
        .search{
            padding: 12rpx 24rpx;
            .date{
                width: 112rpx;
                height: 48rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            
        }
        .tabulation{
            // flex-grow: 1;
            width: 100%;
            height: calc(100% - 43.6rpx);
            overflow: hidden;
            background: linear-gradient(360deg,#FFFFFF 60%, #FF911A 100%);
            padding: 24rpx 20rpx;
            .list{
                height: 100%;
                background: #FFFFFF;
                border-radius: 16rpx;
                padding: 32rpx;
                .list-item{
                    margin-bottom: 56rpx;
                    .top{
                        font-size: 32rpx;
                        .word{
                            font-weight: 500;
                            color: #000000;
                        }
                        .money{
                            font-weight: bold;
                            color: #EF3B24;
                        }
                    }
                    .btom{
                        margin-top: 24rpx;
                        text{
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #7a7a7a;
                            margin-bottom: 16rpx;
                        }
                        text:nth-last-child(1){
                            margin-bottom: 0;
                        }
                    }
                }
                .list-item:nth-last-child(1){
                    margin-bottom: 0;
                }
            }
        }
    }
</style>