jufubao-food 1.0.15-beta3 → 1.0.15-beta4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-food",
-  "version": "1.0.15-beta3",
+  "version": "1.0.15-beta4",
   "private": false,
   "description": "聚福宝业务组件餐饮插件包",
   "main": "index.js",

package/src/components/JfbFoodProductInfo/JfbFoodProductInfo.vue

@@ -31,23 +31,25 @@
         </xd-swiper>
         <view class="xd-store-product__swiper-tips">{{swiperCurrent + 1}}/{{images.length}}</view>
       </view>
-
-      <view class="prod_title_number">
-        <view class="prod_title">{{ baseInfo.product_name }}</view>
-        <view class="prod_number">
-          <xd-number v-model="number" :min="1" :max="99" circle></xd-number>
+      <view :style="[contBodyStyleComp]">
+        <view class="prod_title_number">
+          <view class="prod_title">{{ baseInfo.product_name }}</view>
+          <view class="prod_number">
+            <xd-number v-model="number" :min="1" :max="99" circle></xd-number>
+          </view>
         </view>
-      </view>
 
-      <view v-if="skus.length" class="sku_wrap">
-        <!-- <xd-sku @change="handleSkuChange"></xd-sku> -->
-        <xd-sku :skus="skus" @change="handleSkuChange"></xd-sku>
-      </view>
+        <view v-if="skus.length" class="sku_wrap">
+          <!-- <xd-sku @change="handleSkuChange"></xd-sku> -->
+          <xd-sku :skus="skus" @change="handleSkuChange"></xd-sku>
+        </view>
 
-      <view v-if="spuList.length" class="attr_wrap">
-        <!-- <xd-spu ref="mySpu" @change="handleSpuChange"></xd-spu> -->
-        <xd-spu ref="mySpu" :list="spuList" @change="handleSpuChange"></xd-spu>
+        <view v-if="spuList.length" class="attr_wrap">
+          <!-- <xd-spu ref="mySpu" @change="handleSpuChange"></xd-spu> -->
+          <xd-spu ref="mySpu" :list="spuList" @change="handleSpuChange"></xd-spu>
+        </view>
       </view>
+      
 
       <view style="height: 120rpx;"></view>
       <view class="fixed_bottom" :style="prod_bottom">
@@ -125,8 +127,10 @@
 
         is_plus_site: false,
         //面板
-        isShowDiscount: "Y",  //是否展示划线价
+        showDiscount: "Y",  //是否展示划线价
         differ: 1,  //原价与现价的差值
+        bodyPadding: "",
+        contentColor: "",
 
         shopBtnBgColor: "",
         bottomBtnRadius: "100",
@@ -150,6 +154,7 @@
           '--main-color': this.mainColor,
           '--bg-color': this.mainColorAlpha,
           '--bg-main-color': this.mainColorAlpha,
+          backgroundColor: this.contentColor
         }
       },
       prod_bottom() {
@@ -185,6 +190,11 @@
           item.p = p;
           return item;
         })
+      },
+      contBodyStyleComp(){
+        return {
+          padding: this.getMarginAndPadding(this.bodyPadding, 0)
+        }
       }
     },
     watch: {
@@ -214,6 +224,11 @@
       init(container) {
         this.foodProductListPath = getContainerPropsValue(container, 'content.foodProductListPath', {value: ""}).value;
         this.shopBtnBgColor = gCPVal(container, 'shopBtnBgColor', this.mainColor, {sKey:'cartBtnStatus',fields:['shopBtnBgColor']});
+        this.showDiscount = gCPVal(container, 'showDiscount', "Y");
+        this.differ = gCPVal(container, 'differ', 1);
+        this.bodyPadding = gCPVal(container, 'bodyPadding', [16], {sKey:'bodyPaddingStatus',fields:['bodyPadding'], isPMR:true});
+        this.contentColor = gCPVal(container,'contentColor', '#f8f8f8', {sKey:'contentColorStatus',fields:['contentColor']});
+        console.log("this.bodyPadding", this.bodyPadding)
       },
       handleSkuChange(sku){
         console.log('handleSkuChange', sku);
@@ -241,7 +256,7 @@
             category_id: this.category_id,
             consume_mode: this.consume_mode,
             shop_id: this.shop_id,
-            is_show_uprice: this.isShowDiscount !== 'Y' ? 0 : this.multiply(this.differ),
+            is_show_uprice: this.showDiscount !== 'Y' ? 0 : this.multiply(this.differ),
           }
         }).then(res => {
           this.$xdHideLoading()
@@ -333,7 +348,6 @@
 
   .jfb-food-product-info {
     &__body{
-      background-color: #f8f8f8;
       .xd-store-product {
         color: #333;
         &__swiper {
@@ -358,7 +372,7 @@
       .prod_title_number{
         background-color: #FFFFFF;
         padding: 24rpx 32rpx;
-        margin: 20rpx;
+        margin: 20rpx 0;
         border-radius: 16rpx;
         display: flex;
         align-items: center;
@@ -378,13 +392,13 @@
       .sku_wrap{
         background-color: #FFFFFF;
         padding: 24rpx;
-        margin: 16rpx;
+        margin: 16rpx 0;
         border-radius: 16rpx;
       }
       .attr_wrap{
         background-color: #FFFFFF;
         padding: 24rpx;
-        margin: 16rpx;
+        margin: 16rpx 0;
         border-radius: 16rpx;
       }
       .fixed_bottom{

package/src/components/JfbFoodProductInfo/XdSpu.vue

@@ -213,7 +213,7 @@ export default {
       margin-bottom: 20rpx;
       flex-wrap: wrap;
       &.img_list{
-        justify-content: space-between;
+        // justify-content: space-between;
       }
 
       .specs_img_item{
@@ -229,6 +229,10 @@ export default {
         position: relative;
         margin-bottom: 16rpx;
         overflow: hidden;
+        margin-right: 16rpx;
+        &:nth-of-type(3n){
+          margin-right: 0;
+        }
 
         &.active{
           border-color: var(--main-color);

package/src/components/JfbFoodProductInfo/cusAttr/content.js

@@ -36,5 +36,40 @@ export default function (data, gValue,gColor,oldData){
           .catch();
       }
     },
+    {
+      ele: 'title',
+      label: '展示内容',
+      size: 'small',
+      groupKey:'content',
+    },
+    {
+      label: '划线价',
+      ele: 'xd-cus-switch',
+      valueKey: 'showDiscount',
+      value: dataVal({ data, key: 'showDiscount', dValue: 'Y', gValue }),
+      className: 'input100',
+      labelInline: true,
+      groupKey: 'content',
+      setting: {
+        tips: ['显示', '不显示'],
+        isBackType: 'string'
+      },
+    },
+    { ele: 'group_start' },
+    {
+      label: '差值',
+      ele: 'el-input',
+      type: 'number',
+      valueKey: 'differ',
+      labelInline: true,
+      value: dataVal({ data, key: 'differ', dValue: '', gValue }),
+      hidden: data.showDiscount !== 'Y',
+      groupKey: 'content',
+      placeholder: '价差，默认值：1',
+      className: 'input80',
+      notice: '划线价取市场价，市场价-售价差值大于等于设置值时展示',
+      inline: false
+    },
+    { ele: 'group_end' },
   ]
 }

package/src/components/JfbFoodProductInfo/cusAttr/style.js

@@ -21,11 +21,11 @@ export default function (data={},gValue={},gColor={},oldData) {
       groupKey:'style',
     },
     {
-      label: '外边距',
+      label: '内容区边距',
       ele: 'xd-radio',
       groupKey: 'style',
       valueKey: 'bodyPaddingStatus',
-      value: statusDataVal({data, key:'bodyPaddingStatus', fields:['bodyPadding'],gValue}),
+      value: statusDataVal({data, key:'bodyPaddingStatus', dValue: 'D', gValue}),
       labelInline:true,
       list: [
         {label: '默认', value: 'D'},
@@ -42,7 +42,7 @@ export default function (data={},gValue={},gColor={},oldData) {
       value: dataVal({
         data,
         key:'bodyPadding',
-        dValue:[0],
+        dValue:[16],
         gValue,
         isPM: true,
         isCPM: true,
@@ -52,5 +52,34 @@ export default function (data={},gValue={},gColor={},oldData) {
       },
     },
     {ele: 'group_end'},
+
+    {
+      label: '背景色',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'contentColorStatus',
+      value: statusDataVal({data, key: 'contentColorStatus', fields:['contentColor'], gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: '',
+      ele: 'xd-color',
+      groupKey:'style',
+      valueKey: 'contentColor',
+      value: dataVal({data, key:'contentColor', dValue: '#f8f8f8', gValue}),
+      hidden: !statusShow({data, key: 'contentColorStatus', fields:['contentColor'], gValue}),
+      placeholder: '请选择背景颜色',
+      classNmae: 'input80',
+      setting: {
+        showAlpha: true
+      },
+      inline: false,
+    },
+    {ele: 'group_end'},
   ]
 }

package/src/components/JfbFoodProductList/JfbFoodProductList.vue

@@ -43,6 +43,7 @@
               >
                 {{ item.category_name }}
                 <view v-if="item.cart_num" class="cate_num">{{ item.cart_num }}</view>
+                <view v-if="index === cateIndex" :style="[navActiveBarStyle]" class="nav_active_bar"></view>
               </view>
               <view style="height: 80rpx;"></view>
             </scroll-view>
@@ -80,15 +81,16 @@
                             <view style="display:flex;align-items:center">
                               <CusPrice :isPlus="is_plus_site" :isShowIcon="false" salePriceFontSize="32" :showPrice="item.show_prices"></CusPrice>
                             </view>
-                            <view class="p_r" style="font-size: 28rpx;color:#999" @click.stop>
-                              <view v-if="item.has_choose" class="chose_spu" @click="handleChoseProduct(item)">
-                                选规格
+                            <view v-if="isAddCart==='Y'" class="p_r" style="font-size: 28rpx;color:#999" @click.stop>
+                              <view v-if="item.has_choose" class="chose_spu" :style="[choseSpuStyleComp]" @click="handleChoseProduct(item)">
+                                <!-- 选规格  -->
+                                {{ cartName }}
                                 <view v-if="item.num" class="cart_edg">{{ item.num }}</view>
                               </view>
                               <view v-else>
-                                <xd-number v-if="item.num" v-model="item.num" circle @change="val => handleCartNumChange(val, item)"></xd-number>
+                                <xd-number v-if="item.num" v-model="item.num" circle :pointCusStyle="pointCusStyle" @change="val => handleCartNumChange(val, item)"></xd-number>
                                 <!-- <xd-font-icon v-else icon="iconaddcart" :color="mainColor" size="46"></xd-font-icon> -->
-                                <view class="icon_add_cart" v-else @click="handleChoseProduct(item)">+</view>
+                                <view class="icon_add_cart" :style="[choseSpuStyleComp]" v-else @click="handleChoseProduct(item)">+</view>
                               </view>
                             </view>
                           </view>
@@ -289,6 +291,10 @@
         //导航
         titleBgcColor: '#FFFFFF',
         titleStyle: {},
+        navStyle: "",
+        isAddCart: "Y",
+        cartStyle: "",
+        cartName: "",
 
         //面板
         showDiscount: "Y",  //是否展示划线价
@@ -351,6 +357,54 @@
 
         }
       },
+      navActiveBarStyle(){
+        if(this.navStyle === 'long'){
+          return {
+            top: 0,
+            bottom: 0
+          }
+        }else if(this.navStyle === 'no'){
+          return {
+            display: 'none'
+          }
+        }
+      },
+      choseSpuStyleComp(){
+        if(this.cartStyle === 'btn_cartCFull'){}
+        else if(this.cartStyle === 'btn_cartCPlain'){
+          return {
+            border: '1px solid ' + this.mainColor,
+            color: this.mainColor,
+            backgroundColor: 'transparent'
+          }
+        }
+        else if(this.cartStyle === 'btn_cartFFull'){
+          return {
+            borderRadius: 0,
+          }
+        }else if(this.cartStyle === 'btn_cartFPlain'){
+          return {
+            border: '1px solid ' + this.mainColor,
+            color: this.mainColor,
+            backgroundColor: 'transparent',
+            borderRadius: 0,
+          }
+        }
+      },
+      pointCusStyle(){
+        if(this.cartStyle === 'btn_cartFFull'){
+          return {
+            borderRadius: 0,
+          }
+        }else if(this.cartStyle === 'btn_cartFPlain'){
+          return {
+            // border: '1px solid ' + this.mainColor,
+            // color: this.mainColor,
+            // backgroundColor: 'transparent',
+            borderRadius: 0,
+          }
+        }
+      },
       fixed_bottom() {
         return this.fixedStyle({height: 30, zIndex: 111});
       },
@@ -435,7 +489,11 @@
           }],
           {sKey:'titleStyleStatus',fields:['titleStyle'],isMerge: true}
         );
-        console.log("this.z titleStyle", this.titleStyle)
+        this.navStyle = gCPVal(container, 'navStyle', 'short');
+        this.isAddCart = gCPVal(container, 'isAddCart', 'Y');
+        this.cartStyle = gCPVal(container, 'cartStyle', 'btn_cartCFull')
+        this.cartName = gCPVal(container, 'cartName', '选规格');
+        console.log("this.z cartStyle", this.cartStyle)
 
         //预览mock数据
         if (this.$configProject['isPreview']) {
@@ -1045,6 +1103,15 @@
             padding: 24rpx;
             text-align: center;
             position: relative;
+            .nav_active_bar{
+              position: absolute;
+              left: 0;
+              top: 28rpx;
+              bottom: 28rpx;
+              width: 12rpx;
+              background-color: var(--main-color);
+              border-radius: 0 4rpx 4rpx 0;
+            }
 
             .cate_num{
               position: absolute;
@@ -1062,15 +1129,16 @@
               // color: var(--main-color);
               font-weight: 500;
               background-color: #FFFFFF;
-              &::after{
-                content: '';
-                position: absolute;
-                left: 0;
-                top: 28rpx;
-                bottom: 28rpx;
-                width: 12rpx;
-                background-color: var(--main-color);
-              }
+              // &::after{
+              //   content: '';
+              //   position: absolute;
+              //   left: 0;
+              //   top: 28rpx;
+              //   bottom: 28rpx;
+              //   width: 12rpx;
+              //   background-color: var(--main-color);
+              //   border-radius: 0 4rpx 4rpx 0;
+              // }
             }
           }
         }

package/src/components/JfbFoodProductList/cusAttr/content.js

@@ -80,12 +80,106 @@ export default function (data, gValue,gColor,oldData){
           });
       },
     },
+    {
+      label: "分类样式",
+      ele: "xd-style-image",
+      groupKey: 'content',
+      valueKey: "navStyle",
+      value: data['navStyle'] || 'short',
+      value: customVal({
+        data,
+        key: 'navStyle',
+        gValue,
+        sValue:"short",
+      }),
+      labelInline:true,
+      className: 'input100',
+      handleCustom(cusRes) {
+        XdBus.getParentApi('getCompStylesOptions')({
+          layout_ids: 'xdDbJ4IOirUK0lljEPIkF',
+          key: Date.now()
+        })
+          .then(res => {
+            cusRes.data.cb(res)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
     {
       ele: 'title',
       label: '展示内容',
       size: 'small',
       groupKey:'content',
     },
+    {
+      label: '加购按钮',
+      ele: 'xd-cus-switch',
+      valueKey: 'isAddCart',
+      value: data['isAddCart'] || 'Y',
+      className: 'input100',
+      groupKey:'content',
+      labelInline:true,
+      cusStyle:{marginBottom: '10px'},
+      setting: {
+        isBackType: 'string'
+      },
+    },
+    {ele: 'group_start'},
+    data['isAddCart'] === 'Y' && {
+      label: "",
+      ele: "xd-style-image",
+      groupKey: 'content',
+      valueKey: "cartStyle",
+      value: dataVal({data, key:'cartStyle', dValue:'btn_cartCFull', gValue}),
+      labelInline:true,
+      //isTplRef:true, //内容引用模版被禁用
+      className: 'input100',
+      handleCustom(cusRes) {
+        XdBus.getParentApi('getCompStylesOptions')({
+          layout_ids: 'wF0WmvAM3SB0t9cymnx0b',
+          key: Date.now()
+        })
+          .then(res => {
+            cusRes.data.cb(res)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+    data['isAddCart'] === 'Y' && {
+      label: '按钮文字',
+      ele: 'el-input',
+      type: 'text',
+      valueKey: 'cartName',
+      value: dataVal({data, key:'cartName', dValue:'', gValue}),
+      placeholder: '请输入按钮文字，默认值：选规格',
+      className: 'input100',
+      labelInline: true,
+      groupKey:'content',
+      rules:[
+        {
+          required: false,
+          validator: (rule, value, callback) => {
+            if(typeof value === "string") value = value.trim();
+            // if(value.length === 0){
+            //   callback('按钮文字不能为空');
+            //   return
+            // }
+            if(value.length > 3) {
+              callback('按钮文字长度为：1-3字符');
+              return
+            }
+            callback();
+          },
+          trigger: ['blur', 'change']
+        }
+      ]
+    },
+    {ele: 'group_end'},
+    { ele:'xd-line', groupKey:'content' },
     {
       label: '划线价',
       ele: 'xd-cus-switch',