退款说明弹窗改造

src/views/goods/order-detail.vue

@@ -266,6 +266,20 @@
         <el-button size="small" type="primary" @click="confirmExpressNo">完成</el-button>
       </span>
     </el-dialog> -->
+    <!-- 退款说明 -->
+    <el-dialog
+      class="refund-explain-dialog"
+      title="退款说明"
+      :visible.sync="refundDialog"
+      width="20%">
+      <div class="explain-content">退款方式：{{refundDialogData.refundWay}}</div>
+      <div class="explain-content">退款金额：{{refundDialogData.refundAmount | toFixed2}}</div>
+      <div class="explain-content">退款对象：{{refundDialogData.refundObject}}</div>
+      <div class="explain-content">退款理由：{{refundDialogData.refundReason}}</div>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="refundDialog = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -336,6 +350,13 @@
         showStatusStr: '', // 订单状态文案
         packageName: '包裹1', // 多包裹name
         expressIndex: 0, // 修改物流单号下标
+        refundDialog: false, // 退款说明弹窗
+        refundDialogData: {
+        refundWay: '',
+        refundAmount: '',
+        refundObject: '',
+        refundReason: ''
+      }
       }
     },
     created() {
@@ -397,15 +418,12 @@
         this.isShowRefundDetail = true;
         let refundWayStr = '';
         let refundObjectStr = '';
+        this.refundDialog = true;
         refundWayStr =  res.data.refundWay == 0 ? '仅退款，无需退货' : '退款退货';
         refundObjectStr = res.data.refundObject == 1 ? '开单医生' : '支付用户';
-          this.$alert(`<p>退款方式：${refundWayStr}</p>
-            <p>退款金额：${this.getPrice(res.data.refundAmount)}元</p>
-            <p>退款对象：${refundObjectStr}</p>
-            <p>退款理由：${res.data.refundReason}</p>`, 
-            '退款说明', {
-                dangerouslyUseHTMLString: true
-              });
+        res.data.refundWay = refundWayStr;
+        res.data.refundObject = refundObjectStr;
+        this.refundDialogData = res.data;
         }    
       })
         },
@@ -581,6 +599,16 @@
 <style lang="scss">
 
   .order-detail-wrapper{
+     .el-dialog__wrapper {
+      .el-dialog {
+        .el-dialog__body {
+          padding: 0 20px;  
+          .explain-content {
+          margin-bottom: 5px;
+          }    
+        }
+      }  
+    }
     .el-table__column-filter-trigger i {
       color: #0d9078;
       font-size: 14px;
@@ -776,5 +804,7 @@
       border: 1px solid #999999;
       background-color: #b8b8b8;
     }
+   
+    
   }
 </style>