提交

src/config/page.json

@@ -56,6 +56,9 @@
     "finance2023": {
         "title": "2024年争做陕西金融好网民倡议书，等您来签署！"
     },
+    "finance2024": {
+        "title": "2024年争做陕西金融好网民倡议书，等您来签署！"
+    },
     "AEROSPACE2023": {
         "title": "西安空天产业高质量发展暨区域资源招商推介会邀请函",
         "operateId": 4

src/view/finance2024/index.js

@@ -0,0 +1,56 @@
+import App from './index.vue';
+import '@/assets/js/common';
+import { createApp } from 'vue';
+import { getUser } from "@/utils/tool.js";
+import { getPageParameters, environment } from '../../config/pageConfig';
+// 判断环境
+environment();
+window.$originData = getPageParameters();
+document.title = window.$originData.orginParames.title || '';
+// 分享
+window.weixin_Share_Init(
+  window.$originData.orginParames.title,
+  '',
+  'https://cxzx.smcic.net/topic/tool/img/jrhwm2024.jpg',
+  'https://cxzx.smcic.net/topic/activity/finance2023.html?' + Date.now()
+);
+
+
+var SL = new window.SmcicLogger("shanshipin", "c6124d95");
+SL.Util.SetUrl("https://collect.smcic.net:8443/");
+SL.Systematic.Init({
+  appid: "c6124d95",
+  channel: "shanshipin",
+  model: "",
+  os: "",
+  os_version: "",
+  carrier: "",
+  network_type: "",
+  ip: "",
+  app_name: "",
+  app_version: "",
+  build_version: "",
+  platform_type: "",
+});
+SL.Content.CommodityDetail({
+  commodity_detail_source: "活动",
+  commodity_id: "",
+  commodity_name: document.title,
+  publisher_name: "",
+  publisher_id: "",
+  review_count: 0,
+  comment_count: 0,
+  collect_count: 0,
+  share_count: 0,
+  like_count: 0,
+  tag: [],
+});
+
+!window.$shanshipin || !window.$shanshipin.Phone
+  ? getUser(() => createApp(App).mount("#app"))
+  : createApp(App).mount("#app");
+
+window.setUserSession = () => {
+  console.log("登录");
+  getUser(() => createApp(App).mount("#app"));
+};

src/view/finance2024/index.vue

@@ -0,0 +1,391 @@
+<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>
+      <img src="./img/mainbg.png" style="width: 100%" />
+      <div
+        class="inset"
+        :style="{
+          background: !look_more
+            ? 'linear-gradient(#489aff00, #489aff 45%)'
+            : '#489aff00',
+        }"
+      >
+        <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="#ffffff"
+                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="#ffffff"
+                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" style="margin-top: -4em;" @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="#489aff"
+                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="#489aff"
+                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">
+                立即签署
+            </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 = [140, 300];
+      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 = 'blod 50px 微软雅黑';
+      d2.fillStyle = '#fb0301';
+      d2.fillText(num, 230, line1[1] + 5);
+      d2.font = fontsize + ' 微软雅黑';
+      d2.fillStyle = '#ffffff';
+      d2.fillText(
+        '个参与本次活动的人',
+        line1[0] + 94 + 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: #489aff;
+}
+
+.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: 0 0 70px 0;
+  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;
+  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: #fff;
+  text-align: center;
+  line-height: calc(2rem - 8px);
+  background-color: #489aff;
+  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: #ffffff;
+}
+.finance2023 .users {
+  text-align: right;
+  color: #103a6e;
+  position: absolute;
+  width: 90%;
+  top: 5.5vh;
+
+}
+.finance2023 .users .user_num {
+  color: #fb0301;
+  font-size: 1.5em;
+}
+</style>