update

2025-09-13 19:31:28 +08:00
parent 7d65fd2a3a
commit ab2568cd29
8 changed files with 358 additions and 62 deletions
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
    "qrcode": "^1.5.4",
    "vite-plugin-vue-devtools": "^8.0.1",
    "vue": "^3.5.18",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vue-virtual-scroller": "2.0.0-beta.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
      vue-router:
        specifier: ^4.5.1
        version: 4.5.1(vue@3.5.20)
+      vue-virtual-scroller:
+        specifier: 2.0.0-beta.8
+        version: 2.0.0-beta.8(vue@3.5.20)
    devDependencies:
      '@vitejs/plugin-vue':
        specifier: ^6.0.1
@@ -852,6 +855,9 @@ packages:
  memoize-one@6.0.0:
    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}

+  mitt@2.1.0:
+    resolution: {integrity: sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==}
+
  mitt@3.0.1:
    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}

@@ -1120,11 +1126,26 @@ packages:
      '@vue/composition-api':
        optional: true

+  vue-observe-visibility@2.0.0-alpha.1:
+    resolution: {integrity: sha512-flFbp/gs9pZniXR6fans8smv1kDScJ8RS7rEpMjhVabiKeq7Qz3D9+eGsypncjfIyyU84saU88XZ0zjbD6Gq/g==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  vue-resize@2.0.0-alpha.1:
+    resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
+    peerDependencies:
+      vue: ^3.0.0
+
  vue-router@4.5.1:
    resolution: {integrity: sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==}
    peerDependencies:
      vue: ^3.2.0

+  vue-virtual-scroller@2.0.0-beta.8:
+    resolution: {integrity: sha512-b8/f5NQ5nIEBRTNi6GcPItE4s7kxNHw2AIHLtDp+2QvqdTjVN0FgONwX9cr53jWRgnu+HRLPaWDOR2JPI5MTfQ==}
+    peerDependencies:
+      vue: ^3.2.0
+
  vue@3.5.20:
    resolution: {integrity: sha512-2sBz0x/wis5TkF1XZ2vH25zWq3G1bFEPOfkBcx2ikowmphoQsPH6X0V3mmPCXA2K1N/XGTnifVyDQP4GfDDeQw==}
    peerDependencies:
@@ -1943,6 +1964,8 @@ snapshots:

  memoize-one@6.0.0: {}

+  mitt@2.1.0: {}
+
  mitt@3.0.1: {}

  mrmime@2.0.1: {}
@@ -2180,11 +2203,26 @@ snapshots:
    dependencies:
      vue: 3.5.20

+  vue-observe-visibility@2.0.0-alpha.1(vue@3.5.20):
+    dependencies:
+      vue: 3.5.20
+
+  vue-resize@2.0.0-alpha.1(vue@3.5.20):
+    dependencies:
+      vue: 3.5.20
+
  vue-router@4.5.1(vue@3.5.20):
    dependencies:
      '@vue/devtools-api': 6.6.4
      vue: 3.5.20

+  vue-virtual-scroller@2.0.0-beta.8(vue@3.5.20):
+    dependencies:
+      mitt: 2.1.0
+      vue: 3.5.20
+      vue-observe-visibility: 2.0.0-alpha.1(vue@3.5.20)
+      vue-resize: 2.0.0-alpha.1(vue@3.5.20)
+
  vue@3.5.20:
    dependencies:
      '@vue/compiler-dom': 3.5.20
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -35,3 +35,13 @@
  justify-content: center;
  align-items: center;
 }
+
+.vue-recycle-scroller__item-wrapper {
+  width: 100%;
+  display: flex;
+  flex-flow: wrap;
+}
+.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view {
+  width: 42vw !important;
+  position: relative !important;
+}
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -14,11 +14,8 @@ defineProps({
 const isMusicOn = ref(false);
 const audioElement = ref(null);
 onMounted(() => {
-  // 创建音频
  audioElement.value = new Audio(faceFamily);
-  // 尝试自动播放
  tryAutoPlay();
-  //TODO 判断登录之后获取浏览器参数fromid, mergeid
 })

 // 尝试自动播放
@@ -81,12 +78,12 @@ const navigateSelectTemplatePage = () => {
 const isMyPhotoVisible = ref(false);
 const isPhotoSquareVisible = ref(false);

-
-const activeTab = ref('my-photo')
-
-const showMyPhoto = () => { activeTab.value = 'my-photo', isMyPhotoVisible.value = true; }
+const showMyPhoto = () => { 
+  isMyPhotoVisible.value = true;
+  isPhotoSquareVisible.value = false;
+}
 const showPhotoSquare=()=>{
-  activeTab.value='photo-square',
+  isMyPhotoVisible.value = false;
  isPhotoSquareVisible.value = true;
 }
 </script>
@@ -133,8 +130,8 @@ const showPhotoSquare=()=>{
    </div>
  </div>

-  <MyPhoto v-if="activeTab === 'my-photo'"  @go-photo-square="showPhotoSquare" v-model:show="isMyPhotoVisible" />
-  <PhotoSquare v-else  @go-my-photo="showMyPhoto" v-model:show="isPhotoSquareVisible" />
+  <MyPhoto @go-photo-square="showPhotoSquare" v-model:show="isMyPhotoVisible" />
+  <PhotoSquare @go-my-photo="showMyPhoto" v-model:show="isPhotoSquareVisible" />
 </template>

 <style scoped>
--- a/src/components/ModalTransition.vue
+++ b/src/components/ModalTransition.vue
@@ -27,12 +27,17 @@ const props = defineProps({
    default: 300,
    type: Number
  },
-  show: false
+  show: false,
+  noAnimation: {
+    default: false,
+    type: Boolean
+  }
 })

 const animateName = ref('')
 const directionClass = ref('')

+if (!props.noAnimation) {
  switch (props.name) {
    case 'top':
      animateName.value = 'transTop'
@@ -47,6 +52,7 @@ switch (props.name) {
      animateName.value = 'transBottom'
      break;
  }
+}

 </script>

--- a/src/components/MyPhoto.vue
+++ b/src/components/MyPhoto.vue
@@ -4,25 +4,31 @@ import ModalTransition from "./ModalTransition.vue"
 import { useRouter } from 'vue-router'
 import { globalStore } from "../globalstore.js";
 import { ElMessage } from 'element-plus';
-import { isLogin, Storage, Request } from "../libs/utils"
-import globalToastEvent, { ToastType } from '../globalToastEvent';
+import { Storage, generateQR } from "../libs/utils"
+// import { RecycleScroller } from "vue-virtual-scroller";
+// import "vue-virtual-scroller/dist/vue-virtual-scroller.css";

-defineProps({
+const props = defineProps({
  show: false
 })

-//TODO 帮我看一下对不对
-globalToastEvent.on(ToastType.MOUNTED, () => {
-  fetchImages()
+watch(() => props.show, async (newVal) => {
+  if (!newVal) {
+    return
+  }
+  if (newVal) {
+    fetchImages();
+  }
 })

-const emit = defineEmits(['go-photo-square']);
+const emit = defineEmits(['go-photo-square', 'update:show']);
 const router = useRouter();
 const goBack = () => {
  emit('update:show', false);
 };

 const imageList = ref([])
+const displayZhuli = ref(false);
 const fetchImages = async () => {
  
  try {
@@ -39,14 +45,17 @@ const fetchImages = async () => {
    const data = await response.json()
    console.log('Success:', data)
    images.value = data.data;
+    const foundItem = data.data.find(item => item.is_public === true);
+    if (foundItem) {
+      displayZhuli.value = true;
+    } else {
+      displayZhuli.value = false;
+    }
    imageList.value = data;

-    // Check for any image with is_public = true after fetching
    const hasPublicImage = images.value.some(item => item.is_public);
    if (hasPublicImage) {
      globalStore.chartsBattle = true;
-      
-      // Find the index of the public image and set its border to active
      const publicIndex = images.value.findIndex(item => item.is_public);
      if (publicIndex !== -1) {
        activeBorders.value = activeBorders.value.map((_, index) => index === publicIndex);
@@ -99,6 +108,7 @@ const handleDabangClick = () => {
 };

 const handleZhuliClick = () => {
+  openHaibao();
  console.log('助力被点击');
 };

@@ -131,20 +141,118 @@ const getBackgroundImage = (item) => {
    return item.result_url = failedImg;
  }
 };
+
+
+// 海报
+import Haibao from "@/libs/haibao";
+import mask from "../assets/images/haibao-mask.png";
+import haibaoCoverBorder from "../assets/images/haibao-cover.png";
+import bg from "../assets/images/haibao-bg.png"
+// import userPicture from "../assets/images/home-bg.png"; //TODO: globalStore.result_url 这里得图片后面要换成用户参榜的图片
+
+const haibaoShow = ref(false);
+const haibaoUrl = ref('');
+const userHaibaoUrl = ref('');
+const userhaibaoCover = computed(() => {
+  return { backgroundImage: `url(${userHaibaoUrl.value})` }
+})
+
+const openHaibao = (e) => {
+  haibaoShow.value = true
+  handleHaibao()
+}
+
+const handleHaibao = async () => {
+  if (haibaoUrl.value) {
+    return
+  }
+
+  const loading = weui.loading()
+  const infos = Storage.get("userinfos")
+  const haibaoCover = new Haibao(951, 1607)
+  haibaoCover.add(userPicture, 0, 0)
+  haibaoCover.add(mask, 10, 100)
+  haibaoCover.add(haibaoCoverBorder, 0, 0)
+  haibaoCover.draw('destination-in').then(() => {
+    haibaoCover.generate({ mimeType: 'image/png' }).then(async (url) => {
+      userHaibaoUrl.value = url
+
+      const haibaoSave = new Haibao(1080, 2160)
+      const qrcode = await generateQR(`fromid=${infos.invite_code}&merge_id=${infos.merge_id}`, 200, 200)
+      haibaoSave.add(url, 62, 350)
+      haibaoSave.add(bg, 0, 0)
+      haibaoSave.add(qrcode, 115, 1875)
+      haibaoSave.draw().then(() => {
+        haibaoSave.text(infos.nickname, haibaoSave.canvas.width / 2, 200, { font: 'bold 50px Arial', color: '#ffee6f' })
+        haibaoSave.generate({ mimeType: 'image/png' }).then(url => {
+          haibaoUrl.value = url
+          loading.hide()
+        }).catch(err => {
+          console.log(err)
+          weui.alert("海报生成失败，请重新生成")
+          loading.hide()
+        })
+      }).catch(err => {
+        console.log(err)
+        weui.alert("海报生成失败，请重新生成")
+        loading.hide()
+      })
+    })
+  })
+
+}
+
+const markers = ref([]);
+markers.value = [
+  { x: 50, y: 50, width: 100, height: 80 }
+];
+
 </script>

 <template>
-  <ModalTransition class="myPhoto" :show="show">
+  <ModalTransition class="myPhoto" :no-animation="true" :show="show">
    <div class="myPhoto-bg">
      <div class="scene-item item-1" @click="goBack">
        <img src="../assets/images/close-btn.png" alt="关闭按钮">
      </div>

-      <div class="scene-item item-3" @click="$emit('go-photo-square')">
-        <img src="../assets/images/zpgc.png" alt="照片广场">
+      <div v-for="(marker, index) in markers" 
+          :key="index"
+          class="marker"
+          :style="{
+            left: marker.x + 'px',
+            top: marker.y + 'px',
+            width: marker.width + 'px',
+            height: marker.height + 'px'
+          }"
+          @click.stop="$emit('go-photo-square')">
      </div>
-      <p class="my-photo-desc">每周只能选一张全照片打榜，每周一打榜成绩清零， 可重新选择照片参与打榜。</p>
+      <!-- <p class="my-photo-desc">每周只能选一张全照片打榜，每周一打榜成绩清零， 可重新选择照片参与打榜。</p> -->
      <div class="image-gallery">
+        <!-- <RecycleScroller
+            class="scroller"
+            :items="images"
+            :item-size="2"
+            key-field="id"
+            v-slot="{ item, index }"
+          >
+          <div class="image-wrapper">
+            <div class="image-container mask-background"
+              :style="{ backgroundImage: `url(${getBackgroundImage(item)})` }"
+            >
+            </div> 
+            <div class="list-item">
+              <img v-if="item.status === 'progressing'" @click="getGenerateImgStatus(item)" src="../assets/images/refresh-btn.png" class="refresh-btn" alt="刷新">         
+              <img 
+                :src="(activeBorders[index] || (globalStore.chartsBattle && item.is_public))
+                 ? activeBorderImage : defaultBorderImage" 
+                class="border-image"
+                alt="border"
+                @click="!globalStore.chartsBattle && toggleBorder(item, index)"
+              />
+            </div>
+          </div>
+        </RecycleScroller> -->
        <div 
          v-for="(item, index) in images" 
          :key="index" 
@@ -165,13 +273,15 @@ const getBackgroundImage = (item) => {
        </div>
      </div>
      <div class="scene-item item-2">
-        <img 
-          :src="!globalStore.chartsBattle 
-            ? 'src/assets/images/dabang.png' 
-            : 'src/assets/images/zhuli.png'" 
-          alt="角色图片"
-          @click="!globalStore.chartsBattle ? handleDabangClick() : handleZhuliClick()"
-        >
+        <img v-if="displayZhuli" @click="handleZhuliClick()" src="../assets/images/zhuli.png" alt="助力" >
+        <img v-if="!displayZhuli" @click="handleDabangClick()" src="../assets/images/dabang.png" alt="打榜" >
+      </div>
+
+      <div class="fullsection" v-show="haibaoShow">
+        <div class="haibao" :style="userhaibaoCover">
+          <img :src="haibaoUrl" alt="">
+          <div class="close" @click="haibaoShow = false"></div>
+        </div>
      </div>

    </div>
@@ -179,6 +289,60 @@ const getBackgroundImage = (item) => {
 </template>

 <style scoped>
+.scroller {
+  height: 124vw;
+  overflow-y: auto;
+}
+.list-item {
+  height: 2vw;
+  line-height: 50px;
+}
+.marker {
+  left: 0 !important;
+  top: 32vw !important;
+  width: 50vw !important;
+  height: 14vw !important;
+  position: absolute;
+}
+.fullsection {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, .7);
+}
+
+.haibao {
+  position: relative;
+  width: 65.37037vw;
+  height: 119.444444vw;
+  background-image: url("../assets/images/haibao-cover.webp");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.haibao img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  opacity: 0;
+}
+
+.close {
+  position: absolute;
+  width: 8.148148vw;
+  height: 8.148148vw;
+  right: 29vw;
+  top: 114vw;
+  background-image: url("../assets/images/close-btn.png");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
 .my-photo-desc {
  position: absolute;
  width: 87vw;
@@ -209,6 +373,7 @@ const getBackgroundImage = (item) => {
 }
 .image-gallery {
  overflow-y: auto;
+  overflow-x: hidden;
  display: block;
  width: 84vw;
  height: 57vh;
@@ -252,7 +417,7 @@ const getBackgroundImage = (item) => {
 .myPhoto-bg {
  width: 100%;
  height: 92vh;
-  background-image: url('../assets/images/my-photo-bg.png');
+  background-image: url('../assets/images/my-photov2.png');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
--- a/src/components/PhotoSquare.vue
+++ b/src/components/PhotoSquare.vue
@@ -4,12 +4,23 @@ import { Request, Storage } from "../libs/utils"
 import ModalTransition from "./ModalTransition.vue"
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus';
+import { RecycleScroller } from "vue-virtual-scroller";
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";

-defineProps({
+const props = defineProps({
  show: false
 })

-const emit = defineEmits(['go-my-photo']);
+watch(() => props.show, async (newVal) => {
+  if (!newVal) {
+    return
+  }
+  if (newVal) {
+    fetchImages();
+  }
+})
+
+const emit = defineEmits(['go-my-photo', 'update:show']);
 const router = useRouter();
 const goBack = () => {
  emit('update:show', false);
@@ -46,20 +57,30 @@ const fetchImages = async () => {

 // 图片数据
 const images = ref([]);
-const disableInviteHelp = ref(true);
+const disableInviteHelp = ref(false);
 const userinfos = Storage.get("userinfos")

-// TODO 需要测试
-
+// TODO 需要测试邀请进来的情况
 const mergeId = ref();
 const rankingInvite = ref(0);
 const nameInvite = ref('');
 const linkCountInvite = ref(0);

+const urlParams = new URLSearchParams(window.location.search);
+mergeId.value = urlParams.get('merge_id');
+watch(() => mergeId, async (newVal) => {
+  if (!newVal) {
+    return
+  }
+  if (newVal.value) {
+    fetchImages();
+  }
+})
+
 const getInviteInfo = ()=> {
  const urlParams = new URLSearchParams(window.location.search);
  mergeId.value = urlParams.get('merge_id');
-  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/89`, {
+  fetch(`https://huodong2.lzlj.com/api/faceFamily/face/merge/${mergeId.value}`, {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${Storage.get("userinfos").api_token}`
@@ -101,22 +122,63 @@ const inviteHelp = ()=> {
  }); 
 }

-onMounted(getInviteInfo(), fetchImages())
+// onMounted(()=> {
+//   getInviteInfo()
+// })
+const markers = ref([]);
+markers.value = [
+  { x: 50, y: 50, width: 100, height: 80 }
+];
+
 </script>

 <template>
-  <ModalTransition class="photoSquare" :show="show">
+  <ModalTransition class="photoSquare" :no-animation="true" :show="show">
    <div class="photoSquare-bg">
      <div class="scene-item item-1" @click="goBack">
        <img src="../assets/images/close-btn.png" alt="关闭按钮">
      </div>

-      <div class="scene-item item-3" @click="$emit('go-my-photo')">
-        <img src="../assets/images/my-photo-tab.png" alt="我的照片">
+      <div v-for="(marker, index) in markers" 
+          :key="index"
+          class="marker"
+          :style="{
+            left: marker.x + 'px',
+            top: marker.y + 'px',
+            width: marker.width + 'px',
+            height: marker.height + 'px'
+          }"
+          @click.stop="$emit('go-my-photo')">
      </div>

      <div v-if="!disableInviteHelp" class="image-gallery ">
-        <div 
+        <RecycleScroller
+            class="scroller"
+            :items="images"
+            :item-size="8"
+            key-field="id"
+            v-slot="{ item, index }"
+          >
+          <div class="image-wrapper">
+            <div class="image-container mask-background">
+            </div>          
+            <img 
+              src="../assets/images/zpgc-border.png" 
+              class="border-image"
+              alt="border"
+            />
+            <div class="list-item">
+              <div class="flex-container-detail">
+                <div class="left-group">
+                  <p class="photo-number">{{ (index + 1).toString().padStart(3, '0') }}</p>
+                  <p class="photo-name">{{ item.user_name }}</p>
+                </div>
+                <p class="right-item photo-name" style="padding-left: 3vw;">{{ item.likes_count }}赞</p>
+              </div>
+            </div>
+          </div>
+        </RecycleScroller>
+        <!-- <div 
          v-for="(item, index) in images" 
          :key="index" 
          class="image-wrapper"
@@ -135,7 +197,7 @@ onMounted(getInviteInfo(), fetchImages())
            </div>
            <p class="right-item photo-name" style="padding-left: 3vw;">{{ item.likes_count }}赞</p>
          </div>
-        </div>
+        </div> -->
      </div>
      <div v-if="!disableInviteHelp" class="fixed-background-container">
        <div class="flex-container">
@@ -173,6 +235,21 @@ onMounted(getInviteInfo(), fetchImages())
 </template>

 <style scoped>
+.scroller {
+  height: 124vw;
+  overflow-y: auto;
+}
+.list-item {
+  height: 8vw;
+  line-height: 50px;
+}
+.marker {
+  left: 50vw !important;
+  top: 32vw !important;
+  width: 50vw !important;
+  height: 14vw !important;
+  position: absolute;
+}
 .flex-container-detail-invite {
  display: flex;
  flex-flow: row;
@@ -246,6 +323,7 @@ onMounted(getInviteInfo(), fetchImages())
  align-items: center;
  height: 3vh;
  top: -11vw;
+  font-size: 11px;
 }
 .flex-container {
  display: flex;
@@ -336,7 +414,7 @@ onMounted(getInviteInfo(), fetchImages())
 .photoSquare-bg {
  width: 100%;
  height: 92vh;
-  background-image: url('../assets/images/zpgc-bg.png');
+  background-image: url('../assets/images/photo-squarev2.png');
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
--- a/src/main.js
+++ b/src/main.js
@@ -4,5 +4,6 @@ import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import VueVirtualScroller from 'vue-virtual-scroller'

-createApp(App).use(router).use(ElementPlus).mount('#app')
+createApp(App).use(router).use(VueVirtualScroller).use(ElementPlus).mount('#app')