jufubao-food 1.0.12-beta7 → 1.0.12-beta8

package/package.json

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

package/src/components/JfbFoodConfirmV2/JfbFoodConfirmV2.vue

@@ -135,7 +135,10 @@
         </xd-list-item>
       </view>
 
-       <view :style="{height: '100rpx'}"></view>
+       <view class="placeholderBottom" :style="bottomFixedStylePlaceholder"></view>
+       <view v-if="orderInfo.order_status === 'N'" class="alert_bottom" :style="alertBottomStyleComp">
+        {{ orderInfo.error_tip }}
+       </view>
        <!-- 靠低支付 -->
       <view class="fixe_bottom" :style="prod_bottom">
         <view class="fixed_bottom_body" :style="[bottomBoxStyle]">
@@ -145,7 +148,7 @@
           </view>
           <view>
             <xd-button type="primary" width="200rpx" size="small"
-              :disabled="is_can_buy!=='Y'"
+              :disabled="orderInfo.order_status!=='Y'"
               :radius="bottomBtnRadius + 'rpx'"
               :style="{
                 height: bottomBtnHeight + 'rpx',
@@ -346,6 +349,13 @@
       prod_bottom() {
         return this.fixedStyle({height: 0, zIndex: 111});
       },
+      alertBottomStyleComp(){
+        return this.fixedStyle({paddingBottom: 106, zIndex: 110})
+      },
+      bottomFixedStylePlaceholder() {
+        let tipAlert = this.orderInfo && this.orderInfo.order_status==='N' ? 120: 0
+        return this.fixedStyle({paddingBottom: tipAlert, zIndex: 110}, 'bottom', false);
+      },
       bottomBoxStyle(){
         return {
           padding: '20rpx'
@@ -913,6 +923,25 @@
           font-size: unit(24,rpx);
         }
       }
+      .placeholderBottom{
+        
+      }
+      .alert_bottom{
+        background: rgba(255, 244, 191, 0.9);
+        color: rgba(255, 102, 26, 1);
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        height: 60rpx;
+        line-height: 60rpx;
+        font-size: 28rpx;
+        position: fixed;
+        right:0;
+        left:0;
+        bottom:0;
+        width: 100%;
+        z-index: 111;
+      }
       .fixe_bottom{
         background: #FFF;
         box-shadow: 0 0 unit(16, rpx) rgba(0,0,0,.05);

package/src/components/JfbFoodProductInfo/JfbFoodProductInfo.vue

@@ -146,6 +146,7 @@
         return {
           '--main-color': this.mainColor,
           '--bg-color': this.mainColorAlpha,
+          '--bg-main-color': this.mainColorAlpha,
         }
       },
       prod_bottom() {
@@ -363,18 +364,19 @@
           font-size: 32rpx;
           color: #333333;
           padding-right: 20rpx;
+          font-weight: 500;
         }
       }
       .sku_wrap{
         background-color: #FFFFFF;
-        padding: 32rpx;
-        margin: 20rpx;
+        padding: 24rpx;
+        margin: 16rpx;
         border-radius: 16rpx;
       }
       .attr_wrap{
         background-color: #FFFFFF;
-        padding: 32rpx;
-        margin: 20rpx;
+        padding: 24rpx;
+        margin: 16rpx;
         border-radius: 16rpx;
       }
       .fixed_bottom{

package/src/components/JfbFoodProductInfo/Mock.js

@@ -16,6 +16,68 @@ module.exports = {
         {
           product_sku: "",
           specs: [
+            {
+              code: "mahua_1",
+              name: "单选",
+              required: true,
+              multiple: false,
+              multiple_min: 1,
+              multiple_max: -1,
+              is_show_image: true,
+              values: [
+                {
+                  code: "507887",
+                  name: "奥利奥麦旋风",
+                  image:
+                    "https://menu-img.mcd.cn/pcm/prod/menu/20220713a/product/MS_507887_320.png",
+                  price: 0,
+                  num: 1,
+                  checked: true,
+                  enabled: true
+                },
+                {
+                  code: "507888",
+                  name: "草莓麦旋风",
+                  image:
+                    "https://menu-img.mcd.cn/pcm/prod/menu/20220713a/product/MS_507888_320.png",
+                  price: 0,
+                  num: 1,
+                  checked: false,
+                  enabled: true
+                },
+                {
+                  code: "507889",
+                  name: "草莓麦旋风",
+                  image:
+                    "https://menu-img.mcd.cn/pcm/prod/menu/20220713a/product/MS_507888_320.png",
+                  price: 2,
+                  num: 1,
+                  checked: false,
+                  enabled: true
+                },
+                {
+                  code: "507890",
+                  name: "草莓麦旋风",
+                  image:
+                    "https://menu-img.mcd.cn/pcm/prod/menu/20220713a/product/MS_507888_320.png",
+                  price: 2,
+                  num: 1,
+                  checked: false,
+                  enabled: true
+                },
+                {
+                  code: "507891",
+                  name: "草莓麦旋风",
+                  image:
+                    "https://menu-img.mcd.cn/pcm/prod/menu/20220713a/product/MS_507888_320.png",
+                  price: 3,
+                  num: 1,
+                  checked: false,
+                  enabled: true
+                },
+              ]
+            },
+
             {
               code: "Cupsize",
               name: "杯型",

package/src/components/JfbFoodProductInfo/XdSku.vue

@@ -267,7 +267,8 @@ export default {
       }
       .tag_tit{
         font-size: 28rpx;
-        color: #242424;
+        color: #333333;
+        font-weight: 500;
         margin-bottom: 20rpx;
         display: flex;
         align-items: center;
@@ -291,14 +292,14 @@ export default {
         border-radius: 12rpx;
         background-color: #EDEDED;
         font-size: 28rpx;
-        color: #666666;
-        line-height: 60rpx;
+        color: #333333;
+        line-height: 70rpx;
         padding: 0 32rpx;
         margin-right: 20rpx;
         margin-bottom: 20rpx;
         // max-width: 208rpx;
         box-sizing: border-box;
-        .uni-one-cut(60);
+        .uni-one-cut(70);
 
         &.is-img{
           border: none;

package/src/components/JfbFoodProductInfo/XdSpu.vue

@@ -1,23 +1,33 @@
 <template>
   <view class="xd_spu">
     <view class="spu_group" v-for="(item, i) in uiList" :key="item.code">
-      <view class="spu_title">{{ item.name }}</view>
+      <view class="spu_title">{{ item.name }} <text v-if="item.multiple_max > 0">（请选择{{item.multiple_max}}份）</text></view>
       <view class="specs_list img_list" v-if="item.is_show_image">
         <view v-for="(opt, ii) in item.values" :key="opt.code"
           class="specs_img_item" :class="{ 'active': opt.checked }"
           @click="handleCheck(i, ii)"
         >
           <image class="spec_img" :src="opt.image" mode=""></image>
-          <view class="spec_name">{{ opt.name }}</view>
-          <view>+{{ opt.price }}元</view>
-          <view class="spec_num" @click.stop>
-            <xd-number width="160" :disabled="checkIsDisabled(i, ii)" v-model="opt.num" :min="1" :max="99"></xd-number>
+          <view class="spec_main">
+            <view class="spec_name">{{ opt.name }}</view>
+            <view class="spec_price">
+              <template v-if="opt.price">+{{ opt.price/100 }}元</template>
+            </view>
+            <view v-if="item.multiple" class="spec_num" @click.stop>
+              <!-- <xd-number v-if="!checkIsDisabled(i, ii)" width="160" v-model="opt.num" :min="0" :max="99" @change="val => handleSpeNum(val, i, ii)"></xd-number> -->
+              <view v-if="!checkIsDisabled(i, ii)" class="num_box">
+                <view class="opt_box num_minus" @click="handleNumMinus(opt, i, ii)">-</view>
+                <view class="num_text">{{ opt.num }}</view>
+                <view class="opt_box num_plus" @click="handleNumAdd(opt, i, ii)">+</view>
+              </view>
+            </view>
           </view>
-          <view class="p_t_r">
+          <!-- <view class="p_t_r">
             <xd-radio v-if="item.multiple" :disabled="checkIsDisabled(i, ii)" class="xdCheckbox" v-model="opt.checked" :isClickEvent="false"></xd-radio>
             <xd-radio v-else class="xdRadio" v-model="opt.checked" :isClickEvent="false"></xd-radio>
-          </view>
+          </view> -->
         </view>
+        <view v-if="item.values.length%3===2" style="width:200rpx;height:1px;"></view>
       </view>
       <view class="specs_list" v-else>
         <view v-for="(opt, ii) in item.values" :key="opt.code"
@@ -47,7 +57,7 @@ export default {
       type: Array,
       default: ()=>[
         {
-          "code":"Cupsize","name":"杯型","required":false,"multiple":true,"multiple_min":1,"multiple_max":-1,"is_show_image": true,
+          "code":"Cupsize","name":"杯型","required":true,"multiple":true,"multiple_min":1,"multiple_max":2,"is_show_image": true,
           "values":[
             {"code":"Tall","name":"中杯","image":"https://image.quanma51.com/self/mahua/sbk/product/6cdc540a91a84b2eb6b58ac510725a48!img","price":0,"num":1,"checked":true,"enabled":true},
             {"code":"Grande","name":"大杯","image":"https://image.quanma51.com/self/mahua/sbk/product/782ac850a8c14bd38b7b5a22f03d6c74!img","price":600,"num":1,"checked":false,"enabled":true},
@@ -65,7 +75,13 @@ export default {
   watch: {
     list: {
       handler(val){
-        this.uiList = val;
+        this.uiList = val.map(item => {
+          item.values = item.values.map(opt => {
+            if(!opt.checked) opt.num = 0;
+            return opt;
+          })
+          return item;
+        });
       },
       immediate: true,
     },
@@ -78,10 +94,44 @@ export default {
     }
   },
   methods: {
+    handleNumAdd(opt, i, ii){
+      let parent = this.uiList[i];
+      let maxNum = parent.multiple_max;
+      let curNum = 0;
+      for(let j = 0; j < parent.values.length; j++){
+        if(parent.values[j].checked){
+          curNum += parent.values[j].num;
+        }
+      }
+      if(curNum >= maxNum) return;
+      if(this.checkIsDisabled(i, ii)) return;
+      this.$set(this.uiList[i].values[ii], 'num', opt.num + 1);
+      this.$set(this.uiList[i].values[ii], 'checked', true)
+    },
+    handleNumMinus(opt, i, ii){
+      let curNum = opt.num;
+      let parent = this.uiList[i];
+      if(curNum <= 0) return;
+      //如果是必选项，且最后一个选中项，则不允许减少到0
+      if(parent.required){
+        let checkedArr = this.uiList[i].values.filter(opt => opt.checked);
+        if(checkedArr.length === 1 && checkedArr[0].num === 1) return;
+      }
+
+      let nextVal = opt.num - 1;
+      this.$set(this.uiList[i].values[ii], 'num', nextVal);
+      if(nextVal === 0){
+        this.$set(this.uiList[i].values[ii], 'checked', false)
+      }
+    },
     handleCheck(i, ii){
+      let firstChild = this.uiList[i];
+      if(firstChild.multiple) return;
       let curVal = this.uiList[i].values[ii];
       if(!curVal.enabled) return;
-
+      this.setUIListChecked(i, ii);
+    },
+    setUIListChecked(i, ii){
       this.uiList = this.uiList.map((item, j) => {
         if(j === i){
           let checkedArr = item.values.filter(opt => opt.checked);
@@ -151,7 +201,8 @@ export default {
     .spu_title{
       font-size: 28rpx;
       color: #333333;
-      margin-bottom: 16rpx;
+      margin-bottom: 24rpx;
+      font-weight: 500;
     }
     .specs_list{
       display: flex;
@@ -162,21 +213,25 @@ export default {
       }
 
       .specs_img_item{
-        width: 200rpx;
-        height: 320rpx;
-        border: 1px solid #EEEEEE;
-        border-radius: 4rpx;
+        border: 1px solid #F8F8F8;
+        border-radius: 8rpx;
         display: flex;
         flex-direction: column;
         align-items: center;
         font-size: 24rpx;
         box-sizing: border-box;
-        padding: 16rpx;
         color: #333333;
         position: relative;
+        margin-bottom: 16rpx;
+        overflow: hidden;
 
         &.active{
-          border-color: #FF6C00;
+          border-color: var(--main-color);
+
+          .spec_main{
+            background-color: var(--bg-main-color);
+            color: var(--main-color);
+          }
         }
         .p_t_r{
           position: absolute;
@@ -190,14 +245,60 @@ export default {
         }
 
         .spec_img{
-          width: 160rpx;
-          height: 160rpx;
+          width: 212rpx;
+          height: 212rpx;
+        }
+        .spec_main{
+          background-color: #F8F8F8;
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          font-size: 28rpx;
+          color: #333333;
+          flex: 1;
         }
         .spec_name{
           margin-top: 16rpx;
         }
+        .spec_price{
+          height: 28rpx;
+          margin: 14rpx 0 20rpx;
+          line-height: 1;
+        }
         .spec_num{
-          margin-top: 12rpx;
+          margin-bottom: 20rpx;
+        }
+        .num_box{
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          .num_text{
+            padding: 0 40rpx;
+          }
+
+          .opt_box{
+            border-radius: 50%;
+            width: 40rpx;
+            height: 40rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 28rpx;
+            box-sizing: border-box;
+            padding-bottom: 4rpx;
+
+            &.num_plus{
+              background-color: var(--main-color);
+              color: #FFFFFF;
+            }
+            &.num_minus{
+              border: 1px solid var(--main-color);
+              color: var(--main-color);
+              background-color: #FFFFFF;
+            }
+          }
         }
         ::v-deep .uni-numbox{
           height: 40rpx;
@@ -219,16 +320,18 @@ export default {
 
       .specs_item{
         padding: 16rpx 32rpx;
-        background-color: #EEEEEE;
-        color: #999999;
-        font-size: 24rpx;
-        border-radius: 4rpx;
+        background-color: #F8F8F8;
+        color: #333333;
+        font-size: 28rpx;
+        border-radius: 8rpx;
         margin-bottom: 16rpx;
         margin-right: 16rpx;
+        border: 1px solid #F8F8F8;
 
         &.active{
-          background-color: #FF6C00;
-          color: #FFFFFF;
+          background-color: var(--bg-main-color);
+          color: var(--main-color);
+          border: 1px solid var(--main-color);
         }
       }
     }

package/src/components/JfbFoodProductList/JfbFoodProductList.vue

@@ -47,7 +47,7 @@
             :scroll-top="prodScrollTop"
             @scroll="handleScroll"
           >
-            <view v-for="(cate, i) in categoryList" :key="cate.category_id"
+            <view v-for="(cate, i) in showCategoryList" :key="cate.category_id"
               class="product_group"
               :id="getID(cate)"
               :data-next="cate.nextHeight"
@@ -68,28 +68,21 @@
                       <view class="prod_specs" v-if="item.sub_name">{{item.sub_name}}</view>
                       <view class="prod_price">
                         <view style="display:flex;align-items:center">
-                          <CusPrice :isPlus="is_plus_site" type="order" :showPrice="item.show_prices"></CusPrice>
+                          <CusPrice :isPlus="is_plus_site" :isShowIcon="false" :showPrice="item.show_prices"></CusPrice>
                         </view>
-                        <view style="font-size: 28rpx;color:#999" @click="toProductDetail(item)">
-                          <view v-if="item.has_choose" class="chose_spu">选规格</view>
-                          <xd-font-icon v-else icon="iconaddcart" :color="mainColor" size="46"></xd-font-icon>
+                        <view style="font-size: 28rpx;color:#999">
+                          <view v-if="item.has_choose" class="chose_spu" @click="toProductDetail(item)">
+                            选规格
+                            <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" @change="val => handleCartNumChange(val, item)"></xd-number>
+                            <xd-font-icon v-else icon="iconaddcart" :color="mainColor" size="46"></xd-font-icon>
+                          </view>
                         </view>
                       </view>
                     </view>
                   </view>
-                  <!-- <cus-product
-                    :image-radius="imageRadius"
-                    :brand-color="brandColor"
-                    :height="200"
-                    :cell="column_num"
-                    :name-font="itemFontStyle"
-                    :product-config="productConfig"
-                    :isPlus="is_plus_site"
-                    :item="item"
-                    :row-spacing="rowSpacing"
-                    :cell-spacing="itemSpacing"
-                    @on-product-detail="toProductDetail"
-                  ></cus-product> -->
                 </view>
               </view>
               <view class="product_list" v-else>
@@ -113,7 +106,7 @@
           <xd-unit :price="cartPrice" :isOld="false"></xd-unit>
         </view>
         <view>
-          <xd-button width="200rpx" size="small" type="primary" :disabled="!cartProductList.length" @click="handleSubmitCart">选好了</xd-button>
+          <xd-button width="170rpx" size="small" type="primary" :disabled="!cartProductList.length" @click="handleSubmitCart">选好了</xd-button>
         </view>
       </view>
       <view class="cart_product_modal" v-if="cartProductShow">
@@ -134,7 +127,7 @@
               <view class="prod_info">
                 <view class="prod_tit"
                   :class="{
-                    prod_tit_one:prod.product_sku_name
+                    prod_tit_one:prod.sub_name
                   }">{{prod.product_name}}</view>
                 <!-- <view class="prod_brand" :style="{color:brandTextColor}" v-if="prod.brand_name">{{prod.brand_name}}</view> -->
                 <view class="prod_specs" v-if="prod.sub_name">{{prod.sub_name}}</view>
@@ -150,7 +143,7 @@
             </view>
           </view>
           <view v-else class="prod_list">
-            <xd-no-data>购物车暂无商品</xd-no-data>
+            <xd-no-data height="250rpx" :scaleSize="0.8">购物车暂无商品</xd-no-data>
           </view>
         </view>
       </view>
@@ -267,6 +260,16 @@
       fixed_bottom() {
         return this.fixedStyle({height: 30, zIndex: 111});
       },
+      showCategoryList(){
+        return this.categoryList.map(item => {
+          item.productList = (item.productList || []).map(prod => {
+            let cartProd = this.cartProductList.find(item => item.product_id === prod.product_id);
+            prod.num = cartProd ? cartProd.num : 0;
+            return prod;
+          });
+          return item;
+        })
+      },
     },
     watch: {
       container(value, oldValue) {
@@ -651,7 +654,20 @@
 
   .jfb-food-product-list {
     &__body{
-      background-color: #f8f8f8;
+      background-color: #FFFFFF;
+
+      .cart_edg{
+        position: absolute;
+        right: -8rpx;
+        top: -24rpx;
+        color: #FFFFFF;
+        background-color: #FF4D4F;
+        border-radius: 24rpx;
+        padding: 0 12rpx;
+        font-size: 24rpx;
+        // box-sizing: border-box;
+        border: 4rpx solid #FFFFFF;
+      }
       .flex-center{
         display: flex;
         align-items: center;
@@ -665,6 +681,7 @@
         background-color: #FFFFFF;
         box-sizing: border-box;
         margin-bottom: 20rpx;
+        border-bottom: 1px solid #F8F8F8;
         padding: 30rpx;
         position: fixed;
         top: 0;
@@ -681,18 +698,17 @@
           text-overflow: ellipsis;
           max-width: 460rpx;
           flex: 1;
+          font-weight: 500;
         }
       }
       .section_main{
         display: flex;
-        padding-top: 16rpx;
         box-sizing: border-box;
         .left_nav{
           width: 160rpx;
-          background-color: #FFFFFF;
+          background-color: #F8F8F8;
           font-size: 24rpx;
-          border-radius: 16rpx;
-          margin-left: 16rpx;
+          color: #333333;
           .nav_item{
             padding: 24rpx;
             text-align: center;
@@ -711,14 +727,15 @@
             }
 
             &.active{
-              color: var(--main-color);
+              // color: var(--main-color);
+              font-weight: 500;
               &::after{
                 content: '';
                 position: absolute;
                 left: 0;
-                top: 24rpx;
-                bottom: 24rpx;
-                width: 6rpx;
+                top: 28rpx;
+                bottom: 28rpx;
+                width: 12rpx;
                 background-color: var(--main-color);
               }
             }
@@ -726,17 +743,19 @@
         }
         .right_product{
           flex: 1;
-          margin: 0 16rpx;
+          margin: 0 16rpx 0 32rpx;
 
           .product_group{
             .group_title{
               font-size: 24rpx;
+              color: #333333;
+              font-weight: 500;
               background-color: #FFFFFF;
               margin-bottom: 16rpx;
               height: 64rpx;
               line-height: 64rpx;
-              text-align: center;
               border-radius: 16rpx;
+              padding-left: 16rpx;
             }
             .product_list{
               .product_loading{
@@ -760,13 +779,14 @@
                   font-size: 24rpx;
                   border-radius: 40rpx;
                   box-sizing: border-box;
+                  position: relative;
                 }
 
                 .prod_img{
                   width: 200rpx;
                   height: 200rpx;
-                  margin-right: 32rpx;
-                  // background: #f8f8f8;
+                  margin-right: 16rpx;
+                  background: #f8f8f8;
                   // border-radius: 16rpx;
                   image{
                     width: 100%;
@@ -893,7 +913,7 @@
             .prod_specs{
               padding-top: unit(10, rpx);
               display: block;
-              font-size: 26rpx;
+              font-size: 28rpx;
               color: #999999;
               line-height: unit(32, rpx);
             }