新增数据魔方处理
于肖磊
parent
4e5991030f
commit
7ac30532d9
|
|
@ -181,4 +181,16 @@ export function get_math () {
|
|||
randomString = randomString.length >= 6 ? randomString : randomString.padStart(6, '0');
|
||||
// 截取掉随机字符串开头的'0.'部分，获得最终的6位随机字符串。
|
||||
return randomString.substring(2);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将大小计算成百分比
|
||||
*
|
||||
* @param num 当前的大小或位置。
|
||||
* @param size 容器的大小。
|
||||
* @returns 计算后的百分比值，含4位小数
|
||||
*/
|
||||
export const percentage_count = (num, container_size) => {
|
||||
const marks = (num / container_size) * 100;
|
||||
return marks.toFixed(4) + '%';
|
||||
};
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
<template>
|
||||
<view ref="container" class="img-magic" :style="'height:' + container_size + ';' + style_container">
|
||||
<view class="pr" :style="'width:calc(100% + ' + outer_spacing + ');height:calc(100% + ' + outer_spacing +');margin:-' + spacing + ';'">
|
||||
<!-- 风格9 -->
|
||||
<template v-if="form.style_actived == 7">
|
||||
<view class="flex-row align-c jc-c style-size flex-wrap">
|
||||
<view v-for="(item, index) in data_magic_list" :key="index" :style="item.data_style.background_style + content_radius + 'margin:'+ spacing + ';' + ([0, 1].includes(index) ? 'width:calc(50% - ' + outer_spacing + ');height:calc(50% - ' + outer_spacing +')' : 'width:calc((100% / 3) - ' + outer_spacing + ');height:calc(50% - ' + outer_spacing + ')')" class="style9">
|
||||
<template v-if="item.data_content.data_type == 'goods'">
|
||||
<view class="wh-auto ht-auto flex-col gap-20" :style="[0, 1].includes(index) ? item.data_style.chunk_padding_data : ''">
|
||||
<view v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" class="flex-col gap-5 tl">
|
||||
<p class="ma-0 wh-auto text-line-1" :style="item.data_style.daheading_style">{{ item.data_content.heading_title || '' }}</p>
|
||||
<p class="ma-0 wh-auto text-line-1" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</p>
|
||||
</view>
|
||||
<view class="wh-auto ht-auto">
|
||||
<magic-carousel :value="item" :content-img-radius="content_img_radius" :actived="form.style_actived" type="product" @carousel_change="carousel_change($event, index)"></magic-carousel>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
|
||||
</template>
|
||||
<view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style.indicator_location == 'center', 'dot-right': item.data_style.indicator_location == 'flex-end' }" class="dot flex-row pa" :style="{'bottom': item.data_style.indicator_bottom * 2 +'rpx'}">
|
||||
<template v-if="item.data_style.indicator_style == 'num'">
|
||||
<view :style="item.data_style.indicator_styles" class="dot-item">
|
||||
<span class="num-active" :style="{'color': item.data_style.actived_color }">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.list.length }}</span>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-for="(item3, index3) in item.data_content.list" :key="index3" :style="item.data_style.indicator_styles + style_actived_color(item, index3)" class="dot-item" />
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-for="(item, index) in data_magic_list" :key="index" class="cube-selected cr-main" :style="selected_style(item) + item.data_style.background_style + content_radius + ';margin:'+ spacing + ';'">
|
||||
<template v-if="item.data_content.data_type == 'goods'">
|
||||
<view :class="[spacing_processing(index) ? 'gap-20 wh-auto ht-auto flex-col' : 'gap-10 wh-auto ht-auto flex-col']" :style="item.data_style.chunk_padding_data">
|
||||
<view v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" class="flex-col gap-5 tl">
|
||||
<p class="ma-0 wh-auto text-line-1" :style="item.data_style.heading_style">{{ item.data_content.heading_title || '' }}</p>
|
||||
<p class="ma-0 wh-auto text-line-1" :style="item.data_style.subtitle_style">{{ item.data_content.subtitle || '' }}</p>
|
||||
</view>
|
||||
<view class="wh-auto ht-auto">
|
||||
<magic-carousel :value="item" :content-img-radius="content_img_radius" type="product" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<magic-carousel :value="item" :content-img-radius="content_img_radius" type="img" :actived="form.style_actived" @carousel_change="carousel_change($event, index)"></magic-carousel>
|
||||
</template>
|
||||
<view v-if="item.data_style.is_show == '1' && item.data_content.list.length > 1" :class="{'dot-center': item.data_style.indicator_location == 'center', 'dot-right': item.data_style.indicator_location == 'flex-end' }" class="dot flex-row pa" :style="{'bottom': item.data_style.indicator_bottom * 2 +'rpx'}">
|
||||
<template v-if="item.data_style.indicator_style == 'num'">
|
||||
<view :style="item.data_style.indicator_styles" class="dot-item">
|
||||
<span class="num-active" :style="{'color': item.data_style.actived_color }">{{ item.actived_index + 1 }}</span><span>/{{ item.data_content.list.length }}</span>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-for="(item3, index3) in item.data_content.list" :key="index3" :style="item.data_style.indicator_styles + style_actived_color(item, index3)" class="dot-item" />
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import magicCarousel from '@/components/diy/modules/data-magic/magic-carousel.vue';
|
||||
import { background_computer, common_styles_computer, gradient_computer, radius_computer, percentage_count, isEmpty, padding_computer } 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);
|
||||
export default {
|
||||
components: {
|
||||
magicCarousel,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
new_style: {},
|
||||
// 设置默认值
|
||||
default_list: {
|
||||
title: '测试商品标题',
|
||||
min_original_price: '41.2',
|
||||
show_original_price_symbol: '￥',
|
||||
show_original_price_unit: '/ 台',
|
||||
min_price: '51',
|
||||
show_price_symbol: '￥',
|
||||
show_price_unit: '/ 台',
|
||||
sales_count: '1000',
|
||||
images: '',
|
||||
new_cover: [],
|
||||
plugins_view_icon_data: [
|
||||
{
|
||||
name: '满减活动',
|
||||
bg_color: '#EA3323',
|
||||
br_color: '',
|
||||
color: '#fff',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
name: '包邮',
|
||||
bg_color: '',
|
||||
br_color: '#EA3323',
|
||||
color: '#EA3323',
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
name: '领劵',
|
||||
bg_color: '',
|
||||
br_color: '#EA9223',
|
||||
color: '#EA9223',
|
||||
url: '',
|
||||
},
|
||||
],
|
||||
},
|
||||
outer_spacing: '',
|
||||
// 图片间距设置
|
||||
spacing: '',
|
||||
// 内容圆角设置
|
||||
content_radius: '',
|
||||
// 图片圆角设置
|
||||
content_img_radius: '',
|
||||
data_magic_list: [],
|
||||
cubeCellWidth: 0,
|
||||
container_size: 0,
|
||||
style_container: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 根据当前页面大小计算成百分比
|
||||
selected_style() {
|
||||
return (item) => {
|
||||
return `overflow: hidden;width: calc(${this.percentage(this.getSelectedWidth(item))} - ${ this.outer_spacing } ); height: calc(${this.percentage(this.getSelectedHeight(item))} - ${ this.outer_spacing } ); top: ${this.percentage(this.getSelectedTop(item))}; left: ${this.percentage(this.getSelectedLeft(item))};`;
|
||||
}
|
||||
},
|
||||
style_actived_color() {
|
||||
return (item, index) => {
|
||||
return item.actived_index == index ? `background: ${ item.data_style.actived_color };` : '';
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.setData({
|
||||
form: this.value.content,
|
||||
new_style: this.value.style,
|
||||
});
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
isEmpty,
|
||||
init() {
|
||||
const density = 4;
|
||||
this.setData({
|
||||
outer_spacing: this.new_style.image_spacing * 2 + 'rpx',
|
||||
spacing: this.new_style.image_spacing + 'rpx',
|
||||
content_radius: radius_computer(this.new_style.data_radius),
|
||||
content_img_radius: radius_computer(this.new_style.img_radius),
|
||||
cubeCellWidth: sys_width / density,
|
||||
container_size: sys_width * 2 + 'rpx',
|
||||
data_magic_list: this.get_data_magic_list(this.form.data_magic_list),
|
||||
style_container: common_styles_computer(this.new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
|
||||
})
|
||||
},
|
||||
get_data_magic_list(data) {
|
||||
data.forEach((item) => {
|
||||
const data_content = item.data_content;
|
||||
const data_style = item.data_style;
|
||||
const key = data_style.carouselKey;
|
||||
item.actived_index = 0;
|
||||
// 指示器样式
|
||||
data_style.indicator_styles = this.indicator_style(data_style);
|
||||
data_style.background_style = this.background_style(data_style);
|
||||
data_style.chunk_padding_data = padding_computer(item.data_style.chunk_padding) + 'box-sizing: border-box;';
|
||||
data_style.heading_style = this.trends_config(item.data_style, 'heading');
|
||||
data_style.subtitle_style = this.trends_config(item.data_style, 'subtitle');
|
||||
|
||||
const { goods_list, images_list } = data_content;
|
||||
if (data_content.data_type == 'goods') {
|
||||
data_content.list = this.commodity_list(data_content.goods_list, item.num);
|
||||
} else {
|
||||
data_content.list = data_content.images_list;
|
||||
}
|
||||
});
|
||||
return data;
|
||||
},
|
||||
/*
|
||||
** 组装产品的数据
|
||||
** @param {Array} list 商品列表
|
||||
** @param {Number} num 显示数量
|
||||
** @return {Array}
|
||||
*/
|
||||
commodity_list(list, num) {
|
||||
if (list.length > 0) {
|
||||
// 深拷贝一下，确保不会出现问题
|
||||
const goods_list = JSON.parse(JSON.stringify(list)).map((item) => ({
|
||||
...item.data,
|
||||
title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
|
||||
new_cover: item.new_cover,
|
||||
}));
|
||||
// 存储数据显示
|
||||
let nav_list = [];
|
||||
// 拆分的数量
|
||||
const split_num = Math.ceil(goods_list.length / num);
|
||||
for (let i = 0; i < split_num; i++) {
|
||||
nav_list.push({ split_list: goods_list.slice(i * num, (i + 1) * num) });
|
||||
}
|
||||
return nav_list;
|
||||
} else {
|
||||
return [{ split_list: Array(num).fill(this.default_list)}];
|
||||
}
|
||||
},
|
||||
background_style(item) {
|
||||
return gradient_computer(item) + background_computer(item);
|
||||
},
|
||||
getSelectedWidth (item) {
|
||||
return (item.end.x - item.start.x + 1) * this.cubeCellWidth;
|
||||
},
|
||||
//计算选中层的高度。
|
||||
getSelectedHeight(item) {
|
||||
return (item.end.y - item.start.y + 1) * this.cubeCellWidth;
|
||||
},
|
||||
//计算选中层的右边距离。
|
||||
getSelectedTop(item) {
|
||||
return (item.start.y - 1) * this.cubeCellWidth;
|
||||
},
|
||||
//计算选中层的左边距离。
|
||||
getSelectedLeft(item) {
|
||||
return (item.start.x - 1) * this.cubeCellWidth;
|
||||
},
|
||||
// 计算成百分比
|
||||
percentage(num) {
|
||||
return percentage_count(num, sys_width);
|
||||
},
|
||||
// 根据传递的参数，从对象中取值
|
||||
trends_config(style, key) {
|
||||
return this.text_style(style[`${key}_typeface`], style[`${key}_size`], style[`${key}_color`]);
|
||||
},
|
||||
text_style(typeface, size, color) {
|
||||
return `font-weight:${ typeface }; font-size: ${ size * 2 }rpx; color: ${ color };`;
|
||||
},
|
||||
// 不属于第9个，并且第9个的第一个和第二个
|
||||
spacing_processing(index) {
|
||||
return this.form.style_actived !== 8 || (this.form.style_actived === 8 && [0, 1].includes(index))
|
||||
},
|
||||
// 指示器的样式
|
||||
indicator_style(item) {
|
||||
let styles = '';
|
||||
if (!isEmpty(item.indicator_radius)) {
|
||||
styles += radius_computer(item.indicator_radius)
|
||||
}
|
||||
const size = item.indicator_size || 5;
|
||||
if (item.indicator_style == 'num') {
|
||||
styles += `color: ${item.color || '#DDDDDD'};`;
|
||||
styles += `font-size: ${size * 2}rpx;`;
|
||||
} else if (item.indicator_style == 'elliptic') {
|
||||
styles += `background: ${item.color || '#DDDDDD'};`;
|
||||
styles += `width: ${size * 6 }rpx; height: ${size * 2}rpx;`;
|
||||
} else {
|
||||
styles += `background: ${item.color || '#DDDDDD'};`;
|
||||
styles += `width: ${size * 2}rpx; height: ${size * 2 }rpx;`;
|
||||
}
|
||||
return styles;
|
||||
},
|
||||
carousel_change(e, key) {
|
||||
if (this.data_magic_list[key]) {
|
||||
this.data_magic_list[key].actived_index = e.target.current;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 图片魔方是一个正方形，根据宽度计算高度
|
||||
.img-magic {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cube-selected {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.text-line-1 {
|
||||
word-break: break-word;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.style-size {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.style9 {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.dot-center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.dot-right {
|
||||
right: 0;
|
||||
}
|
||||
.dot {
|
||||
z-index: 3;
|
||||
.dot-item {
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
}
|
||||
.gap-20 {
|
||||
gap: 40rpx;
|
||||
}
|
||||
// 轮播高度自适应
|
||||
:deep(.el-carousel) {
|
||||
height: 100%;
|
||||
.el-carousel__container {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-image) {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.el-image__inner {
|
||||
object-fit: cover;
|
||||
}
|
||||
.image-slot img {
|
||||
width: 6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,34 +2,26 @@
|
|||
<view class="ht-auto min-ht">
|
||||
<componentDiyHeader></componentDiyHeader>
|
||||
<view v-if="value.diy_data.length > 0" :style="diy_content_style">
|
||||
<componentDiyTabs v-if="is_tabs" :value="tabs_data"></componentDiyTabs>
|
||||
<view v-if="is_tabs_type">
|
||||
<view v-for="(item, index) in value.diy_data" :key="index">
|
||||
<!-- 基础组件 -->
|
||||
<componentDiySearch v-if="item.key == 'search'" :value="item.com_data"></componentDiySearch>
|
||||
<componentCarousel v-else-if="item.key == 'carousel'" :value="item.com_data"></componentCarousel>
|
||||
<componentNavGroup v-else-if="item.key == 'nav-group'" :value="item.com_data"></componentNavGroup>
|
||||
<componentDiyUserInfo v-else-if="item.key == 'user-info'" :value="item.com_data"></componentDiyUserInfo>
|
||||
<componentDiyNotice v-else-if="item.key == 'notice'" :value="item.com_data"></componentDiyNotice>
|
||||
<componentDiyVideo v-else-if="item.key == 'video'" :value="item.com_data"></componentDiyVideo>
|
||||
<componentDiyArticleList v-else-if="item.key == 'article-list'" :value="item.com_data"></componentDiyArticleList>
|
||||
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :value="item.com_data"></componentDiyArticleTabs>
|
||||
<componentGoodsTabs v-else-if="item.key == 'goods-tabs'" :value="item.com_data"></componentGoodsTabs>
|
||||
<componentGoodsList v-else-if="item.key == 'goods-list'" :value="item.com_data"></componentGoodsList>
|
||||
<componentDiyImgMagic v-else-if="item.key == 'img-magic'" :value="item.com_data"></componentDiyImgMagic>
|
||||
<componentDiyHotZone v-else-if="item.key == 'hot-zone'" :value="item.com_data"></componentDiyHotZone>
|
||||
<!-- 插件 -->
|
||||
<componentDiyCoupon v-else-if="item.key == 'coupon'" :value="item.com_data"></componentDiyCoupon>
|
||||
<!-- 工具组件 -->
|
||||
<componentFloatWindow v-else-if="item.key == 'float-window'" :value="item.com_data"></componentFloatWindow>
|
||||
<componentTextTitle v-else-if="item.key == 'text-title'" :value="item.com_data"></componentTextTitle>
|
||||
<componentDiyAuxiliaryLine v-else-if="item.key == 'row-line'" :value="item.com_data"></componentDiyAuxiliaryLine>
|
||||
<componentDiyRichText v-else-if="item.key == 'rich-text'" :value="item.com_data"></componentDiyRichText>
|
||||
<componentAuxiliaryBlank v-else-if="item.key == 'auxiliary-blank'" :value="item.com_data"></componentAuxiliaryBlank>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<!-- goods九宫格数据 -->
|
||||
<view v-for="(item, index) in value.diy_data" :key="index">
|
||||
<!-- 基础组件 -->
|
||||
<componentDiySearch v-if="item.key == 'search'" :value="item.com_data"></componentDiySearch>
|
||||
<componentCarousel v-if="item.key == 'carousel'" :value="item.com_data"></componentCarousel>
|
||||
<componentNavGroup v-if="item.key == 'nav-group'" :value="item.com_data"></componentNavGroup>
|
||||
<componentGoodsList v-if="item.key == 'goods-list'" :value="item.com_data"></componentGoodsList>
|
||||
<componentGoodsTabs v-if="item.key == 'goods-tabs'" :value="item.com_data"></componentGoodsTabs>
|
||||
<componentDataMagic v-if="item.key == 'data-magic'" :value="item.com_data"></componentDataMagic>
|
||||
<componentDiyUserInfo v-if="item.key == 'user-info'" :value="item.com_data"></componentDiyUserInfo>
|
||||
<componentDiyVideo v-else-if="item.key == 'video'" :value="item.com_data"></componentDiyVideo>
|
||||
<componentDiyArticleList v-else-if="item.key == 'article-list'" :value="item.com_data"></componentDiyArticleList>
|
||||
<componentDiyArticleTabs v-else-if="item.key == 'article-tabs'" :value="item.com_data"></componentDiyArticleTabs>
|
||||
<componentDiyHotZone v-else-if="item.key == 'hot-zone'" :value="item.com_data"></componentDiyHotZone>
|
||||
<componentDiyCoupon v-else-if="item.key == 'coupon'" :value="item.com_data"></componentDiyCoupon>
|
||||
<!-- 工具组件 -->
|
||||
<componentFloatWindow v-else-if="item.key == 'float-window'" :value="item.com_data"></componentFloatWindow>
|
||||
<componentTextTitle v-else-if="item.key == 'text-title'" :value="item.com_data"></componentTextTitle>
|
||||
<componentDiyAuxiliaryLine v-else-if="item.key == 'row-line'" :value="item.com_data"></componentDiyAuxiliaryLine>
|
||||
<componentDiyRichText v-else-if="item.key == 'rich-text'" :value="item.com_data"></componentDiyRichText>
|
||||
<componentAuxiliaryBlank v-else-if="item.key == 'auxiliary-blank'" :value="item.com_data"></componentAuxiliaryBlank>
|
||||
</view>
|
||||
</view>
|
||||
<componentDiyFooter :value="value.footer.com_data" @footer-height="footer_height_computer"></componentDiyFooter>
|
||||
|
|
@ -37,32 +29,25 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
// 基础组件
|
||||
import componentDiyHeader from '@/components/diy/header';
|
||||
import componentDiyFooter from '@/components/diy/footer';
|
||||
import componentDiyTabs from '@/components/diy/tabs';
|
||||
import componentDiySearch from '@/components/diy/search';
|
||||
import componentCarousel from '@/components/diy/carousel.vue';
|
||||
import componentNavGroup from '@/components/diy/nav-group.vue';
|
||||
import componentDiyUserInfo from '@/components/diy/user-info';
|
||||
import componentDiyNotice from '@/components/diy/notice';
|
||||
import componentDiyVideo from '@/components/diy/video';
|
||||
import componentDiyArticleList from '@/components/diy/article-list';
|
||||
import componentDiyArticleTabs from '@/components/diy/article-tabs';
|
||||
import componentGoodsTabs from '@/components/diy/goods-tabs.vue';
|
||||
import componentGoodsList from '@/components/diy/goods-list.vue';
|
||||
import componentDiyImgMagic from '@/components/diy/img-magic';
|
||||
import componentDiyHotZone from '@/components/diy/hot-zone';
|
||||
// 插件
|
||||
import componentDiyCoupon from '@/components/diy/coupon';
|
||||
// 工具组件
|
||||
import componentFloatWindow from '@/components/diy/float-window';
|
||||
import componentTextTitle from '@/components/diy/text-title';
|
||||
import componentDiyAuxiliaryLine from '@/components/diy/auxiliary-line';
|
||||
import componentDiyRichText from '@/components/diy/rich-text.vue';
|
||||
import componentAuxiliaryBlank from '@/components/diy/auxiliary-blank.vue';
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
import componentNavGroup from '@/components/diy/nav-group.vue';
|
||||
import componentGoodsList from '@/components/diy/goods-list.vue';
|
||||
import componentGoodsTabs from '@/components/diy/goods-tabs.vue';
|
||||
import componentDataMagic from '@/components/diy/data-magic.vue'
|
||||
export default {
|
||||
name: 'diy',
|
||||
props: {
|
||||
|
|
@ -72,62 +57,39 @@
|
|||
},
|
||||
},
|
||||
components: {
|
||||
// 基础组件
|
||||
componentDiyHeader,
|
||||
componentDiyFooter,
|
||||
componentDiyTabs,
|
||||
componentDiySearch,
|
||||
componentCarousel,
|
||||
componentNavGroup,
|
||||
componentDiyUserInfo,
|
||||
componentDiyNotice,
|
||||
componentDiyVideo,
|
||||
componentDiyArticleList,
|
||||
componentDiyArticleTabs,
|
||||
componentGoodsTabs,
|
||||
componentGoodsList,
|
||||
componentDiyImgMagic,
|
||||
componentDiyHotZone,
|
||||
// 插件
|
||||
componentDiyCoupon,
|
||||
// 工具组件
|
||||
componentFloatWindow,
|
||||
componentTextTitle,
|
||||
componentDiyAuxiliaryLine,
|
||||
componentDiyRichText,
|
||||
componentFloatWindow,
|
||||
componentTextTitle,
|
||||
componentAuxiliaryBlank,
|
||||
componentNavGroup,
|
||||
componentGoodsList,
|
||||
componentGoodsTabs,
|
||||
componentDataMagic
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 底部菜单导航高度计算
|
||||
padding_footer_computer: 140,
|
||||
// 是否有选项卡
|
||||
is_tabs: false,
|
||||
// 选项卡数据
|
||||
tabs_data: {},
|
||||
// 是否是模块数据或者是九宫格商品分类样式数据， 默认模块数据
|
||||
is_tabs_type: true,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
diy_content_style() {
|
||||
return `padding-bottom:${this.padding_footer_computer}rpx`;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
// tabs选项卡数据过滤
|
||||
const filter_tabs_list = this.value.diy_data.filter((item) => item.key == 'tabs');
|
||||
if (filter_tabs_list > 0) {
|
||||
this.setData({
|
||||
tabs_data: filter_tabs_list[0].com_data,
|
||||
is_tabs: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
footer_height_computer(number) {
|
||||
this.padding_footer_computer = number * 2;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<view class="ring" :style="color"></view>
|
||||
<view class="ring" :style="color"></view>
|
||||
</block>
|
||||
<image-empty :image-src="form.button_img[0]" class="img" :style="color" img_fit="aspectFill" error-style="width: 60rpx;height: 60rpx;"></image-empty>
|
||||
<image-empty :image-src="form.button_img[0]" class="img" :type_style="color" img_fit="aspectFill" error-style="width: 60rpx;height: 60rpx;"></image-empty>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
}
|
||||
const { windowHeight } = uni.getSystemInfoSync();
|
||||
this.setData({
|
||||
color: float_style == 'shadow' ? `box-shadow: 0 10rpx 40rpx ${float_style_color}` : `background-color: ${float_style_color}`,
|
||||
color: float_style == 'shadow' ? `box-shadow: 0 10rpx 40rpx ${float_style_color};border-radius: 50%;` : `background-color: ${float_style_color};border-radius: 50%;`,
|
||||
style: `bottom: ${((offset_number / windowHeight) * 100).toFixed(4) + '%'};` + location,
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<swiper circular="true" :autoplay="value.data_style.is_roll == '1'" :interval="value.data_style.interval_time * 1000" :duration="500" :vertical="value.data_style.rotation_direction == 'vertical'" class="swiper" style="height: 100%;" @change="carousel_change">
|
||||
<swiper-item v-for="(item1, index1) in value.data_content.list" :key="index1">
|
||||
<template v-if="type === 'img'">
|
||||
<view @tap="url_event(item1.carousel_link.page)">
|
||||
<image-empty v-model="item1.carousel_img[0]" :style="contentImgRadius" error-style="width: 80rpx;height: 80rpx;"></image-empty>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<product-list-show :outerflex="value.outerflex" :flex="value.flex" :num="value.num" :actived="actived" :is-show="value.data_content.is_show" :chunk-padding="value.data_style.chunk_padding" :value="item1.split_list" :content-img-radius="contentImgRadius" @url_event="url_event"></product-list-show>
|
||||
</template>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import imageEmpty from '@/components/diy/modules/image-empty.vue';
|
||||
import productListShow from '@/components/diy/modules/data-magic/product-list-show.vue';
|
||||
import { isEmpty } from '../../../../common/js/common/common';
|
||||
export default {
|
||||
components: {
|
||||
imageEmpty,
|
||||
productListShow,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
contentImgRadius: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
actived: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
carousel_change(e) {
|
||||
this.$emit('carousel_change', e);
|
||||
},
|
||||
// 跳转链接
|
||||
url_event(link) {
|
||||
if (!isEmpty(link)) {
|
||||
app.globalData.url_open(link);
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,179 @@
|
|||
<template>
|
||||
<view v-if="outerflex == 'row'" class="wh-auto ht-auto">
|
||||
<view class="flex-row gap-10 align-c wh-auto ht-auto">
|
||||
<template v-if="flex === 'row'">
|
||||
<view v-for="(item, index) in value" :key="index" class="flex-row gap-10 half-width ht-auto" @tap="url_event(item.goods_url)">
|
||||
<template v-if="!isEmpty(item.new_cover)">
|
||||
<image-empty :image-src="item.new_cover[0]" class="wh-auto ht-auto" :style="contentImgRadius" error-style="width: 80rpx;height: 80rpx;"></image-empty>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image-empty :image-src="item.images" class="wh-auto ht-auto" :style="contentImgRadius" error-style="width: 80rpx;height: 80rpx;"></image-empty>
|
||||
</template>
|
||||
<view v-if="!isEmpty(isShow)" class="flex-col wh-auto ht-auto tl gap-10">
|
||||
<view v-if="isShow.includes('title')" class="text-line-2 text-size-md shop-title">{{ item.title }}</view>
|
||||
<view v-if="isShow.includes('price')" class="identifying">
|
||||
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
|
||||
<template v-if="isShow.includes('price_unit')">
|
||||
<span class="num">{{ item.show_price_unit }}</span>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="actived != 7 || num !== 1">
|
||||
<view v-for="(item, index) in value" :key="index" :class="['flex-col gap-10 ht-auto', { 'half-width': num !== 1, 'wh-auto': num == 1 }]" @tap="url_event(item.goods_url)">
|
||||
<view class="wh-auto ht-auto pr">
|
||||
<template v-if="!isEmpty(item.new_cover)">
|
||||
<image-empty :image-src="item.new_cover[0]" class="wh-auto ht-auto" :style="contentImgRadius" error-style="width: 80rpx;height: 80rpx;"></image-empty>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image-empty :image-src="item.images" class="wh-auto ht-auto" :style="contentImgRadius" error-style="width: 80rpx;height: 80rpx;"></image-empty>
|
||||
</template>
|
||||
<view v-if="isShow.includes('price')" class="price-suspension text-line-1">
|
||||
{{ item.show_price_symbol }}{{ item.min_price }}
|
||||
<template v-if="isShow.includes('price_unit')">
|
||||
{{ item.show_price_unit }}
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isShow.includes('title')" class="text-line-1 text-size-md shop-title tl wh-auto" style="overflow: inherit;">{{ item.title }}</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-for="(item, index) in value" :key="index" class="flex-col wh-auto ht-auto" @tap="url_event(item.goods_url)">
|
||||
<template v-if="!isEmpty(item.new_cover)">
|
||||
<image-empty :image-src="item.new_cover[0]" class="wh-auto ht-auto" :style="contentImgRadius" error-style="width: 80rpx;height: 80rpx;"></image-empty>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image-empty :image-src="item.images" class="wh-auto ht-auto" :style="contentImgRadius" error-style="width: 80rpx;height: 80rpx;"></image-empty>
|
||||
</template>
|
||||
<view v-if="!isEmpty(isShow)" class="flex-col wh-auto tl gap-10" :style="img_padding_computer">
|
||||
<view v-if="isShow.includes('title')" class="text-line-2 text-size-md shop-title">{{ item.title }}</view>
|
||||
<view v-if="isShow.includes('price')" class="identifying">
|
||||
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
|
||||
<template v-if="isShow.includes('price_unit')">
|
||||
<span class="num">{{ item.show_price_unit }}</span>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="wh-auto ht-auto">
|
||||
<view class="flex-col gap-20 align-c wh-auto ht-auto">
|
||||
<template v-if="flex === 'row'">
|
||||
<view v-for="(item, index) in value" :key="index" class="flex-row gap-10 align-c wh-auto ht-auto shop-max-height" @tap="url_event(item.goods_url)">
|
||||
<template v-if="!isEmpty(item.new_cover)">
|
||||
<image-empty :image-src="item.new_cover[0]" class="wh-auto ht-auto" :style="contentImgRadius" error-style="width: 80rpx;height: 80rpx;"></image-empty>
|
||||
</template>
|
||||
<template v-else>
|
||||
<image-empty :image-src="item.images" class="wh-auto ht-auto" :style="contentImgRadius" error-style="width: 80rpx;height: 80rpx;"></image-empty>
|
||||
</template>
|
||||
<view v-if="!isEmpty(isShow)" class="flex-col wh-auto ht-auto tl gap-20">
|
||||
<view v-if="isShow.includes('title')" class="text-line-2 text-size-md shop-title">{{ item.title }}</view>
|
||||
<view v-if="isShow.includes('price')" class="identifying">
|
||||
<span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
|
||||
<template v-if="isShow.includes('price_unit')">
|
||||
<span class="num">{{ item.show_price_unit }}</span>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { isEmpty, padding_computer } from '@/common/js/common/common.js';
|
||||
import imageEmpty from '@/components/diy/modules/image-empty.vue'
|
||||
export default {
|
||||
components: {
|
||||
imageEmpty,
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
outerflex: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
flex: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
contentImgRadius: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
num: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
actived: {
|
||||
type: Number,
|
||||
default: () => 0,
|
||||
},
|
||||
isShow: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
chunkPadding: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
img_padding_computer() {
|
||||
if (!isEmpty(this.chunkPadding)) {
|
||||
return padding_computer(this.chunkPadding) + ';box-sizing: border-box;'
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isEmpty,
|
||||
url_event(link) {
|
||||
this.$emit('url_event', link);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.identifying {
|
||||
font-size: 28rpx;
|
||||
color: #EA3323;
|
||||
.num {
|
||||
font-size: 18rpx;
|
||||
}
|
||||
}
|
||||
.price-suspension {
|
||||
width: calc(100% - 32rpx);
|
||||
margin: 0 8rpx;
|
||||
background: #fff;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: #EA3323;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 8rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.shop-max-height{
|
||||
max-height: calc(100% / 3);
|
||||
}
|
||||
.half-width {
|
||||
width: 50%;
|
||||
}
|
||||
.shop-title {
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.gap-20 {
|
||||
gap: 40rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="oh img_wh" :style="empty_outer_style">
|
||||
<view :class="['oh img_wh', type_class]" :style="empty_outer_style + type_style">
|
||||
<image :src="imageUrl" @error="handleImageError" :mode="img_fit" :style="empty_style" />
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -19,6 +19,14 @@
|
|||
img_fit: {
|
||||
type: String,
|
||||
default: () => 'aspectFill',
|
||||
},
|
||||
type_style: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
type_class: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<view :style="style_container">
|
||||
<swiper circular="true" :autoplay="new_style.is_roll == '1'" :interval="new_style.interval_time * 1000" :duration="500" :style="{ height: newHeight }" @change="slideChange">
|
||||
<swiper-item v-for="(item, index) in nav_content_list" :key="index" class="flex-row align-c" @tap="url_open(item.carousel_link)">
|
||||
<view ref="bannerImg" class="flex-row flex-wrap wh-auto gap-x-10">
|
||||
<view class="bannerImg flex-row flex-wrap wh-auto gap-x-10">
|
||||
<view v-for="(item1, index1) in item.split_list" :key="index1" class="flex-col gap-10 align-c" :style="{ width: group_width }" @tap="url_open_event(item1.link)">
|
||||
<view v-if="['image_with_text', 'image'].includes(nav_style)" class="top-img flex-row align-c jc-c">
|
||||
<image-empty :image-src="item1.img[0]" :style="img_style" error-style="width: 60rpx;height: 60rpx;"></image-empty>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
img_style: '',
|
||||
text_style: '',
|
||||
indicator_style: '',
|
||||
newHeight: '200rpx',
|
||||
newHeight: '300rpx',
|
||||
actived_index: 0,
|
||||
group_width: '',
|
||||
nav_content_list: [],
|
||||
|
|
@ -61,15 +61,9 @@
|
|||
form: this.value.content,
|
||||
new_style: this.value.style,
|
||||
});
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.newHeight = this.$refs.bannerImg[0].$el.clientHeight * 2 + 'rpx';
|
||||
});
|
||||
window.onresize = () => {
|
||||
this.newHeight = this.$refs.bannerImg[0].$el.clientHeight * 2 + 'rpx';
|
||||
};
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
|
|
@ -83,6 +77,21 @@
|
|||
nav_style: this.form.nav_style || 'image_with_text', // 是否显示文字和图片
|
||||
nav_content_list: this.get_nav_content_list(),
|
||||
});
|
||||
setTimeout(() => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
// 选择我们想要的元素
|
||||
query
|
||||
.select('.bannerImg')
|
||||
.boundingClientRect((res) => {
|
||||
if ((res || null) != null) {
|
||||
// data包含元素的宽度、高度等信息
|
||||
this.setData({
|
||||
newHeight: res.height * 2 + 'rpx',
|
||||
});
|
||||
}
|
||||
})
|
||||
.exec(); // 执行查询
|
||||
}, 0)
|
||||
},
|
||||
get_nav_content_list() {
|
||||
// 深拷贝一下，确保不会出现问题
|
||||
|
|
@ -148,6 +157,7 @@
|
|||
height: 100rpx;
|
||||
width: 100rpx;
|
||||
border-radius: 8rpx;
|
||||
background-color: #f4fcff;
|
||||
}
|
||||
|
||||
.dot {
|
||||
|
|
|
|||
Loading…
Reference in New Issue