yihuo/pages/wallet/index.vue

<template>
    <page title="钱包" ref="pageRef" nav-color="transparent">
        <view v-if="data" class="info flex-column-align-center">
            <image class="bg" :src="resource.center_bg1" mode="scaleToFill" />
            <view style="font-size: 60rpx" class="bold color-white">{{data.balance}}</view>
            <view class="font6 color-white paddingT2" style="opacity: 0.8">余额</view>
            <view class="flex-align-around paddingT15" style="width: 75%">
                <view class="btn-withdraw btn-clear" @click="showWithdraw">我要提现</view>
                <view class="btn-recharge" @click="showRecharge">充值</view>
            </view>
        </view>
        <tabbar2 custom-class="marginX14 marginY10" :tabs="tabs" @change="clickTab" light />
        <view v-if="tableData && tableData.length > 0" class="list">
            <view v-for="item in tableData" :key="item.itemId" class="cell border-bottom1 flex-align-between">
                <view>
                    <view class="font4 bold" style="color: #666666">{{item.itemDesc}}</view>
                    <view class="color-3 font2 paddingT4">{{item.createTime}}</view>
                </view>
                <view class="font10" :class="[item.type === 'IN' ? 'color-theme' : 'color-1']">
                    <text v-if="item.type === 'IN'">+</text>
                    <text v-else-if="item.type === 'OUT'">-</text>
                    {{item.money}}
                </view>
            </view>
        </view>
        <empty v-if="isEmpty" :top="120" />
    </page>
</template>

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

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

export default {
    mixins: [pageMixin, loginMixin],
    components: { empty, tabbar2 },
    data() {
        return {
            tabs: Tabs,
            tab: Tabs[0],
            resource,
            data: null
        }
    },
    onShow() {
        this.getData()
        this.refresh()
    },
    onPullDownRefresh() {
        this.getData()
        this.refresh()
    },
    onReachBottom() {
        this.loadMore()
    },
    methods: {
        init() {
            this.getData()
            this.refresh()
        },
        clickTab(item) {
            this.tab = item
            this.refresh(true)
        },
        async getData(loading = false) {
            const res = await this.$service.wallet.info('CASH', loading)
            this.data = res
            uni.stopPullDownRefresh()
        },
        async loadData() {
            const res = await this.$service.wallet.bill(
                this.pageNum,
                this.pageSize,
                'CASH',
                this.tab.value
            )
            return res
        },
        showRecharge() {
            const user = this.$store.getters.user
            this.$common.showKefu(`我要充值 (${user.username})`)

            // this.$router.push('recharge')
        },
        async showWithdraw() {
            const res = await this.$service.base.track2()
            if (res && !res.auditing) {
                this.$router.push('withdraw', { type: 'ALIPAY'})
            } else {
                this.$router.push('withdraw')
            }
        }
    }
}
</script>
<style lang="scss">
</style>
<style lang="scss" scoped>
.info {
    margin: 24rpx 28rpx 30rpx;
    border-radius: 20rpx;
    overflow: hidden;
    position: relative;
    height: 278rpx;
    background: linear-gradient(270deg, #d070ff 0%, #8b3dff 100%);
    box-shadow: 0px 0px 10rpx 0px rgba(167, 110, 244, 0.5);
    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 278rpx;
    }
}
.list {
    margin: 0 28rpx 28rpx;
    border-radius: 20rpx;
    overflow: hidden;
    background: #fff;
    .cell {
        padding: 36rpx 30rpx;
    }
}
.btn-withdraw,
.btn-recharge {
    width: 180rpx;
    height: 64rpx;
    line-height: 60rpx;
    text-align: center;
    border-radius: 32rpx;
    z-index: 1000;
}
.btn-withdraw {
    color: #fff;
    border: 2rpx solid #fff;
}
.btn-recharge {
    background: #fff;
    border: 2rpx solid #fff;
    color: #a24eff;
}
</style>