<template>
    <view class="introduce" v-if='loaded'>
        <image class="richTxt" :src="base.cover" mode="widthFix" />
        <view class="nowbuy" @click="nowBuy" v-if="!is_recharge"> <view class="btn">￥{{base.price}} 立即购买 </view> </view>
        <view class="nowbuy nonebuy"  v-else> <view class="btn"> 已开通 </view> </view>
    </view>
</template>
<script>
    import {
        recharge,zyPay
    } from '@/apis/interfaces/index.js'
    export default {
        data() {
            return {
                loaded:false,
                base: '',
                is_recharge: true,
            }
        },
        onLoad(e) {
            this.getInfo()
        },
        methods:{
            getInfo(){
                recharge().then(res => {
                    this.base = res.base
                    this.is_recharge = res.is_recharge
                    this.loaded = true
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: 'none',
                        mask: true,
                        duration: 2000
                    })
                })
            },
            nowBuy(){
                zyPay(this.base.service_id).then(res => {
                    uni.showToast({
                        title: '支付成功',
                        icon: 'none',
                        mask: true,
                        duration: 2000
                    })
                    this.is_recharge = true
                    
                }).catch(err => {
                    console.log(err)
                    uni.showToast({
                        title: err.message,
                        icon: 'none',
                        mask: true,
                        duration: 2000
                    })
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .introduce{
        padding-bottom: 120rpx;
        .nowbuy{
            position: fixed;
            bottom: 0;
            height: 120rpx;
            padding-bottom: 20rpx;
            text-align: center;
            width: 100%;
            color: #fff;
            font-size: 32rpx;
            font-weight: bold;
            background-color: #fff;
            .btn{
                height: 90rpx;
                line-height: 90rpx;
                margin: 20rpx $margin*2 0 $margin*2;
                border-radius: 80rpx;
                background: linear-gradient( to right, #e5584c,#ee7b46);
            }
        }
        .nonebuy{
            color: #333;
            font-weight: none;
            .btn{
                background: linear-gradient( to right, #ececec,#ececec);
            }
        }
        .richTxt{
            width: 100%;
        }
    }

</style>
