vhall-mini-sdk 0.4.1 → 0.4.3

package/dist/components/product/product-card/product-card.js

@@ -0,0 +1,109 @@
+import { appendParamsToPath } from '../../../shared/utils.js';
+
+Component({
+  properties: {
+    // SDK实例
+    sdkInstance: {
+      type: Object,
+      value: null,
+      observer: function(newVal) {
+        if (newVal) {
+          this.initStoreListener();
+          // 初始加载商品数据
+          const productServer = newVal.get('productServer');
+          if (productServer) {
+            productServer.getProductList();
+          }
+        }
+      }
+    }
+  },
+  data: {
+    // 商品列表数据
+    products: []
+  },
+  lifetimes: {
+    attached() {
+    },
+    detached() {
+      // 组件卸载时移除store监听
+      if (this.unsub) {
+        this.unsub();
+      }
+    }
+  },
+  methods: {
+    // 初始化store监听
+    initStoreListener() {
+      if (this.unsub) {
+        this.unsub();
+      }
+      
+      this.unsub = this.properties.sdkInstance.store.get({
+        productList: (val) => {
+          if (val) {
+            // 只显示 push_status == 1 的商品
+            const filteredProducts = val.filter(product => product.push_status === 1);
+            // 最多显示3个商品卡片
+            const products = filteredProducts.slice(0, 3);
+            this.setData({
+              products: products
+            });
+          }
+        }
+      });
+    },
+    // 点击商品卡片（打开详情）
+    onCardClick(e) {
+      const index = parseInt(e.currentTarget.dataset.index);
+      const product = this.data.products[index];
+      if (product) {
+        this.triggerEvent('cardClick', product);
+      }
+    },
+    // 点击购买按钮（走购买逻辑）
+    onBuyClick(e) {
+      const index = parseInt(e.currentTarget.dataset.index);
+      const product = this.data.products[index];
+      if (!product) {
+        console.error('商品数据不存在');
+        return;
+      }
+      
+      // 检查是否已抢光或待开价
+      if (product.sale_status === 0 || product.covered_status === 1) {
+        return;
+      }
+      
+      // 检查 buy_type
+      if (product.buy_type === 4 && product?.mini_program_config?.mini_program_path) {
+        // 跳转到小程序路径
+        const webinarId = this.properties.sdkInstance.store.get('webinarId');
+        console.log("跳转小程序路径:", appendParamsToPath(product?.mini_program_config?.mini_program_path, { webinarId }))
+        wx.navigateTo({
+          url: appendParamsToPath(product?.mini_program_config?.mini_program_path, { webinarId })
+        });
+      } else if (product.buy_type === 1) {
+        // 触发购买事件，由父组件显示下单弹窗
+        this.triggerEvent('buyClick', product);
+      } else {
+        // 提示无法购买
+        wx.showToast({
+          title: '无法购买，请联系主办方',
+          icon: 'none',
+          duration: 2000
+        });
+      }
+    },
+    // 点击关闭按钮（通过改变本地数据关闭卡片）
+    onCloseCard(e) {
+      const productId = e.currentTarget.dataset.productId;
+      
+      // 从本地数据中移除该商品
+      const updatedProducts = this.data.products.filter(product => product.goods_id !== productId);
+      this.setData({
+        products: updatedProducts
+      });
+    }
+  }
+});

package/dist/components/product/product-card/product-card.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/dist/components/product/product-card/product-card.wxml

@@ -0,0 +1,47 @@
+<view class="product-card-container">
+  <block wx:for="{{products}}" wx:key="{{item.goods_id}}">
+    <view
+      class="product-card {{(item.sale_status === 0 || item.covered_status === 1) ? 'product-card-disabled' : ''}} {{products.length > 1 ? 'product-card-small' : ''}}"
+    >
+      <!-- 讲解中徽章 -->
+      <view class="product-card-badge">
+        <image class="product-card-badge-icon" src="https://cnstatic01.e.vhall.com/common-static/saas-wap/static/img/live.b07d13f4.gif" mode="heightFix"></image>
+        讲解中
+      </view>
+      
+      <!-- 关闭按钮 -->
+      <view class="product-card-close" bindtap="onCloseCard" data-product-id="{{item.goods_id}}">x</view>
+      
+      <!-- 商品图片（点击打开详情） -->
+      <view class="product-card-image" bindtap="onCardClick" data-index="{{index}}">
+        <image class="product-card-img"
+          src="{{item.cover_img || 'https://cnstatic01.e.vhall.com/common-static/images/default_avatar.png'}}" 
+          mode="aspectFill"
+        ></image>
+        <!-- 已抢光遮罩层 -->
+        <view wx:if="{{item.sale_status === 0}}" class="product-card-mask">
+          <text class="product-card-mask-text">已抢光</text>
+        </view>
+      </view>
+      
+      <!-- 商品信息 -->
+      <view class="product-card-info">
+        <!-- 商品名称（点击打开详情） -->
+        <text class="product-card-title" bindtap="onCardClick" data-index="{{index}}">{{item.name || '商品名称'}}</text>
+        
+        <!-- 价格和购买按钮 -->
+        <view class="product-card-price-container" bindtap="onBuyClick" data-index="{{index}}">
+
+          <block wx:if="{{item.covered_status === 1}}">
+            <text class="product-card-price">¥？</text>
+          </block>
+          <block wx:else>
+            <text class="product-card-price">¥{{item.discount_price || item.price || 0}}</text>
+          </block>
+          
+          <image class="buy-icon" src="//cnstatic01.e.vhall.com/common-static/saas-wap/static/img/rob.4306d2b5.png" mode="heightFix" ></image>
+        </view>
+      </view>
+    </view>
+  </block>
+</view>

package/dist/components/product/product-card/product-card.wxss

@@ -0,0 +1 @@
+.product-card-container{align-items:flex-end;bottom:180rpx;display:flex;flex-direction:column;gap:16rpx;position:fixed;right:20rpx;z-index:999}.product-card{animation:slideIn .3s ease-out forwards;background-color:#fff;border-radius:12rpx;box-shadow:0 4rpx 12rpx rgba(0,0,0,.15);opacity:0;overflow:hidden;position:relative;transform:translateX(100%);width:240rpx}.product-card:first-child{animation-delay:0s}.product-card:nth-child(2){animation-delay:.1s}.product-card:nth-child(3){animation-delay:.2s}@keyframes slideIn{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}.product-card-badge{background-color:rgba(0,0,0,.6);border-radius:30rpx;color:#fff;font-size:.71rem;left:8rpx;padding:4rpx 20rpx;position:absolute;top:8rpx;z-index:10}.product-card-badge .product-card-badge-icon{height:20rpx}.product-card-close{color:#fff;font-size:1.14rem;padding:0 14rpx;position:absolute;right:0rpx;top:0rpx;z-index:10}.product-card-image{height:240rpx;position:relative;width:100%}.product-card-image .product-card-img{height:100%;object-fit:cover;width:100%}.product-card-info{padding:12rpx}.product-card-title{color:#333;display:block;font-size:.86rem;font-weight:500;margin-bottom:12rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.product-card-price-container{align-items:center;background:#fb2626;border-radius:8rpx;color:#fff;display:flex;height:50rpx;justify-content:space-between;margin-top:12rpx;padding-left:10rpx}.product-card-buy{background-color:#ff4d4f;border-radius:6rpx;color:#fff;cursor:pointer;font-size:.71rem;padding:8rpx 16rpx}.product-card-mask{align-items:center;background-color:rgba(0,0,0,.4);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.product-card-mask-text{border-radius:20rpx;color:#fff;font-size:.86rem;padding:8rpx 16rpx}.product-card-disabled{opacity:.7}.product-card-disabled .product-card-price{color:#fff}.product-card-disabled .product-card-price-container{opacity:.6}.buy-icon{display:block;height:100%}.product-card-small{width:180rpx}.product-card-small .product-card-image{height:180rpx}.product-card-small .product-card-price-container{height:40rpx}.product-card-small .product-card-badge{font-size:.64rem;padding:3rpx 16rpx}.product-card-small .product-card-close{font-size:1rem;padding:0 10rpx}.product-card-small .buy-icon{display:none}

package/dist/components/product/product-detail/product-detail.js

@@ -0,0 +1,127 @@
+import { appendParamsToPath } from '../../../shared/utils.js';
+Component({
+  properties: {
+    // 商品数据
+    product: {
+      type: Object,
+      value: {}
+    },
+    // 是否显示
+    show: {
+      type: Boolean,
+      value: false
+    },
+    // SDK实例
+    sdkInstance: {
+      type: Object,
+      value: null,
+      observer: function(newVal) {
+        if (newVal) {
+          this.initStoreListener();
+        }
+      }
+    }
+  },
+  data: {
+    // 当前显示的图片索引
+    currentImageIndex: 0
+  },
+  lifetimes: {
+    attached() {
+      // 组件挂载时初始化store监听
+      if (this.properties.sdkInstance) {
+        this.initStoreListener();
+      }
+    },
+    detached() {
+      // 组件卸载时移除store监听
+      if (this.unsub) {
+        this.unsub();
+      }
+    }
+  },
+  observers: {
+    // 监听显示状态变化
+    show: function(show) {
+      if (show) {
+        // 重置数据
+        this.setData({
+          currentImageIndex: 0
+        });
+      }
+    }
+  },
+  methods: {
+    // 初始化store监听
+    initStoreListener() {
+      if (this.unsub) {
+        this.unsub();
+      }
+      
+      this.unsub = this.properties.sdkInstance.store.get({
+        productList: (val) => {
+          if (val && this.properties.product && this.properties.product.goods_id) {
+            // 检查当前商品是否在列表中
+            const currentProduct = val.find(item => item.goods_id === this.properties.product.goods_id);
+            if (currentProduct) {
+              // 如果商品在列表中，更新商品数据
+              this.setData({
+                product: currentProduct
+              });
+            }
+          }
+        }
+      });
+    },
+    // 关闭商品详情
+    closeDetail() {
+      this.setData({
+        show: false
+      });
+      this.triggerEvent('close');
+    },
+    // 购买商品
+    buyProduct() {
+      const product = this.data.product;
+      
+      if (!product) {
+        console.error('商品数据不存在');
+        return;
+      }
+      
+      // 检查是否已抢光或待开价
+      if (product.sale_status === 0 || product.covered_status === 1) {
+        return;
+      }
+      
+      // 检查 buy_type
+      if (product.buy_type === 4 && product?.mini_program_config?.mini_program_path) {
+        // 跳转到小程序路径
+        const webinarId = this.properties.sdkInstance.store.get('webinarId');
+        console.log("跳转小程序路径:", appendParamsToPath(product?.mini_program_config?.mini_program_path, { webinarId }))
+        wx.navigateTo({
+          url: appendParamsToPath(product?.mini_program_config?.mini_program_path, { webinarId })
+        });
+        this.closeDetail();
+      } else if (product.buy_type === 1) {
+        // 先关闭详情弹框
+        this.closeDetail();
+        // 触发购买事件，由父组件显示下单弹窗
+        this.triggerEvent('buy', product);
+      } else {
+        // 提示无法购买
+        wx.showToast({
+          title: '无法购买，请联系主办方',
+          icon: 'none',
+          duration: 2000
+        });
+      }
+    },
+    // 图片滑动切换
+    bindchange(e) {
+      this.setData({
+        currentImageIndex: e.detail.current
+      });
+    }
+  }
+});

package/dist/components/product/product-detail/product-detail.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/dist/components/product/product-detail/product-detail.wxml

@@ -0,0 +1,57 @@
+<view wx:if="{{show}}" class="product-detail-container">
+  <view class="product-detail-content">
+    <!-- 图片轮播 -->
+    <view class="product-images">
+      <view class="close-btn" bindtap="closeDetail">×</view>
+      <swiper 
+        class="swiper" 
+        current="{{currentImageIndex}}" 
+        bindchange="bindchange"
+        indicator-dots="false"
+        autoplay="false"
+        circular="true"
+      >
+        <block wx:for="{{product.images}}" wx:key="{{index}}">
+          <swiper-item class="swiper-item">
+            <view class="product-image">
+              <image class="product-detail-img" src="{{item.img_url}}" mode="aspectFill"></image>
+            </view>
+          </swiper-item>
+        </block>
+      </swiper>
+      <view class="image-indicator">
+        {{currentImageIndex + 1}}/{{product.images ? product.images.length : 1}}
+      </view>
+    </view>
+    
+    <!-- 商品信息 -->
+    <view class="product-info">
+      <!-- 价格 -->
+      <block wx:if="{{product.covered_status === 1}}">
+        <text class="covered-price">¥？待开价</text>
+      </block>
+      <block wx:else>
+        <view class="price-container">
+          <text class="discount-price">¥{{product.discount_price || product.price || 0}}</text>
+          <text wx:if="{{product.discount_price && product.price && product.discount_price !== product.price}}" class="original-price">¥{{product.price}}</text>
+        </view>
+      </block>
+      
+      <!-- 商品名称 -->
+      <text class="product-title">{{product.name || '商品名称'}}</text>
+      
+      <!-- 商品描述 -->
+      <text class="product-desc">{{product.description || ''}}</text>
+      
+
+      
+      <!-- 购买按钮 -->
+      <view 
+        class="buy-btn {{product.sale_status === 0 || product.covered_status === 1 ? 'disabled' : ''}}" 
+        bindtap="buyProduct"
+      >
+        {{product.sale_status === 0 ? '已抢光' : product.covered_status === 1 ? '待开价' : '购买'}}
+      </view>
+    </view>
+  </view>
+</view>

package/dist/components/product/product-detail/product-detail.wxss

@@ -0,0 +1 @@
+.product-detail-container{align-items:flex-end;background-color:rgba(0,0,0,.5);bottom:0;display:flex;left:0;position:fixed;right:0;top:0;z-index:9999}.product-detail-content{background-color:#fff;border-radius:20rpx 20rpx 0 0;max-height:90vh;overflow:hidden;width:100%}.product-images{background-color:#f5f5f5;height:750rpx;position:relative}.swiper{height:100%}.swiper-item{align-items:center;display:flex;height:100%;justify-content:center}.product-image{height:100%;width:100%}.product-image .product-detail-img{height:100%;object-fit:contain;width:100%}.image-indicator{border-radius:20rpx;bottom:20rpx;font-size:.86rem;padding:8rpx 16rpx}.close-btn,.image-indicator{background-color:rgba(0,0,0,.6);color:#fff;position:absolute;right:20rpx}.close-btn{align-items:center;border-radius:50%;display:flex;font-size:1.29rem;height:60rpx;justify-content:center;top:20rpx;width:60rpx;z-index:10}.product-info{padding:30rpx}.price-container{align-items:baseline;display:flex;margin-bottom:30rpx}.discount-price{color:#fb2626;font-size:1.43rem;margin-right:20rpx}.original-price{color:#999;font-size:1rem;text-decoration:line-through}.product-title{-webkit-line-clamp:2;color:#333;font-size:1.14rem;font-weight:700;line-height:1.71rem;margin-bottom:20rpx}.product-desc,.product-title{-webkit-box-orient:vertical;display:block;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.product-desc{-webkit-line-clamp:3;color:#666;font-size:1rem;line-height:1.43rem;margin-bottom:30rpx}.covered-price{color:#999;font-size:1.14rem;margin-bottom:30rpx}.buy-btn{align-items:center;background-color:#fb2626;border-radius:45rpx;color:#fff;display:flex;font-size:1.14rem;font-weight:700;height:90rpx;justify-content:center;margin-top:20rpx;width:100%}.buy-btn.disabled{background-color:#ccc;color:#999;cursor:not-allowed}

package/dist/components/product/product-item/product-item.js

@@ -0,0 +1,56 @@
+import { appendParamsToPath } from '../../../shared/utils.js';
+Component({
+  properties: {
+    // 商品数据
+    product: {
+      type: Object,
+      value: {}
+    },
+    // 商品序号
+    index: {
+      type: Number,
+      value: 0
+    },
+    webinarId: {
+      type: String,
+      value: 0
+    }
+  },
+  data: {
+    // 组件内部数据
+  },
+  methods: {
+    // 点击商品
+    onProductClick() {
+      this.triggerEvent('openDetail', this.properties.product);
+    },
+    // 点击购买按钮
+    onBuyClick(e) {
+      const product = this.properties.product;
+      // 检查是否已抢光或待开价
+      if (product.sale_status === 0 || product.covered_status === 1) {
+        return;
+      }
+
+      // 检查 buy_type
+      if (product.buy_type === 4 && product?.mini_program_config?.mini_program_path) {
+        // 跳转到小程序路径
+        const webinarId = this.properties.webinarId;
+        console.log("跳转小程序路径:", appendParamsToPath(product?.mini_program_config?.mini_program_path, { webinarId }))
+        wx.navigateTo({
+          url: appendParamsToPath(product?.mini_program_config?.mini_program_path, { webinarId })
+        });
+      } else if (product.buy_type === 1) {
+        // 触发购买事件，由父组件显示下单弹窗
+        this.triggerEvent('buyClick', product);
+      } else {
+        // 提示无法购买
+        wx.showToast({
+          title: '无法购买，请联系主办方',
+          icon: 'none',
+          duration: 2000
+        });
+      }
+    }
+  }
+});

package/dist/components/product/product-item/product-item.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/dist/components/product/product-item/product-item.wxml

@@ -0,0 +1,35 @@
+<view class="product-item" bindtap="onProductClick">
+  <view class="product-image">
+      <view class="product-index">{{index + 1}}</view>
+      <image src="{{product.cover_img || 'https://cnstatic01.e.vhall.com/common-static/images/default_avatar.png'}}" mode="aspectFill"></image>
+      <view wx:if="{{product.sale_status === 0}}" class="product-mask">
+        <text class="product-mask-text">已抢光</text>
+      </view>
+      <!-- 讲解中标识 -->
+      <view wx:if="{{product.push_status === 1}}" class="product-badge">
+        <image src="https://cnstatic01.e.vhall.com/common-static/saas-wap/static/img/live.b07d13f4.gif" mode="heightFix" style="height: 20rpx; margin-right: 8rpx;"></image>
+        <text class="product-badge-text">讲解中</text>
+      </view>
+    </view>
+  <view class="product-info">
+    <view>
+      <text class="product-name">{{product.name }}</text>
+      <text class="product-desc">{{product.description }}</text>
+    </view>
+    <!-- 价格显示逻辑 -->
+    <block wx:if="{{product.covered_status === 1}}">
+      <text class="covered-price">¥？待开价</text>
+    </block>
+    <block wx:else>
+      <view wx:if="{{product.discount_price && product.price && product.discount_price !== product.price}}" class="price-container">
+        <text class="product-discount-price">¥{{product.discount_price}}</text>
+        <text class="product-original-price">¥{{product.price}}</text>
+      </view>
+      <text wx:else class="product-price">¥{{product.discount_price || product.price || 0}}</text>
+    </block>
+  </view>
+  <!-- 购买按钮 -->
+  <view class="{{['buy-btn',(product.sale_status === 0 || product.covered_status === 1) ? 'disabled' : '']}}" catchtap="onBuyClick">
+    购买
+  </view>
+</view>

package/dist/components/product/product-item/product-item.wxss

@@ -0,0 +1 @@
+.product-image{border-radius:10rpx;height:180rpx;margin-right:20rpx;overflow:hidden;position:relative;width:180rpx}.product-index{border-radius:8rpx 0 8rpx 0;color:#fff;font-size:1rem;height:40rpx;padding:0 16rpx;z-index:1}.product-index,.product-mask{align-items:center;background-color:rgba(0,0,0,.6);display:flex;justify-content:center;left:0;position:absolute;top:0}.product-mask{bottom:0;right:0;z-index:2}.product-mask-text{color:#fff;font-size:1rem}.buy-btn.disabled{cursor:not-allowed;opacity:.6}.covered-price{color:#999;font-size:1rem;margin-bottom:10rpx}.product-image image{height:100%;object-fit:cover;width:100%}.product-info{display:flex;flex:1;flex-direction:column;justify-content:space-between;width:0}.product-name{color:#333;font-size:1.12rem;line-height:1.43rem}.product-desc,.product-name{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}.product-desc{color:#666;font-size:.9rem}.price-container{align-items:baseline;display:flex}.product-discount-price{color:#fb2626;font-size:1.14rem}.product-original-price{color:#999;font-size:.86rem;text-decoration:line-through}.product-price{color:#fb2626;font-size:1.14rem}.buy-btn{background-color:#fb2626;border-radius:40rpx;bottom:20rpx;color:#fff;font-size:.86rem;padding:10rpx 32rpx;position:absolute;right:20rpx}.product-item{border-bottom:1rpx solid #f0f0f0;cursor:pointer;display:flex;padding:20rpx 0;position:relative}.product-item:last-child{border-bottom:none}.product-sales{color:#999;font-size:.86rem}.product-badge{align-items:center;background-color:rgba(0,0,0,.6);bottom:0;color:#fff;display:flex;font-size:.71rem;justify-content:center;left:0;padding:8rpx;position:absolute;right:0;text-align:center;z-index:5}.product-badge-text{display:inline-block}

package/dist/components/product/product-list/product-list.js

@@ -0,0 +1,67 @@
+Component({
+  properties: {
+    sdkInstance: {
+      type: Object,
+      value: null,
+      observer: function(newVal) {
+        if (newVal) {
+          this.initStoreListener();
+        }
+      }
+    },
+  },
+  data: {
+    // 组件内部数据
+    productList: [],
+    webinarId: ''
+  },
+  lifetimes: {
+    created() {
+      // 组件创建时
+    },
+    attached() {
+      // 组件挂载时
+      if (this.properties.sdkInstance) {
+        this.initStoreListener();
+        this.setData({
+          webinarId: this.properties.sdkInstance.store.get('webinarId'),
+        });
+        // // 初始加载商品数据
+        // const productServer = this.properties.sdkInstance.get('productServer');
+        // if (productServer) {
+        //   productServer.getProductList();
+        // }
+      }
+    },
+    detached() {
+      // 组件卸载时
+      if (this.unsub) {
+        this.unsub();
+      }
+    }
+  },
+  methods: {
+    // 初始化store监听
+    initStoreListener() {
+      if (this.unsub) {
+        this.unsub();
+      }
+      
+      this.unsub = this.properties.sdkInstance.store.get({
+        productList: (val) => {
+          if (val) {
+            this.setData({ productList: val });
+          }
+        }
+      });
+    },
+    // 打开商品详情
+    openProductDetail(e) {
+      this.triggerEvent('productClick', e.detail);
+    },
+    // 处理购买点击事件
+    onBuyClick(e) {
+      this.triggerEvent('buyClick', e.detail);
+    },
+  },
+});

package/dist/components/product/product-list/product-list.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "product-item": "../product-item/product-item"
+  }
+}

package/dist/components/product/product-list/product-list.wxml

@@ -0,0 +1,16 @@
+<view class="product-container">
+  <view class="product-list">
+    <view wx:if="{{productList.length === 0}}" class="product-empty">暂无商品</view>
+    <view wx:else>
+      <product-item 
+        webinarId="{{webinarId}}"
+        wx:for="{{productList}}" 
+        wx:key="{{item.id}}" 
+        index="{{index}}"
+        product="{{item}}" 
+        bind:openDetail="openProductDetail"
+        bind:buyClick="onBuyClick"
+      />
+    </view>
+  </view>
+</view>

package/dist/components/product/product-list/product-list.wxss

@@ -0,0 +1 @@
+.product-container{height:100%}.product-list{box-sizing:border-box;height:100%;overflow-y:auto;padding:20rpx;width:100%}.product-empty{color:#999;font-size:1rem;padding:40rpx 0;text-align:center}