yql/pages/my/wallet/capital2.vue

<template>
    <view class="page hongbao-page">
        <view class="content">
            <view class="hongbao-header">
                <view class="hongbao-header-view">
                    <view class="header-top">
                        <view class="top-left">
                            <image :src="myPhoto" class="top-left-left"></image>
                            <view class="top-left-right">
                                <text class="hb-name">{{my_data.nickname}}</text>
                                <view>
                                    <text style="font-size: 24upx;color:#bebebe;margin-right:7px" @click="showTimeList">{{timeName}}</text>
                                    <text style="font-size: 10upx;color:#bebebe" class="iconfont-im icon-sanjiao"></text>
                                </view>

                            </view>
                        </view>
                        <view class="top-right" v-if="0">
                            <view><text>收到红包</text><text class="top-right-num">{{info.get_count}} 个</text></view>
                            <view><text>手气最佳</text><text class="top-right-num">{{info.best_count}} 次</text></view>
                        </view>
                        <view class="top-right">
                            <view><text>余额</text><text class="top-right-num">{{info.user_money}} 元</text></view>
                        </view>
                    </view>
                    <view class="header-bottom">
                        <text>总流水</text><text class="hongbao-num">￥{{info.amount}}</text>
                    </view>
                </view>
            </view>
            <view class="capital-list"
                  v-if="list.length">
                <view class="capital-item"
                      v-for="(item) in list"
                      :key="item.id">
                    <view class="item-left">
                        <text class="time-msg">{{item.explain}}</text>
                        <text class="time">{{timestampFormat(item.create_time + '')}}</text>
                    </view>
                    <view class="item-right">
                        <text class="add-money"
                              :style="{color:item.record_type == 0 ? '#e6b141' : 'black'}">{{item.record_type == 0 ? -item.money : '+'+item.money}}</text>
                        <text class="yue">
                            <text style="margin-right: 8rpx;">余额</text>
                            {{item.user_money}}
                        </text>
                    </view>
                </view>
                <uni-load-more :status="status"></uni-load-more>
            </view>
        </view>
        <view class="hongbao-footer">
            <view @click="getHb(1)" :class="get==1?'active':''"><text>收入</text></view>
            <view  @click="getHb(2)" :class="get==2?'active':''"><text>支出</text></view>
        </view>
        <uni-popup ref="popup2"
                   type="bottom">
            <view class="but-view">
                <view  class="but-top-view">
                    <view v-for="item in timeList" :key="item.id" @click="getTimeHb(item.id,item.name)">{{item.name}}</view>
                </view>
                <view class="clone-but" @click="clonePopup">取消</view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    import uniLoadMore from "../../../components/uni-ui/uni-load-more/uni-load-more.vue";
    import _get from '../../../common/_get';
    import uniPopup from '../../../components/uni-popup/uni-popup.vue';
    import _action from '../../../common/_action';
    import _hook from '../../../common/_hook';
    import _data from '../../../common/_data';

    export default {
        computed: {
            status () {
                return this.pullUp == 0 ? 'more' : (this.pullUp == 1 ? 'loading' : '')
            },
            myPhoto(){
                return _data.staticPhoto() + this.my_data.photo;
            }
        },
        data () {
            return {
                info:{
                    amount:'0.00',
                    best_count:'0',
                    get_count:'0',
                    send_count:0,
                    user_money:0,
                    amount:0,
                },
                my_data:{},
                videPoup: false,
                get: 1,// 代表我发出还是收到
                time:4,
                pullUp: 0, //0加载更多 1 加载中 -1 加载完成
                page: 1,
                totallPage: 1,
                list: [
                ],
                timeName:'近三个月',
                type: '0',
                timeList:[{id:4,name:'近三个月'},{id:1,name:'本月'},{id:2,name:'上个月'},{id:3,name:'上上个月'}]
            }
        },
        onLoad (options) {
            if ('type' in options) {
                this.type = options.type;
                uni.setNavigationBarTitle({
                    title: '我的红包记录'
                })
            }
        },
        onShow () {
            let _this = this;
            _hook.routeSonHook();
            this.getCapital('down');
            _get.getUserInfo({});
            uni.$on('data_user_info',function(data){
                _this.my_data = data;
                _data.data('user_info',data)
            });
        },
        components: {
            uniLoadMore,
            uniPopup
        },
        onReachBottom () {
            let _this = this;
            if (_this.pullUp == 0) {
                _this.page++;
                _this.pullUp = 1;
                this.getCapital('up');
            }
        },
        onPullDownRefresh () {
            this.pullUp = 0; //重置下拉
            this.page = 1;
            uni.startPullDownRefresh();
            this.getCapital('down', function () {
                uni.stopPullDownRefresh();
            });
        },
        methods: {
            // 发出和收到切换
            getHb(type){
                this.get= type
                this.page = 1;
                this.getCapital('down', function () {
                    uni.stopPullDownRefresh();
                });
            },
            // 时间切换
            getTimeHb(time,name){
                this.timeName = name
                console.log(time)
                this.time = time;
                this.page = 1;
                let _this = this;
                this.getCapital('down', function () {
                    _this.$refs.popup2.close();
                });
            },
            clonePopup(){
                this.$refs.popup2.close()
            },
            showTimeList () {
                console.log(55555)
                this.$refs.popup2.open()
            },
            getCapital (type, cb) {
                let _this = this;
                _get.getCapitalList({ page: this.page, type: 1,get:_this.get,time:_this.time }, function (res) {
                    _this.totallPage = res.last_page;
                    _this.info.amount = res.info.amount
                    _this.info.user_money = res.info.user_money
                    if (type == 'down') {
                        _this.list = res.data;
                        if (cb != undefined) cb();
                    } else {
                        if (_this.page > _this.totallPage) {
                            _this.pullUp = -1;
                        } else {
                            _this.list = _this.list.concat(res.data)
                            _this.pullUp = 0;
                        }
                    }
                    _this.clonePopup()
                })
            },
            timestampFormat (time) {
                return _action.timestampFormat(time);
            },

        }
    }
</script>

<style>
    /*757575*/
    page {
        background-color: white;
    }
    .hongbao-header {
        padding: 40upx;
    }
    .hb-name{
        font-weight: bold;
    }
    .hongbao-page {
        display: flex;
        flex-direction: column;
    }
    .hongbao-page .content {
        padding-bottom: 100upx;
    }
    .hongbao-footer {
        height: 100upx;
        border-top: 1px solid #d3cdcd;
        position: fixed;
        display: flex;
        justify-content: space-between;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
    }
    .but-view {
        display: flex;
        flex-direction: column;
        padding: 40upx;
    }
    .but-top-view {
        display: flex;
        flex-direction: column;
        border-radius: 12upx;
        overflow: hidden;
    }
    .but-top-view view {
        width: 100%;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80upx;
        border-top: 1px solid #d3cdcd;
    }
    .clone-but{
        width: 100%;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80upx;
        border-radius: 12upx;
        margin-top: 30upx;
    }

    .hongbao-footer view {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hongbao-footer text {
        height: 100%;
        display: flex;
        align-items: center;
    }
    .hongbao-footer .active text {
        border-top: 2px solid red;
        color: red;
    }
    .header-top {
        display: flex;
        height: 100upx;

        justify-content: space-between;
    }
    .top-left {
        display: flex;
    }
    .top-left-left {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100upx;
        background: chartreuse;
        border-radius: 10upx;
        height: 100%;
        margin-right: 20upx;
    }
    .top-left-right {
        display: flex;
        flex-direction: column;
    }
    .top-right-num {
        color: rebeccapurple;
        margin-left: 10upx;
    }
    .hongbao-header-view {
        height: 300upx;
        background: #f1edec;
        width: 100%;
        border-radius: 8upx;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: 40upx;
        box-sizing: border-box;
    }
    .header-bottom {
        display: flex;
        align-items: center;
    }
    .hongbao-num {
        font-size: 46upx;
        font-weight: bold;
    }

    .item-left,
    .item-right {
        padding-bottom: 25upx;
        padding-top: 30upx;
    }

    .time,
    .yue {
        color: #757575;
    }

    .content .capital-list {
        display: flex;
        flex-direction: column;
        padding: 0upx 0upx 120upx 40upx;
    }

    .capital-list .capital-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f2f2f2;
    }

    .item-right .add-money {
        margin-bottom: 15upx;
        font-size: 14px;
        font-weight: 500;
    }
    .sub-mone {
        margin-bottom: 15upx;
        font-size: 14px;
        font-weight: 500;
        color: #e6b141;
    }
    .item-left .time-msg {
        margin-bottom: 15upx;
        font-size: 14px;
        font-weight: 400;
    }

    .capital-list .capital-item .item-left {
        display: flex;
        flex-direction: column;
    }

    .capital-list .capital-item .item-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-right: 40upx;
    }
</style>