修改样式

src/components/globalTools/index.tsx

@@ -202,6 +202,7 @@ export default defineComponent({
         </div>
         <Pen
           show={penShow.value}
+          tip="请确认是否退出批注？"
           close={() => {
             penShow.value = false;
             isHidden.value = false;
@@ -210,6 +211,7 @@ export default defineComponent({
         <Pen
           show={whitePenShow.value}
           isWhite
+          tip="请确认是否退出白板？"
           close={() => {
             whitePenShow.value = false;
             isHidden.value = false;

src/views/coursewarePlay/component/tips/index.module.less

@@ -0,0 +1,56 @@
+
+.courseDialog {
+  padding: 20px !important;
+  max-width: 310px !important;
+  min-width: 295px !important;
+  background: url('./top-bg.png') no-repeat top center #fff !important;
+  background-size: contain !important;
+  overflow: hidden;
+
+  .iconClose {
+    width: 18px;
+    height: 19px;
+    position: absolute;
+    top: 23px;
+    right: 20px;
+    z-index: 9;
+    background: url('./icon-close.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .title {
+    position: relative;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1A1A1A;
+    line-height: 25px;
+    text-align: center;
+  }
+
+  .content {
+    padding: 20px 0 25px;
+    font-size: 16px;
+    color: #666666;
+    line-height: 24px;
+    text-align: center;
+  }
+
+  .popupBtnGroup {
+    display: flex;
+    align-items: center;
+
+    &>button {
+      flex: 1;
+      font-weight: 500;
+      font-size: 16px !important;
+
+      &:last-child {
+        margin-left: 15px;
+      }
+    }
+
+    :global {
+      --van-button-default-height: 40px;
+    }
+  }
+}

src/views/coursewarePlay/component/tips/index.tsx

@@ -0,0 +1,37 @@
+import { Button, Popup } from 'vant';
+import { defineComponent, reactive } from 'vue';
+import styles from './index.module.less';
+
+export const tipState = reactive({
+  show: false,
+  title: '温馨提示',
+  content: '退出后将清空批注内容',
+  cancelText: '取消',
+  confirmText: '确认退出'
+})
+
+export default defineComponent({
+  name: 'tips-popup',
+  emits: ['confirm'],
+  setup(props, { emit }) {
+    return () => (
+      <Popup v-model:show={tipState.show} round class={styles.courseDialog}>
+        <i
+          class={styles.iconClose}
+          onClick={() => (tipState.show = false)}></i>
+        <div class={styles.title}>{tipState.title}</div>
+
+        <div class={styles.content}>
+          {tipState.content}
+        </div>
+
+        <div class={styles.popupBtnGroup}>
+          <Button round onClick={() => tipState.show = false}>{tipState.cancelText}</Button>
+          <Button round type="primary" onClick={() => emit("confirm")}>
+            {tipState.confirmText}
+          </Button>
+        </div>
+      </Popup>
+    );
+  }
+});

src/views/coursewarePlay/component/tools/pen.tsx

@@ -16,6 +16,7 @@ import {
   nextTick
 } from 'vue';
 import styles from './pen.module.less';
+import Tips, { tipState } from '../tips';
 
 export default defineComponent({
   name: 'tools-pen',
@@ -24,6 +25,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    tip: {
+      type: String,
+      default: '请确认是否退出？'
+    },
     show: {
       type: Boolean,
       default: false
@@ -139,7 +144,10 @@ export default defineComponent({
         {imgs.exported ? (
           <img crossorigin="anonymous" class={styles.img} src={imgs.base64} />
         ) : (
-          <div class={styles.rightItem} onClick={() => props.close()}>
+          <div class={styles.rightItem} onClick={() => {
+            tipState.content = props.tip
+            tipState.show = true
+          }}>
             <svg width="22px" height="20px" viewBox="0 0 22 20">
               <path
                 transform="translate(-1.000000, -2.000000)"
@@ -148,6 +156,8 @@ export default defineComponent({
             </svg>
           </div>
         )}
+
+        <Tips onConfirm={() => props.close()} />
       </div>
     );
   }