页面结构优化

ebike-operate/src/views/form/cyclingorderrefund/refundorderrevie/RefundOrderRevie.vue

@@ -0,0 +1,243 @@
+<template>
+  <a-divider></a-divider>
+  <a-form
+    label-align="left"
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 18 }"
+  >
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="订单金额"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>{{costInfo.totalAmount}} 元
+            <span class="spanCss">
+              = 起步费用：{{costInfo.startupCost}} 元 + 时长费用：{{costInfo.durationCost}} 元
+              + 调度费：{{costInfo.dispatchFee}} 元
+            </span>
+          </span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="调度费用"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>{{costInfo.dispatchFee}} 元
+            <span class="spanCss">
+              = 运营区外调度费用：{{costInfo.dispatchFeeOutOperateArea}} 元 + 禁停区调度费：{{costInfo.dispatchFeeBanArea}} 元
+              + 停车区外调度费：{{costInfo.parkingAreaOutDispatchFee}} 元 + 头盔管理费：{{costInfo.helmetManagementFee}} 元
+              + 不规范停车费：{{costInfo.improperParkFee}} 元
+            </span>
+          </span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="实付金额"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>{{costInfo.actualAmount}} 元
+            <span class="spanCss">
+              = 订单金额：{{costInfo.totalAmount}} 元 - 优惠金额：{{costInfo.discountAmount}} 元
+              - 优惠券抵扣金额：{{costInfo.couponAmount}} 元 - 骑行卡抵扣金额：{{costInfo.cyclingCardAmount}} 元
+            </span>
+          </span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="12">
+        <a-form-item
+          label="支付方式"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>{{costInfo.payMethod}}</span>
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item
+          label="用户"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>{{costInfo.phoneAndUser}}</span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="申请退款原因"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>{{costInfo.applyReason}}</span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+  <a-divider></a-divider>
+  <a-form
+    :model="form"
+    ref="formRef"
+    label-align="left"
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 18 }"
+  >
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="本次申请退款"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+        >
+          <span>{{costInfo.applyRefundAmount}} 元 </span>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-form-item
+          label="操作"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 21 }"
+          name="processState"
+          required
+          :rules="[{ required: true, message: '请选择审核结果' }]"
+        >
+          <a-radio-group
+            v-model:value="form.processState"
+            name="radioGroup"
+            @change="changeProcessState"
+          >
+            <a-radio value="3">驳回</a-radio>
+            <a-radio value="1">通过审核</a-radio>
+          </a-radio-group>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row v-if="form.processState == '3'">
+      <a-col :span="24">
+        <a-form-item
+          label="驳回原因"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 12 }"
+          name="processResult"
+        >
+          <a-input
+            v-model:value="form.processResult"
+            placeholder="请输入驳回原因"
+          />
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row v-if="form.processState == '1'">
+      <a-col :xs="24">
+        <a-form-item
+          label="退款方式"
+          :label-col="{ span: 3 }"
+          :wrapper-col="{ span: 12 }"
+          name="parentId"
+        >
+          <a-select
+            v-model:value="form.refundMethod"
+            placeholder="请选择退款方式"
+          >
+            <a-select-option value="0">原路返回</a-select-option>
+            <a-select-option value="1">余额</a-select-option>
+            <a-select-option value="2">线下退款</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { callPayment } from '@/apis/call.js'
+import { message } from 'ant-design-vue'
+import _ from 'lodash'
+
+const formRef = ref();
+const formData = () => ({
+  refundId: "",
+  processState: "3",
+  processResult: "",
+  refundMethod: ""
+});
+const costInfo = ref({
+  totalAmount: 0,
+  startupCost: 0,
+  durationCost: 0,
+  dispatchFee: 0,
+  dispatchFeeOutOperateArea: 0,
+  dispatchFeeBanArea: 0,
+  dispatchFeeOutOperateArea: 0,
+  parkingAreaOutDispatchFee: 0,
+  helmetManagementFee: 0,
+  improperParkFee: 0,
+  actualAmount: 0,
+  discountAmount: 0,
+  couponAmount: 0,
+  cyclingCardAmount: 0,
+  payMethod: "",
+  applyReason: "",
+  applyRefundAmount: 0,
+  phoneAndUser: ""
+})
+const form = ref(formData());
+
+const openForm = (params = {}) => {
+  if (params['refundId']) {
+
+  }
+};
+
+const changeProcessState = (e) => {
+  const value = e.target.value;
+  if (value == '3') {
+    form.value.refundMethod = ""
+  } else if (value == '1') {
+    form.value.processResult = ""
+  }
+}
+
+const formSave = (callBack) => {
+  formRef.value.validate().then((res) => {
+
+  });
+};
+
+const resetAll = (callBack) => {
+  Object.assign(form.value, formData());
+  formRef.value.resetFields();
+  if (callBack) {
+    callBack(true, form.value);
+  }
+}
+
+defineExpose({ openForm, formSave, resetAll });
+</script>
+
+<style scoped>
+.spanCss {
+  height: 32px;
+  margin-left: 8px;
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 32px;
+  background: #f2f6fc;
+  border-radius: 4px;
+}
+</style>