activity/src/view/WorldCup/index.vue

<template>
  <div class="WorldCup" :style="'font-size: ' + fontSize + 'px'">
    <div class="up">
      <img class="upbg" :src="require('../../assets/img/upbg.jpg')" />
      <van-swipe class="Banner video" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="item in Banner"
          :key="item.url"
          @click="() => playVideo(item)"
        >
          <van-icon name="play-circle-o" class="play" />
          <img
            :src="item.url + '?x-oss-process=video/snapshot,t_100,f_jpg,m_fast'"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>

      <img class="activityTitle" :src="require('../../assets/img/T.png')" />
      <div class="activity">
        <p>
          尽管曾经的比赛已成过眼云烟，但总有些经典瞬间无法忘却。那些年的世界杯名场面、那些与挚友一同熬夜看比赛的日子，那些因为足球而欣喜、落寞、激动、感伤的时刻，会永远铭记心中。
        </p>
        <p class="nextDuan">
          用户可在下方“我要投稿”上传自己与足球相关的视频，题材包含：足球技巧展示、喜爱的球队/球星、球衣收藏、印象深刻的比赛等各种足球、世界杯相关的视频，并点击“我的投稿”分享邀请好友助威。
        </p>
      </div>
      <div class="btns">
        <img
          class="userInput"
          @click="() => toNewPage('./WorldContribution.html')"
          :src="require('../../assets/img/userInput.png')"
        />
        <img
          class="userInput my"
          @click="verification"
          :src="require('../../assets/img/my.png')"
        />
      </div>
    </div>
    <div class="down">
      <div class="videobg">
        <div class="title">精彩视频</div>
        <van-row gutter="18">
          <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>
      <div class="vote">
        <ranking />
        <chat @toLogin="login" />
      </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>

    <Shanshipin />
  </div>
</template>
<script setup>
import Shanshipin from "@/components/shanshipin.vue";
// import { ElCarouselItem, ElCarousel } from "element-plus";
// import "element-plus/theme-chalk/base.css";
// import "element-plus/theme-chalk/el-carousel.css";
// import "element-plus/theme-chalk/el-carousel-item.css";
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 { Toast, Dialog } from "vant";

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 || {};
const from = reactive({
  name: shanshipin.UserName || localStorage.getItem("worldCupName") || "",
  phone: shanshipin.Phone || localStorage.getItem("worldCupPhone") || "",
});
provide("fontSize", fontSize); // 配置全域参数
provide("availWidth", availWidth); // 配置全域参数
provide("maxcol", maxcol); // 配置全域参数
provide("team", team); // 配置全域参数
provide("user", from); // 配置全域参数
// import { onMounted, reactive } from "vue";
// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
const p = isWechat ? "微信" : isShanshipin ? "闪视频" : "其它";

function setStorage() {
  localStorage.setItem("worldCupPhone", from.phone || "");
  localStorage.setItem("worldCupName", from.name || "");
}

/**
 * getMatch  获得赛事日程；
 */
Promise.all([
  getMatch({
    phone: from.phone,
  }),
  getBannerAndVideo(),
]).then(li => {
  formmateMatch(li[0] || []);
  formmateBanner(li[1] || {});
});

function formmateBanner(r) {
  Videos.value = r.videos || [];
  Banner.value = r.banner || [];
}

function formmateMatch(matchList) {
  const isForeast = !!matchList[14].isWinner;
  for (let i = 0; i < matchList.length; i++) {
    const v = matchList[i];
    if (v.rounds === "1/8决赛") setRow(0, v, isForeast); // 16进8
    else if (v.rounds === "1/4决赛") setRow(1, v, isForeast); // 8进4
    else if (v.rounds === "半决赛") setRow(2, v); // 4进2
    else if (v.rounds === "决赛") {
      // 2进1
      team[3] = [
        {
          isForeast,
          team: v.home,
          isWinner: v.winner === v.home,
          teamlogo: v.homeLogo,
          isED: !!v.winner,
          isHome: true,
          selectId: v.id,
          pSelectId: v.pid,
        },
      ];
      team[5] = [
        {
          isForeast,
          team: v.away,
          isWinner: v.winner === v.away,
          teamlogo: v.awayLogo,
          isED: !!v.winner,
          isHome: true,
          selectId: v.id,
          pSelectId: v.pid,
        },
      ];
      team[Math.ceil((maxcol.length - 1) / 2)] = [
        {
          team: v.winner || "",
          isWinner: true,
          teamlogo:
            v.winner === v.home
              ? v.homeLogo
              : v.winner === v.away
              ? v.awayLogo
              : "",
          isHome: true,
          isForeast,
          isED: !!v.winner,
          selectId: v.id,
          pSelectId: v.pid,
        },
      ];
    }
  }
}

function playVideo(item) {
  play.value = item;
}

function setRow(index, v) {
  const max = maxcol[index];
  if (team[index] && team[index].length == max) {
    // 放到图像下部
    setTeam(maxcol.length - index - 1, v);
  } else {
    // 放到图像上部
    setTeam(index, v);
  }
}

function setTeam(teamIndex, item, isForeast) {
  if (!team[teamIndex]) team[teamIndex] = [];
  team[teamIndex].push({
    team: item.home || "",
    isWinner: item.winner === item.home,
    teamlogo: item.homeLogo || "",
    isED: !!item.winner,
    isForeast,
    isHome: true,
    selectId: item.id,
    pSelectId: item.pid,
  });
  team[teamIndex].push({
    team: item.away || "",
    isWinner: item.winner === item.away,
    teamlogo: item.awayLogo || "",
    isED: !!item.winner,
    isForeast,
    isHome: false,
    selectId: item.id,
    pSelectId: item.pid,
  });
}

function login(next) {
  Dialog.alert({
    title: "",
    messageAlign: "left",
    theme: "round-button",
    confirmButtonText: "登录",
    message: () => (
      <div>
        <van-field
          required
          v-model={from.name}
          label="姓名"
          placeholder="请输入用户名"
        />
        <van-field
          required
          v-model={from.phone}
          label="联系方式"
          type="tel"
          placeholder="请输入手机号"
        />
      </div>
    ),
  }).then(() => {
    setStorage();
    next && next();
  });
}

function verification() {
  if (!from.phone) return login(() => toNewPage("./WorldCupDetail.html"));
  toNewPage("./WorldCupDetail.html");
}

function toNewPage(url) {
  if (!url) return;
  let U = 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 {
  $fontSize: calc(100% / 10);
  width: 100%;
  max-width: 1440px;
  min-height: 100vh;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  background-image: url(../../assets/img/bg.jpg);
  background-size: 100% 100%;
  .video {
    background: #000;
    width: 100%;
  }
  .activityTitle {
    width: 51.1%;
    display: block;
    margin: 0 auto;
  }
  .up {
    padding-top: 38.8vw;
    position: relative;
    .Banner {
      font-size: 0;
      position: relative;
      img {
        width: 100%;
      }
      .play {
        position: absolute;
        font-size: 40px;
        color: #fff;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
      }
    }
    .upbg {
      position: absolute;
      top: 0;
      z-index: 0;
      width: 100%;
    }
    .video {
      position: relative;
      z-index: 1;
      width: calc(100% - 26px);
      height: 160px;
      margin: 13px;
    }
    .activity {
      background-image: url(../../assets/img/kuang.png);
      background-size: 100% 100%;
      margin: 17px 10px 19px 10px;
      min-height: 315px;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      padding: 15px;
      line-height: 1.8em;
      p {
        text-indent: 2em;
        border: 1px solid #fbd204;
        border-radius: 1em;
        padding: 5px;
      }
      .nextDuan {
        margin-top: 20px;
      }
    }
    .btns {
      display: flex;
      justify-content: space-between;
      padding: 0 10px 32px 10px;
      .userInput {
        display: inline-block;
        width: 56.3vw;
        max-width: 211px;
        height: 64px;
      }
      .my {
        width: 35.5vw;
        max-width: 133px;
        margin-left: 11px;
      }
    }
  }
  .down {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.4)
    );
    .videobg {
      background-image: url(../../assets/img/videobg.jpg);
      background-size: 100% 100%;
      padding: 28px 13px;
      .title {
        height: 25px;
        font-size: 28px;
        font-family: Baiwuchangtidecard;
        color: #ffffff;
        line-height: 42px;
        -webkit-text-stroke: 1px #0b37ab;
        text-stroke: 1px #0b37ab;
        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);
    }
  }
}
</style>