修改

src/views/natural-resources/components/my-collect/index.module.less

@@ -253,4 +253,40 @@
       transform: rotate(0deg);
     }
   }
+}
+
+.removeVisiable {
+  width: 432px;
+
+  :global {
+    .n-card-header {
+      font-size: max(22px, 16Px);
+    }
+  }
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: max(18px, 14Px);
+      color: #777777;
+      line-height: 30px;
+      text-align: center;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroupModal {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
 }

src/views/natural-resources/components/my-collect/index.tsx

@@ -1,167 +1,202 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import styles from './index.module.less';
-import CardType from '@/components/card-type';
-import Pagination from '@/components/pagination';
-import SearchGroupResources from './search-group-resources';
-import { favorite, materialQueryPage, materialRemove } from '../../api';
-import { NSpin, useDialog, useMessage } from 'naive-ui';
-import TheEmpty from '@/components/TheEmpty';
-import CardPreview from '@/components/card-preview';
-import MyCollogeGuide from '@/custom-plugins/guide-page/myColloge-guide';
-export default defineComponent({
-  name: 'share-resources',
-  setup() {
-    const message = useMessage();
-    const dialog = useDialog();
-    const state = reactive({
-      searchWord: '',
-      loading: false,
-      pageTotal: 0,
-      pagination: {
-        page: 1,
-        rows: 20
-      },
-      searchGroup: {
-        type: 'MUSIC', //
-        name: '',
-        bookVersionId: null,
-        subjectId: null,
-        sourceType: 4
-      },
-      tableList: [] as any,
-      show: false,
-      item: {} as any
-    });
-    const getList = async () => {
-      try {
-        state.loading = true;
-        const { data } = await materialQueryPage({
-          ...state.searchGroup,
-          ...state.pagination
-        });
-        state.loading = false;
-        state.pageTotal = Number(data.total);
-        const tempRows = data.rows || [];
-        const temp: any = [];
-        tempRows.forEach((row: any) => {
-          temp.push({
-            id: row.id,
-            coverImg: row.coverImg,
-            type: row.type,
-            title: row.name,
-            isCollect: !!row.favoriteFlag,
-            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
-            refFlag: row.refFlag,
-            content: row.content,
-            subjectId: row.subjectIds,
-            enableFlag: row.enableFlag ? 1 : 0,
-            openFlag: row.openFlag
-          });
-        });
-        state.tableList = temp || [];
-        setTimeout(() => {
-          showGuide.value = true;
-        }, 500);
-      } catch {
-        state.loading = false;
-      }
-    };
-    const showGuide = ref(false);
-    const onSearch = async (item: any) => {
-      state.pagination.page = 1;
-
-      const { subjectId, ...res } = item;
-      state.searchGroup = Object.assign(state.searchGroup, {
-        ...res,
-        musicalInstrumentId: subjectId,
-        subjectId: null
-      });
-
-      getList();
-    };
-    // 收藏
-    const onCollect = async (item: any) => {
-      try {
-        await favorite({
-          materialId: item.id,
-          favoriteFlag: item.isCollect ? 0 : 1,
-          type: item.type
-        });
-        item.isCollect = !item.isCollect;
-
-        // onSearch(state.searchGroup);
-      } catch {
-        //
-      }
-    };
-
-    // 单个删除
-    const onRemove = async (item: any) => {
-      try {
-        dialog.warning({
-          title: '提示',
-          content: '该资源已下架，是否删除？',
-          positiveText: '确定',
-          negativeText: '取消',
-          onPositiveClick: async () => {
-            await materialRemove({ id: item.id });
-            message.success('删除成功');
-            onSearch(state.searchGroup);
-          }
-        });
-      } catch {
-        //
-      }
-    };
-
-    onMounted(() => {
-      getList();
-    });
-    return () => (
-      <>
-        <SearchGroupResources onSearch={(item: any) => onSearch(item)} />
-
-        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
-          <div class={styles.list} id="myColloge-0">
-            {state.tableList.map((item: any) => (
-              <div class={styles.itemWrap}>
-                <div class={styles.itemWrapBox}>
-                  <CardType
-                    item={item}
-                    offShelf={item.enableFlag ? false : true}
-                    onOffShelf={() => onRemove(item)}
-                    disabledMouseHover={false}
-                    onClick={(val: any) => {
-                      if (val.type === 'IMG' || !item.enableFlag) return;
-                      state.show = true;
-                      state.item = val;
-                    }}
-                    onCollect={(item: any) => onCollect(item)}
-                  />
-                </div>
-              </div>
-            ))}
-
-            {!state.loading && state.tableList.length <= 0 && (
-              <TheEmpty
-                style={{ minHeight: '50vh' }}
-                description="暂无收藏资源"
-              />
-            )}
-          </div>
-        </NSpin>
-
-        <Pagination
-          v-model:page={state.pagination.page}
-          v-model:pageSize={state.pagination.rows}
-          v-model:pageTotal={state.pageTotal}
-          onList={getList}
-        />
-
-        {/* 弹窗查看 */}
-        <CardPreview v-model:show={state.show} item={state.item} />
-        {showGuide.value ? <MyCollogeGuide></MyCollogeGuide> : null}
-      </>
-    );
-  }
-});
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+import styles from './index.module.less';
+import CardType from '@/components/card-type';
+import Pagination from '@/components/pagination';
+import SearchGroupResources from './search-group-resources';
+import { favorite, materialQueryPage, materialRemove } from '../../api';
+import {
+  NButton,
+  NModal,
+  NSpace,
+  NSpin,
+  useDialog,
+  useMessage
+} from 'naive-ui';
+import TheEmpty from '@/components/TheEmpty';
+import CardPreview from '@/components/card-preview';
+import MyCollogeGuide from '@/custom-plugins/guide-page/myColloge-guide';
+export default defineComponent({
+  name: 'share-resources',
+  setup() {
+    const message = useMessage();
+    const dialog = useDialog();
+    const state = reactive({
+      searchWord: '',
+      loading: false,
+      pageTotal: 0,
+      pagination: {
+        page: 1,
+        rows: 20
+      },
+      searchGroup: {
+        type: 'MUSIC', //
+        name: '',
+        bookVersionId: null,
+        subjectId: null,
+        sourceType: 4
+      },
+      tableList: [] as any,
+      show: false,
+      item: {} as any,
+      removeVisiable: false,
+      removeContent: '该资源已下架，是否删除？',
+      removeItem: {} as any
+    });
+    const getList = async () => {
+      try {
+        state.loading = true;
+        const { data } = await materialQueryPage({
+          ...state.searchGroup,
+          ...state.pagination
+        });
+        state.loading = false;
+        state.pageTotal = Number(data.total);
+        const tempRows = data.rows || [];
+        const temp: any = [];
+        tempRows.forEach((row: any) => {
+          temp.push({
+            id: row.id,
+            coverImg: row.coverImg,
+            type: row.type,
+            title: row.name,
+            isCollect: !!row.favoriteFlag,
+            isSelected: row.sourceFrom === 'PLATFORM' ? true : false,
+            refFlag: row.refFlag,
+            content: row.content,
+            subjectId: row.subjectIds,
+            enableFlag: row.enableFlag ? 1 : 0,
+            openFlag: row.openFlag
+          });
+        });
+        state.tableList = temp || [];
+        setTimeout(() => {
+          showGuide.value = true;
+        }, 500);
+      } catch {
+        state.loading = false;
+      }
+    };
+    const showGuide = ref(false);
+    const onSearch = async (item: any) => {
+      state.pagination.page = 1;
+
+      const { subjectId, ...res } = item;
+      state.searchGroup = Object.assign(state.searchGroup, {
+        ...res,
+        musicalInstrumentId: subjectId,
+        subjectId: null
+      });
+
+      getList();
+    };
+    // 收藏
+    const onCollect = async (item: any) => {
+      try {
+        await favorite({
+          materialId: item.id,
+          favoriteFlag: item.isCollect ? 0 : 1,
+          type: item.type
+        });
+        item.isCollect = !item.isCollect;
+
+        // onSearch(state.searchGroup);
+      } catch {
+        //
+      }
+    };
+
+    // 单个删除
+    const onRemove = async () => {
+      try {
+        // await materialRemove({ ids: state.removeItem.id });
+        await favorite({
+          materialId: state.removeItem.id,
+          favoriteFlag: 0,
+          type: state.removeItem.type
+        });
+        message.success('删除成功');
+        onSearch(state.searchGroup);
+      } catch {
+        //
+      }
+    };
+
+    onMounted(() => {
+      getList();
+    });
+    return () => (
+      <>
+        <SearchGroupResources onSearch={(item: any) => onSearch(item)} />
+
+        <NSpin v-model:show={state.loading} style={{ 'min-height': '50vh' }}>
+          <div class={styles.list} id="myColloge-0">
+            {state.tableList.map((item: any) => (
+              <div class={styles.itemWrap}>
+                <div class={styles.itemWrapBox}>
+                  <CardType
+                    item={item}
+                    offShelf={item.enableFlag ? false : true}
+                    onOffShelf={() => {
+                      state.removeVisiable = true;
+                      state.removeItem = item;
+                    }}
+                    disabledMouseHover={false}
+                    onClick={(val: any) => {
+                      if (val.type === 'IMG' || !item.enableFlag) return;
+                      state.show = true;
+                      state.item = val;
+                    }}
+                    onCollect={(item: any) => onCollect(item)}
+                  />
+                </div>
+              </div>
+            ))}
+
+            {!state.loading && state.tableList.length <= 0 && (
+              <TheEmpty
+                style={{ minHeight: '50vh' }}
+                description="暂无收藏资源"
+              />
+            )}
+          </div>
+        </NSpin>
+
+        <Pagination
+          v-model:page={state.pagination.page}
+          v-model:pageSize={state.pagination.rows}
+          v-model:pageTotal={state.pageTotal}
+          onList={getList}
+        />
+
+        {/* 弹窗查看 */}
+        <CardPreview v-model:show={state.show} item={state.item} />
+        {showGuide.value ? <MyCollogeGuide></MyCollogeGuide> : null}
+
+        <NModal
+          v-model:show={state.removeVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'提示'}>
+          <div class={styles.studentRemove}>
+            <p>{state.removeContent}</p>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton
+                round
+                type="primary"
+                onClick={() => {
+                  onRemove();
+                  state.removeVisiable = false;
+                }}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (state.removeVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+      </>
+    );
+  }
+});