增加退款退菜功能

src/api/table.js

@@ -439,3 +439,14 @@ export function $getOrderPayUrl(data) {
     }
   });
 }
+//退款
+export function $returnOrder(data) {
+  return request({
+    url: '/api/place/returnOrder',
+    method: "post",
+    data:{
+      shopId: localStorage.getItem("shopId"),
+      ...data
+    }
+  });
+}

src/views/order_manage/components/orderDetail.vue

@@ -130,12 +130,12 @@
               ￥{{ scope.row.priceAmount }}
             </template>
           </el-table-column>
-          <!-- <el-table-column label="操作">
+          <el-table-column label="操作">
             <template v-slot="scope">
               <el-button v-if="detail.status=='closed'" type="text" size="mini" @click="tuikuan(scope.row)"><span >退款</span></el-button>
               <el-button v-if="detail.status=='unpaid'" type="text" size="mini" @click="tuiCai(scope.row)"><span >退菜</span></el-button>
             </template>
-          </el-table-column> -->
+          </el-table-column>
         </el-table>
       </div>
       <!-- </el-tab-pane> -->
@@ -199,6 +199,19 @@
         -->
       <!-- </el-tabs> -->
     </div>
+    <return-cart
+    :modal="false"
+      ref="refReturnCart"
+      :max="selGoods.num"
+      @confirm="refReturnCartConfirm"
+    ></return-cart>
+    <return-money
+    :modal="false"
+      ref="refReturnMoney"
+      :max="selGoods.num"
+      :goods="selGoods"
+      @confirm="refReturnMoneyConfirm"
+    ></return-money>
   </el-drawer>
 </template>
 
@@ -206,8 +219,14 @@
 import orderEnum from "../orderEnum";
 import dayjs from "dayjs";
 import { tbOrderInfoDetail, tbOrderInfoData } from "@/api/order";
-
+import returnCart from "@/views/tool/Instead/components/return-cart.vue";
+import returnMoney from "@/views/tool/Instead/components/return-money.vue";
+import {
+  $returnCart,$returnOrder
+} from "@/api/table";
 export default {
+  components: { returnCart,returnMoney },
+
   data() {
     return {
       orderEnum,
@@ -215,7 +234,8 @@ export default {
       type: "1",
       detail: "",
       loading: false,
-      refoundList: []
+      refoundList: [],
+      selGoods:{num:1}
     };
   },
   filters: {
@@ -249,11 +269,37 @@ export default {
     }
   },
   methods: {
-    tuikuan(item){
+    async refReturnMoneyConfirm(e){
-
+      const res = await $returnOrder({
+        ...e,
+        orderId:this.detail.id,
+        orderDetails:[{
+          id:this.selGoods.id,
+          num:e.num
+        }]
+      });
+      this.update();
     },
-    tuiCaidan(item){ 
+    update(){
-
+      this.tbOrderInfoDetail(this.detail.id);
+    },
+    async refReturnCartConfirm(e){
+      const res = await $returnCart({
+        ...e,
+        cartId: this.selGoods.id,
+        tableId: this.detail.tableId,
+      });
+      this.update();
+    },
+    tuikuan(item){
+      this.selGoods=item;
+      console.log(item);
+      this.$refs.refReturnMoney.open(item);
+    },
+    tuiCai(item){ 
+      this.selGoods=item;
+      console.log(item);
+      this.$refs.refReturnCart.open(item);
     },
     // 切换类型
     getTableData() {

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>