产品详情页下载产品逻辑修改

hookehuyr
Commit 53e90ba74b82acae2653fe5525f2ba3a06441075 53e90ba7 1 parent f24530ff
Showing 1 changed file with 98 additions and 53 deletions
src/views/product/detail.vue
--- a/src/views/product/detail.vue
View file @53e90ba
+++ b/src/views/product/detail.vue
View file @53e90ba
 <!--
  * @Date: 2024-09-29 14:26:41
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-24 12:51:33
+ * @LastEditTime: 2024-10-25 11:07:10
  * @FilePath: /hager/src/views/product/detail.vue
  * @Description: 文件描述
 -->
@@ -56,10 +56,16 @@
           <el-row :gutter="0">
             <el-col :span="is_xs ? 24 : 19">
               <div :class="['control-left', is_xs ? 'xs' : '']">
-                <div v-if="product_sample" :class="['button', is_xs ? 'xs' : '', is_active === product_sample.id ? 'active' : '']" @click="onClick(product_sample)">产品样本</div>
+                <div
-                <div v-if="technical_parameter" :class="['button', is_xs ? 'xs' : '', is_active === technical_parameter.id ? 'active' : '']" @click="onClick(technical_parameter)">技术参数</div>
+                  v-if="item.list.length"
-                <div v-if="product_manual" :class="['button', is_xs ? 'xs' : '', is_active === product_manual.id ? 'active' : '']" @click="onClick(product_manual)">产品说明书</div>
+                  v-for="(item, index) in download_list" :key="item.id"
-                <div v-if="installation_tutorial" :class="['button', is_xs ? 'xs' : '', is_active === installation_tutorial.id ? 'active' : '']" @click="onClick(installation_tutorial)">安装教程</div>
+                  :class="[
+                    'button', is_xs ? 'xs' : '',
+                    item.show ? 'active' : ''
+                  ]"
+                  @click="onClick(item)">
+                  {{ item.name }}
+                </div>
               </div>
             </el-col>
             <el-col v-if="!is_xs" :span="5">
@@ -69,45 +75,41 @@
             </el-col>
           </el-row>
         </div>
-        <div>
+        <div v-if="item.show" v-for="(item, index) in download_list" :key="item.id">
           <div class="mini-download-wrapper" v-if="is_xs">
             <div>
-              <span @click="checkAll">全选</span>&nbsp;
+              <span @click="checkAll(item)">全选</span>&nbsp;
-              <span v-if="checked_sum">已选 {{ checked_sum }}</span>
+              <span v-if="item.checked_sum">已选 {{ item.checked_sum }}</span>
             </div>
             <div @click="goToDownload" :class="['button', is_download_checked ? 'active' : '']">发送到邮箱</div>
           </div>
-          <div class="info-list" v-for="(item, index) in download_list" :key="index">
+          <div class="info-list">
-            <el-row :gutter="0">
+            <el-row :gutter="0" v-for="(file, idx) in item.list" :key="idx">
               <el-col :span="18">
                 <div class="info-list-title">
                   <el-row :gutter="0">
                     <el-col :span="is_xs ? 4 : 2">
-                      <i v-if="item.checked" @click="checkItem(item)" class="el-icon-folder-checked download-checked"></i>
+                      <i v-if="file.checked" @click="checkItem(file)" class="el-icon-folder-checked download-checked"></i>
-                      <i v-else @click="checkItem(item)" class="el-icon-folder  download-unchecked"></i>&nbsp;
+                      <i v-else @click="checkItem(file)" class="el-icon-folder  download-unchecked"></i>&nbsp;
                     </el-col>
                     <el-col :span="is_xs ? 20 : 22">
                       <div class="info-list-title-content">
                         <div>
-                          <i class="el-icon-document" style="font-size: 1.35rem;"></i>
+                          <i v-if="!is_xs" class="el-icon-document" style="font-size: 1.35rem;"></i>
-                          {{ item.name }}
+                          {{ file.name }}
                         </div>
                         <div>
-                          &nbsp;{{ item.size }}
+                          &nbsp;{{ file.size }}
                         </div>
                       </div>
                     </el-col>
                   </el-row>
-                  <!-- <i v-if="item.checked" @click="checkItem(item)" class="el-icon-folder-checked download-checked"></i>
-                  <i v-else @click="checkItem(item)" class="el-icon-folder  download-unchecked"></i>
-                  <i class="el-icon-document" style="font-size: 1.25rem; margin-left: 1rem;"></i>
-                  <p><span>{{ item.name }}</span><span>{{ item.size }}</span></p> -->
                 </div>
               </el-col>
               <el-col :span="6">
                 <div class="info-list-control">
-                  <div @click="preview(item)">预览</div>
+                  <div @click="preview(file)">预览</div>
-                  <div @click="sendEmail" class="icon-wrapper">
+                  <div @click="sendEmail(file)" class="icon-wrapper">
                     <img style="height: 1rem; width: auto;" src="https://cdn.ipadbiz.cn/hager/icon/%E9%82%AE%E4%BB%B6@2x.png">
                   </div>
                 </div>
@@ -133,24 +135,52 @@ export default {
   mixins: [mixin.init],
   data () {
     return {
-      is_active: '',
+      download_list: [{
-      download_list: [],
+        id: 1,
-      images: [],
+        type: 'yangben',
+        name: '产品样本',
+        show: false,
+        list: [],
+        checked_sum: 0,
+      }, {
+        id: 2,
+        type: 'canshu',
+        name: '技术参数',
+        show: false,
+        list: [],
+        checked_sum: 0,
+      }, {
+        id: 3,
+        type: 'shuomingshu',
+        name: '产品说明书',
+        show: false,
+        list: [],
+        checked_sum: 0,
+      }, {
+        id: 4,
+        type: 'jiaocheng',
+        name: '安装教程',
+        show: false,
+        list: [],
+        checked_sum: 0,
+      }],
       info: {},
       info_images: [],
       product_advantages: [],
-      product_sample: '',
+      checked_items: [],
-      technical_parameter: '',
-      product_manual: '',
-      installation_tutorial: '',
     }
   },
   computed: {
     is_download_checked () {
-      return this.download_list.filter(item => item.checked).length > 0;
+      let sum = 0;
-    },
+      this.download_list.forEach(item => {
-    checked_sum () {
+        item.list.forEach(file => {
-      return this.download_list.filter(item => item.checked).length;
+          if (file.checked) {
+            sum++;
+          }
+        });
+      });
+      return sum;
     },
   },
   async mounted () {
@@ -172,31 +202,41 @@ export default {
         if (this.info.file?.img) {
           this.info_images = this.info.file.img.map(item => item.value);
         }
-        //
+        // 产品优势
         this.product_advantages = this.splitIntoEqualChunks(this.info.product_advantages);
-        //
+        // 产品资料数据结构
-        this.product_sample = this.info.file?.yangben?.map(item => ({ ...item, checked: false }));// 产品样本
+        for (const key in this.info.file) {
-        this.technical_parameter = this.info.file?.canshu?.map(item => ({ ...item, checked: false })); // 技术参数
+          const element = this.info.file[key];
-        this.product_manual = this.info.file?.shuomingshu?.map(item => ({ ...item, checked: false })); // 产品说明书
+          this.download_list.forEach(item => {
-        this.installation_tutorial = this.info.file?.jiaocheng?.map(item => ({ ...item, checked: false })); // 安装教程
+            if (key === item.type) {
-        let arr = [this.product_sample, this.technical_parameter, this.product_manual, this.installation_tutorial]
+              item.list = element.map(item => ({ ...item, checked: false }));
-        for (let index = 0; index < arr.length; index++) {
+            }
-          const element = arr[index];
+          });
-          if (element) {
+        };
-            this.download_list = element;
+        // 默认选中第一个有数据的分类
-            this.is_active = this.download_list.id;
+        for (let index = 0; index < this.download_list.length; index++) {
-            return;
+          if (this.download_list[index].list.length) {
+            this.download_list[index].show = true;
+            break;
           }
         }
       }
     },
     onClick (item) {
-      this.is_active = item.id;
+      this.download_list.forEach(item => item.show = false);
-      this.download_list = item;
+      item.show = true;
-      this.download_list.forEach(item => item.checked = false);
     },
     goToDownload () {
       if (this.is_download_checked) {
+        let ids = [];
+        this.download_list.forEach(item => {
+          item.list.forEach(file => {
+            if (file.checked) {
+              ids.push(file.id)
+            }
+          })
+        });
+        console.warn(ids);
         // 发送邮箱接口
         Message({
           type: 'success',
@@ -204,10 +244,12 @@ export default {
         });
       }
     },
-    checkAll () {
+    checkAll (item) { // 全选当前显示的下载列表
-      this.download_list.forEach(item => item.checked = true);
+      item.list.forEach(file => file.checked = true);
+      item.checked_sum = item.list.filter(item => item.checked).length;
     },
-    sendEmail () {
+    sendEmail (item) {
+      console.warn(item);
       // 发送邮箱接口
       Message({
         type: 'success',
@@ -242,9 +284,12 @@ export default {
       return result;
     },
-    checkItem (item) {
+    checkItem (item) { // 选中资料项目
       item.checked = !item.checked;
-      // this.$forceUpdate();
+      console.warn(item);
+      this.download_list.forEach(item => {
+        item.checked_sum = item.list.filter(item => item.checked).length;
+      });
     },
   }
 }