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

修改商品图片高度

v1.1.0
于肖磊 2024-11-03 18:17:48 +08:00
parent eacc8335f5
commit a5b125dac1
18 changed files with 222 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/model-article-list/index.vue
View File

@ -10,7 +10,7 @@
</template>
<template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
</template>
<div class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme != '0' ? content_padding : ''">
<div class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme != '0' ? content_padding : 'width: 0;'">
<div class="flex-col" :class="article_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + new_style.name_desc_space + 'px;'">
<div class="title" :class="article_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
<div v-if="field_show.includes('2')" class="desc text-line-1" :style="article_desc">{{ item.data.describe || '' }}</div>
@ -118,7 +118,7 @@ const content_padding = ref('');
const content_spacing = ref('');
// 文章间距
const article_spacing = ref('');
const article_item_height = ref('183');
const article_item_height = ref('155');
const article_style = ref({});
const default_data_list: ArticleList = {
@ -229,7 +229,43 @@ const article_name_line_height_computer = computed(() => {
return new_style.value.name_size * 1.2 + 'px';
});
// 轮播高度
const carousel_height_computer = computed(() => new_style.value.article_height + 'px');
const carousel_height_computer = computed(() => {
return new_style.value.name_size * 2 + new_style.value.article_height + 'px';
});
const theme_list = [
{ name: '单列展示', value: '0', width:110, height: 83 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '无图模式', value: '3', width:0, height: 0 },
{ name: '左右滑动展示', value: '4', width:0, height: 0 },
]
// 宽度和高度为空的时候，修改默认值
const article_img_width = computed(() => {
if (typeof new_style.value.content_img_width == 'number') {
return new_style.value.content_img_width + 'px';
} else {
const list = theme_list.filter(item => item.value == new_content.value.theme);
if (list.length > 0) {
return list[0].width + 'px';
} else {
return 'auto';
}
}
});
// 宽度和高度为空的时候，修改默认值
const article_img_height = computed(() => {
if (typeof new_style.value.content_img_height == 'number') {
return new_style.value.content_img_height + 'px';
} else {
const list = theme_list.filter(item => item.value == new_content.value.theme);
if (list.length > 0) {
return list[0].height + 'px';
} else {
return 'auto';
}
}
});
// 监听value数据变化
watch(
() => props.value,
@ -325,23 +361,27 @@ const article_carousel_list = computed(() => {
.style1 {
.item {
width: 100%;
height: v-bind(carousel_height_computer);
.img {
height: 100%;
width: 11rem;
height: v-bind(article_img_height);
width: v-bind(article_img_width);
}
}
}
.style2 {
.item {
width: calc(50% - 0.5rem);
height: v-bind(carousel_height_computer);
.img {
height: v-bind(article_img_height);
}
}
}
.style3 {
.item {
width: 100%;
height: v-bind(carousel_height_computer);
.img {
width: 100%;
height: v-bind(article_img_height);
}
}
}
.style4 {
@ -356,7 +396,6 @@ const article_carousel_list = computed(() => {
.item {
width: v-bind(multicolumn_columns_width);
min-width: v-bind(multicolumn_columns_width);
height: v-bind(carousel_height_computer);
.img {
width: 100%;
max-height: v-bind(article_item_height);

21
src/components/model-article-list/model-article-list-content.vue
View File

@ -102,11 +102,11 @@ const state = reactive({
const { form, data } = toRefs(state);
const base_list = reactive({
theme_list: [
{ name: '单列展示', value: '0', height: 103 },
{ name: '两列展示（纵向）', value: '1', height: 245 },
{ name: '大图展示', value: '2', height: 245 },
{ name: '无图模式', value: '3', height: 0 },
{ name: '左右滑动展示', value: '4', height: 183 },
{ name: '单列展示', value: '0', width:110, height: 83 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '无图模式', value: '3', width:0, height: 0 },
{ name: '左右滑动展示', value: '4', width:0, height: 0 },
],
carousel_col_list: [
{ name: '单列展示', value: '0' },
@ -144,10 +144,12 @@ onMounted(() => {
}
});
// 如果历史数据没有操作，则修改默认值
if (data.value.article_height == 155 && form.value.theme != '4') {
const { content_img_width = '', content_img_height = '' } = data.value;
// 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['3', '4'].includes(form.value.theme)) {
const list = base_list.theme_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
emits('theme_change', list[0].height);
emits('theme_change', list[0].width, list[0].height);
}
}
});
@ -175,9 +177,10 @@ const theme_change = (val: any) => {
data.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
const list = base_list.theme_list.filter(item => item.value == val);
// 切换风格时，将对应图片的默认值宽度和高度赋值
const list = base_list.theme_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
emits('theme_change', list[0].height);
emits('theme_change', list[0].width, list[0].height);
}
};
// 移除

8
src/components/model-article-list/model-article-list-setting.vue
View File

@ -30,9 +30,9 @@ const data_config = reactive({
img_radius_1: 0,
});
const form = ref(props.value);
const theme_change = (val: number) => {
if (val) {
form.value.style.article_height = val;
}
const theme_change = (width: number, height: number) => {
form.value.style.content_img_width = width;
form.value.style.content_img_height = height;
};
</script>

10
src/components/model-article-list/model-article-list-styles.vue
View File

@ -40,7 +40,15 @@
<slider v-model="form.article_spacing"></slider>
</el-form-item>
</template>
<template v-if="theme != '3'">
<template v-if="!['3', '4'].includes(theme)">
<el-form-item v-if="['0'].includes(theme)" label="图片宽度">
<slider v-model="form.content_img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.content_img_height" :max="1000"></slider>
</el-form-item>
</template>
<template v-if="theme == '4'">
<el-form-item label="内容高度">
<slider v-model="form.article_height" :max="1000"></slider>
</el-form-item>

21
src/components/model-article-tabs/model-article-tabs-content.vue
View File

@ -132,11 +132,11 @@ const base_list = reactive({
{ name: '样式四', value: '3' },
],
article_theme_list: [
{ name: '单列展示', value: '0', height: 103 },
{ name: '两列展示（纵向）', value: '1', height: 245 },
{ name: '大图展示', value: '2', height: 245 },
{ name: '无图模式', value: '3', height: 0 },
{ name: '左右滑动展示', value: '4', height: 183 },
{ name: '单列展示', value: '0', width:110, height: 83 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '无图模式', value: '3', width:0, height: 0 },
{ name: '左右滑动展示', value: '4', width:0, height: 0 },
],
carousel_col_list: [
{ name: '单列展示', value: '0' },
@ -173,10 +173,12 @@ onMounted(() => {
}
});
// 如果历史数据没有操作，则修改默认值
if (styles.article_height == 155 && form.value.theme != '4') {
const list = base_list.article_theme_list.filter(item => item.value == form.value.theme);
const { content_img_width = '', content_img_height = '' } = styles;
// 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['3', '4'].includes(form.theme)) {
const list = base_list.article_theme_list.filter(item => item.value == form.theme);
if (list.length > 0) {
emits('theme_change', list[0].height);
emits('theme_change', list[0].width, list[0].height);
}
}
});
@ -204,9 +206,10 @@ const article_theme_change = (val: any) => {
styles.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
// 切换风格时，将对应图片的默认值宽度和高度赋值
const list = base_list.article_theme_list.filter(item => item.value == val);
if (list.length > 0) {
emits('theme_change', list[0].height);
emits('theme_change', list[0].width, list[0].height);
}
};

8
src/components/model-article-tabs/model-article-tabs-setting.vue
View File

@ -30,9 +30,9 @@ const data_config = reactive({
img_radius_1: 0,
});
const form = ref(props.value);
const theme_change = (val: number) => {
if (val) {
form.value.style.article_height = val;
}
const theme_change = (width: number, height: number) => {
form.value.style.content_img_width = width;
form.value.style.content_img_height = height;
};
</script>

10
src/components/model-article-tabs/model-article-tabs-styles.vue
View File

@ -60,7 +60,15 @@
<slider v-model="form.article_spacing"></slider>
</el-form-item>
</template>
<template v-if="theme != '3'">
<template v-if="!['3', '4'].includes(theme)">
<el-form-item v-if="['0'].includes(theme)" label="图片宽度">
<slider v-model="form.content_img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.content_img_height" :max="1000"></slider>
</el-form-item>
</template>
<template v-if="theme == '4'">
<el-form-item label="内容高度">
<slider v-model="form.article_height" :max="1000"></slider>
</el-form-item>

68
src/components/model-goods-list/index.vue
View File

@ -329,19 +329,19 @@ const layout_type = computed(() => {
let class_type = '';
switch (theme.value) {
case '0':
class_type = `flex-row goods-height bg-f oh`;
class_type = `flex-row bg-f oh`;
break;
case '1':
class_type = `flex-col goods-height two-columns bg-f oh`;
class_type = `flex-col two-columns bg-f oh`;
break;
case '2':
class_type = `flex-col goods-height bg-f oh`;
class_type = `flex-col bg-f oh`;
break;
case '3':
class_type = `flex-col goods-height three-columns bg-f oh`;
class_type = `flex-col three-columns bg-f oh`;
break;
case '4':
class_type = `flex-row goods-height two-columns bg-f oh`;
class_type = `flex-row two-columns bg-f oh`;
break;
case '5':
class_type = `flex-col multicolumn-columns bg-f oh`;
@ -366,7 +366,9 @@ const content_style = computed(() => {
} else {
spacing = content_padding.value;
}
if (['4'].includes(theme.value)) {
spacing += `width: 0;`;
}
return `${spacing}`;
});
// 显示除标题外的其他区域
@ -448,6 +450,41 @@ const multicolumn_columns_width = computed(() => {
return `calc(${100 / carousel_col.value}% - ${gap}px)`;
});
const content_outer_height = computed(() => new_style.value.content_outer_height + 'px');
const product_style_list = [
{ name: '单列展示', value: '0', width: 110, height: 120 },
{ name: '大图展示', value: '2', width: 166, height: 166 },
{ name: '无图模式', value: '6', width: 0, height: 0 },
{ name: '两列展示(纵向)', value: '1', width: 180, height: 180 },
{ name: '两列展示(横向)', value: '4', width: 70, height: 70 },
{ name: '三列展示', value: '3', width: 116, height: 114 },
{ name: '左右滑动展示', value: '5', width: 0, height: 0 },
]
// 宽度和高度为空的时候，修改默认值
const goods_img_width = computed(() => {
if (typeof new_style.value.content_img_width == 'number') {
return new_style.value.content_img_width + 'px';
} else {
const list = product_style_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
return list[0].width + 'px';
} else {
return 'auto';
}
}
});
// 宽度和高度为空的时候，修改默认值
const goods_img_height = computed(() => {
if (typeof new_style.value.content_img_height == 'number') {
return new_style.value.content_img_height + 'px';
} else {
const list = product_style_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
return list[0].height + 'px';
} else {
return 'auto';
}
}
});
interface nav_list {
split_list: data_list[];
}
@ -539,30 +576,25 @@ watchEffect(() => {
min-width: v-bind(multicolumn_columns_width);
height: v-bind(content_outer_height);
}
.goods-height {
height: v-bind(content_outer_height);
}
.flex-img0 {
height: 100%;
// min-height: 11rem;
// max-height: 12rem;
width: 11rem;
height: v-bind(goods_img_height);
width: v-bind(goods_img_width);
}
.flex-img1 {
width: 100%;
height: 100%;
height: v-bind(goods_img_height);
}
.flex-img2 {
width: 100%;
height: 100%;
height: v-bind(goods_img_height);
}
.flex-img3 {
width: 100%;
height: 100%;
height: v-bind(goods_img_height);
}
.flex-img4 {
width: 7rem;
min-height: 100%;
height: v-bind(goods_img_height);
width: v-bind(goods_img_width);
}
.flex-img5 {
width: 100%;

26
src/components/model-goods-list/model-goods-list-content.vue
View File

@ -65,6 +65,7 @@
</div>
</template>
<script setup lang="ts">
import { isEmpty } from "lodash";
import { get_math } from '@/utils';
import { commonStore } from '@/store';
const common_store = commonStore();
@ -96,13 +97,13 @@ const { form, data } = toRefs(state);
const base_list = reactive({
product_style_list: [
{ name: '单列展示', value: '0', height: 142 },
{ name: '大图展示', value: '2', height: 308 },
{ name: '无图模式', value: '6', height: 0 },
{ name: '两列展示(纵向)', value: '1', height: 302 },
{ name: '两列展示(横向)', value: '4', height: 94 },
{ name: '三列展示', value: '3', height: 204 },
{ name: '左右滑动展示', value: '5', height: 232 },
{ name: '单列展示', value: '0', width: 110, height: 120 },
{ name: '大图展示', value: '2', width: 166, height: 166 },
{ name: '无图模式', value: '6', width: 0, height: 0 },
{ name: '两列展示(纵向)', value: '1', width: 180, height: 180 },
{ name: '两列展示(横向)', value: '4', width: 70, height: 70 },
{ name: '三列展示', value: '3', width: 116, height: 114 },
{ name: '左右滑动展示', value: '5', width: 0, height: 0 },
],
product_list: [
{ name: '指定商品', value: '0' },
@ -135,10 +136,12 @@ onBeforeMount(() => {
}, 1000);
});
// 如果历史数据没有操作，则修改默认值
if (data.value.content_outer_height == 232 && form.value.theme != '5') {
const { content_img_width = '', content_img_height = '' } = data.value;
// 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['5', '6'].includes(form.value.theme)) {
const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
emits('theme_change', list[0].height);
emits('theme_change', list[0].width, list[0].height);
}
}
});
@ -211,9 +214,10 @@ const change_style = (val: string | number | boolean | undefined): void => {
data.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
const list = base_list.product_style_list.filter(item => item.value == val);
// 切换风格时，将对应图片的默认值宽度和高度赋值
const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
emits('theme_change', list[0].height);
emits('theme_change', list[0].width, list[0].height);
}
};
const is_revise = ref(false);

7
src/components/model-goods-list/model-goods-list-setting.vue
View File

@ -25,10 +25,9 @@ const data_config = reactive({
img_radius_1: 0,
});
const form = ref(props.value);
const theme_change = (val: number) => {
if (val) {
form.value.style.content_outer_height = val;
}
const theme_change = (width: number, height: number) => {
form.value.style.content_img_width = width;
form.value.style.content_img_height = height;
};
</script>
<style lang="scss" scoped>

10
src/components/model-goods-list/model-goods-list-styles.vue
View File

@ -43,7 +43,15 @@
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="theme != '6'">
<template v-if="!['5', '6'].includes(theme)">
<el-form-item v-if="['0', '4'].includes(theme)" label="图片宽度">
<slider v-model="form.content_img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.content_img_height" :max="1000"></slider>
</el-form-item>
</template>
<template v-if="theme == '5'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
</el-form-item>

25
src/components/model-goods-tabs/model-goods-tabs-content.vue
View File

@ -136,13 +136,13 @@ const base_list = reactive({
{ name: '样式五', value: '4' },
],
product_style_list: [
{ name: '单列展示', value: '0', height: 142 },
{ name: '大图展示', value: '2', height: 308 },
{ name: '无图模式', value: '6', height: 0 },
{ name: '两列展示(纵向)', value: '1', height: 302 },
{ name: '两列展示(横向)', value: '4', height: 94 },
{ name: '三列展示', value: '3', height: 204 },
{ name: '左右滑动展示', value: '5', height: 232 },
{ name: '单列展示', value: '0', width: 110, height: 120 },
{ name: '大图展示', value: '2', width: 166, height: 166 },
{ name: '无图模式', value: '6', width: 0, height: 0 },
{ name: '两列展示(纵向)', value: '1', width: 180, height: 180 },
{ name: '两列展示(横向)', value: '4', width: 70, height: 70 },
{ name: '三列展示', value: '3', width: 116, height: 114 },
{ name: '左右滑动展示', value: '5', width: 0, height: 0 },
],
product_list: [
{ name: '指定商品', value: '0' },
@ -179,10 +179,12 @@ onBeforeMount(() => {
}, 1000);
});
// 如果历史数据没有操作，则修改默认值
if (styles.value.content_outer_height == 232 && form.value.theme != '5') {
const { content_img_width = '', content_img_height = '' } = styles.value;
// 宽度和高度为空的时候，并且不是无图模式和左右滑动模式的时候，修改默认值
if ((typeof content_img_width != 'number' || typeof content_img_height != 'number') && !['5', '6'].includes(form.value.theme)) {
const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
emits('theme_change', list[0].height);
emits('theme_change', list[0].width, list[0].height);
}
}
});
@ -297,9 +299,10 @@ const change_style = (val: any): void => {
styles.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
const list = base_list.product_style_list.filter(item => item.value == val);
// 切换风格时，将对应图片的默认值宽度和高度赋值
const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
emits('theme_change', list[0].height);
emits('theme_change', list[0].width, list[0].height);
}
};
const is_revise = ref(false);

7
src/components/model-goods-tabs/model-goods-tabs-setting.vue
View File

@ -26,10 +26,9 @@ const data_config = reactive({
img_radius_1: 0,
});
const form = ref(props.value);
const theme_change = (val: number) => {
if (val) {
form.value.style.content_outer_height = val;
}
const theme_change = (width: number, height: number) => {
form.value.style.content_img_width = width;
form.value.style.content_img_height = height;
};
</script>
<style lang="scss" scoped>

10
src/components/model-goods-tabs/model-goods-tabs-styles.vue
View File

@ -50,7 +50,15 @@
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="theme != '6'">
<template v-if="!['5', '6'].includes(theme)">
<el-form-item v-if="['0', '4'].includes(theme)" label="图片宽度">
<slider v-model="form.content_img_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.content_img_height" :max="1000"></slider>
</el-form-item>
</template>
<template v-if="theme == '5'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
</el-form-item>

6
src/config/const/article-list.ts
View File

@ -42,6 +42,8 @@ interface DefaultArticleList {
article_spacing: number;
content_spacing: number;
article_height: number;
content_img_width: number;
content_img_height: number;
interval_time: number; //滚动时间
is_roll: number;
common_style: object;
@ -101,7 +103,9 @@ const defaultArticleList: DefaultArticleList = {
},
content_spacing: 10, // 内容间距
article_spacing: 10, // 文章间距
article_height: 103, // 文章高度
article_height: 155, // 文章高度
content_img_width: 110,
content_img_height: 83,
interval_time: 3, //滚动时间
is_roll: 1, // 是否轮播
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },

6
src/config/const/article-tabs.ts
View File

@ -59,6 +59,8 @@ interface DefaultArticleTabs {
article_spacing: number;
content_spacing: number;
article_height: number;
content_img_width: number;
content_img_height: number;
interval_time: number; //滚动时间
is_roll: number;
common_style: object;
@ -133,7 +135,9 @@ const defaultArticleTabs: DefaultArticleTabs = {
},
content_spacing: 10, // 内容间距
article_spacing: 10, // 文章间距
article_height: 103, // 文章高度
article_height: 155, // 文章高度
content_img_width: 110,
content_img_height: 83,
interval_time: 3, //滚动时间
is_roll: 1, // 是否轮播
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_left: 10, padding_right: 10, padding_bottom: 10 },

6
src/config/const/goods-list.ts
View File

@ -31,6 +31,8 @@ interface DefaultProductList {
shop_radius: radiusStyle;
content_outer_spacing: number;
content_outer_height: number;
content_img_width: number;
content_img_height: number;
is_roll: string,
interval_time: number,
content_spacing: number;
@ -124,7 +126,9 @@ const defaultProductList: DefaultProductList = {
// 商品内间距
content_spacing: 10,
// 商品高度
content_outer_height: 142,
content_outer_height: 232,
content_img_width: 110,
content_img_height: 120,
// 是否滚动
is_roll: '1',
interval_time: 3,

7
src/config/const/goods-tabs.ts
View File

@ -50,6 +50,8 @@ interface DefaultProductList {
shop_radius: radiusStyle;
content_outer_spacing: number;
content_outer_height: number;
content_img_width: number;
content_img_height: number;
is_roll: string;
interval_time: number;
content_spacing: number;
@ -156,7 +158,10 @@ const defaultProductList: DefaultProductList = {
// 商品内间距
content_spacing: 10,
// 商品高度
content_outer_height: 142,
content_outer_height: 232,
// 商品图片宽度和高度
content_img_width: 110,
content_img_height: 120,
// 轮播处理
is_roll: '1',
interval_time: 3,