activity/src/view/finance2023/index.vue

<template>
  <div
    class="finance2023"
    :style="'font-size:' + font_size + 'px'"
    @touchend.once="init"
  >
    <!-- 播放键 -->
    <svg
      class="imgbtn"
      @click="play"
      :style="{
        'animation-play-state': play_stats ? 'running' : 'paused',
      }"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="899"
      width="32"
      height="32"
    >
      <path
        d="M512 17.066667c273.339733 0 494.933333 221.5936 494.933333 494.933333S785.339733 1006.933333 512 1006.933333 17.066667 785.339733 17.066667 512 238.660267 17.066667 512 17.066667z"
        opacity=".502"
        p-id="900"
      ></path>
      <path
        d="M512 1024C229.2224 1024 0 794.7776 0 512 0 229.2224 229.2224 0 512 0c282.7776 0 512 229.2224 512 512 0 282.7776-229.2224 512-512 512z m0-972.8C257.501867 51.2 51.2 257.501867 51.2 512s206.301867 460.8 460.8 460.8 460.8-206.301867 460.8-460.8S766.498133 51.2 512 51.2z"
        fill="#FFFFFF"
        p-id="901"
      ></path>
      <path
        d="M530.568533 170.666667c4.8128 34.1504 5.495467 77.2096 41.2672 120.2688 27.4944 32.802133 58.453333 62.173867 79.7696 88.832C679.799467 414.6176 699.733333 458.359467 699.733333 502.784c0 71.0656-34.372267 141.431467-57.770666 180.394667h-10.990934c16.503467-36.898133 49.5104-97.723733 46.7456-162.628267-1.365333-36.232533-15.121067-75.178667-38.485333-103.867733-26.146133-33.501867-70.161067-60.142933-108.663467-62.8736v387.447466c0 30.754133-18.568533 58.7776-45.380266 79.274667C459.0592 841.028267 424.669867 853.333333 394.410667 853.333333c-19.2512 0-37.137067-6.144-49.5104-16.401066-13.073067-10.257067-20.6336-25.275733-20.6336-43.042134 0-28.023467 19.2512-56.046933 45.380266-76.544 26.146133-21.179733 59.136-34.850133 86.647467-34.850133 24.081067 0 44.6976 3.413333 57.088 15.035733V170.666667h17.186133z"
        fill="#FFFFFF"
        p-id="902"
      ></path>
    </svg>
    <img src="./img/bg2023.jpg" style="width: 100%" />

    <p class="users">
      已有<span class="user_num" v-text="totalUser"></span>人参与
    </p>
    <div
      class="main"
      :style="{
        height: look_more ? 'auto' : '400px',
      }"
    >
      <img src="./img/mainbg.png" style="width: 100%" />
      <div
        class="inset"
        :style="{
          background: !look_more
            ? 'linear-gradient(#f8eac300, #f8eac3 45%)'
            : '#f8eac300',
        }"
      >
        <div class="bottom_set">
          <p class="line_title" v-if="!look_more" @click="look_more = true">
            <span style="vertical-align: middle">阅读全文</span>
            <svg
              viewBox="0 0 1024 1024"
              version="1.1"
              style="display: inline-block; vertical-align: middle"
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
            >
              <path
                fill="#986c3d"
                d="M486.4 537.6C492.8 544 505.6 544 512 544s19.2 0 25.6-6.4l224-224c12.8-12.8 12.8-32 0-44.8s-32-12.8-44.8 0L512 467.2 313.6 262.4C300.8 256 275.2 256 262.4 262.4S256 300.8 262.4 313.6L486.4 537.6z"
              ></path>
              <path
                fill="#986c3d"
                d="M710.4 486.4 512 691.2 313.6 486.4c-12.8-12.8-32-12.8-44.8 0S256 524.8 262.4 537.6l224 224C492.8 768 505.6 768 512 768s19.2 0 25.6-6.4l224-224c12.8-12.8 12.8-32 0-44.8S723.2 480 710.4 486.4z"
              ></path>
            </svg>
          </p>
          <p v-if="look_more" @click="look_more = false" class="line_title">
            <span style="vertical-align: middle">收起</span>
            <svg
              viewBox="0 0 1024 1024"
              version="1.1"
              style="
                display: inline-block;
                vertical-align: middle;
                transform: rotate(180deg);
              "
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
            >
              <path
                fill="#986c3d"
                d="M486.4 537.6C492.8 544 505.6 544 512 544s19.2 0 25.6-6.4l224-224c12.8-12.8 12.8-32 0-44.8s-32-12.8-44.8 0L512 467.2 313.6 262.4C300.8 256 275.2 256 262.4 262.4S256 300.8 262.4 313.6L486.4 537.6z"
              ></path>
              <path
                fill="#986c3d"
                d="M710.4 486.4 512 691.2 313.6 486.4c-12.8-12.8-32-12.8-44.8 0S256 524.8 262.4 537.6l224 224C492.8 768 505.6 768 512 768s19.2 0 25.6-6.4l224-224c12.8-12.8 12.8-32 0-44.8S723.2 480 710.4 486.4z"
              ></path>
            </svg>
          </p>
          <div @click="createhb" class="btn">
            <div class="inset_btn">
              {{ img_local ? '查看海报' : '输入姓名' }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <van-dialog
      v-model:show="show"
      title=" "
      show-cancel-button
      :beforeClose="onSubmit"
    >
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="昵称"
            label="昵称"
            placeholder="请输入昵称"
            :rules="[{ required: true, message: '请填写昵称' }]"
          />
        </van-cell-group>
      </van-form>
    </van-dialog>
  </div>
</template>
<script setup>
import { getTotal, saveUser } from '@/api/2023.js';
import { ref } from 'vue';
import { showImagePreview, showToast } from 'vant';
// import { onMounted, reactive } from "vue";
// import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
/**
 * window.$originData.orginParames.title 页面标题
 * window.$originData.orginParames.parameters 固定参数值
 * window.$originData.urlParames url参数
 */
let s = window.$originData.orginParames.availWidth / 25;
s > 40 ? (s = 40) : '';
const totalUser = ref(0);
const font_size = ref();
const play_stats = ref(false);
const canvas = document.createElement('canvas');
const show = ref(false);
const username = ref('');
let img_local = ref(localStorage.getItem('hb20230712'));
let d2 = undefined;
let isInitAudio = true;
canvas.width = 750;
canvas.height = 1334;

const audio = new Audio('https://cxzx.smcic.net/topic/tool/media/bgm.mp3');
audio.loop = true; // 循环播放
audio.autoplay = 'autoplay';
audio.oncanplay = () => {
  let t = setTimeout(() => {
    window.WeixinJSBridge &&
      window.WeixinJSBridge.invoke(
        'getNetworkType',
        {},
        () => {
          audio.play();
        },
        false
      );
    clearTimeout(t);
  }, 500);
};
audio.onplaying = () => (play_stats.value = !audio.paused);
audio.onpause = () => (play_stats.value = !audio.paused);
const play = () => {
  if (audio.paused) {
    // 播放
    audio.play();
  } else {
    // 暂停
    audio.pause();
  }
};

const init = () => {
  if (!isInitAudio || !audio.paused) return;
  isInitAudio = false;
  play();
};

const look_more = ref(false);

const createhb = () => {
  if (img_local.value) showImagePreview([img_local.value]);
  else show.value = true;
};

const canvas_init = (uname, num) => {
  return new Promise(resolve => {
    const img = new Image();
    img.crossOrigin = '';
    // 增加随机数选择图片
    img.src = 'https://cxzx.smcic.net/topic/tool/img/hb.jpg';
    if (!d2) d2 = canvas.getContext('2d');
    img.onload = () => {
      d2.drawImage(img, 0, 0, 750, 1334);
      let line1 = [100, 250];
      let fontsize = '30px';
      d2.font = fontsize + ' 微软雅黑';
      d2.fillStyle = '#ffffff';
      d2.fillText('您是第', line1[0], line1[1]);
      d2.font = '50px 微软雅黑';
      d2.fillStyle = '#ffffff';
      d2.fillText(uname, line1[0], 190);
      d2.font = '50px 微软雅黑';
      d2.fillStyle = '#ffffff';
      d2.fillText(num, 200, line1[1]);
      d2.font = fontsize + ' 微软雅黑';
      d2.fillStyle = '#ffffff';
      d2.fillText(
        '个参与本次活动的人',
        line1[0] + 114 + num.toString().length * 30,
        line1[1]
      );
      resolve();
    };
  });
};

const onSubmit = e => {
  if (e === 'cancel') return true;
  if (username.value.length > 10) return showToast('昵称字数不得超过5个');
  if (!username.value) {
    showToast('请输入昵称');
    return false;
  }
  saveUser({
    userName: username.value,
  }).then(r => {
    show.value = false;
    canvas_init(r.userName, r.userOrder + r.userOrderUnreal).then(() => {
      const imgs = canvas.toDataURL('image/png');
      showImagePreview([imgs]);
      img_local.value = imgs;
      localStorage.setItem('hb20230712', imgs);
    });
  });
};

const getTotalFunc = () => {
  getTotal().then(r => {
    totalUser.value = r.order;
  });
};
getTotalFunc();
setInterval(() => {
  getTotalFunc();
}, 5000);
</script>
<style>
/* 按钮动画 */
@-webkit-keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

@-moz-keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

@-o-keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

.finance2023 {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  font-weight: 400;
  padding-bottom: 1em;
  background-color: #e8bd88;
}

.finance2023 .imgbtn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  transform-origin: center;
  -webkit-animation: rotating 1.2s linear infinite;
  -moz-animation: rotating 1.2s linear infinite;
  -o-animation: rotating 1.2s linear infinite;
  animation: rotating 1.2s linear infinite;
}

.finance2023 .main {
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  color: #626262;
  border-radius: 10px;
  padding: 1em 1em 55px 1em;
  /* background-color: #f8eac3; */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.finance2023 .main .inset {
  position: absolute;
  bottom: 0;
  width: 92%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  height: 150px;
  background: -webkit-linear-gradient(#ffffff00, #ffffff 45%);
  background: -o-linear-gradient(#ffffff00, #ffffff 45%);
  background: -moz-linear-gradient(#ffffff00, #ffffff 45%);
  background: linear-gradient(#ffffff00, #ffffff 45%);
}

.finance2023 .main .inset .bottom_set {
  width: 100%;
  height: 75px;
  background-color: #ebc77d;
  box-shadow: inset 0 5px 5px #ebc77d;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
}
.finance2023 .main .inset .bottom_set .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7rem;
  height: 2rem;
  color: #666;
  text-align: center;
  line-height: calc(2rem - 8px);
  background-color: #eeac65;
  border-radius: 5px;
  padding: 3px;
  box-shadow: 0 0 5px;
}
.finance2023 .main .inset .bottom_set .btn .inset_btn {
  border-radius: 5px;
  border: 1px dashed #fff;
}
.finance2023 .main .line_title {
  margin-top: -2em;
  text-align: center;
  color: #986c3d;
}
.finance2023 .users {
  text-align: center;
  color: #986c3d;
  margin-top: -2em;
}
.finance2023 .users .user_num {
  color: #fb0301;
  font-size: 1.5em;
}
</style>