activity/src/view/SilkRoadShanShiPinList/index.vue

<template>
  <div class="SilkRoadShanShiPinList">
    <img src="../../assets/img/siluchunwanlist.jpg" style="width: 100%" />
    <div class="guize" @click="showGuize">投票规则</div>
    <div class="guize" style="top: 5em" @click="paiming">查看排名</div>
    <van-cell-group title="团队组" style="padding: 8px">
      <van-row gutter="8">
        <van-col
          span="12"
          v-for="item in list"
          :key="item.id"
          @click="() => clickShowVideo(item)"
        >
          <van-image
            :width="width"
            :height="height"
            fit="cover"
            position="left"
            :src="
              item.file + '?x-oss-process=video/snapshot,t_100,f_jpg,m_fast'
            "
          />
          <van-row>
            <van-col :span="config.times ? 18 : 24">{{ item.name }}</van-col>
            <van-col span="6" v-if="config.times">
              <van-button
                type="primary"
                size="mini"
                @click="() => toupiao(item)"
                >投票</van-button
              >
            </van-col>
          </van-row>
          <br />
        </van-col>
      </van-row>
    </van-cell-group>
    <van-cell-group title="个人组" style="padding: 8px">
      <van-row gutter="8">
        <van-col
          span="12"
          v-for="item in listSelf"
          :key="item.id"
          @click="() => clickShowVideo(item)"
        >
          <van-image
            :width="width"
            :height="height"
            fit="cover"
            position="left"
            :src="
              item.file + '?x-oss-process=video/snapshot,t_100,f_jpg,m_fast'
            "
          />
          <van-row>
            <van-col :span="config.times ? 18 : 24">{{ item.name }}</van-col>
            <van-col span="6" v-if="config.times">
              <van-button
                type="primary"
                size="mini"
                @click="() => toupiao(item)"
                >投票</van-button
              >
            </van-col>
          </van-row>
          <br />
        </van-col>
      </van-row>
    </van-cell-group>
    <Shanshipin />
    <van-dialog v-model:show="showPaihang" confirm-button-text="关闭">
      <div style="height: 50vh">
        <van-tabs>
          <van-tab title="个人">
            <div class="SilkList">
              <van-cell-group inset>
                <van-cell title="名称" value="投票量"></van-cell>
                <van-cell
                  v-for="item in listSelf"
                  :key="item + 'self'"
                  :title="item.name"
                  :value="formmate(item.votes)"
                />
              </van-cell-group>
            </div>
          </van-tab>
          <van-tab title="团队">
            <div class="SilkList">
              <van-cell-group inset>
                <van-cell title="名称" value="投票量"></van-cell>
                <van-cell
                  v-for="item in list"
                  :key="item.id + 'team'"
                  :title="item.name"
                  :value="formmate(item.votes)"
                />
              </van-cell-group>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </van-dialog>
    <van-overlay z-index="20" :show="showVideo" @click="showVideo = false">
      <van-icon @click="() => clickShowVideo()" size="25" name="close" class="close" />
      <div class="video" v-if="showVideo" @click.stop>
        <div class="videoText" v-text="video.introduction"></div>
      </div>
    </van-overlay>
    <video
      muted
      v-show="showVideo"
      loop
      x5-video-player-type="h5"
      preload="metadata"
      autoplay
      playsinline="true"
      webkit-playsinline="true"
      x-webkit-airplay="true"
      x5-video-orientation="portraint"
      x5-video-player-fullscreen="true"
      :src="video.file || ''"
      class="videoEle"
    ></video>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { showDialog, showConfirmDialog, showToast } from "vant";
// import { onMounted, reactive } from "vue";
// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
import { getEnrollList, getVote, getTimes } from "@/api/SilkRoadSpringGala.js";

import Shanshipin from "@/components/shanshipin.vue";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
const getList = call => {
  Promise.all([
    getEnrollList({
      type: "团队",
      operateId: 2,
    }),
    getEnrollList({
      type: "个人",
      operateId: 2,
    }),
  ]).then(resList => {
    list.value = resList[0] || [];
    listSelf.value = resList[1] || [];
    call && call();
  });
};
const w = window.$originData.orginParames.availWidth || 0;
const width = ref((w - 16) / 2);
const height = ref(width.value * 0.57);
const showPaihang = ref(false);
const list = ref([]);
const listSelf = ref([]);
const showVideo = ref(false);
const video = ref({});
const config = reactive({
  times: -1,
  isShanShiPin: window.$shanshipin.UserId,
});
const t = config.isShanShiPin ? 5 : 1;
const login = reactive({
  name: localStorage.getItem("SilkRoadShanShiPinName") || "",
  phone:
    window.$shanshipin.Phone ||
    localStorage.getItem("SilkRoadShanShiPinPhone") ||
    "",
});
getList();

if (!login.phone) {
  showDialog({
    title: "登录",
    message: () => {
      return (
        <van-cell-group inset>
          <van-field
            v-model={login.name}
            required
            label="姓名"
            placeholder="请输入姓名"
          />
          <van-field
            v-model={login.phone}
            required
            type="tel"
            label="手机号"
            placeholder="请输入手机号"
          />
        </van-cell-group>
      );
    },
    theme: "round-button",
    beforeClose: () => {
      console.log(login);
      if (!login.phone || !login.name) return false;
      localStorage.setItem("SilkRoadShanShiPinPhone", login.phone);
      localStorage.setItem("SilkRoadShanShiPinName", login.name);
      return true;
    },
  });
} else {
  getTimes({
    phone: login.phone,
  }).then(r => (config.times = r.times - t >= 0));
}

const toupiao = function (item) {
  showConfirmDialog({
    message: "确定投票给" + item.name + "么？",
    beforeClose: type => {
      console.log(type);
      if (type !== "confirm") return true;
      return new Promise(resolve => {
        getVote({
          target: item.phone,
          source: login.phone,
          client: config.isShanShiPin ? "闪视频" : "其他",
          operateId: 2,
        })
          .then(r => {
            console.log("----------->", r);
            showToast("投票成功！");
            resolve(true);
          })
          .catch(() => {
            console.log("----------->");
            resolve(true);
          });
      });
    },
  });
};

const showGuize = () => {
  showDialog({
    title: "活动规则",
    messageAlign: "left",
    confirmButtonText: "关闭",
    message: () => (
      <div class="art">
        <p>
          1、 活动主题：“ 大美中国· 多彩丝路”《 2023 丝路嘉年华· 丝路春晚》
          之我要上丝路春晚。
        </p>
        <p>
          2、 活动时间： 即日起至12月20日海选报名 + 节目征集， 12 月21日 - 22
          日线上海选， 12 月23日 - 26 日网络投票。
        </p>
        <p>
          3、 征集范围： 各群体组织及社会民间文艺团体、 凡有才艺者，
          且创作内容符合节目要求的团体和个人。
        </p>
        <p>
          4、 内容形式： 节目内容以“ 大美中国· 多彩丝路” 为主题， 健康、
          积极向上， 具备中国文化特色的创意表演， 节目形式包括但不限于情景歌舞、
          演唱等， 以及其他适合舞台表演和电视呈现的艺术形式。
        </p>
        <p>
          5、 上传规则： 参与报名的团体、
          个人将录制好的高清视频作品上传至闪视频APP， 个人节目不超过3分钟，
          团体节目不超过5分钟。
        </p>
      </div>
    ),
  });
};

const paiming = () => {
  if (!config.isShanShiPin) return showToast("下载闪视频查看投票结果。");
  getList(() => {
    showPaihang.value = true;
  });
};

const formmate = num => {
  if (num === 0) return num;
  let N = num || 0;
  switch (true) {
    case N >= 10000:
      N = (N / 10000).toFixed(2) - 0 + "万";
      break;
    case N >= 100000000:
      N = (N / 100000000).toFixed(2) - 0 + "亿";
      break;
  }
  return N;
};

let videoEleHTML = undefined;

const clickShowVideo = item => {
  showVideo.value = !showVideo.value;
  if (!item) return;
  video.value = item || {};
  if (!videoEleHTML) videoEleHTML = document.querySelector("video");
  videoEleHTML.currentTime = 0;
  videoEleHTML.play();
};
</script>
<style lang="scss">
.SilkRoadShanShiPinList {
  width: 100vw;
  padding-bottom: 80px;
  .guize {
    background-color: #ff2c2c;
    position: fixed;
    right: 0;
    top: 2em;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    padding: 3px 5px 3px 15px;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    z-index: 2;
  }
  .SilkList {
    height: calc(50vh - 60px);
    overflow-y: auto;
  }

  .videoEle {
    width: 100vw;
    position: absolute;
    background-color: #000;
    top: 50%;
    z-index: 21;
    transform: translateY(-50%);
  }
  .van-overlay {
    .video {
      width: 100vw;
      height: 100vh;
      top: 0;
      position: fixed;
      .videoText {
        color: #fff;
        position: absolute;
        bottom: 0;
        padding: 0.5em;
        text-indent: 2em;
      }
    }

    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 11;
      color: #fff;
      font-size: 20px;
    }
  }
}
</style>