提交

src/utils/tool.js

@@ -107,6 +107,23 @@ export async function canvasToImage(layers) {
       ctx.drawImage(img, v.x, v.y, v.width, v.height);
     } else if (v.type === 'new_image') {
       ctx.drawImage(v.image, v.x, v.y, v.width, v.height);
+    } else if (v.type === 'redius_image') {
+      const img_lever_0 = await createDate(v.src0);
+      const img_lever_1 = v.src1;
+      ctx.drawImage(img_lever_1, 0, 0, layers.width, layers.height);
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(
+        v.arc_x,
+        v.arc_y,
+        v.width / 2,
+        0,
+        Math.PI * 2,
+        false
+      );
+      ctx.clip();
+      ctx.drawImage(img_lever_0, v.x, v.y, v.width, v.height);
+      ctx.restore();
     } else if (v.type === 'text') {
       ctx.font = v.font;
       ctx.fillStyle = v.color;
@@ -120,12 +137,12 @@ export async function canvasToImage(layers) {
   };
 }
 
-function createDate(src) {
+export function createDate(src) {
   return new Promise((resolve, reject) => {
     try {
       const img = new Image();
       img.src = src;
-      img.setAttribute('crossOrigin', 'anonymous')
+      img.setAttribute('crossOrigin', 'anonymous');
       img.onload = () => {
         resolve(img);
       };

src/view/finance/index.vue

@@ -62,25 +62,83 @@
     </div>
     <Shanshipin v-if="!config.isShanShiPin" :color="background" />
     <!-- 投票框 -->
-    <van-dialog v-model:show="showPaihang" confirm-button-text="关闭">
+    <van-dialog
+      :width="screenWidth"
+      v-model:show="showPaihang"
+      confirm-button-text="关闭"
+    >
       <div style="height: 50vh">
         <van-tabs :color="theme">
-          <van-tab :title="key" v-for="(v, key) in rankList" :key="key">
+          <van-tab :title="_sort[key]" v-for="(v, key) in rankList" :key="key">
             <div class="SilkList">
               <van-cell-group inset>
-                <van-cell title="名称" value="投票量"></van-cell>
-                <van-row v-for="item in v" :key="item.id + 'team'">
-                  <van-col span="16"
-                    ><p class="text van-ellipsis--l2" v-text="item.name"></p
-                  ></van-col>
-                  <van-col span="8"
-                    ><p
-                      class="text"
-                      style="text-align: right"
-                      v-text="formmate(item.votes)"
-                    ></p
-                  ></van-col>
+                <van-row>
+                  <van-col span="7">
+                    <!-- 第二名 -->
+                    <br />
+                    <br />
+                    <img :src="v[1].cover" style="width: 100%" />
+                    <div class="van-ellipsis" style="text-align: center">
+                      {{ v[1].name }}
+                    </div>
+                    <div class="van-elipsis" style="text-align: center">
+                      {{ formmate(v[1].votes) }}票
+                    </div>
+                  </van-col>
+                  <van-col span="10">
+                    <!-- 第一名 -->
+                    <img :src="v[0].cover" style="width: 100%" />
+                    <div class="van-ellipsis" style="text-align: center">
+                      {{ v[0].name }}
+                    </div>
+                    <div class="van-elipsis" style="text-align: center">
+                      {{ formmate(v[0].votes) }}票
+                    </div>
+                  </van-col>
+                  <van-col span="7">
+                    <!-- 第三名 -->
+                    <br />
+                    <br />
+                    <img :src="v[2].cover" style="width: 100%" />
+                    <div class="van-ellipsis" style="text-align: center">
+                      {{ v[2].name }}
+                    </div>
+                    <div class="van-elipsis" style="text-align: center">
+                      {{ formmate(v[2].votes) }}票
+                    </div>
+                  </van-col>
+                </van-row>
+                <van-row>
+                  <van-col span="4" class="text" style="padding: 10px 0 0 0">
+                    排名
+                  </van-col>
+                  <van-col span="14" class="text" style="padding: 10px 0 0 0">
+                    名称
+                  </van-col>
+                  <van-col
+                    span="6"
+                    class="text"
+                    style="padding: 10px 0 0 0; text-align: right"
+                  >
+                    投票量
+                  </van-col>
                 </van-row>
+                <van-divider />
+                <template v-for="(item, i) in v" :key="item.id + 'team'">
+                  <van-row v-if="i > 2">
+                    <van-col span="4" class="text"> {{ i + 1 }} </van-col>
+                    <van-col span="14"
+                      ><p class="text van-ellipsis--l2" v-text="item.name"></p
+                    ></van-col>
+                    <van-col span="6"
+                      ><p
+                        class="text"
+                        style="text-align: right"
+                        v-text="formmate(item.votes)"
+                      ></p
+                    ></van-col>
+                  </van-row>
+                </template>
               </van-cell-group>
             </div>
           </van-tab>
@@ -129,6 +187,7 @@
       confirm-button-text="投票"
       cancel-button-text="为他拉票"
       :show-cancel-button="true"
+      close-on-click-overlay
       @close="close"
       @cancel="cancel"
       @confirm="shear_page"
@@ -202,7 +261,7 @@ import {
   getSendVerifyCode,
   verifyCode,
 } from '@/api/SilkRoadSpringGala.js';
-import { canvasToImage } from '@/utils/tool.js';
+import { canvasToImage, createDate } from '@/utils/tool.js';
 
 import Shanshipin from '@/components/shanshipin.vue';
 const theme = '#38379f';
@@ -211,6 +270,7 @@ const w = window.$originData.orginParames.availWidth || 0;
 const operateId = window.$originData.orginParames.operateId;
 const width = (w - 16) / 2;
 const height = width * 0.57;
+const screenWidth = window.screen.width * 0.9;
 const hxrDialog = ref(false);
 const showPaihang = ref(false);
 const showLogin = ref(false);
@@ -238,6 +298,12 @@ const login = reactive({
   phone,
   code: '',
 });
+
+let image = null;
+let clod1 = null;
+let clod2 = null;
+let clod3 = null;
+
 const getList = call => {
   getEnrollList({
     operateId,
@@ -279,7 +345,11 @@ const getList = call => {
     call && call();
   });
 };
-onMounted(() => {
+onMounted(async () => {
+  image = await createDate('https://cxzx.smcic.net/topic/tool/img/0.jpg');
+  clod1 = await createDate('https://cxzx.smcic.net/topic/tool/img/glod_1.png');
+  clod2 = await createDate('https://cxzx.smcic.net/topic/tool/img/glod_2.png');
+  clod3 = await createDate('https://cxzx.smcic.net/topic/tool/img/glod_3.png');
   getList();
 });
 
@@ -294,16 +364,40 @@ const getIndex = key => {
   return sort_list[key] || 0;
 };
 
-const getRankList = Call => {
+const getRankList = async Call => {
   getEnrollRank({
     operateId,
-  }).then(r => {
+  }).then(async r => {
     const l = r || [];
-    const obj = {};
+    const obj = [];
+    const w = 300 * window.devicePixelRatio;
     for (let i = 0; i < l.length; i++) {
       const v = l[i];
-      if (obj[v.type]) obj[v.type].push(v);
-      else obj[v.type] = [v];
+      const num = getIndex(v.type);
+      const num_index = (obj[num] || []).length;
+      if (num_index < 3) {
+        const layers = {
+          list: [
+            {
+              type: 'redius_image',
+              src0: create_url_image(v.workTitle),
+              src1: num_index == 0 ? clod1 : num_index == 1 ? clod2 : clod3,
+              width: w,
+              height: w,
+              x: 20 * window.devicePixelRatio,
+              y: 155 * window.devicePixelRatio,
+              arc_x: 20 * window.devicePixelRatio + w / 2,
+              arc_y: 155 * window.devicePixelRatio + w / 2,
+            },
+          ],
+          width: 474 * window.devicePixelRatio,
+          height: 474 * window.devicePixelRatio,
+        };
+        let cover = await canvasToImage(layers);
+        if (cover) v.cover = cover.image;
+      }
+      if (obj[num]) obj[num].push(v);
+      else obj[num] = [v];
     }
     rankList.value = obj;
     Call && Call();
@@ -356,7 +450,7 @@ const cancel = async () => {
     list: [
       {
         type: 'image',
-        src: 'https://cxzx.smcic.net/topic/tool/img/0.jpg',
+        image,
         width: w,
         height: w,
         x: 0,
@@ -522,7 +616,7 @@ const showGuize = () => {
 };
 
 const paiming = () => {
-  if (!config.isShanShiPin) return showToast('下载闪视频查看投票结果。');
+  //   if (!config.isShanShiPin) return showToast('下载闪视频查看投票结果。');
   getRankList(() => {
     showPaihang.value = true;
   });
@@ -566,7 +660,7 @@ const close = () => {};
     z-index: 1;
   }
   .text {
-    padding: 10px 16px;
+    padding: 0 6px 10px 6px;
   }
   .guize {
     background-color: $color;