activity/src/view/CalligraphyAndPaintingCompetition/index.vue

<template>
  <div class="CalligraphyAndPaintingCompetition">
    <div class="total">
      已有
      <span class="num">
        <countTo :startVal="0" :endVal="total" :duration="3000"></countTo>
      </span>
      人报名
    </div>
    <div class="bottom">
      <div class="bottom_item">
        <div class="btn" @click="toDetail = true">活动详情</div>
      </div>
      <div class="bottom_item" style="flex: 3">
        <div class="btn" @click="tougao">我要投稿</div>
      </div>
      <div class="bottom_item">
        <div class="btn" @click="openxuanshou">优秀选手</div>
      </div>
    </div>

    <van-overlay
      :custom-style="{ 'background-color': 'rgba(0, 0, 0, .4)' }"
      :show="toShanshipin"
    >
      <div class="dialogBody">
        <van-image width="100" height="100" :src="logoImage" round />
        <div class="title">请打开闪视频投稿或查看我的作品</div>
        <br />
        <van-button
          round
          type="default"
          color="linear-gradient(90deg, #0038ad, #004fd9)"
          block
          @click="toShanshipinFunc"
        >
          打开闪视频
        </van-button>
        <div class="closeBtn" @click="toShanshipin = false">
          <img
            style="width: 20px; height: 20px"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAWhJREFUOBG1lL1OwzAUheuEIUJMDAwwMLEhRQkTG7xKaYFXgkIfhyk/ikQmBl6ADcYo4Zxgu0lrOxYCD7Xje87Xe28cz2YYWZbtl2V5xvVvRlVV53VdH9IrCBNCvHddd4T5MU3Te8ydDxgeURTFA+YlPF9RFJ0GYRieEEYA5lsIniicAlIjtUvpPWia5jhIkuSNmSkAhPMp6AA2Vz4wVnEcvwbckGWuVdAFtcDWYNzRr0tzCBeqpz4aDSTdZWBctmJYJjPTf0jNCMgNG1TGnDBqdoDSqN6gBnBfDbRgJzMdU4vt2ZQpNS4Y4/1b5uKvxv+XbCqVZbICxHRPbaXvDUu1wXg0qMOx0VDC5bP52LhgyKa/LHw0fQ99hKqSKW1fcp7nKxgm+0Mos8VYmMpH+IYH+LJt2xeKOWzN/olufk2Z4iq8DgD4UD2C/Hn729wgxit6pFbfUkjss1fx+memY4v/E/xXaNsFHd9CLmBlRyZwLQAAAABJRU5ErkJggg=="
          />
        </div>
      </div>
    </van-overlay>

    <!-- confirm-button-color="linear-gradient(90deg, #0038ad, #004fd9)" -->
    <van-dialog
      theme="round-button"
      confirm-button-text="关 闭"
      v-model:show="toDetail"
      title="详情"
      confirm-button-color="#cc0003"
    >
      <div class="DetailMain">
        <p class="DetailLine">活动说明</p>
        <p class="DetailLine">1.活动名称：2023“我心中的黄帝陵”青少年书画活动</p>
        <p class="DetailLine">
          2.主办单位：陕西省委网信办、共青团陕西省委、陕西省祭陵办
        </p>
        <p class="DetailLine">
          3.参与对象：全省各单位青年、高校学生、中小学学生
        </p>
        <p class="DetailLine">
          4.征集主题：以书法、绘画作品的形式表现自己对“黄帝”文化的理解、对“黄帝”形象的领悟。
        </p>
        <p class="DetailLine">5.征稿时间：2023年4月</p>
        <p class="DetailLine">
          6.评选方式：评选阶段分为初评和终评。通过初评的作品在“闪视频”、“西部网教育”微信公众号展示。通过初评的选手将参加现场创作活动，由专家评审团现场评审选出优秀作品，评审结果将在“西部网教育”微信公众号发布。
        </p>

        <p class="DetailLine">活动规则</p>
        <p class="DetailLine">
          1.全省各单位青年、高校学生、中小学学生均可投稿；投稿作品需符合主题要求，内容应健康、积极向上，具有艺术感、想象力和创造性，拒绝模版化作品。
        </p>
        <p class="DetailLine">
          2.投稿者应保证其为所投作品的作者，并对该作品的整体及局部均拥有独立、完整、明确、无争议的著作权；作者还应保证其所投送的作品不侵犯第三人的包括著作权、肖像权、名誉权、隐私权等在内的合法权益。
        </p>
        <p class="DetailLine">
          3.主办方有权免费使用本次书画活动的作品，包括出版画册、举办展览和相关宣传推广等。
        </p>
      </div>
    </van-dialog>

    <van-dialog
      theme="round-button"
      confirm-button-text="关 闭"
      v-model:show="toTC"
      title="详情"
      confirm-button-color="#cc0003"
    >
      <div class="DetailMain">
        5月即将开启，敬请关注！届时，我们将组织标准评委团对线上线下提交的作品进行初评，评选出优秀选手，通过初评的优秀选手将参加现场绘画、书法环节，现场所画作品直接参与专家评审团现场评审，最终选出各类优秀作品，并进行表彰。
      </div>
    </van-dialog>

    <img v-if="showWixin" src="../../assets/img/weixin.jpg" class="Down" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
// import { onMounted, reactive } from "vue";
import {
  isIpad,
  isIpod,
  isIphone,
  isAndroid,
  isWechat,
} from '../../utils/isTerminal';
import { getTotalNum, getToupiaoUrl } from '@/api/SilkRoadSpringGala.js';
import countTo from '@/components/counto/vue-countTo.vue';
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
import logoImage from '@/assets/img/logp.png';
const toShanshipin = ref(false);
const toDetail = ref(false);
const total = ref(0);
const showWixin = ref(false);
const toTC = ref(false);

tot();
window.setInterval(() => tot(), 5000);

function tot() {
  getTotalNum().then(r => {
    console.log(r);
    const res = r || { real: 0, unreal: 0 };
    total.value = Number(res.real || 0) + Number(res.unreal || 0);
  });
}

function getDownloadUrl() {
  let url = 'https://ssp.sxtvs.com.cn';
  if (isIpad || isIpod || isIphone)
    url =
      'https://apps.apple.com/cn/app/%E9%97%AA%E8%A7%86%E9%A2%91/id1498056575';
  if (isAndroid) url = 'tideapp://scheme';
  return url;
}

function toShanshipinFunc() {
  if (isIpad || isIpod || isIphone) return (location.href = getDownloadUrl());
  if (isWechat) showWixin.value = true;
  else location.href = getDownloadUrl();
  if (!isWechat && isAndroid)
    window.setTimeout(function () {
      window.location.href =
        'https://ssp.sxtvs.com.cn'; /***打开app的协议，有安卓同事提供***/
    }, 2000);
}

function tougao() {
    console.log(window.$shanshipin)
  if(window.$shanshipin && window.$shanshipin.invitedIp) openShanshipinDetail('https://ssp-api.sxtvs.com.cn/tapi/form/index.html?ChannelID=20441');
    else toShanshipin.value = true;
}

function openxuanshou() {
  getToupiaoUrl().then(r => {
    const res = r || { linkUrl: '' };
    if (res.linkUrl) return openShanshipinDetail(res.linkUrl);
    toTC.value = true;
  });
}

function openShanshipinDetail(url = '') {
  const contentId = '',
    shareTitle = '',
    shareSummary = '',
    shareIcon = '',
    shareUrl = '';
  try {
    if (isIphone || isIpad || isIpod) {
      window.webkit.messageHandlers.TideAppStartNewsDetail.postMessage([
        url,
        contentId,
        shareTitle,
        shareSummary,
        shareIcon,
        shareUrl,
      ]);
    } else {
      window.TideApp.startNewsDetail(
        url,
        contentId,
        shareTitle,
        shareSummary,
        shareIcon,
        shareUrl
      );
    }
  } catch (e) {
    console.log(e);
    window.location.href = url;
  }
}
</script>
<style lang="scss">
.CalligraphyAndPaintingCompetition {
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/img/hdl.jpg');
  background-size: 100% 100%;
  position: relative;

  .bottom {
    position: absolute;
    bottom: 0;
    width: 100vw;
    display: flex;
    padding: 1em 0;

    .bottom_item {
      flex: 2;
      text-align: center;
      padding: 0 0.5em;
    }
  }

  .btn {
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
    background: -webkit-gradient(
      linear,
      left top,
      right top,
      from(#0038ad),
      to(#004fd9)
    );
    background: #cc0003;
    // background: linear-gradient(90deg, #0038ad, #004fd9);
    width: 100%;
    height: 2.5em;
    line-height: 2.5em;
    border-radius: 2.5em;
    text-align: center;
    color: #fff;
    vertical-align: middle;
  }

  .dialogBody {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1em 1em 1em 1em;
    width: 90%;
    margin: 0 auto;
    border-radius: 15px;
    background-color: #ffffff;

    .closeBtn {
      width: 40px;
      height: 40px;
      padding-top: 10px;
      border-radius: 50%;
      left: 50%;
      bottom: -4em;
      transform: translateX(-50%);
      position: absolute;
      background-color: rgba(0, 0, 0, 0.4);
      text-align: center;
    }

    .van-image {
      margin: 0 auto;
      display: block;
    }

    .title {
      transition: opacity 0.5s;
      color: #666;
      border-radius: 0.5rem;
      padding: 0.45rem 0.6rem 0 0.6rem;
      text-align: center;
    }
  }

  .DetailMain {
    padding: 0 26px;
    max-height: 250px;
    overflow: auto;

    .DetailLine {
      padding-bottom: 1em;
      color: #666;
      line-height: 1.5em;
    }
  }

  .Down {
    position: fixed;
    z-index: 100000;
    width: 100vw;
    height: 100vh;
  }

  .total {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .num {
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 3px;
      padding: 0.5em;
    }
  }
}
</style>