fix: 修改我的订阅

src/views/account/Center/components/EditInfo/index.vue

@@ -6,6 +6,8 @@
         width="770px"
         @cancel="emits('close')"
         :confirmLoading="loading"
+        :zIndex="1100"
+        :maskClosable='false'
     >
         <j-form :model="form" layout="vertical" ref="formRef">
             <j-row :gutter="24">
@@ -66,7 +68,7 @@
                         :rules="[
                             {
                                 pattern: /^1[3456789]\d{9}$/,
-                                message: '请输入正确手机号',
+                                message: '请输入正确的手机号',
                             },
                         ]"
                     >

src/views/account/Center/components/Subscribe/components/Bind.vue

@@ -1,5 +1,5 @@
 <template>
-    <j-modal :width="'900px'" visible @cancel="emit('close')" :zIndex="1100">
+    <j-modal :maskClosable='false' :width="'900px'" visible @cancel="emit('close')" :zIndex="1100">
         <template v-if="getType === 'notifier-weixin'">
             <j-spin :spinning="loading">
                 <div class="code" style="height: 450px">

src/views/account/Center/components/Subscribe/components/Card.vue

@@ -28,11 +28,14 @@
                     <template v-else>
                         <Detail
                             @unsubscribe="onUnSubscribe"
-                            @save="onSave"
+                            v-if="
-                            v-if="current?.channelProvider !== 'inside-mail' && popoverVisible"
+                                current?.channelProvider !== 'inside-mail' &&
+                                popoverVisible
+                            "
                             :current="current"
-                            :data="props.data"
+                            :data="data"
-                            @close="popoverVisible = false"
+                            @bindChange="onChange('bind')"
+                            @infoChange="onChange('info')"
                         />
                         <PermissionButton
                             v-else
@@ -51,12 +54,28 @@
                 {{ current?.name }}
             </j-ellipsis>
         </div>
+        <EditInfo
+            v-if="editInfoVisible"
+            :data="user.userInfos"
+            @close="editInfoVisible = false"
+            @save="onSave"
+        />
+        <Bind
+            @close="visible = false"
+            v-if="visible"
+            :data="data"
+            :current="current"
+            @save="onBindSave"
+        />
     </div>
 </template>
 
 <script lang="ts" setup>
 import { getImage } from '@/utils/comm';
 import Detail from './Detail.vue';
+import { useUserInfo } from '@/store/userInfo';
+import EditInfo from '../../EditInfo/index.vue';
+import Bind from './Bind.vue';
 
 const iconMap = new Map();
 iconMap.set('notifier-dingTalk', getImage('/notice-rule/dingtalk.png'));
@@ -81,19 +100,44 @@ const props = defineProps({
     },
     notifyChannels: {
         type: Array,
-        default: () => []
+        default: () => [],
-    }
+    },
 });
+const user = useUserInfo();
 const popoverVisible = ref<boolean>(false);
 
+const editInfoVisible = ref<boolean>(false);
+const visible = ref<boolean>(false);
+
+const onChange = (type: 'bind' | 'info') => {
+    if(type === 'bind'){
+        editInfoVisible.value = true
+    } else {
+        visible.value = true
+    }
+}
+
+const onSave = () => {
+    editInfoVisible.value = false;
+    user.getUserInfo();
+    emit('save', props.current);
+    popoverVisible.value = false;
+};
+
+const onBindSave = () => {
+    visible.value = false
+    emit('save', props.current);
+    popoverVisible.value = false;
+}
+
 const onUnSubscribe = (dt: any) => {
     emit('unsubscribe', dt);
-    popoverVisible.value = false
+    popoverVisible.value = false;
 };
 
 const onCheckChange = (dt: any) => {
-    emit('save', dt)
+    emit('save', dt);
-    popoverVisible.value = false
+    popoverVisible.value = false;
 };
 </script>
 

src/views/account/Center/components/Subscribe/components/Detail.vue

@@ -21,29 +21,14 @@
             >
         </div>
     </div>
-    <EditInfo
-        v-if="editInfoVisible"
-        :data="user.userInfos"
-        @close="editInfoVisible = false"
-        @save="onSave"
-    />
-    <Bind
-        @close="visible = false"
-        v-if="visible"
-        :data="props.data"
-        :current="current"
-        @save="onBindSave"
-    />
 </template>
 
 <script lang="ts" setup>
 import { getIsBindThird } from '@/api/account/notificationSubscription';
 import { useUserInfo } from '@/store/userInfo';
-import EditInfo from '../../EditInfo/index.vue';
-import Bind from './Bind.vue';
 
 const user = useUserInfo();
-const emit = defineEmits(['save', 'unsubscribe', 'close']);
+const emit = defineEmits(['infoChange', 'unsubscribe', 'bindChange']);
 const info = ref<any>(null);
 const props = defineProps({
     data: {
@@ -58,39 +43,23 @@ const props = defineProps({
     },
 });
 
-const editInfoVisible = ref<boolean>(false);
-const visible = ref<boolean>(false);
-
 const getType = computed(() => {
     return props.current?.channelProvider;
 });
 
 const onBind = () => {
     if (
-        ['notifier-voice', 'notifier-sms', 'notifier-email'].includes(
+        !['notifier-voice', 'notifier-sms', 'notifier-email'].includes(
             props.current?.channelProvider,
         )
     ) {
-        editInfoVisible.value = true;
+        emit('infoChange')
     } else {
-        visible.value = true
+        emit('bindChange')
     }
     
 };
 
-const onSave = () => {
-    editInfoVisible.value = false;
-    user.getUserInfo();
-    emit('save', props.current);
-    emit('close')
-};
-
-const onBindSave = () => {
-    visible.value = false
-    emit('save', props.current);
-    emit('close')
-}
-
 const handleSearch = async () => {
     if (
         !['notifier-voice', 'notifier-sms', 'notifier-email'].includes(
@@ -114,16 +83,6 @@ onMounted(() => {
     handleSearch()
 })
 
-// watch(
-//     () => props.current,
-//     () => {
-//         handleSearch();
-//     },
-//     {
-//         immediate: true,
-//         deep: true,
-//     },
-// );
 </script>
 
 <style lang="less" scoped>

src/views/account/Center/components/Subscribe/components/Unsubscribe.vue

@@ -1,5 +1,5 @@
 <template>
-    <j-modal :width="'384px'" visible @cancel="emit('close')" :footer="null">
+    <j-modal :maskClosable='false' :width="'384px'" visible @cancel="emit('close')" :footer="null">
         <template v-if="getType === 'notifier-dingTalk'">
             <div class="tip">请先绑定钉钉账号</div>
         </template>