proginn-frontend/components/type/vip/buy-dev-dialog.vue

<template>
    <el-dialog class="buy-dev-wrapper" :visible.sync="showDialog" :before-close="handleClose">
        <div slot="title" class="dialog-title">
            <img src="~@/assets/img/vip/vip_buy_icon@2x.png" alt="vip_icon" />
            <span>购买开发者会员</span>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button class="buy-btn" type="primary" @click="handleClickBuy">
                {{vipDetail.user_info && vipDetail.user_info.vip_type >0 ? "续费" : "开通"}}
            </el-button>
        </div>
        <div class="buy-dev-box">
            <div class="buy-dev-content">
                <!-- 4.27 todo: 包年、包季与后端联调 -->
                <div
                    class="buy-dev-item"
                    :class="{'active': number == '12+'}"
                    v-if="item['can_buy_yearly'] === '0'"
                    @click="clickNumber('12+')">
                    <div class="name">连续包年</div>
                    <div class="price">￥{{ Number(item['yearly_real_price']).toFixed(2) }}</div>
                    <div class="price-per-month">￥{{ (Number(item['yearly_real_price']) / 12).toFixed(2) }}/月</div>
                </div>
                <div
                    class="buy-dev-item"
                    :class="{'active': number == '3+'}"
                    v-if="item['can_buy_yearly'] === '0'"
                    @click="clickNumber('3+')">
                    <div class="name">连续包季</div>
                    <div class="price">￥{{ Number(item['yearly_real_price']).toFixed(2) }}</div>
                    <div class="price-per-month">￥{{ (Number(item['yearly_real_price']) / 12).toFixed(2) }}/月</div>
                </div>
                <div
                    class="buy-dev-item"
                    :class="{'active': number == '12'}"
                    v-if="item['can_buy_yearly'] === '0'"
                    @click="clickNumber('12')">
                    <div class="name">12个月</div>
                    <div class="price">￥{{ Number(item['yearly_real_price']).toFixed(2) }}</div>
                    <div class="price-per-month">￥{{ (Number(item['yearly_real_price']) / 12).toFixed(2) }}/月</div>
                </div>
                <div
                    class="buy-dev-item"
                    :class="{'active': number == '6'}"
                    v-if="item['can_buy_half_yearly'] === '1'"
                    @click="clickNumber('6')">
                    <div class="name">6个月</div>
                    <div class="price">￥{{ Number(item['half_yearly_real_price']).toFixed(2) }}</div>
                    <div class="price-per-month">￥{{ (Number(item['half_yearly_real_price']) / 12).toFixed(2) }}/月</div>
                </div>
                <div
                    class="buy-dev-item"
                    :class="{'active': number == '3'}"
                    v-if="item['can_buy_quarterly'] === '0'"
                    @click="clickNumber('3')">
                    <div class="name">3个月</div>
                    <div class="price">￥{{ Number(item['quarterly_real_price']).toFixed(2) }}</div>
                    <div class="price-per-month">￥{{ (Number(item['quarterly_real_price']) / 12).toFixed(2) }}/月</div>
                </div>
            </div>
            <!-- 选择连续包年时展示 -->
            <div v-if="number == '12+'" class="buy-dev-tips">
                <span>到期按{{ Number(item['yearly_real_price']).toFixed(2) }}元每年自动续约，可随时取消</span>
                <el-tooltip placement="bottom-end">
                    <div slot="content" class="">
                        <p>自动续费说明</p>
                        <p>1. 会员权益到期前一天，为您自动续费；</p>
                        <p>2. 扣款前消息通知，完全透明；</p>
                        <p>3. 可随时取消服务，取消后不再自动续费。</p>
                    </div>
                    <img src="~@/assets/img/vip/tips_icon@2x.png" class="tips-img" >
                </el-tooltip>
            </div>
            <!-- 选择连续包季时展示 -->
            <div v-if="number == '3+'" class="buy-dev-tips">
                <span>到期按{{ Number(item['yearly_real_price']).toFixed(2) }}元每季自动续约，可随时取消</span>
                <el-tooltip placement="bottom-end">
                    <div slot="content" class="">
                        <p>自动续费说明</p>
                        <p>1. 会员权益到期前一天，为您自动续费；</p>
                        <p>2. 扣款前消息通知，完全透明；</p>
                        <p>3. 可随时取消服务，取消后不再自动续费。</p>
                    </div>
                    <img src="~@/assets/img/vip/tips_icon@2x.png" class="tips-img" >
                </el-tooltip>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'BuyDevDialog',
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
        // 购买开发者会员的配置信息
        item: Object,
        handleClose: Function,
        vipDetail: Object
    },
    data () {
        return {
            number: '12+'
        }
    },
    methods: {
        /**
         * 切换选择会员时间
         */
        clickNumber (number) {
            this.number = number;
        },
        /**
         * 点击开通/续费时
         */
        handleClickBuy () {
            if (this.number == '12+') {
                this.$message('连续包年')
            } else if (this.number == '3+') {
                this.$message('连续包季')
            } else if (this.number == '12') {
                this.$message('购买12个月')
            } else if (this.number == '6') {
                this.$message('购买6个月')
            } else if (this.number == '3') {
                this.$message('购买3个月')
            }
        }
    }
}
</script>

<style lang="scss">
.buy-dev-wrapper {
    .el-dialog {
        width: 669px;
    }
    .el-dialog__headerbtn {
        top: 32px;
        right: 30px;
    }
    .el-dialog__header {
        padding: 30px 30px 10px;
    }
    .el-dialog__footer {
        padding: 0 30px 30px;
    }
}
</style>
<style lang="scss" scoped>
.buy-dev-box {
    width: 594px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .buy-dev-content {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .buy-dev-item {
            width: 190px;
            height: 120px;
            margin: 0 12px 14px 0;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.05);
            border-radius: 7px;
            box-shadow: 0px 3px 12px 0px rgba(8,27,50,0.05);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            &:nth-of-type(3n) {
                margin-right: 0;
            }
            &.active {
                border: 2px solid #308eff;
            }
            .name {
                font-size: 18px;
                font-family: PingFangSC, PingFangSC-Semibold;
                font-weight: 600;
                text-align: center;
                color: #308eff;
                line-height: 25px;
            }
            .price {
                margin-top: 10px;
                font-size: 16px;
                font-family: PingFangSC, PingFangSC-Semibold;
                font-weight: 600;
                text-align: center;
                color: #222222;
                line-height: 22px;
            }
            .price-per-month {
                font-size: 12px;
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                text-align: center;
                color: #999999;
                line-height: 17px;
            }
        }
    }
    .buy-dev-tips {
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
        display: flex;
        align-items: center;
        .tips-img {
            margin-left: 2px;
            width: 14px;
            height: 14px;
            cursor: pointer;
        }
    }
}
.dialog-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
        width: 31px;
        height: 25px;
        margin-right: 8px;
    }
    span {
        font-size: 23px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        color: #222222;
    }
}
.dialog-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    .buy-btn {
        width: 290px;
        height: 48px;
        background: #e1a83f;
        border: none;
        border-radius: 10px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        text-align: center;
        color: #222222;
        line-height: 22px;
    }
}
</style>