VIP页面完成

2025-06-05 14:02:10 +08:00
parent 99b2641be4
commit 3cf29485d9
8 changed files with 216 additions and 83 deletions
--- a/view/molistar/modules/vip_Center/css/index.css
+++ b/view/molistar/modules/vip_Center/css/index.css
@@ -388,7 +388,7 @@ body {
  margin: 1.12rem 0.4rem 0;
 }

-.custom-dialog {
+.custom-dialog, .shop-dialog {
  position: fixed;
  top: 0;
  left: 0;
@@ -403,39 +403,39 @@ body {
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
 }
-.custom-dialog.visible {
+.custom-dialog.visible, .shop-dialog.visible {
  visibility: visible;
  opacity: 1;
 }
-.custom-dialog .dialog-content {
+.custom-dialog .dialog-content, .shop-dialog .dialog-content {
  background: #FFFFFF;
  border-radius: 0.2133333333rem;
-  width: 6.6666666667rem;
-  max-width: 90%;
-  padding: 0.32rem;
+  width: 6.5333333333rem;
+  padding: 0.32rem 0.6666666667rem;
  box-shadow: 0 0.1066666667rem 0.2133333333rem rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
 }
-.custom-dialog .dialog-header {
+.custom-dialog .dialog-header, .shop-dialog .dialog-header {
  margin-bottom: 0.2133333333rem;
  text-align: center;
  margin-top: 0.2666666667rem;
 }
-.custom-dialog .dialog-header .dialog-title {
+.custom-dialog .dialog-header .dialog-title, .shop-dialog .dialog-header .dialog-title {
  font-family: PingFang SC, PingFang SC;
-  font-weight: 600;
-  font-size: 0.4266666667rem;
+  font-weight: 400;
+  font-size: 0.3733333333rem;
  color: #313131;
  font-style: normal;
  text-transform: none;
+  line-height: 0.5333333333rem;
 }
-.custom-dialog .dialog-footer {
+.custom-dialog .dialog-footer, .shop-dialog .dialog-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 0.6666666667rem;
 }
-.custom-dialog .dialog-footer .dialog-btn {
+.custom-dialog .dialog-footer .dialog-btn, .shop-dialog .dialog-footer .dialog-btn {
  background: linear-gradient(270deg, #E29030 0%, #FCC074 100%);
  border: none;
  border-radius: 0.4266666667rem;
@@ -451,13 +451,13 @@ body {
  transition: background 0.3s ease;
  width: 2.9333333333rem;
 }
-.custom-dialog .dialog-footer .dialog-btn:hover {
+.custom-dialog .dialog-footer .dialog-btn:hover, .shop-dialog .dialog-footer .dialog-btn:hover {
  background: linear-gradient(270deg, #FCC074 0%, #E29030 100%);
 }
-.custom-dialog .dialog-footer .dialog-cancel {
+.custom-dialog .dialog-footer .dialog-cancel, .shop-dialog .dialog-footer .dialog-cancel {
  background: #E0E0E0;
  color: #333333;
 }
-.custom-dialog .dialog-footer .dialog-cancel:hover {
+.custom-dialog .dialog-footer .dialog-cancel:hover, .shop-dialog .dialog-footer .dialog-cancel:hover {
  background: #BDBDBD;
 }
--- a/view/molistar/modules/vip_Center/css/index.scss
+++ b/view/molistar/modules/vip_Center/css/index.scss
@@ -455,7 +455,7 @@ body {
 }

 // 自定义对话框样式
-.custom-dialog {
+.custom-dialog,.shop-dialog {
  position: fixed;
  top: 0;
  left: 0;
@@ -478,9 +478,9 @@ body {
  .dialog-content {
    background: #FFFFFF;
    border-radius: px2rem(16);
-    width: px2rem(500);
-    max-width: 90%;
-    padding: px2rem(24);
+    width: px2rem(490);
+    // max-width: 90%;
+    padding: px2rem(24) px2rem(50);
    box-shadow: 0 px2rem(8) px2rem(16) rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
@@ -495,11 +495,12 @@ body {
    margin-top: px2rem(20);
    .dialog-title {
      font-family: PingFang SC, PingFang SC;
-      font-weight: 600;
-      font-size: px2rem(32);
+      font-weight: 400;
+      font-size: px2rem(28);
      color: #313131;
      font-style: normal;
      text-transform: none;
+      line-height: px2rem(40);
    }

  }
--- a/view/molistar/modules/vip_Center/index.html
+++ b/view/molistar/modules/vip_Center/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title class="text1"></title>
+    <title class="VIP_Center"></title>
    <link rel="stylesheet" href="../../common/css/reset.css" />
    <link rel="stylesheet" href="../../common/css/animate.css" />
    <link rel="stylesheet" href="./css/index.css?v=1.1" />
@@ -14,7 +14,7 @@
    <!-- 頂部返回 -->
    <div class="back">
      <img src="./images/travel/back.png" alt="" />
-      <p class="titles">vip中心</p>
+      <p class="titles VIP_Center">vip中心</p>
    </div>
    <div class="header">
      <div class="swiper">
@@ -25,7 +25,7 @@
      <div class="permission">
        <div class="top">
          <img src="./images/left.png" alt="" />
-          <p class="title_name">Identification</p>
+          <p class="title_name Identification">Identification</p>
          <img src="./images/right.png" alt="" />
        </div>
        <div class="box_warp">
@@ -40,7 +40,7 @@
        <div class="top">
          <img src="./images/left.png" alt="" />
          <div class="title_name">
-            Exclusive Privileges
+           <span class="Exclusive_Privileges">Exclusive Privileges</span> 
            <p class="num">19/19</p>
          </div>
          <img src="./images/right.png" alt="" />
@@ -67,22 +67,22 @@
      <img src="./images/renew.png" alt="" class="renew_bg" />
      <div class="wrap">
        <div class="left">
-          <img src="./images/conis2.png" alt="" />
+          <img src="./images/conis.png" alt="" />
          <span class="buyAmount">buyAmount</span>
        </div>
-        <div class="renew_btn">Renew</div>
+        <div class="renew_btn Renew">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="title Pay">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 class="pay_btn Confirm_Purchase">Confirm payment</div>
      </div>
    </div>
    <!-- 自定义对话框 -->
@@ -92,11 +92,25 @@
        <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>
+        <button class="dialog-btn dialog-cancel Cancel">Cancel</button>
+        <button class="dialog-btn dialog-confirm Confirm">Confirm</button>
      </div>
    </div>
  </div>
+
+  <!-- 自定义对话框 -->
+  <div class="shop-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">Cancel</button>
+        <button class="dialog-btn dialog-confirm Confirm">Confirm</button>
+      </div>
+    </div>
+  </div>
+
  </body>
 </html>
 <script src="../../common/js/flexible.js"></script>
--- a/view/molistar/modules/vip_Center/js/index.js
+++ b/view/molistar/modules/vip_Center/js/index.js
@@ -54,9 +54,23 @@ $(function () {
    localLang = window.lang;
    renderImgOption();
    // swiperFun()
+    translateFun();
  }, 100)

 })
+
+function translateFun() {
+  var langReplace = window.lang.replace;
+  var localLang = window.lang;
+  $('.Renew').html(langReplace(localLang.demoModule.Renew));
+  $('.Pay').html(langReplace(localLang.demoModule.Pay));
+  $('.Cancel').html(langReplace(localLang.demoModule.Cancel));
+  $('.Confirm').html(langReplace(localLang.demoModule.Confirm));
+  $('.Exclusive_Privileges').html(langReplace(localLang.demoModule.Exclusive_Privileges));
+  $('.Identification').html(langReplace(localLang.demoModule.Identification));
+  $('.Confirm_Purchase').html(langReplace(localLang.demoModule.Confirm_Purchase));
+  $('.VIP_Center').html(langReplace(localLang.demoModule.VIP_Center));
+}
 var vipInfos;
 var mySwiper;
 var vipAuthInfos;
@@ -84,7 +98,7 @@ function renderImgOption() {
              <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 ? langReplace(localLang.demoModule.Due_on)+':'+ dueDate : langReplace(localLang.demoModule.Not_obtained)}</p>
              </div>
            </div>
          </div>
@@ -123,6 +137,7 @@ function swiperFun() {
    .filter(({ item }) => item.remainSeconds)
    .map(({ index }) => index);
  mySwiper.slideTo(vip[vip.length - 1], 1000);
+  $('.renew_btn').attr('vipLevelTop', vip[vip.length - 1] || 0)
 }
 function renderPermission(actIndex) {
  // 权益渲染
@@ -131,7 +146,7 @@ function renderPermission(actIndex) {
    var str = `
    <div class="content_box">
      <img src="${item.img}" alt="">
-      <p>${item.name}</p>
+      <p>${langReplace(localLang.demoModule[item.name])}</p>
    </div>
    `
    $('.permission .box_warp').append(str);
@@ -161,10 +176,11 @@ function renderPermission(actIndex) {
    $('.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_txt').text(`${vipInfos[actIndex].vipName} ${langReplace(localLang.demoModule.is_activity)}`)
    $('.bottom_renew .wrap').hide()
    $('.bottom_renew .wrap_txt').show()
  }
+  $('.renew_btn').attr('vipLevel',actIndex)
 }
 // 点击购买
 $('.payPopup .payPopup_warp .pay_btn').click(function () {
@@ -176,12 +192,13 @@ $('.payPopup .payPopup_warp .pay_btn').click(function () {
    contentType: 'application/json;charset=UTF-8',
    data: {
      // roomUid:pubInfo.uid,
-      roomUid:3838,
+      roomUid:3203,
      vipLevel
    },
    success: function (res) {
      $('.payPopup').hide()
      if (res.code == 200) {
+        renderImgOption()
      } else {
        // toastMsg(res.message);
        $('.custom-dialog .dialog-content .dialog-title').text(res.message)
@@ -237,8 +254,32 @@ $('.selectAccount .selectAccount_in .name img').click(function () {
 })
 // 购买弹窗
 $('.bottom_renew .wrap .renew_btn').on('click', function () {
+  let viplevelIndex = $(this).attr('viplevel');
+  let vipleveltopIndex = $(this).attr('vipleveltop');
+  if(vipleveltopIndex == 0){
+    $('.payPopup').show()
+    return
+  }
+  // 购买等级大于自身等级
+  if(vipInfos[viplevelIndex].vipLevel > vipInfos[vipleveltopIndex].vipLevel){
+    $('.shop-dialog .dialog-content .dialog-title').text(`${langReplace(localLang.demoModule.You_currently(vipInfos[vipleveltopIndex].vipName,vipInfos[viplevelIndex].vipName))}`)
+        $('.shop-dialog').addClass('visible');
+  }else{
  $('.payPopup').show()
+  }
 })
+ // 确认按钮的触发事件
+ $('.shop-dialog .dialog-confirm').on('click', function () {
+  // 执行确认操作
+  $('.shop-dialog').removeClass('visible');
+  $('.payPopup').show()
+});
+// 取消按钮的触发事件
+$('.shop-dialog .dialog-cancel').on('click', function () {
+  // 执行确认操作
+  $('.shop-dialog').removeClass('visible');
+});
+
 $('.payPopup').click(function () {
  $('.payPopup').hide()
 })
@@ -263,65 +304,65 @@ var vipOption = [

 var vipIdentification = [
  [
-    { img: './images/vip1_headimg.png', name: '头像' },
-    { img: './images/vip1_identity.png', name: '头像' },
+    { img: './images/vip1_headimg.png', name: 'Only_Headdress' },
+    { img: './images/vip1_identity.png', name: 'Only_Nameplate' },
  ],
  [
-    { img: './images/vip2_headimg.png', name: '头像' },
-    { img: './images/vip2_identity.png', name: '头像' },
-    { img: './images/vip2_card.png', name: '头像' },
+    { img: './images/vip2_headimg.png', name: 'Only_Headdress' },
+    { img: './images/vip2_identity.png', name: 'Only_Nameplate' },
+    { img: './images/vip2_card.png', name: 'Room_Card' },
  ],
  [
-    { 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: 'Only_Headdress' },
+    { img: './images/vip3_identity.png', name: 'Only_Nameplate' },
+    { img: './images/vip3_card.png', name: 'Room_Card' },
+    { img: './images/vip3_txk.png', name: 'Mic_Effect' },
  ],
  [
-    { 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: 'Only_Headdress' },
+    { img: './images/vip4_identity.png', name: 'Only_Nameplate' },
+    { img: './images/vip4_card.png', name: 'Room_Card' },
+    { img: './images/vip4_txk.png', name: 'Mic_Effect' },
+    { img: './images/vip4_qp.png', name: 'Bubble_Effect' },
  ],
  [
-    { 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: 'Only_Headdress' },
+    { img: './images/vip5_identity.png', name: 'Only_Nameplate' },
+    { img: './images/vip5_card.png', name: 'Room_Card' },
+    { img: './images/vip5_txk.png', name: 'Mic_Effect' },
+    { img: './images/vip5_qp.png', name: 'Bubble_Effect' },
+    { img: './images/vip5_jctx.png', name: 'Entry_Animation' },
  ],
  [
-    { 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: 'Only_Headdress' },
+    { img: './images/vip6_identity.png', name: 'Only_Nameplate' },
+    { img: './images/vip6_card.png', name: 'Room_Card' },
+    { img: './images/vip6_txk.png', name: 'Mic_Effect' },
+    { img: './images/vip6_qp.png', name: 'Bubble_Effect' },
+    { img: './images/vip6_jctx.png', name: 'Entry_Animation' },
  ],
  [
-    { 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: 'Only_Headdress' },
+    { img: './images/vip7_identity.png', name: 'Only_Nameplate' },
+    { img: './images/vip7_card.png', name: 'Room_Card' },
+    { img: './images/vip7_txk.png', name: 'Mic_Effect' },
+    { img: './images/vip7_qp.png', name: 'Bubble_Effect' },
+    { img: './images/vip7_jctx.png', name: 'Entry_Animation' },
  ],
  [
-    { 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: 'Only_Headdress' },
+    { img: './images/vip8_identity.png', name: 'Only_Nameplate' },
+    { img: './images/vip8_card.png', name: 'Room_Card' },
+    { img: './images/vip8_txk.png', name: 'Mic_Effect' },
+    { img: './images/vip8_qp.png', name: 'Bubble_Effect' },
+    { img: './images/vip8_jctx.png', name: 'Entry_Animation' },
  ],
  [
-    { 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: 'Only_Headdress' },
+    { img: './images/vip9_identity.png', name: 'Only_Nameplate' },
+    { img: './images/vip9_card.png', name: 'Room_Card' },
+    { img: './images/vip9_txk.png', name: 'Mic_Effect' },
+    { img: './images/vip9_qp.png', name: 'Bubble_Effect' },
+    { img: './images/vip9_jctx.png', name: 'Entry_Animation' },
  ],
 ]
--- a/view/molistar/modules/vip_Center/local/ar.js
+++ b/view/molistar/modules/vip_Center/local/ar.js
@@ -2,6 +2,26 @@
 langAr = {
    // 模块
    demoModule: {
+        Only_Headdress:'اطار',
+        Only_Nameplate:'اشارة',
+        Room_Card:'بطاقة الغرفة',
+        Mic_Effect:'تأثير الميكروفون',
+        Bubble_Effect:'تأثير النفطة',
+        Entry_Animation:'دخولية متحركة ',
+        Renew:'تجديد',
+        Pay:'الدفع',
+        Cancel:'إلغاء',
+        Confirm:'تأكيد',
+        Exclusive_Privileges:'امتيازات حصرية',
+        Identification:'التعريف',
+        Not_obtained:'لم يتم الحصول على VIP',
+        Due_on:'مستحق على',
+        is_activity:'فقط من خلال النشاط',
+        You_currently:function(num1,num2){
+            return `أنت حاليًا عضو ${num1}، هل أنت متأكد من رغبتك في شراء عضوية ${num2} بمستوى أعلى؟`
+        },
+        Confirm_Purchase:'تأكيد الشراء',
+        VIP_Center:'مركز كبار الشخصيات',

    }

--- a/view/molistar/modules/vip_Center/local/en.js
+++ b/view/molistar/modules/vip_Center/local/en.js
@@ -1,6 +1,25 @@
 langEn = {
    demoModule: {
-     
+        Only_Headdress:'Only Headdress',
+        Only_Nameplate:'Only Nameplate',
+        Room_Card:'Room Card',
+        Mic_Effect:'Mic Effect',
+        Bubble_Effect:'Bubble Effect',
+        Entry_Animation:'Entry Animation',
+        Renew:'Renew',
+        Pay:'Pay',
+        Cancel:'Cancel',
+        Confirm:'Confirm',
+        Exclusive_Privileges:' Exclusive Privileges',
+        Identification:'Identification',
+        Not_obtained:'Not obtained VIP',
+        Due_on:'Due on',
+        is_activity:'is only through activity',
+        You_currently:function(num1,num2){
+            return `You are currently ${num1}, are you sure you want to purchase a higher level ${num2}?`
+        },
+        Confirm_Purchase:'Confirm Purchase',
+        VIP_Center:'VIP Center',

    },
 }
--- a/view/molistar/modules/vip_Center/local/tr.js
+++ b/view/molistar/modules/vip_Center/local/tr.js
@@ -1,6 +1,25 @@
 langTr = {
-    demoModule: {
-      
+    demoModule: { 
+        Only_Headdress:'Yalnızca Başlık',
+        Only_Nameplate:'Yalnızca İsim Plakası',
+        Room_Card:'Oda Kartı',
+        Mic_Effect:'Mikrofon Efekti',
+        Bubble_Effect:'Baloncuk Efekti',
+        Entry_Animation:'Giriş Animasyonu',
+        Renew:'Yenile',
+        Pay:'Öde',
+        Cancel:'İptal',
+        Confirm:'Onayla',
+        Exclusive_Privileges:'Özel Ayrıcalıklar',
+        Identification:'Kimlik',
+        Not_obtained:'alınmadı',
+        Due_on:'Sona Erme Tarihi',
+        is_activity:'yalnızca etkinlik yoluyla',
+        You_currently:function(num1,num2){
+            return `Şu anda ${num1}'siniz, daha yüksek seviyede bir ${num2} satın almak istediğinizden emin misiniz?`
+        },
+        Confirm_Purchase:'Satın Alımı Onayla',
+        VIP_Center:'VIP Merkezi',

    }

--- a/view/molistar/modules/vip_Center/local/zh.js
+++ b/view/molistar/modules/vip_Center/local/zh.js
@@ -2,7 +2,26 @@
 langZh = {
    // 模塊
    demoModule: {
-     
+        Only_Headdress:'頭飾',
+        Only_Nameplate:'銘牌',
+        Room_Card:'資料卡',
+        Mic_Effect:'光圈',
+        Bubble_Effect:'氣泡',
+        Entry_Animation:'進場動效',
+        Renew:'更新',
+        Pay:'支付',
+        Cancel:'取消',
+        Confirm:'確認',
+        Exclusive_Privileges:'專屬優惠',
+        Identification:'權限',
+        Not_obtained:'未取得 VIP',
+        Due_on:'到期日',
+        is_activity:'僅透過活動獲得',
+        You_currently:function(num1,num2){
+            return `您目前是${num1},確定購買更高的等級${num2}嗎？`
+        },
+        Confirm_Purchase:'確認購買',
+        VIP_Center:'VIP中心',
    }

 }