陈列SKU图片识别

src/views/week/dailyApproval.vue

@@ -378,6 +378,7 @@
                 <img :src="itemImg.fileUrl" alt="" />
               </van-col>
             </van-row>
+            <van-icon name="arrow-up" />
           </div>
         </van-collapse-item>
       </van-collapse>

src/views/week/dailyDetails.vue

@@ -360,8 +360,11 @@
         </van-collapse-item>
         <van-collapse-item title="今日拜访照片" name="10" v-if="reportTarget.photos">
           <div v-for="(item, index) in reportTarget.photos" :key="index">
-            <p style="margin-bottom: 10px; margin-top: 0">{{ item.taskName }}</p>
-            <van-row gutter="10" class="visitIMG1">
+            <p style="margin-bottom: 10px">{{ item.taskName }}</p>
+            <van-row
+              gutter="10"
+              class="visitIMG1"
+              :style="{ height: item.visitIMG1Flag ? 'auto' : '85px' }">
               <van-col
                 span="6"
                 style="padding-bottom: 10px"
@@ -371,6 +374,21 @@
                 <img :src="itemImg.fileUrl" alt="" />
               </van-col>
             </van-row>
+            <div class="arrowIcon" @click="setVisitIMG1Flag(item)">
+              <van-icon size="28" :name="item.visitIMG1Flag ? 'arrow-up' : 'arrow-down'" />
+            </div>
+            <!-- 生动化陈列 sku -->
+            <template>
+              <div class="skuNum">SKU识别：{{ item.num }}个</div>
+              <el-table
+                :data="item.productDetail"
+                border
+                class="table-headermd table-headermdhome"
+                style="width: 100%">
+                <el-table-column label="SKU名称" prop="DESCR" align="center" />
+                <el-table-column label="数量" prop="QTY" width="80px" align="center" />
+              </el-table>
+            </template>
           </div>
         </van-collapse-item>
       </van-collapse>
@@ -556,6 +574,10 @@ export default {
     this.userTodayPlanNum();
   },
   methods: {
+    setVisitIMG1Flag(item) {
+      this.$set(item, 'visitIMG1Flag', !item.visitIMG1Flag);
+      this.$forceUpdate();
+    },
     pviewFn(val, imgVal) {
       var imgList = [];
       var photos = this.reportTarget.photos[val].photos;
@@ -617,9 +639,11 @@ export default {
         var imgList = [];
         if (res.data.photos != null) {
           for (var k = 0; k < res.data.photos.length; k++) {
+            res.data.photos[k].visitIMG1Flag = false;
             imgList.push(res.data.photos[k].fileUrl + '');
           }
         }
+        console.log(res.data.photos);
         this.imgList = imgList;
       });
     },
@@ -701,7 +725,7 @@ export default {
   border-radius: 2px;
 }
 </style>
-<style>
+<style lang="scss">
 .linep .van-cell__title {
   color: #1e5398;
   font-weight: 500;
@@ -736,10 +760,17 @@ export default {
 .colorbalck {
   color: #333;
 }
-.visitIMG1 img {
-  display: block;
-  width: 100%;
-  height: 75px;
-  border-radius: 6px;
+.visitIMG1 {
+  overflow: hidden;
+  img {
+    display: block;
+    width: 100%;
+    height: 75px;
+    border-radius: 6px;
+  }
+}
+.arrowIcon {
+  text-align: center;
+  padding: 3px 0;
 }
 </style>