添加弹窗样式

src/views/courseList/index.module.less

@@ -23,6 +23,7 @@
     background-position: center;
     background-size: 50%;
     flex-shrink: 0;
+
     &>img {
       display: block;
       width: 100%;
@@ -184,4 +185,22 @@
     height: 100%;
     display: block;
   }
+}
+
+.courseDialog {
+  :global {
+    .van-dialog__header {
+      // padding-top: 0;
+
+    }
+  }
+
+  .iconCross {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 22px;
+    color: #ccc;
+    z-index: 99;
+  }
 }

src/views/courseList/index.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   Cell,
   CellGroup,
+  Dialog,
   Empty,
   Grid,
   GridItem,
@@ -53,6 +54,8 @@ export default defineComponent({
     // const catchList = store
     const data = reactive({
       titleOpacity: 0,
+      catchStatus: false,
+      catchItem: {} as any,
       loading: true,
       detail: {
         cover: '',
@@ -177,15 +180,17 @@ export default defineComponent({
           downCatch(item)
           return
         }
-        try {
-          await showConfirmDialog({
-            message: '当前课程没有缓存,是否缓存?'
-          })
-        } catch (error) {
-          gotoPlay(item)
-          return
-        }
-        downCatch(item)
+        data.catchStatus = true
+        data.catchItem = item
+        // try {
+        //   await showConfirmDialog({
+        //     message: '当前课程没有缓存,是否缓存?',
+        //   })
+        // } catch (error) {
+        //   gotoPlay(item)
+        //   return
+        // }
+        // downCatch(item)
         return
       }
       gotoPlay(item)
@@ -396,6 +401,30 @@ export default defineComponent({
         </TransitionGroup>
         {data.loading && <OLoading />}
         {!data.loading && !data.list.length && <OEmpty tips="暂无内容" />}
+
+        <Dialog
+          v-model:show={data.catchStatus}
+          showCancelButton
+          message={'当前课程没有缓存,是否缓存?'}
+          closeOnClickOverlay
+          class={styles.courseDialog}
+          onConfirm={() => {
+            downCatch(data.catchItem)
+          }}
+          onCancel={() => {
+            gotoPlay(data.catchItem)
+          }}
+        >
+          {{
+            title: () => (
+              <Icon
+                name="cross"
+                class={styles.iconCross}
+                onClick={() => (data.catchStatus = false)}
+              />
+            )
+          }}
+        </Dialog>
       </div>
     )
   }