cb-biz-ui 1.7.6 → 1.7.8

package/components/cb-goods-card/cb-goods-card.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="goods-card bottom-border" @tap="itemTap">
     <view class="goods-card_image">
-      <ui-lazyload-img
+      <!-- <ui-lazyload-img
         :width="imgWidth"
         :height="imgHeight"
         radius="8rpx"
@@ -11,7 +11,7 @@
         :mode="imageMode"
         :src="goodsImage"
         sizeType="previewImage"
-      ></ui-lazyload-img>
+      ></ui-lazyload-img> -->
       <!-- <view
         :style="{
           width: imgWidth,
@@ -21,77 +21,59 @@
         class="goods-status_error"
         >{{ errStatusText }}</view
       > -->
+      <image
+        :mode="imageMode"
+        :draggable="false"
+        :src="goodsImage"
+        :style="{ width: imgWidth, height: imgHeight, borderRadius: '8rpx' }"
+      />
     </view>
     <view class="goods-card_info">
       <view class="goods-card_info_title">
         <ui-overflow-hidden size="24rpx">
-          <text class="text" :style="{ fontSize: textFontSize.title }"
-            >{{ entity.name }}
+          <text class="text" :style="{ fontSize: textFontSize.title }">{{ entity.name }}
           </text>
         </ui-overflow-hidden>
       </view>
       <view class="rebate-box" v-if="entity.rebateGold">
         <view class="rebate-box_title"> 购买返利 </view>
         <view class="rebate-box_content">
-          <text class="rebate-box_content_text"
-            >约¥{{ entity.rebateMoney || 0 }}</text
-          >
+          <text class="rebate-box_content_text">约¥{{ entity.rebateMoney || 0 }}</text>
           <view class="rebate-box_content_icon">
             (
             <text class="rebate-box_content_icon_text">{{
               entity.rebateGold
             }}</text>
-            <image
-              class="rebate-icon"
-              src="https://shop-cdn.cbyzx.com/shop23n05y18abcd/img/21f285a66453412e8cd0046ed31aa222@.png"
-            />
+            <image class="rebate-icon"
+              src="https://shop-cdn.cbyzx.com/shop23n05y18abcd/img/21f285a66453412e8cd0046ed31aa222@.png" />
             )
           </view>
         </view>
       </view>
       <view class="goods-card_info_sales-specification" v-if="entity.attrValue && entity.attrUnitValue">
-        <text
-          class="goods-card_info_sales-specification_text"
-          :style="{ fontSize: '22rpx' }"
-          >{{ entity.attrValue + '/' + entity.attrUnitValue }}
+        <text class="goods-card_info_sales-specification_text" :style="{ fontSize: '22rpx' }">{{ entity.attrValue + '/'
+          + entity.attrUnitValue }}
         </text>
       </view>
       <view class="goods-card_info_sales-volume" v-if="entity.saleCnt">
-        <text
-          class="goods-card_info_sales-volume_text"
-          :style="{ fontSize: textFontSize.salesVolume }"
-          >销量{{ ` ` }}{{ entity.saleCnt || 0 }}
+        <text class="goods-card_info_sales-volume_text" :style="{ fontSize: textFontSize.salesVolume }">销量{{ ` ` }}{{
+          entity.saleCnt || 0 }}
         </text>
       </view>
-      <view class="goods-card_info_tag" v-if="entity.hasDiscount">
-        <ui-tag
-          type="danger"
-          padding="6rpx 10rpx"
-          :size="textFontSize.tag"
-          plain
-        >
+      <view class="goods-card_info_tag" v-if="entity.hasDiscount || entity.purchaseLimitNum > 0">
+        <ui-tag type="danger" padding="6rpx 10rpx" :size="textFontSize.tag" plain>
           <view class="tag-box">
-            <image
-              class="icon icon_yh"
-              src="https://shop-cdn.cbyzx.com/shop23n05y18abcd/img/5131a04c08bf4c80b73291f82186ce46.png"
-            />
+            <image class="icon icon_yh"
+              src="https://shop-cdn.cbyzx.com/shop23n05y18abcd/img/5131a04c08bf4c80b73291f82186ce46.png" />
 
             <text>{{ getDiscount(entity.discount) }}</text>
           </view>
         </ui-tag>
         <view v-if="entity.purchaseLimitNum > 0" style="margin-left: 10rpx">
-          <ui-tag
-            type="danger"
-            padding="6rpx 10rpx"
-            :size="textFontSize.tag"
-            plain
-          >
+          <ui-tag type="danger" padding="6rpx 10rpx" :size="textFontSize.tag" plain>
             <view class="tag-box">
-              <image
-                class="icon icon_yh"
-                style="width: 28rpx"
-                src="https://shop-cdn.cbyzx.com/shop23n05y18abcd/img/0eb08f3800884600bde0cd670aecc869@.png@.webp"
-              />
+              <image class="icon icon_yh" style="width: 28rpx"
+                src="https://shop-cdn.cbyzx.com/shop23n05y18abcd/img/0eb08f3800884600bde0cd670aecc869@.png@.webp" />
 
               <text>每人限{{ entity.purchaseLimitNum }}份</text>
             </view>
@@ -99,17 +81,10 @@
         </view>
       </view>
       <view class="goods-card_info_price">
-        <text
-          class="goods-card_info_price_preferential-price"
-          :style="{ fontSize: textFontSize.preferentialPrice }"
-        >
+        <text class="goods-card_info_price_preferential-price" :style="{ fontSize: textFontSize.preferentialPrice }">
           ￥{{ price }}
         </text>
-        <text
-          class="goods-card_info_price_price"
-          v-if="entity.hasDiscount"
-          :style="{ fontSize: textFontSize.price }"
-        >
+        <text class="goods-card_info_price_price" v-if="entity.hasDiscount" :style="{ fontSize: textFontSize.price }">
           ￥{{ entity.marketPriceShow }}
         </text>
       </view>
@@ -117,14 +92,10 @@
         <text class="goods-card_info_status_text">{{ errStatusText }}</text>
       </view>
       <view class="goods-card_info_add" v-else>
-        <view
-          @tap.stop="addClick"
-          v-if="!goodsCount"
-          class="goods-card_info_add_icon"
-        >
+        <view @tap.stop="addClick" v-if="!goodsCount" class="goods-card_info_add_icon">
           <ui-icon name="add" :size="19" :color="addBtnBgColor"></ui-icon>
         </view>
-        <view v-else class="number-box" @tap.stop="() => {}">
+        <view v-else class="number-box" @tap.stop="() => { }">
           <!-- <uni-number-box
             :value="goodsCount"
             :min="0"
@@ -137,37 +108,15 @@
             @change="change"
           ></uni-number-box> -->
 
-          <ui-numberbox
-            :value="goodsCount"
-            :min="0"
-            :max="
-              entity.unlimitedInventory
-                ? 99999
-                : entity.inventoryCapacity || 100
-            "
-            @change="change"
-            @triggerMax="triggerMax"
-            :border="true"
-            :width="65"
-            :iconSize="19"
-            :size="22"
-            :step="1"
-            :backgroundColor="textFontSize.numberBoxBg"
-            iconColor="#C7C7CC"
-          ></ui-numberbox>
+          <ui-numberbox :value="goodsCount" :min="0" :max="entity.unlimitedInventory
+            ? 99999
+            : entity.inventoryCapacity || 100
+            " @change="change" @triggerMax="triggerMax" :border="true" :width="65" :iconSize="19" :size="22" :step="1"
+            :backgroundColor="textFontSize.numberBoxBg" iconColor="#C7C7CC"></ui-numberbox>
         </view>
-        <ui-cubic-bezier
-          v-if="bezier"
-          right="0"
-          bottom="0"
-          :backgroundColor="addBtnBgColor"
-          :windowWidth="state.windowWidth"
-          :windowHeight="state.windowHeight"
-          :position="{ right: 110, bottom: 15 }"
-          direction="down"
-          :index="0"
-          @click="addClick"
-        ></ui-cubic-bezier>
+        <ui-cubic-bezier v-if="bezier" right="0" bottom="0" :backgroundColor="addBtnBgColor"
+          :windowWidth="state.windowWidth" :windowHeight="state.windowHeight" :position="{ right: 110, bottom: 15 }"
+          direction="down" :index="0" @click="addClick"></ui-cubic-bezier>
       </view>
     </view>
   </view>
@@ -176,6 +125,7 @@
 <script setup lang="ts">
 import { onMounted, reactive, computed } from 'vue';
 import type { GoodsDataType, changeValueType } from '../interface/types';
+import imageJSsdk from './new-sdk';
 
 interface IProps {
   entity: GoodsDataType;
@@ -186,19 +136,19 @@ interface IProps {
   goodMin?: number;
   imagePlaceholder?: string;
   imageMode?:
-    | 'scaleToFill'
-    | 'aspectFit'
-    | 'aspectFill'
-    | 'widthFix'
-    | 'top'
-    | 'bottom'
-    | 'center'
-    | 'left'
-    | 'right'
-    | 'top left'
-    | 'top right'
-    | 'bottom left'
-    | 'bottom right';
+  | 'scaleToFill'
+  | 'aspectFit'
+  | 'aspectFill'
+  | 'widthFix'
+  | 'top'
+  | 'bottom'
+  | 'center'
+  | 'left'
+  | 'right'
+  | 'top left'
+  | 'top right'
+  | 'bottom left'
+  | 'bottom right';
   textFontSize?: {
     title: string;
     tag: string;
@@ -210,6 +160,7 @@ interface IProps {
   addBtnBgColor: string;
 }
 
+
 const props = withDefaults(defineProps<IProps>(), {
   imgWidth: '225rpx',
   imgHeight: '225rpx',
@@ -260,7 +211,7 @@ const goodsImage = computed(() => {
   if (props?.entity?.image?.includes('static.tanshuapi.com')) {
     return urlConversion(props?.entity?.image || '');
   }
-  return props?.entity?.image || '';
+  return imageJSsdk.getWebpUrl(props?.entity?.image || '', 'previewImage');
 });
 
 function urlConversion(path) {

package/components/cb-goods-card/new-sdk.js

@@ -0,0 +1,126 @@
+class ImageJSsdk {
+  // 支持的图片扩展名
+  imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'];
+
+  // 图片尺寸映射表
+  imageSizeMap = {
+    listImage: '@h240',
+    previewImage: '@h480',
+    detailsImage: ''
+  };
+
+  /**
+   * 手动解析URL为协议和路径（适配微信小程序）
+   * @param url 完整URL字符串
+   * @returns 包含协议和路径的对象，无效URL返回null
+   */
+  parseUrl(url) {
+    if (!url) return null;
+
+    try {
+      // 匹配协议部分 (http:, https: 等)
+      const protocolMatch = url.match(/^([a-zA-Z]+:)/);
+      if (!protocolMatch) {
+        console.error('URL缺少协议部分');
+        return null;
+      }
+      const protocol = protocolMatch[1];
+
+      // 移除协议部分后处理路径
+      const pathStart =
+        url.indexOf('//') === -1 ? protocol.length : url.indexOf('//') + 2;
+      const pathname = url.substring(pathStart);
+
+      return { protocol, pathname };
+    } catch (err) {
+      console.error('URL解析错误:', err);
+      return null;
+    }
+  }
+
+  /**
+   * 判断URL是否为图片
+   * @param urlObj 解析后的URL对象
+   * @returns 是否为图片的布尔值
+   */
+  isImageUrl(urlObj) {
+    if (!urlObj) return false;
+
+    try {
+      const lastDotIndex = urlObj.pathname.lastIndexOf('.');
+      if (lastDotIndex === -1) return false;
+
+      // 提取并转换为小写扩展名
+      const extension = urlObj.pathname.slice(lastDotIndex + 1).toLowerCase();
+      return this.imageExtensions.includes(extension);
+    } catch (err) {
+      console.error('判断图片类型错误:', err);
+      return false;
+    }
+  }
+
+  /**
+   * 获取URL信息
+   * @param urlObj 解析后的URL对象
+   * @returns 包含路径、扩展名和是否为新URL格式的对象
+   */
+  getUrlInfo(urlObj) {
+    // 处理无效URL情况
+    if (!urlObj || !this.isImageUrl(urlObj)) {
+      return { pathname: '', ext: '', isNewUrl: false };
+    }
+
+    const lastDotIndex = urlObj.pathname.lastIndexOf('.');
+    const ext =
+      lastDotIndex !== -1
+        ? urlObj.pathname.slice(lastDotIndex + 1).toLowerCase()
+        : '';
+    const atSymbolCount = (urlObj.pathname.match(/@/g) || []).length;
+
+    return {
+      pathname: urlObj.pathname,
+      ext,
+      isNewUrl: urlObj.pathname.includes('@.') && atSymbolCount === 1
+    };
+  }
+
+  /**
+   * 获取WebP格式的图片URL
+   * @param url 原始图片URL
+   * @param sizeType 尺寸类型，对应imageSizeMap
+   * @returns 处理后的WebP图片URL
+   */
+  getWebpUrl(url, sizeType = 'detailsImage') {
+    if (!url) return '';
+
+    const urlObj = this.parseUrl(url);
+    if (!urlObj) return url;
+
+    const urlInfo = this.getUrlInfo(urlObj);
+    const sizeStr = this.imageSizeMap[sizeType] || '';
+
+    if (!urlInfo.isNewUrl) {
+      return url;
+    }
+    // 处理已为webp格式的URL
+    if (urlInfo.ext === 'webp') {
+      // 避免重复添加尺寸参数
+      return url.includes(sizeStr) ? url : `${url}${sizeStr}.webp`;
+    }
+
+    if (!this.imageExtensions.includes(urlInfo.ext)) {
+      return url;
+    }
+
+    // 处理其他格式转换为webp
+    const hasSize = sizeStr && !url.includes(sizeStr);
+    return hasSize
+      ? `${url}${sizeStr}.webp`
+      : `${url}${sizeStr ? '' : '@'}.webp`;
+  }
+
+}
+
+// 单例导出
+const imageJSsdk = new ImageJSsdk();
+export default imageJSsdk;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cb-biz-ui",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "description": "cb-biz-ui",
   "main": "index.js",
   "keywords": [