代课下单添加显示

src/views/tool/Instead/components/cart-item.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
+  <div class="flex order-item u-m-b-14 relative" :class="[isActive]" @click="itemClick">
-    class="flex order-item u-m-b-14 relative"
-    :class="[isActive]"
-    @click="itemClick"
-  >
     <div class="absolute status-box">
       <span class="pack" v-if="item.isPack === 'true'"> 包 </span>
       <span class="da" v-if="item.isPrint || item.isPrint === null"> 打 </span>
@@ -12,16 +8,10 @@
     </div>
     <div class="flex u-col-top">
       <div class="img">
-        <div
+        <div class="isSeatFee img u-line-1 u-flex u-col-center u-row-center" v-if="isSeatFee">
-          class="isSeatFee img u-line-1 u-flex u-col-center u-row-center"
-          v-if="isSeatFee"
-        >
           <span>{{ item.name }}</span>
         </div>
-        <div
+        <div class="isSeatFee img u-line-1 u-flex u-col-center u-row-center" v-else-if="!item.productId">
-          class="isSeatFee img u-line-1 u-flex u-col-center u-row-center"
-          v-else-if="!item.productId"
-        >
           <span> 临时菜 </span>
         </div>
         <img v-else :src="item.coverImg" class="" alt="" />
@@ -31,9 +21,7 @@
           <div class="name" :class="{ 'free-price': item.status === 'return' }">
             {{ item.name }}
           </div>
-          <span class="good_info_discount" v-if="item.isGift === 'true'"
+          <span class="good_info_discount" v-if="item.isGift === 'true'">赠</span>
-            >赠</span
-          >
         </div>
         <div v-if="item.typeEnum == 'weight'" class="specSnap">
           ￥{{ currentPrice }}/{{ item.unit }}
@@ -41,6 +29,12 @@
         <div v-if="item.specSnap" class="specSnap">
           {{ item.specSnap }}
         </div>
+        <div v-if="item.proGroupInfo" class="specSnapss">
+          <span>{{ item.groupType == 0 ? '固定套餐' : '可选套餐' }}:</span>
+          <span v-for="(a, b) in proGroupInfo" :key="a.proId">
+            {{ b == 0 ? '' : ',' }}{{ a.proName }}
+          </span>
+        </div>
 
         <div class="" v-if="placeNum == 0">
           <div class="note" v-if="item.note">备注:{{ item.note }}</div>
@@ -62,19 +56,10 @@
           <div class="order-input-number">
             <i class="icon-remove" @click="changeOrderNumber(true)"></i>
             <div style="width: 40px" class="number-box">
-              <el-input
+              <el-input :min="0" type="number" @input="cartGoodsNumberInput" @change="cartGoodsNumberChange"
-                :min="0"
+                v-model="number" placeholder="0"></el-input>
-                type="number"
-                @input="cartGoodsNumberInput"
-                @change="cartGoodsNumberChange"
-                v-model="number"
-                placeholder="0"
-              ></el-input>
             </div>
-            <i
+            <i class="el-icon-circle-plus icon-add" @click="changeOrderNumber(false)"></i>
-              class="el-icon-circle-plus icon-add"
-              @click="changeOrderNumber(false)"
-            ></i>
           </div>
         </div>
       </div>
@@ -99,11 +84,9 @@
             <div v-if="isShowVipPrice && vipAllPrice != allPrice">
               ￥{{ vipAllPrice }}
             </div>
-            <div
+            <div :class="{
-              :class="{
               'free-price': isShowVipPrice && vipAllPrice != allPrice,
-              }"
+            }">
-            >
               <span> ￥{{ allPrice }}</span>
             </div>
           </div>
@@ -173,6 +156,9 @@ export default {
       }
       return this.memberPrice ? this.memberPrice : this.item.salePrice
     },
+    proGroupInfo() {
+      return JSON.parse(this.item.proGroupInfo)
+    },
     discountNewPrice() {
       const item = this.item;
       const originPrice = this.isShowVipPrice ? this.vipAllPrice : this.allPrice
@@ -254,19 +240,23 @@ export default {
 ::v-deep .number-box .el-input__inner {
   border: none;
 }
+
 ::v-deep .el-button--text {
   color: #000;
 }
+
 ::v-deep .number-box .el-input__inner {
   border: none;
   padding: 0 4px;
   text-align: center;
 }
+
 .isSeatFee {
   background: #3f9eff;
   color: #fff;
   font-size: 12px;
 }
+
 .icon-remove {
   border: 1px solid #d8d8d8;
   width: 22px;
@@ -286,11 +276,13 @@ export default {
     background: #999;
   }
 }
+
 .icon-add {
   color: rgb(34, 191, 100);
   font-size: 22px;
   cursor: pointer;
 }
+
 .flex.order-item {
   padding: 4px;
   border-radius: 2px;
@@ -301,6 +293,7 @@ export default {
   justify-content: space-between;
   background-color: rgba(0, 0, 0, 0);
   transition: all 0.3s;
+
   .status-box {
     width: 18px;
     position: absolute;
@@ -309,6 +302,7 @@ export default {
     display: flex;
     flex-direction: column;
     gap: 2px;
+
     >span {
       display: block;
       width: 18px;
@@ -320,9 +314,11 @@ export default {
       color: #fff;
     }
   }
+
   .isWaitCall {
     background: #d3adf7;
   }
+
   .pack {
     background: #35ac6a;
   }
@@ -330,9 +326,11 @@ export default {
   .da {
     background: #35ac6a;
   }
+
   .tui {
     background: #ac4735;
   }
+
   &.active {
     background-color: rgba(0, 0, 0, 0.04);
   }
@@ -354,6 +352,27 @@ export default {
       font-size: 12px;
       margin-top: 3px;
     }
+
+    .specSnapss {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: wrap;
+      color: #999;
+      font-size: 12px;
+      margin-top: 3px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+
+      .specSnap {
+        color: #999;
+        font-size: 12px;
+        margin-top: 3px;
+      }
+    }
   }
 
   .name {
@@ -375,6 +394,7 @@ export default {
     }
   }
 }
+
 .note {
   max-width: 70%;
   font-size: 12px;
@@ -384,6 +404,7 @@ export default {
   margin-top: 5px;
   word-break: break-all;
 }
+
 .order-number-box {
   position: relative;
 
@@ -415,6 +436,7 @@ export default {
     }
   }
 }
+
 .good_info_discount {
   height: 16px;
   padding: 0 3px;