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

修改问题西安市

v1.2.0
于肖磊 2024-12-30 09:31:58 +08:00
parent 67b5ad1fd3
commit afd2c7bf5e
11 changed files with 201 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/common/common-styles/index.vue
View File

@ -17,33 +17,18 @@
<slider v-model="form.module_z_index" :min="0" :max="10"></slider>
</el-form-item>
<el-form-item label="内边距">
<padding :value="form" :is-up-down="isUpDown" @update:value="padding_change"></padding>
<padding :value="form" :is-up-down="isUpDown"></padding>
</el-form-item>
<el-form-item v-if="isMargin" label="外边距">
<margin :value="form" @update:value="margin_change"></margin>
<margin :value="form"></margin>
</el-form-item>
<el-form-item v-if="isRadius" label="圆角">
<radius :value="form" @update:value="radius_change"></radius>
</el-form-item>
<el-form-item v-if="isShadow" label="阴影设置">
<div class="flex-col gap-10 w">
<el-form-item label="颜色" label-width="45">
<color-picker v-model="form.box_shadow_color"></color-picker>
</el-form-item>
<el-form-item label="X轴" label-width="45">
<slider v-model="form.box_shadow_x" :min="-20" :max="20"></slider>
</el-form-item>
<el-form-item label="Y轴" label-width="45">
<slider v-model="form.box_shadow_y" :min="-20" :max="20"></slider>
</el-form-item>
<el-form-item label="模糊" label-width="45">
<slider v-model="form.box_shadow_blur"></slider>
</el-form-item>
<el-form-item label="扩展" label-width="45">
<slider v-model="form.box_shadow_spread"></slider>
</el-form-item>
</div>
<radius :value="form"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-if="isShowBorder" v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-if="isShadow" v-model="form"></shadow-config>
</el-form>
</div>
</card-container>
@ -60,6 +45,18 @@ const props = defineProps({
background_img_style: '0',
floating_up: 0,
is_bottom_up: '0',
border: {
is_show: '0',
color: '#FF3F3F',
style: 'solid',
size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
},
padding: 0,
padding_top: 0,
padding_bottom: 0,
@ -105,7 +102,11 @@ const props = defineProps({
isUpDown: {
type: Boolean,
default: true,
}
},
isShowBorder: {
type: Boolean,
default: true,
},
});
// value 和初始化数据合并数据
let form = ref(props.value);

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

@ -163,7 +163,7 @@
</div>
</template>
<script setup lang="ts">
import { common_img_computer, common_styles_computer, get_math, gradient_handle, padding_computer, radius_computer, background_computer } from '@/utils';
import { common_img_computer, common_styles_computer, get_math, gradient_handle, padding_computer, radius_computer, background_computer, border_computer, box_shadow_computer, margin_computer } from '@/utils';
import { isEmpty, cloneDeep, throttle } from 'lodash';
import ShopAPI from '@/api/shop';
import { Swiper, SwiperSlide } from 'swiper/vue';
@ -363,7 +363,7 @@ const layout_type = computed(() => {
// 容器样式
const layout_style = computed(() => {
const radius = theme.value == '6' ? '' : content_radius.value;
const gradient = theme.value != '6' ? gradient_handle(new_style.value.shop_color_list, new_style.value.shop_direction) : '';
const gradient = theme.value != '6' ? gradient_handle(new_style.value.shop_color_list, new_style.value.shop_direction) + margin_computer(new_style.value.shop_margin) + border_computer(new_style.value) + box_shadow_computer(new_style.value) : '';
return `${radius} ${ gradient }`;
});

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

@ -50,6 +50,9 @@
<color-picker v-model="form.shop_score_color" default-color="#000000"></color-picker>
</el-form-item> -->
<template v-if="theme != '6'">
<el-form-item label="外间距">
<margin :value="form.shop_margin"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.shop_padding"></padding>
</el-form-item>
@ -64,6 +67,10 @@
<radius :value="form.shop_radius"></radius>
</el-form-item>
<template v-if="theme != '6'">
<!-- 边框处理 -->
<border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
<template v-if="theme == '5'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>

44
src/components/model-img-magic/index.vue
View File

@ -5,34 +5,54 @@
<!-- 风格3 -->
<template v-if="form.style_actived == 2">
<div class="flex-row align-c jc-c style-size">
<div v-for="(item, index) in form.img_magic_list" :key="index" class="three img-spacing-border">
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
<div v-for="(item, index) in form.img_magic_list" :key="index" class="three img-spacing-border flex-row">
<div class="w flex-row" :style="content_img_container">
<div class="flex-1" :style="content_img_style_container">
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
</div>
</div>
</div>
</div>
</template>
<!-- 风格9 -->
<template v-else-if="form.style_actived == 8">
<div class="flex-row align-c jc-c style-size flex-wrap">
<div v-for="(item, index) in form.img_magic_list" :key="index" :class="['img-spacing-border', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
<div v-for="(item, index) in form.img_magic_list" :key="index" :class="['img-spacing-border flex-row', { 'style9-top': [0, 1].includes(index), 'style9-bottom': ![0, 1].includes(index) }]">
<div class="w flex-row" :style="content_img_container">
<div class="flex-1" :style="content_img_style_container">
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
</div>
</div>
</div>
</div>
</template>
<template v-else-if="form.style_actived == 10">
<template v-if="form.limit_size == '0'">
<div v-for="(item, index) in form.img_magic_list" :key="index" :class="['img-spacing-border', { 'h': item.img.length > 0, 'style_actived_10': item.img.length == 0 }]" :style="selected_style(item)">
<image-empty v-model="item.img[0]" :style="content_img_radius" fit="contain"></image-empty>
<div v-for="(item, index) in form.img_magic_list" :key="index" :class="['img-spacing-border flex-row', { 'h': item.img.length > 0, 'style_actived_10': item.img.length == 0 }]" :style="selected_style(item)">
<div class="w flex-row" :style="content_img_container">
<div class="flex-1" :style="content_img_style_container">
<image-empty v-model="item.img[0]" :style="content_img_radius" fit="contain"></image-empty>
</div>
</div>
</div>
</template>
<template v-else>
<div v-for="(item, index) in form.img_magic_list" :key="index" class="img-spacing-border" :style="`${ selected_style(item) };height: ${ form.image_height }px;`">
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
<div v-for="(item, index) in form.img_magic_list" :key="index" class="img-spacing-border flex-row" :style="`${ selected_style(item) };height: ${ form.image_height }px;`">
<div class="w flex-row" :style="content_img_container">
<div class="flex-1" :style="content_img_style_container">
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
</div>
</div>
</div>
</template>
</template>
<template v-else>
<div v-for="(item, index) in form.img_magic_list" :key="index" class="cube-selected img-spacing-border" :style="selected_style(item)">
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
<div v-for="(item, index) in form.img_magic_list" :key="index" class="cube-selected img-spacing-border flex-row" :style="selected_style(item)">
<div class="w flex-row" :style="content_img_container">
<div class="flex-1" :style="content_img_style_container">
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty>
</div>
</div>
</div>
</template>
</div>
@ -40,7 +60,7 @@
</div>
</template>
<script setup lang="ts">
import { common_img_computer, common_styles_computer, radius_computer, is_number } from '@/utils';
import { common_img_computer, common_styles_computer, radius_computer, is_number, margin_computer, padding_computer, box_shadow_computer, border_computer } from '@/utils';
const props = defineProps({
value: {
@ -116,6 +136,8 @@ const percentage = (num: number) => {
return marks.toFixed(4) + '%';
};
//#endregion
const content_img_container = computed(() => common_styles_computer(new_style.value) + margin_computer(new_style.value.margin));
const content_img_style_container = computed(() => common_img_computer(new_style.value) + padding_computer(new_style.value.padding));
// 公共样式
const style_container = computed(() => common_styles_computer(new_style.value.common_style));
const style_img_container = computed(() => common_img_computer(new_style.value.common_style));

30
src/components/model-img-magic/model-img-magic-styles.vue
View File

@ -6,9 +6,22 @@
<el-form-item v-if="new_content.style_actived !== 10" label="图片间距">
<slider v-model="form.image_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="图片圆角">
<radius :value="form" @update:value="radius_change"></radius>
<el-form-item label="背景设置">
<background-common v-model:color_list="form.color_list" v-model:direction="form.direction" v-model:img_style="form.background_img_style" v-model:img="form.background_img" @mult_color_picker_event="mult_color_picker_event" />
</el-form-item>
<el-form-item label="外边距">
<margin :value="form.margin"></margin>
</el-form-item>
<el-form-item label="内边距">
<padding :value="form.padding"></padding>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form"></radius>
</el-form-item>
<!-- 边框处理 -->
<border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
<!-- 阴影配置 -->
<shadow-config v-model="form"></shadow-config>
</card-container>
</el-form>
<div class="bg-f5 divider-line" />
@ -40,15 +53,10 @@ const common_style_update = (value: any) => {
form.value.common_style = value;
};
// 内容圆角
const radius_change = (radius: any) => {
form.value = Object.assign(form.value, pick(radius, [
'radius',
'radius_top_left',
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.color_list = arry;
form.value.direction = type.toString();
};
</script>
<style lang="scss" scoped>
.topic {

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

@ -39,6 +39,17 @@ interface DefaultProductList {
shop_background_img_style: string,
shop_background_img: uploadList[],
shop_padding: paddingStyle;
shop_margin: marginStyle,
border_is_show: string,
border_color: string,
border_style: string,
border_size: paddingStyle,
// 阴影
box_shadow_color: string,
box_shadow_x: number,
box_shadow_y: number,
box_shadow_blur: number,
box_shadow_spread: number,
shop_img_radius: radiusStyle;
shop_radius: radiusStyle;
content_outer_spacing: number;
@ -131,6 +142,23 @@ const defaultProductList: DefaultProductList = {
shop_color_list: [{ color: '#fff', color_percentage: undefined }],
shop_background_img_style: '0',
shop_background_img: [],
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
// 商品内边距
shop_padding: {
padding: 10,
@ -139,6 +167,13 @@ const defaultProductList: DefaultProductList = {
padding_left: 10,
padding_right: 10,
},
shop_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
// 图标圆角
shop_img_radius: {
radius: 4,
@ -171,7 +206,7 @@ const defaultProductList: DefaultProductList = {
shop_title_size: 14,
shop_title_color: "#333333",
shop_simple_desc_typeface: '400',
shop_simple_desc_size: 12,
shop_simple_desc_size: 12,
shop_simple_desc_color: "#999",
title_simple_desc_spacing: 4,
shop_price_typeface: '500',

52
src/config/const/img-magic.ts
View File

@ -23,6 +23,23 @@ interface defaultSearch {
radius_bottom_left: number;
radius_bottom_right: number;
image_spacing: number;
direction: string,
color_list: color_list[],
background_img_style: string,
background_img: uploadList[],
margin: marginStyle,
padding: paddingStyle,
// 边框样式
border_is_show: string,
border_color: string,
border_style: string,
border_size: paddingStyle,
// 阴影
box_shadow_color: string,
box_shadow_x: number,
box_shadow_y: number,
box_shadow_blur: number,
box_shadow_spread: number,
common_style: object;
};
}
@ -64,8 +81,43 @@ const defaultSearch: defaultSearch = {
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
direction: '90deg',
color_list: [{ color: '', color_percentage: undefined }],
background_img_style: '0',
background_img: [],
margin: {
margin_top: 0,
margin_right: 0,
margin_bottom: 0,
margin_left: 0,
margin: 0
},
padding: {
padding: 0,
padding_top: 0,
padding_right: 0,
padding_bottom: 0,
padding_left: 0,
},
// 图片间距
image_spacing: 2,
// 边框样式
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
// 阴影
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
common_style: defaultCommon,
},
};

10
src/config/const/index.ts
View File

@ -5,6 +5,16 @@ const defaultCommon: componentsCommonCommonStyle = {
floating_up: 0,
module_z_index: 0,
padding_top_safe_value: 0, // 安全距离值，在顶部时，需要加上安全距离，防止遮挡
border_is_show: '0',
border_color: '#FF3F3F',
border_style: 'solid',
border_size: {
padding: 1,
padding_top: 1,
padding_right: 1,
padding_bottom: 1,
padding_left: 1,
},
padding: 0,
padding_top: 0,
padding_bottom: 0,

4
src/types/global.d.ts vendored
View File

@ -90,6 +90,10 @@ declare global {
floating_up: number;
module_z_index: number;
padding_top_safe_value: number;
border_is_show: string,
border_color: string,
border_style: string,
border_size: paddingStyle,
padding: number;
padding_top: number;
padding_bottom: number;

10
src/utils/index.ts
View File

@ -293,6 +293,14 @@ export function background_computer(new_style: backgroundImgUrlStyle) {
return '';
}
}
export const border_computer = (new_style: componentsCommonCommonStyle) => {
const { border_is_show = '0', border_color = '', border_style = 'solid', border_size = { padding: 0, padding_bottom: 0, padding_left: 0, padding_right: 0, padding_top: 0 } } = new_style;
if (border_is_show == '1') {
return `border-width: ${border_size.padding_top}px ${border_size.padding_right}px ${border_size.padding_bottom}px ${border_size.padding_left}px;border-style: ${ border_style };border-color: ${border_color};`
}
return '';
};
/**
* 计算并组合组件的常用样式。
*
@ -303,7 +311,7 @@ export function background_computer(new_style: backgroundImgUrlStyle) {
* @returns 返回一个字符串，包含了计算后的样式定义，可以被直接应用于组件的样式属性。
*/
export function common_styles_computer(new_style: componentsCommonCommonStyle) {
return gradient_computer(new_style) + margin_computer(new_style) + radius_computer(new_style) + box_shadow_computer(new_style) + `overflow:hidden;`;
return gradient_computer(new_style) + margin_computer(new_style) + radius_computer(new_style) + box_shadow_computer(new_style) + border_computer(new_style) + `overflow:hidden;`;
}
export function common_img_computer(new_style: componentsCommonCommonStyle) {

5
src/views/layout/index.vue
View File

@ -22,6 +22,7 @@ import { is_obj, set_cookie, get_cookie } from '@/utils';
import { Settings, AppMain } from './components/index';
import defaultSettings from './components/main/index';
import defaultConfigSetting from '@/config/setting';
import defaultConfigConst from '@/config/const/index';
import { cloneDeep, isEmpty, omit } from 'lodash';
import DiyAPI, { diyData, headerAndFooter, diyConfig } from '@/api/diy';
import CommonAPI from '@/api/common';
@ -178,6 +179,10 @@ const default_merge = (data: any, key: string) => {
} else {
data.style = cloneDeep((defaultSettings as any)[key.replace(/-/g, '_')]).style;
}
// 兼融老数据
if (!isEmpty(data.style.common_style)) {
data.style.common_style = Object.assign({}, cloneDeep(defaultConfigConst), data.style.common_style);
}
if (data.content) {
data.content = Object.assign({}, cloneDeep((defaultSettings as any)[key.replace(/-/g, '_')]).content, data.content);
} else {