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

修改页面显示

v1.0.0
于肖磊 2024-09-03 14:08:14 +08:00
parent dd0f8f5e84
commit 5f31995454
6 changed files with 177 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/components/model-seckill/theme-1-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 43 KiB

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

@ -1,10 +1,31 @@
<template>
<div :style="style">
{{ props.value }}
<div class="flex-col gap-10">
<div v-if="form.head_state == '1'" class="seckill-head flex-row align-c jc-sb oh" :style="seckill_head_style">
<div class="flex-row align-c">
<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;`">{{ form.topic_text }}</span>
</div>
<div class="pl-6 pr-6 cr-f">|</div>
<span class="size-10 pr-4" :style="`color: ${ new_style.end_text_color }`">距离结束</span>
<div class="flex-row gap-3 jc-c align-c">
<template v-for="(item, index) in time_config" :key="item.key">
<div class="time-config size-12" :style="`${ time_bg };color: ${ new_style.countdown_color }`">{{ item.value }}</div>
<div v-if="[0, 1].includes(index)" :style="icon_time_check()">:</div>
</template>
</div>
</div>
<div v-if="form.button_status == '1'" class="flex-row align-c" :style="`color: ${ new_style.head_button_color }`">
<span :style="`font-size: ${ new_style.head_button_size }px;`">{{ form.button_text }}</span>
<el-icon class="iconfont icon-arrow-right" :color="new_style.head_button_color"></el-icon>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { common_styles_computer } from '@/utils';
import { background_computer, common_styles_computer, gradient_computer } from '@/utils';
const props = defineProps({
value: {
@ -14,8 +35,48 @@ const props = defineProps({
},
},
});
const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
const time_config = [
{ key: 'hour', value: 12 },
{ key: 'minute', value: 30 },
{ key: 'second', value: 52 },
]
const time_bg = computed(() => {
const { countdown_bg_color_list, countdown_direction } = new_style.value;
// 渐变
const gradient = { color_list: countdown_bg_color_list, direction: countdown_direction };
return gradient_computer(gradient);
});
// icon的渐变色处理
const icon_time_check = () => {
return `${ time_bg.value };line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`;
}
const seckill_head_style = computed(() => {
let style = ``;
const { header_background_img_url, header_background_img_style, header_background_color_list, header_background_direction } = new_style.value;
// 渐变
const gradient = { color_list: header_background_color_list, direction: header_background_direction };
// 背景图
const back = { background_img_url: header_background_img_url, background_img_style: header_background_img_style };
style += gradient_computer(gradient) + background_computer(back);
return style;
});
const style = computed(() => common_styles_computer(props.value.style.common_style));
</script>
<style lang="scss" scoped>
.seckill-head {
padding: 1.5rem 1.3rem;
width: 100%;
height: 5.1rem;
.seckill-title {
height: 2.1rem;
}
.time-config {
padding: 0.1rem 0.5rem;
line-height: 1.7rem;
}
}
</style>

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

@ -1,14 +1,15 @@
<template>
<div class="auxiliary-line-setting">
<template v-if="type == '1'">
<model-seckill-content :value="value.content" :styles="value.style" :default-config="data_config"></model-seckill-content>
<model-seckill-content :value="value.content" :styles="value.style"></model-seckill-content>
</template>
<template v-if="type == '2'">
<model-seckill-styles :value="value.style" :content="value.content" :default-config="data_config"></model-seckill-styles>
<model-seckill-styles :value="value.style" :content="value.content"></model-seckill-styles>
</template>
</div>
</template>
<script setup lang="ts">
import { cloneDeep } from 'lodash';
const props = defineProps({
type: {
type: String,
@ -19,14 +20,66 @@ const props = defineProps({
default: () => ({}),
},
});
const data_config = reactive({
// 图片不同风格下的圆角
img_radius_0: 4,
img_radius_1: 0,
});
const default_data = {
topic_color: '',
topic_size: 12,
head_button_color: '',
head_button_size: 12,
end_text_color: '',
countdown_bg_color_list: [{ color: '', color_percentage: undefined }],
countdown_direction: '180deg',
countdown_color: '',
header_background_color_list: [{ color: '', color_percentage: undefined }],
header_background_direction: '180deg',
header_background_img_style: '2',
header_background_img_url: [],
shop_radius: {
radius: 8,
radius_top_left: 8,
radius_top_right: 8,
radius_bottom_left: 8,
radius_bottom_right: 8,
} ,
shop_img_radius: {
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
},
shop_title_color: '',
shop_title_typeface: '',
shop_title_size: 12,
price_color: '',
original_price_color: '',
seckill_subscript_location: '',
seckill_subscript_text_color: '',
seckill_subscript_bg_color: '',
progress_bg_color: '',
progress_actived_color_list: [{ color: '', color_percentage: undefined }],
progress_actived_direction: '180deg',
progress_button_color: '',
progress_button_icon_color: '',
progress_text_color: '',
is_roll: true,
interval_time: 2,
rolling_fashion: 'translation',
}
const default_config = {
style: {
theme_1: {},
theme_2: {},
theme_3: {},
theme_4: {},
theme_5: {},
},
};
const form = ref(props.value);
const change_theme = (val: string) => {
if (val) {
form.value.style = Object.assign({}, form.value.style, cloneDeep(default_data), (<arrayIndex>default_config.style)[`theme_${Number(val)}`]);
}
};
</script>
<style lang="scss" scoped>
.auxiliary-line-setting {
width: 100%;
}
</style>

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

@ -19,28 +19,30 @@
<color-picker v-model="form.countdown_color"></color-picker>
</el-form-item>
<el-form-item label="顶部背景">
<mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.header_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0">
<icon name="single-sheet"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="1">
<icon name="tile"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="2">
<icon name="spread-over"></icon>
</el-radio-button>
</el-tooltip>
</el-radio-group>
<div class="flex-col gap-10">
<mult-color-picker :value="form.header_background_color_list" :type="form.header_background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<el-radio-group v-model="form.header_background_img_style" is-button>
<el-tooltip content="单张" placement="top" effect="light">
<el-radio-button value="0">
<icon name="single-sheet"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="平铺" placement="top" effect="light">
<el-radio-button value="1">
<icon name="tile"></icon>
</el-radio-button>
</el-tooltip>
<el-tooltip content="铺满" placement="top" effect="light">
<el-radio-button value="2">
<icon name="spread-over"></icon>
</el-radio-button>
</el-tooltip>
</el-radio-group>
</div>
<upload v-model="form.header_background_img_url" :limit="1"></upload>
</div>
<upload v-model="form.header_background_img_url" :limit="1"></upload>
</el-form-item>
</card-container>
<div class="divider-line"></div>
@ -82,7 +84,7 @@
<color-picker v-model="form.progress_bg_color"></color-picker>
</el-form-item>
<el-form-item label="选中色">
<mult-color-picker :value="form.progress_actived_color" :type="form.progress_actived_direction" @update:value="progress_color_picker_event"></mult-color-picker>
<mult-color-picker :value="form.progress_actived_color_list" :type="form.progress_actived_direction" @update:value="progress_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="按钮背景">
<color-picker v-model="form.progress_button_color"></color-picker>
@ -115,7 +117,6 @@
</div>
</template>
<script setup lang="ts">
import { pick } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -163,7 +164,7 @@ const countdown_color_picker_event = (arry: color_list[], type: number) => {
};
// 进度条选中的设置
const progress_color_picker_event = (arry: color_list[], type: number) => {
form.value.progress_actived_color = arry;
form.value.progress_actived_color_list = arry;
form.value.progress_actived_direction = type.toString();
};
</script>

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

@ -1,4 +1,6 @@
import defaultCommon from './index';
import { online_url } from '@/utils';
const new_url = await online_url('/static/plugins/seckill/images/diy/');
interface DefaultSeckill {
content: {
head_state: string;
@ -18,14 +20,14 @@ interface DefaultSeckill {
};
style: {
topic_color: string;
topic_size: string;
topic_size: number;
head_button_color: string;
head_button_size: string;
head_button_size: number;
end_text_color: string;
countdown_bg_color_list: string;
countdown_bg_color_list: color_list[];
countdown_direction: string;
countdown_color: string;
header_background_color_list: string;
header_background_color_list: color_list[];
header_background_direction: string;
header_background_img_style: string;
header_background_img_url: uploadList[];
@ -33,14 +35,14 @@ interface DefaultSeckill {
shop_img_radius: radiusStyle;
shop_title_color: string;
shop_title_typeface: string;
shop_title_size: string;
shop_title_size: number;
price_color: string;
original_price_color: string;
seckill_subscript_location: string;
seckill_subscript_text_color: string;
seckill_subscript_bg_color: string;
progress_bg_color: string,
progress_actived_color: string,
progress_actived_color_list: color_list[],
progress_actived_direction: string,
progress_button_color: string,
progress_button_icon_color: string,
@ -55,11 +57,11 @@ const defaultSeckill: DefaultSeckill = {
content: {
head_state: '1',
theme: '1',
topic_type: 'text',
topic_src: [],
topic_text: '',
topic_type: 'image',
topic_src: [{ id: 1, url: new_url + 'header-title.png', original: '标题', title: '标题', ext: '.png', type: 'img' }],
topic_text: '限时秒杀',
button_status: '1',
button_text: '',
button_text: '更多',
shop_style_type: '1',
single_line_number: 3,
shop_number: 10,
@ -69,18 +71,18 @@ const defaultSeckill: DefaultSeckill = {
subscript_text: '秒杀'
},
style: {
topic_color: '',
topic_size: '',
head_button_color: '',
head_button_size: '',
end_text_color: '',
countdown_bg_color_list: '',
topic_color: '#fff',
topic_size: 14,
head_button_color: '#fff',
head_button_size: 12,
end_text_color: '#fff',
countdown_bg_color_list: [{ color: '#fff', color_percentage: undefined }],
countdown_direction: '180deg',
countdown_color: '',
header_background_color_list: '',
countdown_color: '#FF1818',
header_background_color_list: [{ color: '', color_percentage: undefined }],
header_background_direction: '180deg',
header_background_img_style: '2',
header_background_img_url: [],
header_background_img_url: [{ id: 1, url: new_url + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
shop_radius: {
radius: 8,
radius_top_left: 8,
@ -97,22 +99,22 @@ const defaultSeckill: DefaultSeckill = {
},
shop_title_color: '',
shop_title_typeface: '',
shop_title_size: '',
shop_title_size: 12,
price_color: '',
original_price_color: '',
seckill_subscript_location: '',
seckill_subscript_text_color: '',
seckill_subscript_bg_color: '',
progress_bg_color: '',
progress_actived_color: '',
progress_actived_color_list: [{ color: '', color_percentage: undefined }],
progress_actived_direction: '180deg',
progress_button_color: '',
progress_button_icon_color: '',
progress_text_color: '',
is_roll: true,
interval_time: 2,
rolling_fashion: '',
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
rolling_fashion: 'translation',
common_style: { ...defaultCommon, padding: 0, padding_top: 2, padding_bottom: 10, padding_left: 10, padding_right: 10 },
},
};

40
src/views/layout/components/main/index.vue
View File

@ -262,45 +262,7 @@ interface componentsData {
key: string;
data: componentsData[];
}
const components = ref<componentsData[]>([
// {
// name: '基础组件',
// key: 'base',
// data: [
// { key: 'carousel', name: '轮播图' },
// { key: 'search', name: '搜索框' },
// { key: 'nav-group', name: '导航组' },
// { key: 'notice', name: '公告' },
// { key: 'video', name: '视频' },
// { key: 'user-info', name: '用户信息' },
// { key: 'tabs', name: '选项卡' },
// { key: 'article-tabs', name: '文章选项卡' },
// { key: 'shop-tabs', name: '商品选项卡' },
// { key: 'article-list', name: '文章列表' },
// { key: 'shop-list', name: '商品列表' },
// { key: 'img-magic', name: '图片魔方' },
// { key: 'data-magic', name: '数据魔方' },
// { key: 'hot-zone', name: '热区' },
// { key: 'custom', name: '自定义' },
// ],
// },
// {
// name: '营销组件',
// key: 'plugins',
// data: [{ key: 'coupon', name: '优惠券' }],
// },
// {
// name: '工具组件',
// key: 'tool',
// data: [
// { key: 'float-window', name: '悬浮按钮' },
// { key: 'text-title', name: '文本标题' },
// { key: 'auxiliary-blank', name: '辅助空白' },
// { key: 'row-line', name: '横线' },
// { key: 'rich-text', name: '富文本' },
// ],
// },
]);
const components = ref<componentsData[]>([]);
const url_computer = (name: string) => {
const new_url = ref(new URL(`../../../../assets/images/layout/siderbar/${name}.png`, import.meta.url).href).value;
return new_url;