更新

src/views/creation/edit/index.module.less

@@ -1,3 +1,98 @@
+.sectionVideo {
+  position: relative;
+  line-height: 0;
+  overflow: visible !important;
+  margin-bottom: 24px !important;
+
+  .videoBg {
+    width: 100%;
+    height: 160px;
+    object-fit: cover;
+    border-radius: 10px;
+  }
+
+  .btnGroup {
+    position: absolute;
+    left: 50%;
+    bottom: -12px;
+    background: linear-gradient(180deg, rgba(128, 158, 200, 0.59) 0%, rgba(58, 101, 162, 0.59) 100%);
+    border-radius: 15px;
+    height: 30px;
+    // transform: translate(-50%);
+    display: flex;
+    align-items: center;
+    flex: 1;
+    font-size: 12px;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 17px;
+    width: 300px;
+    margin: 0 0 0 -150px;
+
+    &>div {
+      flex: 1;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .btnCropper {
+      border-left: 1px solid #fff;
+
+      &::before {
+        content: '';
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        background: url('../images/icon-cropper.png') no-repeat center;
+        background-size: contain;
+        margin-right: 4px;
+      }
+    }
+
+    .btnImg {
+      // &::before {
+      //   content: '';
+      //   width: 16px;
+      //   height: 16px;
+      //   display: inline-block;
+      //   background: url('../images/icon-image.png') no-repeat center;
+      //   background-size: contain;
+      //   margin-right: 4px;
+      // }
+
+
+      :global {
+        .van-icon {
+          display: flex;
+          align-items: center;
+
+          &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            display: inline-block;
+            background: url('../images/icon-image.png') no-repeat center;
+            background-size: contain;
+            margin-right: 4px;
+          }
+
+          &::after {
+            content: '相册获取封面';
+            font-size: 12px;
+            color: #fff;
+          }
+
+          img {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
 .section {
   margin: 12px 13px;
   background: #FFFFFF;

src/views/creation/edit/index.tsx

@@ -6,6 +6,8 @@ import { Button, Field, showToast } from 'vant';
 import MUploader from '@/components/m-uploader';
 import { api_userMusicDetail, api_userMusicSave } from '../api';
 import { useRoute, useRouter } from 'vue-router';
+import videoBg from '../images/video-bg.png';
+import { postMessage } from '@/helpers/native-message';
 
 export default defineComponent({
   name: 'creation-edit',
@@ -36,6 +38,24 @@ export default defineComponent({
         //
       }
     };
+
+    // 截图
+    const onCropper = () => {
+      postMessage(
+        {
+          api: 'videoCrop',
+          content: {
+            url: state.musicDetail.videoUrl
+          }
+        },
+        res => {
+          if (res?.content.videoCover) {
+            state.videoImg = res.content.videoCover;
+          }
+        }
+      );
+    };
+
     onMounted(async () => {
       try {
         const { data } = await api_userMusicDetail(state.id);
@@ -53,6 +73,25 @@ export default defineComponent({
           <MHeader border={false} />
         </MSticky>
 
+        <div class={[styles.section, styles.sectionVideo]}>
+          <img src={state.videoImg || videoBg} class={styles.videoBg} />
+          <div class={styles.btnGroup}>
+            <MUploader
+              class={styles.btnImg}
+              cropper
+              deletable={false}
+              onUploadChange={img => {
+                if (img.length > 0) {
+                  state.videoImg = img[0];
+                }
+              }}
+            />
+            <div class={styles.btnCropper} onClick={onCropper}>
+              视频截取封面
+            </div>
+          </div>
+        </div>
+
         <div class={styles.section}>
           <Field
             rows={4}