jy-docs/jydocs-mobile/src/components/Recharge.vue

<template>
    <van-popup v-model="show" round  position="bottom" class="recharge-popup">
        <div class="recharge_top">
            <div class="recharge_title">
                <div class="thumbnail">
                    <img :src="detailData.previewImgId" class="thumbnail_img" alt="">
                </div>
                <div class="recharge_t_right">
                    <div class="t_right_name van-multi-ellipsis--l2">{{detailData.docName}}</div>
                    <div class="t_right_active">
                        <span>{{detailData.price}}剑鱼币</span>
                        <span>共{{detailData.docPageSize}}页</span>
                        <span>{{detailData.docFileSize}}</span>
                    </div>
                </div>
            </div>
            <div class="div_close">
                <img src="../assets/icon/close.png" class="recharge_close" @click="closePopup()" />
            </div>
        </div>
        <div class="recharge_pay_content">
            <div class="pay_title">
                支付方式
            </div>
            <div class="jianyu_pay">
                <span class="jy_money">剑鱼币</span>
                <span class="jy_tip">（剑鱼币不足，剩余{{coins.balance}}剑鱼币）</span>
            </div>
        </div>
        <div class="recharge_footer">
            <button class="j-button-cancel btn_active" @click="closePopup()">取消</button>
            <button class="j-button-sure btn_active" @click="buyMoney">去充值</button>
        </div>
    </van-popup>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Icon, Popup, Sticky } from 'vant'

// @ is an alias to /src
  @Component({
    name: 'Search',
    components: {
      [Popup.name]: Popup,
      [Sticky.name]: Sticky,
      [Icon.name]: Icon
    }
  })
export default class extends Vue {
    @Prop() detailData: any
    @Prop() coins: any
    show = false
    closePopup () {
      this.show = false
    }

    buyMoney () {
      window.location.href = `/page_points_mobile/pay?id=${this.detailData.docId}`
    }
}
</script>

<style lang="scss">
.recharge-popup{
    box-sizing: border-box;
    padding: 0 16px;
    width: 100%;
    // height: 256px;
    .recharge_top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100px;
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
        .recharge_title{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 100%;
            .thumbnail{
                width: 48px;
                height: 60px;
                .thumbnail_img{
                    width: 100%;
                    height: 100%;
                }
            }
            .recharge_t_right{
                margin-left: 8px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 250px;
                height: 80px;
                .t_right_name{
                    color: #171826;
                    font-size: 15px;
                    line-height: 22px;
                }
                .t_right_active{
                    color: #5F5E64;
                    font-size: 14px;
                    line-height: 20px;
                    span{
                        margin-right: 8px;
                    }
                }
            }
        }
        .div_close{
            display: flex;
            align-items: flex-start;
            justify-content: center;
            height: 100%;
            .recharge_close{
                margin-top:24px;
                display: flex;
                width: 20px;
                height: 20px;
            }
        }
    }
    .recharge_pay_content{
        overflow: hidden;
        width: 100%;
        height: 100px;
        border-bottom: 1px solid rgba($color: #000000, $alpha: 0.05);
        .pay_title{
            margin-top: 16px;
            width: 100%;
            height: 24px;
            color: #171826;
            font-size: 16px;
            line-height: 24px;
        }
        .jianyu_pay{
            margin-top: 24px;
            width: 100%;
            height: 20px;
            color: #171826;
            font-size: 14px;
            line-height: 20px;
            .jy_tip{
                color: #FF3A20;
            }
        }
    }
    .recharge_footer{
        width: 100%;
        height: 56px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btn_active{
            width: 165px;
            height: 40px;
        }
        .j-button-cancel{
            border-radius: 4px;
            background: #EDEFF2;
            color: #5F5E64;
            font-size: 16px;
            line-height: 24px;
        }
        .j-button-sure{
            border-radius: 4px;
            background: #2ABED1;
            color: #F7F9FA;
            font-size: 16px;
            line-height: 24px;
        }
    }
}
</style>