vip页面install

view/molistar/modules/vip_Center/css/index.css

@@ -0,0 +1,120 @@
+html,
+body {
+  width: 100%;
+  background: #150C00;
+}
+
+.back {
+  width: 100%;
+  height: 0.5866666667rem;
+  line-height: 0.5866666667rem;
+  position: fixed;
+  left: 0;
+  top: 0.9333333333rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.5066666667rem;
+  font-weight: bold;
+  z-index: 10;
+}
+.back img {
+  width: 0.5866666667rem;
+  height: 0.5866666667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 0rem;
+}
+
+.header {
+  background: url(../images/bg.png) no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 8rem;
+}
+.header .swiper {
+  padding-top: 2.9333333333rem;
+}
+.header .swiper-slide {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.header .swiper-slide-next .img_card,
+.header .swiper-slide-prev .img_card {
+  display: flex;
+  align-items: center;
+}
+.header .swiper-slide-next .img_card img,
+.header .swiper-slide-prev .img_card img {
+  height: 3.3066666667rem;
+}
+.header .img_card {
+  width: 8.5333333333rem;
+  height: 3.6266666667rem;
+  position: relative;
+}
+.header .img_card .icon {
+  width: 3.4666666667rem;
+  height: 3.4666666667rem;
+  position: absolute;
+  right: 0.2666666667rem;
+  top: -0.4rem;
+}
+.header .img_card .remainSeconds {
+  position: absolute;
+  bottom: 0.8rem;
+  left: 0.4rem;
+}
+.header .img_card .remainSeconds p {
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  font-size: 0.32rem;
+  color: #4D143A;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+
+.content .permission .top {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.content .permission .top img {
+  width: 1.1466666667rem;
+  height: 0.4266666667rem;
+}
+.content .permission .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 .permission .box_warp {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0.32rem;
+  grid-template-rows: auto;
+  padding: 0 0.4533333333rem;
+}
+.content .permission .box_warp .content_box {
+  background: linear-gradient(180deg, #402600 6%, #060300 96%);
+  border: 1px solid;
+  border-image: linear-gradient(136deg, rgb(255, 202, 77), rgb(255, 255, 255), rgb(134, 94, 0)) 1 1;
+  border-radius: 0.4266666667rem;
+}
+.content .permission .box_warp .content_box p {
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 400;
+  font-size: 0.3466666667rem;
+  color: #FFE3AF;
+  text-align: center;
+  font-style: normal;
+  text-transform: none;
+  padding-bottom: 0.3466666667rem;
+}

view/molistar/modules/vip_Center/css/index.scss

@@ -0,0 +1,162 @@
+@function px2rem($px) {
+  @return $px / 75+rem;
+}
+
+html,
+body {
+  width: 100%;
+  background: #150C00;
+  // padding: px2rem(26);
+}
+
+.back {
+  width: 100%;
+  height: px2rem(44);
+  line-height: px2rem(44);
+  position: fixed;
+  left: 0;
+  top: px2rem(70);
+  text-align: center;
+  color: #FFFFFF;
+  font-size: px2rem(38);
+  font-weight: bold;
+  z-index: 10;
+
+  img {
+    width: px2rem(44);
+    height: px2rem(44);
+    position: absolute;
+    left: px2rem(18);
+    top: px2rem(0);
+  }
+}
+
+.header {
+  background: url(../images/bg.png) no-repeat;
+  // background-size: 100% 100%;
+  background-size: cover;
+  width: 100%;
+  height: px2rem(600);
+  // .swiper {
+  //   height: px2rem(200);
+  //   left: 50%;
+  //   transform: translateX(-50%);
+
+  //   .swiper-wrapper {
+  //     width: 100%;
+  //     height: 100%;
+  //   }
+  // }
+  .swiper {
+    padding-top: px2rem(220);
+  }
+
+  .swiper-slide {
+    // width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .swiper-slide-active {}
+
+  .swiper-slide-next,
+  .swiper-slide-prev {
+    .img_card {
+      // height: px2rem(248);
+      display: flex;
+      align-items: center;
+
+      img {
+        height: px2rem(248);
+
+      }
+    }
+  }
+
+  .img_card {
+    width: px2rem(640);
+    height: px2rem(272);
+    position: relative;
+
+    .icon {
+      width: px2rem(260);
+      height: px2rem(260);
+      position: absolute;
+      right: px2rem(20);
+      top: px2rem(-30);
+    }
+
+    .remainSeconds {
+      position: absolute;
+      bottom: px2rem(60);
+      left: px2rem(30);
+
+      p {
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        font-size: px2rem(24);
+        color: #4D143A;
+        text-align: left;
+        font-style: normal;
+        text-transform: none;
+      }
+    }
+  }
+}
+
+.content {
+  .permission {
+    .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);
+      }
+    }
+
+    .box_warp {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-gap: px2rem(24);
+      grid-template-rows: auto;
+      padding: 0 px2rem(34);
+      .content_box {
+        // width: px2rem(332);
+        // height: px2rem(240);
+        background: linear-gradient(180deg, #402600 6%, #060300 96%);
+        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;
+
+        p {
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          font-size: px2rem(26);
+          color: #FFE3AF;
+          // line-height: 36px;
+          text-align: center;
+          font-style: normal;
+          text-transform: none;
+          padding-bottom: px2rem(26);
+        }
+      }
+    }
+  }
+}

view/molistar/modules/vip_Center/index.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title class="text1"></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" />
+    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
+
+  </head>
+
+  <body>
+    <!-- 頂部返回 -->
+    <div class="back">
+      <img src="./images/travel/back.png" alt="" />
+      <p class="titles">vip中心</p>
+    </div>
+    <div class="header">
+      <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="">
+          <p class="title_name">Identification</p>
+          <img src="./images/right.png" alt="">
+        </div>
+        <div class="box_warp">
+          <!-- <div class="content_box">
+            <img src="./images/vip1_headimg.png.png" alt="">
+            <p>Exclusive headwear</p>
+          </div> -->
+        </div>
+      </div>
+
+      <div class="exclusive_discounts"></div>
+    </div>
+  </body>
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="../../common/js/svga.min.js"></script>
+<script src="./local/en.js"></script>
+<script src="./local/zh.js"></script>
+<script src="./local/ar.js"></script>
+<script src="./local/tr.js"></script>
+<script src="../../common/local/langHandler.js"></script>
+<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/molistar/modules/vip_Center/js/index.js

@@ -0,0 +1,220 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+  new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+var langReplace;
+var localLang;
+const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
+  layer.open({
+    type: 2,
+    shadeClose: false,
+    content,
+    success(e) {
+      layerIndex = $(e).attr('index')
+    }
+  })
+}
+const hideLoading = (index) => {
+  layer.close(index)
+}
+const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
+  layer.open({
+    content,
+    time,
+    skin: 'msg'
+  })
+}
+// 初始化函數
+$(function () {
+  getInfoFromClient();
+  fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+  setTimeout(function () {
+    // 頁面全屏
+    if (browser.app) {
+      if (browser.android) {
+        window.androidJsObj.initShowNav(false)
+      } else {
+        window.webkit.messageHandlers.initShowNav.postMessage(0)
+      }
+    };
+    // 頂部返回事件
+    $('.back').click(() => {
+      if (browser.android) {
+          window.androidJsObj.closeWebView()
+      } else {
+          window.webkit.messageHandlers.closeWebView.postMessage(null)
+      }
+  })
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    langReplace = window.lang.replace;
+    localLang = window.lang;
+    renderImgOption();
+    swiperFun()
+  }, 100)
+
+})
+var vipInfos;
+var mySwiper;
+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 = `
+          <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>
+              </div>
+            </div>
+          </div>
+        `;
+        swiperWrapper.append(slideHtml);
+      });
+
+       // 重新初始化 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
+    // }
+    slidesPerView: 'auto', // 自动计算每页显示的幻灯片数量
+    spaceBetween: -40, // 幻灯片之间的间距（负值表示重叠）
+    centeredSlides: true, // 中心化幻灯片
+    on:{
+      slideChange: function () {
+        const activeSlide = this.activeIndex;
+        // const activeSlideObj = vipInfos[activeSlide]
+        console.log(activeSlide,'-------')
+        renderPermission(activeSlide)
+      }
+    }
+  })
+}
+function renderPermission(index){
+  $('.box_warp').empty()
+  vipIdentification[index].forEach((item, index) => {
+    var str =`
+    <div class="content_box">
+      <img src="${item.img}" alt="">
+      <p>${item.name}</p>
+    </div>
+    `
+    $('.box_warp').append(str);
+  })
+}
+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'},
+]
+
+var vipIdentification = [
+  [
+    {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/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/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/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/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:'头像'},
+  ],
+]

view/molistar/modules/vip_Center/local/ar.js

@@ -0,0 +1,8 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+
+    }
+
+}

view/molistar/modules/vip_Center/local/en.js

@@ -0,0 +1,6 @@
+langEn = {
+    demoModule: {
+     
+
+    },
+}

view/molistar/modules/vip_Center/local/tr.js

@@ -0,0 +1,7 @@
+langTr = {
+    demoModule: {
+      
+
+    }
+
+}

view/molistar/modules/vip_Center/local/zh.js

@@ -0,0 +1,8 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+     
+    }
+
+}