<template>
    <view>
        <navbar title="套餐卡"></navbar>

        <view style="margin-top: 20px;">
            <!-- 青年卡 -->
            <view class="pr d-c-c mb-20" v-for="item in list" :key="item.id" @click="jumpPage(`/bundle/combo/details?id=${item.id}`)">
                <view class="pr">
                    <image :src="item.img" style="width: 690rpx; height: 300rpx;" />
                    <view class="kt-eg-name">{{ item.eg_name }}</view>
                    <view class="kt-name">{{ item.name }}</view>
                    <view class="kt-btn-bg">
                        <view :class="item.order ? 'kt-txt2' : 'kt-txt1'">{{ item.order ? '续费' : '立即开通' }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import navbar from '@/components/navbar.vue';

export default {
    components: {
        navbar,
    },
    data() {
        return {
            list: [],
        }
    },
    onLoad() {
        this.handleGetList();
    },
    methods: {
        handleGetList() {
            // 获取套餐卡列表
            let self = this;
            self._post(
                'ground.group/getGroupList',
                null,
                result => {
                    self.list = result.data;
                },
                false,
                () => {
                }
            );
        },

        /*跳转页面*/
        jumpPage(path) {
            this.gotoPage(path);
        },
    }
}
</script>


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

.kt-eg-name {
    position: absolute;
    left: 46rpx;
    top: 52rpx;
    color: #C2863E;
    font-size: 36rpx;
    font-weight: 400;
}

.kt-name {
    position: absolute;
    left: 64rpx;
    top: 118rpx;
    color: #C2863E;
    font-size: 36rpx;
    font-weight: 400;
}

.kt-btn-bg {
    position: absolute;
    left: 34rpx;
    bottom: 44rpx;
    background-image: url(https://xh.stnav.com/uploads/sport/kt-btn.png);
    background-size: 100% 100%;
    width: 258rpx;
    height: 56rpx;
    line-height: 56rpx;
    color: #F62036;
    font-size: 30rpx;
    font-weight: bold;

    & .kt-txt1 {
        padding-left: 60rpx;
    }   
    
    & .kt-txt2 {
        padding-left: 80rpx;
    }
}

.mb-20 {
    margin-bottom: 20px;
}
</style>