修改退款弹窗

vue-admin-template-master/src/views/orders/query/index.vue

@@ -110,31 +110,6 @@
         </el-table-column>
       </el-table>
     </el-card>
-    <el-dialog title="提示" :visible.sync="dialogVisible" width="40%">
-      <span>
-        <el-form
-          :model="ruleForm"
-          :rules="rules"
-          ref="ruleForm"
-          label-width="100px"
-          class="demo-ruleForm"
-        >
-          <el-form-item label="退款原因" prop="reason">
-            <el-input
-              :rows="3"
-              type="textarea"
-              v-model="ruleForm.reason"
-            ></el-input>
-          </el-form-item>
-        </el-form>
-      </span>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="submitForm('ruleForm')"
-          >确 定</el-button
-        >
-      </span>
-    </el-dialog>
   </div>
 </template>
 
@@ -188,13 +163,6 @@ export default {
         phone: ""
       },
       tableData: [],
-      dialogVisible: false,
-      ruleForm: {
-        reason: ""
-      },
-      rules: {
-        reason: [{ required: true, message: "请填写退款原因", trigger: "blur" }]
-      },
       currentOrder: {}
     };
   },
@@ -202,33 +170,38 @@ export default {
   methods: {
     // 退款
     handleClick(detail) {
-      console.log(detail);
       this.currentOrder = detail;
-      this.dialogVisible = true;
-    },
-    submitForm(formName) {
-      this.$refs[formName].validate(valid => {
-        if (valid) {
-          const loading = this.$loading();
-          refund({
-            outtradeno: this.currentOrder.outtradeno,
-            totalfee: this.currentOrder.totalfee,
-            reason: this.ruleForm.reason
-          })
-            .then(res => {
-              loading.close();
-              this.dialogVisible = false;
-              this.$refs[formName].resetFields();
-              this.$message.success("退款成功！");
-            })
-            .catch(res => {
-              this.$message.error("退款失败！");
-            });
-        } else {
-          console.log("error submit!!");
-          return false;
+      this.$prompt("请输入取消订单原因", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        beforeClose: (action, instance, done) => {
+          if (action === "confirm") {
+            if (!instance.inputValue) {
+              this.$message({
+                type: "fail",
+                message: "取消原因不能为空！ "
+              });
+            } else {
+              done();
+              refund({
+                outtradeno: this.currentOrder.outtradeno,
+                totalfee: this.currentOrder.totalfee,
+                reason: instance.inputValue
+              })
+                .then(res => {
+                  this.$message.success("退款成功！");
+                })
+                .catch(res => {
+                  this.$message.error("退款失败！");
+                });
+            }
+          } else {
+            done();
+          }
         }
-      });
+      })
+        .then(() => {})
+        .catch(() => {});
     },
     getDetail() {
       if (this.listQuery.phone === "") {