xiuhuwangqiu/bundle/recharge/card.vue

<template>
    <view class="" style="padding-bottom: 20rpx;">
        <navbar title="充值卡列表"></navbar>

        <view class="card-box">
            <view class="card-item">
                <image src="https://xh.stnav.com/uploads/sport/byk.png" class="card-img" alt="" />

                <view class="card-title">白银卡</view>
                <view class="card-balance">￥{{ userBalance.balance1 }}</view>
                <view class="card-discount">
                    <text class="card-discount1">{{ balance.discount1 }}</text>
                    <text class="card-discount2">折</text>
                </view>
            </view>

            <view class="card-item">
                <image src="https://xh.stnav.com/uploads/sport/hjk.png" class="card-img" alt="" />

                <view class="card-title">黄金卡</view>
                <view class="card-balance">￥{{ userBalance.balance2 }}</view>
                <view class="card-discount">
                    <text class="card-discount1">{{ balance.discount2 }}</text>
                    <text class="card-discount2">折</text>
                </view>
            </view>

            <view class="card-item">
                <image src="https://xh.stnav.com/uploads/sport/bjk.png" class="card-img" alt="" />

                <view class="card-title">铂金卡</view>
                <view class="card-balance">￥{{ userBalance.balance3 }}</view>
                <view class="card-discount">
                    <text class="card-discount1">{{ balance.discount3 }}</text>
                    <text class="card-discount2">折</text>
                </view>
            </view>

            <view class="card-item">
                <image src="https://xh.stnav.com/uploads/sport/zsk.png" class="card-img" alt="" />

                <view class="card-title">钻石卡</view>
                <view class="card-balance">￥{{ userBalance.balance4 }}</view>
                <view class="card-discount">
                    <text class="card-discount1">{{ balance.discount4 }}</text>
                    <text class="card-discount2">折</text>
                </view>
            </view>

            <view class="card-item">
                <image src="https://xh.stnav.com/uploads/sport/zzk.png" class="card-img" alt="" />

                <view class="card-title">至尊卡</view>
                <view class="card-balance">￥{{ userBalance.balance5 }}</view>
                <view class="card-discount">
                    <text class="card-discount1">{{ balance.discount5 }}</text>
                    <text class="card-discount2">折</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import navbar from '@/components/navbar.vue';
    export default {
        components: {
            navbar,
        },

        data() {
            return {
                balance: {},
                userBalance: {}
            }
        },

        onLoad() {
            let self = this;
            uni.showLoading({
                title: '加载中'
            });
            // 获取充值
            self._post(
                'ground.ground/groundSetting',
                {
                    app_id: self.getAppId(),
                },
                function(res) {
                    self.balance = res.data.lists.balance;
                }
            )

            // 获取充值
            self._post('user.index/detail', {
                source: self.getPlatform()
            }, function(res) {
                console.log("🚀 ~ res:", res)
                self.userBalance = res.data.userInfo;
                self.loadding = false;
                uni.hideLoading();
            });
        },
        
        methods: {
            // 选择会员卡
            selectCard() {
                console.log("选择会员卡");
            },

            // 确认选择
            confirmCard() {
                console.log("确认选择");
            }
        }
    }

</script>

<style lang="scss">
    page {
        background-color: #fff;
    }

    .card-box {
        margin: 40rpx 30rpx;

        .card-item {
            width: 690rpx;
            height: 260rpx;
            position: relative;
            box-sizing: border-box;
            margin-bottom: 20rpx;

            .card-img {
                width: 690rpx;
                height: 260rpx;
            }

            .card-title {
                position: absolute;
                top: 42rpx;
                left: 38rpx;
                font-size: 40rpx;
                color: #303133;
                line-height: 56rpx
            }

            .card-balance {
                position: absolute;
                bottom: 30rpx;
                left: 38rpx;
                font-weight: 500;
                font-size: 40rpx;
                color: #303133;
                line-height: 56rpx;
            }

            .card-discount {
                position: absolute;
                top: 20rpx;
                right: 78rpx;
                color: #FE6752;
                font-weight: bold;
                
                .card-discount1 {
                    font-size: 44rpx;
                    margin-right: 10rpx;
                }

                .card-discount2 {
                    font-size: 30rpx;
                }
            }
        }
    }
</style>