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

公告字段更新

v1.0.0
于肖磊 2024-09-05 10:43:32 +08:00
parent 15b9f79e6b
commit fedf7db1e1
15 changed files with 97 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/common/custom-module/model-image/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="img-outer re w h" :style="border_style">
<image-empty v-model="img_src" :style="image_style"></image-empty>
<image-empty v-model="img" :style="image_style"></image-empty>
</div>
</template>
<script setup lang="ts">
@ -27,9 +27,9 @@ const props = defineProps({
});
// 用于页面判断显示
const form = reactive(props.value);
const img_src = computed(() => {
if (!isEmpty(form.img_src[0])) {
return form.img_src[0];
const img = computed(() => {
if (!isEmpty(form.img[0])) {
return form.img[0];
} else {
if (!isEmpty(props.sourceList)) {
return props.sourceList[form.data_source_id];

4
src/components/common/custom-module/model-image/model-image-style.vue
View File

@ -4,7 +4,7 @@
<card-container>
<div class="mb-12">图片设置</div>
<el-form-item label="上传图片">
<upload v-model="form.img_src" :limit="1" size="50" @update:model-value="img_src_change('1')"></upload>
<upload v-model="form.img" :limit="1" size="50" @update:model-value="img_src_change('1')"></upload>
</el-form-item>
<el-form-item label="数据字段">
<el-select v-model="form.data_source_id" value-key="id" clearable filterable placeholder="请选择图片数据字段" size="default" class="flex-1" @change="img_src_change('2')">
@ -92,7 +92,7 @@ const border_radius_change = (radius: any) => {
const img_src_change = (key: string) => {
if (key == '2') {
form.value.img_src = [];
form.value.img = [];
} else {
form.value.data_source_id = '';
}

2
src/components/model-custom/components/index-default.ts
View File

@ -42,7 +42,7 @@ export const img_com_data = {
com_width: 50,
com_height: 50,
staging_height: 50,
img_src: [],
img: [],
data_source_id: '',
data_source_list: {},
link: {},

6
src/components/model-custom/index.vue
View File

@ -3,13 +3,13 @@
<div class="w h re">
<div v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height)}">
<template v-if="item.key == 'text'">
<model-text :key="item.com_data" :value="item.com_data" :source-list="form.source_list" :is-percentage="true"></model-text>
<model-text :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" :is-percentage="true"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :key="item.com_data" :value="item.com_data" :source-list="form.source_list" :is-percentage="true"></model-image>
<model-image :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" :is-percentage="true"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :key="item.com_data" :value="item.com_data" :source-list="form.source_list" :is-percentage="true"></model-lines>
<model-lines :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" :is-percentage="true"></model-lines>
</template>
</div>
</div>

20
src/components/model-custom/model-custom-content.vue
View File

@ -7,12 +7,12 @@
<el-select v-model="form.data_source" value-key="id" placeholder="请选择数据源" filterable clearable @change="changeDataSource">
<el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type" />
</el-select>
<div v-if="!isEmpty(form.source_list)" class="flex-row mt-20 gap-20">
<div v-if="!isEmpty(form.data_source_content)" class="flex-row mt-20 gap-20">
<div class="re flex align-c">
<image-empty v-model="form.source_list[form.img_key]" style="width: 10rem; height: 10rem;"></image-empty>
<image-empty v-model="form.data_source_content[form.img_key]" style="width: 10rem; height: 10rem;"></image-empty>
<div class="plr-15 bg-f abs replace-data size-14" @click="replace_data">替换数据</div>
</div>
<div class="flex-1 size-14 text-line-3">{{ form.source_list.title || form.source_list.name }}</div>
<div class="flex-1 size-14 text-line-3">{{ form.data_source_content.title || form.data_source_content.name }}</div>
</div>
</el-form-item>
<div class="mb-20">内容设置</div>
@ -21,7 +21,7 @@
</el-form>
<Dialog ref="dialog" @accomplish="accomplish">
<div class="flex-row h w">
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" :source-list="form.source_list" :list="custom_list" @right-update="right_update"></DragIndex>
<DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" :source-list="form.data_source_content" :list="custom_list" @right-update="right_update"></DragIndex>
<div class="settings">
<template v-if="diy_data.key === 'img'">
<model-image-style :key="key" v-model:height="center_height" :options="model_data_source" :value="diy_data"></model-image-style>
@ -64,14 +64,14 @@ const form = reactive(props.value);
// 弹出框里的内容
let custom_list = reactive([]);
const center_height = ref(0);
const options = ref<source_list[]>([]);
const options = ref<data_source_content[]>([]);
//#region 初始化数据处理
interface data_list {
name: string;
field: string;
type: string;
};
interface source_list {
interface data_source_content {
name: string;
data: data_list[];
type: string;
@ -156,7 +156,7 @@ const accomplish = () => {
const url_value_dialog_visible = ref(false);
const changeDataSource = (key: string) => {
processing_data(key);
form.source_list = {};
form.data_source_content = {};
if (!isEmpty(key)) {
url_value_dialog_visible.value = true;
}
@ -165,14 +165,14 @@ const changeDataSource = (key: string) => {
// 弹出框选择的内容
const url_value_dialog_call_back = (item: any[]) => {
if (item.length > 0) {
form.source_list = item[0];
form.data_source_content = item[0];
} else {
form.source_list = {};
form.data_source_content = {};
}
};
// 弹出框关闭
const url_value_close = () => {
if (isEmpty(form.source_list)) {
if (isEmpty(form.data_source_content)) {
form.data_source = '';
}
}

16
src/components/model-notice/index.vue
View File

@ -3,8 +3,8 @@
<template v-if="form.notice_style == 'inherit'">
<div class="flex-row align-c news-box gap-y-8" :style="container_background_style">
<template v-if="form.title_type == 'img-icon'">
<div v-if="!isEmpty(form.img_src)">
<image-empty v-model="form.img_src[0]" :style="img_style"></image-empty>
<div v-if="!isEmpty(form.img)">
<image-empty v-model="form.img[0]" :style="img_style"></image-empty>
</div>
<div v-else>
<icon :name="form.icon_class" :size="new_style.icon_size + ''" :color="new_style.icon_color"></icon>
@ -27,7 +27,7 @@
<icon :name="form.icon_class" :size="new_style.icon_size + ''" :color="new_style.icon_color"></icon>
</template>
<template v-else>
<image-empty v-model="form.img_src[0]" :style="img_style" error-img-style="width:1.6rem;height:1.6rem;"></image-empty>
<image-empty v-model="form.img[0]" :style="img_style" error-img-style="width:1.6rem;height:1.6rem;"></image-empty>
</template>
</template>
<template v-else>
@ -80,9 +80,9 @@ const img_style = ref('');
// 标题的设置
const topic_style = computed(() => {
// 标题渐变色处理
const gradient = gradient_handle(new_style.value.topic_color_list, '90deg');
const gradient = gradient_handle(new_style.value.title_color_list, '90deg');
// 标题设置
return `color:${ new_style.value.topic_color }; font-size: ${ new_style.value.topic_size }px; font-weight: ${ new_style.value.topic_typeface }; ${ gradient }`;
return `color:${ new_style.value.title_color }; font-size: ${ new_style.value.title_size }px; font-weight: ${ new_style.value.title_typeface }; ${ gradient }`;
});
// 内容标题设置
const news_style = computed(() => `font-size: ${ new_style.value.news_size }px; font-weight: ${ new_style.value.news_typeface };`);
@ -110,9 +110,9 @@ const notice_list = computed(() => {
watchEffect(() => {
//#region 标题设置
if (form.value.notice_style == 'card') {
img_style.value = `height: ${ new_style.value.topic_height }px; width: ${ new_style.value.topic_width }px`;
} else if (!isEmpty(form.value.img_src)) {
img_style.value = `height: ${ new_style.value.topic_height }px; width: ${ new_style.value.topic_width }px`;
img_style.value = `height: ${ new_style.value.title_height }px; width: ${ new_style.value.title_width }px`;
} else if (!isEmpty(form.value.img)) {
img_style.value = `height: ${ new_style.value.title_height }px; width: ${ new_style.value.title_width }px`;
}
//#endregion

2
src/components/model-notice/model-notice-content.vue
View File

@ -20,7 +20,7 @@
</el-radio-group>
</el-form-item>
<el-form-item v-if="!is_text" label="上传图片">
<upload v-model="form.img_src" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload>
<upload v-model="form.img" v-model:icon-value="form.icon_class" is-icon :limit="1" size="50"></upload>
</el-form-item>
<el-form-item v-if="is_text" label="标题文字">
<el-input v-model="form.title" placeholder="请输入标题" maxlength="4" show-word-limit></el-input>

56
src/components/model-notice/model-notice-styles.vue
View File

@ -2,33 +2,51 @@
<div class="w h">
<el-form :model="form" label-width="80">
<card-container>
<div class="mb-12">标题样式</div>
<div class="mb-12">基础样式</div>
<template v-if="!is_img">
<el-form-item label="标题文字">
<color-text-size-group v-model:color="form.topic_color" v-model:typeface="form.topic_typeface" v-model:size="form.topic_size" default-color="#000000"></color-text-size-group>
<color-text-size-group v-model:color="form.title_color" v-model:typeface="form.title_typeface" v-model:size="form.title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
<el-form-item label="标题背景" class="topic">
<flex-gradients-create :color-list="form.topic_color_list"></flex-gradients-create>
<flex-gradients-create :color-list="form.title_color_list"></flex-gradients-create>
</el-form-item>
</template>
<template v-else>
<template v-if="!isEmpty(substance.icon_class)">
<el-form-item label="图标大小">
<slider v-model="form.icon_size" :max="100"></slider>
</el-form-item>
<el-form-item label="图标颜色">
<color-picker v-model="form.icon_color" default-color="#999"></color-picker>
<el-form-item label="左侧图标">
<div class="flex-col w gap-10">
<el-form-item label="大小" label-width="40" class="word-size">
<slider v-model="form.icon_size" :max="100"></slider>
</el-form-item>
<el-form-item label="颜色" label-width="40" class="word-size">
<color-picker v-model="form.icon_color" default-color="#999"></color-picker>
</el-form-item>
</div>
</el-form-item>
</template>
<template v-else>
<el-form-item label="图片宽度">
<slider v-model="form.topic_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.topic_height" :max="1000"></slider>
<el-form-item label="左侧图片">
<div class="flex-col w gap-10">
<el-form-item label="宽度" label-width="40" class="word-size">
<slider v-model="form.title_width" :max="1000"></slider>
</el-form-item>
<el-form-item label="高度" label-width="40" class="word-size">
<slider v-model="form.title_height" :max="1000"></slider>
</el-form-item>
</div>
</el-form-item>
</template>
</template>
<el-form-item label="右侧按钮">
<color-picker v-model="form.button_color" default-color="#999"></color-picker>
</el-form-item>
<el-form-item label="内容标题">
<color-text-size-group v-model:color="form.news_color" v-model:typeface="form.news_typeface" v-model:size="form.news_size" default-color="#000000"></color-text-size-group>
</el-form-item>
</card-container>
<div class="bg-f5 divider-line" />
<card-container>
<div class="mb-12">容器设置</div>
<template v-if="substance.notice_style === 'inherit'">
<el-form-item label="容器高度">
<slider v-model="form.container_height" :max="1000"></slider>
@ -58,12 +76,6 @@
<el-form-item label="容器圆角">
<radius :value="form.container_radius"></radius>
</el-form-item>
<el-form-item label="按钮颜色">
<color-picker v-model="form.button_color" default-color="#999"></color-picker>
</el-form-item>
<el-form-item label="内容标题">
<color-text-size-group v-model:color="form.news_color" v-model:typeface="form.news_typeface" v-model:size="form.news_size" default-color="#000000"></color-text-size-group>
</el-form-item>
</card-container>
</el-form>
<div class="bg-f5 divider-line" />
@ -113,4 +125,10 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
flex-direction: column;
}
}
.word-size {
:deep(.el-form-item__label) {
color: #999;
font-size: 1.2rem;
}
}
</style>

2
src/components/model-seckill/index.vue
View File

@ -5,7 +5,7 @@
<div :class="['flex-row align-c', { 'gap-10': form.theme != '1', 'jc-sb w': form.theme == '2' }]">
<div class="seckill-title">
<image-empty v-if="form.topic_type == 'image'" v-model="form.topic_src[0]" error-img-style="width:2.1rem; height: 1rem;"></image-empty>
<span v-else :style="`color: ${new_style.topic_color};font-size: ${new_style.topic_size}px;line-height:21px;font-weight:600;`">{{ form.topic_text }}</span>
<span v-else :style="`color: ${new_style.title_color};font-size: ${new_style.title_size}px;line-height:21px;font-weight:600;`">{{ form.topic_text }}</span>
</div>
<div v-if="form.theme == '1'" class="pl-6 pr-6 cr-f">|</div>
<div v-if="intervalId != undefined" class="flex-row align-c gap-4">

10
src/components/model-seckill/model-seckill-setting.vue
View File

@ -44,8 +44,8 @@ onBeforeMount(async () => {
topic_text: '限时秒杀',
},
style: {
topic_color: '#fff',
topic_size: 18,
title_color: '#fff',
title_size: 18,
head_button_color: '#fff',
head_button_size: 12,
end_text_color: '#fff',
@ -127,7 +127,7 @@ onBeforeMount(async () => {
button_status: '0',
},
style: {
topic_color: '#000',
title_color: '#000',
end_text_color: '#666',
header_background_color_list: [{ color: '#FFE0E0', color_percentage: undefined },{ color: '#FFEFEF', color_percentage: 50 }, { color: '#FFFFFF', color_percentage: undefined }],
header_background_img: [],
@ -143,7 +143,7 @@ onBeforeMount(async () => {
button_status: '1',
},
style: {
topic_color: '#000',
title_color: '#000',
head_button_color: '#000',
end_text_color: '#666',
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
@ -160,7 +160,7 @@ onBeforeMount(async () => {
button_status: '1',
},
style: {
topic_color: '#000',
title_color: '#000',
head_button_color: '#000',
end_text_color: '#666',
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],

2
src/components/model-seckill/model-seckill-styles.vue
View File

@ -5,7 +5,7 @@
<card-container>
<div class="mb-12">头部样式</div>
<el-form-item v-if="data.topic_type == 'text'" label="标题设置">
<color-text-size-group v-model:color="form.topic_color" v-model:size="form.topic_size" :default-color="clone_form.topic_color" :type-list="['color', 'size']"></color-text-size-group>
<color-text-size-group v-model:color="form.title_color" v-model:size="form.title_size" :default-color="clone_form.title_color" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item v-if="data.button_status == '1'" label="按钮设置">
<color-text-size-group v-model:color="form.head_button_color" v-model:size="form.head_button_size" :default-color="clone_form.head_button_color" :type-list="['color', 'size']"></color-text-size-group>

8
src/store/modules/custom.ts
View File

@ -7,7 +7,7 @@ export const DataSourceStore = defineStore('dataSource', () => {
field: string;
type: string;
};
interface source_list {
interface data_source_content {
name: string;
data: data_list[];
type: string;
@ -15,10 +15,10 @@ export const DataSourceStore = defineStore('dataSource', () => {
// 上传是否需要调接口判断
const is_data_source_api = ref(false);
// 数据源
const data_source_list = ref<source_list[]>([]);
const data_source_list = ref<data_source_content[]>([]);
// 存储上传分类列表
const set_data_source = (source_list: source_list[]) => {
data_source_list.value = source_list;
const set_data_source = (data_source_content: data_source_content[]) => {
data_source_list.value = data_source_content;
is_data_source_api.value = true;
};
// 如果为false 则转为true

4
src/views/layout/components/main/default/custom.ts
View File

@ -5,7 +5,7 @@ interface defaultSearch {
height: number;
img_key: string;
data_source: string;
source_list: string[];
data_source_content: string[];
custom_list: string[];
};
style: {
@ -16,7 +16,7 @@ const defaultSearch: defaultSearch = {
content: {
height: 390,
img_key: '',
source_list: [],
data_source_content: [],
data_source:'',
custom_list: []
},

28
src/views/layout/components/main/default/notice.ts
View File

@ -13,7 +13,7 @@ interface defaultSearch {
title_type: string;
title: string;
direction: string;
img_src: uploadList[];
img: uploadList[];
icon_class: string;
more_link: object;
interval_time: number;
@ -25,12 +25,12 @@ interface defaultSearch {
news_color: string;
news_typeface: string;
news_size: number;
topic_color_list: color_list[];
topic_color: string;
topic_typeface: string;
topic_size: number;
topic_width: number;
topic_height: number;
title_color_list: color_list[];
title_color: string;
title_typeface: string;
title_size: number;
title_width: number;
title_height: number;
container_height: number;
icon_size: number;
icon_color: string;
@ -48,7 +48,7 @@ const defaultSearch: defaultSearch = {
direction: 'vertical',
title_type: 'img-icon',
title: '测试标题',
img_src: [],
img: [],
icon_class: '',
is_right_button: 'show',
interval_time: 2,
@ -66,7 +66,7 @@ const defaultSearch: defaultSearch = {
news_color: '#000',
news_typeface: '400',
news_size: 12,
topic_color_list: [
title_color_list: [
{
color: '',
color_percentage: undefined,
@ -76,11 +76,11 @@ const defaultSearch: defaultSearch = {
color_percentage: undefined,
},
],
topic_color: '#000',
topic_typeface: '400',
topic_size: 14,
topic_width: 24,
topic_height: 24,
title_color: '#000',
title_typeface: '400',
title_size: 14,
title_width: 24,
title_height: 24,
container_height: 44,
icon_size: 12,
icon_color: '#999',

8
src/views/layout/components/main/default/seckill.ts
View File

@ -22,8 +22,8 @@ interface DefaultSeckill {
subscript_text: string;
};
style: {
topic_color: string;
topic_size: number;
title_color: string;
title_size: number;
head_button_color: string;
head_button_size: number;
end_text_color: string;
@ -89,8 +89,8 @@ const defaultSeckill: DefaultSeckill = {
subscript_text: '秒杀',
},
style: {
topic_color: '#fff',
topic_size: 18,
title_color: '#fff',
title_size: 18,
head_button_color: '#fff',
head_button_size: 12,
end_text_color: '#fff',