完成vip页面逻辑和展示,还差多语言

This commit is contained in:
chenruiye
2025-04-03 18:15:26 +08:00
parent ab0619728a
commit 10fa2aa9c2
7 changed files with 1003 additions and 118 deletions

View File

@@ -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;
}

View File

@@ -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;
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

View File

@@ -8,7 +8,6 @@
<link rel="stylesheet" href="../../common/css/animate.css" />
<link rel="stylesheet" href="./css/index.css?v=1.1" />
<link rel="stylesheet" href="./css/swiper-bundle.min.css" />
</head>
<body>
@@ -18,17 +17,16 @@
<p class="titles">vip中心</p>
</div>
<div class="header">
<div class="swiper" >
<div class="swiper-wrapper">
</div>
<div class="swiper">
<div class="swiper-wrapper"></div>
</div>
</div>
<div class="content">
<div class="permission">
<div class="top">
<img src="./images/left.png" alt="">
<img src="./images/left.png" alt="" />
<p class="title_name">Identification</p>
<img src="./images/right.png" alt="">
<img src="./images/right.png" alt="" />
</div>
<div class="box_warp">
<!-- <div class="content_box">
@@ -38,8 +36,67 @@
</div>
</div>
<div class="exclusive_discounts"></div>
<div class="exclusive_discounts">
<div class="top">
<img src="./images/left.png" alt="" />
<div class="title_name">
Exclusive Privileges
<p class="num">19/19</p>
</div>
<img src="./images/right.png" alt="" />
</div>
<div class="box_warp"></div>
</div>
</div>
<!-- 弹窗 -->
<div class="selectAccount">
<div class="selectAccount_in">
<div class="name">
Privileges
<img src="./images/travel/back.png" alt="" />
</div>
<div class="descPic">
<img src="" alt="" />
</div>
<div class="authIntro"></div>
</div>
</div>
<!-- 续费按钮 -->
<div class="bottom_renew">
<img src="./images/renew.png" alt="" class="renew_bg" />
<div class="wrap">
<div class="left">
<img src="./images/conis2.png" alt="" />
<span class="buyAmount">buyAmount</span>
</div>
<div class="renew_btn">Renew</div>
</div>
<div class="wrap_txt">VIP7 is only through activity</div>
</div>
<!-- 购买弹窗 -->
<div class="payPopup">
<div class="payPopup_warp">
<div class="title">pay</div>
<div class="buyAmount">
<span class="num">35000</span>
<img src="./images/conis.png" alt="" />
</div>
<div class="pay_btn">Confirm payment</div>
</div>
</div>
<!-- 自定义对话框 -->
<div class="custom-dialog">
<div class="dialog-content">
<div class="dialog-header">
<span class="dialog-title">Custom Dialog</span>
</div>
<div class="dialog-footer">
<button class="dialog-btn dialog-cancel">Cancel</button>
<button class="dialog-btn dialog-confirm">Confirm</button>
</div>
</div>
</div>
</body>
</html>
<script src="../../common/js/flexible.js"></script>
@@ -57,4 +114,3 @@
<script src="../../common/js/svga.min.js"></script>
<script src="./js/index.js?v=1.0"></script>
<script src="./js/swiper-bundle.min.js"></script>

View File

@@ -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 = `
<div class="swiper-slide">
<div class="img_card">
<img src="${vipOption[index].img}" alt="">
<img src="${item.vipIcon}" alt="" class="icon">
<div class="remainSeconds">
<p>${ item.remainSeconds? 'Due on:'+dueDate : '未获得'}</p>
<p>${item.remainSeconds ? 'Due on:' + dueDate : '未获得'}</p>
</div>
</div>
</div>
`;
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 = `
<div class="content_box">
<img src="${item.img}" alt="">
<p>${item.name}</p>
</div>
`
$('.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 = `
<div class="content_box" obj='${JSON.stringify(item)}'>
<img src="${item.authIcon}" alt="">
<p class="name">${item.authName}</p>
</div>
`
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: '头像' },
],
]