魅力等级暂存

view/molistar/modules/levelNew/css/index.css

@@ -0,0 +1,163 @@
+html,
+body {
+  width: 100%;
+  background: #0F0900;
+}
+
+.back {
+  width: 10rem;
+  height: 6.96rem;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0rem;
+  z-index: 10;
+  overflow: hidden;
+  background: url(../images/top.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.back .backIcon {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.4rem;
+  top: 1.46667rem;
+  z-index: 2;
+}
+
+.back .tab {
+  width: 80%;
+  height: 0.64rem;
+  line-height: 0.64rem;
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 1.36rem;
+  left: 50%;
+  transform: translateX(-50%);
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.45333rem;
+  font-weight: 400;
+  z-index: 2;
+}
+
+.back .tab div {
+  width: 50%;
+  text-align: center;
+}
+
+.back .tab .act {
+  color: #fff;
+  font-weight: 500;
+}
+
+.back .myInfo {
+  width: 9.02667rem;
+  height: 4.57333rem;
+  background: url(../images/myInfoBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 2.4rem auto;
+  position: relative;
+}
+
+.back .myInfo .tx {
+  width: 1.68rem;
+  height: 1.68rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.72rem;
+  left: 0.56rem;
+}
+
+.back .myInfo .top {
+  position: absolute;
+  top: 0.90667rem;
+  left: 2.48rem;
+  height: 0.66667rem;
+  line-height: 0.66667rem;
+  width: 3rem;
+}
+
+.back .myInfo .top .level {
+  color: #613B00;
+  font-size: 0.48rem;
+  font-weight: 600;
+  display: inline-block;
+}
+
+.back .myInfo .top .levelIcon {
+  display: inline-block;
+  width: 1.30667rem;
+  height: 0.66667rem;
+}
+
+.back .myInfo .bootom {
+  position: absolute;
+  left: 2.48rem;
+  font-size: 0.34667rem;
+  color: #613B00;
+  font-weight: 500;
+  top: 1.70667rem;
+}
+
+.back .myInfo .lineBox {
+  width: 7.92rem;
+  height: 0.16rem;
+  border-radius: 0.16rem;
+  background: #fff;
+  position: absolute;
+  top: 3.12rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.back .myInfo .lineBox .line {
+  width: 5%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: linear-gradient(90deg, #FFA01E 0%, #FFC16C 100%);
+  border-radius: 0.16rem;
+}
+
+.back .myInfo .lineBox .thisLevel {
+  color: #613B00;
+  font-size: 0.32rem;
+  font-weight: 500;
+  position: absolute;
+  left: 0;
+  top: -0.50667rem;
+}
+
+.back .myInfo .lineBox .thisLevel b {
+  font-size: 0.32rem;
+  font-weight: 500;
+}
+
+.back .myInfo .lineBox .nextLevel {
+  color: #613B00;
+  font-size: 0.32rem;
+  font-weight: 500;
+  position: absolute;
+  right: 0;
+  top: -0.50667rem;
+}
+
+.back .myInfo .lineBox .nextLevel b {
+  font-size: 0.32rem;
+  font-weight: 500;
+}
+
+.back .myInfo p {
+  text-align: center;
+  color: #613B00;
+  font-size: 0.32rem;
+  font-weight: 5.33333rem;
+  width: 100%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 3.44rem;
+}

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

@@ -0,0 +1,167 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #0F0900;
+}
+
+.back {
+    width: px2rem(750);
+    height: px2rem(522);
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    top: px2rem(0);
+    z-index: 10;
+    overflow: hidden;
+    background: url(../images/top.png) no-repeat;
+    background-size: 100% 100%;
+
+    .backIcon {
+        width: px2rem(44);
+        height: px2rem(44);
+        position: absolute;
+        left: px2rem(30);
+        top: px2rem(110);
+        z-index: 2;
+    }
+
+    .tab {
+        width: 80%;
+        height: px2rem(48);
+        line-height: px2rem(48);
+        display: flex;
+        justify-content: space-between;
+        position: absolute;
+        top: px2rem(102);
+        left: 50%;
+        transform: translateX(-50%);
+        color: rgba(255, 255, 255, .5);
+        font-size: px2rem(34);
+        font-weight: 400;
+        z-index: 2;
+
+        div {
+            width: 50%;
+            text-align: center;
+        }
+
+        .act {
+            color: #fff;
+            font-weight: 500;
+        }
+    }
+
+    .myInfo {
+        width: px2rem(677);
+        height: px2rem(343);
+        background: url(../images/myInfoBg.png) no-repeat;
+        background-size: 100% 100%;
+        margin: px2rem(180) auto;
+        position: relative;
+
+        .tx {
+            width: px2rem(126);
+            height: px2rem(126);
+            border-radius: 50%;
+            position: absolute;
+            top: px2rem(54);
+            left: px2rem(42);
+        }
+
+        .top {
+            position: absolute;
+            top: px2rem(68);
+            left: px2rem(186);
+            height: px2rem(50);
+            line-height: px2rem(50);
+            width: 3rem;
+
+            .level {
+                color: #613B00;
+                font-size: px2rem(36);
+                font-weight: 600;
+                display: inline-block;
+            }
+
+            .levelIcon {
+                display: inline-block;
+                width: px2rem(98);
+                height: px2rem(50);
+            }
+        }
+
+        .bootom {
+            position: absolute;
+            left: px2rem(186);
+            font-size: px2rem(26);
+            color: #613B00;
+            font-weight: 500;
+            top: px2rem(128);
+        }
+
+        .lineBox {
+            width: px2rem(594);
+            height: px2rem(12);
+            border-radius: px2rem(12);
+            background: #fff;
+            position: absolute;
+            top: px2rem(234);
+            left: 50%;
+            transform: translateX(-50%);
+
+            .line {
+                width: 5%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                background: linear-gradient(90deg, #FFA01E 0%, #FFC16C 100%);
+                border-radius: px2rem(12);
+            }
+
+            .thisLevel {
+                color: #613B00;
+                font-size: px2rem(24);
+                font-weight: 500;
+                position: absolute;
+                left: 0;
+                top: px2rem(-38);
+
+                b {
+                    font-size: px2rem(24);
+                    font-weight: 500;
+                }
+            }
+
+            .nextLevel {
+                color: #613B00;
+                font-size: px2rem(24);
+                font-weight: 500;
+                position: absolute;
+                right: 0;
+                top: px2rem(-38);
+
+                b {
+                    font-size: px2rem(24);
+                    font-weight: 500;
+                }
+            }
+        }
+
+        p {
+            text-align: center;
+            color: #613B00;
+            font-size: px2rem(24);
+            font-weight: px2rem(400);
+            width: 100%;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(258);
+        }
+    }
+}

view/molistar/modules/levelNew/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Level</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img class="backIcon" src="./images/travel/back.png" alt="">
+        <div class="tab">
+            <div class="act">Wealth Level</div>
+            <div class="">Charm Level</div>
+        </div>
+        <!-- 自己信息 -->
+        <div class="myInfo">
+            <img src="./images/null.png" alt="" class="tx">
+            <div class="top">
+                <div class="level">LV.<b>0</b></div>
+                <img src="" alt="" class="levelIcon">
+            </div>
+            <div class="bootom"><b>Wealth Value:</b><strong>14380162</strong></div>
+            <div class="lineBox">
+                <div class="thisLevel">LV.<b>0</b></div>
+                <div class="line"></div>
+                <div class="nextLevel">LV.<b>0</b></div>
+            </div>
+            <p><b>Wealth Value Required for upgrade:</b><strong>267338</strong></p>
+        </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="./local/en.js"></script>
+<script src="./local/zh.js"></script>
+<script src="./local/ar.js"></script>
+<script src="../../common/js/svga.min.js"></script>
+<script src="./js/index.js"></script>
+<script src="../../common/local/langHandler.js"></script>

view/molistar/modules/levelNew/js/index.js

@@ -0,0 +1,105 @@
+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 .backIcon').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        translateFun();
+        getUserExper();
+        getUserCharm();
+    }, 100)
+})
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.text1').text(langReplace(localLang.demoModule.text1));
+}
+// 配置接口
+function getUserExper() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/userLevel/getUserExper',
+        data: { uid: pubInfo.uid, ticket: pubInfo.ticket },
+        success(res) {
+            if (res.code === 200) {
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 配置接口
+function getUserCharm() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/userLevel/getUserCharm',
+        data: { uid: pubInfo.uid, ticket: pubInfo.ticket },
+        success(res) {
+            if (res.code === 200) {
+
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}

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

@@ -0,0 +1,9 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        layerIndex1: `جاري التحميل...`,
+        layerIndex2: `نجاح`,
+        layerIndex3: `خطأ في الشبكة`,
+    }
+}

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

@@ -0,0 +1,7 @@
+langEn = {
+    demoModule: {
+        layerIndex1: `Loading...`,
+        layerIndex2: `Success`,
+        layerIndex3: `Network error`,
+    }
+}

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

@@ -0,0 +1,9 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        layerIndex1: `加载中...`,
+        layerIndex2: `成功`,
+        layerIndex3: `网络错误`,
+    }
+}