调整素材信息展示结构

src/server/entity/function.js

@@ -68,7 +68,6 @@ export default {
     }
   },
   downloadBySubOrderNumber: async (req, res) => {
-    console.log(66, req.body);
     const params = [...req.body];
     params.pop();
     const token = req.headers["jwt-token"];
@@ -81,13 +80,13 @@ export default {
         { headers: { "jwt-token": token } }
       );
       let files = [];
+
       if (data.code === 200) {
         files = data.data;
         files = files.map((el) => {
           return { url: `${fileEnv}${el}` };
         });
-        // res.json({ code: 200, data: "" });
-        // return;
+
         if (req.body[1] === 1) {
           downloadImage(files)
             .then((data) => {

src/views/design/head/index.vue

@@ -219,7 +219,7 @@ export default {
           }
         );
         this.detail = findByPodProductionNo.data;
-        console.log(219, this.detail);
+        // console.log(219, this.detail);
 
         this.$store.commit("setProductDetail", findByPodProductionNo.data);
 
@@ -252,6 +252,8 @@ export default {
         } else {
           newImgList = res.data;
         }
+        console.log("newImgList", newImgList);
+
         // 延迟后强制激活窗口
         if (this.desktopDevice !== 1) {
           if (this.imgList.length) {

src/views/design/main/index.vue

@@ -180,12 +180,12 @@ export default {
   watch: {
     imgList: {
       handler(newValue) {
-        console.log(169, newValue);
+        // console.log(169, newValue);
 
         if (this.imgList.length > 0) {
           this.$nextTick(() => {
             let dom = document.getElementsByClassName("drr");
-            console.log("dom", dom);
+            // console.log("dom", dom);
 
             this.imgList.forEach((el, i) => {
               let dom_i = document.getElementsByClassName("drr")[i];
@@ -225,21 +225,28 @@ export default {
     productDetail(newValue) {
       this.detail = { ...newValue };
       if (typeof this.detail.imageAry == "string") {
-        this.detail.imageAry = JSON.parse(this.detail.imageAry).map((el) => {
-          if (!el.title) el.title = 1;
-          return el;
-        });
-        const otherArr = this.detail.imageAry.filter((el) => el.title == 1);
-        this.detail.AimageAry = [
-          ...this.detail.imageAry.filter((el) => el.title === "正"),
-          ...otherArr,
-        ];
-        this.detail.BimageAry = [
-          ...this.detail.imageAry.filter((el) => el.title === "反"),
-          ...otherArr,
-        ];
+        this.detail.imageAry = JSON.parse(this.detail.imageAry).filter(
+          (el) => el.title
+        );
+        const groupedData = this.detail.imageAry.reduce((acc, obj) => {
+          const titleKey = obj.title;
+          if (!acc[titleKey]) {
+            acc[titleKey] = {
+              title: titleKey,
+              viewImgList: [obj],
+              sourceImgList: [],
+            };
+          } else {
+            acc[titleKey].viewImgList.push(obj);
+          }
+          return acc;
+        }, {});
+        this.detail.imageAry = Object.values(groupedData);
+        console.log("imageAry", this.detail.imageAry);
       }
-      console.log("detail", this.detail);
+    },
+    changeCheckFn(value) {
+      console.log("check", value);
     },
   },
   methods: {
@@ -858,21 +865,27 @@ export default {
               <div class="pic-title">素材图</div>
             </el-col>
 
-            <el-row class="border-row">
-              <el-col :span="6" class="text-center"><div>A面</div></el-col>
+            <el-row
+              class="border-row"
+              v-for="(item, index) in detail.imageAry"
+              :key="index"
+            >
+              <el-col :span="6" class="text-center"
+                ><div>{{ item.title }}</div></el-col
+              >
               <el-col :span="9" class="border-col text-center">
                 <el-carousel
-                  v-if="detail.AimageAry?.length"
+                  v-if="item.viewImgList?.length"
                   height="170px"
                   :autoplay="false"
                   indicator-position="none"
                   style="width: 100%;"
                 >
                   <el-carousel-item
-                    v-for="(item, index) in detail.AimageAry"
-                    :key="index"
+                    v-for="(img, i) in item.viewImgList"
+                    :key="i"
                   >
-                    <img class="full-width" :src="item.url" alt="" />
+                    <img class="full-width" :src="img.url" alt="" />
                   </el-carousel-item>
                 </el-carousel>
                 <div v-else>&nbsp;</div>
@@ -881,32 +894,45 @@ export default {
                 :span="9"
                 style="overflow: hidden;align-items: stretch;flex-grow: 1"
               >
-                <el-checkbox-group
-                  v-if="selectImgList.length"
+                <!-- <el-checkbox-group
+                  v-if="item.sourceImgList?.length"
                   v-model="checkList"
                 >
-                  <el-checkbox
-                    :label="selectImgList[0]"
-                    :class="{
-                      imgchecked: checkList.includes(selectImgList[0]),
-                    }"
+                <el-checkbox
+                  v-for="(img, i) in item.sourceImgList"
+                  :key="i"
+                  :label="img"
+                  :class="{
+                    imgchecked: checkList.includes(img),
+                  }"
+                >
+                  <div class="img-item" @click.stop.prevent="selectImg(img, 0)">
+                    <img style="width: 140px" :src="img.productionFile" />
+                    <span>{{ img.designId }}</span>
+                  </div>
+                </el-checkbox>
+                </el-checkbox-group> -->
+
+                <el-carousel
+                  v-if="item.sourceImgList?.length"
+                  height="170px"
+                  :autoplay="false"
+                  indicator-position="none"
+                  style="width: 100%;"
+                >
+                  <el-carousel-item
+                    v-for="(img, i) in item.sourceImgList"
+                    :key="i"
                   >
-                    <div
-                      class="img-item"
-                      @click.stop.prevent="selectImg(selectImgList[0], 0)"
-                    >
-                      <img
-                        style="width: 140px"
-                        :src="selectImgList[0].productionFile"
-                      />
-                      <span>{{ selectImgList[0].designId }}</span>
-                    </div>
-                  </el-checkbox>
-                </el-checkbox-group>
+                    <el-checkbox @change="changeCheckFn">
+                      <img class="full-width" :src="img.url" alt=""
+                    /></el-checkbox>
+                  </el-carousel-item>
+                </el-carousel>
               </el-col>
             </el-row>
 
-            <el-row class="border-row">
+            <!-- <el-row class="border-row">
               <el-col :span="6" class="text-center"><div>B面</div></el-col>
               <el-col :span="9" class="border-col text-center">
                 <el-carousel
@@ -949,7 +975,7 @@ export default {
                   </el-checkbox>
                 </el-checkbox-group>
               </el-col>
-            </el-row>
+            </el-row> -->
           </el-row>
         </div>
         <div class="product-information">