zhywpt-sp/orders/cancel-order.vue

<!-- 取消订单 -->
<template>
  <view class="form">
    <form-builder
      :formData="state.formData"
      :config="config"
      @submit="doCancelOrder"
    />
  </view>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { request } from "@/utils/network/request.js";
import { msg, confirm, getOrderStatusName } from "@/utils/utils";
import { cancelOrder } from "@/utils/network/api";
import { getItem, StorageKeys } from "@/utils/storage";

const config = {
  submitName: "取消订单", //按钮名称(默认提交)
  titleWidth: 160, //标题最小宽度
};

const state = reactive({
  orderInfo: {} as any, //订单数据
  formData: [
    {
      title: "订单编号",
      inputType: "number",
      type: 2,
      value: "orderNumber",
      bg: true,
      hint: "订单编号",
      disabled: true,
    },
    {
      title: "订单车牌号",
      type: 2,
      value: "carNumber",
      bg: true,
      hint: "订单车牌号",
      disabled: true,
    },
    {
      title: "订单状态",
      type: 2,
      value: "orderStatus",
      bg: true,
      hint: "订单状态",
      disabled: true,
    },
    {
      title: "请输入取消原因",
      required: true,
      type: 5,
      vertical: 2,
      value: "orderReason",
      maxlength: 100,
      bg: true,
      hint: "限制100字符以内",
      emptyHint: "请输入取消的原因",
    },
  ],
});

//取消订单
const doCancelOrder = (e: any) => {
  confirm(
    "是否确认取消订单",
    () => {
      const options = {
        type: 2,
        data: {
          id: state.orderInfo.id,
          source: "WECHAT",
          reason: e.orderReason,
          opId: getItem(StorageKeys.OpenId),
        },
        method: "POST",
        showLoading: true,
      };
      request(cancelOrder, options).then((res) => {
        cancelOrderSuccess();
      });
    },
    "取消确认"
  );
};

const cancelOrderSuccess = () => {
  const content =
    state.orderInfo.orderStep == 4
      ? "您的订单已取消"
      : "您的订单已取消，我们将在1-2个工作日内将费用原路退回";
  confirm(
    content,
    () => {
      uni.$emit("refreshOrder");
      uni.navigateBack();
    },
    "取消成功",
    false
  );
};

onLoad((options) => {
  state.orderInfo = JSON.parse(options.data) ?? {};
  state.formData[0].hint = state.orderInfo.orderId;
  state.formData[1].hint = state.orderInfo.vehiclePlate;
  state.formData[2].hint = getOrderStatusName(state.orderInfo.orderStep);
});
</script>

<style lang="scss" scoped>
.form {
  border-top: 1px solid #f7f7f7;
  padding: 20rpx;
}
</style>