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

修改秒杀的显示

v1.0.0
于肖磊 2024-09-03 18:26:48 +08:00
parent 5e9afd00d8
commit d6c1042cfd
5 changed files with 268 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@
</div>
<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>
<span 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">
@ -30,11 +30,27 @@
<el-icon class="iconfont icon-arrow-right" :color="new_style.head_button_color"></el-icon>
</div>
</div>
<div class="flex flex-wrap" :style="`gap: ${ content_outer_spacing }px;`">
<div v-for="(item, index) in list" :key="index" :class="layout_type" :style="`${ content_radius }; ${ content_padding }`">
<template v-if="!isEmpty(item)">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
</template>
<div class="flex-col gap-10">
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { background_computer, common_styles_computer, gradient_computer } from '@/utils';
import { background_computer, common_styles_computer, gradient_computer, padding_computer, radius_computer } from '@/utils';
import { isEmpty } from 'lodash';
const props = defineProps({
value: {
@ -74,6 +90,106 @@ const seckill_head_style = computed(() => {
});
const style = computed(() => common_styles_computer(props.value.style.common_style));
interface plugins_icon_data {
name: string;
bg_color: string;
br_color: string;
color: string;
url: string;
}
interface data_list {
title: string;
images: string;
new_cover: string[];
min_original_price: string;
show_original_price_symbol: string;
show_original_price_unit: string;
min_price: string;
show_price_symbol: string;
show_price_unit: string;
sales_count: string;
plugins_view_icon_data: plugins_icon_data[];
}
const default_list = {
title: '测试商品标题',
min_original_price: '41.2',
show_original_price_symbol: '￥',
show_original_price_unit: '/ 台',
min_price: '51',
show_price_symbol: '￥',
show_price_unit: '/ 台',
sales_count: '1000',
images: '',
new_cover: [],
plugins_view_icon_data: [
{
name: '满减活动',
bg_color: '#EA3323',
br_color: '',
color: '#fff',
url: '',
},
{
name: '包邮',
bg_color: '',
br_color: '#EA3323',
color: '#EA3323',
url: '',
},
{
name: '领劵',
bg_color: '',
br_color: '#EA9223',
color: '#EA9223',
url: '',
},
],
};
const list = ref<data_list[]>([]);
onBeforeMount(() => {
list.value = Array(4).fill(default_list);
})
// 商品间距
const content_outer_spacing = computed(() => new_style.value.content_outer_spacing);
// 圆角设置
const content_radius = computed(() => radius_computer(new_style.value.shop_radius));
// 选择的风格
const shop_style_type = computed(() => form.value.shop_style_type);
// 内边距设置
const content_padding = computed(() => padding_computer(new_style.value.shop_padding));
// 不同风格下的样式
const layout_type = computed(() => {
let class_type = '';
switch (shop_style_type.value) {
case '1':
class_type = `flex-row bg-f oh multicolumn-columns`;
break;
case '2':
class_type = `flex-col bg-f oh multicolumn-columns`;
break;
case '3':
class_type = `flex-col bg-f oh multicolumn-columns`;
break;
default:
break;
}
return class_type;
});
// 不换行显示
const multicolumn_columns_width = computed(() => {
const { single_line_number } = toRefs(form.value);
let model_number = single_line_number.value;
if (shop_style_type.value == '1') {
model_number = 1;
} else if (shop_style_type.value == '2') {
model_number = 2;
}
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = (new_style.value.content_outer_spacing * (model_number - 1)) / model_number;
return `calc(${100 / model_number}% - ${gap}px)`;
});
// 图片圆角设置
const content_img_radius = computed(() => radius_computer(new_style.value.shop_img_radius));
const url_computer = (name: string) => {
const new_url = ref(new URL(`../../assets/images/components/model-seckill/${name}.png`, import.meta.url).href).value;
@ -81,6 +197,12 @@ const url_computer = (name: string) => {
};
</script>
<style lang="scss" scoped>
:deep(.el-image) {
.image-slot img {
width: 5rem;
height: 5rem;
}
}
.seckill-head {
padding: 1.5rem 1.3rem;
width: 100%;
@ -103,4 +225,23 @@ const url_computer = (name: string) => {
position: relative;
top: -0.1rem;
}
.multicolumn-columns {
height: 100%;
width: v-bind(multicolumn_columns_width);
min-width: v-bind(multicolumn_columns_width);
}
.flex-img1 {
height: auto;
min-height: 11rem;
max-height: 12rem;
width: 11rem;
}
.flex-img2 {
width: 100%;
height: 18rem;
}
.flex-img3 {
width: 100%;
min-height: 10.4rem;
}
</style>

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

@ -62,6 +62,16 @@ onBeforeMount(async () => {
radius_bottom_left: 4,
radius_bottom_right: 4,
},
shop_padding: {
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
},
content_outer_spacing: 10, // 商品间距
content_spacing: 10,
content_outer_height: 232,
shop_title_color: '',
shop_title_typeface: '',
shop_title_size: 12,

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

@ -1,51 +1,53 @@
<template>
<div class="w">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">头部样式</div>
<el-form-item label="标题设置">
<color-text-size-group v-model:color="form.topic_color" v-model:size="form.topic_size" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
<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 v-if="data.theme != '4'" label="距离结束">
<color-picker v-model="form.end_text_color"></color-picker>
</el-form-item>
<el-form-item label="数字背景">
<mult-color-picker :value="form.countdown_bg_color_list" :type="form.countdown_direction" @update:value="countdown_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="数字">
<color-picker v-model="form.countdown_color"></color-picker>
</el-form-item>
<el-form-item label="顶部背景">
<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>
<template v-if="form.head_state == '1'">
<card-container>
<div class="mb-12">头部样式</div>
<el-form-item v-if="form.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>
</el-form-item>
<el-form-item v-if="form.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>
</el-form-item>
<el-form-item label="秒杀提示">
<color-picker v-model="form.end_text_color" :default-color="clone_form.end_text_color"></color-picker>
</el-form-item>
<el-form-item label="数字背景">
<mult-color-picker :value="form.countdown_bg_color_list" :type="form.countdown_direction" @update:value="countdown_color_picker_event"></mult-color-picker>
</el-form-item>
<el-form-item label="数字">
<color-picker v-model="form.countdown_color" :default-color="clone_form.countdown_color"></color-picker>
</el-form-item>
<el-form-item label="顶部背景">
<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>
</div>
</el-form-item>
</card-container>
<div class="divider-line"></div>
</el-form-item>
</card-container>
<div class="divider-line"></div>
</template>
<card-container>
<div class="mb-12">商品样式</div>
<el-form-item label="内容圆角">
@ -63,6 +65,20 @@
<el-form-item label="原价价格">
<color-picker v-model="form.original_price_color"></color-picker>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form.shop_padding"></padding>
</el-form-item>
<el-form-item v-if="form.shop_style_type == '1'" label="内容间距">
<slider v-model="form.content_spacing" :max="100"></slider>
</el-form-item>
<el-form-item label="商品间距">
<slider v-model="form.content_outer_spacing" :max="100"></slider>
</el-form-item>
<template v-if="form.shop_style_type == '3'">
<el-form-item label="内容高度">
<slider v-model="form.content_outer_height" :max="1000"></slider>
</el-form-item>
</template>
<el-form-item label="秒杀角标">
<div class="flex-col gap-10">
<el-radio-group v-model="form.seckill_subscript_location">
@ -77,46 +93,51 @@
</div>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">进度条设置</div>
<el-form-item label="背景色">
<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_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>
</el-form-item>
<el-form-item label="图标颜色">
<color-picker v-model="form.progress_button_icon_color"></color-picker>
</el-form-item>
<el-form-item label="文字颜色">
<color-picker v-model="form.progress_text_color"></color-picker>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
</el-form-item>
<el-form-item label="滚动方式">
<el-radio-group v-model="form.rolling_fashion">
<el-radio v-for="item in base_list.rolling_fashion_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
<template v-if="form.shop_style_type == '1'">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">进度条设置</div>
<el-form-item label="背景色">
<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_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>
</el-form-item>
<el-form-item label="图标颜色">
<color-picker v-model="form.progress_button_icon_color"></color-picker>
</el-form-item>
<el-form-item label="文字颜色">
<color-picker v-model="form.progress_text_color"></color-picker>
</el-form-item>
</card-container>
</template>
<template v-if="form.shop_style_type == '3'">
<div class="divider-line"></div>
<card-container>
<div class="mb-12">轮播设置</div>
<el-form-item label="自动轮播">
<el-switch v-model="form.is_roll" />
</el-form-item>
<el-form-item label="间隔时间">
<slider v-model="form.interval_time" :min="1" :max="100"></slider>
</el-form-item>
<el-form-item label="滚动方式">
<el-radio-group v-model="form.rolling_fashion">
<el-radio v-for="item in base_list.rolling_fashion_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</el-form-item>
</card-container>
</template>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_style_update" />
</div>
</template>
<script setup lang="ts">
import { cloneDeep } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -136,6 +157,8 @@ const state = reactive({
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
let clone_form = cloneDeep(props.value);
const base_list = {
location_list: [
{ name: '左上', value: 'left-top' },

1
src/components/model-shop-list/index.vue
View File

@ -168,7 +168,6 @@ const props = defineProps({
const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
// 目前显示假数据，日后通过分类或者选择的商品来显示真实数据
interface plugins_icon_data {
name: string;
bg_color: string;

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

@ -33,6 +33,10 @@ interface DefaultSeckill {
header_background_img_url: uploadList[];
shop_radius: radiusStyle;
shop_img_radius: radiusStyle;
shop_padding: paddingStyle;
content_outer_spacing: number;
content_spacing: number;
content_outer_height: number;
shop_title_color: string;
shop_title_typeface: string;
shop_title_size: number;
@ -97,6 +101,16 @@ const defaultSeckill: DefaultSeckill = {
radius_bottom_left: 4,
radius_bottom_right: 4,
},
shop_padding: {
padding: 10,
padding_top: 10,
padding_bottom: 10,
padding_left: 10,
padding_right: 10,
},
content_outer_spacing: 10, // 商品间距
content_spacing: 10,
content_outer_height: 232,
shop_title_color: '',
shop_title_typeface: '',
shop_title_size: 12,