添加特效
This commit is contained in:
zpc
parent
475dc60cbd
commit
d3ddbd4e9d
|
|
@ -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">
|
||||
<scroll-view :scroll-y="true">
|
||||
<view class="res-list">
|
||||
<view class="res-item" v-for="(item, i) in dataItem.children" :key="i">
|
||||
<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 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>
|
||||
</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 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">
|
||||
<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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user