diff --git a/view/molistar/modules/vip_Center/css/index.css b/view/molistar/modules/vip_Center/css/index.css index ac33617..17b514b 100644 --- a/view/molistar/modules/vip_Center/css/index.css +++ b/view/molistar/modules/vip_Center/css/index.css @@ -30,6 +30,12 @@ body { background-size: cover; width: 100%; height: 8rem; + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 9; } .header .swiper { padding-top: 2.9333333333rem; @@ -75,6 +81,9 @@ body { text-transform: none; } +.content { + margin-top: 8rem; +} .content .permission .top { display: flex; align-items: center; @@ -117,4 +126,338 @@ body { font-style: normal; text-transform: none; padding-bottom: 0.3466666667rem; +} +.content .exclusive_discounts { + margin-top: 0.64rem; + padding-bottom: 4rem; +} +.content .exclusive_discounts .top { + display: flex; + align-items: center; + justify-content: center; +} +.content .exclusive_discounts .top img { + width: 1.1466666667rem; + height: 0.4266666667rem; +} +.content .exclusive_discounts .top .title_name { + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: 0.4266666667rem; + color: #FFE3AF; + line-height: 44px; + text-align: center; + font-style: normal; + text-transform: none; + margin: 0 0.32rem; +} +.content .exclusive_discounts .top .title_name .num { + font-family: PingFang SC, PingFang SC; + font-weight: 500; + font-size: 0.3733333333rem; + color: #FFE3AF; + text-align: center; + font-style: normal; + text-transform: none; + line-height: 0.1333333333rem; +} +.content .exclusive_discounts .box_warp { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 0.32rem; + grid-template-rows: auto; + padding: 0 0.4533333333rem; +} +.content .exclusive_discounts .box_warp .content_box { + text-align: center; + margin-top: 0.6933333333rem; +} +.content .exclusive_discounts .box_warp .content_box img { + width: 1.12rem; + height: 1.12rem; +} +.content .exclusive_discounts .box_warp .content_box .name { + font-family: PingFang SC, PingFang SC; + font-weight: 400; + font-size: 0.3466666667rem; + color: #FFE3AF; + text-align: center; + font-style: normal; + text-transform: none; + margin-top: 0.1066666667rem; +} +.content .exclusive_discounts .box_warp .noactive { + opacity: 0.5; +} + +.selectAccount { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 999; + background: rgba(0, 0, 0, 0.5); + display: none; +} +.selectAccount .selectAccount_in { + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 0; + width: 100%; + min-height: 8.6666666667rem; + background: #170D00; + border-radius: 0.5333333333rem 0.5333333333rem 0px 0px; +} +.selectAccount .selectAccount_in .name { + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: 0.4266666667rem; + color: #FFE3AF; + text-align: center; + font-style: normal; + text-transform: none; + position: relative; + padding-top: 0.5333333333rem; +} +.selectAccount .selectAccount_in .name img { + width: 0.5866666667rem; + height: 0.5866666667rem; + position: absolute; + left: 0.24rem; + top: 0.48rem; +} +.selectAccount .selectAccount_in .descPic { + padding: 0.4266666667rem; +} +.selectAccount .selectAccount_in .descPic img { + width: 100%; + height: 4.1866666667rem; +} +.selectAccount .selectAccount_in .authIntro { + font-family: PingFang SC, PingFang SC; + font-weight: 400; + font-size: 0.3733333333rem; + color: #FFE3AF; + text-align: left; + font-style: normal; + text-transform: none; + padding: 0 0.4266666667rem; + opacity: 0.6; +} + +.bottom_renew { + position: fixed; + left: 0; + bottom: 0; + right: 0; + z-index: 990; + padding: 0 0.4266666667rem 0.6933333333rem; + background: #150C00; +} +.bottom_renew .renew_bg { + position: relative; +} +.bottom_renew .wrap { + display: flex; + justify-content: space-between; + align-items: center; + position: absolute; + left: 4%; + right: 2%; + top: 0.0666666667rem; + padding: 0 0.4266666667rem; +} +.bottom_renew .wrap .left { + display: flex; + align-items: center; +} +.bottom_renew .wrap .left img { + width: 0.5333333333rem; + height: 0.5333333333rem; +} +.bottom_renew .wrap .left .buyAmount { + font-family: PingFang SC, PingFang SC; + font-weight: 400; + font-size: 0.4rem; + color: #FFE3AF; + text-align: center; + font-style: normal; + text-transform: none; + margin-left: 0.1066666667rem; +} +.bottom_renew .wrap .renew_btn { + background: url(../images/renew_btn.png) no-repeat; + background-size: 100% 100%; + width: 3.8933333333rem; + height: 1.2533333333rem; + display: flex; + justify-content: center; + align-items: center; + border-radius: 0.4266666667rem; + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: 0.4266666667rem; + color: #633000; + text-align: center; + font-style: normal; + text-transform: none; +} +.bottom_renew .wrap_txt { + font-family: PingFang SC, PingFang SC; + font-weight: 400; + font-size: 0.4rem; + color: #FFE3AF; + text-align: center; + font-style: normal; + text-transform: none; + position: absolute; + left: 4%; + right: 2%; + top: 50%; + bottom: 0; + transform: translateY(-50%); + display: none; +} + +.payPopup { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 999; + background: rgba(0, 0, 0, 0.5); + display: none; +} +.payPopup .payPopup_warp { + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 0; + width: 100%; + min-height: 5.8666666667rem; + background: #FFFFFF; + border-radius: 0.4266666667rem 0.4266666667rem 0px 0px; +} +.payPopup .payPopup_warp .title { + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: 0.4266666667rem; + color: #313131; + text-align: center; + font-style: normal; + text-transform: none; + margin-top: 0.32rem; +} +.payPopup .payPopup_warp .buyAmount { + display: flex; + justify-content: center; + align-items: center; + margin-top: 1.1466666667rem; +} +.payPopup .payPopup_warp .buyAmount .num { + font-family: PingFang SC, PingFang SC; + font-weight: 500; + font-size: 0.7466666667rem; + color: #313131; + text-align: center; + font-style: normal; + text-transform: none; + margin-right: 0.1066666667rem; +} +.payPopup .payPopup_warp .buyAmount img { + width: 0.8266666667rem; + height: 0.8266666667rem; +} +.payPopup .payPopup_warp .pay_btn { + background: linear-gradient(270deg, #E29030 0%, #FCC074 100%); + border-radius: 0.4266666667rem; + font-family: PingFang TC, PingFang TC; + font-weight: 500; + font-size: 0.4266666667rem; + color: #FFFFFF; + text-align: center; + font-style: normal; + text-transform: none; + display: flex; + align-items: center; + justify-content: center; + padding: 0.2666666667rem 2.6666666667rem; + margin: 1.12rem 0.4rem 0; +} + +.custom-dialog { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + visibility: hidden; + opacity: 0; + transition: opacity 0.3s ease, visibility 0.3s ease; +} +.custom-dialog.visible { + visibility: visible; + opacity: 1; +} +.custom-dialog .dialog-content { + background: #FFFFFF; + border-radius: 0.2133333333rem; + width: 6.6666666667rem; + max-width: 90%; + padding: 0.32rem; + box-shadow: 0 0.1066666667rem 0.2133333333rem rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; +} +.custom-dialog .dialog-header { + margin-bottom: 0.2133333333rem; + text-align: center; + margin-top: 0.2666666667rem; +} +.custom-dialog .dialog-header .dialog-title { + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: 0.4266666667rem; + color: #313131; + font-style: normal; + text-transform: none; +} +.custom-dialog .dialog-footer { + display: flex; + justify-content: space-between; + margin-top: 0.6666666667rem; +} +.custom-dialog .dialog-footer .dialog-btn { + background: linear-gradient(270deg, #E29030 0%, #FCC074 100%); + border: none; + border-radius: 0.4266666667rem; + font-family: PingFang SC, PingFang SC; + font-size: 0.4266666667rem; + color: #FFFFFF; + text-align: center; + font-style: normal; + text-transform: none; + padding: 0.16rem 0.5333333333rem; + margin-left: 0.2133333333rem; + cursor: pointer; + transition: background 0.3s ease; + width: 2.9333333333rem; +} +.custom-dialog .dialog-footer .dialog-btn:hover { + background: linear-gradient(270deg, #FCC074 0%, #E29030 100%); +} +.custom-dialog .dialog-footer .dialog-cancel { + background: #E0E0E0; + color: #333333; +} +.custom-dialog .dialog-footer .dialog-cancel:hover { + background: #BDBDBD; } \ No newline at end of file diff --git a/view/molistar/modules/vip_Center/css/index.scss b/view/molistar/modules/vip_Center/css/index.scss index 5334ef2..c5edd6d 100644 --- a/view/molistar/modules/vip_Center/css/index.scss +++ b/view/molistar/modules/vip_Center/css/index.scss @@ -37,16 +37,13 @@ body { background-size: cover; width: 100%; height: px2rem(600); - // .swiper { - // height: px2rem(200); - // left: 50%; - // transform: translateX(-50%); + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 9; - // .swiper-wrapper { - // width: 100%; - // height: 100%; - // } - // } .swiper { padding-top: px2rem(220); } @@ -106,6 +103,8 @@ body { } .content { + margin-top: px2rem(600); + .permission { .top { display: flex; @@ -136,6 +135,7 @@ body { grid-gap: px2rem(24); grid-template-rows: auto; padding: 0 px2rem(34); + .content_box { // width: px2rem(332); // height: px2rem(240); @@ -143,7 +143,7 @@ body { border: 1px solid; border-image: linear-gradient(136deg, rgba(255, 201.51765704154968, 76.72566533088684, 1), rgba(255, 255, 255, 1), rgba(133.57143580913544, 93.50000962615013, 0, 1)) 1 1; border-radius: px2rem(32); - // flex: 1; + // flex: 1; p { font-family: PingFang SC, PingFang SC; @@ -159,4 +159,383 @@ body { } } } + + .exclusive_discounts { + margin-top: px2rem(48); + padding-bottom: px2rem(300); + + .top { + display: flex; + align-items: center; + justify-content: center; + + img { + width: px2rem(86); + height: px2rem(32); + } + + .title_name { + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: px2rem(32); + color: #FFE3AF; + line-height: 44px; + text-align: center; + font-style: normal; + text-transform: none; + margin: 0 px2rem(24); + + .num { + font-family: PingFang SC, PingFang SC; + font-weight: 500; + font-size: px2rem(28); + color: #FFE3AF; + text-align: center; + font-style: normal; + text-transform: none; + line-height: px2rem(10); + } + + } + } + + .box_warp { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: px2rem(24); + grid-template-rows: auto; + padding: 0 px2rem(34); + + .content_box { + text-align: center; + margin-top: px2rem(52); + + img { + width: px2rem(84); + height: px2rem(84); + } + + .name { + font-family: PingFang SC, PingFang SC; + font-weight: 400; + font-size: px2rem(26); + color: #FFE3AF; + text-align: center; + font-style: normal; + text-transform: none; + margin-top: px2rem(8); + } + + } + + .noactive { + opacity: 0.5; + } + } + } +} + +.selectAccount { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 999; + background: rgba(0, 0, 0, 0.5); + display: none; + + .selectAccount_in { + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 0; + width: 100%; + min-height: px2rem(650); + background: #170D00; + border-radius: px2rem(40) px2rem(40) 0px 0px; + + .name { + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: px2rem(32); + color: #FFE3AF; + text-align: center; + font-style: normal; + text-transform: none; + position: relative; + padding-top: px2rem(40); + + img { + width: px2rem(44); + height: px2rem(44); + position: absolute; + left: px2rem(18); + top: px2rem(36); + } + } + + .descPic { + padding: px2rem(32); + + img { + width: 100%; + height: px2rem(314); + } + } + + .authIntro { + font-family: PingFang SC, PingFang SC; + font-weight: 400; + font-size: px2rem(28); + color: #FFE3AF; + text-align: left; + font-style: normal; + text-transform: none; + padding: 0 px2rem(32); + opacity: 0.6; + } + } +} + +.bottom_renew { + position: fixed; + left: 0; + // top: 0; + bottom: 0; + right: 0; + z-index: 990; + padding: 0 px2rem(32) px2rem(52); + background: #150C00; + + .renew_bg { + position: relative; + } + + .wrap { + display: flex; + justify-content: space-between; + align-items: center; + position: absolute; + left: 4%; + right: 2%; + top: px2rem(5); + padding: 0 px2rem(32); + + .left { + display: flex; + align-items: center; + + img { + width: px2rem(40); + height: px2rem(40); + } + + .buyAmount { + font-family: PingFang SC, PingFang SC; + font-weight: 400; + font-size: px2rem(30); + color: #FFE3AF; + text-align: center; + font-style: normal; + text-transform: none; + margin-left: px2rem(8); + } + } + + .renew_btn { + background: url(../images/renew_btn.png) no-repeat; + background-size: 100% 100%; + width: px2rem(292); + height: px2rem(94); + display: flex; + justify-content: center; + align-items: center; + border-radius: px2rem(32); + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: px2rem(32); + color: #633000; + text-align: center; + font-style: normal; + text-transform: none; + } + } + + .wrap_txt { + font-family: PingFang SC, PingFang SC; + font-weight: 400; + font-size: px2rem(30); + color: #FFE3AF; + text-align: center; + font-style: normal; + text-transform: none; + position: absolute; + left: 4%; + right: 2%; + top: 50%; + bottom: 0; + transform: translateY(-50%); + display: none; + } +} + +.payPopup { + position: fixed; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 999; + background: rgba(0, 0, 0, 0.5); + display: none; + + .payPopup_warp { + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 0; + width: 100%; + min-height: px2rem(440); + background: #FFFFFF; + border-radius: px2rem(32) px2rem(32) 0px 0px; + + // padding:0 px2rem(30); + .title { + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: px2rem(32); + color: #313131; + text-align: center; + font-style: normal; + text-transform: none; + margin-top: px2rem(24); + } + + .buyAmount { + display: flex; + justify-content: center; + align-items: center; + margin-top: px2rem(86); + + .num { + font-family: PingFang SC, PingFang SC; + font-weight: 500; + font-size: px2rem(56); + color: #313131; + text-align: center; + font-style: normal; + text-transform: none; + margin-right: px2rem(8); + } + + img { + width: px2rem(62); + height: px2rem(62); + } + } + + .pay_btn { + background: linear-gradient(270deg, #E29030 0%, #FCC074 100%); + border-radius: px2rem(32); + font-family: PingFang TC, PingFang TC; + font-weight: 500; + font-size: px2rem(32); + color: #FFFFFF; + text-align: center; + font-style: normal; + text-transform: none; + display: flex; + align-items: center; + justify-content: center; + padding: px2rem(20) px2rem(200); + margin: px2rem(84) px2rem(30) 0; + } + } +} + +// 自定义对话框样式 +.custom-dialog { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; + visibility: hidden; + opacity: 0; + transition: opacity 0.3s ease, visibility 0.3s ease; + + &.visible { + visibility: visible; + opacity: 1; + } + + .dialog-content { + background: #FFFFFF; + border-radius: px2rem(16); + width: px2rem(500); + max-width: 90%; + padding: px2rem(24); + box-shadow: 0 px2rem(8) px2rem(16) rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; + } + + .dialog-header { + // display: flex; + // justify-content: space-between; + // align-items: center; + margin-bottom: px2rem(16); + text-align: center; + margin-top: px2rem(20); + .dialog-title { + font-family: PingFang SC, PingFang SC; + font-weight: 600; + font-size: px2rem(32); + color: #313131; + font-style: normal; + text-transform: none; + } + + } + + .dialog-footer { + display: flex; + justify-content: space-between; + margin-top: px2rem(50); + + .dialog-btn { + background: linear-gradient(270deg, #E29030 0%, #FCC074 100%); + border: none; + border-radius: px2rem(32); + font-family: PingFang SC, PingFang SC; + font-size: px2rem(32); + color: #FFFFFF; + text-align: center; + font-style: normal; + text-transform: none; + padding: px2rem(12) px2rem(40); + margin-left: px2rem(16); + cursor: pointer; + transition: background 0.3s ease; + width: px2rem(220); + &:hover { + background: linear-gradient(270deg, #FCC074 0%, #E29030 100%); + } + } + + .dialog-cancel { + background: #E0E0E0; + color: #333333; + + &:hover { + background: #BDBDBD; + } + } + } } \ No newline at end of file diff --git a/view/molistar/modules/vip_Center/images/conis2.png b/view/molistar/modules/vip_Center/images/conis2.png new file mode 100644 index 0000000..874f3d4 Binary files /dev/null and b/view/molistar/modules/vip_Center/images/conis2.png differ diff --git a/view/molistar/modules/vip_Center/images/renew.png b/view/molistar/modules/vip_Center/images/renew.png new file mode 100644 index 0000000..2d2835d Binary files /dev/null and b/view/molistar/modules/vip_Center/images/renew.png differ diff --git a/view/molistar/modules/vip_Center/images/renew_btn.png b/view/molistar/modules/vip_Center/images/renew_btn.png new file mode 100644 index 0000000..2c8bf63 Binary files /dev/null and b/view/molistar/modules/vip_Center/images/renew_btn.png differ diff --git a/view/molistar/modules/vip_Center/index.html b/view/molistar/modules/vip_Center/index.html index cfb593f..2e1863b 100644 --- a/view/molistar/modules/vip_Center/index.html +++ b/view/molistar/modules/vip_Center/index.html @@ -8,7 +8,6 @@ - @@ -18,17 +17,16 @@

vip中心

-
-
-
+
+
- +

Identification

- +
+
+
+
+ Privileges + +
+
+ +
+
+
+
+ +
+ +
+
+ + buyAmount +
+
Renew
+
+
VIP7 is only through activity
+
+ +
+
+
pay
+
+ 35000 + +
+
Confirm payment
+
+
+ +
+
+
+ Custom Dialog +
+
+ + +
+
+
@@ -57,4 +114,3 @@ - diff --git a/view/molistar/modules/vip_Center/js/index.js b/view/molistar/modules/vip_Center/js/index.js index 2b62caf..c26e196 100644 --- a/view/molistar/modules/vip_Center/js/index.js +++ b/view/molistar/modules/vip_Center/js/index.js @@ -44,177 +44,284 @@ $(function () { // 頂部返回事件 $('.back').click(() => { if (browser.android) { - window.androidJsObj.closeWebView() + window.androidJsObj.closeWebView() } else { - window.webkit.messageHandlers.closeWebView.postMessage(null) + window.webkit.messageHandlers.closeWebView.postMessage(null) } - }) + }) fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言 langReplace = window.lang.replace; localLang = window.lang; renderImgOption(); - swiperFun() + // swiperFun() }, 100) }) var vipInfos; var mySwiper; +var vipAuthInfos; function renderImgOption() { networkRequest({ type: 'get', url: urlPrefix + '/vip/v2/getVipPageInfo', success(res) { - - if(res.code == 200){ - vipInfos = res.data.vipInfos - const swiperWrapper = $('.swiper-wrapper'); - swiperWrapper.empty() - vipInfos.forEach((item, index) => { - if (item.remainSeconds) { - let now = new Date().getTime(); - let date = new Date(now +item.remainSeconds * 1000); // 时间戳单位是秒，需要乘以1000转换为毫秒 - dueDate = dateFormat(date,'yyyy-MM-dd'); - } - const slideHtml = ` + if (res.code == 200) { + vipInfos = res.data.vipInfos + vipAuthInfos = res.data.vipAuthInfos + const swiperWrapper = $('.swiper-wrapper'); + swiperWrapper.empty() + + vipInfos.forEach((item, index) => { + if (item.remainSeconds) { + let now = new Date().getTime(); + let date = new Date(now + item.remainSeconds * 1000); // 时间戳单位是秒，需要乘以1000转换为毫秒 + dueDate = dateFormat(date, 'yyyy-MM-dd'); + } + const slideHtml = `
-

${ item.remainSeconds? 'Due on:'+dueDate : '未获得'}

+

${item.remainSeconds ? 'Due on:' + dueDate : '未获得'}

`; - swiperWrapper.append(slideHtml); - }); + swiperWrapper.append(slideHtml); + }); + // 重新初始化 Swiper + if (mySwiper) { + mySwiper.destroy(); + } + renderPermission(0) + swiperFun(); + - // 重新初始化 Swiper - if (mySwiper) { - mySwiper.destroy(); - } - renderPermission(0) - swiperFun(); } }, }) - // networkRequest({ - // type: 'get', - // url: urlPrefix + '/user/get', - // success(res) { - - - // }, - // }) } // 禮物輪播 function swiperFun() { - mySwiper = new Swiper('.swiper', { - // direction: "vertical", - // loop: true, - // autoplay: { - // delay: 3500,// - // disableOnInteraction: false - // } + mySwiper = new Swiper('.swiper', { slidesPerView: 'auto', // 自动计算每页显示的幻灯片数量 spaceBetween: -40, // 幻灯片之间的间距（负值表示重叠） centeredSlides: true, // 中心化幻灯片 - on:{ + on: { slideChange: function () { const activeSlide = this.activeIndex; // const activeSlideObj = vipInfos[activeSlide] - console.log(activeSlide,'-------') + console.log(activeSlide, '-------') renderPermission(activeSlide) } } }) + // 跳转最高vip等级 + const vip = vipInfos.map((item, index) => ({ item, index })) + .filter(({ item }) => item.remainSeconds) + .map(({ index }) => index); + mySwiper.slideTo(vip[vip.length - 1], 1000); } -function renderPermission(index){ - $('.box_warp').empty() - vipIdentification[index].forEach((item, index) => { - var str =` +function renderPermission(actIndex) { + // 权益渲染 + $('.permission .box_warp').empty() + vipIdentification[actIndex].forEach((item, index) => { + var str = `

${item.name}

` - $('.box_warp').append(str); + $('.permission .box_warp').append(str); }) + // 专有权列表渲染 + $('.exclusive_discounts .title_name .num').text(`(${vipInfos[actIndex].ownAuthTypes.length}/${vipAuthInfos.length})`) + + $('.exclusive_discounts .box_warp').empty() + vipAuthInfos.forEach((item, index) => { + var str = ` +
+ +

${item.authName}

+
+ ` + var $contentBox = $(str); + if (!vipInfos[actIndex].ownAuthTypes.includes(item.authType)) { + $contentBox.addClass('noactive') + } + $('.exclusive_discounts .box_warp').append($contentBox); + }) + // 购买弹窗 + if (vipInfos[actIndex].buyAmount != 0) { + $('.payPopup .payPopup_warp .buyAmount .num').text(vipInfos[actIndex].buyAmount) + $('.bottom_renew .wrap .left .buyAmount').text(`${vipInfos[actIndex].buyAmount}/30`) + $('.payPopup .payPopup_warp .pay_btn').attr('vipLevel', vipInfos[actIndex].vipLevel) + $('.bottom_renew .wrap').show() + $('.bottom_renew .wrap_txt').hide() + } else { + $('.bottom_renew .wrap_txt').text(`${vipInfos[actIndex].vipName} is only through activity`) + $('.bottom_renew .wrap').hide() + $('.bottom_renew .wrap_txt').show() + } } +// 点击购买 +$('.payPopup .payPopup_warp .pay_btn').click(function () { + let vipLevel = $(this).attr('vipLevel') + showLoading(); + networkRequest({ + type: "post", + url: urlPrefix + "/vip/openWithDiamond", + contentType: 'application/json;charset=UTF-8', + data: { + // roomUid:pubInfo.uid, + roomUid:3838, + vipLevel + }, + success: function (res) { + $('.payPopup').hide() + if (res.code == 200) { + } else { + // toastMsg(res.message); + $('.custom-dialog .dialog-content .dialog-title').text(res.message) + $('.custom-dialog').addClass('visible'); + } + hideLoading(layerIndex); + }, + error: function (res) { + hideLoading(layerIndex); + }, + }); +}) + // 点击对话框外部关闭对话框 + $('.custom-dialog').on('click', function (event) { + if ($(event.target).is('.custom-dialog')) { + $('.custom-dialog').removeClass('visible'); + } +}); + // 确认按钮的触发事件 + $('.custom-dialog .dialog-confirm').on('click', function () { + // 执行确认操作 + $('.custom-dialog').removeClass('visible'); + if(browser.app){ + if(browser.android){ + // window.androidJsObj.openChargePage() + tools.nativeUtils.jumpAppointPage('RECHARGE_PAGE') + }else if(browser.ios){ + window.webkit.messageHandlers.openChargePage.postMessage(null) + } +}else{ + toastMsg('请在app内打开') +} +}); +// 取消按钮的触发事件 +$('.custom-dialog .dialog-cancel').on('click', function () { + // 执行确认操作 + $('.custom-dialog').removeClass('visible'); +}); + +// 点击详情弹窗 +$('.exclusive_discounts .box_warp').on('click', '.content_box', function () { + let obj = JSON.parse($(this).attr("obj")) + $('.selectAccount .selectAccount_in .descPic img').attr('src', obj.descPic) + $('.selectAccount .selectAccount_in .authIntro').text(obj.authIntro) + $('.selectAccount').show() +}) +// 关闭详情弹窗 +$('.selectAccount').click(function () { + $('.selectAccount').hide() +}) +$('.selectAccount .selectAccount_in .name img').click(function () { + $('.selectAccount').hide() +}) +// 购买弹窗 +$('.bottom_renew .wrap .renew_btn').on('click', function () { + $('.payPopup').show() +}) +$('.payPopup').click(function () { + $('.payPopup').hide() +}) +$('.payPopup .payPopup_warp').on('click', function () { + return false; +}) +// +$('.selectAccount .selectAccount_in').on('click', function () { + return false; +}) var vipOption = [ - {img:'./images/vip1_bg.png'}, - {img:'./images/vip2_bg.png'}, - {img:'./images/vip3_bg.png'}, - {img:'./images/vip4_bg.png'}, - {img:'./images/vip5_bg.png'}, - {img:'./images/vip6_bg.png'}, - {img:'./images/vip7_bg.png'}, - {img:'./images/vip8_bg.png'}, - {img:'./images/vip9_bg.png'}, + { img: './images/vip1_bg.png' }, + { img: './images/vip2_bg.png' }, + { img: './images/vip3_bg.png' }, + { img: './images/vip4_bg.png' }, + { img: './images/vip5_bg.png' }, + { img: './images/vip6_bg.png' }, + { img: './images/vip7_bg.png' }, + { img: './images/vip8_bg.png' }, + { img: './images/vip9_bg.png' }, ] var vipIdentification = [ [ - {img:'./images/vip1_headimg.png',name:'头像'}, - {img:'./images/vip1_identity.png',name:'头像'}, + { img: './images/vip1_headimg.png', name: '头像' }, + { img: './images/vip1_identity.png', name: '头像' }, ], [ - {img:'./images/vip2_headimg.png',name:'头像'}, - {img:'./images/vip2_identity.png',name:'头像'}, - {img:'./images/vip2_card.png',name:'头像'}, + { img: './images/vip2_headimg.png', name: '头像' }, + { img: './images/vip2_identity.png', name: '头像' }, + { img: './images/vip2_card.png', name: '头像' }, ], [ - {img:'./images/vip3_headimg.png',name:'头像'}, - {img:'./images/vip3_identity.png',name:'头像'}, - {img:'./images/vip3_card.png',name:'头像'}, - {img:'./images/vip3_txk.png',name:'头像'}, + { img: './images/vip3_headimg.png', name: '头像' }, + { img: './images/vip3_identity.png', name: '头像' }, + { img: './images/vip3_card.png', name: '头像' }, + { img: './images/vip3_txk.png', name: '头像' }, ], [ - {img:'./images/vip4_headimg.png',name:'头像'}, - {img:'./images/vip4_identity.png',name:'头像'}, - {img:'./images/vip4_card.png',name:'头像'}, - {img:'./images/vip4_txk.png',name:'头像'}, - {img:'./images/vip4_qp.png',name:'头像'}, + { img: './images/vip4_headimg.png', name: '头像' }, + { img: './images/vip4_identity.png', name: '头像' }, + { img: './images/vip4_card.png', name: '头像' }, + { img: './images/vip4_txk.png', name: '头像' }, + { img: './images/vip4_qp.png', name: '头像' }, ], [ - {img:'./images/vip5_headimg.png',name:'头像'}, - {img:'./images/vip5_identity.png',name:'头像'}, - {img:'./images/vip5_card.png',name:'头像'}, - {img:'./images/vip5_txk.png',name:'头像'}, - {img:'./images/vip5_qp.png',name:'头像'}, - {img:'./images/vip5_jctx.png',name:'头像'}, + { img: './images/vip5_headimg.png', name: '头像' }, + { img: './images/vip5_identity.png', name: '头像' }, + { img: './images/vip5_card.png', name: '头像' }, + { img: './images/vip5_txk.png', name: '头像' }, + { img: './images/vip5_qp.png', name: '头像' }, + { img: './images/vip5_jctx.png', name: '头像' }, ], [ - {img:'./images/vip6_headimg.png',name:'头像'}, - {img:'./images/vip6_identity.png',name:'头像'}, - {img:'./images/vip6_card.png',name:'头像'}, - {img:'./images/vip6_txk.png',name:'头像'}, - {img:'./images/vip6_qp.png',name:'头像'}, - {img:'./images/vip6_jctx.png',name:'头像'}, + { img: './images/vip6_headimg.png', name: '头像' }, + { img: './images/vip6_identity.png', name: '头像' }, + { img: './images/vip6_card.png', name: '头像' }, + { img: './images/vip6_txk.png', name: '头像' }, + { img: './images/vip6_qp.png', name: '头像' }, + { img: './images/vip6_jctx.png', name: '头像' }, ], [ - {img:'./images/vip7_headimg.png',name:'头像'}, - {img:'./images/vip7_identity.png',name:'头像'}, - {img:'./images/vip7_card.png',name:'头像'}, - {img:'./images/vip7_txk.png',name:'头像'}, - {img:'./images/vip7_qp.png',name:'头像'}, - {img:'./images/vip7_jctx.png',name:'头像'}, + { img: './images/vip7_headimg.png', name: '头像' }, + { img: './images/vip7_identity.png', name: '头像' }, + { img: './images/vip7_card.png', name: '头像' }, + { img: './images/vip7_txk.png', name: '头像' }, + { img: './images/vip7_qp.png', name: '头像' }, + { img: './images/vip7_jctx.png', name: '头像' }, ], [ - {img:'./images/vip8_headimg.png',name:'头像'}, - {img:'./images/vip8_identity.png',name:'头像'}, - {img:'./images/vip8_card.png',name:'头像'}, - {img:'./images/vip8_txk.png',name:'头像'}, - {img:'./images/vip8_qp.png',name:'头像'}, - {img:'./images/vip8_jctx.png',name:'头像'}, + { img: './images/vip8_headimg.png', name: '头像' }, + { img: './images/vip8_identity.png', name: '头像' }, + { img: './images/vip8_card.png', name: '头像' }, + { img: './images/vip8_txk.png', name: '头像' }, + { img: './images/vip8_qp.png', name: '头像' }, + { img: './images/vip8_jctx.png', name: '头像' }, ], [ - {img:'./images/vip9_headimg.png',name:'头像'}, - {img:'./images/vip9_identity.png',name:'头像'}, - {img:'./images/vip9_card.png',name:'头像'}, - {img:'./images/vip9_txk.png',name:'头像'}, - {img:'./images/vip9_qp.png',name:'头像'}, - {img:'./images/vip9_jctx.png',name:'头像'}, + { img: './images/vip9_headimg.png', name: '头像' }, + { img: './images/vip9_identity.png', name: '头像' }, + { img: './images/vip9_card.png', name: '头像' }, + { img: './images/vip9_txk.png', name: '头像' }, + { img: './images/vip9_qp.png', name: '头像' }, + { img: './images/vip9_jctx.png', name: '头像' }, ], ] \ No newline at end of file