347 lines
11 KiB
Vue
347 lines
11 KiB
Vue
<template>
|
||
<view class="page">
|
||
<image class="bg-wrapper" src="/static/castlove/beijingban.png" mode="aspectFill"></image>
|
||
<view class="main-container">
|
||
<view class="cards-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
|
||
<view v-for="(card, index) in currentCardList" :key="index" class="card-item"
|
||
:class="{ 'no-transition': disableTransition }" :style="getCardStyle(index)">
|
||
<view class="card-frame"
|
||
:class="{ 'no-border': card.comingSoon, 'card-frame--tappable': !card.comingSoon }"
|
||
@tap.stop="onCardFrameTap(index)">
|
||
<image class="card-image" :src="card.image" mode="aspectFill" />
|
||
<image v-if="card.comingSoon" class="coming-soon-badge"
|
||
src="/static/castlove/jinqingqidai.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="text-panel">
|
||
<view class="arrow-btn arrow-up" @click="scrollUp">
|
||
<image class="arrow-icon" src="/static/castlove/jiantou.png" style="transform:rotate(180deg)" />
|
||
</view>
|
||
<view class="text-list">
|
||
<view v-for="(category, index) in categoryList" :key="index" class="text-item"
|
||
:class="{ active: selectedCategoryIndex === index, 'font-large': index === 1, 'font-mid': index === 0 || index === 2 }"
|
||
@click="selectCategory(index)">
|
||
<text>{{ category.name }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="arrow-btn arrow-down" @click="scrollDown">
|
||
<image class="arrow-icon" src="/static/castlove/jiantou.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
onShow() {
|
||
try {
|
||
uni.hideToast()
|
||
uni.hideLoading()
|
||
} catch (e) { }
|
||
},
|
||
data() {
|
||
return {
|
||
selectedCategoryIndex: 0,
|
||
categoryList: [{ name: '星卡' }, { name: '吧唧' }, { name: '海报' }],
|
||
cardListMap: {
|
||
'星卡': [
|
||
{ name: '光栅卡', image: '/static/castlove/guangshanka.png', comingSoon: false },
|
||
{ name: '拍立得', image: '/static/castlove/pailide.png', comingSoon: false },
|
||
{ name: '开发中', image: '/static/castlove/daikaifa.png', comingSoon: true },
|
||
{ name: '镭射卡', image: '/static/castlove/leisheka.png', comingSoon: false },
|
||
{ name: '撕拉片', image: '/static/castlove/silapian.png', comingSoon: false },
|
||
],
|
||
'吧唧': [],
|
||
'海报': []
|
||
},
|
||
cardList: [
|
||
{ name: '光栅卡', image: '/static/castlove/guangshanka.png', comingSoon: false },
|
||
{ name: '拍立得', image: '/static/castlove/pailide.png', comingSoon: false },
|
||
{ name: '镭射卡', image: '/static/castlove/leisheka.png', comingSoon: false },
|
||
{ name: '撕拉片', image: '/static/castlove/silapian.png', comingSoon: false },
|
||
{ name: '开发中', image: '/static/castlove/daikaifa.png', comingSoon: true }
|
||
],
|
||
cardRoutes: {
|
||
'光栅卡': '/pages/castlove/lenticular/lenticular-create',
|
||
'拍立得': '/pages/castlove/create',
|
||
'镭射卡': '/pages/castlove/create',
|
||
'撕拉片': '/pages/castlove/create',
|
||
},
|
||
|
||
totalCard: 5,
|
||
selectedIndex: 1, // 默认第2张
|
||
touchStartY: 0,
|
||
dragOffset: 0,
|
||
isDragging: false,
|
||
disableTransition: false,
|
||
SWIPE_STEP: 100,
|
||
}
|
||
},
|
||
computed: {
|
||
currentCardList() {
|
||
const name = this.categoryList[this.selectedCategoryIndex]?.name
|
||
return this.cardListMap[name] || this.cardList
|
||
}
|
||
},
|
||
methods: {
|
||
selectCategory(index) {
|
||
this.selectedCategoryIndex = index
|
||
this.selectedIndex = 1
|
||
this.dragOffset = 0
|
||
this.isDragging = false
|
||
},
|
||
onTouchStart(e) {
|
||
this.touchStartY = e.touches[0].clientY
|
||
this.isDragging = true
|
||
this.disableTransition = true
|
||
},
|
||
onTouchMove(e) {
|
||
if (!this.isDragging) return
|
||
const moveY = e.touches[0].clientY
|
||
this.dragOffset = moveY - this.touchStartY
|
||
},
|
||
onTouchEnd() {
|
||
if (!this.isDragging) return
|
||
this.isDragging = false
|
||
this.disableTransition = false
|
||
|
||
const moveCount = Math.round(-this.dragOffset / this.SWIPE_STEP)
|
||
let newIdx = this.selectedIndex + moveCount
|
||
newIdx = ((newIdx % 5) + 5) % 5
|
||
this.selectedIndex = newIdx
|
||
this.dragOffset = 0
|
||
},
|
||
|
||
// ====================== 核心修复：z-index + 层级 + 循环 ======================
|
||
getCardStyle(index) {
|
||
const positions = [
|
||
{ left: 288, top: 64, rotate: 25, scale: 0.75 },
|
||
{ left: 120, top: 288, rotate: 12, scale: 0.95 },
|
||
{ left: 60, top: 580, rotate: 0, scale: 1 },
|
||
{ left: 120, top: 888, rotate: -12, scale: 0.95 },
|
||
{ left: 224, top: 1096, rotate: -25, scale: 0.75 },
|
||
]
|
||
|
||
const progress = -this.dragOffset / this.SWIPE_STEP
|
||
const centerIdx = this.selectedIndex + progress
|
||
|
||
// 循环最短差值（关键）
|
||
let diff = index - centerIdx
|
||
if (diff > 2) diff -= 5
|
||
if (diff < -2) diff += 5
|
||
const cardPos = diff + 2
|
||
|
||
// 插值计算
|
||
let pos
|
||
if (Number.isInteger(cardPos)) {
|
||
pos = positions[cardPos] ?? positions[2]
|
||
} else {
|
||
const prev = Math.floor(cardPos)
|
||
const next = (prev + 1) % 5
|
||
const t = cardPos - prev
|
||
const p = positions[prev] ?? positions[2]
|
||
const n = positions[next] ?? positions[2]
|
||
pos = {
|
||
left: p.left + (n.left - p.left) * t,
|
||
top: p.top + (n.top - p.top) * t,
|
||
rotate: p.rotate + (n.rotate - p.rotate) * t,
|
||
scale: p.scale + (n.scale - p.scale) * t,
|
||
}
|
||
}
|
||
|
||
// ====================== Z‑INDEX 终极修复 ======================
|
||
const distance = Math.abs(cardPos - 2)
|
||
const zIndex = Math.round(100 - distance * 30) // 越靠近中间层级越高
|
||
const isCenter = distance < 0.02
|
||
|
||
if (isCenter) {
|
||
return {
|
||
left: pos.left + 'rpx',
|
||
top: pos.top + 'rpx',
|
||
transform: `scale(${pos.scale * 1.15}) rotate(${pos.rotate}deg)`,
|
||
zIndex: 999, // 中心永远最高
|
||
}
|
||
}
|
||
|
||
return {
|
||
left: pos.left + 'rpx',
|
||
top: pos.top + 'rpx',
|
||
transform: `scale(${pos.scale}) rotate(${pos.rotate}deg)`,
|
||
zIndex,
|
||
}
|
||
},
|
||
|
||
getCardStackPosition(index) {
|
||
const progress = -this.dragOffset / this.SWIPE_STEP
|
||
const centerIdx = this.selectedIndex + progress
|
||
let diff = index - centerIdx
|
||
if (diff > 2) diff -= 5
|
||
if (diff < -2) diff += 5
|
||
return diff + 2
|
||
},
|
||
|
||
onCardFrameTap(index) {
|
||
const card = this.currentCardList[index]
|
||
if (!card) return
|
||
const pos = this.getCardStackPosition(index)
|
||
if (Math.abs(pos - 2) < 0.2) {
|
||
if (card.name === '光栅卡') {
|
||
uni.navigateTo({
|
||
url: this.cardRoutes['光栅卡'] + '?name=' + encodeURIComponent(card.name),
|
||
})
|
||
} else {
|
||
uni.showToast({ title: '激情开发中', icon: 'none' })
|
||
}
|
||
return
|
||
}
|
||
this.selectedIndex = index
|
||
},
|
||
|
||
scrollUp() {
|
||
if (this.selectedCategoryIndex > 0) this.selectCategory(this.selectedCategoryIndex - 1)
|
||
},
|
||
scrollDown() {
|
||
if (this.selectedCategoryIndex < this.categoryList.length - 1) {
|
||
this.selectCategory(this.selectedCategoryIndex + 1)
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
height: 100vh;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bg-wrapper {
|
||
position: fixed;
|
||
top: -16rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 110%;
|
||
z-index: 0;
|
||
}
|
||
|
||
.main-container {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
z-index: 10;
|
||
}
|
||
|
||
.cards-container {
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
|
||
.card-item {
|
||
position: absolute;
|
||
width: 344rpx;
|
||
height: 344rpx;
|
||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||
will-change: transform, z-index;
|
||
}
|
||
|
||
.card-item.no-transition {
|
||
transition: none !important;
|
||
}
|
||
|
||
.card-frame {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 20rpx;
|
||
padding: 10rpx;
|
||
background-image: url('/static/square/cangpinkuang1.png');
|
||
background-size: cover;
|
||
}
|
||
|
||
.card-frame.no-border {
|
||
background-image: none;
|
||
}
|
||
|
||
.card-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 14rpx;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.coming-soon-badge {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
|
||
.text-panel {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 200rpx;
|
||
height: 392rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: url('/static/castlove/xiahualan.png') no-repeat center;
|
||
background-size: 130%;
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.arrow-btn {
|
||
width: 60rpx;
|
||
height: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.arrow-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.text-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.text-item {
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
padding: 10rpx 20rpx;
|
||
border-radius: 14rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.text-item.active {
|
||
font-weight: bold;
|
||
background: url('/static/nft/dingbutubiao_liang.png') no-repeat center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.font-large {
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.font-mid {
|
||
font-size: 30rpx;
|
||
}
|
||
</style> |