czg_team/xo_user_client
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

源文件

Browse Source
This commit is contained in:
gyq
2025-04-25 09:49:53 +08:00
commit 791d82b9e3
640 changed files with 130029 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
components/diy/modules/data-magic/custom/index.vue Normal file
View File

@@ -0,0 +1,304 @@
<template>
<view :style="style_content_container">
<view :style="style_content_img_container">
<template v-if="!isEmpty(form.data_source) && form.data_source_is_loop !== '0'">
<view v-if="data_source_content_list.length > 0 && form.data_source_direction == 'vertical'">
<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>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-else-if="data_source_content_list.length > 0 && ['vertical-scroll', 'horizontal'].includes(form.data_source_direction)" class="oh pr">
<swiper class="w flex" circular="true" :vertical="form.data_source_direction != 'horizontal'" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :display-multiple-items="slides_per_view" :style="{ width: '100%', height: swiper_height + 'px' }" @change="slideChange">
<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>
</view>
</view>
</swiper-item>
</swiper>
</view>
<view v-else>
<view :style="style_container">
<view class="wh-auto ht-auto oh" :style="style_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="0" :propConfigLoop="form.data_source_is_loop || '1'" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
</view>
</view>
</view>
</template>
<view v-else-if="!isEmpty(form.data_source) && form.data_source_is_loop == '0'">
<view :style="style_container">
<view class="w h oh" :style="style_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="0" :propSourceList="{}" :propConfigLoop="form.data_source_is_loop || '1'" :propGroupSourceList="data_source_content_list" :propSourceType="form.data_source" :propDataHeight="form.height" :propScale="scale" :propIsCustom="form.is_custom_data == '1'" :propShowData="show_data" @url_event="url_event"></dataRendering>
</view>
</view>
</view>
<view v-else>
<view :style="style_container">
<view class="wh-auto ht-auto oh" :style="style_img_container">
<dataRendering :propKey="propKey" :propCustomList="form.custom_list" :propIndex="0" :propConfigLoop="form.data_source_is_loop || '1'" :propDataHeight="form.height" :propScale="scale" @url_event="url_event"></dataRendering>
</view>
</view>
</view>
</view>
</view>
</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 dataRendering from '@/components/diy/modules/custom/data-rendering.vue';
const app = getApp();
export default {
components: {
dataRendering
},
props: {
propKey: {
type: String,
default: '',
},
propValue: {
type: Object,
default: () => {
return {};
},
},
propMagicScale: {
type: Number,
default: 1,
},
propDataSpacing: {
type: Number,
default: 0,
},
propDataIndex: {
type: Number,
default: 0,
},
},
data() {
return {
form: {},
new_style: {},
scale: 1,
style_container: '',
style_img_container: '',
div_width: 0,
div_height: 0,
custom_list_length: 0,
data_source_content_list: [],
data_source: '',
// 一屏显示的数量
slides_per_view: 1,
// 轮播高度
swiper_height: 0,
swiper_width: 'width: 100%;',
show_data: { data_key: 'id', data_name: 'name' },
gap_width: '',
content_outer_spacing_magin: '0rpx',
defalt_style: {
color_list: [{ color: '', color_percentage: undefined }],
direction: '180deg',
background_img_style: '2',
background_img: [],
radius: 0,
radius_top_left: 0,
radius_top_right: 0,
radius_bottom_left: 0,
radius_bottom_right: 0,
padding: 0,
padding_top: 0,
padding_bottom: 0,
padding_left: 0,
padding_right: 0,
margin: 0,
margin_top: 0,
margin_bottom: 0,
margin_left: 0,
margin_right: 0,
},
style_content_container: '',
style_content_img_container: '',
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
computed: {
get_percentage_count() {
return (num) => {
return num * this.scale + 'px';
};
},
},
mounted() {
this.init();
},
methods: {
isEmpty,
init() {
if (!isEmpty(this.propValue)) {
const new_form = this.propValue.data_content;
const new_style = this.propValue.data_style;
const { data_common_style = {}, data_color_list = [], data_direction = '180deg', data_radius = old_radius, data_background_img = [], data_background_img_style = '2', data_chunk_padding = old_padding, data_chunk_margin = old_margin, data_content_style = {}, data_pattern = old_border_and_box_shadow } = new_style;
const style_data = {
color_list: data_color_list,
direction: data_direction,
}
const style_img_data = {
background_img: data_background_img,
background_img_style: data_background_img_style,
}
// 数据来源的内容
let list = [];
if (new_form.is_custom_data == '1') {
if (Number(new_form.data_source_content.data_type) === 0) {
list = new_form.data_source_content.data_list;
} else {
list = new_form.data_source_content.data_auto_list.map(item => ({
id: Math.random(),
new_cover: [],
new_title: '',
data: item,
}));
}
} else {
list = new_form.data_source_content.data_list;
}
const new_list = list.length > 0 ? this.get_list(list, new_form, new_style) : [];
// 计算宽度
const { padding_left, padding_right, padding_top, padding_bottom } = data_chunk_padding;
const { margin_left, margin_right, margin_bottom, margin_top } = data_chunk_margin;
const old_width = new_form.width * this.propMagicScale;
// 数据宽度
const data_style = padding_left + padding_right + margin_left + margin_right + border_width(data_pattern);
// 通用样式
const chunk_padding = new_style?.chunk_padding || old_padding;
const chunk_margin = new_style?.chunk_margin || old_margin;
const common_styles = (chunk_margin?.margin_left || 0) + (chunk_margin?.margin_right || 0) + (chunk_padding?.padding_left || 0) + (chunk_padding?.padding_right || 0) + border_width(data_common_style);
// 内容左右间距
const content_spacing = (data_content_style?.margin_left || 0) + (data_content_style?.margin_right || 0) + (data_content_style?.padding_left || 0) + (data_content_style?.padding_right || 0) + border_width(data_content_style);
const carousel_col = Number(new_form.data_source_carousel_col);
// 数据间距
const data_spacing = ['vertical', 'horizontal'].includes(new_form.data_source_direction) ? new_style.column_gap * (carousel_col - 1) : 0;
// 当前容器的宽度 减去 左右两边的padding值 再减去 数据间距的一半 再除以 容器的宽度 得到比例 再乘以数据魔方的比例
const width = old_width - data_style - content_spacing - common_styles - data_spacing - (this.propDataSpacing / 2);
// 计算缩放比例
// 比例增加最小值判断
const scale_number = width / new_form.width;
const new_scale = scale_number > 0 ? scale_number : 0;
// 间距
const space_between = new_form.data_source_direction == 'horizontal' ? new_style.column_gap : new_style.row_gap;
// 判断是平移还是整屏滚动
let swiper_height = 0;
// 商品数量大于列数的时候，高度是列数，否则是当前的数量
const col = new_list.length > carousel_col ? carousel_col : new_list.length;
// 轮播图高度控制
if (new_form.data_source_direction == 'horizontal') {
swiper_height = new_form.height * new_scale + padding_top + padding_bottom + margin_bottom + margin_top;
} else {
swiper_height = (new_form.height * new_scale + padding_top + padding_bottom + margin_bottom + margin_top) * col + ((carousel_col - 1) * space_between);
}
// 计算间隔的空间。(gap * gap数量) / 模块数量
let gap = (new_style.column_gap * (carousel_col - 1)) / carousel_col;
// 横向的时候，根据选择的行数和每行显示的个数来区分具体是显示多少个
const swiper_width = (new_form.data_source_direction == 'horizontal' && new_style.rolling_fashion != 'translation') ? `width: ${ 100 / carousel_col }%;`: 'width: 100%;';
const content_style = !isEmpty(new_style.data_content_style)? new_style.data_content_style : this.defalt_style;
this.setData({
form: new_form,
new_style: new_style,
div_width: width,
scale: new_scale,
custom_list_length: new_form.custom_list.length - 1,
style_content_container: common_styles_computer(content_style),
style_content_img_container: common_img_computer(content_style),
style_container: gradient_computer(style_data) + radius_computer(data_radius) + margin_computer(data_chunk_margin) + box_shadow_computer(data_pattern) + border_computer(data_pattern), // 用于样式显示
style_img_container: padding_computer(data_chunk_padding) + background_computer(style_img_data) + 'box-sizing: border-box;',
data_source_content_list: new_list,
data_source: !isEmpty(new_form.data_source)? new_form.data_source : '',
slides_per_view: new_style.rolling_fashion == 'translation' ? (new_form.data_source_direction != 'horizontal' ? col : carousel_col) : 1,
swiper_height: swiper_height,
swiper_width: swiper_width,
show_data: new_form?.show_data || { data_key: 'id', data_name: 'name' },
content_outer_spacing_magin: space_between + 'px',
gap_width: `width: calc(${100 / carousel_col}% - ${gap}px);`,
});
}
},
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);
},
url_event(e, index, split_index) {
if (this.form.data_source == 'goods' && this.data_source_content_list.length > 0) {
const list = this.data_source_content_list[index];
if (!isEmpty(list) && !isEmpty(list.split_list[split_index])) {
const new_list = list.split_list[split_index];
if (!isEmpty(new_list)) {
// 缓存商品数据
app.globalData.goods_data_cache_handle(new_list.data.id, new_list.data);
}
}
}
app.globalData.url_open(e);
},
},
};
</script>
<style scoped lang="scss">
.main-content {
position: absolute;
overflow: hidden;
}
</style>

142
components/diy/modules/data-magic/magic-carousel.vue Normal file
View File

@@ -0,0 +1,142 @@
<template>
<view class="wh-auto ht-auto oh" :style="style_container">
<view class="pr oh wh-auto ht-auto" :style="style_img_container">
<swiper circular="true" :autoplay="propValue.data_style.is_roll == '1'" :interval="propValue.data_style.interval_time * 1000" :duration="500" :vertical="propValue.data_style.rotation_direction == 'vertical'" :next-margin="next_margin" :display-multiple-items="slides_per_view" class="swiper" style="height: 100%" @change="carousel_change">
<swiper-item v-for="(item1, index1) in propValue.data_content.list" :key="index1">
<template v-if="propType === 'img'">
<view class="wh-auto ht-auto" :data-value="item1.carousel_link.page" @tap="url_event">
<imageEmpty :propImageSrc="item1.carousel_img[0]" :propStyle="propValue.data_style.get_img_radius" :propImgFit="propValue.data_content.fit" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<template v-else>
<view class="wh-auto ht-auto" :style="shop_spacing">
<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>
</swiper>
</view>
</view>
</template>
<script>
import { gradient_computer, radius_computer, padding_computer, background_computer, isEmpty, border_computer, box_shadow_computer, old_border_and_box_shadow, old_margin, old_radius, old_padding, margin_computer } from "@/common/js/common/common.js";
const app = getApp();
import imageEmpty from '@/components/diy/modules/image-empty.vue';
import productListShow from '@/components/diy/modules/data-magic/product-list-show.vue';
export default {
components: {
imageEmpty,
productListShow,
},
props: {
propValue: {
type: Object,
default: () => ({}),
},
propContentImgRadius: {
type: String,
default: () => '',
},
propType: {
type: String,
default: () => '',
},
propActived: {
type: Number,
default: () => 0,
},
propGoodStyle: {
type: Object,
default: () => {},
},
propDataIndex: {
type: Number,
default: () => 0,
},
propKey: {
type: [String, Number],
default: '',
},
},
data() {
return {
style_container: '',
style_img_container: '',
slides_per_view: 1,
show_num: 1,
shop_spacing: '',
next_margin: '0rpx',
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
mounted() {
this.init();
},
methods: {
init() {
if (!isEmpty(this.propValue)) {
const { data_color_list = [], data_direction = '180deg', data_chunk_margin = old_margin, data_radius = old_radius, data_pattern = old_border_and_box_shadow, data_background_img = [], data_background_img_style = '2', data_chunk_padding = old_padding } = this.propValue.data_style;
const style_data = {
color_list: data_color_list,
direction: data_direction,
}
const style_img_data = {
background_img: data_background_img,
background_img_style: data_background_img_style,
}
let slides_per_view = 1;
let show_num = 1;
// 商品时的处理逻辑
const { goods_outerflex, goods_num } = this.propValue.data_content;
const { rotation_direction, rolling_fashion, data_goods_gap } = this.propValue.data_style;
// 图片时的处理
if (this.propType === 'img') {
slides_per_view = 1; // 能够同时显示的slides数量
} else {
// 判断是平移还是整屏滚动, 平移的时候是一个为1组，如果是整屏滚动，就为一屏为一组
if (rolling_fashion == 'translation') {
// 如果是商品是横排的，轮播也是横排的，就不对商品进行拆分/如果商品是竖排的，轮播也是竖排的，不对商品进行拆分
if ((goods_outerflex == 'row' && rotation_direction == 'horizontal') || (goods_outerflex == 'col' && rotation_direction == 'vertical')) {
slides_per_view = goods_num; // 能够同时显示的slides数量
show_num = 1; // 一屏显示的数量 用于商品内部处理显示
} else {
slides_per_view = 1; // 能够同时显示的slides数量
show_num = goods_num; // 一屏显示的数量 用于商品内部处理显示
}
} else {
// 切屏的时候为多个为一组
show_num = goods_num; // 一屏显示的数量 用于商品内部处理显示
slides_per_view = 1; // 能够同时显示的slides数量
}
}
this.setData({
style_container: gradient_computer(style_data) + radius_computer(data_radius) + margin_computer(data_chunk_margin) + box_shadow_computer(data_pattern) + border_computer(data_pattern), // 用于样式显示
style_img_container: padding_computer(data_chunk_padding) + background_computer(style_img_data) + 'box-sizing: border-box;',
next_margin: rolling_fashion == 'translation' && rotation_direction == 'horizontal' ? `-${ data_goods_gap * 2 }rpx` : '0rpx',
shop_spacing: this.propType === 'img' ? 'margin-right: 0px;' : `margin-right: ${ data_goods_gap * 2 }rpx;`,
slides_per_view: slides_per_view,
show_num: show_num,
});
} else {
return '';
}
},
carousel_change(e) {
this.$emit('onCarouselChange', e.detail.current, this.propDataIndex);
},
// 跳转链接
url_event(e) {
app.globalData.url_event(e);
},
},
};
</script>
<style></style>

233
components/diy/modules/data-magic/product-list-show.vue Normal file
View File

@@ -0,0 +1,233 @@
<template>
<view :class="['align-c flex-1 w h', (propOuterflex == 'row' ? 'flex-row' : 'flex-col')]" :style="'gap:' + propGoodStyle.data_goods_gap + 'px;'">
<template v-if="propFlex === 'row'">
<view v-for="(item, index) in propValue" :key="index" :style="block_size" class="w h">
<view class="w h oh" :style="style_container">
<view class="w h flex-row gap-10" :style="style_img_container" :data-index="index" :data-value="item.goods_url" @tap="url_event">
<template v-if="!isEmpty(item.new_cover)">
<view class="w h">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<template v-else>
<view class="w h">
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb">
<view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style + 'height:'+ ((propGoodStyle.goods_title_size + 3) * 4) + 'rpx;'">{{ item.title || '' }}</view>
<view v-if="propIsShow.includes('price')" :style="propGoodStyle.goods_price_style">
<text :style="propGoodStyle.goods_price_symbol_style">{{ item.show_price_symbol || '' }}</text>
{{ item.min_price || '' }}
<template v-if="propIsShow.includes('price_unit')">
<text :style="propGoodStyle.goods_price_unit_style">{{ item.show_price_unit || '' }}</text>
</template>
</view>
</view>
</view>
</view>
</view>
</template>
<template v-else-if="propFlex === 'col_price_float'">
<view v-for="(item, index) in propValue" :key="index" :style="block_size" class="w h">
<view class="w h oh" :style="style_container">
<view class="w h flex-col gap-10" :style="style_img_container" :data-index="index" :data-value="item.goods_url" @tap="url_event">
<view class="w h flex-1 pr oh">
<template v-if="!isEmpty(item.new_cover)">
<view class="w h">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<template v-else>
<view class="w h">
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<view v-if="propIsShow.includes('price')" class="pa" :style="propGoodStyle.goods_price_style + float_pirce_style">
<text :style="propGoodStyle.goods_price_symbol_style">{{ item.show_price_symbol || ''}}</text>{{ item.min_price || ''}}
<template v-if="propIsShow.includes('price_unit')">
<text :style="propGoodStyle.goods_price_unit_style">{{ item.show_price_unit || ''}}</text>
</template>
</view>
</view>
<view v-if="propIsShow.includes('title')" class="text-line-1 tl w" :style="propGoodStyle.goods_title_style + 'height:'+ ((propGoodStyle.goods_title_size + 3) * 2) + 'rpx;'">{{ item.title || '' }}</view>
</view>
</view>
</view>
</template>
<template v-else>
<view v-for="(item, index) in propValue" :key="index" :style="block_size" class="w h">
<view class="w h oh" :style="style_container">
<view class="w h flex-col" :style="style_img_container" :data-index="index" :data-value="item.goods_url" @tap="url_event">
<template v-if="!isEmpty(item.new_cover)">
<view class="w h">
<imageEmpty :propImageSrc="item.new_cover[0]" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<template v-else>
<view class="w h">
<imageEmpty :propImageSrc="item.images" :propStyle="propContentImgRadius" propErrorStyle="width: 80rpx;height: 80rpx;"></imageEmpty>
</view>
</template>
<view v-if="!isEmpty(propIsShow)" class="flex-col w h tl jc-sb">
<view v-if="propIsShow.includes('title')" class="text-line-2" :style="propGoodStyle.goods_title_style + 'height:'+ ((propGoodStyle.goods_title_size + 3) * 4) + 'rpx;'">{{ item.title || '' }}</view>
<view v-if="propIsShow.includes('price')" :style="propGoodStyle.goods_price_style">
<text :style="propGoodStyle.goods_price_symbol_style">{{ item.show_price_symbol || ''}}</text>{{ item.min_price || '' }}
<template v-if="propIsShow.includes('price_unit')">
<text :style="propGoodStyle.goods_price_unit_style">{{ item.show_price_unit || ''}}</text>
</template>
</view>
</view>
</view>
</view>
</view>
</template>
</view>
</template>
<script>
const app = getApp();
import { gradient_computer, radius_computer, padding_computer, background_computer, isEmpty, margin_computer, box_shadow_computer, border_computer, old_margin, old_border_and_box_shadow, old_padding } from "@/common/js/common/common.js";
import imageEmpty from '@/components/diy/modules/image-empty.vue';
export default {
components: {
imageEmpty,
},
props: {
propValue: {
type: Array,
default: () => [],
},
propOuterflex: {
type: String,
default: () => '',
},
propFlex: {
type: String,
default: () => '',
},
propContentImgRadius: {
type: String,
default: () => '',
},
propNum: {
type: Number,
default: () => 0,
},
propActived: {
type: Number,
default: () => 0,
},
propIsShow: {
type: Array,
default: () => [],
},
propChunkPadding: {
type: Object,
default: () => {},
},
propGoodStyle: {
type: Object,
default: () => {},
},
propKey: {
type: [String, Number],
default: '',
},
},
data() {
return {
style_container: '',
style_img_container: '',
block_size: '',
float_pirce_style: '',
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
mounted() {
this.init();
},
computed: {
img_padding_computer() {
if (!isEmpty(this.propChunkPadding)) {
return padding_computer(this.propChunkPadding) + ';box-sizing: border-box;';
} else {
return '';
}
},
},
methods: {
isEmpty,
init() {
if (!isEmpty(this.propGoodStyle)) {
const { goods_color_list = [], goods_direction = '180deg', goods_radius = old_radius, goods_background_img = [], goods_background_img_style = '2', goods_chunk_padding = old_padding, goods_price_color_list = [], goods_price_direction = '180deg', goods_price_radius = old_radius, goods_price_padding = old_padding, goods_price_margin = old_margin, goods_price_location = 'center', goods_chunk_margin = old_margin} = this.propGoodStyle;
const style_data = {
color_list: goods_color_list,
direction: goods_direction,
}
const style_img_data = {
background_img: goods_background_img,
background_img_style: goods_background_img_style,
}
const data = {
color_list: goods_price_color_list,
direction: goods_price_direction,
}
let location = 'left:50%;transform:translateX(-50%);bottom:0;'
if (goods_price_location == 'left') {
location = 'left:0;bottom:0;';
} else if (goods_price_location == 'right') {
location = 'right:0;bottom:0;';
}
// 左右间距
const shop_left_right_width_margin = goods_chunk_margin?.margin_left || 0 + goods_chunk_margin?.margin_right || 0;
// 上下间距
const shop_top_bottom_width_margin = goods_chunk_margin?.margin_top || 0 + goods_chunk_margin?.margin_bottom || 0;
// 内容间距
const total_gap = this.propGoodStyle.data_goods_gap * (this.propValue.length - 1);
// 总的宽度
const all_width = total_gap + (shop_left_right_width_margin.value * this.propNum);
// 总的高度
const all_height = total_gap + (shop_top_bottom_width_margin.value * this.propNum);
this.setData({
float_pirce_style: gradient_computer(data) + radius_computer(goods_price_radius) + padding_computer(goods_price_padding) + margin_computer(goods_price_margin) + location,
style_container: gradient_computer(style_data) + radius_computer(goods_radius) + margin_computer(goods_chunk_margin) + border_computer(this.propGoodStyle) + box_shadow_computer(this.propGoodStyle), // 用于样式显示
style_img_container: this.propFlex == 'col' ? background_computer(style_img_data) : padding_computer(goods_chunk_padding) + background_computer(style_img_data) + 'box-sizing: border-box;',
block_size: this.propOuterflex == 'row' ? 'height:calc(100% - ' + shop_top_bottom_width_margin.value + 'px);width:calc((100% - ' + all_width + 'px) / ' + this.propNum + ');' : 'width:calc(100% - ' + shop_left_right_width_margin.value + 'px);height:calc((100% - ' + all_height + 'px) / ' + this.propNum + ');',
});
} else {
return '';
}
},
url_event(e) {
// 存储数据显示缓存
let index = e.currentTarget.dataset.index || 0;
let goods = this.propValue[index];
app.globalData.goods_data_cache_handle(goods.id, goods);
this.$emit('url_event', e);
},
},
};
</script>
<style scoped lang="scss">
.w {
width: 100%;
}
.h {
height: 100%;
}
.half-width {
width: 50%;
}
.gap-20 {
gap: 40rpx;
}
</style>

57
components/diy/modules/data-magic/video/index.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<!-- 视频 -->
<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_style"></video>
</view>
</template>
<script>
import { padding_computer, radius_computer } from '@/common/js/common/common.js';
export default {
props: {
propKey: {
type: [String, Number],
default: '',
},
propValue: {
type: Object,
default: () => ({}),
},
propDataStyle: {
type: Object,
default: () => ({}),
}
},
data() {
return {
style_container: '',
video_img: '',
video: '',
video_style: '',
};
},
watch: {
propKey(val) {
// 初始化
this.init();
},
},
created() {
this.init();
},
methods: {
// 初始化数据
init() {
const new_content = this.propValue || {};
// 视频比例
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 : '',
video_style: radius_computer(this.propDataStyle.img_radius),
});
}
},
};
</script>
<style></style>