提交

src/api/worldCup.js

@@ -57,3 +57,12 @@ export function forecast(data) {
   });
 }
 
+export function getBannerAndVideo(data) {
+  return ajax({
+    url: "https://cxzx.smcic.net/operate/worldCup.json?" + Date.now(),
+    method: "get",
+    urlType: "default",
+    data,
+  });
+}
+

src/config/index.js

@@ -1,5 +1,6 @@
 export default {
   base: {
     ajax: "http://topic.smcic.net/operate/world-cup/",
+    default: ""
   },
 };

src/view/WorldCup/components/match.vue

@@ -51,7 +51,9 @@
       </svg>
     </div>
     <br />
-    <van-button round type="primary" block @click="upData">完成预测</van-button>
+    <div style="padding: 0 10vw;">
+        <van-button round type="primary" block @click="upData" color="linear-gradient(to right, #ff6034, #ee0a24)">完成预测</van-button>
+    </div>
   </div>
 </template>
 <script setup>

src/view/WorldCup/index.vue

@@ -2,7 +2,9 @@
   <div class="WorldCup" :style="'font-size: ' + fontSize + 'px'">
     <div class="up">
       <img class="upbg" :src="require('../../assets/img/upbg.jpg')" />
-      <video controls class="video" src=""></video>
+      <div class="video">
+        <img src="" alt="" />
+      </div>
       <img class="activityTitle" :src="require('../../assets/img/T.png')" />
       <div class="activity">
         <p>
@@ -29,19 +31,19 @@
       <div class="videobg">
         <div class="title">模块标题</div>
         <van-row gutter="18">
-          <van-col span="12">
-            <video controls class="video" src=""></video>
-          </van-col>
-          <van-col span="12">
-            <video controls class="video" src=""></video>
-          </van-col>
-        </van-row>
-        <van-row gutter="18">
-          <van-col span="12">
-            <video controls class="video" src=""></video>
-          </van-col>
-          <van-col span="12">
-            <video controls class="video" src=""></video>
+          <van-col
+            class="video"
+            span="12"
+            v-for="i in Videos"
+            :key="i.url"
+            @click="() => playVideo(i)"
+          >
+            <van-icon name="play-circle-o" class="play" />
+            <img
+              width="100%"
+              :src="i.url + '?x-oss-process=video/snapshot,t_100,f_jpg,m_fast'"
+              alt=""
+            />
           </van-col>
         </van-row>
       </div>
@@ -51,22 +53,40 @@
       </div>
       <match v-if="team.length" />
     </div>
+
+    <div class="playVideo" v-if="play.phone">
+      <van-icon @click="() => playVideo({})" name="close" class="close" />
+      <video :src="play.url" controls></video>
+      <van-button
+        round
+        class="btn"
+        block
+        @click="saveVote"
+        color="linear-gradient(to right, #ff6034, #ee0a24)"
+      >
+        投票
+      </van-button>
+    </div>
   </div>
 </template>
 <script setup>
+import { isShanshipin, isWechat } from "@/utils/isTerminal";
 import { ref, provide, reactive } from "vue";
 import chat from "./components/chat.vue";
 import ranking from "./components/ranking.vue";
 import match from "./components/match.vue";
-import { Dialog } from "vant";
+import { Toast, Dialog } from "vant";
 
-import { getMatch } from "@/api/worldCup.js";
+import { getMatch, getBannerAndVideo, votpSave } from "@/api/worldCup.js";
 
 const availWidth =
   window.$originData.orginParames.availWidth > 1440
     ? 1440
     : window.$originData.orginParames.availWidth;
 const fontSize = ref(availWidth / 10);
+const Banner = ref([]);
+const Videos = ref([]);
+const play = ref({});
 const maxcol = [8, 4, 2, 1, 1, 1, 2, 4, 8];
 let team = reactive([]);
 const shanshipin = window.$shanshipin || {};
@@ -86,6 +106,7 @@ provide("user", from); // 配置全域参数
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
+const p = isWechat ? "微信" : isShanshipin ? "闪视频" : "其它";
 
 function setStorage() {
   localStorage.setItem("worldCupPhone", from.phone || "");
@@ -95,10 +116,17 @@ function setStorage() {
 /**
  * getMatch  获得赛事日程；
  */
-Promise.all([getMatch()]).then(li => {
+Promise.all([getMatch(), getBannerAndVideo()]).then(li => {
   formmateMatch(li[0] || []);
+  formmateBanner(li[1] || {});
 });
 
+function formmateBanner(r) {
+  console.log(r);
+  Videos.value = r.videos || [];
+  Banner.value = r.banner || [];
+}
+
 function formmateMatch(matchList) {
   for (let i = 0; i < matchList.length; i++) {
     const v = matchList[i];
@@ -149,6 +177,10 @@ function formmateMatch(matchList) {
   }
 }
 
+function playVideo(item) {
+  play.value = item;
+}
+
 function setRow(index, v) {
   const max = maxcol[index];
   if (team[index] && team[index].length == max) {
@@ -222,6 +254,21 @@ function toNewPage(url) {
   if (window.$shanshipin.Phone) U += "?phone=" + window.$shanshipin.Phone;
   location.href = U;
 }
+
+function saveVote() {
+  if (!from.phone) return login(vote);
+  else vote();
+}
+function vote() {
+  votpSave({
+    target: play.value.phone,
+    source: from.phone,
+    client: p,
+  }).then(r => {
+    console.log(r);
+    Toast("感谢您的支持！");
+  });
+}
 </script>
 <style lang="scss">
 .WorldCup {
@@ -256,6 +303,7 @@ function toNewPage(url) {
       position: relative;
       z-index: 1;
       width: calc(100% - 26px);
+      height: 160px;
       margin: 13px;
     }
     .activity {
@@ -316,6 +364,53 @@ function toNewPage(url) {
         text-align: center;
         margin-bottom: 25px;
       }
+      .video {
+        position: relative;
+        font-size: 0;
+        img {
+          width: calc(50vw - 13px);
+        }
+        .play {
+          position: absolute;
+          font-size: 40px;
+          color: #fff;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 1;
+        }
+      }
+    }
+  }
+  .playVideo {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 1);
+    z-index: 10;
+    video {
+      position: absolute;
+      top: 50%;
+      transform: translate(0, -50%);
+      width: 100%;
+      background: rgb(0, 0, 0);
+    }
+    .close {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      z-index: 11;
+      color: #fff;
+      font-size: 20px;
+    }
+    .btn {
+      width: 50vw;
+      position: absolute;
+      left: 50%;
+      bottom: 5vh;
+      transform: translate(-50%, 0);
     }
   }
 }

src/view/WorldCupDetail/index.vue

@@ -114,7 +114,6 @@ function login(next) {
     next && next();
   });
 }
-console.log('-------->',isShanshipin)
 const target = window.$originData.urlParames.phone || from.phone;
 
 Detail({