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

1.商品风格切换图片圆角优化 

sws 2024-08-27
v1.0.0
sws 2024-08-27 17:56:43 +08:00
parent 5af0e5b542
commit c375957af8
6 changed files with 132 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/model-shop-list/model-shop-list-content.vue
View File

@ -67,12 +67,25 @@ const props = defineProps({
type: Object,
default: () => ({}),
},
styles: {
type: Object,
default: () => ({}),
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
const state = reactive({
form: props.value,
data: props.styles,
});
// 如果需要解构，确保使用toRefs
const { form } = toRefs(state);
const { form, data } = toRefs(state);
const base_list = reactive({
product_style_list: [
@ -155,6 +168,23 @@ const change_style = (val: any): void => {
if (['3', '4', '5'].includes(val) && ['0', '1'].includes(form.value.shop_type)) {
form.value.shop_type = '2';
}
if (['0', '4'].includes(val)) {
if (data.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
data.value.shop_img_radius.radius = props.defaultConfig.img_radius_0;
data.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
data.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
data.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
data.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (data.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
data.value.shop_img_radius.radius = props.defaultConfig.img_radius_1;
data.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
data.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
data.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
data.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
};
</script>
<style lang="scss" scoped>

9
src/components/model-shop-list/model-shop-list-setting.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="auxiliary-line-setting">
<template v-if="type == '1'">
<model-shop-list-content :value="value.content"></model-shop-list-content>
<model-shop-list-content :value="value.content" :styles="value.style" :default-config="data_config"></model-shop-list-content>
</template>
<template v-if="type == '2'">
<model-shop-list-styles :value="value.style" :content="value.content"></model-shop-list-styles>
<model-shop-list-styles :value="value.style" :content="value.content" :default-config="data_config"></model-shop-list-styles>
</template>
</div>
</template>
@ -19,6 +19,11 @@ const props = defineProps({
default: () => ({}),
},
});
const data_config = reactive({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
});
</script>
<style lang="scss" scoped>
.auxiliary-line-setting {

64
src/components/model-shop-list/model-shop-list-styles.vue
View File

@ -21,14 +21,14 @@
<color-picker v-model="form.shop_score_color" default-color="#000000"></color-picker>
</el-form-item> -->
<el-form-item label="内容圆角">
<radius :value="form.shop_radius" @update:value="shop_radius_change"></radius>
<radius :value="form.shop_radius"></radius>
</el-form-item>
<template v-if="theme != '6'">
<el-form-item label="图片圆角">
<radius :value="form.shop_img_radius" @update:value="img_radius_change"></radius>
<radius :value="form.shop_img_radius"></radius>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.shop_padding" @update:value="shop_padding_change"></padding>
<padding :value="form.shop_padding"></padding>
</el-form-item>
<el-form-item v-if="['0', '4'].includes(theme)" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
@ -76,50 +76,46 @@ const props = defineProps({
content: {
type: Object,
default: () => ({}),
}
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
// 默认值
const state = reactive({
form: props.value,
data: props.content
data: props.content,
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const theme = computed(() => data.value.theme);
if (['0', '4'].includes(theme.value)) {
if (form.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.shop_img_radius.radius = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (form.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.shop_img_radius.radius = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
const common_style_update = (value: any) => {
form.value.common_style = value;
};
const shop_padding_change = (padding: any) => {
form.value.shop_padding = Object.assign(form.value.shop_padding, pick(padding, [
'padding',
'padding_top',
'padding_bottom',
'padding_left',
'padding_right'
]));
}
// 内容圆角
const shop_radius_change = (radius: any) => {
form.value.shop_radius = Object.assign(form.value.shop_radius, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
const img_radius_change = (radius: any) => {
form.value.shop_img_radius = Object.assign(form.value.shop_img_radius, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
</script>
<style lang="scss" scoped>
.topic {

29
src/components/model-shop-tabs/model-shop-tabs-content.vue
View File

@ -96,7 +96,15 @@ const props = defineProps({
tabStyle: {
type: Object,
default: () => ({}),
}
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
const state = reactive({
form: props.value,
@ -223,7 +231,7 @@ const url_value_dialog_call_back = (item: any[]) => {
});
};
const tabs_theme_change = (val: string | number | boolean | undefined):void => {
const tabs_theme_change = (val: string | number | boolean | undefined): void => {
styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
};
// 选择某些风格时， 切换到对应的按钮
@ -232,6 +240,23 @@ const change_style = (val: any): void => {
if (['3', '4', '5'].includes(val) && ['0', '1'].includes(form.value.shop_type)) {
form.value.shop_type = '2';
}
if (['0', '4'].includes(val)) {
if (styles.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (styles.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
styles.value.shop_img_radius.radius = props.defaultConfig.img_radius_0;
styles.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
styles.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
styles.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
styles.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (styles.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (styles.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
styles.value.shop_img_radius.radius = props.defaultConfig.img_radius_1;
styles.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
styles.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
styles.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
styles.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
};
</script>
<style lang="scss" scoped>

9
src/components/model-shop-tabs/model-shop-tabs-setting.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="auxiliary-line-setting">
<template v-if="type == '1'">
<model-shop-tabs-content :value="value.content" :tab-style="value.style"></model-shop-tabs-content>
<model-shop-tabs-content :value="value.content" :tab-style="value.style" :default-config="data_config"></model-shop-tabs-content>
</template>
<template v-if="type == '2'">
<model-shop-tabs-styles :value="value.style" :content="value.content"></model-shop-tabs-styles>
<model-shop-tabs-styles :value="value.style" :content="value.content" :default-config="data_config"></model-shop-tabs-styles>
</template>
</div>
</template>
@ -19,6 +19,11 @@ const props = defineProps({
default: () => ({}),
},
});
const data_config = reactive({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
});
</script>
<style lang="scss" scoped>
.auxiliary-line-setting {

66
src/components/model-shop-tabs/model-shop-tabs-styles.vue
View File

@ -27,14 +27,14 @@
</el-form-item>
</template>
<el-form-item label="内容圆角">
<radius :value="form.shop_radius" @update:value="shop_radius_change"></radius>
<radius :value="form.shop_radius"></radius>
</el-form-item>
<template v-if="theme != '6'">
<el-form-item label="图片圆角">
<radius :value="form.shop_img_radius" @update:value="img_radius_change"></radius>
<radius :value="form.shop_img_radius"></radius>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.shop_padding" @update:value="shop_padding_change"></padding>
<padding :value="form.shop_padding"></padding>
</el-form-item>
<el-form-item v-if="['0', '4'].includes(theme)" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
@ -88,52 +88,46 @@ const props = defineProps({
content: {
type: Object,
default: () => ({}),
}
},
defaultConfig: {
type: Object,
default: () => ({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
}),
},
});
// 默认值
const state = reactive({
form: props.value,
data: props.content
data: props.content,
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
const theme = computed(() => data.value.theme);
if (['0', '4'].includes(theme.value)) {
if (form.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.shop_img_radius.radius = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
form.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
}
} else {
if (form.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (form.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && form.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
form.value.shop_img_radius.radius = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
form.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
}
}
const common_style_update = (value: any) => {
form.value.common_style = value;
};
// 内容圆角
const shop_radius_change = (radius: any) => {
form.value.shop_radius = Object.assign(form.value.shop_radius, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
const img_radius_change = (radius: any) => {
form.value.shop_img_radius = Object.assign(form.value.shop_img_radius, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
const shop_padding_change = (padding: any) => {
form.value.shop_padding = Object.assign(form.value.shop_padding, pick(padding, [
'padding',
'padding_top',
'padding_bottom',
'padding_left',
'padding_right'
]));
}
const tabs_checked_event = (arry: string[], type: number) => {
form.value.tabs_checked = arry;