jufubao-mall 2.0.1 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-mall",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "private": false,
   "description": "聚福宝商城业务组件插件包",
   "main": "index.js",

package/src/components/JfbMallProductInfo/JfbMallProductInfo.vue

@@ -30,7 +30,8 @@
           @animationfinish="animationfinish"
         >
           <template slot-scope="{ item,index }">
-            <image @click="handlePreview(index)" :src="item.src"></image>
+            <image v-if="item.status===true" @error="item.status=false" @click="handlePreview(index,item)" :src="item.src"></image>
+            <image v-if="item.status===false" :src="errorProductUrl" @click="handlePreview(index,item)"></image>
           </template>
         </xd-swiper>
         <view class="xd-store-product__swiper-tips">{{swiperCurrent + 1}}/{{images.length}}</view>
@@ -483,15 +484,16 @@
         closeMask: true,
         saleWarmPriceColor: '',
         saleWarmPriceFontSize: '',
-        saleWarmActivityPriceColor: '',
-        saleWarmActivityPriceFontSize: '',
+        saleWarmActPriceColor: '',
+        saleWarmActPriceFontSize: '',
         saleIngPriceColor: '',
         saleIngPriceFontSize: '',
         originalIngPriceColor: '',
         originalIngPriceFontSize: '',
         btnHeight: '',
         btnPadding: {},
-        isFirst: true //是否第一次进入
+        isFirst: true, //是否第一次进入
+        errorProductUrl: getServiceUrl('/common/empty/product.png'),
       }
     },
     watch: {
@@ -509,7 +511,7 @@
         if(this.$configProject['isPreview']){
           this.p_getProductItemInfo()
         }
-      }
+      },
     },
     computed: {
       ...mapState({
@@ -667,9 +669,6 @@
       this.is_plus_site = this.projectAttr.headers['X-Site-Group']==="vip";
       this.is_vip = this.getTokenForKey('user_level')&&this.getTokenForKey('user_level')==='VIP'?true:false
       this.$xdRoot.$on('onGetSelectAddress', (address)=>{
-        uni.showToast({
-          title: "onGetSelectAddress"
-        })
         console.log("onGetSelectAddress", address);
       });
     },
@@ -705,7 +704,6 @@
       getElementHeight() {
         // 创建选择器查询对象
         const query = uni.createSelectorQuery().in(this);
-        
         // 选择需要查询的元素（使用类名、ID或标签）
         query.select('#prod_bottom_body').boundingClientRect(data => {
           if (data) {
@@ -758,7 +756,7 @@
         this.smsStatus = gCPVal(value, "smsStatus", 'warm');
         this.saleWarmPriceColor = gCPVal(value, 'saleWarmPriceColor', '#ffffff', { sKey: 'saleWarmStyleStatus', fields: ['saleWarmPriceColor'] });
         this.saleWarmPriceFontSize = gCPVal(value, 'saleWarmPriceFontSize', '48', { sKey: 'saleWarmStyleStatus', fields: ['saleWarmPriceFontSize'] });
-        this.saleWarmActPriceColor = gCPVal(value, 'saleWarmActPriceColor', '#ffeb3b', { sKey: 'saleWarmActStyleStatus', fields: ['saleWarmActivityPriceColor'] });
+        this.saleWarmActPriceColor = gCPVal(value, 'saleWarmActPriceColor', '#ffeb3b', { sKey: 'saleWarmActStyleStatus', fields: ['saleWarmActPriceColor'] });
         this.saleWarmActPriceFontSize = gCPVal(value, 'saleWarmActPriceFontSize', '24', { sKey: 'saleWarmActStyleStatus', fields: ['saleWarmActPriceFontSize'] });
         this.saleIngPriceColor = gCPVal(value, 'saleIngPriceColor', '#FFEF5E', { sKey: 'saleIngStyleStatus', fields: ['saleIngPriceColor'] });
         this.saleIngPriceFontSize = gCPVal(value, 'saleIngPriceFontSize', '48', { sKey: 'saleIngStyleStatus', fields: ['saleIngPriceFontSize'] });
@@ -888,6 +886,7 @@
           }
           this.images = images.map(img => {
             img['src'] = getServiceUrl(img.src);
+            img['status'] = true;
             return img;
           });
           this.parameters = parameters;
@@ -1017,14 +1016,18 @@
       },
 
       // 实现轮播图的预览效果
-      handlePreview(i) {
+      handlePreview(i,item) {
         // 调用 uni.previewImage() 方法预览图片
+        let images = this.images.map(item => item.src)
+        if (!item.status) {
+          images = [this.errorProductUrl]
+        }
         uni.previewImage({
           // 预览时，默认显示图片的索引
           current: i,
           indicator: "number",
           // 所有图片 url 路径的数组  //这里直接把图片列表的数组放入即可
-          urls: this.images.map(item => item.src)
+          urls: images
         })
       },
       handleToMapArea(){
@@ -1103,10 +1106,6 @@
         }).then(res => {
           this.$xdHideLoading();
           this.buyButton = res;
-          // 页面初次渲染完成后调用
-          this.$nextTick(() => {
-            this.getElementHeight()
-          });
           if(this.initShowCart){
             if(this.btnBuyNow && this.btnBuyNow.enabled){
               this.addCartAndBuy();
@@ -1114,6 +1113,13 @@
               this.addCart();
             }
           }
+          // 页面初次渲染完成后调用
+          setTimeout(() => {
+             this.$nextTick(() => {
+              this.getElementHeight()
+            });
+          },50)
+         
         }).catch(err => {
           this.$xdHideLoading();
           this.$xdLog.catch(err);
@@ -1551,7 +1557,7 @@
 
             .label {
               font-weight: 500;
-              min-width: 112rpx;
+              min-width: 130rpx;
               max-width: 200rpx;
               font-size: 28rpx;
               color: #888888;
@@ -1567,7 +1573,7 @@
               color: #333;
               line-height: 48rpx;
               flex-wrap: wrap;
-              padding-left: 26rpx;
+              padding-left: 8rpx;
             }
           }
         }
@@ -1622,6 +1628,7 @@
           &>view:nth-child(2) {
             font-size: 24rpx;
             font-weight: 500;
+            padding-bottom: 8rpx;
           }
         }
 
@@ -1682,7 +1689,7 @@
             line-height: 48rpx;
             margin: 10rpx 0;
             .label{
-              min-width: 112rpx;
+              min-width: 130rpx;
               max-width: 200rpx;
               font-size: 28rpx;
               color: #888888;
@@ -1692,7 +1699,7 @@
             .value{
               font-weight: 400;
               flex: 1;
-              padding-left: 26rpx;
+              padding-left: 8rpx;
               min-width: 0;
               font-size: 28rpx;
               color: #333333;
@@ -1723,7 +1730,7 @@
             color: #333;
             margin: 10rpx 0;
             .label{
-              min-width: 112rpx;
+              min-width: 130rpx;
               max-width: 200rpx;
               font-size: 28rpx;
               color: #888888;
@@ -1732,7 +1739,7 @@
             }
             .content {
               flex: 1;
-              padding-left: 26rpx;
+              padding-left: 8rpx;
               min-width: 0;
               &-item{
                 display: flex;
@@ -1816,7 +1823,7 @@
             // padding: 0rpx 16rpx;
             margin: 0;
             .label{
-              min-width: 112rpx;
+              min-width: 130rpx;
               max-width: 200rpx;
               color: #888888;
               font-size: 28rpx;
@@ -1842,7 +1849,7 @@
               // }
             }
             .value{
-              padding: 8rpx 0 8rpx 26rpx;
+              padding: 8rpx 0 8rpx 8rpx;
               color: #333333;
               font-size: 28rpx;
               font-weight: 400;

package/src/components/JfbMallProductInfo/XdSku.vue

@@ -1,5 +1,13 @@
 <template>
-  <view class="xd-product-sku">
+  <view class="xd-product-sku" :style="{
+    '--counter-border': '1px solid #f2f2f2',
+    '--counter-radius': '0px',
+    '--counter-btn-bgcolor': '#f8f8f8',
+    '--counter-disabled-bg-color': '#f8f8f8',
+    '--counter-btn-text-color': '#333',
+    '--counter-btn-text-disabled-color': '#999',
+    '--counter-text-color': '#000000',
+  }">
     <view class="drawer_prod_wrap">
       <view id="prod_wrap" class="prod_wrap">
         <image class="sku_img" :src="skuImage" />
@@ -10,15 +18,6 @@
           >
           <view
             class="prod_number_limit"
-            :style="{
-              '--counter-border': '1px solid #f2f2f2',
-              '--counter-radius': '0px',
-              '--counter-btn-bgcolor': '#f8f8f8',
-              '--counter-disabled-bg-color': '#f8f8f8',
-              '--counter-btn-text-color': '#333',
-              '--counter-btn-text-disabled-color': '#999',
-              '--counter-text-color': '#000000',
-            }"
           >
             <xd-number
               class="prod_number"
@@ -103,7 +102,7 @@
                   },
                 ]"
               >
-                <view class="overflow">{{ value }}</view>
+                <view :class="{name: sku.images.length,no_image_name:!sku.images.length}">{{ value }}</view>
               </view>
             </view>
           </view>
@@ -204,6 +203,9 @@ import {
   getParentsStyles, //获取页面风格列表
 } from "@/utils/xd.base";
 export default {
+  // #ifdef MP-WEIXIN
+  options: { styleIsolation: 'shared' },
+  // #endif
   name: "XdProductSku",
   components: {
     XdNumber,
@@ -732,6 +734,14 @@ export default {
               color: var(--main-color) !important;
               background-color: var(--bg-color) !important;
             }
+            .name {
+              width: 80%;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              padding: 0 10rpx;
+              margin: 0 auto;
+            }
           }
           &.horizontal {
             flex-direction: row;
@@ -780,18 +790,20 @@ export default {
               color: var(--main-color) !important;
               background-color: var(--bg-color) !important;
             }
+            .name {
+              width: 95%;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              padding-right:10rpx;
+            }
           }
-          .overflow {
-            text-overflow: -o-ellipsis-lastline;
-            overflow: hidden; //溢出内容隐藏
-            text-overflow: ellipsis; //文本溢出部分用省略号表示
-            display: -webkit-box; //特别显示模式
-            -webkit-line-clamp: 1; //行数
-            line-clamp: 2;
-            -webkit-box-orient: vertical; //盒子中内容竖直排列
-            width: 100%;
-            word-break: break-all;
-          }
+        }
+        .no_image_name {
+          max-width: 120px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
 
         &.attr-active {

package/src/components/JfbMallProductInfo/XdSkuJd.vue

@@ -1,5 +1,15 @@
 <template>
-  <view class="xd-product-sku-jd">
+  <view class="xd-product-sku-jd" 
+        :style="{
+          '--counter-border': '1px solid #f2f2f2',
+          '--counter-radius': '0px',
+          '--counter-btn-bgcolor': '#f8f8f8',
+          '--counter-disabled-bg-color': '#f8f8f8',
+          '--counter-btn-text-color': '#333',
+          '--counter-btn-text-disabled-color': '#999',
+          '--counter-text-color': '#000000',
+        }"
+    >
     <view class="drawer_prod_wrap">
       <view id="prod_wrap" class="prod_wrap">
         <image class="sku_img" :src="baseInfo.thumb"/>
@@ -17,15 +27,6 @@
           <view v-if="choseSkuName && isAllChecked" class="_specs">已选：{{choseSkuName}}</view>
           <view
             class="prod_number_limit"
-            :style="{
-              '--counter-border': '1px solid #f2f2f2',
-              '--counter-radius': '0px',
-              '--counter-btn-bgcolor': '#f8f8f8',
-              '--counter-disabled-bg-color': '#f8f8f8',
-              '--counter-btn-text-color': '#333',
-              '--counter-btn-text-disabled-color': '#999',
-              '--counter-text-color': '#000000',
-            }"
           >
             <xd-number
               class="prod_number"
@@ -92,7 +93,7 @@
                     disabled_sku_name: !checkHasProduct(i, ii),
                   },
                 ]">
-                  <view class="overflow">{{ attr.value }}</view>
+                  <view :class="{name: attr.image,no_image_name:!attr.image}">{{ attr.value }}</view>
                 </view>
             </view>
           </view>
@@ -170,6 +171,9 @@ import {
 } from '@/utils/xd.base';
 import Color from "color"
 export default {
+  // #ifdef MP-WEIXIN
+  options: { styleIsolation: 'shared' },
+  // #endif
   name: "XdProductSku",
   components: {
     XdNumber,
@@ -671,6 +675,14 @@ export default {
               color: var(--main-color) !important;
               background-color: var(--bg-color) !important;
             }
+            .name {
+              width: 80%;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              padding: 0 10rpx;
+              margin: 0 auto;
+            }
           }
           &.horizontal{
             flex-direction: row;
@@ -719,25 +731,21 @@ export default {
               color: var(--main-color) !important;
               background-color: var(--bg-color) !important;
             }
-          }
-          // .sku_name{
-          //   width: 200rpx;
-          //   overflow: hidden;
-          //   text-overflow: ellipsis;
-          // }
-          .overflow {
-            text-overflow: -o-ellipsis-lastline;
-            overflow: hidden; //溢出内容隐藏
-            text-overflow: ellipsis; //文本溢出部分用省略号表示
-            display: -webkit-box; //特别显示模式
-            -webkit-line-clamp: 1; //行数
-            line-clamp: 2;
-            -webkit-box-orient: vertical; //盒子中内容竖直排列
-            width: 100%;
-            word-break: break-all;
+            .name {
+              width: 80%;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              padding-right:10rpx;
+            }
           }
         }
-
+        .no_image_name {
+          max-width: 120px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
         &.attr-active{
           background-color: var(--bg-color);
           color: var(--main-color);