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="searchMobile"></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">
                    <view class="list-item">
                        <view class="top flex aic jcsb">
                            <text class="word">充值游戏币</text>
                            <text class="money">+3456</text>
                        </view>
                        <view class="btom flex-column">
                            <text>充值账户：178 8394 2382</text>
                            <text>充值账户：178 8394 2382</text>
                            <text>充值账户：178 8394 2382</text>
                            <text>充值账户：178 8394 2382</text>
                            <text>充值账户：178 8394 2382</text>
                            <text>充值账户：178 8394 2382</text>
                        </view>
                    </view>
                </view>
                <no-data :statusType="2" :top="0" tipsText="暂无数据"></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'
export default {
    components: {
        MescrollBody
    },
    data(){
        return{
            show:false,
            searchValue:'',
            value: Number(new Date())
        }
    },
    mixins: [MescrollMixin],
    methods: {
        confirm(e) {
            console.log('confirm', e)
            this.show = false
            this.date = e.value[0].label
        }
    },

}
</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>