确认弹框组件

src/components/PopupConfirm/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <!-- 弹框确认组件 -->
+    <uni-popup ref="popupDialog" type="dialog" :mask-click="false">
+      <view class="popup-content">
+        <view class="popup-title">{{ title }}</view>
+        <view class="popup-message" v-if="!showRemark">{{ content }}</view>
+        <uni-easyinput v-else type="textarea" v-model="remark" placeholder="请输入" autoHeight />
+        <view class="popup-btns">
+          <view class="btn cancel" v-if="showClose" @click="closePopup">{{ leftBtn }}</view>
+          <view class="btn confirm" :class="{ disabled: countdown > 0 }" @click="confirm">
+            <span>{{ rightBtn }}</span>
+            {{ countdown > 0 ? '(' + countdown + ')' : '' }}
+          </view>
+        </view>
+      </view>
+    </uni-popup>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  title: { type: String, default: '提示' },
+  content: { type: String, default: '是否确定？' },
+  showClose: { type: Boolean, default: true },
+  leftBtn: { type: String, default: '取 消' },
+  rightBtn: { type: String, default: '确 定' },
+  showRemark: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['confirm'])
+
+const popupDialog = ref(null)
+const remark = ref('')
+const timer = ref(null)
+const countdown = ref(0)
+
+let resolvePromise = null // 用于存储 Promise 的 resolve
+
+// 打开弹框，返回 Promise
+const openPopup = () => {
+  return new Promise((resolve) => {
+    resolvePromise = resolve // 保存 resolve
+    popupDialog.value.open()
+    remark.value = '' // 每次打开清空
+
+    // 启动倒计时
+    if (timer.value) clearInterval(timer.value)
+    countdown.value = 3
+    timer.value = setInterval(() => {
+      if (countdown.value > 0) {
+        countdown.value--
+      } else {
+        clearInterval(timer.value)
+        timer.value = null
+        countdown.value = 0
+      }
+    }, 1000)
+  })
+}
+
+// 关闭弹框
+const closePopup = () => {
+  popupDialog.value.close()
+  if (resolvePromise) resolvePromise({ data: false })
+  resolvePromise = null
+}
+
+// 点击确认
+const confirm = () => {
+  if (countdown.value > 0) return
+  popupDialog.value.close()
+  const params = {
+    data: true,
+    remark: remark.value,
+  }
+  if (!remark.value) delete params.remark
+  if (resolvePromise) resolvePromise(params)
+  resolvePromise = null
+}
+
+// 暴露方法
+defineExpose({ openPopup })
+</script>
+
+<style lang="scss" scoped>
+.popup-content {
+  padding: 20rpx;
+  background-color: #fff;
+  border-radius: 10rpx;
+  width: 80vw;
+}
+.popup-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  margin-bottom: 20rpx;
+}
+.popup-message {
+  font-size: 36rpx;
+  font-weight: bold;
+  margin: 30px 0;
+  text-align: center;
+}
+.popup-btns {
+  display: flex;
+  border-top: 1px solid #eee;
+  height: 88rpx;
+  line-height: 88rpx;
+  text-align: center;
+}
+.btn {
+  margin-top: 3px;
+  flex: 1;
+  font-size: 34rpx;
+}
+.cancel {
+  color: #666;
+  border-right: 1px solid #eee;
+}
+.confirm {
+  color: #007aff;
+  font-weight: 500;
+  &.disabled {
+    color: #999;
+  }
+}
+</style>

src/pages/standardBox/acceptBox.vue

@@ -90,6 +90,7 @@
         </view>
     </scroll-view>
     </view>
+    <PopupConfirm ref="popupConfirm" :content="content" />
 </template>
 
 <script setup>
@@ -98,7 +99,10 @@ import { onLoad, onShow } from '@dcloudio/uni-app'
 import { debounce } from 'lodash-es'
 import { getPurchaseList } from '@/services/purchase.js'
 import { getQrCodeBoxListApi,appReceiveApi,appTransferRejectApi } from '@/services/standard.js' 
+import PopupConfirm from '@/components/PopupConfirm'
 
+const popupConfirm = ref(null)
+const content = ref('')
 const swipeRef = ref(null)
 const total = ref(0) //                 数据总量
 const active = ref(1) //                tap索引
@@ -127,6 +131,7 @@ const onChangeDate = (val) => {
 
 //点击事件
 const onClick=(e,item, itemIndex)=> {
+    console.log('🚀 ~ onClick ~ item:', item)
     if(item.status==4){
         if(e.index==0){
             uni.navigateTo({ url: `/pages/standardBox/codeView?boxInfo=${JSON.stringify(item)}` })
@@ -134,73 +139,81 @@ const onClick=(e,item, itemIndex)=> {
     }else{
         if(e.index==0){
             uni.navigateTo({ url: `/pages/standardBox/codeView?boxInfo=${JSON.stringify(item)}` })
-        }else if(e.index==1){//接收
+        }else if(e.index==1){
-            console.log(item)
+            //接收
-            setTimeout(() => {
+            content.value = '是否确认接收？'
-                uni.showModal({
+            popupConfirm.value.openPopup().then((res) => {
-                    title: '提示',
+                console.log('🚀 ~ Popup ~ res:', res)
-                    content: '是否确认接收？',
+                if (res.data) handleReceive(item)
-                    confirmText: '确定',
+            })
-                    cancelText: '取消',
+        }else{
-                    success: async (modalRes) => {
+            //驳回
-                        if (modalRes.confirm) { 
+            content.value = '是否确认驳回？'
-                            let param = {
+            popupConfirm.value.openPopup().then((res) => {
-                                boxId:item.boxId
+                console.log('🚀 ~ Popup ~ res:', res)
-                            }
+                if (res.data) handleReject(item)
-                          
+            })
-                            const res  = await appReceiveApi(param)
-                              console.log("yyyyyyyyyyy",res)
-                            if (res.code == 200) {
-                                uni.showToast({
-                                    title: '接收成功',
-                                    icon: 'none',
-                                })
-                                setTimeout(() => {
-                                    getTableList(true)
-                                }, 500)  
-                            }else{
-                                console.log("xxxxxxxxxxxxxxxxxxxxxxxxx")
-                                uni.showToast({ title: '接收失败', icon: 'none' })
-                            }
-                        } 
-                    }
-                })
-            }, 500)
-        }else{//驳回
-            console.log(item)
-            setTimeout(() => {
-                uni.showModal({
-                    title: '提示',
-                    content: '是否确认驳回移交？',
-                    confirmText: '确定',
-                    cancelText: '取消',
-                    success: async (resp) => {
-                        if (resp.confirm) { 
-                            let param = {
-                                boxId:item.boxId
-                            }
-                            // console.log(param)
-                            const res = await appTransferRejectApi(param)
-                            if (res.code === 200) {
-                                uni.showToast({
-                                    title: '驳回成功',
-                                    icon: 'none',
-                                })
-                                setTimeout(() => {
-                                    getTableList(true)
-                                }, 500)  
-                            }else{
-                                uni.showToast({ title: '驳回失败', icon: 'none' })
-                            }
-                        } 
-                    }
-                })
-            }, 500)
         }
     }
     swipeRef.value[itemIndex].closeAll()
 }
 
+// 接收
+const handleReceive = async (item) => {
+    try {
+        uni.showLoading({ title: '操作中...', mask: true })
+        let param = {
+            boxId:item.boxId
+        }
+        
+        const res  = await appReceiveApi(param)
+            console.log("yyyyyyyyyyy",res)
+        if (res.code == 200) {
+            uni.showToast({
+                title: '接收成功',
+                icon: 'none',
+            })
+            setTimeout(() => {
+                getTableList(true)
+            }, 500)  
+        }else{
+            console.log("xxxxxxxxxxxxxxxxxxxxxxxxx")
+            uni.showToast({ title: '接收失败', icon: 'none' })
+        }
+    } catch (error) {
+        console.log('🚀 ~ handleReceive ~ error:', error)
+    } finally {
+        uni.hideLoading()
+    }
+}
+
+// 驳回
+const handleReject = async (item) => {
+    try {
+        uni.showLoading({ title: '操作中...', mask: true })
+        let param = {
+            boxId:item.boxId
+        }
+        // console.log(param)
+        const res = await appTransferRejectApi(param)
+        if (res.code === 200) {
+            uni.showToast({
+                title: '驳回成功',
+                icon: 'none',
+            })
+            setTimeout(() => {
+                getTableList(true)
+            }, 500)  
+        }else{
+            uni.showToast({ title: '驳回失败', icon: 'none' })
+        }
+    } catch (error) {
+        console.log('🚀 ~ handleReject ~ error:', error)
+    } finally {
+        uni.hideLoading()
+    }
+}
+
 //左滑选择项1
 const swipeOptions =  ref([
         {