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

博客多门店多商户数据迁移

master
于肖磊 2025-03-25 15:22:51 +08:00
parent 892b3861b5
commit 668c930f6e
5 changed files with 1575 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

430
components/diy/blog-list.vue Normal file
View File

@ -0,0 +1,430 @@
<template>
<!-- 博客列表 -->
<view class="oh" :style="style_container">
<view class="oh" :style="style_img_container">
<view class="pr oh" :style="style">
<view v-if="!['4'].includes(blog_theme)" class="flex-wrap" :class="blog_theme_class" :style="blog_theme !== '3' ? blog_spacing : ''">
<view v-for="(item, index) in data_list" :key="index" class="item oh" :style="blog_style" :data-value="item.data.url" @tap="url_event">
<view :class="blog_theme == '0' ? 'flex-row oh' : 'flex-col oh ht-auto'" :style="blog_img_style">
<template v-if="blog_theme !== '3'">
<view class="oh pr flex-row">
<template v-if="item.new_cover.length > 0">
<image :src="item.new_cover[0].url" class="img" :style="img_radius + img_size" mode="aspectFill" />
</template>
<template v-else>
<image :src="item.data.cover" class="img" :style="img_radius + img_size" mode="aspectFill" />
</template>
<!-- 角标 -->
<subscriptIndex :propValue="propValue"></subscriptIndex>
</view>
</template>
<view v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || field_show.includes('3')" class="jc-sb flex-1" :class="blog_theme == '3' ? 'flex-row align-c' : 'flex-col'" :style="blog_theme !== '0' ? content_padding : ''">
<view class="flex-col" :class="blog_theme == '3' ? 'flex-1 flex-width' : ''" :style="'gap:' + name_desc_space + 'px;'">
<view v-if="field_show.includes('3')" class="title" :class="blog_theme == '3' ? 'text-line-1' : 'text-line-2'" :style="blog_name">{{ item.new_title ? item.new_title : item.data.title }}</view>
<view v-if="field_show.includes('2')" :class="'desc ' + field_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="blog_desc">{{ item.data.describe || '' }}</view>
</view>
<view class="flex-row jc-sb gap-8" :class="blog_theme == '3' ? 'margin-left' : 'align-e margin-top'">
<view :style="blog_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view>
<view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="blog_page_view">
<iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
<view>
{{ item.data.access_count ? item.data.access_count : '' }}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-else class="oh" :class="blog_theme_class">
<swiper class="swiper" circular :autoplay="is_roll ? true : false" :interval="interval_time" :next-margin="next_margin" :display-multiple-items="slides_per_group" :style="'height:' + carousel_height_computer">
<swiper-item v-for="(item1, index1) in blog_carousel_list" :key="index1">
<view class="flex-row ht-auto" :style="blog_spacing">
<view v-for="(item, index) in item1.carousel_list" :key="index" class="item oh ht-auto" :style="blog_style" :data-value="item.data.url" @tap="url_event">
<view class="oh flex-col ht-auto" :style="blog_img_style">
<view class="oh pr wh-auto ht-auto flex-row">
<template v-if="item.new_cover.length > 0">
<image :src="item.new_cover[0].url" class="img" :style="img_radius + 'height:100%;'" mode="aspectFill" />
</template>
<template v-else>
<image :src="item.data.cover" class="img" :style="img_radius + 'height:100%;'" mode="aspectFill" />
</template>
<template v-if="field_show.includes('3') && name_float == '1'">
<view class="text-line-1" :style="blog_name + float_name_style">{{ item.new_title ? item.new_title : item.data.title }}</view>
</template>
<!-- 角标 -->
<subscriptIndex :propValue="propValue"></subscriptIndex>
</view>
<view v-if="field_show.includes('0') || field_show.includes('1') || field_show.includes('2') || (field_show.includes('3') && name_float == '0')" class="jc-sb flex-1 flex-col" :style="blog_theme !== '0' ? content_padding : ''">
<view class="flex-col" :style="'gap:' + name_desc_space + 'px;'">
<view v-if="field_show.includes('3') && name_float == '0'" class="title text-line-2" :style="blog_name + blog_name_height_computer">{{ item.new_title ? item.new_title : item.data.title }}</view>
<view v-if="field_show.includes('2')" :class="'desc ' + field_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="blog_desc">{{ item.data.describe || '' }}</view>
</view>
<view :class="'flex-row jc-sb gap-8 align-e' + ((field_show.includes('3') && name_float == '0') || field_show.includes('2') ? ' margin-top' : '')">
<view :style="blog_date">{{ field_show.includes('0') ? item.data.add_time : '' }}</view>
<view v-show="field_show.includes('1')" class="flex-row align-c gap-3" :style="blog_page_view">
<iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
<view>
{{ item.data.access_count ? item.data.access_count : '' }}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
</view>
</template>
<script>
const app = getApp();
import { isEmpty, common_styles_computer, common_img_computer, padding_computer, radius_computer, get_math, gradient_handle, background_computer, gradient_computer, margin_computer, box_shadow_computer, border_computer, old_margin } from '@/common/js/common/common.js';
import subscriptIndex from '@/components/diy/modules/subscript/index.vue';
var system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth);
export default {
components: {
subscriptIndex,
},
props: {
propValue: {
type: Object,
default: () => {},
},
// 是否使用公共样式
propIsCommonStyle: {
type: Boolean,
default: true,
},
// 关键key
propKey: {
type: [String, Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
},
data() {
return {
style_container: '',
style_img_container: '',
style: '',
// 数据
data_list: [],
// 风格
blog_theme: '0',
// 是否显示
field_show: ['0', '1'],
// 博客
blog_name: '',
// 描述
blog_desc: '',
// 日期
blog_date: '',
// 浏览量
blog_page_view: '',
// 内容圆角
content_radius: '',
// 图片圆角
img_radius: '',
// 内间距
content_padding: '',
// 内容间距
content_spacing: '',
// 博客间距
blog_spacing: '',
// blog_item_height: '',
blog_style: '',
blog_img_style: '',
// 轮播图定时轮播
interval_time: 2000,
// 轮播图是否滚动
is_roll: 1,
blog_theme_class: '',
// 轮播高度
carousel_height_computer: '',
// 博客内容高度
blog_name_height_computer: '',
// 博客名称浮动样式
float_name_style: '',
name_float: '0',
// 图片大小
img_size: '',
// 博客轮播数据
blog_carousel_list: [],
// 博客描述间距
name_desc_space: 0,
// 一行显示的数量
slides_per_group: 1,
next_margin: '0rpx',
field_desc_row: '1',
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
created() {
this.init();
},
methods: {
// 初始化数据
init() {
const new_content = this.propValue.content || {};
const new_style = this.propValue.style || {};
// 描述样式
const desc_size = new_style.desc_size;
let desc_style = 'font-size:' + desc_size + 'px;line-height:' + desc_size + 'px;height:' + desc_size + 'px;color:' + new_style.desc_color + ';';
if (new_content.field_desc_row == '2') {
desc_style = 'font-size:' + desc_size + 'px;line-height:' + (desc_size > 0 ? desc_size + 3 : 0 ) + 'px;height:'+ (desc_size > 0 ? (desc_size + 3) * 2 : 0) + 'px;color:' + new_style.desc_color + ';';
}
this.setData({
field_desc_row: new_content.field_desc_row,
name_float: !isEmpty(new_content.name_float) ? new_content.name_float : '0',
// 判断是自动还是手动
data_list:
new_content.data_type == '0'
? new_content.data_list
: new_content.data_auto_list && new_content.data_auto_list.length > 0
? new_content.data_auto_list.map((item) => ({
id: get_math(),
new_title: '',
new_cover: [],
data: item,
}))
: [],
blog_theme_class: this.blog_theme_class_computer(new_content.theme),
blog_theme: new_content.theme,
field_show: new_content.field_show,
// 样式
blog_name: 'font-size:' + new_style.name_size + 'px;' + 'font-weight:' + new_style.name_weight + ';' + 'color:' + new_style.name_color + ';',
blog_desc: desc_style,
blog_date: 'font-size:' + new_style.time_size + 'px;' + 'font-weight:' + new_style.time_weight + ';' + 'color:' + new_style.time_color + ';',
blog_page_view: 'font-size:' + new_style.page_view_size + 'px;' + 'font-weight:' + new_style.page_view_weight + ';' + 'color:' + new_style.page_view_color + ';',
content_radius: radius_computer(new_style.content_radius),
img_radius: radius_computer(new_style.img_radius),
// 内间距
content_padding: padding_computer(new_style.padding),
// 内容间距
content_spacing: `gap: ${new_style.content_spacing}px;`,
// 博客间距
blog_spacing: `gap: ${new_style.blog_spacing}px;`,
// 描述间距
name_desc_space: parseInt(new_style.name_desc_space),
next_margin: new_style.rolling_fashion == 'translation' ? '-' + new_style.blog_spacing_margin + 'px' : '0rpx',
// 博客内容高度
slides_per_group: new_style.rolling_fashion == 'translation' ? Number(new_content.carousel_col) + 1 : 1,
});
// 默认数据
const product_style_list = [
{ name: '单列展示', value: '0', width:110, height: 83 },
{ name: '两列展示（纵向）', value: '1', width:180, height: 180 },
{ name: '大图展示', value: '2', width:0, height: 180 },
{ name: '无图模式', value: '3', width:0, height: 0 },
{ name: '左右滑动展示', value: '4', width:0, height: 0 },
];
const scale = sys_width / 390;
let img_style = ``;
if (['0'].includes(new_content.theme)) {
// 图片宽度
if (typeof new_style.content_img_width == 'number') {
img_style += `width: ${ new_style.content_img_width * scale }px;`;
} else {
const list = product_style_list.filter(item => item.value == new_content.theme);
if (list.length > 0) {
img_style += `width: ${ list[0].width * scale }px;`;
} else {
img_style += 'width: auto;';
}
}
}
if (!['3', '4'].includes(new_content.theme)) {
// 图片宽度
if (typeof new_style.content_img_height == 'number') {
img_style += `height: ${ new_style.content_img_height * scale }px;`;
} else {
const list = product_style_list.filter(item => item.value == new_content.theme);
if (list.length > 0) {
img_style += `height: ${ list[0].height * scale }px;`;
} else {
img_style += 'height: auto;';
}
}
}
// 背景图的处理
const blog_data = {
background_img_style: new_style?.blog_background_img_style || '',
background_img: new_style?.blog_background_img || '',
}
const blog_margin = new_style.value?.margin || old_margin;
const margin_width = blog_margin.margin_left + blog_margin.margin_right;
// 渐变效果
const all_style = gradient_handle(new_style?.blog_color_list || [], new_style?.blog_direction || '') + margin_computer(blog_margin) + box_shadow_computer(new_style) + border_computer(new_style);
// 博客样式
if (this.blog_theme == '0') {
this.setData({
img_size: img_style,
blog_style: this.content_radius + all_style,
blog_img_style: this.content_spacing + this.content_padding + background_computer(blog_data)
});
} else if (this.blog_theme == '1') {
this.setData({
img_size: img_style,
blog_style: `width: calc(50% - ${new_style.blog_spacing + (margin_width * 2) / 2}px);` + this.content_radius + all_style,
blog_img_style: background_computer(blog_data)
});
} else if (this.blog_theme == '2') {
this.setData({
img_size: img_style,
blog_style: this.content_radius + all_style,
blog_img_style: background_computer(blog_data)
});
} else if (this.blog_theme == '3') {
this.setData({
style: `padding: 0 ${new_style.content_spacing}px;background:#fff;` + this.content_radius,
});
} else if (this.blog_theme == '4') {
// 更新轮播图的key，确保更换时能重新更新轮播图
const temp_carousel_col = new_content.carousel_col || '1';
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = temp_carousel_col !== '0' ? ((new_style.blog_spacing * temp_carousel_col - 1) + (margin_width * temp_carousel_col)) / temp_carousel_col : '0';
const multicolumn_columns_width = new_style.rolling_fashion == 'translation' ? `margin-right: ${ new_style.blog_spacing + blog_margin.margin_right }px;width:100%;` : `width:calc(${100 / (Number(temp_carousel_col) + 1)}% - ${gap * 2}rpx);min-width:calc(${100 / (Number(temp_carousel_col) + 1)}% - ${gap * 2}rpx);`;
const { name_bg_color_list = [], name_bg_direction = '180deg', name_bg_radius, name_bg_padding, name_bg_margin } = new_style;
const data = {
color_list: name_bg_color_list,
direction: name_bg_direction,
}
let location = 'position:absolute;bottom:0;left:0;right:0;'
// 轮播宽度
this.setData({
// 滚动时间
interval_time: (new_style.interval_time || 2) * 1000,
// 是否滚动修改
is_roll: new_style.is_roll,
// blog_item_height: `height: ${new_style.blog_height }px`,
blog_style: this.content_radius + all_style + multicolumn_columns_width,
// 轮播高度
carousel_height_computer: new_style.blog_height * scale + 'px',
// 博客内容高度
blog_name_height_computer: `height:${new_style.name_size * 2.4 * 2}rpx;line-height:${new_style.name_size * 1.2 * 2}rpx;`,
float_name_style: gradient_computer(data) + (!isEmpty(name_bg_radius) ? radius_computer(name_bg_radius) : '') + (!isEmpty(name_bg_padding) ? padding_computer(name_bg_padding) : '' ) + (!isEmpty(name_bg_padding) ? margin_computer(name_bg_margin) : '') + location,
blog_img_style: background_computer(blog_data)
});
// 博客轮播数据
const cloneList = JSON.parse(JSON.stringify(this.data_list));
// 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
if (new_style.rolling_fashion != 'translation') {
if (cloneList.length > 0) {
// 每页显示的数量
const num = Number(temp_carousel_col) + 1;
// 存储数据显示
let nav_list = [];
// 拆分的数量
const split_num = Math.ceil(cloneList.length / num);
for (let i = 0; i < split_num; i++) {
nav_list.push({ carousel_list: cloneList.slice(i * num, (i + 1) * num) });
}
this.setData({
blog_carousel_list: nav_list,
});
} else {
// 否则的话，就返回全部的信息
this.setData({
blog_carousel_list: [{ carousel_list: cloneList }],
});
}
} else {
// 存储数据显示
let nav_list = [];
cloneList.forEach((item) => {
nav_list.push({
carousel_list: [item],
});
});
this.setData({
blog_carousel_list: nav_list,
});
}
}
if (this.propIsCommonStyle) {
this.setData({
style_container: common_styles_computer(new_style.common_style),
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
});
}
},
// 博客主题样式
blog_theme_class_computer(theme) {
switch (theme) {
case '0':
return 'style1 flex-col';
case '1':
return 'style2 flex-row flex-wrap';
case '2':
return 'style3 flex-col';
case '3':
return 'style4 flex-col';
default:
return 'style5';
}
},
// 跳转链接
url_event(e) {
app.globalData.url_event(e);
},
},
};
</script>
<style lang="scss" scoped>
.style1 {
.item {
max-width: 100%;
}
}
.style2 {
.item {
.img {
width: 100%;
}
}
}
.style3 {
.item {
width: 100%;
.img {
width: 100%;
}
}
}
.style4 {
.item {
width: 100%;
&:not(:last-child) {
border-bottom: 2rpx solid #eee;
}
}
}
.style5 {
.item {
width: 100%;
.img {
width: 100%;
}
}
}
</style>

264
components/diy/blog-tabs.vue Normal file
View File

@ -0,0 +1,264 @@
<template>
<!-- 文章列表 -->
<view class="blog-tabs" :class="'blog-tabs-' + propKey" :style="style_container">
<view :style="style_img_container">
<componentDiyModulesTabsView :propKey="propKey" :propValue="blog_tabs" :propIsTop="top_up == '1'" :propTop="sticky_top" :propStyle="tabs_style" :propsTabsContainer="tabs_container" :propsTabsImgContainer="tabs_img_container" :propCustomNavHeight="propIsTabsUseSafeDistance ? (propCustomNavHeight * 2 + 'rpx') : '0rpx'" :propTabsBackground="tabs_background" :propTabsSlidingFixedBg="tabs_sliding_fixed_bg" @onTabsTap="tabs_click_event"></componentDiyModulesTabsView>
<view :style="blog_margin_top">
<view :style="blog_container">
<view :style="blog_img_container">
<componentDiyBlogList :propKey="diy_key" :propValue="blog_tabs" :propIsCommonStyle="false"></componentDiyBlogList>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
const app = getApp();
import { common_styles_computer, common_img_computer, padding_computer, margin_computer, background_computer, gradient_computer, radius_computer, isEmpty, box_shadow_computer, border_computer, old_border_and_box_shadow, old_margin, old_padding } from '@/common/js/common/common.js';
import componentDiyModulesTabsView from '@/components/diy/modules/tabs-view';
import componentDiyBlogList from '@/components/diy/blog-list'; // 状态栏高度
var bar_height = parseInt(app.globalData.get_system_info('statusBarHeight', 0));
// #ifdef MP-TOUTIAO
bar_height = 0;
// #endif
export default {
props: {
propValue: {
type: Object,
default: () => {},
},
// 距离顶部高度
propTop: {
type: Number,
default: 0,
},
// 自定义导航栏高度
propCustomNavHeight: {
type: Number,
default: 33,
},
// 滚动距离
propScrollTop: {
type: Number,
default: 0,
},
// 顶部导航是否开启沉浸模式
propIsImmersionModel: {
type: Boolean,
default: false,
},
propKey: {
type: [String, Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 1000000,
},
// 选项卡是否使用安全距离
propIsTabsUseSafeDistance: {
type: Boolean,
default: true
}
},
components: {
componentDiyModulesTabsView,
componentDiyBlogList,
},
data() {
return {
style_container: '',
style_img_container: '',
style: '',
blog_tabs: {},
// 是否滑动置顶
top_up: '0',
tabs_style: '',
tabs_top: 0,
tabs_background: 'background:transparent',
custom_nav_height: 33,
diy_key: '',
// 选项卡背景设置
blog_margin_top: '',
tabs_container: '',
tabs_img_container: '',
tabs_sliding_fixed_bg: '',
// 商品区域背景设置
blog_container: '',
blog_img_container: '',
// #ifdef MP
nav_safe_space: bar_height + 5,
// #endif
// #ifdef H5 || MP-TOUTIAO
nav_safe_space: bar_height + 7,
// #endif
// #ifdef APP
nav_safe_space: bar_height + 0,
// #endif
// 选项卡默认数据
tabs_index: 0,
sticky_top: 0,
};
},
watch: {
// 监听滚动距离
propScrollTop(newVal) {
if (newVal + this.sticky_top + this.custom_nav_height > this.tabs_top + this.nav_safe_space && this.top_up == '1') {
let new_style = this.propValue.style || {};
let tabs_bg = new_style.common_style.color_list;
let new_tabs_background = '';
if (tabs_bg.length > 0 && (tabs_bg[0].color || null) != null) {
new_tabs_background = gradient_computer(new_style.common_style);
}
let new_tabs_background_img = background_computer(new_style.common_style);
if (new_tabs_background_img.length > 0) {
new_tabs_background_img += 'background-position: top left;';
}
this.tabs_background = (new_tabs_background.length > 0 ? new_tabs_background : 'background:#fff;') + new_tabs_background_img;
} else {
this.tabs_background = 'background:transparent';
}
},
propTop(val) {
this.init();
},
propKey(val) {
this.setData({
diy_key: val,
});
// 初始化
this.init();
},
},
created() {
this.init();
},
mounted() {
this.$nextTick(() => {
const self = this;
setTimeout(() => {
self.getTop();
});
// #ifdef H5 || MP-TOUTIAO
// 获取自定义导航栏高度
this.setData({
custom_nav_height: this.propCustomNavHeight,
});
// #endif
});
},
methods: {
// 初始化数据
init() {
let new_content = this.propValue.content || {};
let new_style = this.propValue.style || {};
let new_data = JSON.parse(JSON.stringify(this.propValue));
const new_tabs_data = new_data.content.tabs_list[this.tabs_index] || {};
new_data.content.theme = new_data.content.blog_theme;
new_data.content.data_type = new_tabs_data.data_type;
new_data.content.category = new_tabs_data.category;
new_data.content.carousel_col = new_data.content.blog_carousel_col;
new_data.content.data_list = new_tabs_data.data_list;
new_data.content.data_auto_list = new_tabs_data.data_auto_list;
new_data.content.data_ids = new_tabs_data.data_ids;
new_data.content.number = new_tabs_data.number;
new_data.content.sort = new_tabs_data.sort;
new_data.content.sort_rules = new_tabs_data.sort_rules;
new_data.content.field_show = new_data.content.field_show;
new_data.content.is_cover = new_tabs_data.is_cover;
// 公共样式
const common_style = new_style.common_style;
let tabs_style_obj = {
padding_top: common_style.padding_top - this.propCustomNavHeight < 0 ? 0 : common_style.padding_top - this.propCustomNavHeight,
padding_left: common_style.padding_left,
padding_right: common_style.padding_right,
};
let new_tabs_style = padding_computer(tabs_style_obj) + margin_computer(tabs_style_obj) + `position:relative;left: -${tabs_style_obj.padding_left * 2}rpx;right: -${tabs_style_obj.padding_right * 2}rpx;width:100%;`;
// 如果是历史数据的话，就执行默认添加下边距
if (isEmpty(new_style.tabs_padding)) {
new_tabs_style += 'padding-bottom: 20rpx;';
}
const { tabs_bg_color_list = [], tabs_bg_direction = '', tabs_bg_background_img_style = '', tabs_bg_background_img = [], tabs_radius = old_radius, tabs_padding = old_padding, blog_content_color_list = [], blog_content_direction = '', blog_content_background_img_style = '', blog_content_background_img = [], blog_content_margin = old_margin, blog_content_padding = old_padding, blog_content_radius = old_radius } = new_style;
// 选项卡背景设置
const tabs_data = {
color_list: tabs_bg_color_list,
direction: tabs_bg_direction,
background_img_style: tabs_bg_background_img_style,
background_img: tabs_bg_background_img,
};
// 文章区域背景设置
const blog_content_data = {
color_list: blog_content_color_list,
direction: blog_content_direction,
background_img_style: blog_content_background_img_style,
background_img: blog_content_background_img,
};
const blog_content = new_style?.blog_content || old_border_and_box_shadow;
const tabs_content = new_style?.tabs_content || old_border_and_box_shadow;
this.setData({
top_up: new_content.tabs_top_up,
sticky_top: this.propTop + (new_style?.tabs_margin?.margin_top || 0),
blog_tabs: new_data,
style_container: common_styles_computer(common_style) + (new_content.tabs_top_up == '1' ? 'overflow: unset;' : ''),
style_img_container: common_img_computer(common_style, this.propIndex) + radius_computer(common_style) +(new_content.tabs_top_up == '1' ? 'overflow: unset;' : ''),
tabs_style: new_tabs_style,
blog_margin_top: 'margin-top:' + (new_style?.blog_content_spacing || 0) * 2 + 'rpx',
tabs_sliding_fixed_bg: gradient_computer(tabs_data),
tabs_container: gradient_computer(tabs_data) + radius_computer(tabs_radius) + margin_computer(new_style?.tabs_margin || old_margin) + border_computer(tabs_content) + box_shadow_computer(tabs_content) + 'overflow: hidden;',
tabs_img_container: background_computer(tabs_data) + padding_computer(tabs_padding) + 'box-sizing: border-box;overflow: hidden;',
blog_container: gradient_computer(blog_content_data) + margin_computer(blog_content_margin) + radius_computer(blog_content_radius) + box_shadow_computer(blog_content) + border_computer(blog_content) + 'overflow: hidden;',
blog_img_container: background_computer(blog_content_data) + padding_computer(blog_content_padding) + 'box-sizing: border-box;overflow: hidden;',
});
},
// tabs切换事件
tabs_click_event(index) {
let new_data = JSON.parse(JSON.stringify(this.propValue));
new_data.content.theme = new_data.content.blog_theme;
new_data.content.data_type = new_data.content.tabs_list[index].data_type;
new_data.content.category = new_data.content.tabs_list[index].category;
new_data.content.carousel_col = new_data.content.blog_carousel_col;
new_data.content.data_list = new_data.content.tabs_list[index].data_list;
new_data.content.data_auto_list = new_data.content.tabs_list[index].data_auto_list;
new_data.content.data_ids = new_data.content.tabs_list[index].data_ids;
new_data.content.number = new_data.content.tabs_list[index].number;
new_data.content.sort = new_data.content.tabs_list[index].sort;
new_data.content.sort_rules = new_data.content.tabs_list[index].sort_rules;
new_data.content.field_show = new_data.content.field_show;
new_data.content.is_cover = new_data.content.tabs_list[index].is_cover;
this.setData({
tabs_index: index,
blog_tabs: new_data,
diy_key: Math.random(),
});
},
// 获取商品距离顶部的距离
getTop() {
const query = uni.createSelectorQuery().in(this);
query
.select('.blog-tabs-' + this.propKey)
.boundingClientRect((res) => {
if ((res || null) != null) {
let new_data = typeof this.propValue == 'string' ? JSON.parse(JSON.stringify(this.propValue)) : this.propValue;
const new_style = new_data.style || {};
this.setData({
tabs_top: res.top - (new_style.common_style?.margin_top || 0) + (new_style?.tabs_margin?.margin_top || 0),
});
}
})
.exec();
},
},
};
</script>
<style lang="scss" scoped>
.tabs-container {
position: relative;
width: 100%;
left: 0;
right: 0;
}
</style>

85
components/diy/modules/img-or-icon-or-text.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<view v-if="is_show" :style="corner_marker">
<view class="flex-row nowrap oh" :style="corner_img_marker">
<template v-if="type_boolean">
<template v-if="!isEmpty(type_img)">
<image-empty v-model="type_img[0]" :style="img_style"></image-empty>
</template>
<template v-else>
<iconfont :name="'icon-' + type_icon" :size="new_type_size + ''" :color="new_type_color"></iconfont>
</template>
</template>
<template v-else>
<span class="text-line-1" :style="'font-size:' + new_type_size * 2 + 'rpx;color:' + new_type_color">{{ type_text }}</span>
</template>
</view>
</view>
</template>
<script>
import { isEmpty, common_styles_computer, padding_computer } from '@/common/js/common/common.js';
export default {
props: {
propValue: {
type: Object,
default: () => {
return {};
},
},
propType: {
type: String,
default: '',
},
},
data() {
return {
is_show: false,
type_boolean: false,
type_img: [],
type_icon: '',
type_text: '',
new_type_size: 0,
new_type_color: '',
img_style: '',
};
},
watch: {
propValue(val) {
this.init();
}
},
mounted() {
this.init();
},
methods: {
isEmpty,
init() {
const content = this.propValue.content || {};
const new_style = this.propValue.style || {};
// 取出某一个对应的数据信息
const new_type_style = new_style[`${ this.propType }_style`] || {};
this.setData({
is_show: content[`is_${ this.propType }_show`] == '1',
type_boolean: content[`${ this.propType }_type`] == 'img-icon',
type_img: content[`${ this.propType }_img`] || [],
type_icon: content[`${ this.propType }_icon`] || '',
type_text: content[`${ this.propType }_text`] || '',
// 取出对应的大小显示
new_type_size: new_type_style?.size || 0,
new_type_color: new_type_style?.color || '',
// 大小设置
corner_marker: common_styles_computer(new_type_style),
corner_img_marker: padding_computer(new_type_style),
// 图片设置
img_style: `height: ${ new_type_style.img_height }px; width: ${ new_type_style.img_width }px`,
})
},
},
};
</script>
<style lang="scss" scoped>
.img_wh {
width: 100%;
height: 100%;
}
</style>

434
components/diy/realstore.vue Normal file
View File

@ -0,0 +1,434 @@
<template>
<view class="oh" :style="style_container">
<view :style="style_img_container">
<view :class="outer_class" :style="onter_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">
<view :class="['oh wh-auto ht-auto', ['0'].includes(theme) ? 'flex-row' : 'flex-col' ]">
<template v-if="!isEmpty(item)">
<view class="oh pr" :style="img_size">
<view v-if="!isEmpty(item.new_cover)" :style="img_size">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
<view v-else :style="img_size">
<imageEmpty :propImageSrc="item.logo" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
</view>
</template>
<view class="flex-1 flex-col" :style="content_style">
<view class="flex-col jc-sb gap-10">
<view class="flex-row jc-sb align-c gap-10">
<view class="flex-row align-c gap-3">
<view v-if="(item.alias || null) != null" :style="shop_label_style">{{ item.alias }}</view>
<view class="text-line-2" :style="title_style">{{ item.name }}</view>
</view>
<view v-if="['0', '2'].includes(theme) && (!isEmpty(item.service_data.service_tel) || (item.lat != 0 && item.lng != 0))" class="flex-row align-c" :style="'gap:' + new_style.phone_navigation_spacing * 2 + 'rpx;'">
<view v-if="!isEmpty(item.service_data.service_tel)" :data-value="item.service_data.service_tel" @tap.stop="tel_event">
<imgOrIconOrText :propValue="propValue" propType="phone"/>
</view>
<view v-if="item.lat != 0 && item.lng != 0" :data-index="index" @tap.stop="address_map_event">
<imgOrIconOrText :propValue="propValue" propType="navigation" />
</view>
</view>
</view>
<view class="flex-row gap-2 align-c">
<imgOrIconOrText :propValue="propValue" propType="time" />
<view v-if="!isEmpty(item.status_info)" class="flex-1 flex-row align-c">
<span class="text-line-1" :style="state_style + `color: ${ item.status_info.status == 1 ? new_style.realstore_state_color : new_style.realstore_default_state_color }`">{{ item.status_info.msg }}</span>
<span v-if="!isEmpty(item.status_info.msg) || !isEmpty(item.status_info.time)" :style="'color: #ccc;' + margin_computer(new_style.realstore_business_distance)">|</span>
<span class="text-line-1" :style="business_hours_style">{{ item.status_info.time }}</span>
</view>
</view>
</view>
<template v-if="theme !== '0' && (form.is_location_show == '1' || form.is_location_distance_show == '1' || form.is_location_title_show == '1')">
<view :style="border_style"></view>
<view class="flex-row jc-sb align-c gap-10">
<view class="flex-1 flex-row align-c jc-sb">
<view class="flex-1 flex-row align-b gap-2">
<imgOrIconOrText :propValue="propValue" propType="location" />
<span v-if="form.is_location_title_show == '1'" class="text-line-2 flex-1" :style="location_style">{{ item.province_name }}{{ item.city_name }}{{ item.county_name }}{{ item.address }}</span>
</view>
<span v-if="!isEmpty(item.distance) && theme != '1' && form.is_location_distance_show == '1'" :style="distance_style">距您{{ item.distance || '0km' }}</span>
</view>
<view v-if="!['0', '2'].includes(theme) && item.lat != 0 && item.lng != 0" :data-index="index" @tap.stop="address_map_event" >
<imgOrIconOrText :propValue="propValue" propType="navigation" />
</view>
</view>
</template>
</view>
</view>
<template v-if="theme == '0' && (form.is_location_show == '1' || form.is_location_distance_show == '1' || form.is_location_title_show == '1')">
<view :style="border_style"></view>
<view class="flex-row align-c jc-sb">
<view class="flex-1 flex-row align-b gap-2">
<imgOrIconOrText :propValue="propValue" propType="location" />
<span v-if="form.is_location_title_show == '1'" class="text-line-2 flex-1" :style="location_style">{{ item.province_name }}{{ item.city_name }}{{ item.county_name }}{{ item.address }}</span>
</view>
<span v-if="form.is_location_distance_show == '1' && !isEmpty(item.distance)" :style="distance_style">距您{{ item.distance || '' }}</span>
</view>
</template>
</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 realstore_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 wh-auto ht-auto', ['0', '4'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
<view class="oh pr wh-auto ht-auto">
<view v-if="!isEmpty(item.new_cover)" class="wh-auto ht-auto">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
<view v-else class="wh-auto ht-auto">
<imageEmpty :propImageSrc="item.logo" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
</view>
</template>
<view class="flex-1 flex-col jc-sb gap-10" :style="content_style">
<view class="flex-row align-c gap-3">
<view v-if="(item.alias || null) != null" :style="shop_label_style">{{ item.alias }}</view>
<view class="text-line-2" :style="title_style">{{ item.name }}</view>
</view>
<view class="flex-row jc-sb align-c">
<view class="flex-1 flex-row gap-2 align-c">
<imgOrIconOrText :propValue="propValue" propType="time" />
<span v-if="!isEmpty(item.status_info)" class="text-line-1" :style="state_style + `color: ${ item.status_info.status == 1 ? new_style.realstore_state_color : new_style.realstore_default_state_color }`">{{ item.status_info.msg }}</span>
</view>
<view v-if="item.lat != 0 && item.lng != 0" :data-index="index1" :data-split="index" @tap.stop="address_map_event">
<imgOrIconOrText :propValue="propValue" propType="navigation" />
</view>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</template>
</view>
</view>
</view>
</template>
<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, old_margin, 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';
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
},
props: {
propValue: {
type: Object,
default: () => ({}),
},
propKey: {
type: [String, Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 0,
},
},
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: '',
// 不同风格下的样式
layout_style: '',
layout_img_style: '',
content_style: '', // 内容区域的样式
show_content: false, // 显示除标题外的其他区域
text_line: '', // 超过多少行隐藏
style_container: '', // 公共样式
style_img_container: '',
realstore_content_list: [],
slides_per_group: 1,
border_style: '',
// 内容样式
title_style: '',
state_style: '',
business_hours_style: '',
distance_style: '',
location_style: '',
// 图片大小
img_size: '',
shop_label_style: '',
new_scale: 1,
};
},
watch: {
propKey(val) {
this.init();
},
propValue(new_value, old_value) {
this.init();
},
},
created() {
this.init();
},
methods: {
isEmpty, margin_computer,
init() {
const new_form = this.propValue.content || null;
const new_style = this.propValue.style || null;
if (new_form != null && new_style != null) {
const default_list = {
name: '测试门店标题',
province_name: '测试地址',
alias: '上海门店',
city_name: '',
county_name: '',
address: '',
logo: '',
new_cover: [],
distance: '12km',
status_info: {
msg: '营业中',
time: '7:00-22:00',
status: 1,
type: 0,
},
};
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;
} else {
new_list = Array(4).fill(default_list);
}
console.log(new_list);
// 最外层不同风格下的显示
const flex = ['0', '2'].includes(new_form.theme) ? 'flex-col ' : 'flex-row ';
const wrap = new_form.theme == '3' ? '' : 'flex-wrap ';
// 默认数据
const realstore_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 scale = sys_width / 390;
let img_style = ``;
if (['0'].includes(new_form.theme)) {
// 图片宽度
if (typeof new_style.content_img_width == 'number') {
img_style += `width: ${ new_style.content_img_width * scale }px;`;
} else {
const list = realstore_style_list.filter(item => item.value == new_form.theme);
if (list.length > 0) {
img_style += `width: ${ list[0].width * scale }px;`;
} else {
img_style += 'width: auto;';
}
}
}
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 = realstore_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;';
}
}
}
this.setData({
form: new_form,
new_style: new_style,
outer_class: flex + wrap + 'oh',
onter_style: `gap: ${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),
business_hours_style: this.trends_config('business_hours', new_style),
distance_style: this.trends_config('distance', new_style),
location_style: this.trends_config('location', new_style),
realstore_content_list: this.get_realstore_content_list(new_list, new_form, 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: common_styles_computer(new_style.common_style), // 公共样式
style_img_container: common_img_computer(new_style.common_style, this.propIndex), // 图片样式
});
}
},
// 标签显示
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[`realstore_${key}_typeface`], new_style[`realstore_${key}_size`], new_style[`realstore_${key}_color`]);
},
// 根据传递的值，显示不同的内容
style_config(typeface, size, color) {
return `font-weight:${typeface}; font-size: ${size}px;color: ${color};`;
},
get_realstore_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_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 { realstore_margin, realstore_radius, realstore_color_list, realstore_direction } = new_style;
const radius = radius_computer(realstore_radius);
// 计算每个容器的大小
let size_style = ``;
const realstore_left_right_width = realstore_margin.margin_left + realstore_margin.margin_right;
if (['1'].includes(form.theme)) {
size_style = `width: calc((100% - ${new_style.content_outer_spacing * 2 + (realstore_left_right_width * 4) + 'rpx'}) / 2);`;;
} else if (form.theme == '3') {
// 如果不是平移的时候执行
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) + (realstore_margin.margin_right * 2) }rpx;width: 100%;height: 100%;`;
}
} else if (form.theme == '0') {
size_style = `width: calc(100% - ${ realstore_left_right_width }px);`;
}
const gradient = gradient_handle(realstore_color_list, realstore_direction) + margin_computer(realstore_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_layout_img_style(form, new_style) {
const { realstore_padding, realstore_background_img_style, realstore_background_img } = new_style;
const padding = form.theme == '0' ? padding_computer(realstore_padding) : '';
const data = {
background_img_style: realstore_background_img_style,
background_img: realstore_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.realstore_padding);
}
return `${spacing}`;
},
// 电话
tel_event(e) {
console.log(e);
app.globalData.call_tel(e);
},
// 地图查看
address_map_event(e) {
let info = this.list[e.currentTarget.dataset.index] || {};
// 判断是否是轮播传递过来的数据
if (!isEmpty(e.currentTarget.dataset.split)) {
const old_info = this.realstore_content_list[e.currentTarget.dataset.index].split_list || {};
info = old_info[e.currentTarget.dataset.split] || {};
}
if (info.lat == 0 || info.lng == 0) {
app.globalData.showToast(this.$t('user-order-detail.user-order-detail.i876o3'));
return false;
}
var address = (info.province_name || "") + (info.city_name || "") + (info.county_name || "") + (info.address || "");
app.globalData.open_location(info.lng, info.lat, info.name, address);
},
url_event(e) {
app.globalData.url_event(e);
},
},
};
</script>
<style scoped lang="scss">
</style>

362
components/diy/shop.vue Normal file
View File

@ -0,0 +1,362 @@
<template>
<view class="oh" :style="style_container">
<view :style="style_img_container">
<view :class="outer_class" :style="onter_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">
<template v-if="!isEmpty(item)">
<view class="oh pr" :style="img_size">
<view v-if="!isEmpty(item.new_cover)" :style="img_size">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
<view v-else :style="img_size">
<imageEmpty :propImageSrc="item.logo" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
</view>
</template>
<view class="flex-1 flex-row jc-sb gap-10" :style="content_style">
<view class="flex-1 flex-col jc-sb gap-10">
<view class="text-line-2" :style="title_style">
<template v-for="(item1, index1) in item.icon_list">
<template v-if="!isEmpty(item1.icon)">
<img :key="index1" :src="item1.icon" class="title-img" :style="title_img_style + 'margin-right: ' + (index < item.icon_list.length - 1 ? new_style.shop_title_img_inner_spacing * 2 : new_style.shop_title_img_outer_spacing * 2) + 'rpx;vertical-align: middle;'" />
</template>
</template>{{ item.name }}
</view>
<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" />
</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, index) in shop_content_list" :key="index">
<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', ['0', '4'].includes(theme) ? 'flex-row' : 'flex-col' ]" :style="layout_img_style">
<template v-if="!isEmpty(item)">
<view class="oh pr wh-auto ht-auto">
<view v-if="!isEmpty(item.new_cover)" class="wh-auto ht-auto">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
<view v-else class="wh-auto ht-auto">
<imageEmpty :propImageSrc="item.logo" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
</view>
</template>
<view class="flex-col jc-sb gap-10" :style="content_style">
<view class="text-line-2" :style="title_style">
<template v-for="(item1, index1) in item.icon_list">
<template v-if="!isEmpty(item1.icon)">
<image :key="index1" :src="item1.icon" mode="aspectFit" :style="title_img_style + 'margin-right: ' + (index < item.icon_list.length - 1 ? new_style.shop_title_img_inner_spacing * 2 : new_style.shop_title_img_outer_spacing * 2) + 'rpx;vertical-align: middle;'" :data-value="item1.url" @tap.stop="url_event" />
</template>
</template>{{ item.name }}
</view>
<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>
</view>
</view>
</swiper-item>
</swiper>
</template>
</view>
</view>
</view>
</template>
<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, old_margin, 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';
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
},
props: {
propValue: {
type: Object,
default: () => ({}),
},
propKey: {
type: [String, Number],
default: '',
},
// 组件渲染的下标
propIndex: {
type: Number,
default: 0,
},
},
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: '',
// 不同风格下的样式
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,
};
},
watch: {
propKey(val) {
this.init();
},
propValue(new_value, old_value) {
this.init();
},
},
created() {
this.init();
},
methods: {
isEmpty, margin_computer,
init() {
const new_form = this.propValue.content || null;
const new_style = this.propValue.style || null;
if (new_form != null && new_style != null) {
const default_list = {
name: '测试商户标题',
describe: '测试商户描述',
icon_list: [{ icon: `http://shopxo.com/static/diy/images/components/model-shop/auth.png`}, { icon: ''}],
logo: '',
new_cover: [],
};
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;
} else {
new_list = Array(4).fill(default_list);
}
// 最外层不同风格下的显示
const flex = ['0', '2'].includes(new_form.theme) ? 'flex-col ' : 'flex-row ';
const wrap = new_form.theme == '3' ? '' : 'flex-wrap ';
// 默认数据
const shop_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 scale = sys_width / 390;
let img_style = ``;
if (['0'].includes(new_form.theme)) {
// 图片宽度
if (typeof new_style.content_img_width == 'number') {
img_style += `width: ${ new_style.content_img_width * scale }px;`;
} else {
const list = shop_style_list.filter(item => item.value == new_form.theme);
if (list.length > 0) {
img_style += `width: ${ list[0].width * scale }px;`;
} else {
img_style += 'width: auto;';
}
}
}
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 = shop_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;';
}
}
}
this.setData({
form: new_form,
new_style: new_style,
outer_class: flex + wrap + 'oh',
onter_style: `gap: ${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),
slides_per_group: new_style.rolling_fashion == 'translation' ? new_form.carousel_col : 1,
style_container: common_styles_computer(new_style.common_style), // 公共样式
style_img_container: common_img_computer(new_style.common_style, this.propIndex), // 图片样式
});
}
},
// 标签显示
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`]);
},
// 根据传递的值，显示不同的内容
style_config(typeface, size, color) {
return `font-weight:${typeface}; font-size: ${size}px;color: ${color};`;
},
get_title_img_style(new_style) {
const { shop_title_img_width = 0, shop_title_img_height = 0, shop_title_img_radius } = new_style;
return `width: ${shop_title_img_width || 0 }px;height: ${ shop_title_img_height || 0 }px;${ radius_computer(shop_title_img_radius) }`;
},
get_shop_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_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;
const radius = radius_computer(shop_radius);
// 计算每个容器的大小
let size_style = ``;
const shop_left_right_width = shop_margin.margin_left + shop_margin.margin_right;
if (['1'].includes(form.theme)) {
size_style = `width: calc((100% - ${new_style.content_outer_spacing * 2 + (shop_left_right_width * 4) + 'rpx'}) / 2);`;;
} else if (form.theme == '3') {
// 如果不是平移的时候执行
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) + (shop_margin.margin_right * 2) }rpx;width: 100%;height: 100%;`;
}
} else if (form.theme == '0') {
size_style = `width: calc(100% - ${ shop_left_right_width }px);`;
}
const gradient = gradient_handle(shop_color_list, shop_direction) + margin_computer(shop_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_layout_img_style(form, new_style) {
const { shop_padding, shop_background_img_style, shop_background_img } = new_style;
const padding = form.theme == '0' ? padding_computer(shop_padding) : '';
const data = {
background_img_style: shop_background_img_style,
background_img: shop_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.shop_padding);
}
return `${spacing}`;
},
url_event(e) {
app.globalData.url_event(e);
},
},
};
</script>
<style scoped lang="scss">
.title-img {
object-fit: contain;
}
</style>