diff --git a/components/diy/diy.vue b/components/diy/diy.vue
index 192f324c..aca256ef 100644
--- a/components/diy/diy.vue
+++ b/components/diy/diy.vue
@@ -23,6 +23,7 @@
+
@@ -79,7 +80,7 @@
import componentDiyDataMagic from '@/components/diy/data-magic';
import componentDiyCustom from '@/components/diy/custom';
import componentDiyImgMagic from '@/components/diy/img-magic';
-
+ import componentDiySeckill from '@/components/diy/seckill.vue';
import componentGoodsList from '@/components/goods-list/goods-list';
import componentNoData from '@/components/no-data/no-data';
import componentBottomLine from '@/components/bottom-line/bottom-line';
@@ -124,6 +125,7 @@
componentDiyDataMagic,
componentDiyCustom,
componentDiyImgMagic,
+ componentDiySeckill,
componentGoodsList,
componentNoData,
componentBottomLine,
diff --git a/components/diy/seckill.vue b/components/diy/seckill.vue
index 283a7914..ff111014 100644
--- a/components/diy/seckill.vue
+++ b/components/diy/seckill.vue
@@ -4,155 +4,159 @@
-
- {{ form.topic_text }}
+
+ {{ form.title_text }}
- |
+ |
- {{ seckill_time.time_first_text }}
+ {{ seckill_time.time_first_text }}
- ![]()
-
+ ![]()
+
- {{ item.value }}
- :
+ {{ item.value }}
+ :
- {{ item.value }}
- :
+ {{ item.value }}
+ :
-
+
- 已结束
+ 已结束
-
+
{{ form.button_text }}
-
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ {{ form.subscript_text }}
+
+
-
-
-
-
- {{ form.subscript_text }}
-
-
-
-
-
-
- {{ item.title }}
-
-
+ {{ item.title }}
+
+
+
+
+
+
+ 秒杀价
+ {{ item.show_price_symbol }}{{ item.min_price }}
+ {{ item.show_price_unit }}
+
+
+ {{ item.show_original_price_symbol }}{{ item.min_original_price }}
+
+ {{ item.show_original_price_unit }}
+
+
- 已抢51%
- -->
-
-
-
-
- 秒杀价
- {{ item.show_price_symbol }}{{ item.min_price }}
- {{ item.show_price_unit }}
-
-
- {{ item.show_original_price_symbol }}{{ item.min_original_price }}
-
- {{ item.show_original_price_unit }}
+
+
+ {{ form.shop_button_text }}
-
+
+
+
+
-
-
- {{ form.shop_button_text }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ form.subscript_text }}
-
-
-
-
-
-
- {{ item.title }}
-
-
-
-
-
-
- 秒杀价
- {{ item.show_price_symbol }}{{ item.min_price }}
- {{ item.show_price_unit }}
-
-
- {{ item.show_original_price_symbol }}{{ item.min_original_price }}
-
- {{ item.show_original_price_unit }}
-
-
-
-
-
-
- {{ form.shop_button_text }}
+
+
+
+
+
+
+
-
+
+
+ {{ form.subscript_text }}
+
+
+
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
+ 秒杀价
+ {{ item.show_price_symbol }}{{ item.min_price }}
+ {{ item.show_price_unit }}
+
+
+ {{ item.show_original_price_symbol }}{{ item.min_original_price }}
+
+ {{ item.show_original_price_unit }}
+
+
+
+
+
+
+ {{ form.shop_button_text }}
+
+
+
+
+
-
+
@@ -179,6 +183,18 @@
return {
form: {},
new_style: {},
+ 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: [],
+ },
time_bg: '',
slide_active_color: '',
seckill_head_style: '',
@@ -191,6 +207,7 @@
seckill_time: {},
// 商品间距
content_outer_spacing: '',
+ content_outer_spacing_magin: '',
// 圆角设置
content_radius: '',
// 内边距设置
@@ -199,19 +216,26 @@
content_style: '',
// 不同风格下的样式
layout_type: '',
- //容器宽度
- multicolumn_columns_width: '',
- //容器高度
- multicolumn_columns_height: '',
+ layout_type_style: '',
//图片圆角设置
content_img_radius: '',
//角标设置
corner_marker: '',
+ // 定时器
+ intervalId: null,
+ // 数据存储
+ list: [],
+ // 一屏显示的数量
+ slides_per_group: '',
+ // 内容样式
+ title_style: '',
+ price_style: '',
+ button_style: '',
};
},
computed: {
icon_time_check() {
- return `${time_bg.value};line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`;
+ return `${this.time_bg};line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`;
},
},
created() {
@@ -221,24 +245,101 @@
});
this.init();
},
+ beforeDestroy() {
+ // 如果有定时任务执行，在离开的时候清空掉定时任务
+ if (!isEmpty(this.intervalId)) {
+ clearInterval(this.intervalId);
+ }
+ },
methods: {
+ isEmpty,
init() {
+ const data = this.form.data;
+ let new_list = [];
+ if (data && !isEmpty(data.current)) {
+ if (!isEmpty(data.current.goods)) {
+ new_list = data.current.goods;
+ } else {
+ new_list = Array(4).fill(this.default_list);
+ }
+ const { status, time_first_text } = data.current.time;
+ this.setData({
+ seckill_time: {
+ endTime: data.current.time_end,
+ startTime: data.current.time_start,
+ status: status,
+ time_first_text: time_first_text,
+ }
+ });
+ // 先执行一次倒计时，后续的等待倒计时执行
+ setTimeout(() => {
+ updateCountdown();
+ }, 0);
+ this.setData({
+ intervalId: setInterval(this.updateCountdown, 1000),
+ })
+ } else {
+ new_list = Array(4).fill(this.default_list);
+ }
this.setData({
time_bg: this.get_time_bg(),
slide_active_color: this.get_slide_active_color(),
seckill_head_style: this.get_seckill_head_style(),
- style: common_styles_computer(this.new_style.common_style),
+ style: common_styles_computer(this.new_style.common_style) + 'box-sizing: border-box;',
content_outer_spacing: this.new_style.content_outer_spacing,
+ content_outer_spacing_magin: this.new_style.content_outer_spacing * 2 + 'rpx',
content_radius: radius_computer(this.new_style.shop_radius),
- content_padding: padding_computer(this.new_style.shop_padding),
+ content_padding: padding_computer(this.new_style.shop_padding) + 'box-sizing: border-box;',
content_style: this.get_content_style(),
layout_type: this.get_layout_type(),
- multicolumn_columns_width: this.get_multicolumn_columns_width(),
- multicolumn_columns_height: this.new_style.content_outer_height * 2 + 'rpx',
+ layout_type_style: this.get_layout_type_style(),
content_img_radius: radius_computer(this.new_style.shop_img_radius),
corner_marker: this.get_corner_marker(),
+ slides_per_group: this.new_style.rolling_fashion == 'translation' ? this.form.carousel_col : 1,
+ // 内容样式设置
+ title_style: this.trends_config('title'),
+ price_style: this.trends_config('price'),
+ button_style: this.trends_config('button', 'gradient'),
+ list: this.get_shop_content_list(new_list),
});
},
+ get_shop_content_list(list) {
+ // 深拷贝一下，确保不会出现问题
+ const cloneList = JSON.parse(JSON.stringify(list));
+ if (this.new_style.rolling_fashion != 'translation') {
+ // 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
+ if (cloneList.length > 0) {
+ // 每页显示的数量
+ const num = this.form.carousel_col;
+ // 存储数据显示
+ let nav_list = [];
+ // 拆分的数量
+ const split_num = Math.ceil(cloneList.length / num);
+ for (let i = 0; i < split_num; i++) {
+ nav_list.push({
+ split_list: cloneList.slice(i * num, (i + 1) * num),
+ });
+ }
+ return nav_list;
+ } else {
+ // 否则的话，就返回全部的信息
+ return [
+ {
+ split_list: cloneList,
+ },
+ ];
+ }
+ } else {
+ // 存储数据显示
+ let nav_list = [];
+ cloneList.forEach(item => {
+ nav_list.push({
+ split_list: [ item ],
+ });
+ })
+ return nav_list;
+ }
+ },
get_time_bg() {
const { countdown_bg_color_list, countdown_direction } = this.new_style;
// 渐变
@@ -303,7 +404,7 @@
if (this.form.shop_style_type == '1') {
spacing = `margin-left: ${spacing_value * 2}rpx;`;
} else {
- spacing = content_padding.value;
+ spacing = padding_computer(this.new_style.shop_padding) + 'box-sizing: border-box;';
}
return `${spacing}`;
},
@@ -311,28 +412,31 @@
let class_type = '';
switch (this.form.shop_style_type) {
case '1':
- class_type = `flex-row bg-f oh multicolumn-columns`;
+ class_type = `flex-row bg-white oh`;
break;
case '2':
- class_type = `flex-col bg-f oh multicolumn-columns`;
+ class_type = `flex-col bg-white oh`;
break;
case '3':
- class_type = `flex-col bg-f oh roll-columns`;
+ class_type = `flex-col bg-white oh`;
break;
default:
break;
}
return class_type;
},
+ get_layout_type_style() {
+ return ['1', '2'].includes(this.form.shop_style_type) ? `height: 100%;width: ${ this.get_multicolumn_columns_width() };min-width: ${ this.get_multicolumn_columns_width() };` : `height: ${ this.new_style.content_outer_height * 2 }rpx;width: ${ this.get_multicolumn_columns_width() };min-width: ${ this.get_multicolumn_columns_width() };`;
+ },
// 根据传递的参数，从对象中取值
trends_config(key, type) {
- return style_config(this.new_style[`shop_${key}_typeface`], this.new_style[`shop_${key}_size`], this.new_style[`shop_${key}_color`], type);
+ return this.style_config(this.new_style[`shop_${key}_typeface`], this.new_style[`shop_${key}_size`], this.new_style[`shop_${key}_color`], type);
},
// 根据传递的值，显示不同的内容
style_config(typeface, size, color, type) {
let style = `font-weight:${typeface}; font-size: ${size * 2}rpx;`;
if (type == 'gradient') {
- style += button_gradient();
+ style += this.button_gradient();
} else {
style += `color: ${color};`;
}
@@ -343,8 +447,7 @@
return gradient_handle(this.new_style.shop_button_color, '180deg');
},
get_multicolumn_columns_width() {
- const { carousel_col } = toRefs(this.form);
- let model_number = carousel_col.value;
+ let model_number = this.form.carousel_col;
if (this.form.shop_style_type == '1') {
model_number = 1;
} else if (this.form.shop_style_type == '2') {
@@ -352,7 +455,7 @@
}
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = (this.new_style.content_outer_spacing * (model_number - 1)) / model_number;
- return `calc(${100 / model_number}% - ${gap * 2}rpx)`;
+ return `calc(${100 / model_number }% - ${ gap * 2 }rpx)`;
},
is_show(index) {
return this.form.is_show.includes(index);
@@ -372,6 +475,12 @@
}
return location;
},
+ // 跳转链接
+ url_event(link) {
+ if (!isEmpty(link)) {
+ app.globalData.url_open(link);
+ }
+ },
},
};
@@ -384,65 +493,63 @@
}
}
.identifying {
- font-size: 0.9rem;
+ font-size: 18rpx;
}
.seckill-head {
- padding: 1.5rem 1.3rem;
+ padding: 30rpx 26rpx;
width: 100%;
- height: 5.1rem;
- border-radius: 0.8rem 0.8rem 0 0;
+ height: 102rpx;
+ border-radius: 16rpx 16rpx 0 0;
+ box-sizing: border-box;
.seckill-title {
- height: 2.1rem;
+ width: auto;
+ height: 42rpx;
}
.time-config {
- padding: 0.1rem 0.5rem;
- line-height: 1.7rem;
- border-radius: 0.4rem;
+ padding: 2rpx 10rpx;
+ box-sizing: border-box;
+ line-height: 34rpx;
+ border-radius: 8rpx;
}
}
.seckill-head-icon {
- width: 1.6rem;
- height: 1.6rem;
+ width: 32rpx;
+ height: 32rpx;
}
.colon {
position: relative;
- top: -0.1rem;
- }
- .multicolumn-columns {
- height: 100%;
- width: v-bind(multicolumn_columns_width) !important;
- min-width: v-bind(multicolumn_columns_width) !important;
+ top: -2rpx;
}
.flex-img1 {
- min-height: 11rem;
- max-height: 12rem;
- width: 11rem;
+ min-height: 220rpx;
+ max-height: 240rpx;
+ width: 220rpx;
}
.flex-img2 {
width: 100%;
- height: 18rem;
+ height: 360rpx;
}
.flex-img3 {
background: #f4fcff;
width: 100%;
}
.slide-bottom {
- height: 1rem;
- border-radius: 0.5rem;
+ height: 20rpx;
+ border-radius: 10rpx;
background: red;
}
.slide-top {
position: absolute;
- height: 1rem;
+ height: 20rpx;
top: 0;
left: 0;
- border-radius: 0.5rem;
+ border-radius: 10rpx;
.slide-top-icon {
position: absolute;
- top: -0.3rem;
+ top: -6rpx;
right: 0;
- width: 1.6rem;
- height: 1.6rem;
+ width: 32rpx;
+ height: 32rpx;
display: flex;
align-items: center;
justify-content: center;
@@ -451,12 +558,45 @@
.original-price {
text-decoration-line: line-through;
}
- .roll-columns {
- height: v-bind(multicolumn_columns_height);
+ .plr-11 {
+ padding-left: 22rpx;
+ padding-right: 22rpx;
+ }
+ .ptb-3 {
+ padding-top: 6rpx;
+ padding-bottom: 6rpx;
+ }
+ .plr-6 {
+ padding-left: 12rpx;
+ padding-right: 12rpx;
+ }
+ .ptb-5 {
+ padding-top: 10rpx;
+ padding-bottom: 10rpx;
+ }
+ .ptb-15 {
+ padding-top: 30rpx;
+ padding-bottom: 30rpx;
+ }
+ .mlr-10 {
+ margin-left: 20rpx;
+ margin-right: 20rpx;
+ }
+ .pr-4 {
+ margin-right: 8rpx;
+ }
+ .size-11 {
+ font-size: 22rpx;
+ }
+ .gap-20 {
+ gap: 40rpx;
+ }
+ .gap-3 {
+ gap: 6rpx;
}
.corner-marker {
position: absolute;
- padding: 0.1rem 1rem;
+ padding: 2rpx 20rpx;
max-width: 100%;
}
\ No newline at end of file