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

新增秒杀角标

v1.1.0
于肖磊 2024-11-19 18:43:36 +08:00
parent f06963d5ac
commit 7f64da5ee4
27 changed files with 488 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/common/subscript/subscript-content.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<el-form-item label="角标">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.seckill_subscript_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.seckill_subscript_show == '1'" class="mt-10 w">
<el-col :span="24">
<div class="flex-col gap-10">
<el-form-item>
<el-radio-group v-model="form.subscript_type">
<el-radio value="text">文本</el-radio>
<el-radio value="img-icon">图片或图标</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="!is_text">
<upload v-model="form.subscript_img_src" v-model:icon-value="form.subscript_icon_class" is-icon :limit="1" size="50"></upload>
</el-form-item>
<el-form-item v-if="is_text">
<el-input v-model="form.subscript_text" placeholder="请输入秒杀文字" clearable></el-input>
</el-form-item>
</div>
</el-col>
</el-row>
</el-form-item>
</template>
<script lang="ts" setup>
const props = defineProps({
value: {
type: Object,
default: () => ({}),
}
});
const form = ref(props.value);
const is_text = computed(() => form.value.subscript_type == 'text');
</script>

66
src/components/common/subscript/subscript-index.vue Normal file
View File

@ -0,0 +1,66 @@
<template>
<div v-if="form.seckill_subscript_show == '1'" class="corner-marker" :style="corner_marker">
<div class="flex-row nowrap" :style="corner_img_marker">
<template v-if="form.subscript_type == 'img-icon'">
<template v-if="!isEmpty(form.subscript_img_src)">
<image-empty v-model="form.subscript_img_src[0]" :style="img_style"></image-empty>
</template>
<template v-else>
<icon :name="form.subscript_icon_class" :size="new_style.subscript_style.text_or_icon_size + ''" :color="new_style.subscript_style.text_or_icon_color"></icon>
</template>
</template>
<template v-else>
<span class="text-line-1" :style="`font-size: ${ new_style.subscript_style.text_or_icon_size }px;color: ${ new_style.subscript_style.text_or_icon_color };`">{{ form.subscript_text }}</span>
</template>
</div>
</div>
</template>
<script lang="ts" setup>
import { isEmpty } from 'lodash'
import { common_img_computer, common_styles_computer } from '@/utils';
const props = defineProps({
value: {
type: Object,
default: () => {
return {};
},
},
});
const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
//#region 角标
// 左上角，右上角，右下角，左下角
const corner_marker = computed(() => {
const { subscript_style } = new_style.value;
let location = common_styles_computer(subscript_style);
const seckill_subscript_location = subscript_style.seckill_subscript_location;
// 圆角根据图片的圆角来计算 对角线是同样的圆角
if (seckill_subscript_location == 'top-left') {
location += 'top: 0;left: 0;';
} else if (seckill_subscript_location == 'top-center') {
location += 'top: 0;left: 50%;transform: translateX(-50%);';
} else if (seckill_subscript_location == 'top-right') {
location += 'top: 0;right: 0;';
} else if (seckill_subscript_location == 'bottom-left') {
location += 'bottom: 0;left: 0';
} else if (seckill_subscript_location == 'bottom-center') {
location += 'bottom: 0;left: 50%;transform: translateX(-50%);';
} else if (seckill_subscript_location == 'bottom-right') {
location += 'bottom: 0;right: 0;';
}
return location;
});
const corner_img_marker = computed(() => common_img_computer(new_style.value.subscript_style));
// 图片设置
const img_style = computed(() => `height: ${new_style.value.subscript_style.img_height}px; width: ${new_style.value.subscript_style.img_width}px`);
//#endregion
</script>
<style lang="scss" scoped>
.corner-marker {
position: absolute;
max-width: 100%;
}
</style>

126
src/components/common/subscript/subscript-styles.vue Normal file
View File

@ -0,0 +1,126 @@
<template>
<card-container>
<div class="mb-12">秒杀角标</div>
<el-form-item label="角标位置">
<div class="flex-col gap-10">
<el-radio-group v-model="form.seckill_subscript_location">
<el-radio v-for="item in base_list.location_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
</div>
</el-form-item>
<template v-if="data.subscript_type == 'img-icon' && !isEmpty(data.subscript_img_src)">
<el-form-item label="图片宽度">
<slider v-model="form.img_width" :max="200"></slider>
</el-form-item>
<el-form-item label="图片高度">
<slider v-model="form.img_height" :max="200"></slider>
</el-form-item>
</template>
<template v-else>
<el-form-item label="内容设置">
<color-text-size-group v-model:color="form.text_or_icon_color" v-model:size="form.text_or_icon_size" :default-color="clone_form.text_or_icon_color" :type-list="['color', 'size']"></color-text-size-group>
</el-form-item>
</template>
<el-form-item label="背景">
<div class="flex-col gap-10 w">
<div class="size-12">背景色</div>
<mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
<div class="flex-row jc-sb align-c">
<div class="size-12">背景图</div>
<bg-btn-style v-model="form.background_img_style"></bg-btn-style>
</div>
<upload v-model="form.background_img" :limit="1"></upload>
</div>
</el-form-item>
<el-form-item label="外间距">
<margin :value="form"></margin>
</el-form-item>
<el-form-item label="内间距">
<padding :value="form"></padding>
</el-form-item>
<el-form-item label="圆角">
<radius :value="form"></radius>
</el-form-item>
<el-form-item 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>
</card-container>
</template>
<script lang="ts" setup>
import { isEmpty, cloneDeep } from 'lodash';
const props = defineProps({
value: {
type: Object,
default: () => ({
text_or_icon_color: '#fff',
text_or_icon_size: 12,
img_width: 20,
img_height: 20,
direction: '90deg',
color_list: [{ color: '#FF7607', color_percentage: undefined }],
background_img_style: '2',
background_img: [] as uploadList[],
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 10,
padding_right: 10,
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
}),
},
data: {
type: Object,
default: () => ({}),
},
});
const form = ref(props.value);
let clone_form = cloneDeep(props.value);
const base_list = {
location_list: [
{ name: '上左', value: 'top-left' },
{ name: '上中', value: 'top-center' },
{ name: '上右', value: 'top-right' },
{ name: '下左', value: 'bottom-left' },
{ name: '下中', value: 'bottom-center' },
{ name: '下右', value: 'bottom-right' },
],
};
// 背景设置
const mult_color_picker_event = (arry: color_list[], type: number) => {
form.value.color_list = arry;
form.value.direction = type.toString();
};
</script>

35
src/components/model-article-list/index.vue
View File

@ -6,10 +6,16 @@
<div v-for="(item, index) in data_list" :key="index" class="item oh" :style="article_style">
<div :class="article_theme == '0' ? 'flex-row oh' : 'flex-col oh'" :style="article_img_style">
<template v-if="article_theme != '3'">
<template v-if="item.new_cover.length > 0">
<image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
</template>
<template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
<div class="oh re">
<template v-if="item.new_cover.length > 0">
<image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
</template>
<!-- 角标设置 -->
<subscript-index :value="props.value"></subscript-index>
</div>
</template>
<div class="jc-sb flex-1" :class="article_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="article_theme != '0' ? content_padding : 'width: 0;'">
<div class="flex-col" :class="article_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + new_style.name_desc_space + 'px;'">
@ -33,10 +39,16 @@
<swiper :key="carousel_key" class="w flex" direction="horizontal" :loop="true" :autoplay="autoplay" :slides-per-view="Number(carousel_col) + 1" :slides-per-group="slides_per_group" :allow-touch-move="false" :space-between="new_style.article_spacing" :pause-on-mouse-enter="true" :modules="modules">
<swiper-slide v-for="(item, index) in data_list" :key="index" class="item oh" :style="article_style">
<div class="h oh flex-col" :style="article_img_style">
<template v-if="item.new_cover.length > 0">
<image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
</template>
<template v-else> <image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty> </template>
<div class="oh re">
<template v-if="item.new_cover.length > 0">
<image-empty v-model="item.new_cover[0].url" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.data.cover" class="img" :style="img_radius" :error-img-style="error_img"></image-empty>
</template>
<!-- 角标设置 -->
<subscript-index :value="props.value"></subscript-index>
</div>
<div class="jc-sb flex-1 flex-col" :style="article_theme != '0' ? content_padding : ''">
<div class="flex-col" :style="'gap:' + new_style.name_desc_space + 'px;'">
<div class="title text-line-2" :style="article_name">{{ !isEmpty(item.new_title) ? item.new_title : item.data.title }}</div>
@ -55,13 +67,6 @@
</div>
</swiper-slide>
</swiper>
<!-- <el-carousel :key="carousel_key" indicator-position="none" :interval="interval_time" arrow="never" :autoplay="is_roll ? true : false">
<el-carousel-item v-for="(item1, index1) in article_carousel_list" :key="index1" class="flex" :style="article_spacing">
<div v-for="(item, index) in item1.carousel_list" :key="index" class="item oh" :style="article_style">
</div>
</el-carousel-item>
</el-carousel> -->
</div>
</div>
</div>

6
src/components/model-article-list/model-article-list-content.vue
View File

@ -29,6 +29,12 @@
</el-checkbox-group>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">角标设置</div>
<!-- 角标设置 -->
<subscript-content :value="form"></subscript-content>
</card-container>
</el-form>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['article']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</div>

5
src/components/model-article-list/model-article-list-styles.vue
View File

@ -85,6 +85,11 @@
</template>
</card-container>
</template>
<!-- 角标 -->
<template v-if="data.seckill_subscript_show == '1'">
<div class="divider-line"></div>
<subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
</template>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_style_update" />

6
src/components/model-article-tabs/model-article-tabs-content.vue
View File

@ -59,6 +59,12 @@
</el-checkbox-group>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">角标设置</div>
<!-- 角标设置 -->
<subscript-content :value="form"></subscript-content>
</card-container>
</el-form>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['article']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</div>

5
src/components/model-article-tabs/model-article-tabs-styles.vue
View File

@ -111,6 +111,11 @@
</template>
</card-container>
</template>
<!-- 秒杀角标 -->
<template v-if="data.seckill_subscript_show == '1'">
<div class="divider-line"></div>
<subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
</template>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_styles_update" />

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

@ -17,12 +17,16 @@
</template>
<template v-else>
<template v-if="!isEmpty(item)">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<div class="oh re" :class="`flex-img${theme}`">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<!-- 角标 -->
<subscript-index :value="props.value"></subscript-index>
</div>
</template>
<div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || is_show('sales_count') || is_show('plugins_view_icon') || form.is_shop_show == '1'" class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
<div class="flex-col gap-10 top-title">
@ -105,12 +109,16 @@
<swiper-slide v-for="(item, index) in list" :key="index" :class="layout_type" :style="layout_style">
<div :class="['oh w h', ['0', '4'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<div class="oh re" :class="`flex-img${theme}`">
<template v-if="!isEmpty(item.new_cover)">
<image-empty v-model="item.new_cover[0]" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${theme}`" :style="content_img_radius"></image-empty>
</template>
<!-- 角标 -->
<subscript-index :value="props.value"></subscript-index>
</div>
</template>
<div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('plugins_view_icon') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
<div class="flex-col gap-10 top-title">

6
src/components/model-goods-list/model-goods-list-content.vue
View File

@ -26,6 +26,12 @@
<div class="divider-line"></div>
<!-- 商品显示的配置信息 -->
<product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">角标设置</div>
<!-- 角标设置 -->
<subscript-content :value="form"></subscript-content>
</card-container>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</el-form>
</div>

5
src/components/model-goods-list/model-goods-list-styles.vue
View File

@ -92,6 +92,11 @@
</card-container>
<div class="divider-line"></div>
</template>
<!-- 秒杀角标 -->
<template v-if="data.seckill_subscript_show == '1'">
<subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
<div class="divider-line"></div>
</template>
<card-container>
<div class="mb-12">购物车按钮</div>
<el-form-item label="按钮颜色" class="topic">

6
src/components/model-goods-tabs/model-goods-tabs-content.vue
View File

@ -59,6 +59,12 @@
<div class="divider-line"></div>
<!-- 商品显示的配置信息 -->
<product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">角标设置</div>
<!-- 角标设置 -->
<subscript-content :value="form"></subscript-content>
</card-container>
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</el-form>
</div>

5
src/components/model-goods-tabs/model-goods-tabs-styles.vue
View File

@ -111,6 +111,11 @@
</card-container>
<div class="divider-line"></div>
</template>
<!-- 秒杀角标 -->
<template v-if="data.seckill_subscript_show == '1'">
<subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
<div class="divider-line"></div>
</template>
<card-container>
<div class="mb-12">购物车按钮</div>
<el-form-item label="按钮颜色" class="topic">

6
src/components/model-nav-group/index.ts
View File

@ -11,6 +11,11 @@ interface nav_group_content {
display_style: string;
row: number;
nav_content_list: nav_group[];
seckill_subscript_show: string;
subscript_type: string;
subscript_img_src: uploadList[];
subscript_icon_class: string;
subscript_text: string;
}
interface nav_group_styles {
@ -34,5 +39,6 @@ interface nav_group_styles {
title_color: string;
title_size: number;
title_space: number;
subscript_style: object;
common_style: object;
}

4
src/components/model-nav-group/index.vue
View File

@ -5,8 +5,10 @@
<swiper-slide v-for="(item, index) in nav_content_list" :key="index">
<div ref="bannerImg" class="flex flex-wrap" :style="nav_space">
<div v-for="(item1, index1) in item.split_list" :key="index1" class="item flex-col align-c" :style="nav_title_space">
<div v-if="['image_with_text', 'image'].includes(nav_style)" class="top-img flex align-c jc-c">
<div v-if="['image_with_text', 'image'].includes(nav_style)" class="top-img flex align-c jc-c re">
<image-empty v-model="item1.img[0]" :style="img_style"></image-empty>
<!-- 角标 -->
<subscript-index :value="props.value"></subscript-index>
</div>
<p v-if="['image_with_text', 'text'].includes(nav_style)" class="w size-12 ma-0 nowrap oh tc" :style="text_style">{{ item1.title }}</p>
</div>

14
src/components/model-nav-group/model-nav-group-content.vue
View File

@ -53,6 +53,12 @@
</drag>
<el-button class="mt-20 mb-20 w" @click="add">+添加</el-button>
</card-container>
<div class="divider-line"></div>
<card-container>
<div class="mb-12">角标设置</div>
<!-- 角标设置 -->
<subscript-content :value="form"></subscript-content>
</card-container>
</el-form>
<category-dialog v-model:dialog-visible="dialogVisible" @confirm_event="confirm_event"></category-dialog>
</div>
@ -95,7 +101,13 @@ const props = withDefaults(defineProps<Props>(),{
title: '',
link: {},
}
]
],
// 角标配置
seckill_subscript_show: '0',
subscript_type: 'text',
subscript_img_src: [],
subscript_icon_class: '',
subscript_text: '',
})
});

6
src/components/model-nav-group/model-nav-group-styles.vue
View File

@ -54,6 +54,11 @@
<slider v-model="form.title_size" :max="100"></slider>
</el-form-item>
</card-container>
<!-- 角标 -->
<template v-if="data_content.seckill_subscript_show == '1'">
<div class="divider-line"></div>
<subscript-styles :value="form.subscript_style" :data="data_content"></subscript-styles>
</template>
</el-form>
<div class="divider-line"></div>
<common-styles :value="form.common_style" @update:value="common_styles_update" />
@ -93,6 +98,7 @@ const props = withDefaults(defineProps<Props>(), {
title_color: '#000',
title_size: 12,
title_space: 10,
subscript_style: {},
common_style: {},
}),
});

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

@ -48,9 +48,8 @@
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
<div v-if="form.seckill_subscript_show == '1'" class="size-12 nowrap corner-marker" :style="corner_marker">
<span class="text-line-1">{{ form.subscript_text }}</span>
</div>
<!-- 角标 -->
<subscript-index :value="props.value"></subscript-index>
</div>
</template>
<div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col gap-10 w flex-1 jc-sb oh" :style="content_style">
@ -114,9 +113,8 @@
<template v-else>
<image-empty v-model="item.images" :class="`flex-img${shop_style_type}`" :style="content_img_radius"></image-empty>
</template>
<div v-if="form.seckill_subscript_show == '1'" class="size-12 nowrap corner-marker" :style="corner_marker">
<span class="text-line-1">{{ form.subscript_text }}</span>
</div>
<!-- 角标 -->
<subscript-index :value="props.value"></subscript-index>
</div>
</template>
<div v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col gap-10 w flex-1 jc-sb" :style="content_style">
@ -192,6 +190,7 @@ const props = defineProps({
const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
//#region 秒杀头部控制
const time_bg = computed(() => {
const { countdown_bg_color_list, countdown_direction } = new_style.value;
// 渐变
@ -229,9 +228,10 @@ const seckill_head_img_style = computed(() => {
style += background_computer(back) + padding_computer(padding);
return style;
});
//#endregion
const style = computed(() => common_styles_computer(props.value.style.common_style));
const style_img_container = computed(() => common_img_computer(props.value.style.common_style));
//#region 秒杀默认数据
interface plugins_icon_data {
name: string;
bg_color: string;
@ -288,7 +288,8 @@ const default_list = {
},
],
};
const list = ref<data_list[]>([]);
//#endregion
//#region 倒计时和商品数据获取
// 显示时间
const time_config = reactive([
{ key: 'hour', value: '00' },
@ -341,6 +342,7 @@ const updateCountdown = () => {
}
});
};
const list = ref<data_list[]>([]);
// 更新倒计时函数
onBeforeMount(() => {
SeckillAPI.getSeckillList({}).then((res: any) => {
@ -372,6 +374,8 @@ onBeforeMount(() => {
onUnmounted(() => {
clearInterval(intervalId.value);
})
//#endregion
//#region 商品样式
// 商品间距
const content_outer_spacing = computed(() => new_style.value.content_outer_spacing);
// 圆角设置
@ -424,6 +428,8 @@ const layout_img_style = computed(() => {
}
return padding + background_computer(data);
});
//#endregion
//#region 图片大小控制
const shop_style_type_list= [
{ name: '单列', value: '1', width: 110, height: 120 },
{ name: '双列', value: '2', width: 180, height: 180 },
@ -455,6 +461,8 @@ const goods_img_height = computed(() => {
}
}
});
//#endregion
//#region 通用处理方式，处理文字大小和颜色等
// 根据传递的参数，从对象中取值
const trends_config = (key: string, type?: string) => {
return style_config(new_style.value[`shop_${key}_typeface`], new_style.value[`shop_${key}_size`], new_style.value[`shop_${key}_color`], type);
@ -477,6 +485,7 @@ const style_config = (typeface: string, size: number, color: string | object, ty
const button_gradient = () => {
return gradient_handle(new_style.value.shop_button_color, '180deg');
};
//#endregion
// 不换行显示
const multicolumn_columns_width = computed(() => {
const { carousel_col } = toRefs(form.value);
@ -494,6 +503,7 @@ const multicolumn_columns_width = computed(() => {
const is_show = (index: string) => {
return form.value.is_show.includes(index);
};
//#region 轮播图
// 轮播图key值
const carouselKey = ref('0');
const autoplay = ref<boolean | object>(false);
@ -519,23 +529,7 @@ watchEffect(() => {
const multicolumn_columns_height = computed(() => new_style.value.content_outer_height + 'px');
// 图片圆角设置
const content_img_radius = computed(() => radius_computer(new_style.value.shop_img_radius));
// 左上角，右上角，右下角，左下角
const corner_marker = computed(() => {
const { seckill_subscript_location, shop_img_radius, seckill_subscript_bg_color, seckill_subscript_text_color } = new_style.value;
let location = `background: ${seckill_subscript_bg_color};color: ${seckill_subscript_text_color};`;
// 圆角根据图片的圆角来计算 对角线是同样的圆角
if (seckill_subscript_location == 'top-left') {
location += `top: 0;left: 0;border-radius: ${shop_img_radius.radius_top_left}px 0 ${shop_img_radius.radius_top_left}px 0;`;
} else if (seckill_subscript_location == 'top-right') {
location += `top: 0;right: 0;border-radius: 0 ${shop_img_radius.radius_top_right}px 0 ${shop_img_radius.radius_top_right}px;`;
} else if (seckill_subscript_location == 'bottom-left') {
location += `bottom: 0;left: 0;border-radius: 0 ${shop_img_radius.radius_bottom_left}px 0 ${shop_img_radius.radius_bottom_left}px;`;
} else if (seckill_subscript_location == 'bottom-right') {
location += `bottom: 0;right: 0;border-radius: ${shop_img_radius.radius_bottom_right}px 0 ${shop_img_radius.radius_bottom_right}px 0;`;
}
return location;
});
//#endregion
</script>
<style lang="scss" scoped>
:deep(.el-image) {
@ -614,9 +608,4 @@ const corner_marker = computed(() => {
.roll-columns {
height: v-bind(multicolumn_columns_height);
}
.corner-marker {
position: absolute;
padding: 0.1rem 1rem;
max-width: 100%;
}
</style>

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

@ -82,14 +82,8 @@
</el-col>
</el-row>
</el-form-item>
<el-form-item label="秒杀角标">
<el-row class="w">
<el-col :span="24"><el-switch v-model="form.seckill_subscript_show" active-value="1" inactive-value="0"></el-switch></el-col>
</el-row>
<el-row v-if="form.seckill_subscript_show == '1'" class="mt-10 w">
<el-col :span="24"><el-input v-model="form.subscript_text" placeholder="请输入秒杀文字" clearable></el-input></el-col>
</el-row>
</el-form-item>
<!-- 角标设置 -->
<subscript-content :value="form"></subscript-content>
</card-container>
</el-form>
</div>

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

@ -68,19 +68,6 @@
<el-form-item label="原价价格">
<color-picker v-model="form.original_price_color"></color-picker>
</el-form-item>
<el-form-item label="秒杀角标">
<div class="flex-col gap-10">
<el-radio-group v-model="form.seckill_subscript_location">
<el-radio v-for="item in base_list.location_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
</el-radio-group>
<el-form-item label="文字" label-width="40" class="form-item-child-label">
<color-picker v-model="form.seckill_subscript_text_color"></color-picker>
</el-form-item>
<el-form-item label="背景" label-width="40" class="form-item-child-label">
<color-picker v-model="form.seckill_subscript_bg_color"></color-picker>
</el-form-item>
</div>
</el-form-item>
<el-form-item label="内容圆角">
<radius :value="form.shop_radius"></radius>
</el-form-item>
@ -110,6 +97,11 @@
</el-form-item>
</template>
</card-container>
<!-- 秒杀角标 -->
<template v-if="data.seckill_subscript_show == '1'">
<div class="divider-line"></div>
<subscript-styles :value="form.subscript_style" :data="data"></subscript-styles>
</template>
<!-- 秒杀按钮 -->
<template v-if="data.is_shop_show == '1'">
<div class="divider-line"></div>
@ -176,7 +168,7 @@
</div>
</template>
<script setup lang="ts">
import { cloneDeep } from 'lodash';
import { cloneDeep, isEmpty } from 'lodash';
const props = defineProps({
value: {
type: Object,
@ -195,7 +187,6 @@ const state = reactive({
});
// 如果需要解构，确保使用toRefs
const { form, data } = toRefs(state);
console.log(form);
let clone_form = cloneDeep(props.value);
const base_list = {
@ -234,10 +225,10 @@ const shop_background_img_change = (arry: uploadList[]) => {
form.value.shop_background_img = arry;
};
// 进度条选中的设置
const progress_color_picker_event = (arry: color_list[], type: number) => {
form.value.progress_actived_color_list = arry;
form.value.progress_actived_direction = type.toString();
};
// const progress_color_picker_event = (arry: color_list[], type: number) => {
// form.value.progress_actived_color_list = arry;
// form.value.progress_actived_direction = type.toString();
// };
</script>
<style lang="scss" scoped>
.topic {

14
src/config/const/article-list.ts
View File

@ -1,5 +1,6 @@
import defaultCommon from './index';
import defaultSetting from '../setting/index';
import subscriptStyle from './subscript-style';
interface ArticleList {
id: number | string;
@ -23,6 +24,11 @@ interface DefaultArticleList {
order_by_rule: string;
field_show: string[];
is_cover: string;
seckill_subscript_show: string;
subscript_type: string;
subscript_img_src: uploadList[];
subscript_icon_class: string;
subscript_text: string;
};
style: {
article_direction: string,
@ -52,6 +58,7 @@ interface DefaultArticleList {
interval_time: number; //滚动时间
is_roll: number;
rolling_fashion: string;
subscript_style: object;
common_style: object;
};
}
@ -70,6 +77,12 @@ const defaultArticleList: DefaultArticleList = {
order_by_rule: defaultSetting.order_by_rule,
field_show: ['0', '1'],
is_cover: defaultSetting.is_cover,
// 角标配置
seckill_subscript_show: '0',
subscript_type: 'text',
subscript_img_src: [],
subscript_icon_class: '',
subscript_text: '',
},
style: {
article_direction: '90deg',
@ -120,6 +133,7 @@ const defaultArticleList: DefaultArticleList = {
interval_time: 3, //滚动时间
is_roll: 1, // 是否轮播
rolling_fashion: 'translation', // 滚动方式 translation 平移 cut-screen 切屏
subscript_style: subscriptStyle,
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
},
};

14
src/config/const/article-tabs.ts
View File

@ -1,5 +1,6 @@
import defaultCommon from './index';
import defaultSetting from '../setting/index';
import subscriptStyle from './subscript-style';
interface ArticleList {
id: number | string;
data: object;
@ -30,6 +31,11 @@ interface DefaultArticleTabs {
tabs_list: articleTabsList[];
tabs_active_index: number;
field_show: string[];
seckill_subscript_show: string;
subscript_type: string;
subscript_img_src: uploadList[];
subscript_icon_class: string;
subscript_text: string;
};
style: {
tabs_one_theme: string;
@ -71,6 +77,7 @@ interface DefaultArticleTabs {
interval_time: number; //滚动时间
is_roll: number;
rolling_fashion: string;
subscript_style: object;
common_style: object;
};
}
@ -90,6 +97,12 @@ const defaultArticleTabs: DefaultArticleTabs = {
],
tabs_active_index: 0,
field_show: ['0', '1'],
// 角标配置
seckill_subscript_show: '0',
subscript_type: 'text',
subscript_img_src: [],
subscript_icon_class: '',
subscript_text: '',
},
style: {
tabs_one_theme: '0',
@ -162,6 +175,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
interval_time: 3, //滚动时间
is_roll: 1, // 是否轮播
rolling_fashion: 'translation', // 滚动方式 translation 平移 cut-screen 切屏
subscript_style: subscriptStyle,
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_left: 10, padding_right: 10, padding_bottom: 10 },
},
};

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

@ -1,5 +1,6 @@
import defaultCommon from './index';
import defaultSetting from '../setting/index';
import subscriptStyle from './subscript-style';
import { online_url } from '@/utils';
const new_url = await online_url('/static/app/common/').then((res) => res);
interface DefaultProductList {
@ -25,6 +26,11 @@ interface DefaultProductList {
shop_button_text: string;
shop_button_icon_class: string;
shop_button_effect: string;
seckill_subscript_show: string;
subscript_type: string;
subscript_img_src: uploadList[];
subscript_icon_class: string;
subscript_text: string;
};
style: {
shop_direction: string,
@ -64,6 +70,7 @@ interface DefaultProductList {
shop_button_text_color: string,
shop_icon_size: number;
shop_icon_color: string;
subscript_style: object,
common_style: object;
};
}
@ -104,6 +111,12 @@ const defaultProductList: DefaultProductList = {
shop_button_icon_class: 'cart',
// 点击购买按钮的操作处理
shop_button_effect: '0',
// 角标配置
seckill_subscript_show: '0',
subscript_type: 'text',
subscript_img_src: [],
subscript_icon_class: '',
subscript_text: '',
},
style: {
shop_direction: '90deg',
@ -180,6 +193,7 @@ const defaultProductList: DefaultProductList = {
// 购买按钮图标颜色和大小
shop_icon_size: 10,
shop_icon_color: "#fff",
subscript_style: subscriptStyle,
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
},
};

14
src/config/const/goods-tabs.ts
View File

@ -1,5 +1,6 @@
import defaultCommon from './index';
import defaultSetting from '../setting/index';
import subscriptStyle from './subscript-style';
import { online_url } from '@/utils';
const new_url = await online_url('/static/app/common/').then((res) => res);
interface articleTabsList {
@ -34,6 +35,11 @@ interface DefaultProductList {
shop_button_text: string;
shop_button_icon_class: string;
shop_button_effect: string;
seckill_subscript_show: string;
subscript_type: string;
subscript_img_src: uploadList[];
subscript_icon_class: string;
subscript_text: string;
};
style: {
tabs_one_theme: string;
@ -85,6 +91,7 @@ interface DefaultProductList {
shop_button_text_color: string;
shop_icon_size: number;
shop_icon_color: string;
subscript_style: object,
common_style: object;
};
}
@ -120,6 +127,12 @@ const defaultProductList: DefaultProductList = {
shop_button_icon_class: 'cart',
// 点击购买按钮的操作处理
shop_button_effect: '0',
// 角标配置
seckill_subscript_show: '0',
subscript_type: 'text',
subscript_img_src: [],
subscript_icon_class: '',
subscript_text: '秒杀',
},
style: {
// 选中样式风格
@ -221,6 +234,7 @@ const defaultProductList: DefaultProductList = {
// 购买图标的大小和颜色
shop_icon_size: 10,
shop_icon_color: '#fff',
subscript_style: subscriptStyle,
common_style: { ...defaultCommon, padding: 10, padding_top: 10, padding_bottom: 10, padding_left: 10, padding_right: 10 },
},
};

20
src/config/const/nav-group.ts
View File

@ -1,5 +1,6 @@
import { get_math } from '@/utils';
import defaultCommon from './index';
import subscriptStyle from './subscript-style';
interface nav_group {
id: string;
img: uploadList[];
@ -13,6 +14,11 @@ interface defaultSearch {
display_style: string;
row: number;
nav_content_list: nav_group[];
seckill_subscript_show: string;
subscript_type: string;
subscript_img_src: uploadList[];
subscript_icon_class: string;
subscript_text: string;
};
style: {
space: number;
@ -37,6 +43,7 @@ interface defaultSearch {
title_color: string;
title_size: number;
title_space: number;
subscript_style: object;
common_style: object;
};
}
@ -78,6 +85,12 @@ const defaultSearch: defaultSearch = {
link: {},
},
],
// 角标配置
seckill_subscript_show: '0',
subscript_type: 'text',
subscript_img_src: [],
subscript_icon_class: '',
subscript_text: '',
},
style: {
// 数据间距
@ -114,6 +127,13 @@ const defaultSearch: defaultSearch = {
title_color: '#000',
title_size: 12,
title_space: 10,
subscript_style: {
...subscriptStyle,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
},
common_style: {
...defaultCommon,
padding_top: 9,

15
src/config/const/seckill.ts
View File

@ -1,4 +1,5 @@
import defaultCommon from './index';
import subscriptStyle from './subscript-style';
import { online_url } from '@/utils';
const new_url = await online_url('/static/plugins/seckill/images/diy/').then((res) => res);
interface DefaultSeckill {
@ -20,6 +21,9 @@ interface DefaultSeckill {
shop_button_icon_class: string;
is_shop_show: string;
seckill_subscript_show: string;
subscript_type: string;
subscript_img_src: uploadList[];
subscript_icon_class: string;
subscript_text: string;
};
style: {
@ -66,9 +70,7 @@ interface DefaultSeckill {
shop_icon_size: number;
shop_icon_color: string;
original_price_color: string;
seckill_subscript_location: string;
seckill_subscript_text_color: string;
seckill_subscript_bg_color: string;
subscript_style: object,
progress_bg_color: string;
progress_actived_color_list: color_list[];
progress_actived_direction: string;
@ -108,6 +110,9 @@ const defaultSeckill: DefaultSeckill = {
shop_button_icon_class: 'cart',
// 秒杀角标配置
seckill_subscript_show: '1',
subscript_type: 'text',
subscript_img_src: [],
subscript_icon_class: '',
subscript_text: '秒杀',
},
style: {
@ -202,9 +207,7 @@ const defaultSeckill: DefaultSeckill = {
shop_icon_size: 10,
shop_icon_color: '#fff',
original_price_color: '#999',
seckill_subscript_location: 'top-left',
seckill_subscript_text_color: '#fff',
seckill_subscript_bg_color: '#FF7607',
subscript_style: subscriptStyle,
// 进度条设置，暂时隐藏
progress_bg_color: '#FFEDED',
progress_actived_color_list: [

33
src/config/const/subscript-style.ts Normal file
View File

@ -0,0 +1,33 @@
const subscriptStyle: object = {
seckill_subscript_location: 'top-left',
text_or_icon_color: '#fff',
text_or_icon_size: 12,
img_width: 20,
img_height: 20,
direction: '90deg',
color_list: [{ color: '#FF7607', color_percentage: undefined }],
background_img_style: '2',
background_img: [] as uploadList[],
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
radius: 4,
radius_top_left: 4,
radius_top_right: 4,
radius_bottom_left: 4,
radius_bottom_right: 4,
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 10,
padding_right: 10,
box_shadow_color: '',
box_shadow_x: 0,
box_shadow_y: 0,
box_shadow_blur: 0,
box_shadow_spread: 0,
};
export default subscriptStyle;