更新页面样式，增加退菜数量选择以及退款原因

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

@@ -1,8 +1,12 @@
 <template>
-  <div class="flex order-item relative" :class="[isActive]" @click="itemClick">
+  <div
+    class="flex order-item u-m-b-14 relative"
+    :class="[isActive]"
+    @click="itemClick"
+  >
     <span class="absolute pack" v-if="item.isPack === 'true'"> 包 </span>
     <span class="absolute tui" v-if="item.status === 'return'"> 退 </span>
-    <div class="flex">
+    <div class="flex u-col-top">
       <div class="img">
         <div
           class="isSeatFee img u-line-1 u-flex u-col-center u-row-center"
@@ -12,7 +16,7 @@
         </div>
         <img v-else :src="item.coverImg" class="" alt="" />
       </div>
-      <div class="good-info">
+      <div class="good-info u-p-t-6">
         <div class="flex lh-16">
           <div class="name" :class="{ 'free-price': item.status === 'return' }">
             {{ item.name }}
@@ -24,13 +28,23 @@
         <div v-if="item.specSnap" class="specSnap">
           {{ item.specSnap }}
         </div>
-        <template v-if="item.note">
-          <div class="note">备注:{{ item.note || "" }}</div>
-        </template>
+
+        <div class="" v-if="placeNum == 0">
+          <div class="note" v-if="item.note">
+            备注:{{ item.note || "" }}
+          </div>
+          <div class="note flex" v-else>
+            <span>备注:</span>
+            <span class="el-icon-edit u-font-12" @click="editNote"></span>
+          </div>
+        </div>
+        <div class="note" v-if="placeNum != 0 && item.note">
+          备注:{{ item.note || "" }}
+        </div>
       </div>
     </div>
-    <div class="flex">
-      <div class="order-number-box">
+    <div class="flex u-p-t-6">
+      <div class="order-number-box u-font-12">
         <div class="" v-if="isSeatFee">X{{ item.totalNumber }}</div>
         <div class="" v-else>X{{ item.number }}</div>
         <div class="absolute" v-if="canChangeNumber">
@@ -136,6 +150,11 @@ export default {
     this.number = this.item.number;
   },
   methods: {
+    editNote() {
+      if (this.placeNum === 0) {
+        this.$emit("editNote", this.index);
+      }
+    },
     //购物车商品输入框数量改变
     cartGoodsNumberChange(newval) {
       if (newval <= 0) {
@@ -207,13 +226,13 @@ export default {
   font-size: 22px;
   cursor: pointer;
 }
-.order-item {
+.flex.order-item {
   padding: 4px;
   border-radius: 2px;
   display: flex;
   overflow: visible;
   cursor: pointer;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   background-color: rgba(0, 0, 0, 0);
   transition: all 0.3s;
@@ -245,6 +264,7 @@ export default {
 
   .total-price {
     width: 94px;
+    font-size: 16px;
     text-align: right;
   }
 
@@ -269,25 +289,25 @@ export default {
   }
 
   .img {
-    width: 40px;
-    height: 40px;
+    width: 59px;
+    height: 59px;
     position: relative;
     margin-right: 10px;
 
     img {
-      width: 40px;
-      height: 40px;
+      width: 59px;
+      height: 59px;
     }
   }
 }
-.note{
+.note {
   max-width: 70%;
-    font-size: 12px;
-    font-weight: 400;
-    text-align: left;
-    color: #999;
-    margin-top: 2px;
-    word-break: break-all;
+  font-size: 12px;
+  font-weight: 400;
+  text-align: left;
+  color: #999;
+  margin-top: 5px;
+  word-break: break-all;
 }
 .order-number-box {
   position: relative;
@@ -295,8 +315,8 @@ export default {
   .absolute {
     width: 60px;
     height: 40px;
-    right: -30px;
-    top: -12px;
+    right: -38px;
+    top: -14px;
     position: absolute;
 
     .order-input-number {