yihuo/pages/magic/index.vue

<template>
    <page :nav="false" ref="pageRef">
        <view
            class="pagae-nav"
            :style="{ paddingTop: statusBarHeight + 'px', background: headerBg }"
        >
            <view class="flex-align-center relative" style="height: 80rpx">
                <text class="cuIcon-back back" @click.stop="back"></text>
                <view class="title line-ellipsis">源石</view>
            </view>
        </view>
        <view class="wrapper" :style="{ backgroundImage: 'url(' + ossurl.box.boxPageBg + ')' }">
            <view
                v-if="data"
                class="stoneBox"
                :style="{ backgroundImage: 'url(' + ossurl.mine.stoneBg + ')' }"
            >
                <view class="info flex-align-around">
                    <view class="flex-column-align-center">
                        <view class="num">
                            {{ data.balance }}
                        </view>
                        <view class="name"  @click="$refs.explainRef.show()">
                            可用
                            <view
                                class="cuIcon-questionfill"

                            ></view>
                        </view>
                    </view>
                    <view class="flex-column-align-center">
                        <view class="num">
                            {{ data.frozen }}
                        </view>
                        <view class="name">冻结</view>
                    </view>
                </view>
                <view class="tip flex-align-between"></view>
            </view>

            <view v-if="tableData && tableData.length > 0" class="list">
                <view class="title">
                    源石明细
                    <view class="pikerBox">
                        <picker
                            @change="bindPickerChange"
                            :value="index"
                            :range="tabs"
                            range-key="title"
                        >
                            <view class="pikerView">
                                {{ tabs[index].title }}
                                <view
                                    class="cuIcon-triangledownfill"
                                    style="font-size: 32rpx"
                                ></view>
                            </view>
                        </picker>
                    </view>
                </view>
                <view v-for="item in tableData" :key="item.itemId" class="cell flex-align-between">
                    <view class="flex1">
                        <view class="font4 bold flex-align-between">
                            {{ item.itemDesc }}
                            <view class="money bold">
                                <text v-if="item.type === 'IN'">+</text>
                                <text v-else-if="item.type === 'OUT'">-</text>
                                {{ item.money }}
                            </view>
                        </view>
                        <view class="font2 paddingT8" style="color: rgba(0, 0, 0, 0.3)">
                            {{ item.createTime }}
                        </view>
                    </view>
                </view>
            </view>
            <empty v-if="isEmpty" :top="120" />
            <explain ref="explainRef" />
        </view>
    </page>
</template>

<script>
    import pageMixin from './../../mixin/page'
    import empty from '@/components/empty'
    import explain from './explain'
    import loginMixin from '@/mixin/login'
    import ossurl from '@/utils/ossurl'
    import tabbar2 from '@/components/tabbar2'

    const Tabs = [
        { title: '全部类型', value: '' },
        { title: '收入', value: 'IN' },
        { title: '支出', value: 'OUT' }
    ]

    export default {
        mixins: [pageMixin, loginMixin],
        components: { empty, explain, tabbar2 },
        data() {
            return {
                tabs: Tabs,
                tab: Tabs[0],
                ossurl,
                data: null,
                scrollTop: 0
            }
        },
        computed: {
            headerBg() {
                return this.scrollTop > 0 ? '#fff' : 'transparent'
            },
            statusBarHeight() {
                if (this.$store.state.systemInfo) {
                    return this.$store.state.systemInfo.statusBarHeight
                }
                return 20
            },
            index() {
                let index = this.tabs.findIndex((e) => {
                    return e.value == this.tab.value
                })
                return index
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop
        },
        mounted() {
            this.getData(true)
            this.refresh()
        },
        onPullDownRefresh() {
            this.getData()
            this.refresh()
        },
        onReachBottom() {
            this.loadMore()
        },
        methods: {
            back() {
                this.$router.back()
            },
            init() {
                this.getData()
                this.refresh()
            },
            clickTab(item) {
                this.tab = item
                this.refresh(true)
            },
            bindPickerChange(val) {
                console.log(val)
                this.tab = this.tabs[val.detail.value]
                this.refresh(true)
            },
            async getData(loading = false) {
                const res = await this.$service.wallet.info('MAGIC', loading)
                this.data = res
                uni.stopPullDownRefresh()
            },
            async loadData() {
                const res = await this.$service.wallet.bill(
                    this.pageNum,
                    this.pageSize,
                    'MAGIC',
                    this.tab.value
                )
                return res
            }
        }
    }
</script>
<style></style>
<style lang="scss" scoped>
    .pikerView {
        height: 48rpx;
        background: #f1f1f1;
        border-radius: 24rpx;
        line-height: 48rpx;
        text-align: center;
        font-size: 24rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 350;
        color: rgba(0, 0, 0, 0.85);
        padding: 0 22rpx;
        display: flex;
        align-items: center;
    }
    .wrapper {
        padding-top: 200rpx;
        background-size: 100% auto;
        background-position: top;
        background-repeat: no-repeat;
    }
    .pagae-nav {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 100;
        align-items: center;
        .title {
            font-size: 30rpx;
            font-weight: bold;
            text-align: center;
            line-height: 72rpx;
            width: 500rpx;
        }
        .back {
            z-index: 1800;
            font-size: 32rpx;
            line-height: 32rpx;
            position: absolute;
            left: 20rpx;
            top: 24rpx;
        }
    }
    .stoneBox {
        height: 270rpx;
        width: 710rpx;
        background-size: 100% 100%;
        background-position: top;
        background-repeat: no-repeat;
    }
    .info {
        overflow: hidden;
        position: relative;
        padding-top: 40rpx;
        padding-bottom: 24rpx;
        .name {
            font-size: 28rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 350;
            color: #6d6d6d;
            margin-top: 16rpx;
            .cuIcon-questionfill {
                font-size: 28rpx;
                display: inline-block;
            }
        }
        .num {
            font-size: 44rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: bold;
            color: #000000;

        }
    }
    .tip {
        font-size: 24rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 400;
        color: #000000;
        padding: 20rpx 32rpx;

        line-height: 44rpx;
    }
    .list {
        border-radius: 20rpx;
        overflow: hidden;
        background: #ffffff;
        padding: 0 32rpx;
        margin-top: 20rpx;
        .title {
            padding: 36rpx 0 12rpx 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .cell {
            padding: 20rpx 0 26rpx 0;
            border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
            margin-bottom: 20rpx;
        }
        .money {
            font-size: 28rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 500;
            color: #182933;
            line-height: 44rpx;
        }
    }
</style>