update

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",

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

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;
+}

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 showMyPhoto = () => { 
-const activeTab = ref('my-photo')
+  isMyPhotoVisible.value = true;
-
+  isPhotoSquareVisible.value = false;
-const showMyPhoto = () => { activeTab.value = 'my-photo', isMyPhotoVisible.value = true; }
+}
 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" />
+  <MyPhoto @go-photo-square="showPhotoSquare" v-model:show="isMyPhotoVisible" />
-  <PhotoSquare v-else  @go-my-photo="showMyPhoto" v-model:show="isPhotoSquareVisible" />
+  <PhotoSquare @go-my-photo="showMyPhoto" v-model:show="isPhotoSquareVisible" />
 </template>
 
 <style scoped>

src/components/ModalTransition.vue

@@ -27,25 +27,31 @@ const props = defineProps({
     default: 300,
     type: Number
   },
-  show: false
+  show: false,
+  noAnimation: {
+    default: false,
+    type: Boolean
+  }
 })
 
 const animateName = ref('')
 const directionClass = ref('')
 
-switch (props.name) {
+if (!props.noAnimation) {
-  case 'top':
+  switch (props.name) {
-    animateName.value = 'transTop'
+    case 'top':
-    break;
+      animateName.value = 'transTop'
-  case 'opacity':
+      break;
-    animateName.value = 'opacity'
+    case 'opacity':
-    break;
+      animateName.value = 'opacity'
-  case 'scale':
+      break;
-    animateName.value = 'scale'
+    case 'scale':
-    break;
+      animateName.value = 'scale'
-  default:
+      break;
-  animateName.value = 'transBottom'
+    default:
-    break;
+      animateName.value = 'transBottom'
+      break;
+  }
 }
 
 </script>

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 { Storage, generateQR } from "../libs/utils"
-import globalToastEvent, { ToastType } from '../globalToastEvent';
+// import { RecycleScroller } from "vue-virtual-scroller";
+// import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 
-defineProps({
+const props = defineProps({
   show: false
 })
 
-//TODO 帮我看一下对不对
+watch(() => props.show, async (newVal) => {
-globalToastEvent.on(ToastType.MOUNTED, () => {
+  if (!newVal) {
-  fetchImages()
+    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,7 +108,8 @@ const handleDabangClick = () => {
 };
 
 const handleZhuliClick = () => {
-    console.log('助力被点击');
+  openHaibao();
+  console.log('助力被点击');
 };
 
 import failedImg from '../assets/images/failed.png';
@@ -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')">
+      <div v-for="(marker, index) in markers" 
-        <img src="../assets/images/zpgc.png" alt="照片广场">
+          :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 
+        <img v-if="displayZhuli" @click="handleZhuliClick()" src="../assets/images/zhuli.png" alt="助力" >
-          :src="!globalStore.chartsBattle 
+        <img v-if="!displayZhuli" @click="handleDabangClick()" src="../assets/images/dabang.png" alt="打榜" >
-            ? 'src/assets/images/dabang.png' 
+      </div>
-            : 'src/assets/images/zhuli.png'" 
+
-          alt="角色图片"
+      <div class="fullsection" v-show="haibaoShow">
-          @click="!globalStore.chartsBattle ? handleDabangClick() : handleZhuliClick()"
+        <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;

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')">
+      <div v-for="(marker, index) in markers" 
-        <img src="../assets/images/my-photo-tab.png" alt="我的照片">
+          :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;

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')