bingyi/shopxo-uniapp
1
0
Fork 0
mirror of https://gitee.com/zongzhige/shopxo-uniapp.git synced 2026-07-05 21:32:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev-yxl' of gitee.com:zongzhige/shopxo-uniapp into dev

Browse Source
This commit is contained in:
gongfuxiang
2024-12-10 16:38:02 +08:00
parent 16753f8afe 7850e2dbb9
commit 2d4bc1bebc
12 changed files with 315 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
common/js/common/common.js
View File

@ -13,6 +13,72 @@ export function is_obj_empty(obj) {
return Object.keys(obj).length === 0;
}
/**
* 获取嵌套对象的属性值
*
* 该函数旨在通过指定的属性路径获取嵌套对象中的属性值它接受一个对象和一个属性路径字符串作为参数，
* 并返回对应路径的属性值如果输入的路径无效或对象中不存在该路径，则返回空字符串
*
* @param {Object} obj - 要从中获取属性的嵌套对象
* @param {string} path - 属性路径，使用点号分隔的字符串表示
* @returns {string} - 返回指定路径的属性值，如果路径无效则返回空字符串
*/
export function get_nested_property(obj, path) {
// 检查路径参数是否为字符串且非空，若不满足条件则返回空字符串
if (typeof path !== 'string' || !path) return '';
// 将属性路径字符串拆分为属性键数组
const keys = path.split('.');
// 使用reduce方法遍历属性键数组，逐层访问对象属性
// 如果当前对象存在且拥有下一个属性键，则继续访问；否则返回空字符串
return keys.reduce((o, key) => (o && o[key] ? o[key] : ''), obj) || '';
}
/**
* 根据数据源链接ID和属性源列表生成自定义链接
*
* @param {string} data_source_link_id - 数据源链接ID，可以是单个ID或多个ID以分号分隔
* @param {object} propSourceList - 包含数据源的属性列表
* @param {object} source_link_option - 链接生成的可选配置，包括首尾添加的字符串和连接符
* @returns {string} 生成的自定义链接URL
*/
export function get_custom_link(data_source_link_id, propSourceList, source_link_option) {
let url = '';
if (!data_source_link_id) {
return '';
}
// 判断数据源链接ID是否包含分号，包含则表示有多个ID
if (data_source_link_id.includes(';')) {
// 分割数据源链接ID，处理多个ID
const ids = data_source_link_id.split(';');
let source_url = '';
// 遍历每个ID，获取对应的属性值并拼接成URL
ids.forEach((item, index) => {
// 判断数据源列表是否为空
if (!isEmpty(propSourceList.data)) {
// 从数据源列表的data属性中获取嵌套属性值，并使用指定的连接符连接
source_url += get_nested_property(propSourceList.data, item) + (index != ids.length -1 ? (source_link_option?.join || '') : '');
} else {
// 直接从数据源列表中获取嵌套属性值，并使用指定的连接符连接
source_url += get_nested_property(propSourceList, item) + (index != ids.length -1 ? (source_link_option?.join || '') : '');
}
});
url = source_url;
} else {
// 处理单个ID的情况
if (!isEmpty(propSourceList.data)) {
// 从数据源列表的data属性中获取嵌套属性值作为URL
url = get_nested_property(propSourceList.data, data_source_link_id);
} else {
// 直接从数据源列表中获取嵌套属性值作为URL
url = get_nested_property(propSourceList, data_source_link_id);
}
}
// 返回最终的URL，添加首尾的可选字符串
return (source_link_option?.first || '') + url + (source_link_option?.last || '');
}
/**
* 指示器的样式
*

85
components/diy/custom.vue
View File

@ -5,7 +5,7 @@
<view v-for="(item, index) in data_source_content_list" :key="index">
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container">
<view class="wh-auto ht-auto" :style="style_chunk_img_container">
<dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :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>
@ -16,7 +16,7 @@
<view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'">
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_chunk_container + swiper_width">
<div class="w h" :style="style_chunk_img_container">
<dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</div>
</view>
</view>
@ -37,7 +37,7 @@
<template v-else>
<view :style="style_chunk_container">
<view class="wh-auto ht-auto" :style="style_chunk_img_container">
<dataRendering :propCustomList="form.custom_list" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
</view>
</view>
</template>
@ -88,70 +88,12 @@
div_height: 0,
custom_list_length: 0,
source_list: {
goods: {
// 存放手动输入的id
data_ids: [],
// 手动输入
data_list: [],
// 自动
data_auto_list: [],
// 商品类型
data_type: '0',
// 商品分类
category_ids: [],
// 品牌
brand_ids: [],
// 显示数量
number: 4,
// 排序类型
order_by_type: '0',
// 排序规则
order_by_rule: '0',
},
article: {
// 存放手动输入的id
data_ids: [],
// 手动输入
data_list: [],
// 自动
data_auto_list: [],
data_type: '0',
number: 4,
order_by_type: '0',
order_by_rule: '0',
// 文章封面
is_cover: '0',
// 分类id
category_ids: [],
},
brand: {
// 存放手动输入的id
data_ids: [],
// 手动输入
data_list: [],
// 自动
data_auto_list: [],
// 商品类型
data_type: '0',
// 商品分类
category_ids: [],
// 品牌
brand_ids: [],
// 显示数量
number: 4,
// 排序类型
order_by_type: '0',
// 排序规则
order_by_rule: '0',
},
common: {
// 存放手动输入的id
data_ids: [],
// 手动输入
data_list: [],
// 自动
data_auto_list: [],
}
// 存放手动输入的id
data_ids: [],
// 手动输入
data_list: [],
// 自动
data_auto_list: [],
},
data_source_content_list: [],
data_source: '',
@ -167,6 +109,7 @@
indicator_location_style: '',
indicator_style: '',
slides_per_view: 1,
show_data: { data_key: 'id', data_name: 'name' },
old_data_style: {
color_list: [{ color: 'rgb(244, 252, 255)', color_percentage: undefined }],
direction: '180deg',
@ -208,12 +151,7 @@
if (!Object.keys(new_form.data_source_content).includes('data_auto_list') && !Object.keys(new_form.data_source_content).includes('data_list')) {
//深拷贝一下，保留历史数据
const data = JSON.parse(JSON.stringify(new_form.data_source_content));
// 判断是否有符合条件的数据源，如何没有的话取公共数据源
if (!isEmpty(this.source_list[new_form.data_source])) {
new_form.data_source_content = this.source_list[new_form.data_source];
} else {
new_form.data_source_content = this.source_list['common'];
}
new_form.data_source_content = this.source_list;
// 如果老数组中有数据，将数据放到新数组中
if (!isEmpty(data)) {
new_form.data_source_content.data_list = [ data ];
@ -272,6 +210,7 @@
swiper_height: swiper_height,
swiper_width: swiper_width,
slides_per_view: new_style.rolling_fashion == 'translation' ? (new_form.data_source_direction != 'horizontal' ? col : new_form.data_source_carousel_col ) : 1,
show_data: new_form?.show_data || { data_key: 'id', data_name: 'name' }
});
},
get_list(list, form, new_style) {

28
components/diy/data-magic.vue
View File

@ -21,20 +21,20 @@
<view class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
</view>
<view class="w h">
<magic-carousel :propValue="item" :propGoodStyle="item.data_style" :propActived="form.style_actived" propType="product" :propDataIndex="index" @onCarouselChange="carousel_change"></magic-carousel>
<magic-carousel :propKey="propKey + index" :propValue="item" :propGoodStyle="item.data_style" :propActived="form.style_actived" propType="product" :propDataIndex="index" @onCarouselChange="carousel_change"></magic-carousel>
</view>
</view>
</template>
<template v-else-if="item.data_content.data_type == 'images'">
<div class="w h" :style="item.data_style.chunk_padding_data">
<magic-carousel :propValue="item" propType="img" :propActived="form.style_actived" :propDataIndex="index" @onCarouselChange="carousel_change"></magic-carousel>
<magic-carousel :propKey="propKey + index" :propValue="item" propType="img" :propActived="form.style_actived" :propDataIndex="index" @onCarouselChange="carousel_change"></magic-carousel>
</div>
</template>
<template v-else-if="item.data_content.data_type == 'custom'">
<customIndex :propValue="item" :propMagicScale="magic_scale" :propDataSpacing="new_style.image_spacing" :propDataIndex="index" @onCarouselChange="carousel_change"></customIndex>
<customIndex :propKey="propKey + index" :propValue="item" :propMagicScale="magic_scale" :propDataSpacing="new_style.image_spacing" :propDataIndex="index" @onCarouselChange="carousel_change"></customIndex>
</template>
<template v-else>
<videoIndex :propValue="item.data_content" :propDataStyle="item.data_style"></videoIndex>
<videoIndex :propKey="propKey + index" :propValue="item.data_content" :propDataStyle="item.data_style"></videoIndex>
</template>
<view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="['left', 'right'].includes(item.data_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="item.data_style.indicator_location_style">
<template v-if="item.data_style.indicator_style == 'num'">
@ -68,20 +68,20 @@
<view class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</view>
</view>
<view class="w h">
<magic-carousel :propValue="item" :propGoodStyle="item.data_style" propType="product" :propActived="form.style_actived" :propDataIndex="index" @onCarouselChange="carousel_change"></magic-carousel>
<magic-carousel :propKey="propKey + index" :propValue="item" :propGoodStyle="item.data_style" propType="product" :propActived="form.style_actived" :propDataIndex="index" @onCarouselChange="carousel_change"></magic-carousel>
</view>
</view>
</template>
<template v-else-if="item.data_content.data_type == 'images'">
<div class="w h" :style="item.data_style.chunk_padding_data">
<magic-carousel :propValue="item" propType="img" :propActived="form.style_actived" :propDataIndex="index" @onCarouselChange="carousel_change"></magic-carousel>
<magic-carousel :propKey="propKey + index" :propValue="item" propType="img" :propActived="form.style_actived" :propDataIndex="index" @onCarouselChange="carousel_change"></magic-carousel>
</div>
</template>
<template v-else-if="item.data_content.data_type == 'custom'">
<customIndex :propValue="item" :propMagicScale="magic_scale" :propDataSpacing="new_style.image_spacing" :propDataIndex="index" @onCarouselChange="carousel_change"></customIndex>
<customIndex :propKey="propKey + index" :propValue="item" :propMagicScale="magic_scale" :propDataSpacing="new_style.image_spacing" :propDataIndex="index" @onCarouselChange="carousel_change"></customIndex>
</template>
<template v-else>
<videoIndex :propValue="item.data_content" :propDataStyle="item.data_style"></videoIndex>
<videoIndex :propKey="propKey + index" :propValue="item.data_content" :propDataStyle="item.data_style"></videoIndex>
</template>
<view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="['left', 'right'].includes(item.data_style.indicator_new_location) ? 'indicator_up_down_location' : 'indicator_about_location'" :style="item.data_style.indicator_location_style">
<template v-if="item.data_style.indicator_style == 'num'">
@ -105,8 +105,8 @@
<script>
const app = getApp();
import magicCarousel from '@/components/diy/modules/data-magic/magic-carousel.vue';
import customIndex from '@/components/diy/modules/data-magic/custom';
import videoIndex from '@/components/diy/modules/data-magic/video';
import customIndex from '@/components/diy/modules/data-magic/custom/index.vue';
import videoIndex from '@/components/diy/modules/data-magic/video/index.vue';
import { background_computer, common_styles_computer, common_img_computer, gradient_computer, radius_computer, percentage_count, isEmpty, padding_computer, get_indicator_location_style, get_indicator_style } from '@/common/js/common/common.js';
var system = app.globalData.get_system_info(null, null, true);
var sys_width = app.globalData.window_width_handle(system.windowWidth);
@ -122,7 +122,7 @@
default: () => ({}),
},
propKey: {
type: [String,Number],
type: [String, Number],
default: '',
},
// 组件渲染的下标
@ -238,7 +238,7 @@
if (data_content.data_type == 'goods') {
data_content.list = this.commodity_list(data_content.goods_list, data_content.goods_num, data_content, data_style);
} else if (data_content.data_type == 'custom' && ['1', '2'].includes(data_content.data_source_direction)) {
} else if (data_content.data_type == 'custom' && ['vertical-scroll', 'horizontal'].includes(data_content.data_source_direction)) {
// 是自定义并且是轮播状态的时候，添加数据
const list = this.data_source_content_list(data_content);
const carousel_col = data_content?.data_source_carousel_col || 1;
@ -252,8 +252,8 @@
},
// 数据来源的内容
data_source_content_list(data_content){
if (['goods', 'article', 'brand'].includes(data_content.data_source)) {
if (data_content.data_source_content.data_type == '0') {
if (data_content.is_custom_data == '1') {
if (Number(data_content.data_source_content.data_type) === 0) {
return data_content.data_source_content.data_list;
} else {
return data_content.data_source_content.data_auto_list.map((item) => ({

29
components/diy/modules/custom/data-rendering.vue
View File

@ -2,19 +2,19 @@
<view class="wh-auto pr" :style="'height:' + propDataHeight * propScale + 'px;'">
<view v-for="(item, index) in propCustomList" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x), top: get_percentage_count(item.location.y), width: get_percentage_count(item.com_data.com_width), height: get_percentage_count(item.com_data.com_height), 'z-index': propCustomList.length - 1 > 0 ? (propCustomList.length - 1) - index : 0 }">
<template v-if="item.key == 'text'">
<model-text :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType" :data-index="propDataIndex" @url_event="url_event"></model-text>
<model-text :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :propTitleParams="propShowData.data_name" :data-index="propDataIndex" @url_event="url_event"></model-text>
</template>
<template v-else-if="item.key == 'img'">
<model-image :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType" :data-index="propDataIndex" @url_event="url_event"></model-image>
<model-image :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :propImgParams="propShowData.data_logo" :data-index="propDataIndex" @url_event="url_event"></model-image>
</template>
<template v-else-if="item.key == 'auxiliary-line'">
<model-lines :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType"></model-lines>
<model-lines :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom"></model-lines>
</template>
<template v-else-if="item.key == 'icon'">
<model-icon :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType" :data-index="propDataIndex" @url_event="url_event"></model-icon>
<model-icon :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :data-index="propDataIndex" @url_event="url_event"></model-icon>
</template>
<template v-else-if="item.key == 'panel'">
<model-panel :propKey="item.id" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propSourceType="propSourceType" :data-index="propDataIndex" @url_event="url_event"></model-panel>
<model-panel :propKey="propKey" :propValue="item.com_data" :propScale="propScale" :propSourceList="propSourceList" :propIsCustom="propIsCustom" :data-index="propDataIndex" @url_event="url_event"></model-panel>
</template>
</view>
</view>
@ -48,10 +48,6 @@ export default {
return {};
}
},
propSourceType: {
type: String,
default: ''
},
propDataHeight: {
type: Number,
default: 0,
@ -68,6 +64,21 @@ export default {
type: Number,
default: 1,
},
propIsCustom: {
type: Boolean,
default: false,
},
propShowData: {
type: Object,
default: () => ({
data_key: 'id',
data_name: 'name'
}),
},
propKey: {
type: [String, Number],
default: '',
},
},
data() {
return {};

62
components/diy/modules/custom/model-icon.vue
View File

@ -4,7 +4,7 @@
</view>
</template>
<script>
import { radius_computer, padding_computer, gradient_handle, isEmpty } from '@/common/js/common/common.js';
import { radius_computer, padding_computer, gradient_handle, isEmpty, get_nested_property, get_custom_link } from '@/common/js/common/common.js';
export default {
props: {
@ -29,9 +29,9 @@
type: Number,
default: 1,
},
propSourceType: {
type: String,
default: ''
propIsCustom: {
type: Boolean,
default: false
}
},
data() {
@ -58,33 +58,57 @@
icon_class_value = this.propValue.icon_class;
} else {
if (!isEmpty(this.propSourceList)) {
// 不输入商品， 文章和品牌时，从外层处理数据
let icon = this.propSourceList[this.propValue.data_source_id];
// 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
if (['goods', 'article', 'brand'].includes(this.propSourceType) && !isEmpty(this.propSourceList.data)) {
icon = this.propSourceList.data[this.propValue.data_source_id];
let icon = '';
// 获取数据源ID
const data_source_id = !isEmpty(this.propValue?.data_source_field?.id || '') ? this.propValue?.data_source_field?.id : this.propValue.data_source_id;
// 数据源内容
const option = this.propValue?.data_source_field?.option || {};
if (data_source_id.includes(';')) {
const ids = data_source_id.split(';');
let url = '';
ids.forEach((item, index) => {
url += this.data_handling(item) + (index != ids.length - 1 ? (option?.join || '') : '');
});
icon = url;
} else {
// 不输入商品， 文章和品牌时，从外层处理数据
icon = this.data_handling(data_source_id);
}
icon_class_value = icon;
icon_class_value = (option?.first || '') + icon + (option?.last || '');
} else {
icon_class_value = '';
}
}
let url = '';
if (!isEmpty(this.propValue.icon_link)) {
url = this.propValue.icon_link?.page || '';
} else if (!isEmpty(this.propSourceList.data)) {
url = this.propSourceList.data[this.propValue?.data_source_link] || '';
} else {
url = this.propSourceList[this.propValue?.data_source_link] || '';
}
this.setData({
form: this.propValue,
scale: this.propScale,
com_style: this.get_com_style(this.propValue, this.propScale),
icon_class: icon_class_value,
icon_url: url,
icon_url: this.get_icon_link(),
});
},
get_icon_link() {
let url = '';
if (!isEmpty(this.propValue.icon_link)) {
url = this.propValue.icon_link?.page || '';
} else {
// 获取数据源ID
const data_source_link_id = !isEmpty(this.propValue?.data_source_link_field?.id || '') ? this.propValue?.data_source_link_field?.id : this.propValue.data_source_link;
// 数据源内容
const source_link_option = this.propValue?.data_source_link_field?.option || {};
url = get_custom_link(data_source_link_id, this.propSourceList, source_link_option)
}
return url;
},
data_handling(data_source_id) {
// 不输入商品， 文章和品牌时，从外层处理数据
let icon = get_nested_property(this.propSourceList, data_source_id);
// 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
icon = get_nested_property(this.propSourceList.data, data_source_id);
}
return icon;
},
get_com_style(form, scale) {
let style = `${ gradient_handle(form.color_list, form.direction) } ${ radius_computer(form.bg_radius, scale, true) };transform: rotate(${form.icon_rotate}deg);${ padding_computer(form.icon_padding, scale, true) };`;
if (form.border_show == '1') {

75
components/diy/modules/custom/model-image.vue
View File

@ -4,7 +4,7 @@
</view>
</template>
<script>
import { percentage_count, radius_computer, isEmpty } from '@/common/js/common/common.js';
import { percentage_count, radius_computer, isEmpty, get_nested_property, get_custom_link } from '@/common/js/common/common.js';
import imageEmpty from '@/components/diy/modules/image-empty.vue';
export default {
components: {
@ -32,10 +32,14 @@
type: Number,
default: 1
},
propSourceType: {
propIsCustom: {
type: Boolean,
default: false
},
propImgParams: {
type: String,
default: ''
}
},
},
data() {
return {
@ -61,45 +65,68 @@
},
methods: {
init() {
let url = '';
if (!isEmpty(this.propValue.link)) {
url = this.propValue.link?.page || '';
} else if (!isEmpty(this.propSourceList.data)) {
url = this.propSourceList.data[this.propValue?.data_source_link] || '';
} else {
url = this.propSourceList[this.propValue?.data_source_link] || '';
}
this.setData({
form: this.propValue,
img: this.get_img_url(this.propValue),
image_style: this.get_image_style(this.propValue, this.propScale),
border_style: this.get_border_style(this.propValue, this.propScale),
img_url: url,
img_url: this.get_img_link(),
});
},
get_img_link() {
let url = '';
if (!isEmpty(this.propValue.link)) {
url = this.propValue.link?.page || '';
} else {
// 获取数据源ID
const data_source_link_id = !isEmpty(this.propValue?.data_source_link_field?.id || '') ? this.propValue?.data_source_link_field?.id : this.propValue.data_source_link;
// 数据源内容
const source_link_option = this.propValue?.data_source_link_field?.option || {};
url = get_custom_link(data_source_link_id, this.propSourceList, source_link_option)
}
return url;
},
get_img_url(form) {
if (!isEmpty(form.img[0])) {
return form.img[0];
} else {
if (!isEmpty(this.propSourceList)) {
// 不输入商品， 文章和品牌时，从外层处理数据
let image_url = this.propSourceList[form.data_source_id];
// 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
if (['goods', 'article', 'brand'].includes(this.propSourceType) && !isEmpty(this.propSourceList.data)) {
// 判断是否是同一标志
if (form.data_source_id == this.keyMap[this.propSourceType]) {
// 如果是符合条件的标志，先判断新的图片是否存在，存在就取新的图片，否则的话取原来的图片
image_url = !isEmpty(this.propSourceList.new_cover)? this.propSourceList.new_cover[0]?.url || '' : this.propSourceList.data[this.keyMap[this.propSourceType]];
} else {
image_url = this.propSourceList.data[form.data_source_id];
}
let image_url = '';
// 获取数据源ID
const data_source_id = !isEmpty(form?.data_source_field?.id || '') ? form?.data_source_field?.id : form.data_source_id;
// 数据源内容
const option = form?.data_source_field?.option || {};
if (data_source_id.includes(';')) {
const ids = data_source_id.split(';');
let url = '';
ids.forEach((item, index) => {
url += this.data_handling(item) + (index != ids.length - 1 ? (option?.join || '') : '');
});
image_url = url;
} else {
image_url = this.data_handling(data_source_id);
}
return image_url;
return (option?.first || '') + image_url + (option?.last || '');
} else {
return '';
}
}
},
data_handling(data_source_id) {
// 不输入商品， 文章和品牌时，从外层处理数据
let image_url = get_nested_property(this.propSourceList, data_source_id);
// 如果是商品,品牌，文章的图片， 其他的切换为从data中取数据
if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
// 判断是否是同一标志
if (data_source_id == this.propImgParams) {
// 如果是符合条件的标志，先判断新的图片是否存在，存在就取新的图片，否则的话取原来的图片
image_url = !isEmpty(this.propSourceList.new_cover)? this.propSourceList.new_cover[0]?.url || '' : get_nested_property(this.propSourceList.data, data_source_id);
} else {
image_url = get_nested_property(this.propSourceList.data, data_source_id);
}
}
return image_url;
},
get_image_style(form, scale) {
return `width: ${percentage_count(form.img_width, form.com_width)}; height: ${percentage_count(form.img_height, form.com_height)};transform: rotate(${form.img_rotate}deg); ${radius_computer(form.img_radius, scale, true)};`;
},

10
components/diy/modules/custom/model-panel.vue
View File

@ -4,7 +4,7 @@
</view>
</template>
<script>
import { radius_computer, background_computer, gradient_handle, isEmpty } from '@/common/js/common/common.js';
import { radius_computer, background_computer, gradient_handle, isEmpty, get_custom_link } from '@/common/js/common/common.js';
export default {
props: {
@ -52,10 +52,12 @@
let url = '';
if (!isEmpty(this.propValue.link)) {
url = this.propValue.link?.page || '';
} else if (!isEmpty(this.propSourceList.data)) {
url = this.propSourceList.data[this.propValue?.data_source_link] || '';
} else {
url = this.propSourceList[this.propValue?.data_source_link] || '';
// 获取数据源ID
const data_source_link_id = !isEmpty(this.propValue?.data_source_link_field?.id || '') ? this.propValue?.data_source_link_field?.id : this.propValue.data_source_link;
// 数据源内容
const source_link_option = this.propValue?.data_source_link_field?.option || {};
url = get_custom_link(data_source_link_id, this.propSourceList, source_link_option);
}
this.setData({
form: this.propValue,

67
components/diy/modules/custom/model-text.vue
View File

@ -11,7 +11,7 @@
</view>
</template>
<script>
import { radius_computer, padding_computer, isEmpty, gradient_handle } from '@/common/js/common/common.js';
import { radius_computer, padding_computer, isEmpty, gradient_handle, get_nested_property, get_custom_link } from '@/common/js/common/common.js';
export default {
props: {
@ -36,10 +36,14 @@
type: Number,
default: 1
},
propSourceType: {
propIsCustom: {
type: Boolean,
default: false
},
propTitleParams: {
type: String,
default: ''
}
default: 'name'
},
},
data() {
return {
@ -68,10 +72,13 @@
let url = '';
if (!isEmpty(this.propValue.text_link)) {
url = this.propValue.text_link?.page || '';
} else if (!isEmpty(this.propSourceList.data)) {
url = this.propSourceList.data[this.propValue?.data_source_link] || '';
} else {
url = this.propSourceList[this.propValue?.data_source_link] || '';
// 获取数据源ID
const data_source_link_id = !isEmpty(this.propValue?.data_source_link_field?.id || '') ? this.propValue?.data_source_link_field?.id : this.propValue.data_source_link;
// 数据源内容
const source_link_option = this.propValue?.data_source_link_field?.option || {};
// 调用方法处理数据显示
url = get_custom_link(data_source_link_id, this.propSourceList, source_link_option);
}
this.setData({
form: this.propValue,
@ -86,16 +93,44 @@
if (!isEmpty(form.text_title)) {
text = form.text_title;
} else {
text = this.propSourceList[form.data_source_id];
let text_title = '';
// 获取数据源ID
const data_source_id = !isEmpty(form?.data_source_field?.id || '') ? form?.data_source_field?.id : [ form.data_source_id ];
// 数据源内容
const option = form?.data_source_field?.option || [];
// 多选判断
if (data_source_id.length > 0) {
// 遍历取出所有的值
data_source_id.forEach(source_id => {
const sourceList = option.filter((item) => item.field == source_id);
// 根据数据源ID是否包含点号来区分处理方式
if (source_id.includes(';')) {
const ids = source_id.split(';');
let source_text = '';
ids.forEach((item, index) => {
source_text += this.data_handling(item) + (index != ids.length - 1 ? (sourceList?.join || '') : '');
});
text_title += (sourceList?.first || '') + source_text + (sourceList?.last || '');
} else {
text_title += (sourceList?.first || '') + this.data_handling(source_id) + (sourceList?.last || '');
}
});
}
// 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
if (['goods', 'article', 'brand'].includes(this.propSourceType) && !isEmpty(this.propSourceList.data)) {
// 其他的切换为从data中取数据
if (form.data_source_id == this.keyMap[this.propSourceType]) {
// 如果是符合条件的标志，先判断新的标题是否存在，存在就取新的标题，否则的话取原来的标题
text = !isEmpty(this.propSourceList.new_title) ? this.propSourceList.new_title : this.propSourceList.data[this.keyMap[this.propSourceType]];
} else {
text = this.propSourceList.data[form.data_source_id];
}
text = text_title;
}
return text;
},
data_handling(data_source_id) {
let text = get_nested_property(this.propSourceList, data_source_id);
// 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
if (this.propIsCustom && !isEmpty(this.propSourceList.data)) {
// 其他的切换为从data中取数据
if (data_source_id == this.propTitleParams) {
// 如果是符合条件的标志，先判断新的标题是否存在，存在就取新的标题，否则的话取原来的标题
text = !isEmpty(this.propSourceList.new_title) ? this.propSourceList.new_title : get_nested_property(this.propSourceList.data, data_source_id);
} else {
text = get_nested_property(this.propSourceList.data, data_source_id);
}
}
return text;

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

@ -3,7 +3,7 @@
<view v-for="(item, index) in data_source_content_list" :key="index">
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container">
<view class="custom-container wh-auto ht-auto" :style="style_img_container">
<dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :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>
@ -15,7 +15,7 @@
<view :class="form.data_source_direction != 'horizontal' ? '' : 'flex-row'">
<view v-for="(item1, index1) in item.split_list" :key="index1" :style="style_container + swiper_width">
<div class="w h" :style="style_img_container">
<dataRendering :propCustomList="form.custom_list" :propSourceList="item1" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propDataIndex="index" :propDataSplitIndex="index1" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propSourceList="item1" :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>
</div>
</view>
</view>
@ -25,7 +25,7 @@
<view v-else>
<view :style="style_container">
<view class="custom-container wh-auto ht-auto" :style="style_img_container">
<dataRendering :propCustomList="form.custom_list" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
</view>
</view>
</view>
@ -41,6 +41,10 @@ export default {
dataRendering
},
props: {
propKey: {
type: String,
default: '',
},
propValue: {
type: Object,
default: () => {
@ -77,8 +81,15 @@ export default {
// 轮播高度
swiper_height: 0,
swiper_width: 'width: 100%;',
show_data: { data_key: 'id', data_name: 'name' },
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
computed: {
get_percentage_count() {
return (num) => {
@ -138,7 +149,6 @@ export default {
// 横向的时候，根据选择的行数和每行显示的个数来区分具体是显示多少个
const swiper_width = (new_form.data_source_direction == 'horizontal' && new_style.rolling_fashion != 'translation') ? `width: ${ 100 / new_form.data_source_carousel_col }%;`: 'width: 100%;';
this.setData({
propKey: Math.random(),
form: new_form,
new_style: new_style,
div_width: width,
@ -151,6 +161,7 @@ export default {
slides_per_view: new_style.rolling_fashion == 'translation' ? (new_form.data_source_direction != 'horizontal' ? col : new_form.data_source_carousel_col) : 1,
swiper_height: swiper_height,
swiper_width: swiper_width,
show_data: new_form?.show_data || { data_key: 'id', data_name: 'name' }
});
}
},

14
components/diy/modules/data-magic/magic-carousel.vue
View File

@ -10,7 +10,7 @@
</template>
<template v-else>
<view class="ht-auto" :style="shop_spacing">
<product-list-show :propOuterflex="propValue.data_content.goods_outerflex" :propFlex="propValue.data_content.goods_flex" :propNum="show_num" :propActived="propActived" :propIsShow="propValue.data_content.is_show" :propChunkPadding="propValue.data_style.chunk_padding" :propValue="item1.split_list" :propGoodStyle="propGoodStyle" :propContentImgRadius="propValue.data_style.get_img_radius" @url_event="url_event"></product-list-show>
<product-list-show :propKey="propKey" :propOuterflex="propValue.data_content.goods_outerflex" :propFlex="propValue.data_content.goods_flex" :propNum="show_num" :propActived="propActived" :propIsShow="propValue.data_content.is_show" :propChunkPadding="propValue.data_style.chunk_padding" :propValue="item1.split_list" :propGoodStyle="propGoodStyle" :propContentImgRadius="propValue.data_style.get_img_radius" @url_event="url_event"></product-list-show>
</view>
</template>
</swiper-item>
@ -53,7 +53,11 @@
propDataIndex: {
type: Number,
default: () => 0,
}
},
propKey: {
type: [String, Number],
default: '',
},
},
data() {
return {
@ -65,6 +69,12 @@
next_margin: '0rpx',
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
mounted() {
this.init();
},

12
components/diy/modules/data-magic/product-list-show.vue
View File

@ -129,7 +129,11 @@
propGoodStyle: {
type: Object,
default: () => {},
}
},
propKey: {
type: [String, Number],
default: '',
},
},
data() {
return {
@ -142,6 +146,12 @@
old_margin: { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 },
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
mounted() {
this.init();
},

16
components/diy/modules/data-magic/video/index.vue
View File

@ -2,7 +2,7 @@
<!-- 视频 -->
<view class="wh-auto ht-auto" :style="style_container">
<view class="video pr wh-auto ht-auto">
<video :src="video" class="wh-auto ht-auto" :poster="video_img" objectFit="cover" style="object-fit: cover"></video>
<video :src="video" class="wh-auto ht-auto" :poster="video_img" objectFit="cover" :style="'object-fit: cover;' + video_style"></video>
</view>
</view>
</template>
@ -11,6 +11,10 @@
import { padding_computer, radius_computer } from '@/common/js/common/common.js';
export default {
props: {
propKey: {
type: [String, Number],
default: '',
},
propValue: {
type: Object,
default: () => ({}),
@ -25,8 +29,15 @@
style_container: '',
video_img: '',
video: '',
video_style: '',
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
created() {
this.init();
},
@ -38,7 +49,8 @@
this.setData({
video_img: new_content.video_img.length > 0 ? new_content.video_img[0].url : '',
video: new_content.video.length > 0 ? new_content.video[0].url : '',
style_container: padding_computer(this.propDataStyle.chunk_padding) + radius_computer(this.propDataStyle.img_radius) + 'box-sizing: border-box;',
style_container: padding_computer(this.propDataStyle.chunk_padding) + 'box-sizing: border-box;',
video_style: radius_computer(this.propDataStyle.img_radius),
});
}
},