|
|
@@ -0,0 +1,260 @@
|
|
|
+<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>
|
huan-jie
