chore(组件): 引入DiyMinx的js及修复组件错误
This commit is contained in:
@@ -5,34 +5,34 @@
|
||||
<!-- 门店展示 -->
|
||||
<diy-store :value="item"></diy-store>
|
||||
</view>
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'Kefu'">
|
||||
<!-- 客服按钮 -->
|
||||
<diy-kefu :value="item"></diy-kefu>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'Form'">
|
||||
<!-- 表单组件 -->
|
||||
<diy-form :value="item"></diy-form>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<template v-if="addonIsExist.store && item.componentName == 'StoreLabel'">
|
||||
<!-- 门店标签 -->
|
||||
<diy-store-label :value="item"></diy-store-label>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'Picture'">
|
||||
<!-- 单图组组件 -->
|
||||
<diy-picture :value="item"></diy-picture>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'Listmenu'">
|
||||
<!-- 列表按钮组件 -->
|
||||
<diy-listmenu :value="item"></diy-listmenu>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'Text'">
|
||||
<!-- 文本 -->
|
||||
<diy-text :value="item"></diy-text>
|
||||
@@ -55,7 +55,8 @@
|
||||
|
||||
<template v-if="item.componentName == 'Search'">
|
||||
<!-- 搜索 -->
|
||||
<diy-search :value="item" :topNavColor="topNavColor" :global="diyGlobalData.global" :haveTopCategory="haveTopCategory" :followOfficialAccount="followOfficialAccount"></diy-search>
|
||||
<diy-search :value="item" :topNavColor="topNavColor" :global="diyGlobalData.global"
|
||||
:haveTopCategory="haveTopCategory" :followOfficialAccount="followOfficialAccount"></diy-search>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'RichText'">
|
||||
@@ -85,7 +86,8 @@
|
||||
|
||||
<template v-if="item.componentName == 'ManyGoodsList'">
|
||||
<!-- 多商品组 -->
|
||||
<diy-many-goods-list :value="item" :global="diyGlobalData.global" :scrollTop="scrollTop"></diy-many-goods-list>
|
||||
<diy-many-goods-list :value="item" :global="diyGlobalData.global"
|
||||
:scrollTop="scrollTop"></diy-many-goods-list>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'RubikCube'">
|
||||
@@ -97,8 +99,8 @@
|
||||
<!-- 视频 -->
|
||||
<diy-video :value="item"></diy-video>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'Seckill' && addonIsExist.seckill">
|
||||
@@ -167,7 +169,7 @@
|
||||
<!-- 文章 -->
|
||||
<diy-article :value="item"></diy-article>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'MerchList'">
|
||||
<!-- 商户列表 -->
|
||||
<diy-merch-list :value="item"></diy-merch-list>
|
||||
@@ -202,13 +204,13 @@
|
||||
<!-- 关注公众号 -->
|
||||
<diy-follow-official-account :value="item"></diy-follow-official-account>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'Map'">
|
||||
<!-- 地图组件 -->
|
||||
<diy-map :value="item"></diy-map>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'Audio'">
|
||||
<!-- 音频 -->
|
||||
<diy-audio :value="item"></diy-audio>
|
||||
@@ -222,33 +224,33 @@
|
||||
<template v-if="item.componentName == 'Digit'">
|
||||
<!-- 数字 -->
|
||||
<diy-digit :value="item"></diy-digit>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'VideoList'">
|
||||
<!-- 视频列表 -->
|
||||
<diy-video-list :value="item"></diy-video-list>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'BottomNav'">
|
||||
<!-- 底部导航 -->
|
||||
<diy-bottom-nav :value="item"></diy-bottom-nav>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'CategoryItem'">
|
||||
<!-- 分类项 -->
|
||||
<diy-category-item :value="item"></diy-category-item>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'Category'">
|
||||
<!-- 分类 -->
|
||||
<diy-category :value="item"></diy-category>
|
||||
</template>
|
||||
|
||||
|
||||
<template v-if="item.componentName == 'Icon'">
|
||||
<!-- 图标 -->
|
||||
<diy-icon :value="item"></diy-icon>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 自定义扩展组件 -->
|
||||
<diy-comp-extend :value="item"></diy-comp-extend>
|
||||
</view>
|
||||
@@ -256,96 +258,98 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 组件组
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
diyData: {
|
||||
type: Object
|
||||
},
|
||||
scrollTop: {
|
||||
type: [String, Number],
|
||||
default: '0'
|
||||
},
|
||||
haveTopCategory: {
|
||||
type: Boolean
|
||||
},
|
||||
followOfficialAccount: {
|
||||
type: Object
|
||||
},
|
||||
// 组件组展示
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
diyData: {
|
||||
type: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
diyGlobalData: null
|
||||
};
|
||||
scrollTop: {
|
||||
type: [String, Number],
|
||||
default: '0'
|
||||
},
|
||||
created() {
|
||||
this.diyGlobalData = JSON.parse(JSON.stringify(this.diyData));
|
||||
haveTopCategory: {
|
||||
type: Boolean
|
||||
},
|
||||
computed: {
|
||||
topNavColor() {
|
||||
var color = '';
|
||||
if (this.diyData.global.topNavBg) {
|
||||
color = 'transparent';
|
||||
if (this.scrollTop > 20) {
|
||||
color = this.diyData.global.topNavColor;
|
||||
} else {
|
||||
color = 'transparent';
|
||||
}
|
||||
} else {
|
||||
followOfficialAccount: {
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
diyGlobalData: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.diyGlobalData = JSON.parse(JSON.stringify(this.diyData));
|
||||
},
|
||||
computed: {
|
||||
topNavColor() {
|
||||
var color = '';
|
||||
if (this.diyData.global.topNavBg) {
|
||||
color = 'transparent';
|
||||
if (this.scrollTop > 20) {
|
||||
color = this.diyData.global.topNavColor;
|
||||
} else {
|
||||
color = 'transparent';
|
||||
}
|
||||
return color;
|
||||
},
|
||||
// 修改属性样式
|
||||
setPagestyle() {
|
||||
this.diyGlobalData.value.forEach((item, index) => {
|
||||
item.pageStyle = '';
|
||||
// 给每个组件增加位置属性，用于定位，搜索、分类导航等定位
|
||||
item.moduleIndex = index + 1;
|
||||
} else {
|
||||
color = this.diyData.global.topNavColor;
|
||||
}
|
||||
return color;
|
||||
},
|
||||
// 修改属性样式
|
||||
setPagestyle() {
|
||||
this.diyGlobalData.value.forEach((item, index) => {
|
||||
item.pageStyle = '';
|
||||
// 给每个组件增加位置属性，用于定位，搜索、分类导航等定位
|
||||
item.moduleIndex = index + 1;
|
||||
|
||||
// 特殊处理搜索框 当显示位置为滚动至顶部固定时，只设置背景颜色
|
||||
if (item.componentName == 'Search' && item.positionWay == 'fixed') {
|
||||
// item.pageStyle = 'background-color:' + item.pageBgColor + ';';
|
||||
return false;
|
||||
}
|
||||
// 特殊处理搜索框 当显示位置为滚动至顶部固定时，只设置背景颜色
|
||||
if (item.componentName == 'Search' && item.positionWay == 'fixed') {
|
||||
// item.pageStyle = 'background-color:' + item.pageBgColor + ';';
|
||||
return false;
|
||||
}
|
||||
|
||||
item.pageStyle += 'background-color:' + item.pageBgColor + ';';
|
||||
if (item.margin) {
|
||||
item.pageStyle += 'padding-top:' + item.margin.top * 2 + 'rpx' + ';';
|
||||
item.pageStyle += 'padding-bottom:' + item.margin.bottom * 2 + 'rpx' + ';';
|
||||
item.pageStyle += 'padding-right:' + item.margin.both * 2 + 'rpx' + ';';
|
||||
item.pageStyle += 'padding-left:' + item.margin.both * 2 + 'rpx' + ';';
|
||||
item.pageStyle += 'background-color:' + item.pageBgColor + ';';
|
||||
if (item.margin) {
|
||||
item.pageStyle += 'padding-top:' + item.margin.top * 2 + 'rpx' + ';';
|
||||
item.pageStyle += 'padding-bottom:' + item.margin.bottom * 2 + 'rpx' + ';';
|
||||
item.pageStyle += 'padding-right:' + item.margin.both * 2 + 'rpx' + ';';
|
||||
item.pageStyle += 'padding-left:' + item.margin.both * 2 + 'rpx' + ';';
|
||||
}
|
||||
});
|
||||
|
||||
return this.diyGlobalData.value;
|
||||
},
|
||||
// 过滤组件的渲染
|
||||
diyDataArray() {
|
||||
let data = [],
|
||||
showModuleData = this.$store.state.diyGroupShowModule ? JSON.parse(this.$store.state
|
||||
.diyGroupShowModule) : '';
|
||||
|
||||
if (showModuleData.length) {
|
||||
if (showModuleData.includes('null')) return [];
|
||||
|
||||
let diyDataArr = this.setPagestyle;
|
||||
diyDataArr.forEach((item, index) => {
|
||||
if (showModuleData.includes(item.componentName)) {
|
||||
data.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
return this.diyGlobalData.value;
|
||||
},
|
||||
// 过滤组件的渲染
|
||||
diyDataArray() {
|
||||
let data = [],
|
||||
showModuleData = this.$store.state.diyGroupShowModule ? JSON.parse(this.$store.state
|
||||
.diyGroupShowModule) : '';
|
||||
|
||||
if (showModuleData.length) {
|
||||
if (showModuleData.includes('null')) return [];
|
||||
|
||||
let diyDataArr = this.setPagestyle;
|
||||
diyDataArr.forEach((item, index) => {
|
||||
if (showModuleData.includes(item.componentName)) {
|
||||
data.push(item);
|
||||
}
|
||||
});
|
||||
} else data = this.setPagestyle;
|
||||
return data;
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
} else data = this.setPagestyle;
|
||||
return data;
|
||||
}
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-group {
|
||||
width: 100%;
|
||||
}
|
||||
.diy-group {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user