jufubao-food 1.0.12-beta7 → 1.0.12-beta9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-food",
-  "version": "1.0.12-beta7",
+  "version": "1.0.12-beta9",
   "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>
@@ -207,6 +200,7 @@
         prodScrollIntoView: "",
         prodScrollTop: 0,
         scrollUpTimer: null,
+        scrollTimer: null,
 
         scrollBoxHeight: 0, // 商品滚动盒子高度
         triggerHeight: 100, // 触发加载更多高度
@@ -267,6 +261,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) {
@@ -389,49 +393,81 @@
           }
         })
       },
+      getList(options = {}){
+        return new Promise((resolve, reject) => {
+          jfbRootExec("getFoodProductList", {
+            vm: this,
+            data: {
+              xnamespace: this.xnamespace,
+              shop_id: this.shopInfo.shop_id,
+              consume_mode: this.consume_mode,
+              page_token: options.page_token || 1,
+              page_size: this.page_size,
+              category_id: options.category_id,
+              ...options,
+            }
+          }).then(res => {
+            let productList = res.lists;
+            this.categoryList = this.categoryList.map((item, index) => {
+              if(item.category_id === options.category_id){
+                let prodList = [];
+                if(item.productList && item.productList.length){
+                  prodList = item.productList.concat(productList);
+                }else{
+                  prodList = productList;
+                }
+                prodList = prodList.map(prod => {
+                  prod.key = `${item.category_id}_${prod.product_id}`;
+                  return prod;
+                })
+                prodList = prodList.reduce((pre, cur) => {
+                  if(!pre[cur.key]){
+                    pre[cur.key] = cur;
+                  }
+                  return pre;
+                }, {});
+                item.productList = Object.values(prodList);
+                item.total_size = res.total_size;
+                item.next_page_token = res.next_page_token;
+              }
+              return item;
+            })
+            resolve(res);
+          }).catch(err => {
+            reject(err);
+          })
+        })
+      },
       //获取门店商品列表
       p_getFoodProductList(){
         let curLoadCate = this.categoryList[this.loadCateIndex];
-        if(!curLoadCate) return;
+        if(!curLoadCate) return Promise.resolve();
         this.$xdShowLoading({});
-        jfbRootExec("getFoodProductList", {
-          vm: this,
-          data: {
-            xnamespace: this.xnamespace,
-            shop_id: this.shopInfo.shop_id,
-            consume_mode: this.consume_mode,
-            page_token: curLoadCate.next_page_token || 1,
-            page_size: this.page_size,
-            category_id: curLoadCate.category_id,
-          }
-        }).then(res => {
-          // this.productList = res.lists;
-          this.$xdHideLoading();
-          let productList = res.lists;
-          this.categoryList = this.categoryList.map((item, index) => {
-            if(index === this.loadCateIndex){
-              if(item.productList && item.productList.length){
-                item.productList = item.productList.concat(productList);
-              }else{
-                item.productList = productList;
-              }
-              item.productList = item.productList.map(prod => {
-                prod.key = `${item.category_id}_${prod.product_id}`;
-                return prod;
-              })
-              item.total_size = res.total_size;
-              item.next_page_token = res.next_page_token;
+        let options = {
+          page_token: curLoadCate.next_page_token || 1,
+          category_id: curLoadCate.category_id,
+        };
+        return new Promise((resolve,reject) => {
+          this.getList(options).then(async res => {
+            this.$xdHideLoading();
+            if(res.total_size < 3){
+              await this.loadNextCateProduct(this.loadCateIndex)
             }
-            return item;
+            this.$nextTick(() => {
+              setTimeout(() => {
+                this.setCategoryRect();
+                this.isLoading = false;
+              }, 300)
+            });
+            resolve(res);
+          }).catch(err => {
+            this.$xdHideLoading();
+            reject(err);
           })
-          this.$nextTick(() => {
-            this.setCategoryRect();
-            this.isLoading = false;
-          })
-          console.log(this.categoryList, 'categoryList')
         })
       },
       setCategoryRect(){
+        console.log("setCategoryRect")
         const query = uni.createSelectorQuery().in(this);
         this.categoryList = this.categoryList.map(cate => {
           let id = this.getID(cate);
@@ -455,12 +491,16 @@
       getID(cate) {
         return `category_${cate.category_id}`;
       },
-      switchCate(index){
+      async switchCate(index){
         this.pointerScroll = false;
         this.cateIndex = index;
         this.loadCateIndex = index;
         let curCate = this.categoryList[this.cateIndex];
         this.prodScrollIntoView = this.getID(curCate);
+        //是否最后一个分类
+        if(this.cateIndex === this.categoryList.length - 1){
+          await this.loadPreCateProduct(index);
+        }
         if(curCate.productList && curCate.productList.length===0){
           this.p_getFoodProductList();
         }
@@ -485,8 +525,23 @@
           this.handleCurCate(e);
         }
         this.lastScrollTop = scrollTop;
-        
+
+        //滚动结束后，触发纠错机制
+        if(this.scrollTimer) clearTimeout(this.scrollTimer);
+        this.scrollTimer = setTimeout(() => {
+          this.getProductIsEmpty();
+        }, 200)
+      },
+      //滚动过快，当前项未加载
+      getProductIsEmpty(){
+        let curCate = this.categoryList[this.cateIndex];
+        if(!curCate) return;
+        if(curCate.productList && curCate.productList.length===0){
+          console.log("当前分类商品列表为空，重新加载数据");
+          this.switchCate(this.cateIndex);
+        }
       },
+
       productBoxScrollUp(e){
         let scrollTop = e.detail.scrollTop
         let curIndex = this.categoryList.findIndex(item => {
@@ -542,10 +597,11 @@
           this.isLoading = true;
           //判断是否需要加载更多, 继续加载当前分类，还是加载下一个分类
           if(curCate.productList && curCate.productList.length < curCate.total_size){
+            console.log("继续加载当前分类商品 categoryList")
             this.loadCateIndex = curIndex;
             this.p_getFoodProductList();
           }else{
-            // console.log("加载下一个分类商品 categoryList")
+            console.log("加载下一个分类商品 categoryList")
             this.loadCateIndex = curIndex + 1;
             let nextCate = this.categoryList[this.loadCateIndex];
             if(nextCate && nextCate.productList && nextCate.productList.length < nextCate.total_size){
@@ -557,6 +613,46 @@
           return;
         }
       },
+      loadPreCateProduct(curCateIndex){
+        let preCateIndex = curCateIndex - 1;
+        let preCate = this.categoryList[preCateIndex];
+        if(!preCate) return Promise.resolve();
+        if(preCate.productList && preCate.productList.length === 0){
+          let options = {
+            page_token: 1,
+            category_id: preCate.category_id,
+          }
+          return new Promise((resolve, reject) => {
+            this.getList(options).then(async res => {
+              if(res.lists.length < 3 ) {
+                await this.loadPreCateProduct(preCateIndex)
+              }
+              resolve();
+            }).catch(err => {
+              reject(err);
+            })
+          })
+        }
+        return Promise.resolve();
+      },
+      loadNextCateProduct(curCateIndex){
+        console.log("loadNextCateProduct")
+        let nextCateIndex = curCateIndex + 1;
+        let nextCate = this.categoryList[nextCateIndex];
+        if(!nextCate) return Promise.resolve();
+        if(nextCate.productList && nextCate.productList.length === 0){
+          let options = {
+            page_token: 1,
+            category_id: nextCate.category_id,
+          }
+          this.getList(options).then(async res => {
+            if(res.lists.length < 3 ) {
+              await this.loadNextCateProduct(nextCateIndex)
+            }
+          })
+        }
+        return Promise.resolve();
+      },
 
       toProductDetail(product){
         if(product.has_choose){
@@ -651,7 +747,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 +774,7 @@
         background-color: #FFFFFF;
         box-sizing: border-box;
         margin-bottom: 20rpx;
+        border-bottom: 1px solid #F8F8F8;
         padding: 30rpx;
         position: fixed;
         top: 0;
@@ -681,18 +791,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 +820,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 +836,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 +872,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 +1006,7 @@
             .prod_specs{
               padding-top: unit(10, rpx);
               display: block;
-              font-size: 26rpx;
+              font-size: 28rpx;
               color: #999999;
               line-height: unit(32, rpx);
             }