83 lines
3.1 KiB
Plaintext
83 lines
3.1 KiB
Plaintext
|
<!-- components/spread-container/spread-container.wxml -->
|
|||
|
|
|
|||
|
|
<!-- 1. 卡牌单元模板 -->
|
|||
|
|
<template name="card-item">
|
|||
|
|
<view class="card-slot" style="{{extraStyle}}" bindtap="handleCardTap" data-index="{{card._index}}">
|
|||
|
|
|
|||
|
|
<!-- 位置信息 -->
|
|||
|
|
<view class="pos-info">
|
|||
|
|
<text class="pos-name">{{card._posName}}</text>
|
|||
|
|
<!-- <text class="pos-seq">NO.{{card._seq}}</text> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 翻牌场景 -->
|
|||
|
|
<view class="flip-scene">
|
|||
|
|
<view class="flip-card {{card._index < revealedCount ? 'flipped' : ''}}">
|
|||
|
|
<!-- 背面 -->
|
|||
|
|
<view class="card-face face-back">
|
|||
|
|
<image class="card-image" src="/images/beimian.png" mode="aspectFit" />
|
|||
|
|
</view>
|
|||
|
|
<!-- 正面 -->
|
|||
|
|
<view class="card-face face-front">
|
|||
|
|
<image
|
|||
|
|
class="card-image {{card.isReversed ? 'reversed' : ''}}"
|
|||
|
|
src="{{card.image}}"
|
|||
|
|
mode="aspectFit"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 牌名称 (翻开后显示) -->
|
|||
|
|
<text class="card-name-sm" wx:if="{{card._index < revealedCount}}">{{card.name}}</text>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="spread-wrapper {{spread.layout.type === 'celtic' ? 'celtic-mode' : ''}}">
|
|||
|
|
|
|||
|
|
<!-- =========================================
|
|||
|
|
布局 1: Grid (网格)
|
|||
|
|
直接遍历 displayList，无特殊定位
|
|||
|
|
========================================= -->
|
|||
|
|
<view class="layout-grid" wx:if="{{spread.layout.type === 'grid'}}">
|
|||
|
|
<block wx:for="{{displayList}}" wx:key="_index">
|
|||
|
|
<template is="card-item" data="{{card: item, revealedCount: revealedCount, extraStyle: ''}}" />
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- =========================================
|
|||
|
|
布局 2: Celtic Cross (舞台模式 - 600x900rpx)
|
|||
|
|
使用 displayList 中的 _style 进行绝对定位
|
|||
|
|
========================================= -->
|
|||
|
|
<view class="spread-container" wx:if="{{spread.layout.type === 'celtic'}}">
|
|||
|
|
<block wx:for="{{displayList}}" wx:key="_index">
|
|||
|
|
<view class="stage-card" style="{{item._style}}" bindtap="handleCardTap" data-index="{{item._index}}">
|
|||
|
|
<!-- 复用 card-item 内部结构，但不使用 template 以避免 style 冲突 -->
|
|||
|
|
<view class="card-slot">
|
|||
|
|
<view class="pos-info">
|
|||
|
|
<text class="pos-name">{{item._posName}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="flip-scene">
|
|||
|
|
<view class="flip-card {{item._index < revealedCount ? 'flipped' : ''}}">
|
|||
|
|
<view class="card-face face-back">
|
|||
|
|
<image class="card-image" src="/images/beimian.png" mode="aspectFit" />
|
|||
|
|
</view>
|
|||
|
|
<view class="card-face face-front">
|
|||
|
|
<image
|
|||
|
|
class="card-image {{item.isReversed ? 'reversed' : ''}}"
|
|||
|
|
src="{{item.image}}"
|
|||
|
|
mode="aspectFit"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<text class="card-name-sm" wx:if="{{item._index < revealedCount}}">{{item.name}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|