cashier-web/src/views/tool/Instead/components/order.vue

<template>
  <div class="order-box">
    <div class="left">
      <div class="user bg-fff u-p-20">
        <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">{{ 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">余额：{{ 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>
        <div class="score">
          <div class="u-flex u-col-center u-m-t-10">
            <span class="u-font-14 font-bold u-m-r-20">积分抵扣</span>
            <el-radio-group v-model="score.sel" size="small" class="">
              <el-radio :value="0">
                <span class="u-font-14">全部抵扣</span>
              </el-radio>
              <el-radio :value="1">
                <span class="u-font-14">部分抵扣</span>
              </el-radio>
            </el-radio-group>
          </div>
          <p class="u-font-14 color-666 u-m-t-10">
            <span class="color-red">*</span>
            <span>积分不足或小于最低使用门槛1</span>
          </p>
        </div>
        <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>
            <el-icon><ArrowDown /></el-icon>
          </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 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>
            <el-icon><ArrowDown /></el-icon>
          </div>
        </div>
      </div>

      <div class="u-m-t-30">
        <el-button size="large" @click="discountShow">整单打折/减免</el-button>
      </div>
      <div class="u-m-t-30">
        <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 payTypes.list"
            :key="index"
            size="large"
            :type="index == payTypes.sel ? 'primary' : ''"
            @click="changePayType(index)"
          >
            {{ item.payName }}
          </el-button>
        </div>
        <div class="u-m-t-20">
          <el-button type="primary" size="large" @click="nowPayClick">立即支付</el-button>
        </div>
      </div>
    </div>
    <div class="right">
      <h3>账单明细</h3>
      <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">{{ 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">{{ 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">{{ 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">
          <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">{{ 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 payTypes = reactive({
  list: [],
  sel: 0,
});

const refScanPay = ref();
function changePayType(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>
.userinfo {
  display: flex;
  align-items: center;
  line-height: 1;
  cursor: pointer;
}
.vip {
  padding: 2px 5px;
  background: #f7793d;
  color: #fff;
  border-radius: 4px;
  margin-left: 10px;
  font-size: 10px;
}
.order-box {
  display: flex;
  padding: 20px 20px;
  background-color: #f7f7fa;
  min-height: 100%;
  .left,
  .right {
    flex: 1;
  }
  .left {
    padding-right: 20px;
  }
  .right {
    border-left: 1px solid #ebebeb;
    padding-left: 20px;
    .order-info {
      font-size: 14px;
      .title {
      }
      .value {
      }
      .price {
        color: #fa5555;
        font-size: 20px;
      }
    }
  }
}
.my-select {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  margin-left: 12px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  padding: 8px 10px 8px 20px;
}
</style>