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%" />
    <div
      class="main"
      :style="{
        height: look_more ? 'auto' : '400px',
      }"
    >
      <p class="users">
        已有<span class="user_num" v-text="totalUser"></span>人参与
      </p>
      <h3 class="header_title">2023年争做陕西金融好网民倡议书</h3>
      <div class="body">
        <p class="duan">
          为营造健康和谐的金融舆论环境，弘扬主旋律，传递正能量，现向广大金融网民朋友发出如下倡议：
        </p>
        <p class="duan">
          <b>一、坚守法律底线，争当遵纪守法的金融维护者。</b>
          网络空间不是法外之地，要严格遵守《中华人民共和国中国人民银行法》《中华人民共和国消费者权益保护法》《全国人民代表大会常务委员会关于维护互联网安全的决定》等法律规定，不发布不实金融消息，不传播金融谣言、非法金融广告等违法信息。营造健康向上的金融网络环境，争当遵纪守法的网络金融维护者。
        </p>
        <p class="duan">
          <b>二、加强金融素养，当好素质优良的金融学习者。</b>
          要掌握金融知识，防范各种网络非法集资活动套路，了解金融活动，提高对违法违规金融活动的鉴别和防范能力。不断提升自身金融素养和自我保护意识，成为有风险防范意识、技能提升意识、网络安全意识、责任担当意识的新时代金融好网民。
        </p>
        <p class="duan">
          <b>三、履行社会责任，做好弘扬正能量的金融传播者。</b>
          不信谣、不传谣，不发布、不转发未经证实的可能会给社会和他人造成伤害的金融信息。不发表和传播惑众及危害社会的不良金融信息。主动抵制和举报各种网上非法金融广告、非法集资、电信诈骗、银行卡盗刷以及校园贷、现金贷等现象，坚决同网络违法犯罪活动作斗争，积极维护国家、社会、集体和个人合法权益。互联网金融从业人员要加强行业自律，坚持正确导向，积极传播、弘扬优秀文化和文明，要发挥带动引领作用，做网络文明的传播者和网络正能量的弘扬者。
        </p>
        <p class="duan">
          <b>四、树立正确观念，争做自觉理性的金融消费者。</b>
          要树立理性消费观念，不攀比、不盲从。要根据自身收入水平和消费能力做好收支筹划，量入为出、理性消费，不购买超出自身经济承受能力之物，远离奢靡之风。要建立正确的消费观念，正确规划生活的资金需求，合理合规使用信用卡、小额贷款等消费信贷服务，自觉抵制各类网络信贷。
        </p>
        <p class="duan">
          广大金融网民朋友们，让我们从现在做起，从自己做起，积极传播正能量，争做金融好网民！
        </p>
      </div>
      <div
        class="inset"
        :style="{
          background: !look_more
            ? 'linear-gradient(#ffffff00, #ffffff 45%)'
            : '#ffffff00',
        }"
      >
        <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="#60bf9f"
                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="#60bf9f"
                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="#60bf9f"
                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="#60bf9f"
                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>
        </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 { saveUser, getTotal } 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(localStorage.getItem('username20230712') || '');
let img_local = 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) showImagePreview([img_local]);
  else show.value = true;
};

const canvas_init = uname => {
  return new Promise(resolve => {
    const img = new Image();
    img.crossOrigin = '';
    // 增加随机数选择图片
    img.src =
      'https://cxzx.smcic.net/topic/tool/img/' +
      Math.ceil(Math.random() * 2) +
      '-1.png';
    if (!d2) d2 = canvas.getContext('2d');
    img.onload = () => {
      d2.drawImage(img, 0, 0, 750, 1334);
      d2.font = '38px serif';
      d2.fillStyle = '#ffffff';
      d2.fillText(uname, 300, 500);
      resolve();
    };
  });
};

const onSubmit = e => {
  if (e === 'cancel') return true;
  if (!username.value) {
    showToast('请输入昵称');
    return false;
  }
  saveUser({
    userName: username.value,
  }).then(r => {
    show.value = false;
    canvas_init(r.userName).then(() => {
      const imgs = canvas.toDataURL('image/png');
      showImagePreview([imgs]);
      img_local = imgs;
      localStorage.setItem('username20230712', username.value);
      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: #268f66;
}

.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: 95%;
  overflow: hidden;
  margin: 0 auto;
  color: #626262;
  border-radius: 10px;
  padding: 1em 1em 105px 1em;
  background-color: #f8eac3;
  position: relative;
}
.finance2023 .main .inset {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  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: #2e946d;
  box-shadow: 0 5px 5px #2e946d;
  position: relative;
}
.finance2023 .main .inset .bottom_set .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  width: 4rem;
  height: 4rem;
  text-align: center;
  line-height: 4rem;
  background-color: #f8eac3;
  box-shadow: inset 0 0 5px #7e7764;
  border-radius: 50%;
}
.finance2023 .main .line_title {
  margin-top: -2em;
  text-align: center;
  color: #60bf9f;
}
.finance2023 .main .header_title {
  text-align: center;
  margin-bottom: 0.5em;
}
.finance2023 .main .users {
  text-align: right;
  color: #5db978;
}
.finance2023 .main .users .user_num {
  color: #fb0301;
  font-size: 1.5em;
}
.finance2023 .main .body {
  padding: 0.5em 1em;
  border-radius: 5px;
}
.finance2023 .main .body .duan {
  text-indent: 2em;
  line-height: 1.5em;
}
</style>