mirror of
https://gitee.com/zongzhige/shopxo-uniapp.git
synced 2026-07-05 05:13:24 +08:00
修改手机端处理逻辑
This commit is contained in:
于肖磊
@ -1,23 +1,50 @@
|
||||
<template>
|
||||
<view :style="style_container">
|
||||
<view class="custom-container wh-auto ht-auto" :style="style_img_container">
|
||||
<view class="wh-auto pr" :style="'height:' + form.height * scale + 'px;'">
|
||||
<view v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x, div_width), top: get_percentage_count(item.location.y, div_height), width: get_percentage_count(item.com_data.com_width, div_width), height: get_percentage_count(item.com_data.com_height, div_height), 'z-index': custom_list_length > 0 ? custom_list_length - index : 0 }">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-text>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'img'">
|
||||
<model-image :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-image>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content"></model-lines>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'icon'">
|
||||
<model-icon :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-icon>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'panel'">
|
||||
<model-panel :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-panel>
|
||||
</template>
|
||||
<view v-if="data_source_content_list.length > 0">
|
||||
<view v-for="(item1, index1) in data_source_content_list" :key="index1" :style="style_container">
|
||||
<view class="custom-container wh-auto ht-auto" :style="style_img_container">
|
||||
<view class="wh-auto pr" :style="'height:' + form.height * scale + 'px;'">
|
||||
<view v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x, div_width), top: get_percentage_count(item.location.y, div_height), width: get_percentage_count(item.com_data.com_width, div_width), height: get_percentage_count(item.com_data.com_height, div_height), 'z-index': custom_list_length > 0 ? custom_list_length - index : 0 }">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-text>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'img'">
|
||||
<model-image :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-image>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source"></model-lines>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'icon'">
|
||||
<model-icon :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-icon>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'panel'">
|
||||
<model-panel :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-panel>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view :style="style_container">
|
||||
<view class="custom-container wh-auto ht-auto" :style="style_img_container">
|
||||
<view class="wh-auto pr" :style="'height:' + form.height * scale + 'px;'">
|
||||
<view v-for="(item, index) in form.custom_list" :key="item.id" class="main-content" :style="{ left: get_percentage_count(item.location.x, div_width), top: get_percentage_count(item.location.y, div_height), width: get_percentage_count(item.com_data.com_width, div_width), height: get_percentage_count(item.com_data.com_height, div_height), 'z-index': custom_list_length > 0 ? custom_list_length - index : 0 }">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-text>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'img'">
|
||||
<model-image :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-image>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :propKey="propKey" :propValue="item.com_data" :propScale="scale"></model-lines>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'icon'">
|
||||
<model-icon :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-icon>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'panel'">
|
||||
<model-panel :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-panel>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -32,6 +59,7 @@
|
||||
import modelImage from '@/components/diy/modules/custom/model-image.vue';
|
||||
import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
|
||||
import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
|
||||
import { isEmpty } from '../../common/js/common/common';
|
||||
var system = app.globalData.get_system_info(null, null, true);
|
||||
var sys_width = app.globalData.window_width_handle(system.windowWidth);
|
||||
|
||||
@ -74,6 +102,74 @@
|
||||
div_width: 0,
|
||||
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: [],
|
||||
}
|
||||
},
|
||||
data_source_content_list: [],
|
||||
data_source: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -97,6 +193,38 @@
|
||||
init() {
|
||||
const new_form = this.propValue.content;
|
||||
const new_style = this.propValue.style;
|
||||
// 不包含新创建的数组时，将历史数据放到手动添加数组中
|
||||
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'];
|
||||
}
|
||||
// 如果老数组中有数据，将数据放到新数组中
|
||||
if (!isEmpty(data)) {
|
||||
new_form.data_source_content.data_list = [ data ];
|
||||
}
|
||||
}
|
||||
// 数据来源的内容
|
||||
let list = [];
|
||||
if (['goods', 'article', 'brand'].includes(new_form.data_source)) {
|
||||
if (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;
|
||||
}
|
||||
console.log(list);
|
||||
const { margin_left, margin_right, padding_left, padding_right } = new_style.common_style;
|
||||
const width = sys_width - margin_left - margin_right - padding_left - padding_right - this.propOuterContainerPadding;
|
||||
this.setData({
|
||||
@ -108,6 +236,8 @@
|
||||
style_container: common_styles_computer(new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
|
||||
style_img_container: common_img_computer(new_style.common_style, this.propIndex),
|
||||
div_height: new_form.height,
|
||||
data_source_content_list: list,
|
||||
data_source: !isEmpty(new_form.data_source)? new_form.data_source : '',
|
||||
});
|
||||
},
|
||||
url_event(e) {
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<view class="img-outer pr oh flex-row align-c wh-auto ht-auto" :style="com_style" :data-value="form.icon_link.page" @tap="url_event">
|
||||
<iconfont :name="'icon-' + form.icon_class" :color="form.icon_color" :size="form.icon_size * scale + 'px'" propContainerDisplay="flex"></iconfont>
|
||||
<iconfont :name="'icon-' + icon_class" :color="form.icon_color" :size="form.icon_size * scale + 'px'" propContainerDisplay="flex"></iconfont>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { radius_computer, padding_computer, gradient_handle } from '@/common/js/common/common.js';
|
||||
import { isEmpty } from '../../../../common/js/common/common';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
@ -28,6 +29,10 @@
|
||||
propScale: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
propSourceType: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -35,6 +40,7 @@
|
||||
form: {},
|
||||
com_style: '',
|
||||
scale: 1,
|
||||
icon_class: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -47,10 +53,27 @@
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let icon_class_value = '';
|
||||
if (!isEmpty(this.propValue.icon_class)) {
|
||||
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];
|
||||
}
|
||||
icon_class_value = icon;
|
||||
} else {
|
||||
icon_class_value = '';
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
form: this.propValue,
|
||||
scale: this.propScale,
|
||||
com_style: this.get_com_style(this.propValue, this.propScale),
|
||||
icon_class: icon_class_value,
|
||||
});
|
||||
},
|
||||
get_com_style(form, scale) {
|
||||
|
||||
@ -31,6 +31,10 @@
|
||||
propScale: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
propSourceType: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -39,6 +43,11 @@
|
||||
img: '',
|
||||
image_style: '',
|
||||
border_style: '',
|
||||
keyMap: {
|
||||
goods: 'images',
|
||||
article: 'cover',
|
||||
brand: 'logo'
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -51,6 +60,7 @@
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
|
||||
this.setData({
|
||||
form: this.propValue,
|
||||
img: this.get_img_url(this.propValue),
|
||||
@ -63,7 +73,19 @@
|
||||
return form.img[0];
|
||||
} else {
|
||||
if (!isEmpty(this.propSourceList)) {
|
||||
return this.propSourceList[form.data_source_id];
|
||||
// 不输入商品， 文章和品牌时，从外层处理数据
|
||||
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];
|
||||
}
|
||||
}
|
||||
return image_url;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
|
||||
@ -35,6 +35,10 @@
|
||||
propScale: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
propSourceType: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -43,6 +47,11 @@
|
||||
text_title: '',
|
||||
text_style: '',
|
||||
com_style: '',
|
||||
keyMap: {
|
||||
goods: 'title',
|
||||
article: 'title',
|
||||
brand: 'name'
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -66,8 +75,18 @@
|
||||
let text = '';
|
||||
if (!isEmpty(form.text_title)) {
|
||||
text = form.text_title;
|
||||
} else if (!isEmpty(this.propSourceList[form.data_source_id])) {
|
||||
} else {
|
||||
text = this.propSourceList[form.data_source_id];
|
||||
// 如果是商品的标题或者是品牌的名称，需要判断是否有新的标题，没有的话就取原来的标题
|
||||
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];
|
||||
}
|
||||
}
|
||||
}
|
||||
return text;
|
||||
},
|
||||
|
||||
@ -1,110 +1,171 @@
|
||||
<template>
|
||||
<view class="wh-auto ht-auto oh" :style="style_container">
|
||||
<view class="wh-auto ht-auto pr oh">
|
||||
<view v-for="(item, index) in form.custom_list" :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': custom_list_length > 0 ? custom_list_length - index : 0 }">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-text>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'img'">
|
||||
<model-image :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-image>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content"></model-lines>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'icon'">
|
||||
<model-icon :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-icon>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'panel'">
|
||||
<model-panel :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="form.data_source_content" @url_event="url_event"></model-panel>
|
||||
</template>
|
||||
<view v-if="data_source_content_list.length > 0">
|
||||
<view v-for="(item1, index1) in data_source_content_list" :key="index1" class="oh" :style="style_container">
|
||||
<view class="custom-container wh-auto ht-auto oh" :style="style_img_container">
|
||||
<view class="wh-auto pr oh" :style="'height:' + form.height * scale + 'px;'">
|
||||
<view v-for="(item, index) in form.custom_list" :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': custom_list_length > 0 ? custom_list_length - index : 0 }">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-text>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'img'">
|
||||
<model-image :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-image>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source"></model-lines>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'icon'">
|
||||
<model-icon :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-icon>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'panel'">
|
||||
<model-panel :propKey="propKey" :propValue="item.com_data" :propScale="scale" :propSourceList="item1" :propSourceType="data_source" @url_event="url_event"></model-panel>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="oh" :style="style_container">
|
||||
<view class="custom-container wh-auto ht-auto oh" :style="style_img_container">
|
||||
<view class="wh-auto pr oh" :style="'height:' + form.height * scale + 'px;'">
|
||||
<view v-for="(item, index) in form.custom_list" :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': custom_list_length > 0 ? custom_list_length - index : 0 }">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-text>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'img'">
|
||||
<model-image :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-image>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :propKey="propKey" :propValue="item.com_data" :propScale="scale"></model-lines>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'icon'">
|
||||
<model-icon :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-icon>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'panel'">
|
||||
<model-panel :propKey="propKey" :propValue="item.com_data" :propScale="scale" @url_event="url_event"></model-panel>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { padding_computer } from '@/common/js/common/common.js';
|
||||
const app = getApp();
|
||||
import modelText from '@/components/diy/modules/custom/model-text.vue';
|
||||
import modelLines from '@/components/diy/modules/custom/model-lines.vue';
|
||||
import modelImage from '@/components/diy/modules/custom/model-image.vue';
|
||||
import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
|
||||
import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
|
||||
import { isEmpty } from '../../../../../common/js/common/common';
|
||||
import { padding_computer, isEmpty, margin_computer, gradient_computer, radius_computer, background_computer } from '@/common/js/common/common.js';
|
||||
const app = getApp();
|
||||
import modelText from '@/components/diy/modules/custom/model-text.vue';
|
||||
import modelLines from '@/components/diy/modules/custom/model-lines.vue';
|
||||
import modelImage from '@/components/diy/modules/custom/model-image.vue';
|
||||
import modelIcon from '@/components/diy/modules/custom/model-icon.vue';
|
||||
import modelPanel from '@/components/diy/modules/custom/model-panel.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
modelText,
|
||||
modelLines,
|
||||
modelImage,
|
||||
modelIcon,
|
||||
modelPanel,
|
||||
},
|
||||
props: {
|
||||
propValue: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
export default {
|
||||
components: {
|
||||
modelText,
|
||||
modelLines,
|
||||
modelImage,
|
||||
modelIcon,
|
||||
modelPanel,
|
||||
},
|
||||
props: {
|
||||
propValue: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
propMagicScale: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
propDataSpacing: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
new_style: {},
|
||||
scale: 1,
|
||||
style_container: '',
|
||||
div_width: 0,
|
||||
div_height: 0,
|
||||
custom_list_length: 0,
|
||||
propMagicScale: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
propDataSpacing: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
new_style: {},
|
||||
scale: 1,
|
||||
style_container: '',
|
||||
div_width: 0,
|
||||
div_height: 0,
|
||||
custom_list_length: 0,
|
||||
data_source_content_list: [],
|
||||
data_source: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
get_percentage_count() {
|
||||
return (num) => {
|
||||
return num * this.scale + 'px';
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
get_percentage_count() {
|
||||
return (num) => {
|
||||
return num * this.scale + 'px';
|
||||
};
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!isEmpty(this.propValue)) {
|
||||
const new_form = this.propValue.data_content;
|
||||
const new_style = this.propValue.data_style;
|
||||
const { padding_left, padding_right } = new_style.chunk_padding;
|
||||
const width = new_form.width - padding_left - padding_right - (this.propDataSpacing / 2);
|
||||
this.setData({
|
||||
propKey: Math.random(),
|
||||
form: new_form,
|
||||
new_style: new_style,
|
||||
div_width: width,
|
||||
scale: (width / new_form.width) * this.propMagicScale,
|
||||
custom_list_length: new_form.custom_list.length - 1,
|
||||
style_container: padding_computer(new_style.chunk_padding) + 'box-sizing: border-box;', // 用于样式显示
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (!isEmpty(this.propValue)) {
|
||||
const new_form = this.propValue.data_content;
|
||||
const new_style = this.propValue.data_style;
|
||||
const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }, data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }, data_chunk_margin = { margin: 0, margin_top: 0, margin_bottom: 0, margin_left: 0, margin_right: 0 } } = new_style;
|
||||
const style_data = {
|
||||
color_list: data_color_list,
|
||||
direction: data_direction,
|
||||
}
|
||||
},
|
||||
url_event(e) {
|
||||
app.globalData.url_event(e);
|
||||
},
|
||||
const style_img_data = {
|
||||
background_img: data_background_img,
|
||||
background_img_style: data_background_img_style,
|
||||
}
|
||||
const { padding_left, padding_right } = data_chunk_padding;
|
||||
const { margin_left, margin_right } = data_chunk_margin;
|
||||
const width = new_form.width - padding_left - padding_right - margin_left - margin_right - (this.propDataSpacing / 2);
|
||||
// 数据来源的内容
|
||||
let list = [];
|
||||
if (['goods', 'article', 'brand'].includes(new_form.data_source)) {
|
||||
if (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;
|
||||
}
|
||||
this.setData({
|
||||
propKey: Math.random(),
|
||||
form: new_form,
|
||||
new_style: new_style,
|
||||
div_width: width,
|
||||
scale: (width / new_form.width) * this.propMagicScale,
|
||||
custom_list_length: new_form.custom_list.length - 1,
|
||||
style_container: gradient_computer(style_data) + radius_computer(data_radius) + margin_computer(data_chunk_margin), // 用于样式显示
|
||||
style_img_container: padding_computer(data_chunk_padding) + background_computer(style_img_data) + 'box-sizing: border-box;',
|
||||
data_source_content_list: list,
|
||||
data_source: !isEmpty(new_form.data_source)? new_form.data_source : '',
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
url_event(e) {
|
||||
app.globalData.url_event(e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main-content {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
.main-content {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="wh-auto ht-auto oh ssss" :style="style_container">
|
||||
<view class="wh-auto ht-auto oh" :style="style_container">
|
||||
<view class="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'" class="swiper" style="height: 100%" @change="carousel_change">
|
||||
<swiper-item v-for="(item1, index1) in propValue.data_content.list" :key="index1">
|
||||
|
||||
Reference in New Issue
Block a user