Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
53e90ba7 1 parent f24530ff

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

Inline Side-by-side
Showing 1 changed file with 98 additions and 53 deletions
<!--
* @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 v-if="technical_parameter" :class="['button', is_xs ? 'xs' : '', is_active === technical_parameter.id ? 'active' : '']" @click="onClick(technical_parameter)">技术参数</div>
<div v-if="product_manual" :class="['button', is_xs ? 'xs' : '', is_active === product_manual.id ? 'active' : '']" @click="onClick(product_manual)">产品说明书</div>
<div v-if="installation_tutorial" :class="['button', is_xs ? 'xs' : '', is_active === installation_tutorial.id ? 'active' : '']" @click="onClick(installation_tutorial)">安装教程</div>
<div
v-if="item.list.length"
v-for="(item, index) in download_list" :key="item.id"
: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 v-if="checked_sum">已选 {{ checked_sum }}</span>
<span @click="checkAll(item)">全选</span>&nbsp;
<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">
<el-row :gutter="0">
<div class="info-list">
<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-else @click="checkItem(item)" class="el-icon-folder download-unchecked"></i>&nbsp;
<i v-if="file.checked" @click="checkItem(file)" class="el-icon-folder-checked download-checked"></i>
<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>
{{ item.name }}
<i v-if="!is_xs" class="el-icon-document" style="font-size: 1.35rem;"></i>
{{ 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="sendEmail" class="icon-wrapper">
<div @click="preview(file)">预览</div>
<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: [],
images: [],
download_list: [{
id: 1,
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: '',
technical_parameter: '',
product_manual: '',
installation_tutorial: '',
checked_items: [],
}
},
computed: {
is_download_checked () {
return this.download_list.filter(item => item.checked).length > 0;
},
checked_sum () {
return this.download_list.filter(item => item.checked).length;
let sum = 0;
this.download_list.forEach(item => {
item.list.forEach(file => {
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 }));// 产品样本
this.technical_parameter = this.info.file?.canshu?.map(item => ({ ...item, checked: false })); // 技术参数
this.product_manual = this.info.file?.shuomingshu?.map(item => ({ ...item, checked: false })); // 产品说明书
this.installation_tutorial = this.info.file?.jiaocheng?.map(item => ({ ...item, checked: false })); // 安装教程
let arr = [this.product_sample, this.technical_parameter, this.product_manual, this.installation_tutorial]
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;
return;
// 产品资料数据结构
for (const key in this.info.file) {
const element = this.info.file[key];
this.download_list.forEach(item => {
if (key === item.type) {
item.list = element.map(item => ({ ...item, checked: false }));
}
});
};
// 默认选中第一个有数据的分类
for (let index = 0; index < this.download_list.length; index++) {
if (this.download_list[index].list.length) {
this.download_list[index].show = true;
break;
}
}
}
},
onClick (item) {
this.is_active = item.id;
this.download_list = item;
this.download_list.forEach(item => item.checked = false);
this.download_list.forEach(item => item.show = false);
item.show = true;
},
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 () {
this.download_list.forEach(item => item.checked = true);
checkAll (item) { // 全选当前显示的下载列表
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;
});
},
}
}
......