|
|
@@ -22,6 +22,33 @@ var checkPowerAndSwitchTemplate = `
|
|
|
</div>
|
|
|
</div>
|
|
|
`
|
|
|
+var checkVipExpireDialogTemplate = `
|
|
|
+<div
|
|
|
+ class="modal fade check-vip-expire-modal"
|
|
|
+ id="checkVipExpireModal"
|
|
|
+ tabindex="-1"
|
|
|
+ role="dialog"
|
|
|
+ aria-labelledby="checkVipExpire"
|
|
|
+ aria-hidden="true"
|
|
|
+>
|
|
|
+ <div class="modal-dialog check-vip-expire-box is-show" style="width: 368px; height: 460px;">
|
|
|
+ <div class="check-vip-expire-container">
|
|
|
+ <div class="check-vip-expire-header"></div>
|
|
|
+ <div class="check-vip-expire-footer">
|
|
|
+ <div class="text-container">
|
|
|
+ <p>为避免遗漏重大项目，请及时续费</p>
|
|
|
+ <p class="activity-tip" style="display:none;"></p>
|
|
|
+ </div>
|
|
|
+ <button class="confirm-button clickable">
|
|
|
+ 立即续费
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+`
|
|
|
+
|
|
|
+
|
|
|
var checkPowerAndSwitchStyle = `
|
|
|
<style>
|
|
|
.check-power-and-switch-box {
|
|
|
@@ -87,9 +114,91 @@ var checkPowerAndSwitchStyle = `
|
|
|
</style>
|
|
|
`
|
|
|
|
|
|
+var checkVipExpireStyle = `
|
|
|
+<style>
|
|
|
+.check-vip-expire-box {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: transparent url(/images/index/vip-expire-dialog-bg.png) no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
+}
|
|
|
+.check-vip-expire-modal {
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+}
|
|
|
+.check-vip-expire-container {
|
|
|
+ position: relative;
|
|
|
+ height: 340px;
|
|
|
+ width: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+.check-vip-expire-header,
|
|
|
+.check-vip-expire-footer {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #5f391a;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.check-vip-expire-header {
|
|
|
+ top: 10px;
|
|
|
+}
|
|
|
+.check-vip-expire-header .time {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.check-vip-expire-footer {
|
|
|
+ bottom: 18px;
|
|
|
+}
|
|
|
+.text-container {
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+.text-container.expire-text-center {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.activity-tip {
|
|
|
+ margin-top: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 2px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: linear-gradient(90deg, #FF9347 0%, #FF4236 100%);
|
|
|
+}
|
|
|
+
|
|
|
+.confirm-button {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px 0;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #fae7ca;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: linear-gradient(117.49deg, #3E3835 8.4%, #242120 100%);
|
|
|
+}
|
|
|
+</style>
|
|
|
+`
|
|
|
+
|
|
|
var checkPowerAndSwitch = {
|
|
|
$modal: '',
|
|
|
targetIdentity: {},
|
|
|
+ // 初始化下一个弹窗
|
|
|
+ showNext: function() {},
|
|
|
init: function () {
|
|
|
this.getUserHighestIdentity()
|
|
|
},
|
|
|
@@ -203,8 +312,167 @@ var checkPowerAndSwitch = {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+var checkVipExpireDialog = {
|
|
|
+ $modal: '',
|
|
|
+ pInfo: {},
|
|
|
+ // 初始化下一个弹窗
|
|
|
+ showNext: function() {
|
|
|
+ checkPowerAndSwitch.init()
|
|
|
+ },
|
|
|
+ init: function () {
|
|
|
+ this.vipRenewReminder()
|
|
|
+ },
|
|
|
+ initDOM: function () {
|
|
|
+ this.insertHTMLToPage()
|
|
|
+ this.insertStyleSheet()
|
|
|
+ this.bindEvents()
|
|
|
+ },
|
|
|
+ insertHTMLToPage: function() {
|
|
|
+ var dom = $(checkVipExpireDialogTemplate)
|
|
|
+ $('body').append(dom)
|
|
|
+ dom.modal('show')
|
|
|
+ this.$modal = dom
|
|
|
+ },
|
|
|
+ insertStyleSheet: function() {
|
|
|
+ var stylesheet = $(checkVipExpireStyle)
|
|
|
+ $('head').append(stylesheet)
|
|
|
+ },
|
|
|
+ bindEvents: function() {
|
|
|
+ var _this = this
|
|
|
+ this.$modal.next('.modal-backdrop').on('click', function() {
|
|
|
+ _this.onDialogClose()
|
|
|
+ })
|
|
|
+ this.$modal.find('.confirm-button').on('click', function() {
|
|
|
+ _this.onClickConfirm()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showDialog(f) {
|
|
|
+ if (f) {
|
|
|
+ this.$modal.modal('show')
|
|
|
+ } else {
|
|
|
+ this.$modal.modal('hide')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onDialogClose: function() {
|
|
|
+ this.vipRenewReminder(true)
|
|
|
+ this.showDialog(false)
|
|
|
+ this.showNext()
|
|
|
+ },
|
|
|
+ onClickConfirm: function() {
|
|
|
+ this.rechargeNow()
|
|
|
+ },
|
|
|
+ renderDialogContentText: function() {
|
|
|
+ if (!this.$modal) return
|
|
|
+ var titleText = this.calcDialogTitleText()
|
|
|
+ this.$modal.find('.check-vip-expire-header').html(titleText)
|
|
|
+ var activityText = this.calcDialogActivityTipText()
|
|
|
+ if (activityText) {
|
|
|
+ this.$modal.find('.activity-tip').html(activityText).show()
|
|
|
+ } else {
|
|
|
+ this.$modal.find('.text-container').addClass('expire-text-center')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ calcDialogTitleText: function() {
|
|
|
+ var endDays = this.pInfo.endDays
|
|
|
+ var t = endDays
|
|
|
+ var arr = []
|
|
|
+ if (t <= 1) {
|
|
|
+ arr = [
|
|
|
+ '您的超级订阅将于',
|
|
|
+ '<strong class="time"> 今天 </strong>',
|
|
|
+ '到期'
|
|
|
+ ]
|
|
|
+ } else {
|
|
|
+ arr = [
|
|
|
+ '您的超级订阅还有',
|
|
|
+ '<strong class="time"> '+t+'天 </strong>',
|
|
|
+ '到期'
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ return arr.join('')
|
|
|
+ },
|
|
|
+ calcDialogActivityTipText: function() {
|
|
|
+ var activityInfo = this.pInfo.activityInfo || {}
|
|
|
+ var activity = activityInfo.activity
|
|
|
+ var arr = []
|
|
|
+ if ($.isArray(activity) && activity.length >= 1) {
|
|
|
+ var activity1 = activity[0]
|
|
|
+ var discount = activity1.discount
|
|
|
+ if ($.isArray(discount) && discount.length >= 1) {
|
|
|
+ arr.push('限时活动：')
|
|
|
+ var discount1 = discount[0]
|
|
|
+ // type 0满减、1折扣券、2满赠、3促销、4限时折扣、5限时减免
|
|
|
+ // type 035满减 14满折 2满赠
|
|
|
+ var lotteryType = discount1.type
|
|
|
+ if (lotteryType === 0 || lotteryType === 3 || lotteryType === 5) {
|
|
|
+ // 满减：续费最高立减1999元（变量，小数不展示，不四舍五入）
|
|
|
+ var reduce = discount1.reduce
|
|
|
+ var text = '续费最高立减'+reduce+'元'
|
|
|
+ arr.push(text)
|
|
|
+ } else if (lotteryType === 1 || lotteryType === 4) {
|
|
|
+ // 满折：续费1年（变量）立享6折（变量）优惠
|
|
|
+ var zhe = discount1.discount * 10
|
|
|
+ var text = '续费'+activityInfo.info+'立享'+zhe+'折优惠'
|
|
|
+ arr.push(text)
|
|
|
+ } else if (lotteryType === 2) {
|
|
|
+ // 满赠：现在续费1年（变量）再送1年（注“12个月”按照1年展示）
|
|
|
+ // timeType 时间类型：1/天、2/月，3/年
|
|
|
+ var zengTime = discount1.time
|
|
|
+ var zengTimeType = discount1.timeType
|
|
|
+ var timeTypeMap = {
|
|
|
+ 1: '天',
|
|
|
+ 2: '个月',
|
|
|
+ 3: '年'
|
|
|
+ }
|
|
|
+ var suffixText = timeTypeMap[zengTimeType]
|
|
|
+ var zeng = zengTime + suffixText
|
|
|
+ if (zeng === '12个月') {
|
|
|
+ zeng = '1年'
|
|
|
+ }
|
|
|
+ var text = '现在续费'+activityInfo.info+'再送'+zeng
|
|
|
+ arr.push(text)
|
|
|
+ } else {
|
|
|
+ arr = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return arr.join('')
|
|
|
+ },
|
|
|
+ vipRenewReminder: function(clear) {
|
|
|
+ var _this = this
|
|
|
+ var payload = {
|
|
|
+ clearRedis: clear ? true : undefined
|
|
|
+ }
|
|
|
+ $.ajax({
|
|
|
+ url: '/subscribepay/vipsubscribe/vipRenewReminder',
|
|
|
+ type: 'POST',
|
|
|
+ data: payload,
|
|
|
+ success: function(res) {
|
|
|
+ if (res && res.data && res.data.endDays !== undefined) {
|
|
|
+ _this.pInfo = res.data
|
|
|
+ _this.initDOM()
|
|
|
+ _this.renderDialogContentText()
|
|
|
+ _this.showDialog(true)
|
|
|
+ } else {
|
|
|
+ _this.showNext()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function() {
|
|
|
+ _this.showNext()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ rechargeNow: function() {
|
|
|
+ this.closeDialog()
|
|
|
+ setTimeout(() => {
|
|
|
+ window.open('/swordfish/page_big_pc/free/svip/buy?type=renew')
|
|
|
+ }, 50)
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
$(function() {
|
|
|
- checkPowerAndSwitch.init();
|
|
|
+ checkVipExpireDialog.init();
|
|
|
+ // checkPowerAndSwitch.init();
|
|
|
})
|
|
|
|
|
|
|
