alter

pages/welfare-community/list.vue

@@ -13,15 +13,16 @@
       <div :class="item.availableStatus === 1 ? 'gift-btn disabled' : 'gift-btn'" @click="receive(item)">{{ ['领取', '已领完', '查看'][item.availableStatus] }}</div>
     </div>
     <img class="w80h67" src="~/assets/image/activity/welfare-community/return.png" alt="" @click="returnUp">
-    <van-popup v-model="showVideoSuccess" style="background: transparent;color: #999;" closeable close-icon-position="top-right" :close-on-click-overlay="false">
+    <van-popup v-model="showVideoSuccess" position="top" style="background: transparent;color: #999;" :close-on-click-overlay="false">
       <div class="w290h215 dialog-view">
         <div class="txt3">恭喜您获得礼包</div>
+        <van-icon name="cross" color="#999999" size="15" class="icon-close" @click="showVideoSuccess=false" />
         <div class="txt4">请在游戏中兑换<br />激活码为：{{ gameActivationCode }}。<span class="c3B86FF" @click="copyCode()">复制</span></div>
-        <div class="buy-btn" @click="order">购买云机</div>
+        <div class="buy-btn" @click="order('showVideoSuccess')">购买云机</div>
       </div>
     </van-popup>
-    <van-popup v-model="showAd" style="background: transparent;color: #999;" :close-on-click-overlay="false">
-      <div v-for="(item, index) in adlist" :key="item.id">
+    <van-popup v-model="showAd" position="top" style="background: transparent;color: #999;" :close-on-click-overlay="false" @close="closeShowAd">
+      <div v-for="(item, index) in adlist" :key="item.id" class="m114">
         <div v-if="index === 0" class="fwc">
           <div v-if="time" class="countdown">{{ time }}s后关闭广告</div>
           <video ref="videoPlayer" class="w290h330" :src="item.adVideoBase.videoUrl" x5-video-orientation="landscape" x5-video-player-type="h5" :x5-video-player-fullscreen="false" :controls="false" :webkit-playsinline="true" :playsinline="true" :autoplay="true" play-btn-position="center" :show-fullscreen-btn="false" :muted="true" @ended="ended" />
@@ -29,16 +30,18 @@
         </div>
       </div>
     </van-popup>
-    <van-popup v-model="showBuy" style="background: transparent;color: #999;" closeable close-icon-position="top-right" :close-on-click-overlay="false">
+    <van-popup v-model="showBuy" style="background: transparent;color: #999;" position="top" :close-on-click-overlay="false">
       <div class="w290h276 dialog-view">
         <div class="txt3">平台内下1单，立得惊喜礼包</div>
+        <van-icon name="cross" color="#999999" size="15" class="icon-close" @click="showBuy=false" />
         <img class="w100h107" src="~/assets/image/activity/welfare-community/gift.png" alt="">
-        <div class="buy-btn" style="margin:15px auto 0;" @click="order">下单得惊喜礼包</div>
+        <div class="buy-btn" style="margin:15px auto 0;" @click="order('showBuy')">下单得惊喜礼包</div>
       </div>
     </van-popup>
-    <van-popup v-model="showBuySuccess" style="background: transparent;color: #999;" closeable close-icon-position="top-right" :close-on-click-overlay="false">
+    <van-popup v-model="showBuySuccess" style="background: transparent;color: #999;" position="top" :close-on-click-overlay="false">
       <div class="w290h233 dialog-view">
         <div class="txt3">恭喜您获得礼包</div>
+        <van-icon name="cross" color="#999999" size="15" class="icon-close" @click="showBuySuccess=false" />
         <div class="txt4">请在游戏中兑换<br />激活码为：{{ gameActivationCode }}。<span class="c3B86FF" @click="copyCode()">复制</span></div>
         <div class="fsc mt20">
           <div class="fcc">
@@ -58,8 +61,9 @@
         </div>
       </div>
     </van-popup>
-    <van-popup v-model="showLogin" style="background: transparent;color: #999;" closeable close-icon-position="top-right" :close-on-click-overlay="false" @click-close-icon="returnUp">
+    <van-popup v-model="showLogin" style="background: transparent;color: #999;" position="top" :close-on-click-overlay="false" @click-close-icon="returnUp">
       <div class="w290h215 dialog-view">
+        <van-icon name="cross" color="#999999" size="15" class="icon-close" @click="returnUp" />
         <div class="txt3">领取礼包，请先<br />绑定手机号</div>
         <div class="buy-btn" style="margin:30px auto 0;" @click="login">立即绑定</div>
       </div>
@@ -70,6 +74,7 @@
 <script>
 import { Toast } from 'vant';
 import { fileKeyToUrl } from '@/plugins/file-center.js';
+
 export default {
   auth: false,
   data() {
@@ -107,6 +112,10 @@ export default {
     }
   },
   methods: {
+    closeShowAd() {
+      this.showAd = false;
+      clearInterval(this.timer);
+    },
     closeAd() {
       this.showAd = false;
       clearInterval(this.timer);
@@ -118,7 +127,13 @@ export default {
       await this.$native.clipboard.writeText(this.gameActivationCode);
       this.$toast.success('复制成功');
     },
-    order() {
+    order(key) {
+      if (key === 'showBuy') {
+        this.showBuy = false
+      }
+      if (key === 'showVideoSuccess') {
+        this.showVideoSuccess = false
+      }
       if (this.$userAgent.isSzx && this.$userAgent.isIos) {
         window.webkit.messageHandlers.order.postMessage({});
       }
@@ -127,6 +142,7 @@ export default {
       }
     },
     login() {
+      this.showLogin = false
       if (this.$userAgent.isSzx && this.$userAgent.isIos) {
         window.webkit.messageHandlers.showLogin.postMessage({});
       }
@@ -157,13 +173,17 @@ export default {
         if (item.taskType === 1) {
           const res = await this.$axios.$post('/public/v5/advertising/getAdInfoByAdPlace', { id: 1, adPlace: 24, os: this.$userAgent.isAndroid ? 1 : 2 }, { headers: { Authorization: this.token } });
           this.adlist = res.data
+          if (!this.adlist.length) {
+            return
+          }
+          this.adlist = this.adlist.length > 1 ? this.randomSort(this.adlist) : this.adlist;
           this.showAd = true
-          this.$nextTick(() => {
-            this.time = 30
+          setTimeout(() => {
+            this.time = this.$refs.videoPlayer[0].duration > 30 ? 30 : parseInt(this.$refs.videoPlayer[0].duration);
             this.timer = setInterval(
               () => --this.time <= 0 && clearInterval(this.timer),
               1000);
-          })
+          }, 800)
         }
       } else {
         if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
@@ -174,6 +194,15 @@ export default {
         }
       }
     },
+    randomSort(array) {
+      const length = array.length;
+      if (!Array.isArray(array) || length <= 1) return;
+      for (let index = 0; index < length - 1; index++) {
+        const randomIndex = Math.floor(Math.random() * (length - index)) + index;
+        [array[index], array[randomIndex]] = [array[randomIndex], array[index]];
+      }
+      return array;
+    },
     async getAppGameGiftActivityDetailsList() {
       try {
         const res = await this.$axios.$get('/activity/game/giftActivity/getAppGameGiftActivityDetailsList?giftActivityId=' + this.id, { headers: { Authorization: this.token } });
@@ -284,11 +313,13 @@ export default {
 .w290h233 {
   width: 290px;
   height: 233px;
+  margin: 217px auto 0;
 }
 
 .w290h276 {
   width: 290px;
   height: 276px;
+  margin: 196px auto 0;
 }
 
 .dialog-view {
@@ -327,6 +358,7 @@ export default {
 .w290h330 {
   width: 290px;
   height: 330px;
+  background: #000000;
 }
 
 .buy-btn {
@@ -368,6 +400,18 @@ export default {
 .w290h215 {
   width: 290px;
   height: 215px;
+  margin: 226px auto 0;
+  position: relative;
+}
+
+.m114 {
+  margin: 114px auto 0;
+  width: 290px;
+}
+.icon-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
 }
 
 .gift-btn {