自定义组件迁移
于肖磊
parent
d5434fd92e
commit
cfffb723f1
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<view ref="container" :style="style_container + 'height:'+ form.height * 2 + 'rpx;'">
|
||||
<view class="wh-auto ht-auto pr">
|
||||
<view v-for="item in form.custom_list" :key="item.id" class="main-content" :style="{'left': percentage_count(item.location.x, div_width) , 'top': percentage_count(item.location.y, form.height), 'width': percentage_count(item.com_data.com_width, div_width), 'height': percentage_count(item.com_data.com_height, form.height)}">
|
||||
<template v-if="item.key == 'text'">
|
||||
<model-text :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" @url_open="url_open"></model-text>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'img'">
|
||||
<model-image :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content" @url_open="url_open"></model-image>
|
||||
</template>
|
||||
<template v-else-if="item.key == 'auxiliary-line'">
|
||||
<model-lines :key="item.com_data" :value="item.com_data" :source-list="form.data_source_content"></model-lines>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { common_styles_computer, percentage_count } from '@/common/js/common/common.js';
|
||||
const app = getApp();
|
||||
var system = app.globalData.get_system_info(null, null, true);
|
||||
var sys_width = app.globalData.window_width_handle(system.windowWidth);
|
||||
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';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
modelText,
|
||||
modelLines,
|
||||
modelImage
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
new_style: {},
|
||||
style_container: '',
|
||||
custom_height: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.setData({
|
||||
form: this.value.content,
|
||||
new_style: this.value.style,
|
||||
});
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.setData({
|
||||
style_container: common_styles_computer(this.new_style.common_style) + 'box-sizing: border-box;', // 用于样式显示
|
||||
div_width: sys_width
|
||||
});
|
||||
},
|
||||
url_open(link) {
|
||||
if (!isEmpty(link)) {
|
||||
app.globalData.url_open(link);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main-content {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -317,22 +317,4 @@
|
|||
.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>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<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">
|
||||
{{ item.key }}
|
||||
<!-- 基础组件 -->
|
||||
<componentDiySearch v-if="item.key == 'search'" :value="item.com_data"></componentDiySearch>
|
||||
<componentCarousel v-else-if="item.key == 'carousel'" :value="item.com_data"></componentCarousel>
|
||||
|
|
@ -18,6 +19,7 @@
|
|||
<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>
|
||||
<componentDataMagic v-if="item.key == 'data-magic'" :value="item.com_data"></componentDataMagic>
|
||||
<componentCustom v-if="item.key == 'custom'" :value="item.com_data"></componentCustom>
|
||||
<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>
|
||||
<!-- 插件 -->
|
||||
|
|
@ -57,7 +59,8 @@
|
|||
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'
|
||||
import componentDataMagic from '@/components/diy/data-magic.vue';
|
||||
import componentCustom from '@/components/diy/custom.vue'
|
||||
export default {
|
||||
name: 'diy',
|
||||
props: {
|
||||
|
|
@ -85,12 +88,19 @@
|
|||
componentNavGroup,
|
||||
componentGoodsList,
|
||||
componentGoodsTabs,
|
||||
componentDataMagic
|
||||
componentDataMagic,
|
||||
componentCustom
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 底部菜单导航高度计算
|
||||
padding_footer_computer: 140,
|
||||
// 是否有选项卡
|
||||
is_tabs: false,
|
||||
// 选项卡数据
|
||||
tabs_data: {},
|
||||
// 是否是模块数据或者是九宫格商品分类样式数据， 默认模块数据
|
||||
is_tabs_type: true,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<view class="img-outer pr wh-auto ht-auto" :style="border_style" @tap="url_open(form.link)">
|
||||
<image-empty v-model="img" :style="image_style"></image-empty>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { percentage_count, radius_computer, isEmpty } from '@/common/js/common/common.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
sourceList: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
img: '',
|
||||
image_style: '',
|
||||
border_style: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.setData({
|
||||
form: this.value,
|
||||
});
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.setData({
|
||||
img: this.get_img_url(),
|
||||
image_style: this.get_image_style(),
|
||||
border_style: this.get_border_style(),
|
||||
});
|
||||
},
|
||||
get_img_url() {
|
||||
if (!isEmpty(this.form.img[0])) {
|
||||
return this.form.img[0];
|
||||
} else {
|
||||
if (!isEmpty(this.sourceList)) {
|
||||
return this.sourceList[this.form.data_source_id];
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
get_image_style() {
|
||||
return `${set_count()};transform: rotate(${this.form.img_rotate}deg); ${radius_computer(this.form.img_radius)};`;
|
||||
},
|
||||
get_border_style() {
|
||||
let style = ``;
|
||||
if (this.form.border_show == '1') {
|
||||
style += `border: ${this.form.border_size}px ${this.form.border_style} ${this.form.border_color}; ${radius_computer(this.form.border_radius)};`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
set_count() {
|
||||
return `width: ${percentage_count(this.form.img_width, this.form.com_width)}; height: ${percentage_count(this.form.img_height, this.form.com_height)};`;
|
||||
},
|
||||
url_open(link) {
|
||||
this.$emit('url_open', link)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.img-outer {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<view :style="border_style"></view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
border_style: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.setData({
|
||||
form: this.value,
|
||||
});
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.setData({
|
||||
border_style: this.get_border_style(),
|
||||
});
|
||||
},
|
||||
get_border_style() {
|
||||
if (this.form.line_settings === 'horizontal') {
|
||||
return `margin: 5px 0;border-bottom: ${this.form.line_size}px ${this.form.line_style} ${this.form.line_color};`;
|
||||
} else {
|
||||
return `margin: 0 5px;border-right: ${this.form.line_size}px ${this.form.line_style} ${this.form.line_color};`;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<template>
|
||||
<view class="img-outer re oh" :style="com_style" @tap="url_open(form.text_link)">
|
||||
<view :style="text_style" class="break">
|
||||
<template v-if="form.is_rich_text == '1'">
|
||||
<view class="rich-text-content" :innerHTML="text_title"></view>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ text_title }}
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { radius_computer, padding_computer, isEmpty } from '@/common/js/common/common.js';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
sourceList: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
text_title: '',
|
||||
text_style: '',
|
||||
com_style: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.setData({
|
||||
form: this.value,
|
||||
});
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.setData({
|
||||
text_title: this.get_text_title(),
|
||||
text_style: this.get_text_style(),
|
||||
com_style: this.get_com_style(),
|
||||
});
|
||||
},
|
||||
get_text_title() {
|
||||
let text = '';
|
||||
if (!isEmpty(this.form.text_title)) {
|
||||
text = this.form.text_title;
|
||||
} else if (!isEmpty(this.sourceList[this.form.data_source_id])) {
|
||||
text = this.sourceList[this.form.data_source_id];
|
||||
}
|
||||
return text;
|
||||
},
|
||||
get_text_style() {
|
||||
let style = `font-size: ${this.form.text_size}px;color: ${this.form.text_color}; text-align: ${this.form.text_location}; transform: rotate(${this.form.text_rotate}deg);text-decoration: ${this.form.text_option};${padding_computer(this.form.text_padding)};`;
|
||||
if (this.form.text_weight == 'italic') {
|
||||
style += `font-style: italic`;
|
||||
} else if (this.form.text_weight == '500') {
|
||||
style += `font-weight: 500`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
get_com_style() {
|
||||
let style = `background-color: ${this.form.com_bg}; ${radius_computer(this.form.bg_radius)}`;
|
||||
if (this.form.border_show == '1') {
|
||||
style += `border: ${this.form.border_size}px ${this.form.border_style} ${this.form.border_color};`;
|
||||
}
|
||||
// 是富文本并且开启了上下滚动的开关
|
||||
if (this.form.is_rich_text == '1' && this.form.is_up_down == '1') {
|
||||
style += `overflow-y: auto;`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
url_open(link) {
|
||||
this.$emit('url_open', link)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.break {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
.rich-text-content {
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
* {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue