ebike-ui/ebike-operate/src/views/form/confirmrefund/ConfirmRefund.vue

<template>
  <a-divider></a-divider>
  <a-form
    label-align="left"
    :label-col="{ span: 6 }"
    :wrapper-col="{ span: 18 }"
  >
    <a-row>
      <a-col :span="12">
        <a-form-item
          label="支付方式"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>微信</span>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item
          label="用户"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>18507702086(王婷)</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>微信</span>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item
          label="用户"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 21 }"
        >
          <span>18507702086(王婷)</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: 12 }"
          name="refundPassword"
          required
          :rules="[{ required: true, message: '请输入退款密码' }]"
        >
          <a-input
            v-model:value="form.refundPassword"
            placeholder="请输入退款密码"
            type="password"
          />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-form-item
          label="退款备注"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 12 }"
          name="refundRemarks"
        >
          <a-textarea
            v-model:value="form.refundRemarks"
            placeholder="请输入退款备注"
            :rows="4"
          />
        </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: "",
  refundPassword: "",
  refundRemarks: ""
});
const costInfo = ref({
  orderAmount: 0,

})
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>