sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改数据显示逻辑

master
于肖磊 2024-10-11 15:10:10 +08:00
parent 532f732584
commit dbbdbe99c5
1 changed files with 58 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
components/diy/goods-list.vue
View File

@ -238,57 +238,61 @@
methods: { methods: {
isEmpty, isEmpty,
init() { init() {
this.setData({ const new_form = this.propValue.content;
form: this.propValue.content, const new_style = this.propValue.style
new_style: this.propValue.style,
});
let new_list = []; let new_list = [];
// 指定商品并且指定商品数组不为空 // 指定商品并且指定商品数组不为空
if (!isEmpty(this.form.data_list) && this.form.data_type == '0') { if (!isEmpty(new_form.data_list) && new_form.data_type == '0') {
new_list = this.form.data_list.map((item) => ({ new_list = new_form.data_list.map((item) => ({
...item.data, ...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title, title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
new_cover: item.new_cover, new_cover: item.new_cover,
})); }));
} else if (!isEmpty(this.form.data_auto_list) && this.form.data_type == '1') { } else if (!isEmpty(new_form.data_auto_list) && new_form.data_type == '1') {
// 筛选商品并且筛选商品数组不为空 // 筛选商品并且筛选商品数组不为空
new_list = this.form.data_auto_list; new_list = new_form.data_auto_list;
} }
// 最外层不同风格下的显示 // 最外层不同风格下的显示
this.set_outer_class(); const flex = ['0', '2', '6'].includes(new_form.theme) ? 'flex-col ' : 'flex-row ';
const wrap = new_form.theme == '5' ? '' : 'flex-wrap ';
const background = ['6'].includes(new_form.theme) ? 'bg-white ' : '';
this.setData({ this.setData({
form: new_form,
new_style: new_style,
outer_class: flex + wrap + background + 'oh',
list: new_list, list: new_list,
content_radius: radius_computer(this.new_style.shop_radius), // 圆角设置 content_radius: radius_computer(new_style.shop_radius), // 圆角设置
content_img_radius: radius_computer(this.new_style.shop_img_radius), // 图片圆角设置 content_img_radius: radius_computer(new_style.shop_img_radius), // 图片圆角设置
content_padding: padding_computer(this.new_style.shop_padding) + 'box-sizing: border-box;', // 内边距设置 content_padding: padding_computer(new_style.shop_padding) + 'box-sizing: border-box;', // 内边距设置
theme: this.form.theme, // 选择的风格 theme: new_form.theme, // 选择的风格
content_outer_spacing: this.new_style.content_outer_spacing, // 商品间距 content_outer_spacing: new_style.content_outer_spacing, // 商品间距
onter_style: this.form.theme == '6' ? radius_computer(this.new_style.shop_radius) : `gap: ${this.new_style.content_outer_spacing * 2 + 'rpx'};`, onter_style: new_form.theme == '6' ? radius_computer(new_style.shop_radius) : `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};`,
// 不同风格下的样式 // 不同风格下的样式
layout_type: this.get_layout_type(), layout_type: this.get_layout_type(new_form),
layout_style: this.get_layout_style(), layout_style: this.get_layout_style(new_style, new_form),
content_style: this.get_content_style(), // 内容区域的样式 content_style: this.get_content_style(new_style, new_form), // 内容区域的样式
show_content: ['0', '1', '2'].includes(this.form.theme), // 显示除标题外的其他区域 show_content: ['0', '1', '2'].includes(new_form.theme), // 显示除标题外的其他区域
text_line: this.get_text_line(), // 超过多少行隐藏 text_line: this.get_text_line(new_form), // 超过多少行隐藏
style_container: this.propIsCommonStyle ? common_styles_computer(this.new_style.common_style) : '', // 公共样式 style_container: this.propIsCommonStyle ? common_styles_computer(new_style.common_style) : '', // 公共样式
style_img_container: this.propIsCommonStyle ? common_img_computer(this.new_style.common_style) : '', // 图片样式 style_img_container: this.propIsCommonStyle ? common_img_computer(new_style.common_style) : '', // 图片样式
// 内容样式设置 // 内容样式设置
title_style: this.trends_config('title'), title_style: this.trends_config(new_style, 'title'),
price_style: this.trends_config('price'), price_style: this.trends_config(new_style, 'price'),
sold_number_style: this.trends_config('sold_number'), sold_number_style: this.trends_config(new_style, 'sold_number'),
score_style: this.trends_config('score'), score_style: this.trends_config(new_style, 'score'),
button_style: this.trends_config('button', 'gradient'), button_style: this.trends_config(new_style, 'button', 'gradient'),
shop_content_list: this.get_shop_content_list(new_list), shop_content_list: this.get_shop_content_list(new_list, new_form),
is_show_cart: this.form.shop_button_effect == '1', is_show_cart: new_form.shop_button_effect == '1',
}); });
}, },
get_shop_content_list(list) { get_shop_content_list(list, form) {
// 深拷贝一下，确保不会出现问题 // 深拷贝一下，确保不会出现问题
const cloneList = JSON.parse(JSON.stringify(list)); const cloneList = JSON.parse(JSON.stringify(list));
// 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个 // 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
if (cloneList.length > 0) { if (cloneList.length > 0) {
// 每页显示的数量 // 每页显示的数量
const num = this.form.carousel_col; const num = form.carousel_col;
// 存储数据显示 // 存储数据显示
let nav_list = []; let nav_list = [];
// 拆分的数量 // 拆分的数量
@ -308,27 +312,19 @@
]; ];
} }
}, },
get_text_line() { get_text_line(form) {
let line = ''; let line = '';
if (['1', '6'].includes(this.form.theme)) { if (['1', '6'].includes(form.theme)) {
line = 'text-line-1'; line = 'text-line-1';
} else if (['0', '2', '3', '4', '5'].includes(this.form.theme)) { } else if (['0', '2', '3', '4', '5'].includes(form.theme)) {
line = 'text-line-2'; line = 'text-line-2';
} }
return line; return line;
}, },
set_outer_class() {
const flex = ['0', '2', '6'].includes(this.form.theme) ? 'flex-col ' : 'flex-row ';
const wrap = this.form.theme == '5' ? '' : 'flex-wrap ';
const background = ['6'].includes(this.form.theme) ? 'bg-white ' : '';
this.setData({
outer_class: flex + wrap + background + 'oh',
});
},
// 不同风格下的样式 // 不同风格下的样式
get_layout_type() { get_layout_type(new_form) {
let class_type = ''; let class_type = '';
switch (this.form.theme) { switch (new_form) {
case '0': case '0':
class_type = `flex-row bg-white oh`; class_type = `flex-row bg-white oh`;
break; break;
@ -352,32 +348,32 @@
} }
return class_type; return class_type;
}, },
get_layout_style() { get_layout_style(new_style, form) {
const radius = this.form.theme == '6' ? '' : radius_computer(this.new_style.shop_radius); const radius = form.theme == '6' ? '' : radius_computer(new_style.shop_radius);
const padding = ['0', '4'].includes(this.form.theme) ? padding_computer(this.new_style.shop_padding) + 'box-sizing: border-box;' : ''; const padding = ['0', '4'].includes(form.theme) ? padding_computer(new_style.shop_padding) + 'box-sizing: border-box;' : '';
let size_style = ``; let size_style = ``;
if (['1', '4'].includes(this.form.theme)) { if (['1', '4'].includes(form.theme)) {
size_style = `width: calc((100% - ${this.new_style.content_outer_spacing * 2 + 'rpx'}) / 2);`; size_style = `width: calc((100% - ${new_style.content_outer_spacing * 2 + 'rpx'}) / 2);`;
} else if (this.form.theme == '3') { } else if (form.theme == '3') {
size_style = `width: calc((100% - ${this.new_style.content_outer_spacing * 4 + 'rpx'}) / 3);`; size_style = `width: calc((100% - ${new_style.content_outer_spacing * 4 + 'rpx'}) / 3);`;
} else if (this.form.theme == '5') { } else if (form.theme == '5') {
size_style = `width: ${this.get_multicolumn_columns_width()};min-width: ${this.get_multicolumn_columns_width()};height: ${this.new_style.content_outer_height * 2 + 'rpx'}`; size_style = `width: ${this.get_multicolumn_columns_width(new_style, form)};min-width: ${this.get_multicolumn_columns_width(form)};height: ${new_style.content_outer_height * 2 + 'rpx'}`;
} }
return `${radius} ${padding} ${size_style}`; return `${radius} ${padding} ${size_style}`;
}, },
get_multicolumn_columns_width() { get_multicolumn_columns_width(new_style, form) {
const { carousel_col } = this.form; const { carousel_col } = form;
// 计算间隔的空间。(gap * gap数量) / 模块数量 // 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = (this.new_style.content_outer_spacing * (carousel_col - 1)) / carousel_col; let gap = (new_style.content_outer_spacing * (carousel_col - 1)) / carousel_col;
return `calc(${100 / carousel_col}% - ${gap * 2}rpx)`; return `calc(${100 / carousel_col}% - ${gap * 2}rpx)`;
}, },
get_content_style() { get_content_style(new_style, form) {
const spacing_value = this.new_style.content_spacing; const spacing_value = new_style.content_spacing;
let spacing = ''; let spacing = '';
if (['0', '4'].includes(this.form.theme)) { if (['0', '4'].includes(form.theme)) {
spacing = `margin-left: ${spacing_value * 2}rpx;`; spacing = `margin-left: ${spacing_value * 2}rpx;`;
} else { } else {
spacing = padding_computer(this.new_style.shop_padding) + 'box-sizing: border-box;'; spacing = padding_computer(new_style.shop_padding) + 'box-sizing: border-box;';
} }
return `${spacing}`; return `${spacing}`;
}, },
@ -386,8 +382,8 @@
return this.form.is_show.includes(index); return this.form.is_show.includes(index);
}, },
// 根据传递的参数，从对象中取值 // 根据传递的参数，从对象中取值
trends_config(key, type) { trends_config(new_style, key, type) {
return this.style_config(this.new_style[`shop_${key}_typeface`], this.new_style[`shop_${key}_size`], this.new_style[`shop_${key}_color`], type); return this.style_config(new_style[`shop_${key}_typeface`], new_style[`shop_${key}_size`], new_style[`shop_${key}_color`], type);
}, },
// 根据传递的值，显示不同的内容 // 根据传递的值，显示不同的内容
style_config(typeface, size, color, type) { style_config(typeface, size, color, type) {