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

迁移活动信息

master
于肖磊 2025-03-28 16:11:57 +08:00
parent da575ad0f8
commit 094242538b
7 changed files with 151 additions and 389 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

367
components/diy/activity.vue
View File

@ -1,72 +1,47 @@
<template>
<view class="oh" :style="style_container">
<view :style="style_img_container">
<view :class="outer_class" :style="onter_style">
<template v-if="!['2'].includes(theme)">
<view v-for="(item, index) in list" :key="index" class="pr oh" :style="layout_style">
<template v-if="theme == 0">
<view class="oh wh-auto ht-auto flex-col jc-sb gap-10" :style="layout_img_style">
<view class="flex-row gap-10 align-b">
<view v-if="is_show('ranking')" :class="'top-style one' + (index + 1)">{{ index + 1 }}</view>
<view class="flex-1" :style="title_style">{{ item.title }}</view>
</view>
<view v-if="is_show('reply_status') || is_show('time') || is_show('page_view')" class="flex-row gap-10 align-c" :style="is_show('ranking') ? 'margin-left: 54rpx;' : ''">
<view class="flex-row">
<view v-if="is_show('reply_status')" :style="item.is_reply == 0 ? not_replied_yet_style : returned_style">
<view :style="item.is_reply == 0 ? not_replied_yet_img_style : returned_img_style">
{{ item.is_reply == 0 ? '未回' : '已回'}}
</view>
<view class="oh flex-col" :style="'gap:' + new_style.activity_outer_spacing * 2+ 'px;'">
<view v-for="(activity_item, match_index) in list" :key="match_index">
<view class="oh" :style="style_activity_content_container">
<view class="oh flex-col" :style="style_activity_content_img_container + 'gap:' + new_style.shop_content_spacing * 2 + 'rpx;'">
<view class="oh" :style="style_activity_container">
<view :class="main_theme == '0' ? 'flex-row ' : 'oh flex-col '" :style="style_activity_img_container">
<template v-if="!isEmpty(activity_item) && (is_show('img') || (main_theme == '2' && is_show('title')))">
<view class="oh pr" :style="img_size">
<template v-if="!isEmpty(activity_item.new_cover)">
<imageEmpty :propImageSrc="activity_item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</template>
<template v-else>
<imageEmpty :propImageSrc="activity_item.cover" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</template>
<template v-if="main_theme == '2'">
<view class="wh-auto ht-auto pa top-0 left-0 z-i" :style="(form.is_img_mask == '1' ? 'background: rgb(0 0 0 / 35%);' : '') + content_img_radius"></view>
<view v-if="is_show('title')" class="main_theme-2-title z-i-deep" :style="title_style">{{ activity_item.title }}</view>
</template>
</view>
</view>
<span v-if="is_show('time')" :style="time_style">{{ item.add_time_date }}</span>
<span v-if="is_show('page_view')" :style="page_view_style">共有{{ item.access_count }}浏览</span>
</view>
</view>
</template>
<template v-else>
<view class="oh flex-col gap-10 jc-sb" :style="layout_img_style">
<view class="flex-row gap-10 align-b">
<view :style="title_style">{{ item.title }}</view>
</view>
<view v-if="is_show('reply_status') || is_show('time')" class="flex-col gap-10">
<span v-if="is_show('time')" :style="time_style">{{ item.add_time_date }}</span>
<view class="flex-row">
<view v-if="is_show('reply_status')" class="flex-row" :style="item.is_reply == 0 ? not_replied_yet_style : returned_style">
<view :style="item.is_reply == 0 ? not_replied_yet_img_style : returned_img_style">
{{ item.is_reply == 0 ? '未回' : '已回'}}
</template>
<view v-if="is_show('keywords') || is_show('desc') || (['0', '1'].includes(main_theme) && is_show('title'))" class="flex-1 flex-col gap-10" :style="content_style">
<view class="flex-col" :style="'gap:' + new_style.activity_main.desc_spacing + 'rpx;'">
<view v-if="['0', '1'].includes(main_theme) && is_show('title')" :style="title_style">{{ activity_item.title }}</view>
<view v-if="is_show('desc')" :style="desc_style">{{ activity_item.describe }}</view>
</view>
<view v-if="is_show('keywords')" class="flex-row gap-10 align-c flex-wrap">
<view v-for="(item, index) in activity_item.keywords_arr" :key="index" :style="keyword_style">
<view class="nowrap" :style="keyword_img_style">{{ item }}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<view v-if="!isEmpty(activity_item.goods_list)" class="oh" :style="shop_container">
<view class="oh" :style="shop_img_container">
<componentGoodsList :propValue="propValue" :propNewList="activity_item.goods_list" :propIsUseAuto="false" :propIsCommonStyle="false"></componentGoodsList>
</view>
</view>
</view>
</view>
</template>
<template v-else>
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :next-margin="new_style.rolling_fashion == 'translation' ? '-' + content_outer_spacing_magin : '0rpx'" :display-multiple-items="slides_per_group" :style="{ width: '100%', height: new_style.content_outer_height * new_scale + 'px' }">
<swiper-item v-for="(item1, index1) in ask_content_list" :key="index1">
<view class="flex-row wh-auto ht-auto" :style="onter_style">
<view v-for="(item, index) in item1.split_list" :key="index" class="pr oh" :style="layout_style" :data-value="item.url" @tap.stop="url_event">
<view class="oh ht-auto flex-col gap-10 jc-sb" :style="layout_img_style">
<view class="flex-row gap-10 align-b">
<view :style="title_style">{{ item.title }}</view>
</view>
<view v-if="is_show('reply_status') || is_show('time')" class="flex-col gap-10">
<span v-if="is_show('time')" :style="time_style">{{ item.add_time_date }}</span>
<view class="flex-row">
<view v-if="is_show('reply_status')" class="flex-row" :style="item.is_reply == 0 ? not_replied_yet_style : returned_style">
<view :style="item.is_reply == 0 ? not_replied_yet_img_style : returned_img_style">
{{ item.is_reply == 0 ? '未回' : '已回'}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</template>
</view>
</view>
</view>
</view>
@ -74,17 +49,15 @@
<script>
const app = getApp();
import { isEmpty, common_styles_computer, common_img_computer, gradient_handle, padding_computer, radius_computer, background_computer, border_computer, box_shadow_computer, gradient_computer, margin_computer } from '@/common/js/common/common.js';
import { isEmpty, common_styles_computer, common_img_computer, padding_computer, radius_computer, background_computer, border_computer, gradient_computer, margin_computer } from '@/common/js/common/common.js';
import imageEmpty from '@/components/diy/modules/image-empty.vue';
import subscriptIndex from '@/components/diy/modules/subscript/index.vue';
import imgOrIconOrText from '@/components/diy/modules/img-or-icon-or-text.vue';
import componentGoodsList from '@/components/diy/goods-list';
var system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth);
export default {
components: {
imageEmpty,
imgOrIconOrText,
subscriptIndex
componentGoodsList
},
props: {
propValue: {
@ -110,41 +83,31 @@
return {
form: {},
new_style: {},
propIsCartParaCurve: false,
list: [],
content_radius: '', // 圆角设置
content_img_radius: '', // 图片圆角设置
content_padding: '', // 内边距设置
theme: '', // 选择的风格
main_theme: '', // 选择的风格
content_outer_spacing: '', // 商品间距
content_outer_spacing_magin: '', // 商品间距
// 最外层不同风格下的显示
outer_class: '',
onter_style: '',
// 不同风格下的样式
layout_style: '',
layout_img_style: '',
content_style: '', // 内容区域的样式
show_content: false, // 显示除标题外的其他区域
text_line: '', // 超过多少行隐藏
// 商品内容区域样式
shop_container: '',
shop_img_container: '',
// 活动样式
style_activity_container: '',
style_activity_img_container: '',
//活动内容样式
style_activity_content_container: '',
style_activity_content_img_container: '',
style_container: '', // 公共样式
style_img_container: '',
ask_content_list: [],
slides_per_group: 1,
border_style: '',
keyword_style: '',
keyword_img_style: '',
// 内容样式
title_style: '',
time_style: '',
page_view_style: '',
desc_style: '',
// 图片大小
img_size: '',
shop_label_style: '',
new_scale: 1,
// 已回未回信息
not_replied_yet_style: '',
not_replied_yet_img_style: '',
returned_style: '',
returned_img_style: '',
};
},
watch: {
@ -176,24 +139,20 @@
// 筛选商品并且筛选商品数组不为空
new_list = new_form.data_auto_list;
}
// 最外层不同风格下的显示
const flex = ['0', '2'].includes(new_form.theme) ? 'flex-col ' : 'container ';
const wrap = new_form.theme == '2' ? '' : 'flex-wrap ';
// 默认数据
const ask_style_list = [
{ name: '单列展示', value: '0', width: 50, height: 50 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '左右滑动展示', value: '3', width:0, height: 0 },
const style_list = [
{ name: '左图右文', value: '0', width: 143, height: 143 },
{ name: '上图下文', value: '1', width: 0, height: 126 },
{ name: '大图显示', value: '2', width: 0, height: 126 },
];
const scale = sys_width / 390;
let img_style = ``;
if (['0', '1'].includes(new_form.theme)) {
if (['0'].includes(new_form.main_theme)) {
// 图片宽度
if (typeof new_style.content_img_width == 'number') {
img_style += `width: ${ new_style.content_img_width * scale }px;`;
if (typeof new_style.activity_main.img_width == 'number') {
img_style += `width: ${ new_style.activity_main.img_width * scale }px;`;
} else {
const list = ask_style_list.filter(item => item.value == new_form.theme);
const list = style_list.filter(item => item.value == new_form.main_theme);
if (list.length > 0) {
img_style += `width: ${ list[0].width * scale }px;`;
} else {
@ -203,170 +162,61 @@
} else {
img_style += 'width: 100%;';
}
if (!['3'].includes(new_form.theme)) {
// 图片宽度
if (typeof new_style.content_img_height == 'number') {
img_style += `height: ${ new_style.content_img_height * scale }px;`;
} else {
const list = ask_style_list.filter(item => item.value == new_form.theme);
if (list.length > 0) {
img_style += `height: ${ list[0].height * scale }px;`;
} else {
img_style += 'height: auto;';
}
}
// 图片高度
if (typeof new_style.activity_main.img_height == 'number') {
img_style += `height: ${ new_style.activity_main.img_height * scale }px;`;
} else {
img_style += 'height: 100%;';
const list = style_list.filter(item => item.value == new_form.main_theme);
if (list.length > 0) {
img_style += `height: ${ list[0].height * scale }px;`;
} else {
img_style += 'height: auto;';
}
}
this.setData({
form: new_form,
new_style: new_style,
outer_class: flex + wrap + 'oh',
onter_style: ['0', '2'].includes(new_form.theme) ? `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};` : `column-gap: ${ new_style.content_outer_spacing * 2 + 'rpx' }`,
content_outer_spacing_magin: new_style.content_outer_spacing * 2 + 'rpx',
list: new_list,
new_scale: scale,
content_radius: radius_computer(new_style.ask_radius), // 圆角设置
content_img_radius: radius_computer(new_style.ask_img_radius), // 图片圆角设置
content_padding: padding_computer(new_style.ask_padding) + 'box-sizing: border-box;', // 内边距设置
theme: new_form.theme, // 选择的风格
content_img_radius: radius_computer(new_style.activity_main.img_radius), // 图片圆角设置
main_theme: new_form.main_theme, // 选择的风格
title_style: this.trends_config('title', new_style) + 'word-break: break-all;',
time_style: this.trends_config('time', new_style),
page_view_style: this.trends_config('page_view', new_style),
ask_content_list: this.get_ask_content_list(new_list, new_form, new_style),
not_replied_yet_style: this.button_style(new_style.not_replied_yet_style),
not_replied_yet_img_style: this.button_img_style(new_style.not_replied_yet_style),
returned_style: this.button_style(new_style.returned_style),
returned_img_style: this.button_img_style(new_style.returned_style),
desc_style: this.trends_config('time', new_style),
img_size: img_style,
shop_label_style: this.get_shop_label_style(new_style),
border_style: this.get_border_style(new_style),
layout_style: this.get_layout_style(new_form, new_style),
layout_img_style: this.get_layout_img_style(new_form, new_style),
content_style: this.get_content_style(new_form, new_style),
slides_per_group: new_style.rolling_fashion == 'translation' ? new_form.carousel_col : 1,
style_container: this.propIsCommonStyle ? common_styles_computer(new_style.common_style) : '', // 公共样式
style_img_container: this.propIsCommonStyle ? common_img_computer(new_style.common_style, this.propIndex) : '', // 图片样式
keyword_style: this.get_keyword_style(new_style.activity_main?.keywords_style || {}),
keyword_img_style: this.get_keyword_img_style(new_style.activity_main?.keywords_style || {}),
content_style: this.get_content_style(new_style),
shop_container: common_styles_computer(new_style.shop_content),
shop_img_container: common_img_computer(new_style.shop_content),
style_activity_container: common_styles_computer(new_style.activity_main),
style_activity_img_container: common_img_computer(new_style.activity_main),
style_activity_content_container: common_styles_computer(new_style.activity_content),
style_activity_content_img_container: common_img_computer(new_style.activity_content),
style_container: common_styles_computer(new_style.common_style), // 公共样式
style_img_container: common_img_computer(new_style.common_style, this.propIndex), // 图片样式
});
}
},
button_style(style){
return `${ gradient_computer(style)}; ${ border_computer(style) } ${ radius_computer(style.font_radius)}`;
},
button_img_style(style){
return `${ padding_computer(style.font_padding) } ${ background_computer(style) }font-weight:${style.font_typeface}; font-size: ${style.font_size}px;color: ${style.font_color};`;
},
// 标签显示
get_shop_label_style(new_style) {
const { shop_lable_color, shop_lable_size, shop_lable_padding, shop_lable_radius, shop_lable_color_list, shop_lable_direction, shop_lable_border_color, shop_lable_border_size } = new_style;
return `color: ${ shop_lable_color };font-size: ${ shop_lable_size }px;${ padding_computer(shop_lable_padding) };${ radius_computer(shop_lable_radius) };${ gradient_handle(shop_lable_color_list, shop_lable_direction) };border: ${ shop_lable_border_size }px solid ${ shop_lable_border_color };`
},
// 根据传递的参数，从对象中取值
trends_config(key, new_style) {
return this.style_config(new_style[`ask_${key}_typeface`], new_style[`ask_${key}_size`], new_style[`ask_${key}_color`]);
return this.style_config(new_style.activity_main[`${key}_typeface`], new_style.activity_main[`${key}_size`], new_style.activity_main[`${key}_color`]);
},
// 根据传递的值，显示不同的内容
style_config(typeface, size, color) {
return `font-weight:${typeface}; font-size: ${size}px;color: ${color};`;
},
get_ask_content_list(list, form, new_style) {
// 深拷贝一下，确保不会出现问题
const cloneList = JSON.parse(JSON.stringify(list));
if (new_style.rolling_fashion != 'translation') {
// 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
if (cloneList.length > 0) {
// 每页显示的数量
const num = 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_keyword_style(style) {
return `${ gradient_computer(style)}; ${ border_computer(style) } ${ radius_computer(style.font_radius)}`;
},
get_border_style(new_style) {
const { content_border_margin, content_border_size, content_border_is_show, content_border_color, content_border_style } = new_style;
let border = ``;
if (content_border_is_show == '1') {
border += `${ margin_computer(content_border_margin) };border-width: ${content_border_size}px 0px 0px 0px;border-style: ${ content_border_style };border-color: ${content_border_color};`
}
return border;
},
// 容器样式
get_layout_style(form, new_style) {
const { ask_margin, ask_radius, ask_color_list, ask_direction } = new_style;
const radius = radius_computer(ask_radius);
const margin = form.theme == '1' ? {
...ask_margin,
margin_bottom: (new_style.ask_margin?.margin_bottom || 0) + new_style.content_outer_spacing,
} : ask_margin;
// 计算每个容器的大小
let size_style = ``;
const ask_left_right_width = ask_margin.margin_left + ask_margin.margin_right;
if (form.theme == '2') {
// 如果不是平移的时候执行
if (new_style.rolling_fashion != 'translation') {
size_style = `width: ${this.get_multicolumn_columns_width(new_style, form)};min-width: ${this.get_multicolumn_columns_width(new_style, form)};height: ${new_style.content_outer_height * (sys_width / 390) + 'px'};`;
} else {
size_style = `margin-right: ${ (new_style.content_outer_spacing * 2) + (ask_margin.margin_right * 2) }rpx;width: 100%;height: 100%;`;
}
} else if (form.theme == '0') {
size_style = `width: calc(100% - ${ ask_left_right_width * 2 }rpx);`;
}
const gradient = gradient_handle(ask_color_list, ask_direction) + margin_computer(margin) + border_computer(new_style) + box_shadow_computer(new_style);
return `${radius} ${ gradient } ${ size_style }`;
},
get_multicolumn_columns_width(new_style, form) {
const { carousel_col } = form;
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = (new_style.content_outer_spacing * (carousel_col - 1)) / carousel_col;
return `calc(${100 / carousel_col}% - ${gap * 2}rpx)`;
get_keyword_img_style(style){
return `${ padding_computer(style.font_padding) } ${ background_computer(style) }font-weight:${style.font_typeface}; font-size: ${style.font_size}px;line-height: 1.5;color: ${style.font_color};`;
},
is_show(val) {
return this.form.is_show.includes(val);
return this.form.is_main_show.includes(val);
},
// 容器图片样式
get_layout_img_style(form, new_style) {
const { ask_padding, ask_background_img_style, ask_background_img } = new_style;
const padding = padding_computer(ask_padding);
const data = {
background_img_style: ask_background_img_style,
background_img: ask_background_img,
}
return padding + background_computer(data);
},
get_content_style(form, new_style) {
const spacing_value = new_style.content_spacing;
let spacing = '';
if (['0'].includes(form.theme)) {
spacing = `margin-left: ${spacing_value}px;`;
} else {
spacing = padding_computer(new_style.ask_padding);
}
return `${spacing}`;
get_content_style(new_style) {
return padding_computer(new_style.activity_main.activity_main_right_content);
},
url_event(e) {
app.globalData.url_event(e);
@ -376,37 +226,14 @@
</script>
<style scoped lang="scss">
.one1 {
color: #fff !important;
background: #FF6565 !important;
}
.one2 {
color: #fff !important;
background: #FF9F2F !important;
}
.one3 {
color: #fff !important;
background: #FFC889 !important;
}
.top-style {
color: #EBAB2A;
background: #fff;
padding: 0 10rpx;
width: 34rpx;
height: 34rpx;
font-weight: 400;
font-size: 24rpx;
line-height: 34rpx;
text-align: right;
font-style: normal;
border-radius: 8rpx;
text-align: center;
box-sizing: border-box;
}
.container {
column-count: 2;
}
.gap-10 {
gap: 20rpx;
}
.main_theme-2-title {
position: absolute;
top: 50%;
left: 50%;
// margin-left: 1.7rem;
transform: translate(-50%, -50%);
}
</style>

48
components/diy/ask.vue
View File

@ -1,9 +1,9 @@
<template>
<view class="oh" :style="style_container">
<view :style="style_img_container">
<view :class="outer_class" :style="onter_style">
<view :class="outer_class" :style="outer_style">
<template v-if="!['2'].includes(theme)">
<view v-for="(item, index) in list" :key="index" class="pr oh" :style="layout_style">
<view v-for="(item, index) in list" :key="index" class="pr oh" :style="layout_style" :data-value="item.url" @tap.stop="url_event">
<template v-if="theme == 0">
<view class="oh wh-auto ht-auto flex-col jc-sb gap-10" :style="layout_img_style">
<view class="flex-row gap-10 align-b">
@ -45,7 +45,7 @@
<template v-else>
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :next-margin="new_style.rolling_fashion == 'translation' ? '-' + content_outer_spacing_magin : '0rpx'" :display-multiple-items="slides_per_group" :style="{ width: '100%', height: new_style.content_outer_height * new_scale + 'px' }">
<swiper-item v-for="(item1, index1) in ask_content_list" :key="index1">
<view class="flex-row wh-auto ht-auto" :style="onter_style">
<view class="flex-row wh-auto ht-auto" :style="outer_style">
<view v-for="(item, index) in item1.split_list" :key="index" class="pr oh" :style="layout_style" :data-value="item.url" @tap.stop="url_event">
<view class="oh ht-auto flex-col gap-10 jc-sb" :style="layout_img_style">
<view class="flex-row gap-10 align-b">
@ -110,35 +110,26 @@
return {
form: {},
new_style: {},
propIsCartParaCurve: false,
list: [],
content_radius: '', // 圆角设置
content_img_radius: '', // 图片圆角设置
content_padding: '', // 内边距设置
theme: '', // 选择的风格
content_outer_spacing: '', // 商品间距
content_outer_spacing_magin: '', // 商品间距
// 最外层不同风格下的显示
outer_class: '',
onter_style: '',
outer_style: '',
// 不同风格下的样式
layout_style: '',
layout_img_style: '',
content_style: '', // 内容区域的样式
show_content: false, // 显示除标题外的其他区域
text_line: '', // 超过多少行隐藏
style_container: '', // 公共样式
style_img_container: '',
ask_content_list: [],
slides_per_group: 1,
border_style: '',
// 内容样式
title_style: '',
time_style: '',
page_view_style: '',
// 图片大小
img_size: '',
shop_label_style: '',
new_scale: 1,
// 已回未回信息
not_replied_yet_style: '',
@ -222,13 +213,10 @@
form: new_form,
new_style: new_style,
outer_class: flex + wrap + 'oh',
onter_style: ['0', '2'].includes(new_form.theme) ? `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};` : `column-gap: ${ new_style.content_outer_spacing * 2 + 'rpx' }`,
outer_style: ['0', '2'].includes(new_form.theme) ? `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};` : `column-gap: ${ new_style.content_outer_spacing * 2 + 'rpx' }`,
content_outer_spacing_magin: new_style.content_outer_spacing * 2 + 'rpx',
list: new_list,
new_scale: scale,
content_radius: radius_computer(new_style.ask_radius), // 圆角设置
content_img_radius: radius_computer(new_style.ask_img_radius), // 图片圆角设置
content_padding: padding_computer(new_style.ask_padding) + 'box-sizing: border-box;', // 内边距设置
theme: new_form.theme, // 选择的风格
title_style: this.trends_config('title', new_style) + 'word-break: break-all;',
time_style: this.trends_config('time', new_style),
@ -239,11 +227,8 @@
returned_style: this.button_style(new_style.returned_style),
returned_img_style: this.button_img_style(new_style.returned_style),
img_size: img_style,
shop_label_style: this.get_shop_label_style(new_style),
border_style: this.get_border_style(new_style),
layout_style: this.get_layout_style(new_form, new_style),
layout_img_style: this.get_layout_img_style(new_form, new_style),
content_style: this.get_content_style(new_form, new_style),
slides_per_group: new_style.rolling_fashion == 'translation' ? new_form.carousel_col : 1,
style_container: this.propIsCommonStyle ? common_styles_computer(new_style.common_style) : '', // 公共样式
style_img_container: this.propIsCommonStyle ? common_img_computer(new_style.common_style, this.propIndex) : '', // 图片样式
@ -256,11 +241,6 @@
button_img_style(style){
return `${ padding_computer(style.font_padding) } ${ background_computer(style) }font-weight:${style.font_typeface}; font-size: ${style.font_size}px;color: ${style.font_color};`;
},
// 标签显示
get_shop_label_style(new_style) {
const { shop_lable_color, shop_lable_size, shop_lable_padding, shop_lable_radius, shop_lable_color_list, shop_lable_direction, shop_lable_border_color, shop_lable_border_size } = new_style;
return `color: ${ shop_lable_color };font-size: ${ shop_lable_size }px;${ padding_computer(shop_lable_padding) };${ radius_computer(shop_lable_radius) };${ gradient_handle(shop_lable_color_list, shop_lable_direction) };border: ${ shop_lable_border_size }px solid ${ shop_lable_border_color };`
},
// 根据传递的参数，从对象中取值
trends_config(key, new_style) {
return this.style_config(new_style[`ask_${key}_typeface`], new_style[`ask_${key}_size`], new_style[`ask_${key}_color`]);
@ -306,14 +286,6 @@
return nav_list;
}
},
get_border_style(new_style) {
const { content_border_margin, content_border_size, content_border_is_show, content_border_color, content_border_style } = new_style;
let border = ``;
if (content_border_is_show == '1') {
border += `${ margin_computer(content_border_margin) };border-width: ${content_border_size}px 0px 0px 0px;border-style: ${ content_border_style };border-color: ${content_border_color};`
}
return border;
},
// 容器样式
get_layout_style(form, new_style) {
const { ask_margin, ask_radius, ask_color_list, ask_direction } = new_style;
@ -358,16 +330,6 @@
}
return padding + background_computer(data);
},
get_content_style(form, new_style) {
const spacing_value = new_style.content_spacing;
let spacing = '';
if (['0'].includes(form.theme)) {
spacing = `margin-left: ${spacing_value}px;`;
} else {
spacing = padding_computer(new_style.ask_padding);
}
return `${spacing}`;
},
url_event(e) {
app.globalData.url_event(e);
},

26
components/diy/binding.vue
View File

@ -28,7 +28,7 @@
<view :style="data_price_style">{{ match_item.estimate_price }}</view>
</view>
<view class="flex-row align-c gap-3">
<img-or-icon-or-text :propValue="propValue" propType="data_discounts" />
<imgOrIconOrText :propValue="propValue" propType="data_discounts" />
<view class="flex-row">
<view :style="data_save_price_symbol_style">￥</view>
<view :style="data_save_price_style">{{ match_item.estimate_discount_price || 0 }}</view>
@ -38,7 +38,7 @@
</view>
</view>
<view class="flex-row align-c jc-e">
<img-or-icon-or-text :value="propValue" type="details" />
<imgOrIconOrText :value="propValue" type="details" />
</view>
</view>
</view>
@ -53,7 +53,7 @@
<view :style="data_price_style">{{ match_item.estimate_price }}</view>
</view>
<view class="flex-row align-c gap-3">
<img-or-icon-or-text :propValue="propValue" propType="data_discounts" />
<imgOrIconOrText :propValue="propValue" propType="data_discounts" />
<view class="flex-row">
<view :style="data_save_price_symbol_style">￥</view>
<view :style="data_save_price_style">{{ match_item.estimate_discount_price || 0 }}</view>
@ -61,14 +61,14 @@
</view>
</view>
<view class="flex-row align-c jc-e">
<img-or-icon-or-text :value="propValue" type="details" />
<imgOrIconOrText :value="propValue" type="details" />
</view>
</view>
</view>
<!-- 商品信息区域 -->
<view :style="goods_content_style" :class="match_item.is_home_show_goods ? 'show-goods' : 'hidden-goods'">
<view :style="goods_content_img_style">
<view :class="outer_class" :style="onter_style">
<view :class="outer_class" :style="outer_style">
<template v-if="!['3'].includes(theme)">
<view v-for="(item, index) in match_item.goods" :key="index" class="pr oh" :style="layout_style" :data-value="item.goods_url" @tap.stop="url_event">
<view :class="['oh wh-auto ht-auto', ['0' , '2'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
@ -88,7 +88,7 @@
<text v-if="is_show('price_unit')" :style="goods_price_unit_style">{{ item.show_price_unit }}</text>
</view>
<view v-if="is_show('save_price')" class="flex-row align-c gap-3">
<img-or-icon-or-text :propValue="propValue" propType="goods_discounts" />
<imgOrIconOrText :propValue="propValue" propType="goods_discounts" />
<view class="flex-1 text-line-1 flex-row">
<text :style="goods_save_price_symbol_style">{{ item.show_price_symbol }}</text>
<text :style="goods_save_price_style">{{ item.discount_price || 0 }}</text>
@ -102,7 +102,7 @@
<template v-else>
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :next-margin="new_style.rolling_fashion == 'translation' ? '-' + content_outer_spacing_magin : '0rpx'" :display-multiple-items="slides_per_group" :style="{ width: '100%', height: new_style.content_outer_height * new_scale + 'px' }">
<swiper-item v-for="(item1, index1) in match_item.content_goods" :key="index1">
<view class="flex-row wh-auto ht-auto" :style="onter_style">
<view class="flex-row wh-auto ht-auto" :style="outer_style">
<view v-for="(item, index) in item1.split_list" :key="index" class="pr oh" :style="layout_style" :data-value="item.goods_url" @tap.stop="url_event">
<view :class="['oh wh-auto ht-auto', ['0', '2'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item) && is_show('goods_img')">
@ -121,7 +121,7 @@
<text v-if="is_show('price_unit')" :style="goods_price_unit_style">{{ item.show_price_unit }}</text>
</view>
<view v-if="is_show('save_price')" class="flex-row align-c gap-3">
<img-or-icon-or-text :propValue="propValue" propType="goods_discounts" />
<imgOrIconOrText :propValue="propValue" propType="goods_discounts" />
<view class="flex-1 text-line-1">
<text :style="goods_save_price_symbol_style">{{ item.show_price_symbol }}</text>
<text :style="goods_save_price_style">{{ item.discount_price || 0 }}</text>
@ -187,23 +187,18 @@
return {
form: {},
new_style: {},
propIsCartParaCurve: false,
list: [],
content_radius: '', // 圆角设置
content_img_radius: '', // 图片圆角设置
content_padding: '', // 内边距设置
host_graph_theme: '',//主图风格
theme: '', // 选择的风格
content_outer_spacing: '', // 商品间距
content_outer_spacing_magin: '', // 商品间距
// 最外层不同风格下的显示
outer_class: '',
onter_style: '',
outer_style: '',
// 不同主图风格下的内容
match_layout_style: '',
match_layout_img_style: '',
data_content_img_radius: '',
data_content_padding: '',
data_content_style: '',
// 不同风格下的样式
layout_style: '',
@ -310,7 +305,7 @@
form: new_form,
new_style: new_style,
outer_class: flex + wrap + 'oh',
onter_style: `gap: ${new_style.goods_content_outer_spacing * 2 + 'rpx'};`,
outer_style: `gap: ${new_style.goods_content_outer_spacing * 2 + 'rpx'};`,
content_outer_spacing_magin: new_style.goods_content_outer_spacing * 2 + 'rpx',
list: data_handle_list,
new_scale: scale,
@ -319,7 +314,6 @@
match_layout_style: this.get_match_layout_style(new_style),
match_layout_img_style: this.get_match_layout_img_style(new_form, new_style),
data_content_img_radius: radius_computer(new_style.data_img_radius),
data_content_padding: padding_computer(new_style.data_padding),
data_content_style: this.get_data_content_style(new_form, new_style),
data_img_style: data_img_style,
data_title_style: this.trends_config('title', 'data', new_style),

4
components/diy/diy.vue
View File

@ -44,7 +44,7 @@
<componentDiyBinding v-else-if="item.key == 'binding'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyBinding>
<componentDiyAsk v-else-if="item.key == 'ask'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyAsk>
<componentDiyAskTabs v-else-if="item.key == 'ask-tabs'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data" :propTop="get_diy_prop_top(item.com_data)" :propScrollTop="scroll_top" :propCustomNavHeight="get_diy_custom_nav_height(item.com_data)" :propIsTabsUseSafeDistance="getPropIsTabsUseSafeDistance"></componentDiyAskTabs>
<componentDiyAsk v-else-if="item.key == 'ask'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyAsk>
<componentDiyActivity v-else-if="item.key == 'activity'" :propIndex="get_prop_index(item)" :propKey="item.id + index" :propValue="item.com_data"></componentDiyActivity>
<!-- 工具组件 -->
<componentDiyFloatWindow v-else-if="item.key == 'float-window'" :propKey="item.id + index" :propValue="item.com_data"></componentDiyFloatWindow>
<componentDiyTitle v-else-if="item.key == 'title'" :propKey="item.id + index" :propIndex="get_prop_index(item)" :propValue="item.com_data"></componentDiyTitle>
@ -136,6 +136,7 @@
import componentDiyBinding from '@/components/diy/binding';
import componentDiyAsk from '@/components/diy/ask';
import componentDiyAskTabs from '@/components/diy/ask-tabs';
import componentDiyActivity from '@/components/diy/activity';
import componentDiyTabsCarousel from '@/components/diy/tabs-carousel';
import componentDataTabs from '@/components/diy/data-tabs';
import componentGoodsList from '@/components/goods-list/goods-list';
@ -200,6 +201,7 @@
componentDiyBinding,
componentDiyAsk,
componentDiyAskTabs,
componentDiyActivity,
componentDiyTabsCarousel,
componentDataTabs,
componentGoodsList,

46
components/diy/goods-list.vue
View File

@ -1,7 +1,7 @@
<template>
<view v-if="!isEmpty(list)" class="oh" :style="style_container" @tap.stop="onTap">
<view class="oh" :style="style_img_container">
<view :class="outer_class" :style="onter_style">
<view :class="outer_class" :style="outer_style">
<block v-if="!['5'].includes(theme)">
<view v-for="(item, index) in list" :key="index" class="pr oh" :style="layout_style" :data-index="index" :data-value="item.goods_url" @tap.stop="url_event">
<view :class="layout_type" :style="layout_img_style">
@ -113,7 +113,7 @@
<block v-else>
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :next-margin="new_style.rolling_fashion == 'translation' ? '-' + content_outer_spacing_magin : '0rpx'" :display-multiple-items="slides_per_group" :style="{ width: '100%', height: new_style.content_outer_height * new_scale + 'px' }">
<swiper-item v-for="(item1, index1) in shop_content_list" :key="index1">
<view class="flex-row wh-auto ht-auto" :style="onter_style">
<view class="flex-row wh-auto ht-auto" :style="outer_style">
<view v-for="(item, index) in item1.split_list" :key="index" class="pr oh" :style="layout_style" :data-index="index1" :data-split-index="index" :data-value="item.goods_url" @tap.stop="url_event">
<view :class="layout_type" :style="layout_img_style">
<block v-if="!isEmpty(item)">
@ -215,22 +215,27 @@
type: Number,
default: 0,
},
propNewList: {
type: Array,
default: []
},
propIsUseAuto: {
type: Boolean,
default: true,
}
},
data() {
return {
form: {},
new_style: {},
propIsCartParaCurve: false,
list: [],
content_radius: '', // 圆角设置
content_img_radius: '', // 图片圆角设置
content_padding: '', // 内边距设置
theme: '', // 选择的风格
content_outer_spacing: '', // 商品间距
content_outer_spacing_magin: '', // 商品间距
// 最外层不同风格下的显示
outer_class: '',
onter_style: '',
outer_style: '',
// 不同风格下的样式
layout_type: '',
layout_style: '',
@ -277,16 +282,21 @@
const new_style = this.propValue.style || null;
if (new_form != null && new_style != null) {
let new_list = [];
// 指定商品并且指定商品数组不为空
if (!isEmpty(new_form.data_list) && new_form.data_type == '0') {
new_list = new_form.data_list.map((item) => ({
...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
new_cover: item.new_cover,
}));
} else if (!isEmpty(new_form.data_auto_list) && new_form.data_type == '1') {
// 筛选商品并且筛选商品数组不为空
new_list = new_form.data_auto_list;
// 判断是否是活动传递过来的，是使用自动数据，还是使用传递过来的数据
if (this.propIsUseAuto) {
// 指定商品并且指定商品数组不为空
if (!isEmpty(new_form.data_list) && new_form.data_type == '0') {
new_list = new_form.data_list.map((item) => ({
...item.data,
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
new_cover: item.new_cover,
}));
} else if (!isEmpty(new_form.data_auto_list) && new_form.data_type == '1') {
// 筛选商品并且筛选商品数组不为空
new_list = new_form.data_auto_list;
}
} else {
new_list = this.propNewList;
}
// 最外层不同风格下的显示
const flex = ['0', '2', '6'].includes(new_form.theme) ? 'flex-col ' : 'flex-row ';
@ -337,13 +347,11 @@
outer_class: flex + wrap + background + 'oh',
list: new_list,
new_scale: scale,
content_radius: radius_computer(new_style.shop_radius), // 圆角设置
content_img_radius: radius_computer(new_style.shop_img_radius), // 图片圆角设置
content_padding: padding_computer(new_style.shop_padding) + 'box-sizing: border-box;', // 内边距设置
theme: new_form.theme, // 选择的风格
content_outer_spacing: new_style.content_outer_spacing, // 商品间距
content_outer_spacing_magin: new_style.content_outer_spacing * 2 + 'rpx',
onter_style: new_form.theme == '6' ? radius_computer(new_style.shop_radius) : `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};`,
outer_style: new_form.theme == '6' ? radius_computer(new_style.shop_radius) : `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};`,
// 不同风格下的样式
layout_type: ['0', '4'].includes(new_form.theme) ? 'flex-row wh-auto ht-auto oh' : 'flex-col wh-auto ht-auto oh',
layout_style: this.get_layout_style(new_style, new_form),

15
components/diy/realstore.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="oh" :style="style_container">
<view :style="style_img_container">
<view :class="outer_class" :style="onter_style">
<view :class="outer_class" :style="outer_style">
<template v-if="!['3'].includes(theme)">
<view v-for="(item, index) in list" :key="index" class="pr oh" :style="layout_style" :data-value="item.url" @tap.stop="url_event">
<view class="flex-col" :style="layout_img_style">
@ -74,7 +74,7 @@
<template v-else>
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :next-margin="new_style.rolling_fashion == 'translation' ? '-' + content_outer_spacing_magin : '0rpx'" :display-multiple-items="slides_per_group" :style="{ width: '100%', height: new_style.content_outer_height * new_scale + 'px' }">
<swiper-item v-for="(item1, index1) in realstore_content_list" :key="index1">
<view class="flex-row wh-auto ht-auto" :style="onter_style">
<view class="flex-row wh-auto ht-auto" :style="outer_style">
<view v-for="(item, index) in item1.split_list" :key="index" class="pr oh" :style="layout_style" :data-value="item.url" @tap.stop="url_event">
<view :class="['oh wh-auto ht-auto', ['0', '4'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
@ -146,23 +146,18 @@
return {
form: {},
new_style: {},
propIsCartParaCurve: false,
list: [],
content_radius: '', // 圆角设置
content_img_radius: '', // 图片圆角设置
content_padding: '', // 内边距设置
theme: '', // 选择的风格
content_outer_spacing: '', // 商品间距
content_outer_spacing_magin: '', // 商品间距
// 最外层不同风格下的显示
outer_class: '',
onter_style: '',
outer_style: '',
// 不同风格下的样式
layout_style: '',
layout_img_style: '',
content_style: '', // 内容区域的样式
show_content: false, // 显示除标题外的其他区域
text_line: '', // 超过多少行隐藏
style_container: '', // 公共样式
style_img_container: '',
realstore_content_list: [],
@ -251,13 +246,11 @@
form: new_form,
new_style: new_style,
outer_class: flex + wrap + 'oh',
onter_style: `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};`,
outer_style: `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};`,
content_outer_spacing_magin: new_style.content_outer_spacing * 2 + 'rpx',
list: new_list,
new_scale: scale,
content_radius: radius_computer(new_style.realstore_radius), // 圆角设置
content_img_radius: radius_computer(new_style.realstore_img_radius), // 图片圆角设置
content_padding: padding_computer(new_style.realstore_padding) + 'box-sizing: border-box;', // 内边距设置
theme: new_form.theme, // 选择的风格
title_style: this.trends_config('title', new_style),
state_style: this.trends_config('state', new_style),

34
components/diy/shop.vue
View File

@ -1,7 +1,7 @@
<template>
<view class="oh" :style="style_container">
<view :style="style_img_container">
<view :class="outer_class" :style="onter_style">
<view :class="outer_class" :style="outer_style">
<template v-if="!['3'].includes(theme)">
<view v-for="(item, index) in list" :key="index" class="pr oh" :style="layout_style" :data-value="item.url" @tap.stop="url_event">
<view :class="['oh', ['0'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
@ -29,7 +29,7 @@
<span v-if="form.shop_desc == '1'" :class="form.shop_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="desc_style">{{ item.describe }}</span>
</view>
<view v-if="theme == '0'" class="flex-row align-c">
<img-or-icon-or-text :propValue="propValue" propType="right" />
<imgOrIconOrText :propValue="propValue" propType="right" />
</view>
</view>
</view>
@ -38,7 +38,7 @@
<template v-else>
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :next-margin="new_style.rolling_fashion == 'translation' ? '-' + content_outer_spacing_magin : '0rpx'" :display-multiple-items="slides_per_group" :style="{ width: '100%', height: new_style.content_outer_height * new_scale + 'px' }">
<swiper-item v-for="(item1, index1) in shop_content_list" :key="index1">
<view class="flex-row wh-auto ht-auto" :style="onter_style">
<view class="flex-row wh-auto ht-auto" :style="outer_style">
<view v-for="(item, index) in item1.split_list" :key="index" class="pr oh" :style="layout_style" :data-value="item.url" @tap.stop="url_event">
<view :class="['oh ht-auto', ['0', '4'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
@ -107,35 +107,28 @@
return {
form: {},
new_style: {},
propIsCartParaCurve: false,
list: [],
content_radius: '', // 圆角设置
content_img_radius: '', // 图片圆角设置
content_padding: '', // 内边距设置
theme: '', // 选择的风格
content_outer_spacing: '', // 商品间距
content_outer_spacing_magin: '', // 商品间距
// 最外层不同风格下的显示
outer_class: '',
onter_style: '',
outer_style: '',
// 不同风格下的样式
layout_style: '',
layout_img_style: '',
content_style: '', // 内容区域的样式
show_content: false, // 显示除标题外的其他区域
text_line: '', // 超过多少行隐藏
style_container: '', // 公共样式
style_img_container: '',
shop_content_list: [],
slides_per_group: 1,
border_style: '',
// 内容样式
title_style: '',
desc_style: '',
title_img_style: '',
// 图片大小
img_size: '',
shop_label_style: '',
new_scale: 1,
};
},
@ -210,21 +203,17 @@
form: new_form,
new_style: new_style,
outer_class: flex + wrap + 'oh',
onter_style: `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};`,
outer_style: `gap: ${new_style.content_outer_spacing * 2 + 'rpx'};`,
content_outer_spacing_magin: new_style.content_outer_spacing * 2 + 'rpx',
list: new_list,
new_scale: scale,
content_radius: radius_computer(new_style.shop_radius), // 圆角设置
content_img_radius: radius_computer(new_style.shop_img_radius), // 图片圆角设置
content_padding: padding_computer(new_style.shop_padding) + 'box-sizing: border-box;', // 内边距设置
theme: new_form.theme, // 选择的风格
title_style: this.trends_config('title', new_style),
desc_style: this.trends_config('desc', new_style),
shop_content_list: this.get_shop_content_list(new_list, new_form, new_style),
title_img_style: this.get_title_img_style(new_style),
img_size: img_style,
shop_label_style: this.get_shop_label_style(new_style),
border_style: this.get_border_style(new_style),
layout_style: this.get_layout_style(new_form, new_style),
layout_img_style: this.get_layout_img_style(new_form, new_style),
content_style: this.get_content_style(new_form, new_style),
@ -234,11 +223,6 @@
});
}
},
// 标签显示
get_shop_label_style(new_style) {
const { shop_lable_color, shop_lable_size, shop_lable_padding, shop_lable_radius, shop_lable_color_list, shop_lable_direction, shop_lable_border_color, shop_lable_border_size } = new_style;
return `color: ${ shop_lable_color };font-size: ${ shop_lable_size }px;${ padding_computer(shop_lable_padding) };${ radius_computer(shop_lable_radius) };${ gradient_handle(shop_lable_color_list, shop_lable_direction) };border: ${ shop_lable_border_size }px solid ${ shop_lable_border_color };`
},
// 根据传递的参数，从对象中取值
trends_config(key, new_style) {
return this.style_config(new_style[`shop_${key}_typeface`], new_style[`shop_${key}_size`], new_style[`shop_${key}_color`]);
@ -288,14 +272,6 @@
return nav_list;
}
},
get_border_style(new_style) {
const { content_border_margin, content_border_size, content_border_is_show, content_border_color, content_border_style } = new_style;
let border = ``;
if (content_border_is_show == '1') {
border += `${ margin_computer(content_border_margin) };border-width: ${content_border_size}px 0px 0px 0px;border-style: ${ content_border_style };border-color: ${content_border_color};`
}
return border;
},
// 容器样式
get_layout_style(form, new_style) {
const { shop_margin, shop_radius, shop_color_list, shop_direction } = new_style;