收款相关弹窗

src/views/moneyManage/receiveDetail/receiveDetail.vue

@@ -169,11 +169,11 @@
                         <el-table-column v-if="kefu" fixed="right" prop="orderStatus" label="订单状态" width="100px" />
                         <el-table-column fixed="right" label="操作" width="100px" v-if="activeTab != 'reject'">
                             <template #default=scope>
-                                <span v-if="kefu && scope.row.orderStatus == '已通过'" style="color: #FA5A1E;">退款</span>
+                                <span v-if="kefu && scope.row.orderStatus == '已通过'" style="color: #FA5A1E;" @click="openRecall('refund')">退款</span>
                                 <span v-else-if="kefu && scope.row.orderStatus == '已撤回'" style="color: #2741DE;"
                                     @click="openAddForm(scope.row)">编辑</span>
                                 <span v-else-if="kefu && scope.row.orderStatus == '待审核'" style="color: #FA5A1E;"
-                                    @click="openRecall">撤回</span>
+                                    @click="openRecall('recall')">撤回</span>
                                 <span v-else-if="activeTab == 'wait' && !kefu" style="color: #2741DE;"
                                     @click="openAuditForm">审核</span>
                                 <span v-else-if="activeTab == 'pass' && !kefu" style="color: #2741DE;"
@@ -190,9 +190,18 @@
                 </div>
             </el-card>
         </div>
-        <div class="recallDialog">
+        <div class="recallDialog" v-show="recallDialog">
             <div class="close">
-                
+                <button @click="closeRecall" class="Btn">关闭</button>
+            </div>
+            <div class="text">
+                <text class="txt">{{ textContent }}</text>
+            </div>
+            <div class="cancle">
+                <button @click="closeRecall" class="Btn">取消</button>
+            </div>
+            <div class="confirm">
+                <button class="Btn">确定</button>
             </div>
         </div>
         <el-dialog class="adddialog" v-model="addFormisible" width="20vw" :before-close="closeAddForm">
@@ -476,13 +485,22 @@ const closeAddForm = () => {
     addFormData.value = {}
 }
 //撤回弹窗
-
+const textContent = ref('')
 const recallDialog = ref(false)
-const openRecall = () => {
+const openRecall = (val) => {
+    console.log('打开弹窗',val);
+    
+    if(val == 'refund'){
+        textContent.value = '将要对该订单退款!'
+    }
+    if(val == 'recall'){
+        textContent.value = '将要撤回该信息!'
+    }
     recallDialog.value = true
 }
 const closeRecall = () => {
     recallDialog.value = false
+    textContent.value = ''
 }
 //图片上传
 const handleImgSuccess = (response, uploadFile) => {
@@ -901,6 +919,70 @@ const tableData = [
         left: 50%; // 距离左侧50%
         transform: translate(-50%, -50%); // 向左、向上平移自身宽高的50%，实现居中
         z-index: 1000; // 确保在其他元素上层显示
+
+        .close {
+            position: absolute;
+            left: 625px;
+            top: 20px;
+            height: 38px;
+            width: 38px;
+            opacity: 0;
+
+            .Btn {
+                height: 100%;
+                width: 100%;
+                border-radius: 10px;
+            }
+        }
+
+        .text {
+            position: absolute;
+            left: 185px;
+            top: 190px;
+            height: 67px;
+            width: 500px;
+
+            .txt {
+                height: 100%;
+                width: 100%;
+                color: #001a42;
+                font-family: "PingFang SC";
+                font-size: 48px;
+                font-style: normal;
+                font-weight: 900;
+                line-height: normal;
+            }
+        }
+
+        .cancle {
+            position: absolute;
+            left: 185px;
+            top: 304px;
+            height: 55px;
+            width: 150px;
+            opacity: 0;
+
+            .Btn {
+                height: 100%;
+                width: 100%;
+                border-radius: 20px;
+            }
+        }
+
+        .confirm {
+            position: absolute;
+            left: 375px;
+            top: 304px;
+            height: 55px;
+            width: 150px;
+            opacity: 0;
+
+            .Btn {
+                height: 100%;
+                width: 100%;
+                border-radius: 20px;
+            }
+        }
     }
 
     :deep(.adddialog) {