新增团购券订单

src/api/group.js

@@ -38,3 +38,16 @@ export function groupOrdergroupScan(params) {
     params,
   });
 }
+
+/**
+ * 退单
+ * @param {*} data
+ * @returns
+ */
+export function returnGpOrder(data) {
+  return request({
+    method: "post",
+    url: "/pay/returnGpOrder",
+    data,
+  });
+}

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>

src/views/group_buy/index.vue

@@ -18,8 +18,8 @@
             </div>
             <div class="tab_container">
                 <el-table :data="tableData.list" height="540px" v-loading="tableData.loading">
-                    <el-table-column label="订单号" prop="orderNo" width="150px"></el-table-column>
-                    <el-table-column label="优惠卷" prop="proImg" width="220px">
+                    <el-table-column label="订单号" prop="orderNo" width="100px"></el-table-column>
+                    <el-table-column label="优惠卷" prop="proImg" width="200px">
                         <template v-slot="scope">
                             <div class="info_wrap">
                                 <el-image :src="scope.row.proImg" style="width: 40px;height: 40px;flex-shrink: 0;" />
@@ -54,7 +54,10 @@
                     </el-table-column>
                     <el-table-column label="操作" fixed="right">
                         <template v-slot="scope">
-                            <el-button type="primary" size="small">退款</el-button>
+                            <el-button type="primary" size="small"
+                                v-if="scope.row.refundAble == 1 && scope.row.status == 'unused'"
+                                @click="refundDialogRef.show(scope.row)">退款</el-button>
+                            <el-button type="primary" size="small" disabled v-else>退款</el-button>
                         </template>
                     </el-table-column>
                 </el-table>
@@ -67,6 +70,7 @@
             </div>
         </div>
         <scanGroup ref="scanGroupRef" @succcess="groupOrderlistAjax" />
+        <refundDialog ref="refundDialogRef" @success="groupOrderlistAjax" />
     </div>
 </template>
 
@@ -75,10 +79,12 @@ import { groupOrderlist } from '@/api/group'
 import { Search, RefreshRight, MagicStick } from '@element-plus/icons-vue'
 import { ref, onMounted, reactive } from 'vue'
 import scanGroup from './components/scanGroup.vue'
+import refundDialog from './components/refundDialog.vue'
 import { useUser } from "@/store/user.js"
 const store = useUser()
 
 const scanGroupRef = ref(null)
+const refundDialogRef = ref(null)
 
 const tableData = reactive({
     resetLoading: false,