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

333

Browse Source
This commit is contained in:
zpc 2025-06-13 18:07:03 +08:00
parent 34dfd1cb58
commit f3c1b79720
1 changed files with 33 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,52 +3,42 @@
style="width: 100vw;height: 100vh;background-color:rgba(0,0,0,0.9) ;position: fixed;top: 0px;left: 0px;z-index: 9999;display: flex;justify-content: center;align-items: center;"
@touchmove.stop.prevent="">
<view v-if="visible" class="preview-popup" @touchmove.stop.prevent="moveHandle">
<!-- 翻转卡片容器 -->
<view class="flip-container" :class="{ 'flipped': showList }">
<view class="flipper">
<!-- 正面：商品图片 -->
<view class="front">
<view class="pic center relative" @click="toggleList">
<image :src="innerImgUrl" lazy-load mode="aspectFill"></image>
<view class="type-tag justify-center"
:style="{ backgroundColor: dataItem.shang_info ? dataItem.shang_info.color : '#000000' }"
v-if="innerTipTitle">{{ innerTipTitle }}</view>
<view class="baoxiang-tag justify-center" v-if="isTips"></view>
<!-- 商品图片 -->
<view v-if="!showList" class="pic center relative" @click="toggleList">
<image :src="innerImgUrl" lazy-load mode="aspectFill"></image>
<view class="type-tag justify-center"
:style="{ backgroundColor: dataItem.shang_info ? dataItem.shang_info.color : '#000000' }"
v-if="innerTipTitle">{{ innerTipTitle }}</view>
<view class="baoxiang-tag justify-center" v-if="isTips"></view>
</view>
<!-- 赏品列表 -->
<view class="listt" v-if="showList">
<view class="list">
<!-- 加载中状态 -->
<view class="loading-container center" v-if="loading">
<view class="loading-icon">
<image :src="$img('/static/img/loading.gif')" mode="aspectFit" @error="handleLoadingError">
</image>
<view class="loading-dot" v-if="loadingError"></view>
</view>
<view class="loading-text">加载中...</view>
</view>
<!-- 背面：赏品列表 -->
<view class="back">
<view class="listt">
<view class="list">
<!-- 加载中状态 -->
<view class="loading-container center" v-if="loading">
<view class="loading-icon">
<image :src="$img('/static/img/loading.gif')" mode="aspectFit" @error="handleLoadingError">
</image>
<view class="loading-dot" v-if="loadingError"></view>
</view>
<view class="loading-text">加载中...</view>
</view>
<!-- 空列表状态 -->
<view class="empty-container center" v-else-if="children.length === 0 && !loading">
<view class="empty-text">暂无商品</view>
</view>
<!-- 赏品列表内容 -->
<scroll-view class="res-list" :scroll-y="true" v-else>
<view class="row" v-for="(row, rowIndex) in getRows(children, 3)" :key="'row-' + rowIndex">
<view class="item" v-for="(item, i) in row" :key="i">
<detail-list-item :item="item" imageHeight="180rpx" @click="handleItemClick" />
</view>
<!-- 补齐空白格，保证每行3个 -->
<view v-for="n in 3 - row.length" :key="'empty-' + n" class="item empty"></view>
</view>
<view style="height:20rpx;width: 100%;"></view>
</scroll-view>
<!-- 空列表状态 -->
<view class="empty-container center" v-else-if="children.length === 0 && !loading">
<view class="empty-text">暂无商品</view>
</view>
<!-- 赏品列表内容 -->
<scroll-view class="res-list" :scroll-y="true" v-else>
<view class="row" v-for="(row, rowIndex) in getRows(children, 3)" :key="'row-' + rowIndex">
<view class="item" v-for="(item, i) in row" :key="i">
<detail-list-item :item="item" imageHeight="180rpx" @click="handleItemClick" />
</view>
<!-- 补齐空白格，保证每行3个 -->
<view v-for="n in 3 - row.length" :key="'empty-' + n" class="item empty"></view>
</view>
</view>
<view style="height:20rpx;width: 100%;"></view>
</scroll-view>
</view>
</view>
@ -62,7 +52,6 @@
<view class="info-item" v-if="innerProbability">{{ innerProbability }}</view>
<view class="info-item highlight" v-if="isTips" @click="toggleList">
{{ showList ? '收起' : '查看奖品' }}
<!-- <text class="arrow-icon">{{ showList ? '↑' : '↓' }}</text> -->
</view>
<view class="info-item" v-if="innerProductType">产品类型: {{ innerProductType }}</view>
<view class="info-item" v-for="(item, index) in innerExtraInfo" :key="'info-' + index">{{ item }}</view>
@ -313,45 +302,6 @@ export default {
box-sizing: border-box;
height: 850rpx;
// 翻转卡片相关样式
.flip-container {
perspective: 1000px;
width: 100%;
height: 620rpx;
&.flipped .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
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;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
}
.listt {
width: 100%;
padding-top: 5rpx;
@ -359,6 +309,7 @@ export default {
background-color: #ffffff;
border-radius: 16rpx;
margin: 0rpx auto;
transition: all 0.3s ease;
}
.list {
@ -366,14 +317,12 @@ export default {
height: 610rpx;
background-color: #ffffff;
border-radius: 16rpx;
// margin: 0rpx auto;
.res-list {
height: 610rpx;
padding-top: 5rpx;
padding-left: 8rpx;
.row {
display: flex;
flex-direction: row;
@ -392,7 +341,6 @@ export default {
.item.empty {
background: transparent;
pointer-events: none;
// 保证空白格不显示内容
}
}
}
@ -490,10 +438,6 @@ export default {
font-weight: 500;
display: flex;
align-items: center;
.arrow-icon {
margin-left: 4rpx;
}
}
}
}