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

修改数据显示问题

master
于肖磊 2025-04-02 17:19:52 +08:00
parent 358a597795
commit c92fd5c0c1
14 changed files with 385 additions and 674 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
App.vue
View File

@ -7,10 +7,10 @@
data: {
// 基础配置
// 数据接口请求地址
request_url:'https://new.shopxo.vip/',
request_url:'http://shopxo.com/',
// 静态资源地址（如系统根目录不在public目录下面请在静态地址后面加public目录、如：https://d1.shopxo.vip/public/）
static_url:'https://new.shopxo.vip/',
static_url:'http://shopxo.com/',
// 系统类型（默认default、如额外独立小程序、可与程序分身插件实现不同主体小程序及支付独立）
system_type: 'default',

81
common/js/common/common.js
View File

@ -650,4 +650,85 @@ export const location_compute = (size, location, container_size) => {
} else {
return location;
}
};
/**
* 获取轮播列表
* 该函数根据输入的列表和数字，以及可选的判断标志，返回一个经过处理的列表
* 主要用于处理轮播图的数据显示逻辑，可以根据不同的滑动方式（分页滑动或翻译滑动）来处理数据
*
* @param {Array} list - 原始的轮播图列表，包含多个轮播项
* @param {Number} num - 每页显示的轮播项数量，或者在翻译滑动模式下使用的数字
* @param {Number} rolling_fashion - 滑动切换的方式，分页滑动或平移滑动
* @param {Boolean} judgment - 可选参数，默认为true如果为true，则根据分页滑动方式处理数据；如果为false，则根据翻译滑动方式处理数据
* @returns {Array} - 返回一个处理后的列表，每个元素包含一个split_list属性，该属性是一个数组，包含当前页的轮播项
*/
export const get_swiper_list = (list, num, rolling_fashion, judgment = true) => {
// 深拷贝一下，确保不会出现问题
const cloneList = JSON.parse(JSON.stringify(list));
// 判断滑动方式如果不是翻译滑动并且judgment为true时，按照分页滑动处理
if (rolling_fashion != 'translation' && judgment) {
// 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
if (cloneList.length > 0) {
// 存储数据显示
let nav_list = [];
// 拆分的数量
const split_num = Math.ceil(cloneList.length / num);
// 循环拆分列表，并添加到nav_list中
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 {
// 如果是平移滑动，则调用另一个函数处理
return get_swiper_translation_list(cloneList, num);
}
}
/**
* 获取轮播图翻译列表
*
* 此函数用于根据给定的列表和数字生成一个特定结构的列表用于轮播图的翻译效果
* 它会检查输入列表的长度，如果长度小于给定的数字，它会用空列表填充以达到所需长度
*
* @param {Array} cloneList - 原始列表的克隆版本，包含需要显示的元素
* @param {number} num - 轮播图需要显示的元素数量
* @returns {Array} - 返回一个对象数组，每个对象包含一个split_list属性，该属性是一个列表
*/
export const get_swiper_translation_list = (cloneList, num) => {
// 存储数据显示
let nav_list = [];
// 遍历cloneList，为每个元素创建一个对象，并将其添加到nav_list中
cloneList.forEach((item) => {
nav_list.push({
split_list: [item],
});
});
// 如果数据大于等于显示的数量不做处理, 小于显示的内容时需要做处理，添加空的数据
if (cloneList.length < num) {
const newNum = num - cloneList.length;
// 添加空的split_list对象以达到所需的显示数量
for (let i = 0; i < newNum; i++) {
nav_list.push({
split_list: [],
});
}
}
// 返回处理后的列表
return nav_list;
};

97
components/diy/article-list.vue
View File

@ -40,37 +40,39 @@
<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 article_carousel_list" :key="index1">
<view class="flex-row ht-auto" :style="article_spacing">
<view v-for="(item, index) in item1.carousel_list" :key="index" class="item oh ht-auto" :style="article_style" :data-value="item.data.url" @tap="url_event">
<view class="oh flex-col ht-auto" :style="article_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="article_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="article_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="article_name + article_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="article_desc">{{ item.data.describe || '' }}</view>
<view v-for="(item, index) in item1.split_list" :key="index" class="item oh ht-auto" :style="article_style" :data-value="item.data.url" @tap="url_event">
<template v-if="!isEmpty(item)">
<view class="oh flex-col ht-auto" :style="article_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="article_name + float_name_style">{{ item.new_title ? item.new_title : item.data.title }}</view>
</template>
<!-- 角标 -->
<subscriptIndex :propValue="propValue"></subscriptIndex>
</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="article_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="article_page_view">
<iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
<view>
{{ item.data.access_count ? item.data.access_count : '' }}
<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="article_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="article_name + article_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="article_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="article_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="article_page_view">
<iconfont name="icon-eye" propContainerDisplay="flex"></iconfont>
<view>
{{ item.data.access_count ? item.data.access_count : '' }}
</view>
</view>
</view>
</view>
</view>
</view>
</template>
</view>
</view>
</swiper-item>
@ -83,7 +85,7 @@
<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 { 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, get_swiper_list } 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);
@ -181,6 +183,7 @@
this.init();
},
methods: {
isEmpty,
// 初始化数据
init() {
const new_content = this.propValue.content || {};
@ -309,6 +312,8 @@
direction: name_bg_direction,
}
let location = 'position:absolute;bottom:0;left:0;right:0;'
// 每页显示的数量
const num = Number(temp_carousel_col) + 1;
// 轮播宽度
this.setData({
// 滚动时间
@ -322,43 +327,9 @@
// 文章内容高度
article_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,
article_img_style: background_computer(article_data)
article_img_style: background_computer(article_data),
article_carousel_list: get_swiper_list(this.data_list, num, new_style.rolling_fashion),
});
// 文章轮播数据
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({
article_carousel_list: nav_list,
});
} else {
// 否则的话，就返回全部的信息
this.setData({
article_carousel_list: [{ carousel_list: cloneList }],
});
}
} else {
// 存储数据显示
let nav_list = [];
cloneList.forEach((item) => {
nav_list.push({
carousel_list: [item],
});
});
this.setData({
article_carousel_list: nav_list,
});
}
}
if (this.propIsCommonStyle) {

65
components/diy/ask.vue
View File

@ -47,21 +47,23 @@
<swiper-item v-for="(item1, index1) in ask_content_list" :key="index1">
<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">
<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 v-if="!isEmpty(item)">
<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>
</template>
</view>
</view>
</swiper-item>
@ -74,7 +76,7 @@
<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, gradient_handle, padding_computer, radius_computer, background_computer, border_computer, box_shadow_computer, gradient_computer, margin_computer, get_swiper_list } 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';
@ -221,7 +223,7 @@
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),
ask_content_list: get_swiper_list(new_list, new_form.carousel_col, new_style.rolling_fashion),
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),
@ -249,43 +251,6 @@
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_layout_style(form, new_style) {
const { ask_margin, ask_radius, ask_color_list, ask_direction } = new_style;

85
components/diy/binding.vue
View File

@ -104,32 +104,34 @@
<swiper-item v-for="(item1, index1) in match_item.content_goods" :key="index1">
<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')">
<view class="oh pr wh-auto ht-auto">
<imageEmpty :propImageSrc="item.images" :propStyle="goods_content_img_radius" propErrorStyle="width: 50rpx;height: 50rpx;"></imageEmpty>
</view>
</template>
<view v-if="is_show('title') || is_show('price') || is_show('save_price')" class="flex-1 flex-row jc-sb" :style="content_style">
<view class="flex-1 flex-col jc-sb">
<view v-if="is_show('title')" :class="theme == '0' ? 'text-line-2' : 'text-line-1'" :style="goods_title_style">
{{ item.title }}
<template v-if="!isEmpty(item)">
<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')">
<view class="oh pr wh-auto ht-auto">
<imageEmpty :propImageSrc="item.images" :propStyle="goods_content_img_radius" propErrorStyle="width: 50rpx;height: 50rpx;"></imageEmpty>
</view>
<view v-if="is_show('price')" class="text-line-1">
<text :style="goods_price_symbol_style">{{ item.show_price_symbol }}</text>
<text :style="goods_price_style">{{ item.price }}</text>
<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">
<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>
</template>
<view v-if="is_show('title') || is_show('price') || is_show('save_price')" class="flex-1 flex-row jc-sb" :style="content_style">
<view class="flex-1 flex-col jc-sb">
<view v-if="is_show('title')" :class="theme == '0' ? 'text-line-2' : 'text-line-1'" :style="goods_title_style">
{{ item.title }}
</view>
<view v-if="is_show('price')" class="text-line-1">
<text :style="goods_price_symbol_style">{{ item.show_price_symbol }}</text>
<text :style="goods_price_style">{{ item.price }}</text>
<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">
<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>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
</view>
</view>
</swiper-item>
@ -156,7 +158,7 @@
<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 { isEmpty, common_styles_computer, common_img_computer, gradient_handle, padding_computer, radius_computer, background_computer, border_computer, box_shadow_computer, get_swiper_list, 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';
@ -299,7 +301,7 @@
const data_handle_list = new_list.map((item) => ({
...item,
is_home_show_goods: new_form.is_default_show_goods == '1',
content_goods: new_form.theme == '3' ? this.get_goods_content_list(item.goods, new_form, new_style) : item.goods,
content_goods: new_form.theme == '3' ? get_swiper_list(item.goods, new_form.carousel_col, new_style.rolling_fashion) : item.goods,
}))
this.setData({
form: new_form,
@ -343,43 +345,6 @@
});
}
},
get_goods_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_data_content_style(new_form, new_style) {
const spacing_value = new_style.data_content_spacing;
let spacing = '';

97
components/diy/blog-list.vue
View File

@ -40,37 +40,39 @@
<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 v-for="(item, index) in item1.split_list" :key="index" class="item oh ht-auto" :style="blog_style" :data-value="item.data.url" @tap="url_event">
<template v-if="!isEmpty(item)">
<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 :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 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>
</template>
</view>
</view>
</swiper-item>
@ -83,7 +85,7 @@
<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 { 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, get_swiper_list } 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);
@ -181,6 +183,7 @@
this.init();
},
methods: {
isEmpty,
// 初始化数据
init() {
const new_content = this.propValue.content || {};
@ -309,6 +312,8 @@
direction: name_bg_direction,
}
let location = 'position:absolute;bottom:0;left:0;right:0;'
// 每页显示的数量
const num = Number(temp_carousel_col) + 1;
// 轮播宽度
this.setData({
// 滚动时间
@ -322,43 +327,9 @@
// 博客内容高度
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)
blog_img_style: background_computer(blog_data),
blog_carousel_list: get_swiper_list(this.data_list, num, new_style.rolling_fashion),
});
// 博客轮播数据
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) {

59
components/diy/custom.vue
View File

@ -8,11 +8,13 @@
<view class="flex-row flex-wrap" :style="'row-gap:' + new_style.row_gap + 'px;column-gap:' + new_style.column_gap + 'px;'">
<view v-for="(item, index) in data_source_content_list" :key="index" class="ht-auto" :style="gap_width">
<view v-for="(item1, index1) in item.split_list" :key="index1">
<view :style="style_chunk_container">
<view class="wh-auto ht-auto oh" :style="style_chunk_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propFieldList="field_list" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
<template v-if="!isEmpty(item1)">
<view :style="style_chunk_container">
<view class="wh-auto ht-auto oh" :style="style_chunk_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propFieldList="field_list" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</view>
</view>
</view>
</template>
</view>
</view>
</view>
@ -22,9 +24,11 @@
<swiper-item v-for="(item, index) in data_source_content_list" :key="index">
<view :class="form.data_source_direction != 'horizontal' ? 'ht-auto ' : 'flex-row ht-auto'" :style="form.data_source_direction == 'horizontal' ? 'column-gap:' + new_style.column_gap + 'px;' : ''">
<view v-for="(item1, index1) in item.split_list" :key="index1" class="wh-auto ht-auto" :style="style_chunk_container + swiper_width + (form.data_source_direction == 'horizontal' ? gap_width : 'margin-bottom:' + content_outer_spacing_magin)">
<view class="wh-auto ht-auto oh" :style="style_chunk_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propFieldList="field_list" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</view>
<template v-if="!isEmpty(item1)">
<view class="wh-auto ht-auto oh" :style="style_chunk_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propFieldList="field_list" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</view>
</template>
</view>
</view>
</swiper-item>
@ -70,7 +74,7 @@
</template>
<script>
import { common_styles_computer, common_img_computer, percentage_count, isEmpty, get_indicator_style, get_indicator_location_style, border_width } from '@/common/js/common/common.js';
import { common_styles_computer, common_img_computer, percentage_count, isEmpty, get_indicator_style, get_indicator_location_style, border_width, get_swiper_list } from '@/common/js/common/common.js';
import dataRendering from '@/components/diy/modules/custom/data-rendering.vue';
const app = getApp();
var system = app.globalData.get_system_info(null, null, true);
@ -210,7 +214,7 @@
list = new_form.data_source_content?.data_list || [];
}
// 数组处理
const new_list = list.length > 0 ? this.get_list(list, new_form, new_style) : [];
const new_list = list.length > 0 ? get_swiper_list(list, new_form.data_source_carousel_col, new_style.rolling_fashion, new_form.data_source_direction != 'vertical') : [];
// 初始化数据
const { common_style, data_content_style, data_style } = new_style;
// 外层左右间距
@ -274,43 +278,6 @@
field_list: new_form?.field_list || [],
});
},
get_list(list, form, new_style) {
// 深拷贝一下，确保不会出现问题
const cloneList = JSON.parse(JSON.stringify(list));
if (new_style.rolling_fashion != 'translation' && form.data_source_direction != 'vertical') {
// 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
if (cloneList.length > 0) {
// 每页显示的数量
const num = form.data_source_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;
}
},
slideChange(e) {
this.setData({
actived_index: e.detail.current,

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

@ -115,60 +115,62 @@
<swiper-item v-for="(item1, index1) in shop_content_list" :key="index1">
<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)">
<view class="oh pr" :class="'flex-img' + theme">
<view v-if="!isEmpty(item.new_cover)" :class="'flex-img' + theme">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
<view v-else :class="'flex-img' + theme">
<imageEmpty :propImageSrc="item.images" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
<!-- 角标 -->
<subscriptIndex :propValue="propValue"></subscriptIndex>
</view>
</block>
<view v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('plugins_view_icon') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
<view class="flex-col gap-10 top-title">
<view v-if="is_show('title') || (['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc'))" class="flex-col" :style="{ gap: new_style.title_simple_desc_spacing * 2 + 'rpx' }">
<view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
<view v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" :class="form.simple_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="simple_desc">{{ item.simple_desc }}</view>
</view>
<view v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
<view v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius text-size-xsss padding-horizontal-xs" :style="{ background: icon_data.bg_color, color: icon_data.color, border: '1rpx solid' + (!isEmpty(icon_data.br_color) ? icon_data.br_color : icon_data.bg_color) }">{{ icon_data.name }}</view>
</view>
</view>
<view class="flex-row align-c jc-sb">
<view class="flex-row align-c nowrap">
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
<text :style="price_symbol">{{ item.show_price_symbol }}</text>
<text :style="price_style">{{ item.min_price }}</text>
<text v-if="is_show('price_unit')" :style="price_unit">{{ item.show_price_unit }}</text>
<template v-if="!isEmpty(item)">
<view :class="layout_type" :style="layout_img_style">
<block v-if="!isEmpty(item)">
<view class="oh pr" :class="'flex-img' + theme">
<view v-if="!isEmpty(item.new_cover)" :class="'flex-img' + theme">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex">
<!-- <image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image> -->
<text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="original_price">
{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<block v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
</block>
</text>
<view v-else :class="'flex-img' + theme">
<imageEmpty :propImageSrc="item.images" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</view>
<!-- 角标 -->
<subscriptIndex :propValue="propValue"></subscriptIndex>
</view>
</block>
<view v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('plugins_view_icon') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col flex-1 jc-sb content gap-10" :style="content_style">
<view class="flex-col gap-10 top-title">
<view v-if="is_show('title') || (['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc'))" class="flex-col" :style="{ gap: new_style.title_simple_desc_spacing * 2 + 'rpx' }">
<view v-if="is_show('title')" :class="text_line" :style="title_style">{{ item.title }}</view>
<view v-if="['0', '1', '2', '3', '5'].includes(theme) && is_show('simple_desc')" :class="form.simple_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="simple_desc">{{ item.simple_desc }}</view>
</view>
<view v-if="show_content && is_show('plugins_view_icon') && !isEmpty(item.plugins_view_icon_data)" class="flex-row gap-5 align-c">
<view v-for="(icon_data, icon_index) in item.plugins_view_icon_data" :key="icon_index" class="radius text-size-xsss padding-horizontal-xs" :style="{ background: icon_data.bg_color, color: icon_data.color, border: '1rpx solid' + (!isEmpty(icon_data.br_color) ? icon_data.br_color : icon_data.bg_color) }">{{ icon_data.name }}</view>
</view>
</view>
<view v-if="(form.is_shop_show == '1' && form.shop_button_effect == '1' && item.is_error == 0) || (form.is_shop_show == '1' && form.shop_button_effect == '0')" class="pr" :data-index="index1" :data-split-index="index" @tap.stop="goods_button_event">
<block v-if="form.shop_type == 'text'">
<view class="plr-11 padding-vertical-xs round" :style="button_style + ('color:' + new_style.shop_button_text_color)">{{ form.shop_button_text }}</view>
</block>
<view v-else class="round padding-horizontal-sm ptb-5" :style="button_gradient">
<iconfont :name="'icon-' + (!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart')" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size * 2 + 'rpx'" propContainerDisplay="flex"></iconfont>
<view class="flex-row align-c jc-sb">
<view class="flex-row align-c nowrap">
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="'color:' + new_style.shop_price_color">
<text :style="price_symbol">{{ item.show_price_symbol }}</text>
<text :style="price_style">{{ item.min_price }}</text>
<text v-if="is_show('price_unit')" :style="price_unit">{{ item.show_price_unit }}</text>
</view>
<view v-if="show_content && is_show('original_price') && !isEmpty(item.min_original_price)" class="text-size-xss flex">
<!-- <image v-if="form.static_img.length > 0" class="original-price-left" :src="form.static_img[0].url" model="widthFix"></image> -->
<text :class="['original-price text-line-1', { 'flex-1': form.is_price_solo == '1' }]" :style="original_price">
{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<block v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
</block>
</text>
</view>
</view>
<view v-if="form.shop_button_effect == '1'" class="cart-badge-icon pa badge-style">
<component-badge :propNumber="item.user_cart_count || 0"></component-badge>
<view v-if="(form.is_shop_show == '1' && form.shop_button_effect == '1' && item.is_error == 0) || (form.is_shop_show == '1' && form.shop_button_effect == '0')" class="pr" :data-index="index1" :data-split-index="index" @tap.stop="goods_button_event">
<block v-if="form.shop_type == 'text'">
<view class="plr-11 padding-vertical-xs round" :style="button_style + ('color:' + new_style.shop_button_text_color)">{{ form.shop_button_text }}</view>
</block>
<view v-else class="round padding-horizontal-sm ptb-5" :style="button_gradient">
<iconfont :name="'icon-' + (!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart')" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size * 2 + 'rpx'" propContainerDisplay="flex"></iconfont>
</view>
<view v-if="form.shop_button_effect == '1'" class="cart-badge-icon pa badge-style">
<component-badge :propNumber="item.user_cart_count || 0"></component-badge>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
</view>
</view>
</swiper-item>
@ -181,7 +183,7 @@
<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 { isEmpty, common_styles_computer, common_img_computer, gradient_handle, padding_computer, radius_computer, background_computer, border_computer, box_shadow_computer, old_margin, margin_computer, get_swiper_list } 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 componentBadge from '@/components/badge/badge';
@ -376,49 +378,12 @@
price_symbol: !isEmpty(new_style.shop_price_symbol_color) ? this.trends_config(new_style, 'price_symbol') : 'font-size: 18rpx;color: #EA3323;' ,
price_unit: !isEmpty(new_style.shop_price_unit_color) ? this.trends_config(new_style, 'price_unit') : 'font-size: 18rpx;color: #EA3323;',
original_price: this.trends_config(new_style, 'original_price'),
shop_content_list: this.get_shop_content_list(new_list, new_form, new_style),
shop_content_list: get_swiper_list(new_list, new_form.carousel_col, new_style.rolling_fashion),
slides_per_group: new_style.rolling_fashion == 'translation' ? new_form.carousel_col : 1,
img_size: img_style,
});
}
},
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_text_line(form) {
let line = '';
if (['1', '6'].includes(form.theme)) {

39
components/diy/modules/custom/model-custom-group.vue
View File

@ -204,7 +204,7 @@
if (is_data_source_id.length > 0) {
const list = this.get_data_source_content_list(this.propSourceList, new_form);
// 数据来源的内容
new_list = list.length > 0 ? this.get_list(list, new_form, new_style) : [];
new_list = list.length > 0 ? get_swiper_list(list, new_form.data_source_carousel_col, new_style.rolling_fashion, new_form.data_source_direction != 'vertical') : [];
} else {
if (!isEmpty(this.propSourceList)) {
const new_source_list = [ this.propSourceList ];
@ -315,43 +315,6 @@
// 如果当前对象存在且拥有下一个属性键，则继续访问；否则返回空字符串
return keys.reduce((o, key) => (o != null && o[key] != null ? o[key] : []), obj) ?? [];
},
get_list(list, form, new_style) {
// 深拷贝一下，确保不会出现问题
const cloneList = JSON.parse(JSON.stringify(list));
if (new_style.rolling_fashion != 'translation' && form.data_source_direction != 'vertical') {
// 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
if (cloneList.length > 0) {
// 每页显示的数量
const num = form.data_source_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;
}
},
slideChange(e) {
this.setData({
actived_index: e.detail.current,

59
components/diy/modules/data-magic/custom/index.vue
View File

@ -6,11 +6,13 @@
<view class="flex-row flex-wrap" :style="'row-gap:' + new_style.row_gap + 'px;column-gap:' + new_style.column_gap + 'px;'">
<view v-for="(item, index) in data_source_content_list" :key="index" class="ht-auto" :style="gap_width">
<view v-for="(item1, index1) in item.split_list" :key="index1">
<view :style="style_container">
<view class="wh-auto ht-auto oh" :style="style_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
<template v-if="!isEmpty(item1)">
<view :style="style_container">
<view class="wh-auto ht-auto oh" :style="style_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</view>
</view>
</view>
</template>
</view>
</view>
</view>
@ -20,9 +22,11 @@
<swiper-item v-for="(item, index) in data_source_content_list" :key="index">
<view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'" :style="form.data_source_direction == 'horizontal' ? 'column-gap:' + new_style.column_gap + 'px;' : ''">
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container + swiper_width + (form.data_source_direction == 'horizontal' ? gap_width : 'margin-bottom:' + content_outer_spacing_magin)">
<view class="wh-auto ht-auto oh" :style="style_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</view>
<template v-if="!isEmpty(item1)">
<view class="wh-auto ht-auto oh" :style="style_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="index1" :propSourceList="item1" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</view>
</template>
</view>
</view>
</swiper-item>
@ -55,7 +59,7 @@
</template>
<script>
import { padding_computer, isEmpty, margin_computer, gradient_computer, radius_computer, background_computer, common_styles_computer, common_img_computer, border_width, box_shadow_computer, border_computer, old_border_and_box_shadow, old_margin, old_padding, old_radius } from '@/common/js/common/common.js';
import { padding_computer, isEmpty, margin_computer, gradient_computer, radius_computer, background_computer, common_styles_computer, common_img_computer, border_width, box_shadow_computer, border_computer, old_border_and_box_shadow, old_margin, old_padding, old_radius, get_swiper_list } from '@/common/js/common/common.js';
import dataRendering from '@/components/diy/modules/custom/data-rendering.vue';
const app = getApp();
@ -179,7 +183,7 @@ export default {
} else {
list = new_form.data_source_content.data_list;
}
const new_list = list.length > 0 ? this.get_list(list, new_form, new_style) : [];
const new_list = list.length > 0 ? get_swiper_list(list, new_form.data_source_carousel_col, new_style.rolling_fashion, new_form.data_source_direction != 'vertical') : [];
// 计算宽度
const { padding_left, padding_right, padding_top, padding_bottom } = data_chunk_padding;
const { margin_left, margin_right, margin_bottom, margin_top } = data_chunk_margin;
@ -239,43 +243,6 @@ export default {
});
}
},
get_list(list, form, new_style) {
// 深拷贝一下，确保不会出现问题
const cloneList = JSON.parse(JSON.stringify(list));
if (new_style.rolling_fashion != 'translation' && form.data_source_direction != 'vertical') {
// 如果是分页滑动情况下，根据选择的行数和每行显示的个数来区分具体是显示多少个
if (cloneList.length > 0) {
// 每页显示的数量
const num = form.data_source_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;
}
},
slideChange(e) {
this.$emit('onCarouselChange', e.detail.current, this.propDataIndex);
},

91
components/diy/realstore.vue
View File

@ -20,8 +20,8 @@
<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 v-if="(item.alias || null) != null" class="nowrap" :style="shop_label_style">{{ item.alias }}</view>
<view class="text-line-1" :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">
@ -76,33 +76,35 @@
<swiper-item v-for="(item1, index1) in realstore_content_list" :key="index1">
<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)">
<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>
<template v-if="!isEmpty(item)">
<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>
<view v-else class="wh-auto ht-auto">
<imageEmpty :propImageSrc="item.logo" :propStyle="content_img_radius" propErrorStyle="width: 100rpx;height: 100rpx;"></imageEmpty>
</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" class="nowrap" :style="shop_label_style">{{ item.alias }}</view>
<view class="text-line-1" :style="title_style">{{ item.name }}</view>
</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 v-if="!isEmpty(item.status_info) && !isEmpty(item.status_info.time)" class="flex-1 flex-row gap-2 align-c">
<imgOrIconOrText :propValue="propValue" propType="time" />
<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>
</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 class="flex-row jc-sb align-c">
<view v-if="!isEmpty(item.status_info) && !isEmpty(item.status_info.time)" class="flex-1 flex-row gap-2 align-c">
<imgOrIconOrText :propValue="propValue" propType="time" />
<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>
</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>
</template>
</view>
</view>
</swiper-item>
@ -115,7 +117,7 @@
<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 { isEmpty, common_styles_computer, common_img_computer, gradient_handle, padding_computer, radius_computer, background_computer, border_computer, box_shadow_computer, get_swiper_list, 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';
@ -257,7 +259,7 @@
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),
realstore_content_list: get_swiper_list(new_list, new_form.carousel_col, new_style.rolling_fashion),
img_size: img_style,
shop_label_style: this.get_shop_label_style(new_style),
border_style: this.get_border_style(new_style),
@ -283,43 +285,6 @@
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 = ``;

8
components/diy/salerecords.vue
View File

@ -2,7 +2,7 @@
<view class="oh" :style="style_container">
<view :style="style_img_container + 'height:' + swiper_outer_height * 2 + 'rpx;'">
<template v-if="['translation', 'vertical'].includes(form.rotation_direction)">
<swiper circular="true" vertical="true" :autoplay="form.is_roll == '1'" :interval="form.rotation_direction == 'vertical' ? swiper_interval_time : interval_time" :duration="form.rotation_direction == 'vertical' ? interval_time : 1000" :easing-function="form.rotation_direction == 'vertical' ? 'linear' : 'default'" :style="'height:' + swiper_height * 2 + 'rpx;'" :display-multiple-items="slides_per_group">
<swiper circular="true" vertical="true" :autoplay="form.is_roll == '1'" :acceleration="true" :interval="form.rotation_direction == 'vertical' ? swiper_interval_time : interval_time" :duration="form.rotation_direction == 'vertical' ? interval_time : 1000" :easing-function="form.rotation_direction == 'vertical' ? 'linear' : 'default'" :style="'height:' + swiper_height * 2 + 'rpx;'" :display-multiple-items="slides_per_group">
<swiper-item v-for="(item, index) in list" :key="index">
<view class="flex-row align-c" :style="'gap:' + new_style.content_spacing * 2 + 'rpx;margin-bottom:' + new_style.content_spacing * 2 + 'rpx;'">
<template v-if="!isEmpty(item) && is_show('head')">
@ -24,7 +24,7 @@
<view class="swiper-free-mode swiper-horizontal-free-mode" :style="'height:' + swiper_height * 2 + 'rpx;'">
<view v-for="(item, index) in swiper_new_list" :key="index" :style="'margin-bottom:' + (index < swiper_new_list.length - 1 ? new_style.data_spacing * 2 : 0) + 'rpx;'">
<template v-if="!isEmpty(item.split_list)">
<swiper circular="true" autoplay="true" :interval="swiper_interval_time" :duration="interval_time + (1000 * index)" easing-function="linear" :style="'height:' + new_swiper_height * 2 + 'rpx;'" :data-index="index" :data-value="item.split_list.length" @change="swiper_change">
<swiper circular="true" autoplay="true" :acceleration="true" :interval="swiper_interval_time" :duration="interval_time + (1000 * index)" easing-function="linear" :style="'height:' + new_swiper_height * 2 + 'rpx;'" :data-index="index" :data-value="item.split_list.length" @change="swiper_change">
<swiper-item v-for="(new_item, new_index) in item.split_list" :key="new_index">
<view :style="swiper_horizontal_container + 'margin-left:' + (new_index == 0 && swiper_margin_left_list[index].is_left ? slides_offset_before : 0) + 'px;'">
<view class="flex-row align-c" :style="swiper_horizontal_img_container">
@ -36,7 +36,7 @@
</view>
<text v-if="is_show('time')" class="nowrap" :style="time_style">{{ new_item.add_time }}</text>
</view>
</view>
</view>
</swiper-item>
</swiper>
</template>
@ -196,7 +196,7 @@
// 横向时的显示内容
get_swiper_horizontal_container(new_style) {
const { content_color_list, content_direction, content_radius } = new_style
return gradient_handle(content_color_list, content_direction) + radius_computer(content_radius) + 'margin-right:' + new_style.data_spacing * 2 + 'rpx';
return gradient_handle(content_color_list, content_direction) + radius_computer(content_radius) + 'margin-right:' + new_style.data_spacing * 2 + 'rpx;';
},
// 横向时的图片显示内容
get_swiper_horizontal_img_container(new_style) {

148
components/diy/seckill.vue
View File

@ -108,65 +108,67 @@
<swiper-item v-for="(item1, index1) in list" :key="index1">
<view class="wh-auto ht-auto" :class="{ 'flex-row': new_style.rolling_fashion != 'translation' }" :style="new_style.rolling_fashion != 'translation' ? 'gap:' + content_outer_spacing_magin : ''">
<view v-for="(item, index) in item1.split_list" :key="index" :style="layout_style + content_radius + (new_style.rolling_fashion != 'translation' ? layout_type_style : 'margin-right:' + content_outer_spacing_magin + ';height: 100%;whith: 100%')" :data-value="item.goods_url" @tap="url_event">
<view :class="layout_type" :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.images" :propStyle="content_img_radius" propErrorStyle="width:100rpx; height: 100rpx;"></imageEmpty>
</view>
<!-- 角标 -->
<subscriptIndex :propValue="propValue"></subscriptIndex>
</view>
</template>
<view v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col gap-10 wh-auto flex-1 jc-sb" :style="content_style">
<view class="flex-col gap-10 wh-auto">
<!-- 标题 -->
<view v-if="is_show('title') || is_show('simple_desc')" class="flex-col" :style="{'gap': new_style.title_simple_desc_spacing * 2 + 'rpx' }">
<view v-if="is_show('title')" :style="title_style" class="text-line-2">{{ item.title }}</view>
<view v-if="is_show('simple_desc')" class="text-line-1" :style="simple_desc">{{ item.simple_desc }}</view>
</view>
<!-- 进度条 -->
<!-- <view v-if="form.shop_style_type == '1'" class="flex-row align-c gap-6">
<view class="re flex-1">
<view class="slide-bottom" :style="{ 'background': new_style.progress_bg_color }"></view>
<view class="slide-top" :style="'width: 51%;' + slide_active_color ">
<view class="slide-top-icon round" :style="{ 'background': new_style.progress_button_color}"><icon name="a-miaosha" :color="new_style.progress_button_icon_color" size="9"></icon></view>
<template v-if="!isEmpty(item)">
<view :class="layout_type" :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>
<text class="text-size-xss" :style="{ 'color': new_style.progress_text_color }">已抢51%</text>
</view> -->
</view>
<view class="flex-row align-e gap-10 jc-sb">
<view class="flex-col gap-5">
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="{ color: new_style.shop_price_color }">
<text v-if="form.shop_style_type == '1'" class="text-size-xss pr-4">{{ form.seckill_pirce_title ? form.seckill_pirce_title : ''}}</text>
<text :style="price_symbol">{{ item.show_price_symbol }}</text>
<text :style="price_style">{{ item.min_price }}</text>
<text v-if="is_show('price_unit')" :style="price_unit">{{ item.show_price_unit }}</text>
</view>
<view v-if="is_show('original_price') && !isEmpty(item.min_original_price)" class="size-11 flex" :style="original_price">
<text class="original-price text-line-1 flex-1">
{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<template v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
</template>
</text>
<view v-else class="wh-auto ht-auto">
<imageEmpty :propImageSrc="item.images" :propStyle="content_img_radius" propErrorStyle="width:100rpx; height: 100rpx;"></imageEmpty>
</view>
<!-- 角标 -->
<subscriptIndex :propValue="propValue"></subscriptIndex>
</view>
<view v-if="form.is_shop_show == '1'">
<template v-if="form.shop_type == 'text'">
<view class="plr-11 padding-vertical-xs round" :style="button_style + 'color:' + new_style.shop_button_text_color">{{ form.shop_button_text }}</view>
</template>
<view v-else class="round padding-horizontal-sm ptb-5" :styles="button_gradient">
<iconfont :name="'icon-' + (!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart')" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size * 2 + 'rpx'" propContainerDisplay="flex"></iconfont>
</template>
<view v-if="is_show('title') || is_show('simple_desc') || is_show('price') || is_show('original_price') || form.is_shop_show == '1'" class="flex-col gap-10 wh-auto flex-1 jc-sb" :style="content_style">
<view class="flex-col gap-10 wh-auto">
<!-- 标题 -->
<view v-if="is_show('title') || is_show('simple_desc')" class="flex-col" :style="{'gap': new_style.title_simple_desc_spacing * 2 + 'rpx' }">
<view v-if="is_show('title')" :style="title_style" class="text-line-2">{{ item.title }}</view>
<view v-if="is_show('simple_desc')" class="text-line-1" :style="simple_desc">{{ item.simple_desc }}</view>
</view>
<!-- 进度条 -->
<!-- <view v-if="form.shop_style_type == '1'" class="flex-row align-c gap-6">
<view class="re flex-1">
<view class="slide-bottom" :style="{ 'background': new_style.progress_bg_color }"></view>
<view class="slide-top" :style="'width: 51%;' + slide_active_color ">
<view class="slide-top-icon round" :style="{ 'background': new_style.progress_button_color}"><icon name="a-miaosha" :color="new_style.progress_button_icon_color" size="9"></icon></view>
</view>
</view>
<text class="text-size-xss" :style="{ 'color': new_style.progress_text_color }">已抢51%</text>
</view> -->
</view>
<view class="flex-row align-e gap-10 jc-sb">
<view class="flex-col gap-5">
<view v-if="is_show('price') && !isEmpty(item.min_price)" class="num" :style="{ color: new_style.shop_price_color }">
<text v-if="form.shop_style_type == '1'" class="text-size-xss pr-4">{{ form.seckill_pirce_title ? form.seckill_pirce_title : ''}}</text>
<text :style="price_symbol">{{ item.show_price_symbol }}</text>
<text :style="price_style">{{ item.min_price }}</text>
<text v-if="is_show('price_unit')" :style="price_unit">{{ item.show_price_unit }}</text>
</view>
<view v-if="is_show('original_price') && !isEmpty(item.min_original_price)" class="size-11 flex" :style="original_price">
<text class="original-price text-line-1 flex-1">
{{ item.show_original_price_symbol }}{{ item.min_original_price }}
<template v-if="is_show('original_price_unit')">
{{ item.show_original_price_unit }}
</template>
</text>
</view>
</view>
<view v-if="form.is_shop_show == '1'">
<template v-if="form.shop_type == 'text'">
<view class="plr-11 padding-vertical-xs round" :style="button_style + 'color:' + new_style.shop_button_text_color">{{ form.shop_button_text }}</view>
</template>
<view v-else class="round padding-horizontal-sm ptb-5" :styles="button_gradient">
<iconfont :name="'icon-' + (!isEmpty(form.shop_button_icon_class) ? form.shop_button_icon_class : 'cart')" :color="new_style.shop_icon_color" :size="new_style.shop_icon_size * 2 + 'rpx'" propContainerDisplay="flex"></iconfont>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
</view>
</view>
</swiper-item>
@ -174,7 +176,6 @@
</template>
</view>
</view>
</view>
</view>
</view>
@ -182,7 +183,7 @@
<script>
const app = getApp();
import { background_computer, common_styles_computer, common_img_computer, gradient_computer, gradient_handle, padding_computer, radius_computer, isEmpty, margin_computer, box_shadow_computer, border_computer, old_margin, old_border_and_box_shadow } from '@/common/js/common/common.js';
import { background_computer, common_styles_computer, common_img_computer, gradient_computer, gradient_handle, padding_computer, radius_computer, isEmpty, margin_computer, box_shadow_computer, border_computer, old_margin, old_border_and_box_shadow, get_swiper_list } from '@/common/js/common/common.js';
import imageEmpty from '@/components/diy/modules/image-empty.vue';
import subscriptIndex from '@/components/diy/modules/subscript/index.vue';
var system = app.globalData.get_system_info(null, null, true);
@ -379,7 +380,7 @@
price_symbol: !isEmpty(new_style.shop_price_symbol_color) ? this.trends_config(new_style, 'price_symbol') : 'font-size: 18rpx;color: #EA3323;' ,
price_unit: !isEmpty(new_style.shop_price_unit_color) ? this.trends_config(new_style, 'price_unit') : 'font-size: 18rpx;color: #EA3323;',
original_price: this.trends_config(new_style, 'original_price'),
list: this.get_shop_content_list(new_list, new_form, new_style),
list: get_swiper_list(new_list, new_form.carousel_col, new_style.rolling_fashion),
shop_container: this.get_shop_container(new_style),
shop_img_container: this.get_shop_img_container(new_style),
sckill_list: new_list,
@ -399,43 +400,6 @@
const back = { background_img: shop_content_background_img, background_img_style: shop_content_background_img_style };
return padding_computer(shop_content_padding) + background_computer(back);
},
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_time_bg(new_style) {
const { countdown_bg_color_list, countdown_direction } = new_style;
// 渐变

91
components/diy/shop.vue
View File

@ -17,16 +17,17 @@
</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">
<view class="flex-row align-c" :style="title_style">
<template v-if="(item.icon_list || null) != null && item.icon_list.length > 0">
<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;'" />
<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;'" />
</template>
</template>
</template>{{ item.name }}
</template>
<text class="flex-1 text-line-1">{{ item.name }}</text>
</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>
<text v-if="form.shop_desc == '1'" :class="form.shop_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="desc_style">{{ item.describe }}</text>
</view>
<view v-if="theme == '0'" class="flex-row align-c">
<imgOrIconOrText :propValue="propValue" propType="right" />
@ -40,30 +41,33 @@
<swiper-item v-for="(item1, index1) in shop_content_list" :key="index1">
<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)">
<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>
<template v-if="!isEmpty(item)">
<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>
<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-if="(item.icon_list || null) != null && item.icon_list.length > 0">
<template v-for="(item2, index2) in item.icon_list">
<template v-if="!isEmpty(item2.icon)">
<img :key="index2" :src="item2.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>
<view class="flex-col jc-sb gap-10" :style="content_style">
<view class="flex-row align-c" :style="title_style">
<template v-if="(item.icon_list || null) != null && item.icon_list.length > 0">
<template v-for="(item2, index2) in item.icon_list">
<template v-if="!isEmpty(item2.icon)">
<img :key="index2" :src="item2.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;'" />
</template>
</template>
</template>
</template>{{ item.name }}
<text class="flex-1 text-line-1">{{ item.name }}</text>
</view>
<text v-if="form.shop_desc == '1'" :class="form.shop_desc_row == '2' ? 'text-line-2' : 'text-line-1'" :style="desc_style">{{ item.describe }}</text>
</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>
</template>
</view>
</view>
</swiper-item>
@ -76,7 +80,7 @@
<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 { isEmpty, common_styles_computer, common_img_computer, gradient_handle, padding_computer, radius_computer, background_computer, border_computer, box_shadow_computer, get_swiper_list, 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';
@ -211,7 +215,7 @@
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),
shop_content_list: get_swiper_list(new_list, new_form.carousel_col, new_style.rolling_fashion),
title_img_style: this.get_title_img_style(new_style),
img_size: img_style,
layout_style: this.get_layout_style(new_form, new_style),
@ -235,43 +239,6 @@
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_layout_style(form, new_style) {
const { shop_margin, shop_radius, shop_color_list, shop_direction } = new_style;