添加特效

components/detail-preview-popup/detail-preview-popup.vue

@@ -1,43 +1,56 @@
 <template>
   <uni-popup ref="popup" type="center" maskBackgroundColor="rgba(0,0,0,0.9)">
     <view v-if="visible" class="preview-popup">
-      <!-- 赏品列表 -->
+      <!-- 翻转卡片容器 -->
-      <view class="list" v-if="showList">
+      <view class="flip-container" :class="{ 'flipped': showList }">
-        <scroll-view :scroll-y="true">
+        <view class="flipper">
-          <view class="res-list">
+          <!-- 正面：商品图片 -->
-            <view class="res-item" v-for="(item, i) in dataItem.children" :key="i">
+          <view class="front">
-              <view class="pic center">
+            <view class="pic center relative">
-                <image :src="item.imgurl" lazy-load></image>
+              <image :src="innerImgUrl" lazy-load></image>
-                <view class="tag center"
+              <view class="type-tag justify-center"
-                  :style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">{{ item.shang_info ?
+                :style="{ backgroundColor: dataItem.shang_info ? dataItem.shang_info.color : '#000000' }"
-                    item.shang_info.title : "" }}</view>
+                v-if="innerTipTitle">{{ innerTipTitle }}</view>
-                <view class="num center">{{ item.surplus_stock }}/{{ item.stock }}</view>
-              </view>
-              <view class="title hang1 flex center " style="padding: 0px;margin: 0px;text-align: center;width: 100%;">
-                <text> {{ item.title }}</text>
-              </view>
             </view>
           </view>
-        </scroll-view>
+          
-      </view>
+          <!-- 背面：赏品列表 -->
-      <!-- 商品图片 -->
+          <view class="back">
-      <view class="pic center relative" v-if="!showList">
+            <view class="list">
-        <image :src="innerImgUrl" lazy-load></image>
+              <scroll-view :scroll-y="true">
-        <view class="type-tag  justify-center"
+                <view class="res-list">
-          :style="{ backgroundColor: dataItem.shang_info ? dataItem.shang_info.color : '#000000' }"
+                  <view class="res-item" v-for="(item, i) in dataItem.children" :key="i">
-          v-if="innerTipTitle">{{ innerTipTitle }}</view>
+                    <view class="pic center">
+                      <image :src="item.imgurl" lazy-load></image>
+                      <view class="tag center"
+                        :style="{ backgroundColor: item.shang_info ? item.shang_info.color : '#000000' }">{{ item.shang_info ?
+                          item.shang_info.title : "" }}</view>
+                      <view class="num center">{{ item.surplus_stock }}/{{ item.stock }}</view>
+                    </view>
+                    <view class="title hang1 flex center " style="padding: 0px;margin: 0px;text-align: center;width: 100%;">
+                      <text> {{ item.title }}</text>
+                    </view>
+                  </view>
+                </view>
+              </scroll-view>
+            </view>
+          </view>
+        </view>
       </view>
+      
       <!-- 商品标题 -->
       <view class="title">
         <text class="hang1">{{ !showList?innerTitle:'抽中宝箱后，会在奖品列表中随机抽取一个奖品' }}</text>
       </view>
+      
       <!-- 商品信息列表 -->
       <view class="info-list">
         <view class="info-item" v-if="innerProbability">{{ innerProbability }}</view>
-        <view class="info-item" v-if="isTips" @click="showList = !showList">{{ showList ? '收起' : '查看奖品' }}</view>
+        <view class="info-item" v-if="isTips" @click="toggleList">{{ showList ? '收起' : '查看奖品' }}</view>
         <view class="info-item" v-if="innerProductType">产品类型: {{ innerProductType }}</view>
         <view class="info-item" v-for="(item, index) in innerExtraInfo" :key="index">{{ item }}</view>
       </view>
+      
       <!-- 关闭按钮 -->
       <view class="close icon" @click="closePopup">
         <image :src="$img('/static/img/close.png')" lazy-load></image>
@@ -143,7 +156,11 @@ export default {
       this.setPreviewData(options);
     },
     
-
+    // 切换列表显示状态，添加动画效果
+    toggleList() {
+      this.showList = !this.showList;
+    },
+    
     // 设置预览数据并打开弹窗
     setPreviewData(data) {
       console.log('设置预览数据', data);
@@ -215,9 +232,47 @@ export default {
   width: 80vw;
   box-sizing: border-box;
   height: 850rpx;
+  
+  // 翻转卡片相关样式
+  .flip-container {
+    perspective: 1000px;
+    width: 100%;
+    height: 598rpx;
+    
+    &.flipped .flipper {
+      transform: rotateY(180deg);
+    }
+    
+    .flipper {
+      transition: 0.8s;
+      transform-style: preserve-3d;
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+    
+    .front, .back {
+      backface-visibility: hidden;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 16rpx;
+      overflow: hidden;
+    }
+    
+    .front {
+      z-index: 2;
+      transform: rotateY(0deg);
+    }
+    
+    .back {
+      transform: rotateY(180deg);
+    }
+  }
 
   .list {
-
     width: 100%;
     height: 598rpx;
     background-color: #ffffff;
@@ -249,8 +304,6 @@ export default {
             border-radius: 16rpx 16rpx 0rpx 0rpx;
           }
 
-
-
           .num {
             position: absolute;
             z-index: 2;
@@ -284,7 +337,6 @@ export default {
     }
   }
 
-
   // 商品图片区域
   .pic {
     width: 100%;
@@ -350,6 +402,7 @@ export default {
       font-family: Source Han Sans CN;
       font-weight: 400;
       color: #ffffff;
+      cursor: pointer;
     }
   }
 
@@ -360,7 +413,6 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    // transform: translate(-50%, 160%);
 
     image {
       width: 48rpx;