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

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 {

src/views/tool/Instead/components/number-box.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div class="flex">
+      <i class="icon-remove" @click="reduce"></i>
+      <div style="width: 40px" class="number-box">
+        <el-input
+          :min="min"
+          :max="max"
+          type="number"
+          v-model="number"
+          placeholder="0"
+          @blur="valChange(number, true)"
+          @input="valChange"
+        ></el-input>
+      </div>
+      <!-- <i class="el-icon-remove"></i> -->
+      <i class="el-icon-circle-plus icon-add" @click="add"></i>
+    </div>
+  </div>
+</template>
+<script>
+import { formatPrice } from "@/utils/format";
+
+export default {
+  props: {
+    modelValue: {
+      type: Number,
+      default: 1,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: Infinity,
+    },
+  },
+  watch: {
+    min(val) {
+      this.number = val;
+    },
+  },
+  data() {
+    return { number: 1 };
+  },
+  methods: {
+    valChange(val, isNow = false) {
+      console.log(val);
+      const max = this.max;
+      const min = this.min;
+      const returnNewval = formatPrice(val, min, max, true);
+      let newval = 0;
+      if (typeof returnNewval !== "number") {
+        newval = returnNewval.value;
+      } else {
+        newval = returnNewval;
+      }
+      newval=parseInt(newval);
+      console.log(newval);
+      if (isNow) {
+        this.number = newval;
+        this.$emit("input", this.number);
+        return;
+      }
+      setTimeout(() => {
+        this.number = newval;
+        this.$emit("input", this.number);
+      }, 100);
+    },
+    emitInput() {
+      this.$emit("input", this.number);
+    },
+    reduce() {
+      if (this.number > this.min) {
+        this.number--;
+        this.emitInput();
+      }
+    },
+    add() {
+      if (this.number < this.max) {
+        this.number++;
+        this.$emit("input", this.number);
+      }
+    },
+  },
+  mounted(){
+    this.number = this.modelValue;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .number-box .el-input__inner {
+  border: none;
+}
+.icon-add {
+  color: #1890ff;
+  font-size: 22px;
+  cursor: pointer;
+}
+.icon-remove {
+  border: 1px solid #d8d8d8;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &::after {
+    content: "";
+    display: block;
+    width: 10px;
+    height: 1px;
+    background: #999;
+  }
+}
+</style>

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

@@ -1,10 +1,19 @@
 <template>
   <el-dialog title="退菜" width="410px" :visible.sync="show" @close="reset">
-    <div>
+    <div class="flex u-row-between u-p-b-20 border-bottom">
+      <span>退菜数量</span>
+      <div class="u-flex">
+        <number-box v-model="number" :min="1" :max="2"></number-box>
+      </div>
+    </div>
+    <div class="u-m-t-10 u-font-12 color-999">
+      菜品已点数量 2 份
+    </div>
+    <div class="u-m-t-26">
       <div><span>退菜原因</span> <span class="color-red">*</span></div>
     </div>
 
-    <div class="u-flex u-flex-wrap tags">
+    <div class="u-flex u-flex-wrap tags ">
       <div
         class="tag"
         v-for="(tag, index) in tags"
@@ -23,9 +32,7 @@
       ></el-input>
     </div>
     <div class="u-m-t-20">
-      <el-checkbox v-model="isPrint" 
-        >打印退菜单</el-checkbox
-      >
+      <el-checkbox v-model="isPrint">打印退菜单</el-checkbox>
     </div>
     <div slot="footer">
       <el-button size="medium" @click="close"> 取消 </el-button>
@@ -34,20 +41,35 @@
   </el-dialog>
 </template>
   <script>
+import numberBox from './number-box.vue';
 export default {
+  components:{numberBox},
+  props:{
+    goods:{
+      type:Object,
+      default:()=>{
+        return{}
+      }
+    }
+  },
   data() {
     return {
-        isPrint:false,
+      number:1,
+      isPrint: false,
       tagSel: -1,
       show: false,
-      tags: [{label:"不想要了",checked:false} ,{label:"食材不足",checked:false} ,{label:"等待时间过长",checked:false}],
+      tags: [
+        { label: "不想要了", checked: false },
+        { label: "食材不足", checked: false },
+        { label: "等待时间过长", checked: false },
+      ],
       note: "",
     };
   },
 
   methods: {
     changeSel(item) {
-      item.checked = !item.checked ;
+      item.checked = !item.checked;
     },
     reset() {
       this.note = "";
@@ -68,7 +90,13 @@ export default {
       this.show = false;
     },
     confirm() {
-      this.$emit("confirm", this.note);
+      const selTag=this.tags.filter(item=>item.checked).map(item=>item.label).join(",")
+      const note=selTag+(this.note.length>0?","+this.note:"");
+      console.log(note)
+      if(!note){
+        return this.$message.error("请输入退菜原因");
+      }
+      this.$emit("confirm", {note:note,num:this.number});
       this.close();
     },
   },