h5用户详情-弹框问题

qwh5/components.d.ts

     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCollapse: typeof import('vant/es')['Collapse']
     VanCollapseItem: typeof import('vant/es')['CollapseItem']
-    VanDialog: typeof import('vant/es')['Dialog']
     VanEmpty: typeof import('vant/es')['Empty']
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']

qwh5/dist/css/radar.cb25165c.css

+.overBox[data-v-72996912]{font-size:4.8vw;text-align:center;margin-top:70%}

qwh5/src/main.ts

 import store from './store'
 import { Icon, Loading, Popover, List, Field  } from 'vant';
 import 'vant/lib/index.css';
+import 'vant/es/toast/style';
 import './styles/index.scss'
 import axios from './utils/axios';
 const app = createApp(App)

qwh5/src/views/userPortrait.vue

       <van-loading v-else type="spinner" color="#00b38a" class="pageStyleLoading" />
     </div>
     <!-- 标签 -->
-    <van-dialog v-if="tag_visible" v-model:show="tag_visible" title="选择标签" show-cancel-button :before-close="onBeforeClose"
-      @confirm="confirm_tag" confirmButtonColor="#00b38a">
-      <!-- 标签内容 -->
-      <tag :labelList="labelList" :configInfo="configInfo" @closeTag="_closeTag"></tag>
-    </van-dialog>
+    <div class="mask" v-if="tag_visible==true">
+      <div class="mask_content">
+        <div class="mask_title">选择标签</div>
+        <!-- 标签内容 -->
+        <tag :labelList="labelList" :configInfo="configInfo" @closeTag="_closeTag"></tag>
+        <div class="mask_btn">
+          <div class="cancel btn" @click="onBeforeClose">取消</div>
+          <div class="define btn" @click="confirm_tag">确定</div>
+        </div>
+      </div>
+    </div>
+
     <!-- 编辑-客户信息 -->
-    <van-dialog v-if="attr_visible" v-model:show="attr_visible" title="" show-cancel-button :before-close="onBeforeClose"
-      @confirm="confirm_edit_attr" confirmButtonColor="#00b38a">
-      <div class="attrEditBox">
-        <template v-for="(item, index) in attrEditData" :key="index+'field_edit'">
-          <van-field v-model="item.val" :label="item.name" :placeholder="`请输入${item.name}`" />
-        </template>
+    <div class="mask" v-if="attr_visible==true">
+      <div class="mask_content">
+        <div class="attrEditBox">
+          <template v-for="(item, index) in attrEditData" :key="index+'field_edit'">
+            <van-field v-model="item.val" :label="item.name" :placeholder="`请输入${item.name}`" />
+          </template>
+        </div>
+        <div class="mask_btn">
+          <div class="cancel btn" @click="onBeforeClose">取消</div>
+          <div class="define btn" @click="confirm_edit_attr">确定</div>
+        </div>
       </div>
-    </van-dialog>
+    </div>
   </div>
 </template>
 <script lang="ts">
 import tag from '@/components/tag.vue'
 import noData from '@/components/noData.vue'
-import { Dialog, Toast } from 'vant';
+import { Toast } from 'vant';
 import getWxConfig from '@/utils/getWxConfig';
 import { ref, reactive, onBeforeMount, getCurrentInstance } from "vue";
 import { getQueryString } from '@/utils/common'
   components: {
     noData,
     tag,
-    [Dialog.Component.name]: Dialog.Component,
   },
   setup() {
     const { proxy } = getCurrentInstance();
       corpid: '',
       external_userid: '',
       user_id: '',
-      // corpid: 'ww27940915d8fbfbe6',
-      // external_userid: 'wm5xsRBwAAC_qqbdzn-IVkN5ojRwM1qQ',
-      // user_id: '8a82d12ae22e0cedd81ae297a2e7c1fa'
+      // corpid: 'wpezvKNwAA9d7LlcuOOAhvlx5ikwJjHg',
+      // external_userid: 'wmezvKNwAA-GC-Qo3KDnbZoi5bhSZ_cw',
+      // user_id: 'woezvKNwAA8QJvr4GUHVuIYqYmBqkOBg'
     })
     onBeforeMount(() => {//组件挂载之前
       // pageLoading.value = true;
     function _closeTag(arr) {//回调
       updataTag.value = arr
     }
-    function onBeforeClose(action, done) {
-      if (action === "confirm") {
-        return false;
-      } else {
-        tag_visible.value = false;
-        attr_visible.value = false;
-      }
+    function onBeforeClose() {
+      tag_visible.value = false;
+      attr_visible.value = false;
     }
     function confirm_tag() {//标签更改确认
       h5CustomerTagUpdate()
 }
 </script>
 <style lang="scss" scoped>
+.mask{
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0,0,0,0.5);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  .mask_content{
+    width: 80vw;
+    height: auto;
+    max-height: 80vh;
+    background-color: #ffffff;
+    border-radius: 8px;
+    padding-bottom: 50px;
+    position: relative;
+    .mask_title{
+      font-size: 16px;
+      text-align: center;
+      font-weight: bold;
+      padding: 20px;
+    }
+    .mask_btn{
+      display: flex;
+      border-top: 1px solid #f4f4f4;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      .btn{
+        height: 50px;
+        width: 50%;
+        text-align: center;
+        line-height: 50px;
+        font-size: 15px;
+        color: #222222;
+        &.define{
+          border-left: 1px solid #f4f4f4;
+          color: #00b38a;
+        }
+      }
+    }
+  }
+}
 .reset_get_info {
   height: 300px;
   position: fixed;