jufubao-food 1.0.12-beta6 → 1.0.12-beta8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-food",
-  "version": "1.0.12-beta6",
+  "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,13 +148,13 @@
           </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',
                 lineHeight: bottomBtnHeight + 'rpx',
               }"
-              @click="handlePayConfirm"
+              @click="handleCardPay"
             >{{bottomPayText}}</xd-button>
           </view>
         </view>
@@ -213,7 +216,7 @@
         </view>
         <view slot="btn" style="display: flex;margin-top: 40rpx;">
           <xd-button type="info" size="small" @click="handleChangeStop">更换门店</xd-button>
-          <xd-button type="primary" size="small" style="margin-left: 40rpx;" @click="handleCardPay">就是这家</xd-button>
+          <xd-button type="primary" size="small" style="margin-left: 40rpx;" @click="handleCreatePayConfirm">就是这家</xd-button>
         </view>
       </XdDailog>
 
@@ -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'
@@ -606,10 +616,6 @@
         this.showDialogChangeShop = true;
         this.showDialogConfirmShop = false;
       },
-      handlePayConfirm(){
-        if(!this.getCreateOrderParams()) return false;
-        this.showDialogConfirmShop = true;
-      },
       async handleCardPay(){
         if(!this.getCreateOrderParams()) return false;
         this.checkUseNewPay();
@@ -650,8 +656,22 @@
             }
           }
         }
+        this.showDialogConfirmShop = true;
+        // this.useTickAndWalletPay(selected_card_list, selected_wallet_list);
+      },
+      //去创建订单
+      handleCreatePayConfirm(){
+        //已选卡
+        let selected_card_list = []
+        if(this.choseCard) {
+          selected_card_list = this.choseCard ? this.choseCard.selectedCardList : [];
+        } else if(this.choseCoupon) {
+          selected_card_list = this.choseCoupon ? this.choseCoupon.selectedCardList : [];
+        }
+        let selected_wallet_list = this.choseWallet ? this.choseWallet.selectedWalletList : []
         this.useTickAndWalletPay(selected_card_list, selected_wallet_list);
       },
+
       //使用钱包跟票券一同支付
       useTickAndWalletPay(selected_card_list, selected_wallet_list){
         this.createSettleOrder({
@@ -903,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"
@@ -55,19 +55,34 @@
               <view class="group_title">{{ cate.category_name }}</view>
               <view class="product_list" v-if="cate.productList.length">
                 <view v-for="item in cate.productList" :key="item.key" :style="[contProductStyles]">
-                  <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 class="product_item">
+                    <view class="prod_img">
+                      <image :src="item.thumb"/>
+                    </view>
+                    <view class="prod_info">
+                      <view class="prod_tit"
+                        :class="{
+                          prod_tit_one:item.product_sku_name
+                        }">{{item.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="item.sub_name">{{item.sub_name}}</view>
+                      <view class="prod_price">
+                        <view style="display:flex;align-items:center">
+                          <CusPrice :isPlus="is_plus_site" :isShowIcon="false" :showPrice="item.show_prices"></CusPrice>
+                        </view>
+                        <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>
                 </view>
               </view>
               <view class="product_list" v-else>
@@ -91,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">
@@ -112,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>
@@ -128,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>
@@ -168,6 +183,7 @@
     ],
     data() {
       return {
+        closeMask: true,
         resource_shop_id: "",
         xnamespace: "",
         consume_mode: "",
@@ -244,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) {
@@ -561,7 +587,8 @@
             }
           }
         }).then(res => {
-
+          this.p_getFoodCartList();
+          this.p_getFoodCartCount();
         })
       },
       //获取购物车列表
@@ -627,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;
@@ -641,6 +681,7 @@
         background-color: #FFFFFF;
         box-sizing: border-box;
         margin-bottom: 20rpx;
+        border-bottom: 1px solid #F8F8F8;
         padding: 30rpx;
         position: fixed;
         top: 0;
@@ -657,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;
@@ -687,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);
               }
             }
@@ -702,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{
@@ -723,6 +766,69 @@
                 color: #999999;
                 min-height: 200px;
               }
+              .product_item{
+                box-sizing: border-box;
+                height: auto;
+                background: #FFFFFF;
+                display: flex;
+
+                .chose_spu{
+                  padding: 12rpx 16rpx;
+                  background-color: var(--main-color);
+                  color: #FFFFFF;
+                  font-size: 24rpx;
+                  border-radius: 40rpx;
+                  box-sizing: border-box;
+                  position: relative;
+                }
+
+                .prod_img{
+                  width: 200rpx;
+                  height: 200rpx;
+                  margin-right: 16rpx;
+                  background: #f8f8f8;
+                  // border-radius: 16rpx;
+                  image{
+                    width: 100%;
+                    height: 100%;
+                  }
+                }
+                .prod_info{
+                  flex: 1;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: space-between;
+                  width: 100rpx;
+                }
+                .prod_tit{
+                  font-size: 28rpx;
+                  color: #333333;
+                  .uni-max-cut(2, 80);
+                  line-height: unit(40, rpx);
+                }
+                .prod_tit_one {
+                  .uni-max-cut(1, 40);
+                }
+
+                .prod_brand {
+                  font-size: 26rpx;
+                  padding-top: unit(10, rpx);
+                  line-height: unit(32, rpx);
+                }
+
+                .prod_specs{
+                  padding-top: unit(10, rpx);
+                  display: block;
+                  font-size: 26rpx;
+                  color: #999999;
+                  line-height: unit(32, rpx);
+                }
+                .prod_price{
+                  display: flex;
+                  align-items: flex-end;
+                  justify-content: space-between;
+                }
+              }
             }
           }
         }
@@ -775,7 +881,7 @@
               width: 200rpx;
               height: 200rpx;
               margin-right: 24rpx;
-              background: #DDD;
+              // background: #DDD;
               image{
                 width: 100%;
                 height: 100%;
@@ -789,7 +895,8 @@
               width: 100rpx;
             }
             .prod_tit{
-              font-size: 32rpx;
+              font-size: 28rpx;
+              color: #333333;
               .uni-max-cut(2, 80);
               line-height: unit(40, rpx);
             }
@@ -806,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);
             }

package/src/components/JfbFoodProductList/Mock.js

@@ -1,9 +1,9 @@
 'use strict';
 
 module.exports = {
-  getFoodShopDetail: {"resource_shop_id":8003557,"shop_id":1170110,"shop_name":"星巴克(平谷国泰店)","shop_icon":"","province_code":"","province_name":"","city_code":"jfb1","city_name":"北京","area_code":"","area_name":"","street_code":"","street_name":"","address":"平谷区文化北街13号国泰商场一层","about":"","latitude":"40.146809614188","longitude":"117.11770942955","distance":6722645,"meal_method":["in_store","take_away"],"phone":"(010)89968048","request_id":"e32700aa4017803f"},
+  getFoodShopDetail: {"resource_shop_id":8003557,"shop_id":1170110,"shop_name":"星巴克(平谷国泰店)","shop_icon":"","province_code":"","province_name":"","city_code":"jfb1","city_name":"北京","area_code":"","area_name":"","street_code":"","street_name":"","address":"平谷区文化北街13号国泰商场一层","about":"","latitude":"40.146809614188","longitude":"117.11770942955","distance":"519.5km","meal_method":["in_store","take_away"],"phone":"(010)89968048","request_id":"e32700aa4017803f"},
   getFoodShopCategory: {"categories":[{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","category_name":"限时特惠","cart_num":1},{"category_id":"c3e817f29eca3343734ef1e5e644b211","category_name":"夏日心动推荐","cart_num":0},{"category_id":"4700b6e5b19a9ff788b3dd421421ab6b","category_name":"真味无糖","cart_num":0},{"category_id":"54e63a4221698549900f442105821a95","category_name":"浓缩咖啡","cart_num":0},{"category_id":"b083cfcac8944b26225edbcdff22b0e3","category_name":"金烘浓缩","cart_num":0},{"category_id":"834cd2779458568a5278538eb3cb6920","category_name":"冷萃咖啡","cart_num":0},{"category_id":"af722afe78ed62dbe365b5d2360df690","category_name":"植物基咖啡","cart_num":0},{"category_id":"d6f14098f1d00bf849edef62f29ea094","category_name":"星巴克冰震浓缩","cart_num":0},{"category_id":"6af82de72ee20bbc204e4c25cac7326b","category_name":"浓小杯","cart_num":0},{"category_id":"8e39244d99a7b8ea0192842005be5ff4","category_name":"软雪星冰乐","cart_num":0},{"category_id":"61077dd3605a7bc2b8f4eb1ba3e6367b","category_name":"咖啡星冰乐","cart_num":0},{"category_id":"3c18282df5e406c82571de20d1e22f28","category_name":"无咖啡星冰乐","cart_num":0},{"category_id":"b88f8211c9249db7e85949fc8fc8c6f5","category_name":"冰摇茶","cart_num":0},{"category_id":"07378726d90bf8bf36a4e1a67bfbe904","category_name":"茶拿铁","cart_num":0},{"category_id":"258c7f91f59a21564947fc89a4c8fce3","category_name":"冰摇","cart_num":0},{"category_id":"04a8025f45c4b4bbe07d7021c0773538","category_name":"巧克力","cart_num":0},{"category_id":"4ee301588298388e3886cbda9673e6e6","category_name":"蒸气奶","cart_num":0}],"request_id":"2ff41432222daffd"},
-  getFoodProductList: {"lists":[{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":707,"product_name":"双杯抹茶星冰乐®","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/7b45d7de7c684b48b14725c7816c4ec9!img","has_choose":true,"cart_num":0,"show_prices":[{"p":6960,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":708,"product_name":"双杯红茶拿铁","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/c54d777ee7c34cd29a800c2e219249b0!img","has_choose":true,"cart_num":0,"show_prices":[{"p":6240,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":709,"product_name":"双杯摩卡可可碎片星冰乐®","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/%E5%8F%8C%E6%9D%AF%E6%91%A9%E5%8D%A1%E5%8F%AF%E5%8F%AF%E7%A2%8E%E7%89%87%E6%98%9F%E5%86%B0%E4%B9%90.png!img","has_choose":true,"cart_num":0,"show_prices":[{"p":7920,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":710,"product_name":"双杯拿铁","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/23787b1d58a7459086048182e9be4e22!img","has_choose":true,"cart_num":0,"show_prices":[{"p":7200,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":711,"product_name":"双杯美式咖啡","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/58026111f5ab4091ade3a931b9f07648!img","has_choose":true,"cart_num":0,"show_prices":[{"p":6480,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":712,"product_name":"双杯馥芮白®","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/%E5%8F%8C%E6%9D%AF%E9%A6%A5%E8%8A%AE%E7%99%BD.png!img","has_choose":true,"cart_num":0,"show_prices":[{"p":8400,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":713,"product_name":"双杯焦糖玛奇朵","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/49e18ceb560c476292bea632b8e7c63f!img","has_choose":true,"cart_num":0,"show_prices":[{"p":8160,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":714,"product_name":"双杯燕麦拿铁","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/5298306078e742a3bbc2a951c26e6a23!img","has_choose":true,"cart_num":0,"show_prices":[{"p":7200,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":715,"product_name":"双杯燕麦焦糖玛奇朵","thumb":"https:\/\/starbucks.quanma51.com\/MopPics\/202012\/209-MOPCatalog-0-342x324_2-zh.png?resize=p_4,w_228&image_process=image\/resize,w_228","has_choose":true,"cart_num":0,"show_prices":[{"p":8160,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":716,"product_name":"双杯巴旦木拿铁","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/07468ac20918497c99984ae4ad51ddd7!img","has_choose":true,"cart_num":0,"show_prices":[{"p":7200,"n":"","t":"S"}]}],"total_size":27,"next_page_token":"2","request_id":"542b04590116772b"},
-  getFoodCartList: {"total":1,"total_amount":6969,"products":[{"product_id":707,"product_name":"双杯抹茶星冰乐®","product_sku":"","specs":[{"spec_code":"Cupsize","spec_name":"杯型","spec_value_code":"Grande","spec_value_name":"大杯","image":""},{"spec_code":"Temperature","spec_name":"温度","spec_value_code":"Cold","spec_value_name":"冰","image":""},{"spec_code":"Milk","spec_name":"添加或更换牛奶","spec_value_code":"6411150","spec_value_name":"全脂牛奶","image":""},{"spec_code":"Cream","spec_name":"饮品顶部","spec_value_code":"DefaultCream","spec_value_name":"标准搅打稀奶油","image":""},{"spec_code":"MultiChangeSyrup","spec_name":"无糖风味定制\/添加","spec_value_code":"710045678","spec_value_name":"香草风味","image":""},{"spec_code":"ChangeSugar","spec_name":"甜度选择","spec_value_code":"ClassicSugar","spec_value_name":"经典糖","image":""}],"sub_name":"大杯\/冰\/全脂牛奶\/标准搅打稀奶油\/香草风味\/经典糖","num":1,"thumb":"","show_prices":[{"p":6969,"n":"","t":"S"}],"max_buy":-1,"min_buy":-1,"status":"ok","tip":""}],"total_discount_price":0,"total_market_price":5806,"request_id":"ae2b655bf20b65bf"},
+  getFoodProductList: {"lists":[{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":707,"product_name":"双杯抹茶星冰乐®","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/7b45d7de7c684b48b14725c7816c4ec9!img","has_choose":false,"cart_num":0,"show_prices":[{"p":6960,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":708,"product_name":"双杯红茶拿铁","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/c54d777ee7c34cd29a800c2e219249b0!img","has_choose":true,"cart_num":0,"show_prices":[{"p":6240,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":709,"product_name":"双杯摩卡可可碎片星冰乐®","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/%E5%8F%8C%E6%9D%AF%E6%91%A9%E5%8D%A1%E5%8F%AF%E5%8F%AF%E7%A2%8E%E7%89%87%E6%98%9F%E5%86%B0%E4%B9%90.png!img","has_choose":true,"cart_num":0,"show_prices":[{"p":7920,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":710,"product_name":"双杯拿铁","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/23787b1d58a7459086048182e9be4e22!img","has_choose":true,"cart_num":0,"show_prices":[{"p":7200,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":711,"product_name":"双杯美式咖啡","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/58026111f5ab4091ade3a931b9f07648!img","has_choose":true,"cart_num":0,"show_prices":[{"p":6480,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":712,"product_name":"双杯馥芮白®","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/%E5%8F%8C%E6%9D%AF%E9%A6%A5%E8%8A%AE%E7%99%BD.png!img","has_choose":true,"cart_num":0,"show_prices":[{"p":8400,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":713,"product_name":"双杯焦糖玛奇朵","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/49e18ceb560c476292bea632b8e7c63f!img","has_choose":true,"cart_num":0,"show_prices":[{"p":8160,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":714,"product_name":"双杯燕麦拿铁","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/5298306078e742a3bbc2a951c26e6a23!img","has_choose":true,"cart_num":0,"show_prices":[{"p":7200,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":715,"product_name":"双杯燕麦焦糖玛奇朵","thumb":"https:\/\/starbucks.quanma51.com\/MopPics\/202012\/209-MOPCatalog-0-342x324_2-zh.png?resize=p_4,w_228&image_process=image\/resize,w_228","has_choose":true,"cart_num":0,"show_prices":[{"p":8160,"n":"","t":"S"}]},{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","product_id":716,"product_name":"双杯巴旦木拿铁","thumb":"https:\/\/image.quanma51.com\/self\/mahua\/sbk\/product\/07468ac20918497c99984ae4ad51ddd7!img","has_choose":true,"cart_num":0,"show_prices":[{"p":7200,"n":"","t":"S"}]}],"total_size":27,"next_page_token":"2","request_id":"542b04590116772b"},
+  getFoodCartList: {"total":2,"total_amount":1185,"products":[{"product_id":794,"product_name":"鲜萃轻轻茉莉","product_sku":"SP3257-00010","specs":[],"sub_name":"温度\/咖啡液\/糖度\/杯型","num":1,"thumb":"https:\/\/img06.luckincoffeecdn.com\/group5\/M01\/24\/1D\/Ct1rZGhuSDGATZFPAAIB35XSyG4945.png","show_prices":[{"p":560,"n":"","t":"S"}],"max_buy":-1,"min_buy":-1,"status":"ok","tip":"","category_id":"45bff8619cf053e8697ba1d8ba8884bb"},{"product_id":1135,"product_name":"金桂花香拿铁","product_sku":"SP3414-00018","specs":[],"sub_name":"奶基\/温度\/糖度\/杯型","num":1,"thumb":"https:\/\/img02.luckincoffeecdn.com\/group5\/M00\/82\/F0\/Ct1rZGiN4-aAWpYOAA4lXwBx92g639.gif","show_prices":[{"p":625,"n":"","t":"S"}],"max_buy":-1,"min_buy":-1,"status":"ok","tip":"","category_id":"45bff8619cf053e8697ba1d8ba8884bb"}],"total_discount_price":0,"total_market_price":5500,"request_id":"35cb6f5a0db2a311"},
   getFoodCartCount: {"categories":[{"category_id":"a0aacaff0fb278c5f8127cec63ec3a53","card_num":1}],"total_num":1,"request_id":"9c2bfb2c0f6817fd"}
 }

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

@@ -45,95 +45,5 @@ export default function (data, gValue,gColor,oldData){
       }
     },
 
-    {
-      ele: 'title',
-      label: '组件样式',
-      size: 'small',
-      groupKey:'content',
-    },
-    {
-      label: "列表布局",
-      ele: "xd-style-image",
-      groupKey: 'content',
-      valueKey: "row_num",
-      value: dataVal({data, key:'row_num', dValue:2, gValue}),
-      labelInline:true,
-      className: 'input100',
-      handleCustom(cusRes) {
-        XdBus.getParentApi('getCompStylesOptions')({
-          layout_ids: 'FzCwxOH7MQpT5ISYs8Xm6',
-          key: Date.now()
-        })
-          .then(res => {
-            res.list.map(item=>{
-              item.value = Number(item.value)
-              return item;
-            })
-            cusRes.data.cb(res)
-          })
-          .catch(error => {
-            console.error(error);
-          });
-      },
-    },
-    {
-      label: "商品样式",
-      ele: "xd-style-image",
-      groupKey: 'content',
-      valueKey: "productStyle",
-      cusStyle:{marginBottom: '5px'},
-      value: customVal({
-        data,
-        key: 'productStyle',
-        fields: { 'itemBgcColorStatus':['itemBgcColor'],'bgBorder':['contBorder','bs']},
-        gValue,
-        sValue:"{\"border\":0,\"backgroundColor\":\"#fff\"}",
-      }),
-      labelInline:true,
-      className: 'input100',
-      isTplRef:true,
-      handleCustom(cusRes) {
-        XdBus.getParentApi('getCompStylesOptions')({
-          layout_ids: 'Y4oxNuIUOgVMaTD1LeWxp',
-          key: Date.now()
-        })
-          .then(res => {
-            cusRes.data.cb(res)
-          })
-          .catch(error => {
-            console.error(error);
-          });
-      },
-    },
-    {
-      label: "分类样式",
-      ele: "xd-style-image",
-      groupKey: 'content',
-      valueKey: "titleFooterStyle",
-      value: titleFooterStyle,
-      labelInline:true,
-      hidden: !(dataVal({data, key:'navStatus', dValue:'Y', gValue}) === 'Y'),
-      cusStyle:{marginBottom: '0'},
-      className: 'input100',
-      handleCustom(cusRes) {
-        XdBus.getParentApi('getCompStylesOptions')({
-          layout_ids: 'GRiS78vhPtfNXlac1WA63',
-          filter: false,
-        })
-          .then(res => {
-            cusRes.data.cb(res)
-          })
-          .catch(error => {
-            console.error(error);
-          });
-      },
-    },
-    {
-      ele: 'title',
-      label: '展示内容',
-      size: 'small',
-      groupKey:'content',
-    },
-    ...ProductAttr(data,gValue,gColor,oldData),
   ].filter(i=>i)
 }