修复支付后弹窗依旧存在的问题

view/molistar/modules/weeklyCard/css/index.css

@@ -0,0 +1,500 @@
+html,
+body {
+  width: 100%;
+  background: #741046;
+}
+
+.back {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: fixed;
+  left: 0;
+  top: 0.86667rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.50667rem;
+  font-weight: bold;
+  z-index: 10;
+}
+
+.back img {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 0rem;
+}
+
+.header {
+  width: 10rem;
+  height: 15.86667rem;
+  background: url(../images/header.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  overflow: hidden;
+}
+
+.header .tab {
+  width: 9.25333rem;
+  height: 1.28rem;
+  margin: 13.09333rem auto 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.header .tab div {
+  width: 2.90667rem;
+  height: 100%;
+  line-height: 1.28rem;
+  text-align: center;
+  color: #CAA8B8;
+  font-size: 0.53333rem;
+  font-weight: bold;
+  background: url(../images/tab.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.header .tab .act {
+  background: url(../images/tabAct.png) no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+}
+
+.cardBox {
+  width: 9.81333rem;
+  height: 20.77333rem;
+  background: url(../images/box1.png) no-repeat;
+  background-size: 100% 100%;
+  margin: -1rem auto 0.64rem;
+  position: relative;
+}
+
+.cardBox .Box {
+  width: 9.81333rem;
+  height: 19.2rem;
+  display: flex;
+  justify-content: space-between;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  padding: 0.64rem 0.4rem;
+  position: relative;
+}
+
+.cardBox .Box .box {
+  width: 4.41333rem;
+  height: 4.18667rem;
+  background: url(../images/liBg.png) no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+  margin-bottom: 0.36rem;
+}
+
+.cardBox .Box .box .title {
+  color: #FED3AC;
+  font-size: 0.34667rem;
+  text-align: center;
+  position: absolute;
+  top: 0.64rem;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.cardBox .Box .box .leftLine,
+.cardBox .Box .box .rightLine {
+  width: 1.86667rem;
+  height: 0.02667rem;
+  position: absolute;
+  top: 0.81333rem;
+}
+
+.cardBox .Box .box .leftLine {
+  left: -0.4rem;
+}
+
+.cardBox .Box .box .rightLine {
+  right: -0.4rem;
+}
+
+.cardBox .Box .box .gold {
+  width: 1.61333rem;
+  height: 1.61333rem;
+  position: absolute;
+  left: 0.41333rem;
+  top: 1.46667rem;
+  background: #8C1137;
+  border: 0.02667rem solid #FF9DBB;
+  border-radius: 0.13333rem;
+}
+
+.cardBox .Box .box .gold .img {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.cardBox .Box .box .gold .ok,
+.cardBox .Box .box .gold .not {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: none;
+}
+
+.cardBox .Box .box .gold .giftName {
+  width: 100%;
+  position: absolute;
+  bottom: -0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #FFFFFF;
+  font-size: 0.32rem;
+  text-align: center;
+}
+
+.cardBox .Box .box .gold .num {
+  width: 100%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #FFB8B5;
+  font-size: 0.29333rem;
+  text-align: center;
+  bottom: -0.85rem;
+}
+
+.cardBox .Box .box .gold .num b {
+  color: #FFDCAE;
+}
+
+.cardBox .Box .box .gift {
+  width: 1.61333rem;
+  height: 1.61333rem;
+  position: absolute;
+  right: 0.41333rem;
+  top: 1.46667rem;
+  background: #8C1137;
+  border: 0.02667rem solid #FF9DBB;
+  border-radius: 0.13333rem;
+}
+
+.cardBox .Box .box .gift .img {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.cardBox .Box .box .gift .ok,
+.cardBox .Box .box .gift .not {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: none;
+}
+
+.cardBox .Box .box .gift .giftName {
+  width: 100%;
+  position: absolute;
+  bottom: -0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #FFFFFF;
+  font-size: 0.32rem;
+  text-align: center;
+}
+
+.cardBox .Box .box .gift .num {
+  width: 100%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #FFB8B5;
+  font-size: 0.29333rem;
+  text-align: center;
+  bottom: -0.85rem;
+}
+
+.cardBox .Box .box .gift .num b {
+  color: #FFDCAE;
+}
+
+.cardBox .Box .box .gift span {
+  position: absolute;
+  width: 0.82667rem;
+  height: 0.38667rem;
+  line-height: 0.38667rem;
+  background: #FFF5B0;
+  border-radius: 0.2rem 0.2rem 0.2rem 0rem;
+  right: -0.26667rem;
+  top: -0.2rem;
+  text-align: center;
+  color: #E34D3C;
+  font-size: 0.29333rem;
+}
+
+.cardBox .Box .boxBig {
+  width: 8.81333rem;
+  background: url(../images/liBigBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin-bottom: 0;
+}
+
+.cardBox .Box .boxBig .leftLine {
+  left: 1.82667rem;
+}
+
+.cardBox .Box .boxBig .rightLine {
+  right: 1.82667rem;
+}
+
+.cardBox .Box .boxBig .gold {
+  left: 2.14667rem;
+}
+
+.cardBox .Box .boxBig .gift {
+  right: 2.14667rem;
+}
+
+.cardBox .but {
+  width: 3.28rem;
+  height: 1.01333rem;
+  border-radius: 1.01333rem;
+  margin: -0.55rem auto 0.1rem;
+  background: linear-gradient(0deg, #FFE44E, #FF8B0F);
+  text-align: center;
+  overflow: hidden;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.cardBox .but p {
+  font-weight: bold;
+  font-size: 0.48rem;
+  color: #FFFFFF;
+  text-shadow: 0px 0.04rem 0px #FF5A00;
+  margin-top: 0.10667rem;
+}
+
+.cardBox .but u {
+  color: #fff;
+  font-size: 0.32rem;
+  text-decoration: line-through;
+}
+
+.cardBox .but1 {
+  display: none;
+}
+
+.cardBox .but2 {
+  line-height: 1.01333rem;
+  font-weight: bold;
+  font-size: 0.48rem;
+  color: #FFFFFF;
+  text-shadow: 0px 0.04rem 0px #FF5A00;
+  display: none;
+}
+
+.cardBox .but3 {
+  line-height: 1.01333rem;
+  font-weight: bold;
+  font-size: 0.48rem;
+  color: #F2D2C8;
+  background: #DE7F5D;
+  display: none;
+}
+
+.cardBox .tips {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 1rem;
+  color: #fff;
+  text-align: center;
+  font-size: 0.29333rem;
+  line-height: 0.4rem;
+  margin-top: 0.55rem;
+}
+
+.rule {
+  width: 9.81333rem;
+  height: 12.18667rem;
+  background: url(../images/ruleBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0.48rem;
+  overflow: hidden;
+}
+
+.rule .title {
+  width: 100%;
+  margin-top: 0.24rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.58667rem;
+}
+
+.rule .content {
+  width: 8.22667rem;
+  height: 9.94667rem;
+  margin: 0.74667rem auto 0;
+  overflow-y: scroll;
+  color: #FFA7C4;
+  font-size: 0.32rem;
+}
+
+.rule .content::-webkit-scrollbar {
+  display: none;
+}
+
+.rule .content p {
+  margin-bottom: 0.46667rem;
+  line-height: 0.46667rem;
+}
+
+.pub {
+  position: fixed;
+  z-index: 99;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: none;
+}
+
+.pub .pub_in {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 7.26667rem;
+  height: 4.97333rem;
+  background: url(../images/pubBg.png) no-repeat;
+  background-size: 100% 100%;
+  overflow: hidden;
+}
+
+.pub .pub_in .box1 {
+  display: none;
+}
+
+.pub .pub_in .box1 .title {
+  width: 100%;
+  text-align: center;
+  margin-top: 0.82667rem;
+  color: #FFF724;
+  font-size: 0.45333rem;
+}
+
+.pub .pub_in .box1 .content {
+  margin-top: 0.72rem;
+  width: 100%;
+  text-align: center;
+  color: #FFA7C4;
+  font-size: 0.4rem;
+}
+
+.pub .pub_in .box1 .ok {
+  width: 2.34667rem;
+  height: 0.96rem;
+  line-height: 0.96rem;
+  background: linear-gradient(0deg, #FFE44E, #FF8B0F);
+  text-align: center;
+  color: #fff;
+  text-shadow: 0px 0.04rem 0px #FF5A00;
+  float: left;
+  margin-left: 1.02667rem;
+  border-radius: 0.96rem;
+  margin-top: 0.82667rem;
+  font-size: 0.4rem;
+}
+
+.pub .pub_in .box1 .close {
+  width: 2.34667rem;
+  height: 0.96rem;
+  line-height: 0.96rem;
+  background: #EE57A9;
+  text-align: center;
+  color: #fff;
+  text-shadow: 0px 0.04rem 0px #FF5A00;
+  float: right;
+  margin-right: 1.02667rem;
+  border-radius: 0.96rem;
+  margin-top: 0.82667rem;
+  font-size: 0.4rem;
+}
+
+.pub .pub_in .box2 {
+  display: none;
+}
+
+.pub .pub_in .box2 .title {
+  width: 100%;
+  text-align: center;
+  margin-top: 0.82667rem;
+  color: #FFF724;
+  font-size: 0.45333rem;
+}
+
+.pub .pub_in .box2 .content {
+  margin-top: 0.72rem;
+  width: 100%;
+  text-align: center;
+  color: #FFA7C4;
+  font-size: 0.4rem;
+}
+
+.pub .pub_in .box2 .ok {
+  width: 2.34667rem;
+  height: 0.96rem;
+  line-height: 0.96rem;
+  background: linear-gradient(0deg, #FFE44E, #FF8B0F);
+  text-align: center;
+  color: #fff;
+  text-shadow: 0px 0.04rem 0px #FF5A00;
+  float: left;
+  margin-left: 1.02667rem;
+  border-radius: 0.96rem;
+  margin-top: 0.82667rem;
+  font-size: 0.4rem;
+}
+
+.pub .pub_in .box2 .close {
+  width: 2.34667rem;
+  height: 0.96rem;
+  line-height: 0.96rem;
+  background: #EE57A9;
+  text-align: center;
+  color: #fff;
+  text-shadow: 0px 0.04rem 0px #FF5A00;
+  float: right;
+  margin-right: 1.02667rem;
+  border-radius: 0.96rem;
+  margin-top: 0.82667rem;
+  font-size: 0.4rem;
+}
+
+.english .header .tab div {
+  font-size: 0.4rem;
+  line-height: 0.4rem;
+  box-sizing: border-box;
+  padding: 0.26667rem 0.06667rem 0rem;
+}
+
+.arabic .header .tab div {
+  font-size: 0.32rem;
+  line-height: 0.4rem;
+  box-sizing: border-box;
+  padding: 0.26667rem 0.06667rem 0rem;
+}

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

@@ -0,0 +1,508 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #741046;
+}
+
+.back {
+    width: 100%;
+    height: px2rem(44);
+    line-height: px2rem(44);
+    position: fixed;
+    left: 0;
+    top: px2rem(65);
+    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 {
+    width: px2rem(750);
+    height: px2rem(1190);
+    background: url(../images/header.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto 0;
+    overflow: hidden;
+
+    .tab {
+        width: px2rem(694);
+        height: px2rem(96);
+        margin: px2rem(982) auto 0;
+        display: flex;
+        justify-content: space-between;
+
+        div {
+            width: px2rem(218);
+            height: 100%;
+            line-height: px2rem(96);
+            text-align: center;
+            color: #CAA8B8;
+            font-size: px2rem(40);
+            font-weight: bold;
+            background: url(../images/tab.png) no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .act {
+            background: url(../images/tabAct.png) no-repeat;
+            background-size: 100% 100%;
+            color: #fff;
+        }
+    }
+}
+
+.cardBox {
+    width: px2rem(736);
+    height: px2rem(1558);
+    background: url(../images/box1.png) no-repeat;
+    background-size: 100% 100%;
+    margin: -1rem auto px2rem(48);
+    position: relative;
+
+    .Box {
+        width: px2rem(736);
+        height: 19.2rem;
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        flex-wrap: wrap;
+        padding: 0.64rem 0.4rem;
+        position: relative;
+
+        .box {
+            width: px2rem(331);
+            height: px2rem(314);
+            background: url(../images/liBg.png) no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+            margin-bottom: px2rem(27);
+
+            .title {
+                color: #FED3AC;
+                font-size: px2rem(26);
+                text-align: center;
+                position: absolute;
+                top: px2rem(48);
+                left: 50%;
+                transform: translateX(-50%);
+            }
+
+            .leftLine,
+            .rightLine {
+                width: px2rem(140);
+                height: px2rem(2);
+                position: absolute;
+                top: px2rem(61);
+            }
+
+            .leftLine {
+                left: px2rem(-30);
+            }
+
+            .rightLine {
+                right: px2rem(-30);
+            }
+
+            .gold {
+                width: px2rem(121);
+                height: px2rem(121);
+                position: absolute;
+                left: px2rem(31);
+                top: px2rem(110);
+                background: #8C1137;
+                border: px2rem(2) solid #FF9DBB;
+                border-radius: px2rem(10);
+
+                .img {
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                }
+
+                .ok,
+                .not {
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    display: none;
+                }
+
+                .giftName {
+                    width: 100%;
+                    position: absolute;
+                    bottom: -0.5rem;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    color: #FFFFFF;
+                    font-size: px2rem(24);
+                    text-align: center;
+                }
+
+                .num {
+                    width: 100%;
+                    position: absolute;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    color: #FFB8B5;
+                    font-size: px2rem(22);
+                    text-align: center;
+                    bottom: -0.85rem;
+
+                    b {
+                        color: #FFDCAE;
+                    }
+                }
+            }
+
+            .gift {
+                width: px2rem(121);
+                height: px2rem(121);
+                position: absolute;
+                right: px2rem(31);
+                top: px2rem(110);
+                background: #8C1137;
+                border: px2rem(2) solid #FF9DBB;
+                border-radius: px2rem(10);
+
+                .img {
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                }
+
+                .ok,
+                .not {
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%, -50%);
+                    display: none;
+                }
+
+                .giftName {
+                    width: 100%;
+                    position: absolute;
+                    bottom: -0.5rem;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    color: #FFFFFF;
+                    font-size: px2rem(24);
+                    text-align: center;
+                }
+
+                .num {
+                    width: 100%;
+                    position: absolute;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    color: #FFB8B5;
+                    font-size: px2rem(22);
+                    text-align: center;
+                    bottom: -0.85rem;
+
+                    b {
+                        color: #FFDCAE;
+                    }
+                }
+
+                span {
+                    position: absolute;
+                    width: px2rem(62);
+                    height: px2rem(29);
+                    line-height: px2rem(29);
+                    background: #FFF5B0;
+                    border-radius: px2rem(15) px2rem(15) px2rem(15) px2rem(0);
+                    right: px2rem(-20);
+                    top: px2rem(-15);
+                    text-align: center;
+                    color: #E34D3C;
+                    font-size: px2rem(22);
+                }
+            }
+        }
+
+        .boxBig {
+            width: px2rem(661);
+            background: url(../images/liBigBg.png) no-repeat;
+            background-size: 100% 100%;
+            margin-bottom: 0;
+
+            .leftLine {
+                left: px2rem(137);
+            }
+
+            .rightLine {
+                right: px2rem(137);
+            }
+
+            .gold {
+                left: px2rem(161);
+            }
+
+            .gift {
+                right: px2rem(161);
+            }
+        }
+    }
+
+    .but {
+        width: px2rem(246);
+        height: px2rem(76);
+        border-radius: px2rem(76);
+        margin: -0.55rem auto 0.1rem;
+        background: linear-gradient(0deg, #FFE44E, #FF8B0F);
+        text-align: center;
+        overflow: hidden;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+
+        p {
+            font-weight: bold;
+            font-size: px2rem(36);
+            color: #FFFFFF;
+            text-shadow: 0px px2rem(3) 0px #FF5A00;
+            margin-top: px2rem(8);
+        }
+
+        u {
+            color: #fff;
+            font-size: px2rem(24);
+            text-decoration: line-through;
+        }
+    }
+
+    .but1 {
+        display: none;
+    }
+
+    .but2 {
+        line-height: px2rem(76);
+        font-weight: bold;
+        font-size: px2rem(36);
+        color: #FFFFFF;
+        text-shadow: 0px px2rem(3) 0px #FF5A00;
+        display: none;
+    }
+
+    .but3 {
+        line-height: px2rem(76);
+        font-weight: bold;
+        font-size: px2rem(36);
+        color: #F2D2C8;
+        background: #DE7F5D;
+        display: none;
+    }
+
+    .tips {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 1rem;
+        color: #fff;
+        text-align: center;
+        font-size: px2rem(22);
+        line-height: 0.4rem;
+        margin-top: 0.55rem;
+    }
+}
+
+.rule {
+    width: px2rem(736);
+    height: px2rem(914);
+    background: url(../images/ruleBg.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto px2rem(36);
+    overflow: hidden;
+
+    .title {
+        width: 100%;
+        margin-top: px2rem(18);
+        text-align: center;
+        color: #fff;
+        font-size: px2rem(44);
+    }
+
+    .content {
+        width: px2rem(617);
+        height: px2rem(746);
+        margin: px2rem(56) auto 0;
+        overflow-y: scroll;
+        color: #FFA7C4;
+        font-size: px2rem(24);
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        p {
+            margin-bottom: px2rem(35);
+            line-height: px2rem(35);
+        }
+    }
+}
+
+.pub {
+    position: fixed;
+    z-index: 99;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .6);
+    display: none;
+
+    .pub_in {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: px2rem(545);
+        height: px2rem(373);
+        background: url(../images/pubBg.png) no-repeat;
+        background-size: 100% 100%;
+        overflow: hidden;
+
+        .box1 {
+            display: none;
+
+            .title {
+                width: 100%;
+                text-align: center;
+                margin-top: px2rem(62);
+                color: #FFF724;
+                font-size: px2rem(34);
+            }
+
+            .content {
+                margin-top: px2rem(54);
+                width: 100%;
+                text-align: center;
+                color: #FFA7C4;
+                font-size: px2rem(30);
+            }
+
+            .ok {
+                width: px2rem(176);
+                height: px2rem(72);
+                line-height: px2rem(72);
+                background: linear-gradient(0deg, #FFE44E, #FF8B0F);
+                text-align: center;
+                color: #fff;
+                text-shadow: 0px px2rem(3) 0px #FF5A00;
+                float: left;
+                margin-left: px2rem(77);
+                border-radius: px2rem(72);
+                margin-top: px2rem(62);
+                font-size: px2rem(30);
+            }
+
+            .close {
+                width: px2rem(176);
+                height: px2rem(72);
+                line-height: px2rem(72);
+                background: #EE57A9;
+                text-align: center;
+                color: #fff;
+                text-shadow: 0px px2rem(3) 0px #FF5A00;
+                float: right;
+                margin-right: px2rem(77);
+                border-radius: px2rem(72);
+                margin-top: px2rem(62);
+                font-size: px2rem(30);
+            }
+        }
+
+        .box2 {
+            display: none;
+
+            .title {
+                width: 100%;
+                text-align: center;
+                margin-top: px2rem(62);
+                color: #FFF724;
+                font-size: px2rem(34);
+            }
+
+            .content {
+                margin-top: px2rem(54);
+                width: 100%;
+                text-align: center;
+                color: #FFA7C4;
+                font-size: px2rem(30);
+            }
+
+            .ok {
+                width: px2rem(176);
+                height: px2rem(72);
+                line-height: px2rem(72);
+                background: linear-gradient(0deg, #FFE44E, #FF8B0F);
+                text-align: center;
+                color: #fff;
+                text-shadow: 0px px2rem(3) 0px #FF5A00;
+                float: left;
+                margin-left: px2rem(77);
+                border-radius: px2rem(72);
+                margin-top: px2rem(62);
+                font-size: px2rem(30);
+            }
+
+            .close {
+                width: px2rem(176);
+                height: px2rem(72);
+                line-height: px2rem(72);
+                background: #EE57A9;
+                text-align: center;
+                color: #fff;
+                text-shadow: 0px px2rem(3) 0px #FF5A00;
+                float: right;
+                margin-right: px2rem(77);
+                border-radius: px2rem(72);
+                margin-top: px2rem(62);
+                font-size: px2rem(30);
+            }
+        }
+    }
+}
+
+.english {
+    .header .tab div {
+        font-size: px2rem(30);
+        line-height: 0.4rem;
+        box-sizing: border-box;
+        padding: px2rem(20) px2rem(5) px2rem(0);
+    }
+}
+
+.arabic {
+    .header .tab div {
+        font-size: px2rem(24);
+        line-height: 0.4rem;
+        box-sizing: border-box;
+        padding: px2rem(20) px2rem(5) px2rem(0);
+    }
+}

view/molistar/modules/weeklyCard/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="title"></title>
+    <!-- 金幣周卡 -->
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <!-- 頭部 -->
+    <div class="header img1">
+        <!-- tab -->
+        <div class="tab">
+            <div class="act text1"></div>
+            <div class="text2"></div>
+            <div class="text3"></div>
+        </div>
+    </div>
+    <!-- 周卡列表 -->
+    <div class="cardBox">
+        <div class="Box">
+            <!-- <div class="box">
+                <div class="title">第1天</div>
+                <img src="./images/left.png" alt="" class="leftLine">
+                <img src="./images/right.png" alt="" class="rightLine">
+                <div class="gold">
+                    <img src="./images/gold.png" alt="">
+                    <img src="./images/ok.png" alt="" class="ok">
+                    <img src="./images/not.png" alt="" class="not">
+                    <div class="giftName">金幣</div>
+                    <div class="num"><b>50</b>金幣</div>
+                </div>
+                <div class="gift">
+                    <img src="./images/gold.png" alt="">
+                    <img src="./images/ok.png" alt="" class="ok">
+                    <img src="./images/not.png" alt="" class="not">
+                    <div class="giftName">禮物昵稱</div>
+                    <div class="num"><b>50</b>金幣</div>
+                    <span>1天</span>
+                </div>
+            </div>
+            <div class="box boxBig">
+                <div class="title">第1天</div>
+                <img src="./images/left.png" alt="" class="leftLine">
+                <img src="./images/right.png" alt="" class="rightLine">
+                <div class="gold">
+                    <img src="./images/gold.png" alt="">
+                    <div class="giftName">金幣</div>
+                    <div class="num"><b>50</b>金幣</div>
+                </div>
+                <div class="gift">
+                    <img src="./images/gold.png" alt="">
+                    <div class="giftName">禮物昵稱</div>
+                    <div class="num"><b>50</b>金幣</div>
+                </div>
+            </div> -->
+        </div>
+        <div class="but but1">
+            <p>1$</p>
+            <u>原價:9.5$</u>
+        </div>
+        <div class="but but2 text4"></div>
+        <div class="but but3 text5"></div>
+        <p class="tips">當前補簽卡剩餘:10,<br>贈送任意價值≥1金幣的禮物即可獲得補簽卡,每天最多可得5張</p>
+    </div>
+    <!-- 活動規則 -->
+    <div class="rule text6">
+        
+    </div>
+    <!-- 彈窗 -->
+    <div class="pub">
+        <div class="pub_in">
+            <div class="box1">
+                <div class="title text7"></div>
+                <div class="content"></div>
+                <div class="ok text8"></div>
+                <div class="close text9"></div>
+            </div>
+            <div class="box2">
+                <div class="title text10"></div>
+                <div class="content"></div>
+                <div class="ok text8"></div>
+                <div class="close text9"></div>
+            </div>
+        </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="./js/index.js"></script>
+<script src="../../common/local/langHandler.js"></script>

view/molistar/modules/weeklyCard/js/index.js

@@ -0,0 +1,305 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+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'
+    })
+}
+var cardList;
+var tabId;
+var listIndex = 1;
+var currGroupId;//當天ID
+// 初始化函數
+$(function () {
+    getInfoFromClient();
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+        };
+        // 頂部返回事件
+        $('.back img').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        translateFun();
+        getWeekCardTabList();
+    }, 100)
+})
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.img1').attr("style", langReplace(localLang.demoModule.img1))
+    $('.title').html(langReplace(localLang.demoModule.title));
+    $('.text1').html(langReplace(localLang.demoModule.text1));
+    $('.text2').html(langReplace(localLang.demoModule.text2));
+    $('.text3').html(langReplace(localLang.demoModule.text3));
+    $('.text4').html(langReplace(localLang.demoModule.text4));
+    $('.text5').html(langReplace(localLang.demoModule.text5));
+    $('.text6').html(langReplace(localLang.demoModule.text6));
+    $('.text7').html(langReplace(localLang.demoModule.text7));
+    $('.text8').html(langReplace(localLang.demoModule.text8));
+    $('.text9').html(langReplace(localLang.demoModule.text9));
+    $('.text10').html(langReplace(localLang.demoModule.text10));
+    $('.text11').html(langReplace(localLang.demoModule.text11));
+
+}
+// 獲取檔位
+function getWeekCardTabList() {
+    $('.cardBox .but1,.cardBox .but2,.cardBox .but3').hide();
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/weekCardTab/list',
+        success(res) {
+            if (res.code === 200) {
+                cardList = res.data;
+                tabId = cardList[listIndex - 1].id;
+                currGroupId = cardList[listIndex - 1].currGroupId;
+                if (cardList[listIndex - 1].isPay == false) {//未購買
+                    $('.cardBox .but1 p').text(`${cardList[listIndex - 1].chargeProdAmount}$`)
+                    $('.cardBox .but1 u').text(`${langReplace(localLang.demoModule.text12)}:${cardList[listIndex - 1].showAmount}$`);
+                    $('.cardBox .but1').show();
+                } else if (cardList[listIndex - 1].isPay && cardList[listIndex - 1].isNeedRepair == false) {//今日已經簽到
+                    $('.cardBox .but3').show();
+                } else {//可簽到
+                    $('.cardBox .but2').show();
+                }
+                if (getQueryString().lang == "zh") {
+                    $('.cardBox .tips').text(`當前補簽卡剩餘:${cardList[listIndex - 1].repairNum},贈送任意價值≥1金幣的禮物即可獲得補簽卡,每天最多可得5張`)
+                } else if (getQueryString().lang == "ar") {
+                    $('.cardBox .tips').text(`البطاقات المتبقية لإعادة التوقيع: ${cardList[listIndex - 1].repairNum} احصل على ما يصل إلى 5 بطاقات يوميًا عن طريق إهداء هدية تُقدر بقيمة لا تقل عن 1 عملة.`)
+                } else {
+                    $('.cardBox .tips').text(`Current Residual Re-signing Cards: ${cardList[listIndex - 1].repairNum}. Receive up to 5 cards daily by gifting any gift valued at least 1 coin`)
+                }
+                rewardList()
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 獎勵列表
+function rewardList() {
+    $('.cardBox .Box .box').remove()
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/weekCard/rewardList',
+        data: { tabId, },
+        success(res) {
+            if (res.code === 200) {
+                var str = '';
+                var length = res.data.length - 1;
+                res.data.forEach((res, i) => {
+                    str += `
+                        <div class="box ${i == length ? 'boxBig' : ''} " groupId=${res.groupId} isCheckIn=${res.isCheckIn}>
+                            <div class="title">${res.groupName}</div>
+                            <img src="./images/left.png" alt="" class="leftLine">
+                            <img src="./images/right.png" alt="" class="rightLine">
+                            ${strFun(res.rewards, res.isCheckIn, i + 1)}
+                        </div>
+                    `
+                })
+                $('.cardBox .Box').append(str);
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+function strFun(val, isCheckIn, dayIndex) {
+    var str = ''
+    val.forEach(res => {
+        if (res.rewardType == 1) {
+            str += `
+            <div class="gold">
+                <img src="${res.rewardIcon}" alt="">
+                <img style="display:${cardList[listIndex - 1].isNeedRepair == false ? 'none' : isCheckIn ? 'block' : 'none'}" src="./images/ok.png" alt="" class="ok">
+                <img style="display:${cardList[listIndex - 1].isNeedRepair == false ? 'none' : isCheckIn && dayIndex < currGroupId ? 'block' : 'none'}" src="./images/not.png" alt="" class="not">
+                <div class="giftName">${res.rewardName?res.rewardName:langReplace(localLang.demoModule.text13)}</div>
+                <div class="num"><b>${res.rewardNum}</b>${langReplace(localLang.demoModule.text13)}</div>
+            </div>
+            `
+        } else {
+            str += `
+            <div class="gift">
+                <img src="${res.rewardIcon}" alt="">
+                <img style="display:${cardList[listIndex - 1].isNeedRepair == false ? 'none' : isCheckIn ? 'block' : 'none'}" src="./images/ok.png" alt="" class="ok">
+                <img style="display:${cardList[listIndex - 1].isNeedRepair == false ? 'none' : isCheckIn && dayIndex < currGroupId ? 'block' : 'none'}" src="./images/not.png" alt="" class="not">
+                <img style="display:${isCheckIn ? 'none' : 'block'} src="./images/not.png" alt="" class="not">
+                <div class="giftName">${res.rewardName}</div>
+                <div class="num"><b>${res.rewardPrice}</b>${langReplace(localLang.demoModule.text13)}</div>
+                <span>${res.rewardNum}${rewardTypeNumFun(res.rewardType).unit}</span>
+            </div>
+            `
+        }
+    })
+    return str;
+}
+// 切換
+$('.header .tab div').click(function () {
+    listIndex = $(this).index() + 1;
+    $(this).addClass('act').siblings().removeClass('act');
+    getWeekCardTabList();
+})
+// 購買周卡按鈕
+$('.cardBox .but1,.cardBox .but1 p,.cardBox .but1 u').click(function () {
+    $('.pub').show();
+    var num = cardList[listIndex - 1].chargeProdAmount;
+    var grade = listIndex == 1 ? "初級" : listIndex == 2 ? "中級" : "高級";
+    var gradeEn = listIndex == 1 ? "Beginner" : listIndex == 2 ? "Intermediate" : "Advanced";
+    var gradeAr = listIndex == 1 ? "المبتدئين" : listIndex == 2 ? "المتوسطين" : "المتقدمين";
+    if (getQueryString().lang == "zh") {
+        $('.pub .pub_in .box1 .content').text(`確認消費${num}$開通${grade}金幣周卡`)
+    } else if (getQueryString().lang == "en") {
+        $('.pub .pub_in .box1 .content').text(`Confirm spending ${num} dollars to buy the ${gradeEn} Week Card`)
+    } else {
+        $('.pub .pub_in .box1 .content').text(`تأكيد الاستهلاك${num}$يفتح${gradeAr}البطاقة الأسبوعية للعملة الذهبية`)
+    }
+    $('.pub .pub_in .box1').show();
+    $('.pub .pub_in .box2').hide();
+    bodyScroolFun(true);
+})
+// 二次確認購買周卡彈窗
+$('.pub .pub_in .box1 .ok').click(function () {
+    var productId;
+    if (browser.android) {
+        productId = cardList[listIndex - 1].googleChargeProdId;
+        window.androidJsObj.openPayment(productId)
+    } else {
+        productId = cardList[listIndex - 1].appleChargeProdId;
+        window.webkit.messageHandlers.openPayment.postMessage(productId)
+    }
+})
+//支付成功後的回調
+function openPaymentCallback(obj) {
+    console.log('回調對象', obj);
+    console.log('回調orderId', obj.orderId);
+    console.log('回調code', obj.code);
+    console.log('回調productId', obj.productId);
+    $('.pub').hide();
+    bodyScroolFun(false);
+    showLoading()
+    networkRequest({
+        type: 'post',
+        url: urlPrefix + '/weekCard/buy',
+        data: { tabId, },
+        success(res) {
+            if (res.code === 200) {
+                toastMsg(langReplace(localLang.demoModule.text14));
+                getWeekCardTabList();
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 簽到按鈕
+$('.cardBox .but2').click(function () {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/weekCard/checkIn',
+        data: { tabId, },
+        success(res) {
+            if (res.code === 200) {
+                toastMsg(langReplace(localLang.demoModule.text15));
+                getWeekCardTabList();
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+})
+// 補簽簽按鈕
+$('.cardBox .Box').on('click', '.box', function () {
+    var isCheckIn = $(this).attr("isCheckIn");
+    var groupid = $(this).attr("groupid");
+    $('.pub .pub_in .box2 .ok').attr("groupid", groupid);
+    if (isCheckIn == false) {
+        $('.pub').show();
+        $('.pub .pub_in .box1').hide();
+        $('.pub .pub_in .box2').show();
+
+    }
+})
+// 二次確認補簽彈窗
+$('.pub .pub_in .box2 .ok').click(function () {
+    var groupid = $('.pub .pub_in .box2 .ok').attr("groupid");
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '/weekCard/repair',
+        data: { tabId, groupId: groupid },
+        success(res) {
+            if (res.code === 200) {
+                toastMsg(langReplace(localLang.demoModule.text16));
+                getWeekCardTabList();
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+})
+// 關閉彈窗
+$('.pub .pub_in .box2 .close,.pub .pub_in .box1 .close').click(function () {
+    bodyScroolFun(false);
+    $('.pub').hide();
+})

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

@@ -0,0 +1,38 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        img1: `background: url(./images/header-ar.png) no-repeat;background-size: 100% 100%;`,
+        layerIndex1: 'جار التحميل...',
+        layerIndex2: 'تمت العملية',
+        layerIndex3: 'خطأ في الشبكة، يرجى الخروج وإعادة الدخول',
+        title: `بطاقة أسبوع الذهب`,
+        text1: `بطاقة أسبوعية مبتدئة`,
+        text2: `بطاقة أسبوعية متوسطة`,
+        text3: `بطاقة أسبوعية متقدمة`,
+        text4: `تسجيل الدخول`,
+        text5: `تم التسجيل`,
+        text6: `
+    <div class="title">قواعد النشاط</div>
+    <div class="content">
+        <p>1. تنقسم البطاقات الأسبوعية إلى مستوى مبتدئ/متوسط/متقدم، يمكن شراء مستويات مختلفة وتفعيلها في نفس الوقت؛</p>
+        <p>2. بعد الشراء، في يوم النشاط، يمكنك استلام جائزة اليوم الأول، ثم استلام الجوائز المقابلة للأيام الستة التالية؛</p>
+        <p>3. إذا فاتك يوم من التسجيل، يمكنك استخدام بطاقة إعادة التسجيل لتسجيل الدخول. انقر على "لم يتم التسجيل" في الحدث لإعادة التسجيل ~</p>
+        <p>4. كيفية الحصول على بطاقات التسجيل: من خلال إهداء أي هدية تقدر قيمتها بما لا يقل عن 1 عملة، يمكنك الحصول على بطاقة إعادة التسجيل واحدة. باستخدام بطاقة إعادة التسجيل، يمكنك تعويض يوم واحد. تكون بطاقة إعادة التسجيل صالحة لليوم وتنتهي منتصف الليل في اليوم التالي. يمكنك الحصول على ما يصل إلى 5 بطاقات يوميًا؛</p>
+        <p>5. البطاقة الأسبوعية صالحة من يوم الشراء لمدة 7 أيام كاملة. بعد انتهاء فترة الصلاحية، لا يمكنك التسجيل لتلك الجائزة؛</p>
+        <p>6. إذا كان لديك أي أسئلة، يرجى الاتصال بخدمة العملاء (LINE: pekoyuyin، البحث عن الرقم في التطبيق: 10001، WeChat: sd245376)؛</p>
+        <p>7. تعود التفسير النهائي لهذا النشاط إلى الجهة الرسمية، ولا يتعلق بشركة Apple Inc./Google؛</p>
+    </div>`,
+        text7: `تفعيل بطاقة أسبوع الذهب`,
+        text8: `نعم`,
+        text9: `لا`,
+        text10: `إعادة التسجيل`,
+        text11: `هل ترغب في استخدام بطاقة إعادة التسجيل لإعادة التسجيل؟`,
+        text12: `السعر الأصلي`,
+        text13: `عملة`,
+        text14: `تم الشراء بنجاح`,
+        text15: `تم التسجيل بنجاح`,
+        text16: `تمت إعادة التسجيل بنجاح`,
+
+    }
+}

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

@@ -0,0 +1,37 @@
+// 英文
+langEn = {
+    // 模块
+    demoModule: {
+        img1: `background: url(./images/header-en.png) no-repeat;background-size: 100% 100%;`,
+        layerIndex1: 'Loading...',
+        layerIndex2: 'Operation completed',
+        layerIndex3: 'Network error, please exit and re-enter',
+        title: `Gold Weekly Card`,
+        text1: `Junior Weekly Card`,
+        text2: `Intermediate Weekly Card`,
+        text3: `Advanced Weekly Card`,
+        text4: `Sign In`,
+        text5: `Signed In`,
+        text6: `
+    <div class="title">Activity Rules</div>
+    <div class="content">
+        <p>1. Weekly cards are divided into Junior/Intermediate/Advanced levels, different levels can be purchased and activated simultaneously;</p>
+        <p>2. After purchase, on the day of activation, you can receive the reward for the first day, and then receive corresponding rewards for the next six days;</p>
+        <p>3. If you miss a day's check-in, you can use a re-signing card to check in. Click on the "Not Signed In" in the event to re-sign ~</p>
+        <p>4. How to obtain sign-in cards: By gifting any gift valued at least 1 coin, you can obtain 1 re-signing card. Using a re-signing card allows you to make up for one day. The re-signing card is valid for the day and expires at midnight the next day. You can receive up to 5 cards daily;</p>
+        <p>5. The weekly card is valid from the day of purchase for 7 full days. After the validity period expires, you cannot sign in for that reward;</p>
+        <p>6. If you have any questions, please contact customer service (LINE: pekoyuyin, search ID in app: 10001, WeChat: sd245376);</p>
+        <p>7. The final interpretation of this activity belongs to the official, and it has nothing to do with Apple Inc./Google;</p>
+    </div>`,
+        text7: `Activate Gold Weekly Card`,
+        text8: `Yes`,
+        text9: `No`,
+        text10: `Re-sign`,
+        text11: `Do you want to use a re-signing card for re-signing?`,
+        text12: `Original Price`,
+        text13: `Coins`,
+        text14: `Purchase Successful`,
+        text15: `Sign In Successful`,
+        text16: `Re-sign Successful`,
+    }
+}

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

@@ -0,0 +1,37 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        img1: `background: url(./images/header.png) no-repeat;background-size: 100% 100%;`,
+        layerIndex1: '加載中...',
+        layerIndex2: '操作完成',
+        layerIndex3: '網絡錯誤，請退出重進',
+        title: `金幣周卡`,
+        text1: `初級周卡`,
+        text2: `中級周卡`,
+        text3: `高級周卡`,
+        text4: `簽到`,
+        text5: `已簽到`,
+        text6: `
+        <div class="title">活動規則</div>
+        <div class="content">
+            <p>1.周卡分初級/中級/高級周卡，不同檔位可同時購買同時生效；</p>
+            <p>2.購買後，生效當日可即可領取第一日獎勵，至未來六日每日分領取對應獎勵；</p>
+            <p>3.如果錯過某日簽到可使用補簽進行簽到，點擊活動內【未簽到】的字樣就可以進行補簽啦～</p>
+            <p>4.簽到卡如何獲得：贈送一次任意價值≥1金幣的禮物，可獲得1張補簽卡，使用補簽卡一次可補簽一天，補簽卡當日有效，次日零點失效，每日最高可獲得5張；</p>
+            <p>5.周卡有效時間為購買日當日起整7個整日，超過有效期後無法再簽到該獎勵；</p>
+            <p>6.有任何疑問請聯繫客服（LINE:pekoyuyin、app內搜索ID：10001、WeChat:sd245376）；</p>
+            <p>7.本活動最終解釋權歸官方所有，並與Apple inc/Google公司無關；</p>
+        </div>`,
+        text7: `開通金幣周卡`,
+        text8: `是`,
+        text9: `否`,
+        text10: `補簽`,
+        text11: `是否使用補簽卡進行補簽`,
+        text12: `原價`,
+        text13: `金幣`,
+        text14: `購買成功`,
+        text15: `簽到成功`,
+        text16: `補簽成功`,
+    }
+}