修改分享和全屏样式

src/components/m-image-preview/index.module.less

@@ -20,5 +20,10 @@
     .van-image-preview__index {
       z-index: var(--van-image-preview-close-icon-z-index);
     }
+
+    .plyr--fullscreen-fallback {
+      height: 100% !important;
+      width: var(--window-page-width) !important;
+    }
   }
 }

src/components/m-image-preview/index.tsx

@@ -11,6 +11,7 @@ import {
 import {
   PropType,
   defineComponent,
+  nextTick,
   onMounted,
   reactive,
   ref,
@@ -24,6 +25,7 @@ import { checkFile } from '@/helpers/toolsValidate';
 import MVideo from '../m-video';
 import { state } from '@/state';
 import { browser } from '@/helpers/utils';
+import deepClone from '@/helpers/deep-clone';
 
 export default defineComponent({
   name: 'm-image-preview',
@@ -61,8 +63,10 @@ export default defineComponent({
   setup(props, { emit }) {
     const forms = reactive({
       show: false,
+      showButton: true,
       index: props.startPosition + 1,
-      saveLoading: false
+      saveLoading: false,
+      preLoading: false
     });
 
     const onSave = async (img: string) => {
@@ -99,6 +103,12 @@ export default defineComponent({
 
     onMounted(() => {
       forms.show = props.show;
+      // console.log(window.document.body.clientWidth);
+      document.documentElement.style.setProperty(
+        '--window-page-width',
+        (window.document.body.clientWidth || window.document.body.offsetWidth) +
+          'px'
+      );
     });
 
     watch(
@@ -106,6 +116,23 @@ export default defineComponent({
       () => {
         forms.show = props.show;
         forms.index = props.startPosition + 1;
+        forms.preLoading = props.show;
+        // console.log(forms.preLoading, 'show');
+        // nextTick(() => {
+        //   // 判断打开的内容是否为视频，是则自动播放
+        //   const defaultUrl = props.images[props.startPosition];
+        //   console.log(defaultUrl, 'defaultUrl');
+        //   if (checkFile(defaultUrl, 'video') && props.show) {
+        //     console.log(1111, videoRef.value);
+        //     //   videoRef.value[props.startPosition]?.onPlay();
+        //     videoRef.value.forEach((item: any, child: any) => {
+        //       if (child === props.startPosition) {
+        //         console.log(item, 'item');
+        //         item?.onPlay();
+        //       }
+        //     });
+        //   }
+        // });
       }
     );
     watch(
@@ -115,13 +142,6 @@ export default defineComponent({
       }
     );
 
-    onMounted(() => {
-      // navBarHeight;
-      // document.documentElement.style.setProperty(
-      //   '--header-height',
-      //   height + 'px'
-      // );
-    });
     return () => (
       <Popup
         teleport={props.teleport}
@@ -130,49 +150,53 @@ export default defineComponent({
         class={['van-image-preview', styles.imagePreview]}>
         {forms.show ? (
           <>
-            <Icon
-              name={iconPreviewClose}
-              class="van-image-preview__close-icon van-image-preview__close-icon--top-left van-haptics-feedback"
-              style={{
-                top: state.navBarHeight
-                  ? state.navBarHeight + 'px'
-                  : 'var(--van-padding-md)'
-              }}
-              onClick={() => {
-                onPlay(-1);
-                emit('update:show', false);
-              }}
-            />
-            <div
-              class={'van-image-preview__index'}
-              style={{
-                top: state.navBarHeight
-                  ? state.navBarHeight + 'px'
-                  : 'var(--van-padding-md)'
-              }}>
-              {forms.index} / {props.images.length}
-            </div>
-            {props.showDownload && browser().isApp ? (
-              <Icon
-                name={iconPreviewDownload}
-                class="van-image-preview__close-icon van-image-preview__close-icon--top-right van-haptics-feedback"
-                style={{
-                  top: state.navBarHeight
-                    ? state.navBarHeight + 'px'
-                    : 'var(--van-padding-md)'
-                }}
-                onClick={() => {
-                  console.log(
-                    forms.index,
-                    'index',
-                    props.images[forms.index - 1]
-                  );
+            {forms.showButton && (
+              <>
+                <Icon
+                  name={iconPreviewClose}
+                  class="van-image-preview__close-icon van-image-preview__close-icon--top-left van-haptics-feedback"
+                  style={{
+                    top: state.navBarHeight
+                      ? state.navBarHeight + 'px'
+                      : 'var(--van-padding-md)'
+                  }}
+                  onClick={() => {
+                    onPlay(-1);
+                    emit('update:show', false);
+                  }}
+                />
+                <div
+                  class={'van-image-preview__index'}
+                  style={{
+                    top: state.navBarHeight
+                      ? state.navBarHeight + 'px'
+                      : 'var(--van-padding-md)'
+                  }}>
+                  {forms.index} / {props.images.length}
+                </div>
+                {props.showDownload && browser().isApp ? (
+                  <Icon
+                    name={iconPreviewDownload}
+                    class="van-image-preview__close-icon van-image-preview__close-icon--top-right van-haptics-feedback"
+                    style={{
+                      top: state.navBarHeight
+                        ? state.navBarHeight + 'px'
+                        : 'var(--van-padding-md)'
+                    }}
+                    onClick={() => {
+                      console.log(
+                        forms.index,
+                        'index',
+                        props.images[forms.index - 1]
+                      );
 
-                  onSave(props.images[forms.index - 1]);
-                }}
-              />
-            ) : (
-              ''
+                      onSave(props.images[forms.index - 1]);
+                    }}
+                  />
+                ) : (
+                  ''
+                )}
+              </>
             )}
             <Swipe
               autoplay={0}
@@ -182,6 +206,7 @@ export default defineComponent({
               initialSwipe={props.startPosition}
               onChange={(index: number) => {
                 forms.index = index + 1;
+                // forms.preLoading = true;
                 onPlay(index);
               }}
               lazyRender>
@@ -202,10 +227,29 @@ export default defineComponent({
                         e.preventDefault();
                       }}>
                       <MVideo
-                        ref={(el: any) => (videoRef.value[index] = el)}
+                        ref={(el: any) => {
+                          videoRef.value[index] = el;
+                          // if (forms.index === index + 1 && forms.preLoading) {
+                          //   console.log(el, 'player');
+                          //   el?.onPlay();
+                          //   forms.preLoading = false;
+                          // }
+                        }}
+                        // onReady={player => {
+                        //   if (
+                        //     props.startPosition === index &&
+                        //     forms.preLoading
+                        //   ) {
+                        //     console.log(player, 'player');
+                        //     player?.play();
+                        //     forms.preLoading = false;
+                        //   }
+                        // }}
                         src={url}
                         onPlay={() => onPlay(index)}
                         preLoading={false}
+                        onEnterfullscreen={() => (forms.showButton = false)}
+                        onExitfullscreen={() => (forms.showButton = true)}
                       />
                     </div>
                   )}

src/components/m-video/index.tsx

@@ -46,7 +46,7 @@ export default defineComponent({
     //   default: () => {}
     // }
   },
-  emits: ['exitfullscreen', 'play'],
+  emits: ['exitfullscreen', 'play', 'ready', 'enterfullscreen'],
   data() {
     return {
       player: null as any,
@@ -77,10 +77,16 @@ export default defineComponent({
       //   'download ' ,  // 显示一个下载按钮，其中包含指向当前源或您在选项中指定的自定义 URL 的链接
       //   'fullscreen' ,  // 切换全屏
       // ] ;
-      const controls = ['play-large', 'play', 'progress', 'captions'];
-      if (browser().isApp) {
-        controls.push('fullscreen');
-      }
+      const controls = [
+        'play-large',
+        'play',
+        'progress',
+        'captions',
+        'fullscreen'
+      ];
+      // if (browser().isApp) {
+      //   controls.push('fullscreen');
+      // }
       if (this.currentTime) {
         controls.push('current-time');
       }
@@ -117,20 +123,32 @@ export default defineComponent({
         this.domPlayVisibility(false);
       });
 
+      this.player.on('loadeddata', () => {
+        this.$emit('ready', this.player);
+      });
+
       this.player.on('play', () => {
         this.$emit('play', this.player);
       });
 
       this.player.on('enterfullscreen', () => {
         console.log('fullscreen');
+        const fragment = document.createDocumentFragment();
         const i = document.createElement('i');
         i.id = 'fullscreen-back';
         i.className = 'van-icon van-icon-arrow-left video-back';
         i.addEventListener('click', () => {
           this.player.fullscreen.exit();
         });
-        console.log(document.getElementsByClassName('plyr'));
-        document.getElementsByClassName('plyr')[0].appendChild(i);
+        console.log(document.getElementsByClassName('plyr'), i);
+        fragment.appendChild(i);
+        const parentNode = document.getElementsByClassName('plyr')[0];
+        parentNode.insertBefore(fragment, parentNode.firstChild);
+        // document
+        //   .getElementsByClassName('plyr__controls')[0]
+        //   .insertBefore(fragment);
+
+        this.$emit('enterfullscreen');
       });
 
       this.player.on('exitfullscreen', () => {
@@ -156,6 +174,9 @@ export default defineComponent({
     },
     onStop() {
       this.player.stop();
+    },
+    onPlay() {
+      this.player?.play();
     }
   },
   unmounted() {

src/views/activity-record/detail.module.less

@@ -614,27 +614,29 @@
     background-size: 131px 27px;
     position: absolute;
     left: 25px;
-    top: 83px;
+    top: 100px;
     font-weight: 600;
     color: #ffffff;
-    font-size: 12px;
+    font-size: 11px;
   }
 
   .codeImg {
     position: relative;
     width: 315px;
-    height: 440px;
+    height: 480px;
     z-index: 9;
     // background: url('./images/week/popup-week-banner.png') no-repeat top center;
     // background-size: contain;
     margin: 0 auto;
     background-color: #ffffff;
-    border-radius: 8px;
+    border-radius: 1px;
     overflow: hidden;
 
     .popupWeekBanner {
       width: 100%;
-      // position: absolute;
+      position: absolute;
+      top: 0;
+      left: 0;
       top: 0;
       left: 0;
       z-index: -1;
@@ -686,13 +688,17 @@
 
     .codeContent {
       position: relative;
+      background-color: #fff;
+      margin: 176px 24px 28px;
+      border-radius: 16px;
+      padding-bottom: 18px;
 
       .schoolLogo {
         width: 52px;
         height: 52px;
         border-radius: 50%;
         overflow: hidden;
-        border: 3px solid #fff;
+        border: 2px solid #fff;
         position: absolute;
         top: -26px;
         left: 50%;
@@ -729,8 +735,8 @@
       .codeQr {
         position: relative;
         margin: 0 auto 0;
-        width: 126px;
-        height: 126px;
+        width: 114px;
+        height: 114px;
         padding: 12px;
         // background: url('./images/popup-qrcode-bg.png') no-repeat center;
         // background-size: contain;
@@ -747,8 +753,8 @@
           position: absolute;
           top: 0;
           left: 0;
-          width: 126px;
-          height: 126px;
+          width: 114px;
+          height: 114px;
         }
       }
     }

src/views/activity-record/detail.tsx

@@ -61,6 +61,7 @@ import shareBg from './images/shareBg.png';
 import schoolIcon from './images/schoolIcon.png';
 import popupQrcodeBg from './images/popupQrcodeBg.png';
 import shareBottom from './images/shareBottom.png';
+import popupShareBg from './images/popup-share-bg.png';
 import { vaildTeachingUrl } from '@/helpers/utils';
 export default defineComponent({
   name: 'detail-page',
@@ -324,7 +325,6 @@ export default defineComponent({
           }}>
           {browser().isApp ? (
             <>
-              {' '}
               <div
                 class={styles.fixWrap}
                 style={{ top: state.navBarHeight + 20 + 'px' }}>
@@ -605,7 +605,7 @@ export default defineComponent({
             <div
               class={[styles.codeImg, styles.teacherCodeImg]}
               id="preview-container">
-              <Image src={shareBg} class={styles.popupWeekBanner} />
+              <Image src={popupShareBg} class={styles.popupWeekBanner} />
               <div class={styles.timerBg}>
                 {dayjs(forms.headerDetail.startTime).format('YYYY年MM月DD日')}
               </div>