'颜色尺码价格联动'

unpackage/dist/dev/mp-weixin/pages/product-detail/product-detail.wxml

@@ -1 +1 @@
-<view class="detail-page"><view class="detail-images"><swiper class="detail-swiper" indicator-dots="{{true}}" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#FF6800" circular="{{true}}"><block wx:for="{{productImages}}" wx:for-item="item" wx:for-index="index" wx:key="index"><swiper-item><view class="swiper-img" style="{{('background: '+item.bg+';')}}"><text class="swiper-emoji">{{item.emoji}}</text></view></swiper-item></block></swiper><view class="detail-badges"><block wx:for="{{productTags}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="detail-badge" style="{{('background: '+item.bg+'; color: '+item.color+';')}}">{{''+item.text+''}}</view></block></view></view><view class="detail-info-section"><view class="detail-header"><text class="detail-name">{{product.name}}</text><text class="detail-code">{{"SKU: "+product.code}}</text></view><view class="detail-price-row"><text class="detail-price">{{"¥"+product.price}}</text><text class="detail-price-unit">起</text><block wx:if="{{product.originalPrice}}"><text class="detail-price-original">{{"¥"+product.originalPrice}}</text></block></view><view class="detail-meta"><view class="meta-item"><text class="meta-label">起订量</text><text class="meta-value">{{product.moq+"件"}}</text></view><view class="meta-item"><text class="meta-label">生产周期</text><text class="meta-value">{{product.leadTime}}</text></view><view class="meta-item"><text class="meta-label">工艺</text><text class="meta-value">{{product.craft}}</text></view></view></view><view class="detail-section"><text class="section-label">颜色选择</text><view class="color-options"><block wx:for="{{colors}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="{{['color-option '+(selectedColor===index?'selected':'')]}}" data-index="{{index}}" data-event-opts="{{[['tap',[['selectColor',['$event']]]]]}}" bindtap="__e"><view class="color-dot" style="{{('background: '+item.value+';')}}"></view><text class="color-name">{{item.name}}</text></view></block></view></view><view class="detail-section"><text class="section-label">尺码选择</text><view class="size-options"><block wx:for="{{sizes}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="{{['size-option '+(selectedSize===item?'selected':'')]}}" data-size="{{item}}" data-event-opts="{{[['tap',[['selectSize',['$event']]]]]}}" bindtap="__e">{{''+item+''}}</view></block></view></view><view class="detail-section"><text class="section-label">产品参数</text><view class="params-table"><block wx:for="{{productParams}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="param-row"><text class="param-label">{{item.label}}</text><text class="param-value">{{item.value}}</text></view></block></view></view><view class="detail-section"><text class="section-label">工艺说明</text><view class="craft-info"><block wx:for="{{crafts}}" wx:for-item="item" wx:for-index="index" wx:key="index"><view class="craft-card"><view class="craft-icon" style="{{('background: '+item.bg+';')}}"><text class="craft-emoji">{{item.emoji}}</text></view><text class="craft-name">{{item.name}}</text><text class="craft-desc">{{item.desc}}</text></view></block></view></view><view class="detail-bottom-bar safe-bottom"><view data-event-opts="{{[['tap',[['toggleFav',['$event']]]]]}}" class="bottom-btn-icon" bindtap="__e"><text class="bottom-icon">{{isFav?'❤️':'🤍'}}</text><text class="bottom-icon-text">收藏</text></view><view data-event-opts="{{[['tap',[['contactService',['$event']]]]]}}" class="bottom-btn-icon" bindtap="__e"><text class="bottom-icon">💬</text><text class="bottom-icon-text">客服</text></view><view data-event-opts="{{[['tap',[['addToCart',['$event']]]]]}}" class="bottom-btn-cart" bindtap="__e"><text>加入清单</text></view><view data-event-opts="{{[['tap',[['startDesign',['$event']]]]]}}" class="bottom-btn-design" bindtap="__e"><text>立即定制</text></view></view></view>
+<view class="detail-page"><detail-swiper vue-id="bbe3ce40-1" images="{{productImages}}" bind:__l="__l"></detail-swiper><product-info vue-id="bbe3ce40-2" info="{{product}}" bind:__l="__l"></product-info><block wx:if="{{$root.g0}}"><view class="section-divider"></view></block><block wx:if="{{$root.g1}}"><color-selector vue-id="bbe3ce40-3" list="{{colorListWithAvailability}}" selected-id="{{selectedColorId}}" data-event-opts="{{[['^select',[['selectColor']]]]}}" bind:select="__e" bind:__l="__l"></color-selector></block><block wx:if="{{$root.g2}}"><view class="section-divider"></view></block><block wx:if="{{$root.g3}}"><size-selector vue-id="bbe3ce40-4" list="{{sizeListWithAvailability}}" selected="{{selectedSize}}" data-event-opts="{{[['^select',[['selectSize']]]]}}" bind:select="__e" bind:__l="__l"></size-selector></block><block wx:if="{{$root.g4}}"><view class="section-divider"></view></block><block wx:if="{{$root.g5}}"><params-table vue-id="bbe3ce40-5" list="{{productParams}}" bind:__l="__l"></params-table></block><block wx:if="{{$root.g6}}"><view class="section-divider"></view></block><block wx:if="{{$root.g7}}"><size-chart vue-id="bbe3ce40-6" data="{{sizeChart}}" bind:__l="__l"></size-chart></block><block wx:if="{{packaging}}"><view class="section-divider"></view></block><block wx:if="{{packaging}}"><packaging-spec vue-id="bbe3ce40-7" data="{{packaging}}" bind:__l="__l"></packaging-spec></block></view>