upd: 弹窗更换为组件写法

component/comPopup/Confirm.vue

@@ -1,51 +1,41 @@
 <template>
-  <view class="modal-mask">
-    <transition name="confirm-fade">
-      <view class="confirm-container" v-show="showFlag">
-        <view class="popup-title">{{ title }}</view>
-        <view class="popup-content">{{ text }}</view>
-        <view class="flex-row modal-footer">
-          <view class="show-btn cencel-btn-pop" v-if="showCancelButton" @tap="cancel">{{ cancelBtnText }}</view>
-          <view class="show-btn ok-btn-pop" @tap="confirm">{{ confirmBtnText }}</view>
+  <view class="modal-mask" v-if="value">
+    <view class="confirm-container">
+      <view class="popup-title">{{ dialogInfo.title }}</view>
+      <view class="popup-content">{{ dialogInfo.text }}</view>
+      <view class="flex-row modal-footer">
+        <view class="show-btn cencel-btn-pop" v-if="dialogInfo.showCancelButton" @tap="cancel">
+          {{ dialogInfo.cancelBtnText }}
         </view>
+        <view class="show-btn ok-btn-pop" @tap="confirm">{{ dialogInfo.confirmBtnText }}</view>
       </view>
-    </transition>
+    </view>
   </view>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
-      showFlag: false,
-      title: "温馨提示",
-      text: '请传入描述文本', // 描述文本
-      confirmBtnText: "确定",
-      cancelBtnText: "取消",
-      showCancelButton: true, // 是否显示取消按钮
-    };
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    },
+    dialogInfo: {
+      type: Object,
+      default: () => ({})
+    }
   },
   methods: {
-    show(cb) {
-      this.showFlag = true;
-      typeof cb === "function" && cb.call(this, this);
-      return new Promise((resolve, reject) => {
-        this.reject = reject;
-        this.resolve = resolve;
-      });
-    },
     cancel() {
-      this.reject("cancel")
       this.hide()
     },
     confirm() {
-      this.resolve("confirm")
       this.hide()
+      const { opType = null } = this.dialogInfo
+      this.$emit("confirm", opType)
     },
     hide() {
-      this.showFlag = false
-      document.body.removeChild(this.$el)
-      this.$destroy()
+      this.$emit("input", false)
     }
   }
 };
@@ -63,12 +53,13 @@ export default {
   justify-content: center;
   align-items: center;
   z-index: 9999;
+
   .confirm-container {
     background-color: #fff;
     padding: 48rpx;
     border-radius: 40rpx;
     width: 75%;
-  
+
     .popup-title {
       font-weight: 600;
       font-size: 36rpx;
@@ -77,7 +68,7 @@ export default {
       margin-bottom: 26rpx;
       font-family: PingFangSC, PingFang SC;
     }
-  
+
     .popup-content {
       text-align: center;
       font-weight: 400;
@@ -87,18 +78,12 @@ export default {
       font-family: PingFangSC, PingFang SC;
       line-height: 40rpx;
     }
-  
-    &.confirm-fade-enter-active {
-      animation: confirm-fadein 0.3s;
-  
-      .confirm-content {
-        animation: confirm-zoom 0.3s;
-      }
-    }
   }
+
   .modal-footer {
     width: 100%;
     align-items: center;
+
     .show-btn {
       border-radius: 40rpx;
       flex: 1;
@@ -108,17 +93,18 @@ export default {
       border-radius: 40rpx;
       height: 80rpx;
       line-height: 80rpx;
+
       &:active {
         opacity: 0.7;
       }
     }
-    
+
     .cencel-btn-pop {
       color: #060809;
       background: #EBECEC;
       margin-right: 12rpx;
     }
-    
+
     .ok-btn-pop {
       color: #FFFFFF;
       background: #060809;

main.js

@@ -9,8 +9,6 @@ Polyfill.init();
 import Mixin from './polyfill/mixins';
 import messages from './locale/index'
 import uView from "uview-ui";
-import { confirm } from '@/component/comPopup/index.js'
-Vue.prototype.$confirm = confirm
 
 Vue.use(uView);
 

pages/my/my.vue

@@ -22,15 +22,32 @@
                 <view class="name">{{ item.name }}</view>
             </view>
         </view>
+        <Confirm 
+            v-model="comboDialoginfo.showConfirm"
+            :dialogInfo="comboDialoginfo"
+            @confirm="dialogConfirm"
+        />
     </view>
 </template>
 
 <script>
+import Confirm from '@/component/comPopup/Confirm'
 import { QINIU_URL } from '@/common/constant'
 export default {
+    components: {
+        Confirm
+    },
     data() {
         return {
             QINIU_URL,
+            comboDialoginfo: {
+                showConfirm: false,
+                title: '温馨提示',
+                opType: 'combo',
+                text: '您还未购买换电套餐，是否前往进行换电套餐？',
+                confirmBtnText: '前往购买',
+                showCancelButton: false
+            },
             userInfo: {
                 name: 'Real name',
                 userName: 'Kabuda-4',
@@ -60,14 +77,10 @@ export default {
     },
     methods: {
         checkHandle_combo() {
-            this.$confirm({
-                title: '温馨提示',
-                text: '您还未购买换电套餐，是否前往进行换电套餐？',
-                confirmBtnText: '前往购买',
-                showCancelButton: false
-            }).then(confirm => {
-                console.log('confirm', confirm)
-            })
+            this.comboDialoginfo.showConfirm = true
+        },
+        dialogConfirm(type) {
+            console.log('dialogConfirm', type)
         },
         routerLink({ url, jumpCheck }) {
             if (jumpCheck) {