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> <slider v-model="form.module_z_index" :min="0" :max="10"></slider>
</el-form-item> </el-form-item>
<el-form-item label="内边距"> <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>
<el-form-item v-if="isMargin" label="外边距"> <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>
<el-form-item v-if="isRadius" label="圆角"> <el-form-item v-if="isRadius" label="圆角">
<radius :value="form" @update:value="radius_change"></radius> <radius :value="form"></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>
</el-form-item> </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> </el-form>
</div> </div>
</card-container> </card-container>
@ -60,6 +45,18 @@ const props = defineProps({
background_img_style: '0', background_img_style: '0',
floating_up: 0, floating_up: 0,
is_bottom_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: 0,
padding_top: 0, padding_top: 0,
padding_bottom: 0, padding_bottom: 0,
@ -105,7 +102,11 @@ const props = defineProps({
isUpDown: { isUpDown: {
type: Boolean, type: Boolean,
default: true, default: true,
} },
isShowBorder: {
type: Boolean,
default: true,
},
}); });
// value 和初始化数据合并数据 // value 和初始化数据合并数据
let form = ref(props.value); let form = ref(props.value);

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

@ -163,7 +163,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <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 { isEmpty, cloneDeep, throttle } from 'lodash';
import ShopAPI from '@/api/shop'; import ShopAPI from '@/api/shop';
import { Swiper, SwiperSlide } from 'swiper/vue'; import { Swiper, SwiperSlide } from 'swiper/vue';
@ -363,7 +363,7 @@ const layout_type = computed(() => {
// 容器样式 // 容器样式
const layout_style = computed(() => { const layout_style = computed(() => {
const radius = theme.value == '6' ? '' : content_radius.value; 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 }`; 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> <color-picker v-model="form.shop_score_color" default-color="#000000"></color-picker>
</el-form-item> --> </el-form-item> -->
<template v-if="theme != '6'"> <template v-if="theme != '6'">
<el-form-item label="外间距">
<margin :value="form.shop_margin"></margin>
</el-form-item>
<el-form-item label="内间距"> <el-form-item label="内间距">
<padding :value="form.shop_padding"></padding> <padding :value="form.shop_padding"></padding>
</el-form-item> </el-form-item>
@ -64,6 +67,10 @@
<radius :value="form.shop_radius"></radius> <radius :value="form.shop_radius"></radius>
</el-form-item> </el-form-item>
<template v-if="theme != '6'"> <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'"> <template v-if="theme == '5'">
<el-form-item label="内容高度"> <el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider> <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 --> <!-- 风格3 -->
<template v-if="form.style_actived == 2"> <template v-if="form.style_actived == 2">
<div class="flex-row align-c jc-c style-size"> <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"> <div v-for="(item, index) in form.img_magic_list" :key="index" class="three img-spacing-border flex-row">
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty> <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>
</div> </div>
</template> </template>
<!-- 风格9 --> <!-- 风格9 -->
<template v-else-if="form.style_actived == 8"> <template v-else-if="form.style_actived == 8">
<div class="flex-row align-c jc-c style-size flex-wrap"> <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) }]"> <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) }]">
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty> <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>
</div> </div>
</template> </template>
<template v-else-if="form.style_actived == 10"> <template v-else-if="form.style_actived == 10">
<template v-if="form.limit_size == '0'"> <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)"> <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)">
<image-empty v-model="item.img[0]" :style="content_img_radius" fit="contain"></image-empty> <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> </div>
</template> </template>
<template v-else> <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;`"> <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;`">
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty> <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>
</template> </template>
<template v-else> <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)"> <div v-for="(item, index) in form.img_magic_list" :key="index" class="cube-selected img-spacing-border flex-row" :style="selected_style(item)">
<image-empty v-model="item.img[0]" :style="content_img_radius" :fit="form.img_fit"></image-empty> <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>
</div> </div>
@ -40,7 +60,7 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <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({ const props = defineProps({
value: { value: {
@ -116,6 +136,8 @@ const percentage = (num: number) => {
return marks.toFixed(4) + '%'; return marks.toFixed(4) + '%';
}; };
//#endregion //#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_container = computed(() => common_styles_computer(new_style.value.common_style));
const style_img_container = computed(() => common_img_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="图片间距"> <el-form-item v-if="new_content.style_actived !== 10" label="图片间距">
<slider v-model="form.image_spacing" :max="100"></slider> <slider v-model="form.image_spacing" :max="100"></slider>
</el-form-item> </el-form-item>
<el-form-item label="图片圆角"> <el-form-item label="背景设置">
<radius :value="form" @update:value="radius_change"></radius> <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>
<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> </card-container>
</el-form> </el-form>
<div class="bg-f5 divider-line" /> <div class="bg-f5 divider-line" />
@ -40,15 +53,10 @@ const common_style_update = (value: any) => {
form.value.common_style = value; form.value.common_style = value;
}; };
// 内容圆角 // 内容圆角
const radius_change = (radius: any) => { const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value = Object.assign(form.value, pick(radius, [ form.value.color_list = arry;
'radius', form.value.direction = type.toString();
'radius_top_left', };
'radius_top_right',
'radius_bottom_left',
'radius_bottom_right',
]));
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.topic { .topic {

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

@ -39,6 +39,17 @@ interface DefaultProductList {
shop_background_img_style: string, shop_background_img_style: string,
shop_background_img: uploadList[], shop_background_img: uploadList[],
shop_padding: paddingStyle; 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_img_radius: radiusStyle;
shop_radius: radiusStyle; shop_radius: radiusStyle;
content_outer_spacing: number; content_outer_spacing: number;
@ -131,6 +142,23 @@ const defaultProductList: DefaultProductList = {
shop_color_list: [{ color: '#fff', color_percentage: undefined }], shop_color_list: [{ color: '#fff', color_percentage: undefined }],
shop_background_img_style: '0', shop_background_img_style: '0',
shop_background_img: [], 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: { shop_padding: {
padding: 10, padding: 10,
@ -139,6 +167,13 @@ const defaultProductList: DefaultProductList = {
padding_left: 10, padding_left: 10,
padding_right: 10, padding_right: 10,
}, },
shop_margin: {
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
// 图标圆角 // 图标圆角
shop_img_radius: { shop_img_radius: {
radius: 4, radius: 4,
@ -171,7 +206,7 @@ const defaultProductList: DefaultProductList = {
shop_title_size: 14, shop_title_size: 14,
shop_title_color: "#333333", shop_title_color: "#333333",
shop_simple_desc_typeface: '400', shop_simple_desc_typeface: '400',
shop_simple_desc_size: 12, shop_simple_desc_size: 12,
shop_simple_desc_color: "#999", shop_simple_desc_color: "#999",
title_simple_desc_spacing: 4, title_simple_desc_spacing: 4,
shop_price_typeface: '500', 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_left: number;
radius_bottom_right: number; radius_bottom_right: number;
image_spacing: 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; common_style: object;
}; };
} }
@ -64,8 +81,43 @@ const defaultSearch: defaultSearch = {
radius_top_right: 0, radius_top_right: 0,
radius_bottom_left: 0, radius_bottom_left: 0,
radius_bottom_right: 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, 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, common_style: defaultCommon,
}, },
}; };

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

@ -5,6 +5,16 @@ const defaultCommon: componentsCommonCommonStyle = {
floating_up: 0, floating_up: 0,
module_z_index: 0, module_z_index: 0,
padding_top_safe_value: 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: 0,
padding_top: 0, padding_top: 0,
padding_bottom: 0, padding_bottom: 0,

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

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

10
src/utils/index.ts
View File

@ -293,6 +293,14 @@ export function background_computer(new_style: backgroundImgUrlStyle) {
return ''; 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 返回一个字符串，包含了计算后的样式定义，可以被直接应用于组件的样式属性。 * @returns 返回一个字符串，包含了计算后的样式定义，可以被直接应用于组件的样式属性。
*/ */
export function common_styles_computer(new_style: componentsCommonCommonStyle) { 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) { 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 { Settings, AppMain } from './components/index';
import defaultSettings from './components/main/index'; import defaultSettings from './components/main/index';
import defaultConfigSetting from '@/config/setting'; import defaultConfigSetting from '@/config/setting';
import defaultConfigConst from '@/config/const/index';
import { cloneDeep, isEmpty, omit } from 'lodash'; import { cloneDeep, isEmpty, omit } from 'lodash';
import DiyAPI, { diyData, headerAndFooter, diyConfig } from '@/api/diy'; import DiyAPI, { diyData, headerAndFooter, diyConfig } from '@/api/diy';
import CommonAPI from '@/api/common'; import CommonAPI from '@/api/common';
@ -178,6 +179,10 @@ const default_merge = (data: any, key: string) => {
} else { } else {
data.style = cloneDeep((defaultSettings as any)[key.replace(/-/g, '_')]).style; 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) { if (data.content) {
data.content = Object.assign({}, cloneDeep((defaultSettings as any)[key.replace(/-/g, '_')]).content, data.content); data.content = Object.assign({}, cloneDeep((defaultSettings as any)[key.replace(/-/g, '_')]).content, data.content);
} else { } else {