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

修改商品和文章的高度

v1.1.0
于肖磊 2024-11-03 16:09:35 +08:00
parent 53a75c8c75
commit eacc8335f5
18 changed files with 140 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -118,7 +118,7 @@ const content_padding = ref('');
const content_spacing = ref('');
// 文章间距
const article_spacing = ref('');
const article_item_height = ref('155');
const article_item_height = ref('183');
const article_style = ref({});
const default_data_list: ArticleList = {
@ -229,9 +229,7 @@ const article_name_line_height_computer = computed(() => {
return new_style.value.name_size * 1.2 + 'px';
});
// 轮播高度
const carousel_height_computer = computed(() => {
return new_style.value.name_size * 2 + new_style.value.article_height + 'px';
});
const carousel_height_computer = computed(() => new_style.value.article_height + 'px');
// 监听value数据变化
watch(
() => props.value,
@ -327,8 +325,9 @@ const article_carousel_list = computed(() => {
.style1 {
.item {
width: 100%;
height: v-bind(carousel_height_computer);
.img {
height: 8.3rem;
height: 100%;
width: 11rem;
}
}
@ -336,18 +335,13 @@ const article_carousel_list = computed(() => {
.style2 {
.item {
width: calc(50% - 0.5rem);
.img {
height: 18rem;
}
height: v-bind(carousel_height_computer);
}
}
.style3 {
.item {
width: 100%;
.img {
width: 100%;
height: 18rem;
}
height: v-bind(carousel_height_computer);
}
}
.style4 {
@ -362,6 +356,7 @@ 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);

23
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' },
{ name: '两列展示（纵向）', value: '1' },
{ name: '大图展示', value: '2' },
{ name: '无图模式', value: '3' },
{ name: '左右滑动展示', value: '4' },
{ 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 },
],
carousel_col_list: [
{ name: '单列展示', value: '0' },
@ -134,6 +134,8 @@ const base_list = reactive({
{ name: '描述', value: '2' },
],
});
const emits = defineEmits(['theme_change']);
onMounted(() => {
nextTick(() => {
// 定时获取common_store.common.article_category的数据，直到拿到值或者关闭页面为止
@ -141,6 +143,13 @@ onMounted(() => {
base_list.article_category_list = common_store.common.article_category;
}
});
// 如果历史数据没有操作，则修改默认值
if (data.value.article_height == 155 && form.value.theme != '4') {
const list = base_list.theme_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
emits('theme_change', list[0].height);
}
}
});
// 主题改变
const theme_change = (val: any) => {
@ -166,6 +175,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);
if (list.length > 0) {
emits('theme_change', list[0].height);
}
};
// 移除
const data_list_remove = (index: number) => {

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

@ -1,10 +1,10 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<model-article-list-content :value="value.content" :styles="value.style" :default-config="data_config"></model-article-list-content>
<model-article-list-content :value="form.content" :styles="form.style" :default-config="data_config" @theme_change="theme_change"></model-article-list-content>
</template>
<template v-else-if="type == '2'">
<model-article-list-styles :value="value.style" :content="value.content" :default-config="data_config"></model-article-list-styles>
<model-article-list-styles :value="form.style" :content="form.content" :default-config="data_config"></model-article-list-styles>
</template>
</div>
</template>
@ -29,4 +29,10 @@ const data_config = reactive({
img_radius_0: 4,
img_radius_1: 0,
});
const form = ref(props.value);
const theme_change = (val: number) => {
if (val) {
form.value.style.article_height = val;
}
};
</script>

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

@ -40,7 +40,7 @@
<slider v-model="form.article_spacing"></slider>
</el-form-item>
</template>
<template v-if="theme == '4'">
<template v-if="theme != '3'">
<el-form-item label="内容高度">
<slider v-model="form.article_height" :max="1000"></slider>
</el-form-item>

22
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' },
{ name: '两列展示（纵向）', value: '1' },
{ name: '大图展示', value: '2' },
{ name: '无图模式', value: '3' },
{ name: '左右滑动展示', value: '4' },
{ 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 },
],
carousel_col_list: [
{ name: '单列展示', value: '0' },
@ -164,6 +164,7 @@ const base_list = reactive({
{ name: '描述', value: '2' },
],
});
const emits = defineEmits(['theme_change']);
onMounted(() => {
nextTick(() => {
// 定时获取common_store.common.article_category的数据，直到拿到值或者关闭页面为止
@ -171,6 +172,13 @@ onMounted(() => {
base_list.article_category_list = common_store.common.article_category;
}
});
// 如果历史数据没有操作，则修改默认值
if (styles.article_height == 155 && form.value.theme != '4') {
const list = base_list.article_theme_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
emits('theme_change', list[0].height);
}
}
});
// 监听tabs_theme_list的变化
const article_theme_change = (val: any) => {
@ -196,6 +204,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);
}
};
// 开启关闭链接

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

@ -1,10 +1,10 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<model-article-tabs-content :value="value.content" :tab-style="value.style" :default-config="data_config"></model-article-tabs-content>
<model-article-tabs-content :value="form.content" :tab-style="form.style" :default-config="data_config" @theme_change="theme_change"></model-article-tabs-content>
</template>
<template v-else-if="type == '2'">
<model-article-tabs-styles :value="value.style" :content="value.content" :tabs-style="value.content.tabs_theme" :default-config="data_config"></model-article-tabs-styles>
<model-article-tabs-styles :value="form.style" :content="form.content" :tabs-style="form.content.tabs_theme" :default-config="data_config"></model-article-tabs-styles>
</template>
</div>
</template>
@ -29,4 +29,10 @@ const data_config = reactive({
img_radius_0: 4,
img_radius_1: 0,
});
const form = ref(props.value);
const theme_change = (val: number) => {
if (val) {
form.value.style.article_height = val;
}
};
</script>

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

@ -60,7 +60,7 @@
<slider v-model="form.article_spacing"></slider>
</el-form-item>
</template>
<template v-if="theme == '4'">
<template v-if="theme != '3'">
<el-form-item label="内容高度">
<slider v-model="form.article_height" :max="1000"></slider>
</el-form-item>

33
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 bg-f oh`;
class_type = `flex-row goods-height bg-f oh`;
break;
case '1':
class_type = `flex-col two-columns bg-f oh`;
class_type = `flex-col goods-height two-columns bg-f oh`;
break;
case '2':
class_type = `flex-col bg-f oh`;
class_type = `flex-col goods-height bg-f oh`;
break;
case '3':
class_type = `flex-col three-columns bg-f oh`;
class_type = `flex-col goods-height three-columns bg-f oh`;
break;
case '4':
class_type = `flex-row two-columns bg-f oh`;
class_type = `flex-row goods-height two-columns bg-f oh`;
break;
case '5':
class_type = `flex-col multicolumn-columns bg-f oh`;
@ -447,7 +447,7 @@ const multicolumn_columns_width = computed(() => {
let gap = (new_style.value.content_outer_spacing * (carousel_col.value - 1)) / carousel_col.value;
return `calc(${100 / carousel_col.value}% - ${gap}px)`;
});
const multicolumn_columns_height = computed(() => new_style.value.content_outer_height + 'px');
const content_outer_height = computed(() => new_style.value.content_outer_height + 'px');
interface nav_list {
split_list: data_list[];
}
@ -537,29 +537,32 @@ watchEffect(() => {
.multicolumn-columns {
width: v-bind(multicolumn_columns_width);
min-width: v-bind(multicolumn_columns_width);
height: v-bind(multicolumn_columns_height);
height: v-bind(content_outer_height);
}
.goods-height {
height: v-bind(content_outer_height);
}
.flex-img0 {
height: auto;
min-height: 11rem;
height: 100%;
// min-height: 11rem;
// max-height: 12rem;
width: 11rem;
}
.flex-img1 {
width: 100%;
height: 18rem;
height: 100%;
}
.flex-img2 {
width: 100%;
height: 16.6rem;
height: 100%;
}
.flex-img3 {
width: 100%;
height: 11.4rem;
height: 100%;
}
.flex-img4 {
min-width: 7rem;
min-height: 7rem;
width: 7rem;
min-height: 100%;
}
.flex-img5 {
width: 100%;
@ -569,7 +572,7 @@ watchEffect(() => {
:deep(.el-carousel) {
width: 100%;
.el-carousel__container {
height: v-bind(multicolumn_columns_height);
height: v-bind(content_outer_height);
}
}
</style>

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

@ -96,13 +96,13 @@ const { form, data } = toRefs(state);
const base_list = reactive({
product_style_list: [
{ name: '单列展示', value: '0' },
{ name: '大图展示', value: '2' },
{ name: '无图模式', value: '6' },
{ name: '两列展示(纵向)', value: '1' },
{ name: '两列展示(横向)', value: '4' },
{ name: '三列展示', value: '3' },
{ name: '左右滑动展示', value: '5' },
{ 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 },
],
product_list: [
{ name: '指定商品', value: '0' },
@ -122,7 +122,7 @@ const base_list = reactive({
{ name: '升序(asc)', value: '1' },
],
});
const emits = defineEmits(['theme_change']);
onBeforeMount(() => {
nextTick(() => {
// 定时获取common_store.common.article_category的数据，直到拿到值或者关闭页面为止
@ -134,6 +134,13 @@ onBeforeMount(() => {
}
}, 1000);
});
// 如果历史数据没有操作，则修改默认值
if (data.value.content_outer_height == 232 && form.value.theme != '5') {
const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
emits('theme_change', list[0].height);
}
}
});
const goods_list_remove = (index: number) => {
@ -177,7 +184,8 @@ const goods_list_sort = (new_list: any) => {
form.value.data_list = new_list;
};
// 选择某些风格时， 切换到对应的按钮
const change_style = (val: any): void => {
const change_style = (val: string | number | boolean | undefined): void => {
if (typeof val !== 'string') return;
form.value.theme = val;
if (!is_revise.value) {
if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
@ -203,6 +211,10 @@ const change_style = (val: any): 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);
if (list.length > 0) {
emits('theme_change', list[0].height);
}
};
const is_revise = ref(false);
const change_shop_type = () => {

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

@ -1,10 +1,10 @@
<template>
<div class="auxiliary-line-setting">
<template v-if="type == '1'">
<model-goods-list-content :value="value.content" :styles="value.style" :default-config="data_config"></model-goods-list-content>
<model-goods-list-content :value="form.content" :styles="form.style" :default-config="data_config" @theme_change="theme_change"></model-goods-list-content>
</template>
<template v-if="type == '2'">
<model-goods-list-styles :value="value.style" :content="value.content" :default-config="data_config"></model-goods-list-styles>
<model-goods-list-styles :value="form.style" :content="form.content" :default-config="data_config"></model-goods-list-styles>
</template>
</div>
</template>
@ -24,6 +24,12 @@ const data_config = reactive({
img_radius_0: 4,
img_radius_1: 0,
});
const form = ref(props.value);
const theme_change = (val: number) => {
if (val) {
form.value.style.content_outer_height = val;
}
};
</script>
<style lang="scss" scoped>
.auxiliary-line-setting {

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

@ -43,7 +43,7 @@
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="theme == '5'">
<template v-if="theme != '6'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
</el-form-item>
@ -85,7 +85,6 @@
</div>
</template>
<script setup lang="ts">
import { pick } from 'lodash';
const props = defineProps({
value: {
type: Object,

27
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' },
{ name: '大图展示', value: '2' },
{ name: '无图模式', value: '6' },
{ name: '两列展示(纵向)', value: '1' },
{ name: '两列展示(横向)', value: '4' },
{ name: '三列展示', value: '3' },
{ name: '左右滑动展示', value: '5' },
{ 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 },
],
product_list: [
{ name: '指定商品', value: '0' },
@ -166,7 +166,7 @@ const base_list = reactive({
{ name: '浏览量', value: '1' },
],
});
const emits = defineEmits(['theme_change']);
onBeforeMount(() => {
nextTick(() => {
// 定时获取common_store.common.article_category的数据，直到拿到值或者关闭页面为止
@ -178,6 +178,13 @@ onBeforeMount(() => {
}
}, 1000);
});
// 如果历史数据没有操作，则修改默认值
if (styles.value.content_outer_height == 232 && form.value.theme != '5') {
const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
if (list.length > 0) {
emits('theme_change', list[0].height);
}
}
});
const tabs_list_click = (item: any, index: number) => {
form.value.tabs_active_index = index;
@ -290,6 +297,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);
if (list.length > 0) {
emits('theme_change', list[0].height);
}
};
const is_revise = ref(false);
const change_shop_type = () => {

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

@ -1,10 +1,10 @@
<template>
<div class="auxiliary-line-setting">
<template v-if="type == '1'">
<model-goods-tabs-content :value="value.content" :tab-style="value.style" :default-config="data_config"></model-goods-tabs-content>
<model-goods-tabs-content :value="form.content" :tab-style="form.style" :default-config="data_config" @theme_change="theme_change"></model-goods-tabs-content>
</template>
<template v-if="type == '2'">
<model-goods-tabs-styles :value="value.style" :tabs-style="value.content.tabs_theme" :content="value.content" :default-config="data_config"></model-goods-tabs-styles>
<model-goods-tabs-styles :value="form.style" :tabs-style="form.content.tabs_theme" :content="form.content" :default-config="data_config"></model-goods-tabs-styles>
</template>
</div>
</template>
@ -25,6 +25,12 @@ const data_config = reactive({
img_radius_0: 4,
img_radius_1: 0,
});
const form = ref(props.value);
const theme_change = (val: number) => {
if (val) {
form.value.style.content_outer_height = val;
}
};
</script>
<style lang="scss" scoped>
.auxiliary-line-setting {

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

@ -50,7 +50,7 @@
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="theme == '5'">
<template v-if="theme != '6'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
</el-form-item>

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

@ -101,7 +101,7 @@ const defaultArticleList: DefaultArticleList = {
},
content_spacing: 10, // 内容间距
article_spacing: 10, // 文章间距
article_height: 155, // 文章高度
article_height: 103, // 文章高度
interval_time: 3, //滚动时间
is_roll: 1, // 是否轮播
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },

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

@ -133,7 +133,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
},
content_spacing: 10, // 内容间距
article_spacing: 10, // 文章间距
article_height: 155, // 文章高度
article_height: 103, // 文章高度
interval_time: 3, //滚动时间
is_roll: 1, // 是否轮播
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_left: 10, padding_right: 10, padding_bottom: 10 },

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

@ -124,7 +124,7 @@ const defaultProductList: DefaultProductList = {
// 商品内间距
content_spacing: 10,
// 商品高度
content_outer_height: 232,
content_outer_height: 142,
// 是否滚动
is_roll: '1',
interval_time: 3,

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

@ -156,7 +156,7 @@ const defaultProductList: DefaultProductList = {
// 商品内间距
content_spacing: 10,
// 商品高度
content_outer_height: 232,
content_outer_height: 142,
// 轮播处理
is_roll: '1',
interval_time: 3,