增加退款退菜功能

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

@@ -76,7 +76,7 @@
           }"
         >
           <span v-if="isSeatFee"> ￥{{ item.totalAmount }}</span>
-          <span v-else> ￥{{ item.salePrice }}</span>
+          <span v-else> ￥{{ item.totalAmount }}</span>
         </div>
       </div>
     </div>

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

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog title="退菜" width="410px" :visible.sync="show" @close="reset">
+  <el-dialog title="退菜" width="410px" :visible.sync="show" @close="reset" :modal="modal">
     <div class="flex u-row-between u-p-b-20 border-bottom">
       <span>退菜数量</span>
       <div class="u-flex">
@@ -45,6 +45,10 @@ import numberBox from './number-box.vue';
 export default {
   components:{numberBox},
   props:{
+    modal:{
+      type:Boolean,
+      default:true
+    },
     goods:{
       type:Object,
       default:()=>{
@@ -142,4 +146,12 @@ export default {
     }
   }
 }
+::v-deep .number-box .el-input__inner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+::v-deep .number-box .el-input__inner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
 </style>

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

@@ -0,0 +1,175 @@
+<template>
+  <el-dialog
+    title="退款"
+    width="410px"
+    :visible.sync="show"
+    @close="reset"
+    :modal="modal"
+  >
+    <div class="u-flex font-bold color-333">
+      {{ goods.productName }}
+    </div>
+    <div class="u-flex  color-999 u-m-t-4">
+      {{ goods.productSkuName||'' }}
+    </div>
+    <div class="flex u-row-between u-p-b-16 u-m-t-10 border-bottom">
+      <span>退款数量</span>
+      <div class="u-flex">
+        <number-box v-model="number" :min="1" :max="max"></number-box>
+      </div>
+    </div>
+    <div class="u-m-t-12 u-font-12 color-999">菜品已点数量 {{ max }} 份</div>
+    <div class="u-flex u-m-t-12 ">
+        <span>支付金额</span>
+        <span class="">￥{{ goods.priceAmount  }}</span>
+    </div>
+    <div class="u-flex u-m-t-12 ">
+        <span>退款金额</span>
+        <span class="color-red font-bold">￥{{ goods.price * number|to2 }}</span>
+    </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="tag"
+        v-for="(tag, index) in tags"
+        @click="changeSel(tag)"
+        :key="index"
+        :class="{ active: tag.checked }"
+      >
+        {{ tag.label }}
+      </div>
+    </div>
+    <div class="u-m-t-20">
+      <el-input
+        v-model="note"
+        size="medium"
+        placeholder="请输入自定义备注"
+      ></el-input>
+    </div>
+    <div slot="footer">
+      <el-button size="medium" @click="close"> 取消 </el-button>
+      <el-button size="medium" type="primary" @click="confirm">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+  <script>
+import numberBox from "./number-box.vue";
+export default {
+  components: { numberBox },
+  props: {
+    modal: {
+      type: Boolean,
+      default: true,
+    },
+    goods: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    max: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      number: 1,
+      isPrint: false,
+      tagSel: -1,
+      show: false,
+      tags: [
+        { label: "不想要了", checked: false },
+        { label: "食材不足", checked: false },
+        { label: "等待时间过长", checked: false },
+      ],
+      note: "",
+    };
+  },
+  filters:{
+    to2(val){
+      return val.toFixed(2);
+    }
+  },
+  methods: {
+    changeSel(item) {
+      item.checked = !item.checked;
+    },
+    reset() {
+      this.note = "";
+      this.number = 1;
+      console.log(this.number);
+    },
+    delTag(index) {
+      this.tags.splice(index, 1);
+    },
+    addNote(tag) {
+      if (this.note.length <= 0) {
+        return (this.note = tag);
+      }
+      this.note = tag + "," + this.note;
+    },
+    open(note) {
+      this.show = true;
+      this.number = 1;
+    },
+    close() {
+      this.show = false;
+      this.number = 1;
+    },
+    confirm() {
+      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();
+    },
+  },
+  mounted() {},
+};
+</script>
+  
+  <style lang="scss" scoped>
+::v-deep .el-tag {
+  margin-top: 10px;
+  margin-right: 10px;
+  margin-bottom: 5px;
+  cursor: pointer;
+  font-size: 15px;
+  line-height: 35px;
+  height: 35px;
+}
+.tags {
+  .tag {
+    margin: 10px 10px 0 0;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    padding: 10px 13px;
+    font-size: 14px;
+    color: #000;
+    cursor: pointer;
+    &.active {
+      color: #1890ff;
+      background: #e8f4ff;
+      border-color: #a3d3ff;
+    }
+  }
+}
+::v-deep .number-box .el-input__inner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+::v-deep .number-box .el-input__inner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>