jufubao-food 1.0.15-beta2 → 1.0.15-beta4

package/package.json

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

package/src/components/JfbFoodConfirmV2/JfbFoodConfirmV2.vue

@@ -21,7 +21,9 @@
           <view class="shop_wrap" @click="toSwitchShop">
             <view class="shop_info">
               <view class="_name"><xd-font-icon icon="iconshouye" :color="mainColor" size="36" style="margin-right: 8rpx;"></xd-font-icon>{{ shopInfo.shop_name }}</view>
-              <view class="_dist">{{ shopInfo.distance_conversion}}
+              <view class="_dist">
+                <!-- {{ shopInfo.distance_conversion}} -->
+                更多门店
                 <xd-font-icon icon="iconxiangyou_xian" color="#666666" :size="20" style="margin-left: 8rpx;"></xd-font-icon>
               </view>
             </view>

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>
@@ -118,8 +120,15 @@
             <xd-unit :price="cartPrice" :isOld="false"></xd-unit>
           </view>
           <view>
-            <xd-button v-if="cartProductList.length" width="170rpx" size="small" type="primary" @click="handleSubmitCart">选好了</xd-button>
-            <xd-button v-else width="170rpx" size="small" type="primary" :disabled="true">选好了</xd-button>
+            <xd-button v-if="cartProductList.length"
+              :cusStyle="{fontSize: '28rpx'}"
+              width="170rpx" size="small" type="primary"
+              @click="handleSubmitCart"
+            >选好了</xd-button>
+            <xd-button v-else
+              :cusStyle="{fontSize: '28rpx'}"
+              width="170rpx" size="small" type="primary" :disabled="true"
+            >选好了</xd-button>
           </view>
         </view>
         <view class="cart_product_modal" v-if="cartProductShow">
@@ -170,14 +179,17 @@
               @click="setCurShop(i)"
             >
               <view class="shop_name_bar">
-                <view class="shop_name">{{item.resource_shop_name}} <view class="curr_active">正在预览</view></view>
+                <view class="shop_name">
+                  <text style="margin-right: 16rpx;">{{item.resource_shop_name}}</text>
+                  <view class="curr_active">正在预览</view>
+                </view>
                 <view class="more_r">详情 <xd-font-icon icon="iconxiangyou_xian" :size="24"></xd-font-icon></view>
               </view>
               <view class="shop_addr_bar">
                 <view>{{item.address}}</view>
                 <view>{{item.distance}}</view>
               </view>
-              <view class="shop_time">营业时间：09-21:00</view>
+              <view class="shop_time" v-if="item.business_time_name">营业时间：{{ item.business_time_name }}</view>
             </view>
           </view>
           <view class="chose_other" @click="handleSwitchShop">选择其他门店 <xd-font-icon icon="iconxiangyou_xian" :size="24"></xd-font-icon></view>
@@ -279,6 +291,10 @@
         //导航
         titleBgcColor: '#FFFFFF',
         titleStyle: {},
+        navStyle: "",
+        isAddCart: "Y",
+        cartStyle: "",
+        cartName: "",
 
         //面板
         showDiscount: "Y",  //是否展示划线价
@@ -341,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});
       },
@@ -380,8 +444,8 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.foodDetailPath = getContainerPropsValue(container, 'content.foodDetailPath', {value: "/Smallline/food/pinfo"}).value;
-        this.confirmPath = getContainerPropsValue(container, 'content.confirmPath', {value: "/Smallline/food/confirmv2"}).value;
+        this.foodDetailPath = getContainerPropsValue(container, 'content.foodDetailPath', {value: ""}).value;
+        this.confirmPath = getContainerPropsValue(container, 'content.confirmPath', {value: ""}).value;
         this.switchStorePath = getContainerPropsValue(container, 'content.switchStorePath', { value: ''}).value;
         this.showDiscount = gCPVal(container, 'showDiscount', "Y");
         this.differ = gCPVal(container, 'differ', 1);
@@ -425,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']) {
@@ -474,7 +542,7 @@
       },
       handleSwitchShop(){
         this.$xdUniHelper.navigateTo({
-          url: this.switchStorePath + "?brand_id=" + this.shopInfo.brand_id + "&resource_shop_id=" + this.resource_shop_id,
+          url: this.switchStorePath + "?brand_id=" + this.brand_id + "&resource_shop_id=" + this.resource_shop_id,
         })
       },
       setCurShop(index){
@@ -1035,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;
@@ -1052,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;
+              // }
             }
           }
         }
@@ -1304,7 +1382,7 @@
       }
     }
     .take_shop_wrap{
-      background-color: #eee;
+      background-color: #f8f8f8;
       .take_title{
         background-color: #FFFFFF;
         padding: 24rpx 32rpx;
@@ -1333,19 +1411,20 @@
           background-color: rgba(229, 1, 14, 0.03);
           .shop_name_bar{
             .curr_active{
-              display: flex;
+              display: inline-flex;
             }
           }
         }
         .shop_name_bar{
           display: flex;
-          align-items: center;
+          align-items: flex-start;
           justify-content: space-between;
           font-size: 32rpx;
           color: #333333;
           .shop_name{
-            display: flex;
             align-items: center;
+            flex: 1;
+            padding-right: 40rpx;
           }
           .curr_active{
             border: 1px solid rgba(229, 1, 14, 0.2);
@@ -1356,7 +1435,7 @@
             align-items: center;
             justify-content: center;
             font-size: 24rpx;
-            margin-left: 16rpx;
+            // margin-left: 16rpx;
             display: none;
           }
           .more_r{
@@ -1364,6 +1443,7 @@
             align-items: center;
             color: #999999;
             font-size: 24rpx;
+            padding-top: 8rpx;
           }
         }
         .shop_addr_bar{

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',

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

@@ -192,7 +192,7 @@ export default function (data={},gValue={},gColor={},oldData) {
       ele: 'xd-radio',
       groupKey: 'style',
       valueKey: 'radiusStatus',
-      value: statusDataVal({data, key:'radiusStatus', cValue:'N',}),
+      value: statusDataVal({data, key:'radiusStatus', cValue:'D',}),
       labelInline:true,
       list: [
         {label: '默认', value: 'D'},
@@ -234,7 +234,7 @@ export default function (data={},gValue={},gColor={},oldData) {
       ele: 'xd-radio',
       groupKey: 'style',
       valueKey: 'imageRadiusStatus',
-      value: statusDataVal({data, key:'imageRadiusStatus', cValue:'N'}),
+      value: statusDataVal({data, key:'imageRadiusStatus', cValue:'D'}),
       labelInline:true,
       list: [
         {label: '默认', value: 'D'},