shang/yfs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加特效

Browse Source
This commit is contained in:
zpc 2025-04-06 04:30:33 +08:00
parent 475dc60cbd
commit d3ddbd4e9d
1 changed files with 82 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
components/detail-preview-popup/detail-preview-popup.vue
View File

@ -1,8 +1,22 @@
<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 }">
<view class="flipper">
<!-- 正面：商品图片 -->
<view class="front">
<view class="pic center relative">
<image :src="innerImgUrl" lazy-load></image>
<view class="type-tag justify-center"
:style="{ backgroundColor: dataItem.shang_info ? dataItem.shang_info.color : '#000000' }"
v-if="innerTipTitle">{{ innerTipTitle }}</view>
</view>
</view>
<!-- 背面：赏品列表 -->
<view class="back">
<view class="list">
<scroll-view :scroll-y="true">
<view class="res-list">
<view class="res-item" v-for="(item, i) in dataItem.children" :key="i">
@ -20,24 +34,23 @@
</view>
</scroll-view>
</view>
<!-- 商品图片 -->
<view class="pic center relative" v-if="!showList">
<image :src="innerImgUrl" lazy-load></image>
<view class="type-tag justify-center"
:style="{ backgroundColor: dataItem.shang_info ? dataItem.shang_info.color : '#000000' }"
v-if="innerTipTitle">{{ innerTipTitle }}</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,6 +156,10 @@ export default {
this.setPreviewData(options);
},
// 切换列表显示状态，添加动画效果
toggleList() {
this.showList = !this.showList;
},
// 设置预览数据并打开弹窗
setPreviewData(data) {
@ -216,8 +233,46 @@ export default {
box-sizing: border-box;
height: 850rpx;
.list {
// 翻转卡片相关样式
.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;