no message

src/components/cmh/index.vue

@@ -13,8 +13,8 @@
         @click="playMusic"
         v-if="game.backMusicFlag && game.gameExt.backMusicUrl"
       ></div>
-      <div class="integral" v-if="game.integral">
-        {{ game.integralCount || 0 }}积分/次
+      <div class="integral" v-if="rule.integral">
+        {{ rule.integral || 0 }}积分/次
       </div>
 
       <swiper
@@ -26,9 +26,7 @@
       >
         <swiper-slide v-for="item in list" :key="item">
           <div class="swiper-item">
-            <img
-              src="./images/tips_bg.png"
-            />
+            <img src="./images/tips_bg.png" />
             <span>{{ item }}</span>
           </div>
         </swiper-slide>
@@ -50,38 +48,32 @@
 
       <div class="points-count-box">
         <div>
-          <div class="text-box">
+          <!-- 左边显示-右边次数显示且积分玩法开启才显示在左边 -->
+          <div class="text-box" v-if="rule.integral && playNumberObj && playNumberObj.playNumberFlag">
             <div class="text">{{ currentIntegral }}</div>
-            <img
-              class="text-shadow"
-              src="./images/circle_bg.png"
-            />
-            <img
-              class="title-image"
-              src="./images/我的积分.png"
-            />
+            <img class="text-shadow" src="./images/circle_bg.png" />
+            <img class="title-image" src="./images/我的积分.png" />
           </div>
         </div>
 
-        <div class="game-name-box">
-          <div class="line left"></div>
-          <div class="game-name">点击盲盒抽取好礼</div>
-          <div class="line right"></div>
-        </div>
+        <img
+          class="guide-img"
+          :src="game.gameExt.guideImageUrl"
+          mode="widthFix"
+        />
         <div>
           <div
             class="text-box"
             v-if="playNumberObj && playNumberObj.playNumberFlag"
           >
             <div class="text">{{ playNumberObj.playNumber }}</div>
-            <img
-              class="text-shadow"
-              src="./images/circle_bg.png"
-            />
-            <img
-              class="title-image"
-              src="./images/剩余次数.png"
-            />
+            <img class="text-shadow" src="./images/circle_bg.png" />
+            <img class="title-image" src="./images/剩余次数.png" />
+          </div>
+          <div class="text-box" v-else-if="rule.integral">
+            <div class="text">{{ currentIntegral }}</div>
+            <img class="text-shadow" src="./images/circle_bg.png" />
+            <img class="title-image" src="./images/我的积分.png" />
           </div>
         </div>
       </div>
@@ -98,9 +90,7 @@
         <div class="icon">
           <div class="iconfont icon-yaoqing"></div>
         </div>
-        <img
-          src="./images/邀请助力.png"
-        />
+        <img src="./images/邀请助力.png" />
       </div>
     </div>
 
@@ -131,6 +121,7 @@ const {
   getGamePlayBarrage,
   gamePlay,
   getIntegral,
+  getGameRule,
 } = gameRequestApi;
 
 import { Swiper, SwiperSlide } from "vue-awesome-swiper";
@@ -213,7 +204,7 @@ export default {
           disableOnInteraction: true,
         },
       },
-      isPlay: true,
+      isPlay: false,
       name: "猜盲盒",
       game: {},
       gameId: "1",
@@ -224,25 +215,51 @@ export default {
   },
   created() {
     document.title = "猜盲盒";
-    // this.postApi();
-    // this.getApi();
+    if (!this.audio) {
+      this.audio = new Audio();
+      this.audio.autoplay = true;
+      this.audio.addEventListener(
+        "ended",
+        () => {
+          if (this.isPlay) {
+            this.audio.play();
+          }
+        },
+        false
+      );
+    }
     this.getGame();
+    this.getGameRule();
     this.getGamePlayNumber();
     this.getIntegral();
   },
   methods: {
-    getGame() {
-      getGameInfo({
+    async getGame() {
+      let res = await getGameInfo({
         gameId: this.gameId,
         enterpriseId: this.enterpriseId,
-      }).then((res) => {
-        console.log(res);
-        document.title = res.gameName;
-        res.gameExt.prizeStyleList = JSON.parse(
-          res.gameExt.prizeStyleJson || "[]"
-        );
-        this.game = res;
       });
+
+      document.title = res.gameName;
+      res.gameExt.prizeStyleList = JSON.parse(
+        res.gameExt.prizeStyleJson || "[]"
+      );
+      this.game = res;
+
+      this.audio.src = res.gameExt.backMusicUrl;
+
+      if (this.isPlay) {
+        this.audio.play();
+      } else {
+        this.audio.pause();
+      }
+    },
+    async getGameRule(){
+      let rule = await getGameRule({
+        gameId: this.gameId,
+        enterpriseId: this.enterpriseId,
+      })
+      this.rule = rule;
     },
     async getGamePlayNumber() {
       let playNumberObj = await getGamePlayNumber({
@@ -294,6 +311,11 @@ export default {
     },
     playMusic() {
       this.isPlay = !this.isPlay;
+      if (this.isPlay) {
+        this.audio.play();
+      } else {
+        this.audio.pause();
+      }
     },
     clickShareBtn() {
       this.showShareImgDialog = true;
@@ -538,30 +560,9 @@ export default {
   height: 16px;
 }
 
-.game-name-box {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.game-name-box .line {
-  width: 13px;
-  height: 3px;
-  border-radius: 1px;
-}
-
-.game-name-box .line.left {
-  background: linear-gradient(90deg, rgba(39, 41, 43, 0) 0%, #27292b 100%);
-  margin-right: 3px;
-}
-.game-name-box .line.right {
-  background: linear-gradient(90deg, #27292b 0%, rgba(39, 41, 43, 0) 100%);
-  margin-left: 3px;
-}
-.game-name-box .game-name {
-  color: #27292b;
-  font-size: 18px;
-  font-weight: 600;
+.guide-img {
+  width: 174px;
+  height: 17px;
 }
 
 .ad-image {