feat: 企微获客助手小程序 - 首页商品详情+遮蔽层跳转+工具箱

2026-07-31 17:37:06 +08:00
commit 84d543eb14
46 changed files with 25402 additions and 0 deletions
@@ -0,0 +1,165 @@
+<!-- 全屏遮蔽层 -->
+<view class="overlay-mask" catchtouchmove="preventTouchMove" bindtap="onOverlayTap">
+  <view class="overlay-image-wrap">
+    <image class="overlay-image" src="./assets/get.png" mode="aspectFit"></image>
+    <view class="overlay-blur-top"></view>
+  </view>
+</view>
+
+<!-- 淘宝风格商品详情页 -->
+<!-- 商品主图 -->
+<view class="product-image-wrap">
+  <image class="product-image" src="./assets/test.png" mode="aspectFill"></image>
+</view>
+
+<!-- 商品信息区域 -->
+<scroll-view class="page-scroll" scroll-y enhanced show-scrollbar="{{false}}">
+  <!-- 价格区域 -->
+  <view class="price-section">
+    <view class="price-row">
+      <text class="price-symbol">¥</text>
+      <text class="price-value">299</text>
+      <text class="price-decimal">.00</text>
+      <text class="price-original">¥599.00</text>
+      <view class="discount-tag">限时5折</view>
+    </view>
+    <view class="promo-row">
+      <view class="promo-tag">跨店满减</view>
+      <text class="promo-text">每满200减30</text>
+    </view>
+  </view>
+
+  <!-- 商品标题 -->
+  <view class="title-section">
+    <view class="title-tags">
+      <text class="tag tag-brand">品牌</text>
+      <text class="tag tag-guarantee">正品保证</text>
+      <text class="tag tag-shipping">24h发货</text>
+    </view>
+    <text class="product-title">2024新款男士轻薄羽绒服 短款立领保暖外套 秋冬季百搭休闲潮牌上衣 加厚防风防水</text>
+  </view>
+
+  <!-- 优惠与配送 -->
+  <view class="info-section">
+    <view class="info-item">
+      <text class="info-label">促销</text>
+      <view class="info-content">
+        <view class="coupon-row">
+          <view class="coupon-tag">满299减20</view>
+          <view class="coupon-tag">满499减50</view>
+          <view class="coupon-tag">店铺券</view>
+        </view>
+      </view>
+      <text class="info-arrow">›</text>
+    </view>
+    <view class="info-item">
+      <text class="info-label">配送</text>
+      <view class="info-content">
+        <text class="info-text">广东广州  |  快递: 免运费</text>
+      </view>
+      <text class="info-arrow">›</text>
+    </view>
+    <view class="info-item">
+      <text class="info-label">服务</text>
+      <view class="info-content">
+        <text class="info-text">7天无理由 · 运费险 · 极速退款</text>
+      </view>
+      <text class="info-arrow">›</text>
+    </view>
+  </view>
+
+  <!-- SKU选择区域 -->
+  <view class="sku-section">
+    <view class="sku-item">
+      <text class="sku-label">颜色分类</text>
+      <view class="sku-options">
+        <view class="sku-option sku-option-selected">黑色</view>
+        <view class="sku-option">深灰色</view>
+        <view class="sku-option">卡其色</view>
+        <view class="sku-option">军绿色</view>
+      </view>
+    </view>
+    <view class="sku-item">
+      <text class="sku-label">尺码</text>
+      <view class="sku-options">
+        <view class="sku-option sku-option-selected">M</view>
+        <view class="sku-option">L</view>
+        <view class="sku-option">XL</view>
+        <view class="sku-option">2XL</view>
+        <view class="sku-option">3XL</view>
+      </view>
+    </view>
+    <view class="sku-item">
+      <text class="sku-label">数量</text>
+      <view class="quantity-selector">
+        <text class="qty-btn">−</text>
+        <text class="qty-value">1</text>
+        <text class="qty-btn">+</text>
+      </view>
+    </view>
+  </view>
+
+  <!-- 店铺信息 -->
+  <view class="shop-section">
+    <view class="shop-info">
+      <image class="shop-logo" src="https://img.alicdn.com/imgextra/i3/O1CN01Wr5Kxq1NqSGZXMKBf_!!6000000001621-2-tps-120-120.png" mode="aspectFill"></image>
+      <view class="shop-detail">
+        <view class="shop-name-row">
+          <text class="shop-name">潮流前线官方旗舰店</text>
+          <view class="shop-badge">品牌店</view>
+        </view>
+        <view class="shop-stats">
+          <text class="shop-stat">描述 4.8</text>
+          <text class="shop-stat">服务 4.8</text>
+          <text class="shop-stat">物流 4.9</text>
+        </view>
+      </view>
+    </view>
+    <view class="shop-actions">
+      <view class="shop-btn shop-btn-all">全部宝贝</view>
+      <view class="shop-btn shop-btn-follow">关注店铺</view>
+      <view class="shop-btn shop-btn-enter">进店逛逛</view>
+    </view>
+  </view>
+
+  <!-- 商品详情 Tab -->
+  <view class="detail-tabs">
+    <view class="detail-tab detail-tab-active">商品详情</view>
+    <view class="detail-tab">用户评价(1280)</view>
+    <view class="detail-tab">问大家</view>
+  </view>
+
+  <!-- 商品详情图片 -->
+  <view class="detail-images">
+    <image class="detail-img" src="https://via.placeholder.com/750x800/FFF5F0/333333?text=产品细节图1" mode="widthFix"></image>
+    <image class="detail-img" src="https://via.placeholder.com/750x600/FFF5F0/333333?text=产品细节图2" mode="widthFix"></image>
+    <image class="detail-img" src="https://via.placeholder.com/750x900/FFF5F0/333333?text=产品细节图3" mode="widthFix"></image>
+    <image class="detail-img" src="https://via.placeholder.com/750x700/FFF5F0/333333?text=尺码表" mode="widthFix"></image>
+    <image class="detail-img" src="https://via.placeholder.com/750x800/FFF5F0/333333?text=产品实拍图4" mode="widthFix"></image>
+  </view>
+
+  <!-- 底部占位 -->
+  <view class="bottom-placeholder"></view>
+</scroll-view>
+
+<!-- 底部操作栏 -->
+<view class="bottom-bar">
+  <view class="bar-icons">
+    <view class="bar-icon">
+      <text class="bar-icon-symbol">♡</text>
+      <text class="bar-icon-label">收藏</text>
+    </view>
+    <view class="bar-icon">
+      <text class="bar-icon-symbol">◐</text>
+      <text class="bar-icon-label">购物车</text>
+    </view>
+    <view class="bar-icon">
+      <text class="bar-icon-symbol">◉</text>
+      <text class="bar-icon-label">店铺</text>
+    </view>
+  </view>
+  <view class="bar-buttons">
+    <view class="bar-btn bar-btn-cart">加入购物车</view>
+    <view class="bar-btn bar-btn-buy">立即购买</view>
+  </view>
+</view>