新增团购券订单

2024-05-22 15:37:03 +08:00
parent 94fb2d2c8e
commit d08ef6f271
6 changed files with 137 additions and 92 deletions
--- a/src/views/group_buy/components/refundDialog.vue
+++ b/src/views/group_buy/components/refundDialog.vue
@@ -0,0 +1,111 @@
+<template>
+    <el-dialog title="退款" v-model="showDialog" width="400px" @close="reset">
+        <el-form ref="refundFormRef" :model="refundForm" :rules="refundFormRules" label-position="top">
+            <el-form-item label="退单数" prop="num">
+                <el-select v-model="refundForm.num" placeholder="请选择退单数" style="width: 100%;" @change="refundNumChange">
+                    <el-option :label="item" :value="item" v-for="item in refundNumList" :key="item"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="退单金额">
+                <el-input v-model="refundForm.refundAmount" disabled placeholder="请选择退单数"></el-input>
+            </el-form-item>
+            <el-form-item label="退款原因">
+                <el-input v-model="refundForm.refundReason" type="textarea" placeholder="请输入退款原因"></el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="showDialog = false" style="width: 100%;">取消</el-button>
+            <el-button type="primary" :loading="refundLoading" @click="refundConfirm" style="width: 100%;">确
+                定</el-button>
+        </span>
+    </el-dialog>
+</template>
+
+<script setup>
+import { returnGpOrder } from '@/api/group'
+import { ref, reactive } from 'vue'
+import { ElMessage } from "element-plus";
+
+const emits = defineEmits(["success"]);
+
+const newRow = ref('')
+const showDialog = ref(false)
+const refundLoading = ref(false)
+const refundFormRef = ref(null)
+const refundForm = reactive({
+    num: '',
+    orderId: '',
+    refundAmount: '',
+    refundDesc: '',
+    refundReason: ''
+})
+
+const refundFormRules = reactive({
+    num: [
+        {
+            required: true,
+            message: ' ',
+            trigger: 'change'
+        }
+    ]
+})
+
+const refundNumList = ref([])
+
+// 提交退单
+function refundConfirm() {
+    refundFormRef.value.validate(async valid => {
+        if (valid) {
+            try {
+                refundLoading.value = true
+                const res = await returnGpOrder(refundForm)
+                ElMessage.success('退单成功')
+                refundLoading.value = false
+                showDialog.value = false
+                emits('succcess')
+            } catch (error) {
+                console.log(error);
+                refundLoading.value = false
+            }
+        }
+    })
+}
+
+// 计算退单金额
+function refundNumChange(e) {
+    refundForm.refundAmount = Math.floor(newRow.value.orderAmount / e * 100) / 100
+}
+
+// 显示
+function show(row) {
+    showDialog.value = true;
+    newRow.value = row
+    let arr = []
+    for (let i = 1; i <= row.number - row.refundNumber; i++) {
+        arr.push(i)
+    }
+    refundNumList.value = arr
+    refundForm.orderId = row.id
+}
+
+// 初始化
+function reset() {
+    newRow.value = ''
+    refundNumList.value = []
+    refundForm.orderId = ''
+    for (let key in refundForm) {
+        refundForm[key] = ''
+    }
+    refundFormRef.value.resetFields()
+}
+
+defineExpose({
+    show
+});
+</script>
+
+<style scoped lang="scss">
+.dialog-footer {
+    display: flex;
+}
+</style>