fix: 订单管理页面调整增加退款功能，代客下单调整

src/views/tool/Instead/components/order.vue

@@ -2,16 +2,28 @@
   <div class="order-box">
     <div class="left">
       <div class="user bg-fff u-p-20">
-        <div class="userinfo">
+        <div class="userinfo" v-if="user.id" @click="chooseUser">
           <el-avatar class="avatar" :size="50" />
           <div class="u-m-l-12">
             <p>
-              <span class="name u-font-16">hh</span>
-              <span class="vip">VIP1</span>
+              <span class="name u-font-16">{{ user.nickName }}</span>
+              <span class="vip" v-if="user.isVip">>VIP{{ user.isVip }}</span>
             </p>
             <p class="u-font-14 color-666 u-m-t-10">
-              <span class="money">余额：4.00</span>
-              <span class="score u-m-l-10">积分：0</span>
+              <span class="money">余额：{{ user.amount }}</span>
+              <span class="score u-m-l-10">积分：{{ user.accountPoints }}</span>
+            </p>
+          </div>
+        </div>
+        <div class="userinfo" v-else @click="chooseUser">
+          <el-avatar class="avatar" :size="50" />
+          <div class="u-m-l-12">
+            <p>
+              <span class="name u-font-16">服务员下单</span>
+            </p>
+            <p class="u-font-14 color-666 u-m-t-10">
+              <span class="money">余额：</span>
+              <span class="score u-m-l-10">积分：</span>
             </p>
           </div>
         </div>
@@ -32,7 +44,7 @@
             <span>积分不足或小于最低使用门槛1</span>
           </p>
         </div>
-        <div class="u-flex u-col-center u-m-t-20">
+        <div class="u-flex u-col-center u-m-t-20 no-wrap">
           <span class="u-font-14 font-bold u-m-r-20">团购代金券</span>
           <div class="u-flex my-select">
             <span class="u-m-r-10">代金券名称</span>
@@ -40,7 +52,7 @@
           </div>
           <svg-icon iconClass="scan" size="30" class="u-m-l-10 cur-pointer"></svg-icon>
         </div>
-        <div class="u-flex u-col-center u-m-t-20">
+        <div class="u-flex u-col-center u-m-t-20 no-wrap">
           <span class="u-font-14 font-bold u-m-r-20">优惠券</span>
           <div class="u-flex my-select">
             <span class="u-m-r-10">选择优惠券</span>
@@ -56,17 +68,17 @@
         <p class="u-font-16 font-bold u-m-r-20 font-bold">选择支付方式</p>
         <div class="u-m-t-20">
           <el-button
-            v-for="(item, index) in payType.list"
+            v-for="(item, index) in payTypes.list"
             :key="index"
             size="large"
-            :type="index == payType.sel ? 'primary' : ''"
+            :type="index == payTypes.sel ? 'primary' : ''"
             @click="changePayType(index)"
           >
-            {{ item.label }}
+            {{ item.payName }}
           </el-button>
         </div>
         <div class="u-m-t-20">
-          <el-button type="primary" size="large">立即支付</el-button>
+          <el-button type="primary" size="large" @click="nowPayClick">立即支付</el-button>
         </div>
       </div>
     </div>
@@ -75,30 +87,30 @@
       <div class="order-info">
         <div class="u-flex u-m-b-10 u-row-between">
           <span class="title">订单号：</span>
-          <span class="u-m-l-10 value">202111111111111111</span>
+          <span class="u-m-l-10 value">{{ orderInfo.orderNo }}</span>
         </div>
         <div class="u-flex u-m-b-10 u-row-between">
-          <span class="title">门店优惠</span>
-          <span class="u-m-l-10 value"></span>
+          <span class="title">餐位费</span>
+          <span class="u-m-l-10 value">{{ orderInfo.seatAmount }}</span>
         </div>
         <div class="u-flex u-m-b-10 u-row-between">
-          <span class="title">优惠券</span>
-          <span class="u-m-l-10 value"></span>
-        </div>
-        <div class="u-flex u-m-b-10 u-row-between">
-          <span class="title">积分抵扣</span>
-          <span class="u-m-l-10 value"></span>
-        </div>
-        <div class="u-flex u-m-b-10 u-row-between">
-          <span class="title">整单改价</span>
-          <span class="u-m-l-10 value"></span>
-        </div>
-        <div class="u-flex u-m-b-10 u-row-between">
-          <span class="title">餐位费/附加费</span>
-          <span class="u-m-l-10 value"></span>
+          <span class="title">打包费</span>
+          <span class="u-m-l-10 value">{{ orderInfo.packFee }}</span>
         </div>
         <div class="u-flex u-m-b-10 u-row-between">
           <span class="title">总价</span>
+          <span class="u-m-l-10 value">{{ orderInfo.orderAmount }}</span>
+        </div>
+        <div class="u-flex u-m-b-10 u-row-between">
+          <span class="title">优惠券</span>
+          <span class="u-m-l-10 value">{{ coupDiscount }}</span>
+        </div>
+        <div class="u-flex u-m-b-10 u-row-between">
+          <span class="title">积分抵扣</span>
+          <span class="u-m-l-10 value">{{ orderInfo.pointsDiscountAmount || 0 }}</span>
+        </div>
+        <div class="u-flex u-m-b-10 u-row-between">
+          <span class="title">整单改价</span>
           <span class="u-m-l-10 value"></span>
         </div>
         <div class="u-flex u-m-b-10 u-row-between">
@@ -107,33 +119,151 @@
         </div>
         <div class="u-flex u-m-b-10 u-row-between">
           <span class="title">应付金额</span>
-          <span class="u-m-l-10 value"></span>
+          <span class="u-m-l-10 value">{{ payMoney }}</span>
         </div>
       </div>
     </div>
+    <!-- 扫码 -->
+    <scanPay ref="refScanPay" :order="orderInfo"></scanPay>
+    <!-- 打折 -->
+    <discount ref="refDiscount" @confirm="discountConfirm"></discount>
   </div>
 </template>
 
 <script  setup>
+import payTypeApi from "@/api/account/payType";
+import payApi from "@/api/order/pay";
+import scanPay from "./scan-pay.vue";
+import discount from "./discount.vue";
+
+import { ElMessage, ElMessageBox } from "element-plus";
+
+//打折
+const refDiscount = ref();
+const checkOrderPay = reactive({
+  discountAmount: 0, //手动优惠金额
+});
+function discountConfirm(e) {
+  console.log(e);
+  checkOrderPay.discountAmount = e.reduceMoney;
+}
+function discountShow(e) {
+  refDiscount.value.open({
+    amount: props.orderInfo.originAmount,
+  });
+}
+
+const props = defineProps({
+  table: {
+    type: Object,
+    default: () => {},
+  },
+  user: {
+    type: Object,
+    default: () => {},
+  },
+  orderInfo: {
+    type: Object,
+    default: () => {},
+  },
+});
+const emits = defineEmits(["chooseUser", "paysuccess"]);
+function chooseUser() {
+  emits("chooseUser");
+}
+const coupDiscount = computed(() => {
+  const total =
+    props.orderInfo.fullCouponDiscountAmount * 1 + props.orderInfo.productCouponDiscountAmount * 1;
+  if (total <= 0) {
+    return 0;
+  }
+  return total.toFixed(2);
+});
 const score = ref({
   list: [],
   sel: 0,
 });
-const emits = defineEmits(["discountShow"]);
-function discountShow() {
-  emits("discountShow");
-}
-const payType = reactive({
-  list: [
-    { label: "现金", value: "" },
-    { label: "扫码支付", value: "" },
-    { label: "会员支付", value: "" },
-  ],
+
+const payTypes = reactive({
+  list: [],
   sel: 0,
 });
+
+const refScanPay = ref();
 function changePayType(i) {
-  payType.sel = i;
+  if (payTypes.list[i].payType === "scanCode") {
+    return refScanPay.value.open({
+      money: props.orderInfo.orderAmount,
+      shopId: localStorage.getItem("shopId"),
+      checkOrderPay: {
+        orderId: props.orderInfo.id,
+        discountRatio: 1,
+        orderAmount: props.orderInfo.orderAmount,
+        seatNum: props.orderInfo.seatNum,
+        originAmount: props.orderInfo.originAmount,
+        discountAmount: props.orderInfo.discountAmount,
+        productCouponDiscountAmount: props.orderInfo.productCouponDiscountAmount,
+        orderAmount: props.orderInfo.orderAmount,
+        roundAmount: props.orderInfo.roundAmount,
+        pointsDiscountAmount: props.orderInfo.pointsDiscountAmount,
+        pointsNum: props.orderInfo.pointsNum,
+        fullCouponDiscountAmount: props.orderInfo.fullCouponDiscountAmount,
+      },
+    });
+  }
+  payTypes.sel = i;
 }
+async function getPaytype() {
+  const res = await payTypeApi.getList();
+  payTypes.list = res;
+}
+function nowPayClick() {
+  const payType = payTypes.list[payTypes.sel].payType;
+  console.log(payType);
+  if (payType === "cash") {
+    ElMessageBox.confirm("是否确认已现金收款：" + payMoney.value + "元", "快捷支付", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    })
+      .then(() => {
+        payApi
+          .cashPay({
+            shopId: localStorage.getItem("shopId"),
+            checkOrderPay: {
+              orderId: props.orderInfo.id,
+              discountRatio: 1,
+              orderAmount: props.orderInfo.orderAmount,
+              seatNum: props.orderInfo.seatNum,
+              originAmount: props.orderInfo.originAmount,
+              discountAmount: props.orderInfo.discountAmount,
+              productCouponDiscountAmount: props.orderInfo.productCouponDiscountAmount,
+              orderAmount: props.orderInfo.orderAmount,
+              roundAmount: props.orderInfo.roundAmount,
+              pointsDiscountAmount: props.orderInfo.pointsDiscountAmount,
+              pointsNum: props.orderInfo.pointsNum,
+              fullCouponDiscountAmount: props.orderInfo.fullCouponDiscountAmount,
+            },
+          })
+          .then((res) => {
+            ElMessage.success("支付成功");
+            emits("paysuccess");
+          });
+      })
+      .catch(() => {});
+    return;
+  }
+}
+
+const payMoney = computed(() => {
+  if (!props.orderInfo.orderAmount) {
+    return "";
+  }
+  return (props.orderInfo.orderAmount - checkOrderPay.discountAmount).toFixed(2);
+});
+onMounted(() => {
+  getPaytype();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -141,6 +271,7 @@ function changePayType(i) {
   display: flex;
   align-items: center;
   line-height: 1;
+  cursor: pointer;
 }
 .vip {
   padding: 2px 5px;