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

修改秒杀的显示

v1.0.0
于肖磊 2024-09-03 16:52:40 +08:00
parent 63687b8f7d
commit 891ac2d5e1
9 changed files with 172 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/images/components/model-seckill/time.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 691 B

2
src/components/common/mult-color-picker/index.vue
View File

@ -79,7 +79,7 @@ const change_color = (index: number, color: string | null) => {
update_value();
};
const change_color_percentage = (index: number, percentage: number | undefined) => {
color_list.value[index].color_percentage = percentage?.toString();
color_list.value[index].color_percentage = percentage;
update_value();
};
const update_value = () => {

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

@ -2,18 +2,27 @@
<div :style="style">
<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="['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;`">{{ form.topic_text }}</span>
<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>
</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">
<div v-if="form.theme == '1'" class="pl-6 pr-6 cr-f">|</div>
<div class="flex-row align-c gap-4">
<span v-if="form.theme != '4'" class="size-10" :style="`color: ${ new_style.end_text_color }`">距离结束</span>
<div class="flex-row gap-3 jc-c align-c" :style="[form.theme == '4'? `${ time_bg };padding: 0.3rem 0.4rem;border-radius: 1.1rem;` : '']">
<img v-if="form.theme == '4'" class="seckill-head-icon radius-xs" :src="url_computer('time')" />
<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 v-if="form.theme == '4'">
<div class="size-12" :style="`color: ${ new_style.countdown_color }`">{{ item.value }}</div>
<span v-if="[0, 1].includes(index)" class="colon" :style="`color: ${ new_style.countdown_color }`">:</span>
</template>
<template v-else>
<div class="time-config size-12" :style="`${ time_bg };color: ${ new_style.countdown_color }`">{{ item.value }}</div>
<span v-if="[0, 1].includes(index)" class="colon" :style="icon_time_check()">:</span>
</template>
</template>
</div>
</div>
</div>
<div v-if="form.button_status == '1'" class="flex-row align-c" :style="`color: ${ new_style.head_button_color }`">
@ -65,18 +74,33 @@ const seckill_head_style = computed(() => {
});
const style = computed(() => common_styles_computer(props.value.style.common_style));
const url_computer = (name: string) => {
const new_url = ref(new URL(`../../assets/images/components/model-seckill/${name}.png`, import.meta.url).href).value;
return new_url;
};
</script>
<style lang="scss" scoped>
.seckill-head {
padding: 1.5rem 1.3rem;
width: 100%;
height: 5.1rem;
border-radius: 0.8rem 0.8rem 0 0;
.seckill-title {
height: 2.1rem;
}
.time-config {
padding: 0.1rem 0.5rem;
line-height: 1.7rem;
border-radius: 0.4rem;
}
}
.seckill-head-icon {
width: 1.6rem;
height: 1.6rem;
}
.colon {
position: relative;
top: -0.1rem;
}
</style>

23
src/components/model-seckill/model-seckill-content.vue
View File

@ -28,14 +28,17 @@
<el-input v-model="form.topic_text" placeholder="请输入标题文字"></el-input>
</el-form-item>
</template>
<el-form-item label="按钮状态">
<el-radio-group v-model="form.button_status">
<el-radio v-for="item in base_list.state_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.button_status == '1'" label="按钮文字">
<el-input v-model="form.button_text" placeholder="请输入按钮文字"></el-input>
</el-form-item>
<template v-if="form.theme != '2'">
<el-form-item label="按钮状态">
<el-radio-group v-model="form.button_status">
<el-radio v-for="item in base_list.state_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.button_status == '1'" label="按钮文字">
<el-input v-model="form.button_text" placeholder="请输入按钮文字"></el-input>
</el-form-item>
</template>
</template>
</card-container>
<div class="divider-line"></div>
@ -113,6 +116,10 @@ const state = reactive({
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
watchEffect(() => {
form.value = props.value;
});
const base_list = {
state_list: [
{ name: '显示', value: '1' },

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

@ -1,15 +1,17 @@
<template>
<div class="auxiliary-line-setting">
<template v-if="type == '1'">
<model-seckill-content :value="value.content" :styles="value.style"></model-seckill-content>
<model-seckill-content :value="form.content" :styles="form.style" @update:change-theme="change_theme"></model-seckill-content>
</template>
<template v-if="type == '2'">
<model-seckill-styles :value="value.style" :content="value.content"></model-seckill-styles>
<model-seckill-styles :value="form.style" :content="form.content"></model-seckill-styles>
</template>
</div>
</template>
<script setup lang="ts">
import { cloneDeep } from 'lodash';
import { online_url } from '@/utils';
const props = defineProps({
type: {
type: String,
@ -20,64 +22,127 @@ const props = defineProps({
default: () => ({}),
},
});
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 new_url = ref('');
let default_data:any = {};
let default_config:any = {};
onBeforeMount(async () => {
new_url.value = await online_url('/static/plugins/seckill/images/diy/').then(res => res);
default_data = {
content: {
topic_type: 'image',
topic_src: [{ id: 1, url: new_url.value + 'header-title.png', original: '标题', title: '标题', ext: '.png', type: 'img' }],
topic_text: '限时秒杀',
},
style: {
topic_color: '#fff',
topic_size: 18,
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: '#FF1818',
header_background_color_list: [{ color: '', color_percentage: undefined }],
header_background_direction: '180deg',
header_background_img_style: '2',
header_background_img_url: [{ id: 1, url: new_url.value + 'header-bg.png', original: '背景', title: '背景1', ext: '.png', type: 'img' }],
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',
}
}
default_config = {
style: {
theme_1: {},
theme_2: {
content: {
topic_type: 'image',
topic_src: [{ id: 1, url: new_url.value + 'header-title-2.png', original: '标题2', title: '标题2', ext: '.png', type: 'img' }],
button_status: '0',
},
style: {
topic_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_url: [],
countdown_bg_color_list: [{ color: '#FF4909', color_percentage: undefined }, { color: '#FF8E4D', color_percentage: undefined }],
countdown_direction: '180deg',
countdown_color: '#fff',
}
},
theme_3: {
content: {
topic_type: 'text',
topic_src: [],
button_status: '1',
},
style: {
topic_color: '#000',
head_button_color: '#000',
end_text_color: '#666',
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
header_background_img_url: [],
countdown_bg_color_list: [{ color: '#000', color_percentage: undefined }],
countdown_direction: '180deg',
countdown_color: '#fff',
}
},
theme_4: {
content: {
topic_type: 'text',
topic_src: [],
button_status: '1',
},
style: {
topic_color: '#000',
head_button_color: '#000',
end_text_color: '',
header_background_color_list: [{ color: '#fff', color_percentage: undefined }],
header_background_img_url: [],
countdown_bg_color_list: [{ color: '#FF5000', color_percentage: undefined }],
countdown_direction: '180deg',
countdown_color: '#fff',
}
},
},
};
})
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)}`]);
form.value.style = Object.assign({}, form.value.style, cloneDeep(default_data.style), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].style));
form.value.content = Object.assign({}, form.value.content, cloneDeep(default_data.content), cloneDeep((<arrayIndex>default_config.style)[`theme_${Number(val)}`].content));
console.log(form.value.content);
}
};
</script>

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

@ -9,7 +9,7 @@
<el-form-item label="按钮设置">
<color-text-size-group v-model:color="form.head_button_color" v-model:size="form.head_button_size" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<el-form-item label="距离结束">
<el-form-item v-if="data.theme != '4'" label="距离结束">
<color-picker v-model="form.end_text_color"></color-picker>
</el-form-item>
<el-form-item label="数字背景">

2
src/utils/index.ts
View File

@ -67,7 +67,7 @@ export function gradient_handle(color_list: color_list[], direction: string, is_
if (color_list.length == 1) {
container_common_styles += ` ${item.color_percentage || 0}%, ${item.color} 100%`;
} else {
if (!isEmpty(item.color_percentage)) {
if (typeof item.color_percentage === "number") {
if (index == color_list.length - 1) {
container_common_styles += ` ${item.color_percentage}%`;
} else {

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

@ -72,7 +72,7 @@ const defaultSeckill: DefaultSeckill = {
},
style: {
topic_color: '#fff',
topic_size: 14,
topic_size: 18,
head_button_color: '#fff',
head_button_size: 12,
end_text_color: '#fff',