feat: 稿件详情

src/router/routes/modules/creativeGenerationWorkshop.ts

@@ -63,6 +63,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
           locale: '稿件详情',
           requiresAuth: false,
           requireLogin: false,
+          hideFooter: true,
           roles: ['*'],
           hideInMenu: true,
           activeMenu: 'ManuscriptList',
@@ -84,9 +85,10 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         path: 'check/:id',
         name: 'ManuscriptCheck',
         meta: {
-          locale: '内容稿件审核',
+          locale: '稿件审核',
           requiresAuth: false,
           requireLogin: false,
+          hideFooter: true,
           roles: ['*'],
           hideInMenu: true,
           activeMenu: 'ManuscriptCheckList',

src/views/creative-generation-workshop/manuscript/detail/index.vue

@@ -1,5 +1,8 @@
 <script lang="jsx">
 import { Button, Message as AMessage } from '@arco-design/web-vue';
+import icon1 from '@/assets/img/creative-generation-workshop/icon-play.png';
+import icon2 from '@/assets/img/creative-generation-workshop/icon-play-hover.png';
+import { useRouter, useRoute } from 'vue-router';
 
 export default {
   setup(props, { emit, expose }) {
@@ -7,9 +10,61 @@ export default {
     const route = useRoute();
     const workId = ref(route.params.id);
 
+    // 视频播放相关状态
+    const isPlaying = ref(false);
+    const isHovered = ref(false);
+    const videoRef = ref(null);
+    const videoUrl = ref(''); // 视频URL，实际项目中可能从API获取
+    const coverImageUrl = ref(''); // 封面图URL，实际项目中可能从API获取
+    const isVideoLoaded = ref(false); // 视频是否已加载
+
     const onBack = () => {
       router.push({ name: 'ManuscriptList' });
     };
+
+    const togglePlay = () => {
+      if (!videoRef.value) return;
+
+      if (isPlaying.value) {
+        videoRef.value.pause();
+      } else {
+        // 首次播放时才加载视频
+        if (!isVideoLoaded.value) {
+          videoRef.value.src = videoUrl.value;
+          isVideoLoaded.value = true;
+        }
+        videoRef.value.play();
+      }
+      isPlaying.value = !isPlaying.value;
+    };
+
+    const onVideoEnded = () => {
+      isPlaying.value = false;
+    };
+    const onMouseEnter = () => {
+      isHovered.value = true;
+    };
+    const onMouseLeave = () => {
+      isHovered.value = false;
+    };
+    let containerRef = null;
+
+    onMounted(() => {
+      containerRef = document.querySelector('.main-img-box');
+      if (containerRef) {
+        containerRef.addEventListener('mouseenter', onMouseEnter);
+        containerRef.addEventListener('mouseleave', onMouseLeave);
+      }
+    });
+
+    onUnmounted(() => {
+      if (containerRef) {
+        containerRef.removeEventListener('mouseenter', onMouseEnter);
+        containerRef.removeEventListener('mouseleave', onMouseLeave);
+        containerRef = null;
+      }
+    });
+
     const renderFooterRow = () => {
       return (
         <>
@@ -30,9 +85,10 @@ export default {
         </>
       );
     };
+
     return () => (
       <>
-        <div class="manuscript-check-wrap">
+        <div class="manuscript-detail-wrap">
           <div class="flex items-center mb-8px">
             <span class="cts color-#4E5969 cursor-pointer" onClick={onBack}>
               内容稿件列表
@@ -40,6 +96,46 @@ export default {
             <icon-oblique-line size="12" class="color-#C9CDD4 mx-4px" />
             <span class="cts bold !color-#1D2129">内容稿件详情</span>
           </div>
+          <div class="flex-1 overflow-y-auto bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid py-32px">
+            <div class="w-684px mx-auto flex flex-col items-center">
+              <p class="mb-8px cts bold !text-28px !lh-40px !color-#211F24">
+                挖到宝了！这个平价好物让我素颜出门都自信✨挖到宝了！这个平价
+              </p>
+              <p class="cts !text-12px !color-#737478 mb-32px w-full text-left">6月26日修改</p>
+
+              <div class="main-img-box mb-16px relative overflow-hidden cursor-pointer" onClick={togglePlay}>
+                <video ref={videoRef} class="w-100% h-100% object-cover" onEnded={onVideoEnded}></video>
+
+                <img
+                  v-show={!isPlaying.value}
+                  src={coverImageUrl.value}
+                  class="w-100% h-100% object-cover absolute inset-0"
+                />
+
+                <div v-show={!isPlaying.value} class="absolute inset-0 flex items-center justify-center">
+                  <img src={isHovered.value ? icon2 : icon1} class="w-64px h-64px transition-all duration-300" />
+                </div>
+              </div>
+
+              <p class="cts !color-#211F24 mb-40px">
+                谁懂啊！作为混干皮，每天素颜出门总被说 “气色好差”，直到被闺蜜按头安利这个 30 块的素颜霜 ——
+                质地像冰淇淋一样推开就化，完全不卡粉！带一点自然提亮，黄黑皮涂完像天生好皮肤，连遮瑕都省了～
+                最绝的是它还带轻微防晒值，早上洗完脸涂一层就能冲出门，懒人狂喜！我已经空罐 3
+                瓶了，现在同事都以为我每天早起化妆，其实我多睡了 20 分钟 hhh
+                （PS：油痘肌姐妹建议局部薄涂，后续补妆更服帖～）
+              </p>
+              <div class="desc-img-wrap">
+                {new Array(5).fill(0).map((item, index) => (
+                  <div class="desc-img-box" key={index}>
+                    <img src="" class="w-100% h-100%" />
+                  </div>
+                ))}
+                <div class="desc-img-box">
+                  <img src="" class="w-100% h-100%" />
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
         <div class="flex justify-end items-center px-16px py-20px w-full bg-#fff footer-row">{renderFooterRow()}</div>
       </>

src/views/creative-generation-workshop/manuscript/detail/style.scss

@@ -14,6 +14,25 @@ $footer-height: 68px;
       font-family: $font-family-medium;
     }
   }
+  .main-img-box {
+    width: 320px;
+    height: 472px;
+    background: #fff;
+    object-fit: contain;
+    aspect-ratio: 3/4;
+  }
+  .desc-img-wrap {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    .desc-img-box {
+      width: 212px;
+      height: 283px;
+      background: #fff;
+      object-fit: contain;
+      aspect-ratio: 3/4;
+    }
+  }
 }
 .footer-row {
   position: fixed;
@@ -22,4 +41,4 @@ $footer-height: 68px;
   width: calc(100% - $sidebar-width);
   border-top: 1px solid #e6e6e8;
   height: $footer-height;
-}
+}

src/views/creative-generation-workshop/manuscript/edit/index.vue

@@ -46,6 +46,8 @@ export default {
 
           if (check) {
             router.push({ name: 'ManuscriptCheck', params: { id: workId.value } });
+          } else {
+            onBack()
           }
         }
       });

src/views/creative-generation-workshop/manuscript/upload/index.vue

@@ -6,6 +6,7 @@ import CancelUploadModal from './cancel-upload-modal.vue';
 import UploadSuccessModal from './upload-success-modal.vue';
 
 import { EnumManuscriptType } from '@/views/creative-generation-workshop/manuscript/list/constants';
+import { postWorksBatch } from '@/api/all/generationWorkshop.ts';
 
 import icon1 from '@/assets/img/creative-generation-workshop/icon-photo.png';
 import icon2 from '@/assets/img/creative-generation-workshop/icon-video.png';
@@ -27,20 +28,22 @@ export default {
   },
   setup(props, { emit, expose }) {
     const formRef = ref(null);
+    const route = useRoute();
     const cancelUploadModal = ref(null);
     const uploadSuccessModal = ref(null);
-    const dataSource = ref([]);
+    const works = ref([]);
     const selectCardInfo = ref({});
     const errorDataCards = ref([]);
     const uploadLoading = ref(false);
+    const workId = route.params.id;
 
     const onCancel = () => {
-      cancelUploadModal.value?.open(dataSource.value.length);
+      cancelUploadModal.value?.open(works.value.length);
     };
 
     const validateDataSource = () => {
       return new Promise((resolve) => {
-        dataSource.value.forEach((item) => {
+        works.value.forEach((item) => {
           if (!item.title?.trim()) {
             errorDataCards.value.push(item);
           }
@@ -50,8 +53,8 @@ export default {
         }
 
         if (errorDataCards.value.length > 0) {
-          AMessage.error(`有 ${errorDataCards.value.length} 个必填信息未填写，请检查`);
+          AMessage.warning(`有 ${errorDataCards.value.length} 个必填信息未填写，请检查`);
-          
+
           setTimeout(() => {
             const el = document.getElementById(`card-${errorDataCards.value[0]?.id}`);
             if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -61,13 +64,21 @@ export default {
       });
     };
 
-    const onSubmit = async () => {
+    const onUpload = async (e, check = false) => {
+      console.log('onUpload', works.value);
       formRef.value
         ?.validate()
         .then(() => {
-          validateDataSource().then((res) => {
+          validateDataSource().then(async (res) => {
-            console.log('success');
+            const { code, data } = await postWorksBatch({ works: works.value });
-            uploadSuccessModal.value?.open(dataSource.value);
+            if (code === 200) {
+              uploadLoading.value = false;
+              if (check) {
+                uploadSuccessModal.value?.open(workId);
+              } else {
+                router.push({ name: 'ManuscriptList' });
+              }
+            }
           });
         })
         .catch((err) => {
@@ -75,8 +86,8 @@ export default {
         });
     };
 
-    const onSubmitAndCheck = () => {
+    const onUploadAndCheck = (e) => {
-      console.log('onSubmitAndCheck');
+      onUpload(e, true);
     };
 
     const handleReValidate = () => {
@@ -95,12 +106,12 @@ export default {
 
     const onDelete = (e, item, index) => {
       e.stopPropagation();
-      dataSource.value.splice(index, 1);
+      works.value.splice(index, 1);
       deleteErrorCard(item);
 
       if (item.id === selectCardInfo.value.id) {
-        if (dataSource.value.length) {
+        if (works.value.length) {
-          const _target = dataSource.value[0] ?? {};
+          const _target = works.value[0] ?? {};
           selectCardInfo.value = _target;
         } else {
           selectCardInfo.value = {};
@@ -109,13 +120,13 @@ export default {
     };
 
     const renderFooterRow = () => {
-      if (dataSource.value.length > 1) {
+      if (works.value.length > 1) {
         return (
           <>
             <Button size="medium" type="outline" onClick={onCancel} class="mr-12px">
               取消上传
             </Button>
-            <Button type="primary" size="medium" onClick={onSubmit} loading={uploadLoading.value}>
+            <Button type="primary" size="medium" onClick={onUpload} loading={uploadLoading.value}>
               {uploadLoading.value ? '批量上传' : '批量上传'}
             </Button>
           </>
@@ -126,10 +137,10 @@ export default {
             <Button size="medium" type="outline" onClick={onCancel} class="mr-12px">
               取消上传
             </Button>
-            <Button size="medium" type="outline" onClick={onSubmit} class="mr-12px">
+            <Button size="medium" type="outline" onClick={onUpload} class="mr-12px" loading={uploadLoading.value}>
               上传
             </Button>
-            <Button type="primary" size="medium" onClick={onSubmitAndCheck} loading={uploadLoading.value}>
+            <Button type="primary" size="medium" onClick={onUploadAndCheck} loading={uploadLoading.value}>
               上传并审核
             </Button>
           </>
@@ -137,8 +148,8 @@ export default {
       }
     };
     const getData = () => {
-      dataSource.value = generateMockData();
+      works.value = generateMockData();
-      selectCardInfo.value = dataSource.value[0] ?? {};
+      selectCardInfo.value = works.value[0] ?? {};
     };
     const getCardClass = (item) => {
       if (selectCardInfo.value.id === item.id) {
@@ -159,15 +170,15 @@ export default {
           <div class="left flex-1 overflow-y-auto p-24px">
             <EditForm ref={formRef} v-model={selectCardInfo.value} onReValidate={handleReValidate} />
           </div>
-          {dataSource.value.length > 1 && (
+          {works.value.length > 1 && (
             <div class="right pt-24px pb-12px flex flex-col">
               <div class="title flex items-center  px-24px">
                 <div class="w-3px h-16px bg-#6D4CFE rounded-2px mr-8px"></div>
                 <p class="cts bold !color-#211F24 !text-16px !lh-24px mr-8px">上传内容稿件列表</p>
-                <p class="cts">{`共${dataSource.value.length}个`}</p>
+                <p class="cts">{`共${works.value.length}个`}</p>
               </div>
               <div class="flex-1 px-24px overflow-y-auto pt-24px">
-                {dataSource.value.map((item, index) => (
+                {works.value.map((item, index) => (
                   <div
                     key={item.id}
                     id={`card-${item.id}`}

src/views/creative-generation-workshop/manuscript/upload/upload-success-modal.vue

@@ -19,10 +19,10 @@ import icon1 from '@/assets/img/media-account/icon-feedback-success.png';
 
 const router = useRouter();
 const visible = ref(false);
-const data = ref([]);
+const workId = ref('');
 
 const onClose = () => {
-  data.value = [];
+  workId.value = '';
   visible.value = false;
 };
 
@@ -31,13 +31,13 @@ const onBack = () => {
   router.push({ name: 'ManuscriptList' });
 };
 const onConfirm = () => {
-  onClose();
+  visible.value = false;
-  console.log('跳转至「内容稿件审核」菜单tab，进入批量审核稿件页面');
+  router.push({ name: 'ManuscriptCheck', params: { id: workId.value } });
-  router.push({ name: 'ManuscriptCheck' });
 };
 
-const open = (dataSource) => {
+const open = (id) => {
-  data.value = dataSource;
+  console.log({ id });
+  workId.value = id;
 
   visible.value = true;
 };