Skip to content

M
mayi-mp-shop
Commit 0ed8547f by 李嘉林
Options

内嵌组件优化

parent c29ea6c0
Showing with 246 additions and 187 deletions
src/App.vue
......@@ -17,6 +17,7 @@ export default {
let shopItem = {
// development: { mixid: "ssa", "shopid": 2342}, //五粮液uat
development: { mixid: "antgood", "shopid": 67},
// production: { "mixid":"SWQ", "shopid": 1641 }, // 麦贝思
production: { "mixid":"qiyeCT", "shopid": 1045 }, // 道可
// production: { "mixid":"metasense_doctors", "shopid": 1238 }, // 册为医护端
// production: { "mixid":"3QqsFT", "shopid": 1337 },
......
src/components/basicTool/embed-module/index.vue
<template>
<!-- 内嵌组件 -->
<div class="embed-module">
<transverse-label :componentType="false" :datas="datas1"></transverse-label>
<div v-for="(item, index) in contentList" :key="index">
<componentsGroup :item1="item" :index1="index" :active="active" :storageKey="'embed-mudule'+componentIndex+'_'+goodsListIndex+'_'+index" :goodsListIndex="goodsListIndex" :componentIndex="componentIndex"></componentsGroup>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import transverseLabel from '@/components/basicTool/transverse-label/index.vue'
import componentsGroup from "@/components/componentsGroup/index.vue";
import shop from "@/api/shop"
export default {
name: "embed-module",
......@@ -15,33 +17,37 @@ export default {
type: Object,
default: {}
},
render: {
type: Boolean,
default: false
}
index1: {
type: Number,
default: 0,
},
componentIndex: {
type: Number,
default: 0,
},
active: {
type: Number,
default: 0,
},
goodsListIndex: {
type: Number,
default: 0,
},
},
data() {
return {
datas1: {
componentData: {
tabList: [
{
contentList: [],
}
]
}
}
contentList: [],
}
},
components: {
transverseLabel
componentsGroup
},
computed: {
microPageId() {
return this.datas.componentData.microPageId;
},
},
created() {
created() {
this.init();
},
mounted() { },
......@@ -49,7 +55,8 @@ export default {
init() {
shop.singlePageInfo({ id: this.microPageId }).then(res => {
if (res.data.code == 200) {
this.datas1.componentData.tabList[0].contentList = res.data.data.pageData?JSON.parse(res.data.data.pageData):[];
this.contentList = res.data.data.pageData ? JSON.parse(res.data.data.pageData) : [];
console.log(this.contentList, '------------------------45')
}
})
}
......
src/components/basicTool/transverse-label/index.vue
......@@ -69,133 +69,22 @@
:key="index"
:title="item.title"
>
<div
class="item"
:class="{ 'min-height': item.contentList.length == 0 }"
v-for="(item1, index1) in item.contentList"
:key="index1"
>
<div v-if="item1.componentCode=='banner' && item1.componentInfo.visible == 1">
<banner :datas="item1"></banner>
</div>
<div v-else-if="item1.componentCode=='goods-list' && item1.componentInfo.visible == 1" style="height:100%;">
<!-- <goods-list class="goodsListItem" :datas="item1"></goods-list> -->
<goods-list :storageKey="'transverseLabel'+componentIndex" :class="['goodsListItemIndex'+index,'transverse-label-goodsListItem']" :datas="item1" :datasIndex="active" :goodsListIndex="index"></goods-list>
</div>
<div v-else-if="item.componentCode == 'ranking-list' && item.componentInfo.visible == 1">
<ranking-list :datas="item"></ranking-list>
</div>
<div v-else-if="item1.componentCode == 'area-navigation' && item1.componentInfo.visible == 1">
<area-navigation :datas="item1" :changeLocation="changeLocation"></area-navigation>
</div>
<div v-else-if="item1.componentCode == 'cube-nav' && item1.componentInfo.visible == 1">
<cube-nav :datas="item1"></cube-nav>
</div>
<div v-else-if="item1.componentCode == 'time-limited-discount' && item1.componentInfo.visible == 1">
<time-limited-discount :datas="item1" class="time-limited-discount" :id="'time-limited-discount' + index"></time-limited-discount>
</div>
<div v-if="item1.componentCode == 'links' && item1.componentInfo.visible == 1">
<links :datas="item1"></links>
</div>
<div v-if="item1.componentCode == 'interval' && item1.componentInfo.visible == 1">
<interval :datas="item1"></interval>
</div>
<div v-if="item1.componentCode == 'partition' && item1.componentInfo.visible == 1">
<partition :datas="item1"></partition>
</div>
<div v-if="item1.componentCode == 'shop-popup' && item1.componentInfo.visible == 1">
<shop-popup :datas="item1"></shop-popup>
</div>
<div v-if="item1.componentCode == 'float-button' && item1.componentInfo.visible == 1">
<float-button :datas="item1"></float-button>
</div>
<div v-if="item1.componentCode == 'text-text' && item1.componentInfo.visible == 1">
<text-text :datas="item1"></text-text>
</div>
<div v-if="item1.componentCode == 'img-text' && item1.componentInfo.visible == 1">
<img-text :datas="item1"></img-text>
</div>
<div v-if="item1.componentCode == 'goods-search' && item1.componentInfo.visible == 1">
<goods-search :datas="item1"></goods-search>
</div>
<div v-if="item1.componentCode == 'notice' && item1.componentInfo.visible == 1">
<notice :datas="item1"></notice>
</div>
<div v-if="item1.componentCode == 'pop-up' && item1.componentInfo.visible == 1">
<pop-up :datas="item1"></pop-up>
</div>
<div v-if="item1.componentCode == 'coupon' && item1.componentInfo.visible == 1">
<coupon :datas="item1"></coupon>
</div>
<div v-if="item1.componentCode == 'integral-turntable' && item1.componentInfo.visible == 1">
<integralTurntable :datas="item1"></integralTurntable>
</div>
<div v-if="item1.componentCode == 'speedy-nav' && item1.componentInfo.visible == 1">
<speedy-nav :datas="item1"></speedy-nav>
</div>
<div v-if="item1.componentCode == 'video-player' && item1.componentInfo.visible == 1" >
<video-player :datas="item1" :indexs="index"></video-player>
</div>
<div v-if="item1.componentCode == 'photo-gallery' && item1.componentInfo.visible == 1" >
<photo-gallery :datas="item1" :indexs="index"></photo-gallery>
</div>
<div v-if="item1.componentCode == 'information' && item1.componentInfo.visible == 1" >
<information :datas="item1" :indexs="index"></information>
</div>
<div v-if="item1.componentCode == 'spell-group' && item1.componentInfo.visible == 1" >
<spell-group :datas="item1" :indexs="index"></spell-group>
</div>
<div v-if="item1.componentCode == 'merchants-list' && item1.componentInfo.visible == 1" >
<merchants-list :datas="item1" :indexs="index"></merchants-list>
</div>
<div v-if="item1.componentCode == 'live-broadcast' && item1.componentInfo.visible == 1" >
<live-broadcast :datas="item1" :indexs="index"></live-broadcast>
</div>
<div v-if="item1.componentCode == 'share-picture' && item1.componentInfo.visible == 1" >
<share-picture :datas="item1" :indexs="index"></share-picture>
</div>
<div v-if="item1.componentCode == 'custom-list' && item1.componentInfo.visible == 1">
<custom-list :datas="item1"></custom-list>
</div>
<!-- <div v-if="item1.componentCode == 'rich-text' && item1.componentInfo.visible == 1">
<rich-text :datas="item1"></rich-text>
</div> -->
<!-- <component
:is="item1.componentCode"
:datas="item1"
:render="$props.render"
class="component-el"
:ref="item1.componentCode + index1"
></component> -->
</div>
<div v-for="(item1, index1) in item.contentList" :key="index1">
<embed-module v-if="item1.componentCode == 'embed-module'" :datas="item1" :componentIndex="componentIndex" :active="active" :goodsListIndex="index" :index1="index1"></embed-module>
<componentsGroup :item1="item1" :index1="index1" :componentIndex="componentIndex" :active="active" :goodsListIndex="index" :storageKey="'transverse-label'+componentIndex" v-else></componentsGroup>
</div>
</van-tab>
</van-tabs>
</div>
</template>
<script type="text/ecmascript-6">
import links from "@/components/basicTool/link/index.vue";
import interval from "@/components/basicTool/interval/index.vue";
import partition from "@/components/basicTool/partition/index.vue";
import shopPopup from "@/components/basicTool/shop-popup/index.vue";
import text from "@/components/content/text";
import imgText from "@/components/content/imgText";
import coupon from "@/components/activity/coupon";
import integralTurntable from "@/components/activity/integralTurntable";
import information from '@/components/content/information/index'
import spellGroup from '@/components/activity/spellGroup'
import customList from "@/components/custom-list";
import richText from "@/components/basicTool/rich-text";
import componentsGroup from "@/components/componentsGroup/index.vue";
import embedModule from '@/components/basicTool/embed-module/index.vue'
let rect='',vanTabsThis=[];
export default {
name: "transverse-label",
props: {
render: {
type: Boolean,
default: false,
},
datas: {
type: Object,
default: {},
......@@ -219,18 +108,8 @@ export default {
};
},
components: {
links,
interval,
partition,
shopPopup,
"text-text": text,
"img-text": imgText,
coupon,
integralTurntable,
information,
spellGroup,
customList,
richText
componentsGroup,
embedModule
},
computed: {
tabList: {
......@@ -252,11 +131,11 @@ export default {
})
})
console.log(pageGoodsList,storageDatasList,ids,loadingFlag,pageNumList,'newVal');
let pageGoodsListKey = `transverseLabel${this.componentIndex}_pageGoodsList`;
let storageDatasListKey = `transverseLabel${this.componentIndex}_storageDatasList`;
let idsKey = `transverseLabel${this.componentIndex}_ids`;
let loadingFlagKey = `transverseLabel${this.componentIndex}_loadingFlag`;
let pageNumListKey = `transverseLabel${this.componentIndex}_pageNumList`;
let pageGoodsListKey = `transverse-label${this.componentIndex}_pageGoodsList`;
let storageDatasListKey = `transverse-label${this.componentIndex}_storageDatasList`;
let idsKey = `transverse-label${this.componentIndex}_ids`;
let loadingFlagKey = `transverse-label${this.componentIndex}_loadingFlag`;
let pageNumListKey = `transverse-label${this.componentIndex}_pageNumList`;
wx.setStorageSync(pageGoodsListKey,pageGoodsList)
wx.setStorageSync(storageDatasListKey,storageDatasList)
wx.setStorageSync(idsKey,ids)
......@@ -448,7 +327,9 @@ export default {
this.timeOutInitTabs();
},
},
created() {},
created() {
console.log("-------------------------created")
},
mounted() {
this.$nextTick(() => {
this.getAllTabWidth();
......
src/components/componentsGroup/index.vue 0 → 100644
<template>
<!-- 多主题组件抽取独立 -->
<div class="componentsGroup">
<div class="item">
<div v-if="item1.componentCode == 'banner' && item1.componentInfo.visible == 1">
<banner :datas="item1"></banner>
</div>
<div v-else-if="item1.componentCode == 'goods-list' && item1.componentInfo.visible == 1" style="height:100%;">
<goods-list :storageKey="storageKey"
:class="['goodsListItemIndex' + index1, 'transverse-label-goodsListItem']" :datas="item1" :datasIndex="active"
:goodsListIndex="goodsListIndex"></goods-list>
</div>
<div v-else-if="item1.componentCode == 'ranking-list' && item1.componentInfo.visible == 1">
<ranking-list :datas="item1"></ranking-list>
</div>
<div v-else-if="item1.componentCode == 'area-navigation' && item1.componentInfo.visible == 1">
<area-navigation :datas="item1" :changeLocation="changeLocation"></area-navigation>
</div>
<div v-else-if="item1.componentCode == 'cube-nav' && item1.componentInfo.visible == 1">
<cube-nav :datas="item1"></cube-nav>
</div>
<div v-else-if="item1.componentCode == 'time-limited-discount' && item1.componentInfo.visible == 1">
<time-limited-discount :datas="item1" class="time-limited-discount"
:id="'time-limited-discount' + index1"></time-limited-discount>
</div>
<div v-if="item1.componentCode == 'links' && item1.componentInfo.visible == 1">
<links :datas="item1"></links>
</div>
<div v-if="item1.componentCode == 'interval' && item1.componentInfo.visible == 1">
<interval :datas="item1"></interval>
</div>
<div v-if="item1.componentCode == 'partition' && item1.componentInfo.visible == 1">
<partition :datas="item1"></partition>
</div>
<div v-if="item1.componentCode == 'shop-popup' && item1.componentInfo.visible == 1">
<shop-popup :datas="item1"></shop-popup>
</div>
<div v-if="item1.componentCode == 'float-button' && item1.componentInfo.visible == 1">
<float-button :datas="item1"></float-button>
</div>
<div v-if="item1.componentCode == 'text-text' && item1.componentInfo.visible == 1">
<text-text :datas="item1"></text-text>
</div>
<div v-if="item1.componentCode == 'img-text' && item1.componentInfo.visible == 1">
<img-text :datas="item1"></img-text>
</div>
<div v-if="item1.componentCode == 'goods-search' && item1.componentInfo.visible == 1">
<goods-search :datas="item1"></goods-search>
</div>
<div v-if="item1.componentCode == 'notice' && item1.componentInfo.visible == 1">
<notice :datas="item1"></notice>
</div>
<div v-if="item1.componentCode == 'pop-up' && item1.componentInfo.visible == 1">
<pop-up :datas="item1"></pop-up>
</div>
<div v-if="item1.componentCode == 'coupon' && item1.componentInfo.visible == 1">
<coupon :datas="item1"></coupon>
</div>
<div v-if="item1.componentCode == 'integral-turntable' && item1.componentInfo.visible == 1">
<integralTurntable :datas="item1"></integralTurntable>
</div>
<div v-if="item1.componentCode == 'speedy-nav' && item1.componentInfo.visible == 1">
<speedy-nav :datas="item1"></speedy-nav>
</div>
<div v-if="item1.componentCode == 'video-player' && item1.componentInfo.visible == 1">
<video-player :datas="item1" :indexs="index1"></video-player>
</div>
<div v-if="item1.componentCode == 'photo-gallery' && item1.componentInfo.visible == 1">
<photo-gallery :datas="item1" :indexs="index1"></photo-gallery>
</div>
<div v-if="item1.componentCode == 'information' && item1.componentInfo.visible == 1">
<information :datas="item1" :indexs="index1"></information>
</div>
<div v-if="item1.componentCode == 'spell-group' && item1.componentInfo.visible == 1">
<spell-group :datas="item1" :indexs="index1"></spell-group>
</div>
<div v-if="item1.componentCode == 'merchants-list' && item1.componentInfo.visible == 1">
<merchants-list :datas="item1" :indexs="index1"></merchants-list>
</div>
<div v-if="item1.componentCode == 'live-broadcast' && item1.componentInfo.visible == 1">
<live-broadcast :datas="item1" :indexs="index1"></live-broadcast>
</div>
<div v-if="item1.componentCode == 'share-picture' && item1.componentInfo.visible == 1">
<share-picture :datas="item1" :indexs="index1"></share-picture>
</div>
<div v-if="item1.componentCode == 'custom-list' && item1.componentInfo.visible == 1">
<custom-list :datas="item1"></custom-list>
</div>
<div v-if="item1.componentCode == 'embed-module' && item1.componentInfo.visible == 1">
<embedModule :datas="item1"></embedModule>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import links from "@/components/basicTool/link/index.vue";
import interval from "@/components/basicTool/interval/index.vue";
import partition from "@/components/basicTool/partition/index.vue";
import shopPopup from "@/components/basicTool/shop-popup/index.vue";
import text from "@/components/content/text";
import imgText from "@/components/content/imgText";
import coupon from "@/components/activity/coupon";
import integralTurntable from "@/components/activity/integralTurntable";
import information from '@/components/content/information/index'
import spellGroup from '@/components/activity/spellGroup'
import customList from "@/components/custom-list";
import richText from "@/components/basicTool/rich-text";
export default {
name: "componentsGroup",
props: {
item1: {
type: Object,
default: () => { return {} },
},
storageKey: {
type: String,
default: "",
},
index1: {
type: Number,
default: 0,
},
componentIndex: {
type: Number,
default: 0,
},
active: {
type: Number,
default: 0,
},
goodsListIndex: {
type: Number,
default: 0,
},
},
data() {
return {}
},
components: {
links,
interval,
partition,
shopPopup,
"text-text": text,
"img-text": imgText,
coupon,
integralTurntable,
information,
spellGroup,
customList,
richText,
embedModule: () => import("@/components/basicTool/embed-module")
},
computed: {},
created() {
},
mounted() { },
methods: {}
}
</script>
<style lang="scss" scoped></style>
src/components/componentsGroup/main.json 0 → 100644
{
"usingComponents": {
"van-tabs": "/static/vant/tabs/index",
"van-tab": "/static/vant/tab/index",
"banner": "/static/nativeComponents/Banner/index",
"goods-list": "/static/nativeComponents/GoodsList/index",
"ranking-list": "/static/nativeComponents/RankingList/index",
"time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
"waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
"van-button": "/static/vant/button/index",
"area-navigation":"/static/nativeComponents/AreaNavigation/index",
"cube-nav":"/static/nativeComponents/CubeNav/index",
"float-button":"/static/nativeComponents/FloatButton/index",
"goods-search":"/static/nativeComponents/GoodsSearch/index",
"notice":"/static/nativeComponents/Notice/index",
"pop-up":"/static/nativeComponents/PopUp/index",
"share-popup":"/static/nativeComponents/SharePopup/index",
"speedy-nav":"/static/nativeComponents/SpeedyNav/index",
"video-player":"/static/nativeComponents/VideoPlayer/index",
"photo-gallery":"/static/nativeComponents/PhotoGallery/index",
"merchants-list":"/static/nativeComponents/MerchantsList/index",
"live-broadcast":"/static/nativeComponents/LiveBroadcast/index",
"share-picture":"/static/nativeComponents/SharePicture/index"
},
"enablePullDownRefresh":true,
"styleIsolation": "apply-shared"
}
\ No newline at end of file
src/pages/home/index.vue
......@@ -117,7 +117,7 @@
<brandList :datas="item"></brandList>
</div>
<div v-if="item.componentCode == 'embed-module' && item.componentInfo.visible == 1">
<embedModule :datas="item"></embedModule>
<embedModule :datas="item" :componentIndex="index"></embedModule>
</div>
</div>
<bottomCont v-if="showbottomCont"></bottomCont>
......
static/nativeComponents/GoodsList/index.js
......@@ -75,11 +75,9 @@ const componentOptions = {
observers: {},
// 组件生命周期
lifetimes: {
created() {
console.log("--goodsList-created")
},
created() {},
ready() {
console.log("--goodsList-ready")
console.log(this.data.storageKey, "--goodsList-ready")
let _this = this;
let { clientHeight } = this.data;
wx.getSystemInfo({
......@@ -206,7 +204,7 @@ const componentOptions = {
console.log(ids,'---ids--104'+this.data.storageKey)
log.info(ids,'---ids--105')
// 如果不是横向标签组件初始化缓存
if (!this.data.storageKey.includes('transverseLabel')) {
if (!this.data.storageKey.includes('transverse-label')) {
this.setStorageSync("pageGoodsList",[[]])
this.setStorageSync("storageDatasList",[[]])
this.setStorageSync("ids",[[]])
......@@ -389,27 +387,8 @@ const componentOptions = {
scrollLoading: true
})
let terminalProductIds = []
let pageNumList = this.getStorageSync('pageNumList')
let pageNum = null
// 指定商品&网格布局和横向列表使用加载优化。
let { style } = this.data.datas.componentData;
if (style == 'list' || style == 'rowList') {
if (flag) {
pageNum = pageNumList[this.data.goodsListIndex]
terminalProductIds = this.getStorageSync('ids')[this.data.goodsListIndex].slice((pageNum - 1) * this.data.pageSize,pageNum * this.data.pageSize)
pageNum += 1
pageNumList[this.data.goodsListIndex] = pageNum
}else{
pageNum = pageNumList[this.data.datasIndex]
terminalProductIds = this.getStorageSync('ids')[this.data.datasIndex].slice((pageNum - 1) * this.data.pageSize,pageNum * this.data.pageSize)
pageNum += 1
pageNumList[this.data.datasIndex] = pageNum
}
} else {
terminalProductIds = this.getStorageSync('ids')[this.data.goodsListIndex];
}
console.log(pageNum,'page-----');
this.setStorageSync('pageNumList',pageNumList)
terminalProductIds = this.getStorageSync('ids')[this.data.goodsListIndex];
console.log(terminalProductIds, this.data.storageKey, 'page-----');
let {
vipPrice,
marketingTag,
......@@ -431,14 +410,15 @@ const componentOptions = {
goodsApi.queryMoreProductInfo(moreQuery).then(res => {
if (res.data.code == 200) {
goodsList = res.data.data;
let pageGoodsList = this.data.pageGoodsList[this.data.datasIndex] || [];
this.goodsListVal([...pageGoodsList,...goodsList], 1,flag);
let pageGoodsList = this.data.pageGoodsList[this.data.goodsListIndex] || [];
console.log(goodsList, pageGoodsList, this.data.storageKey, '------------------------goodsList----433')
this.goodsListVal(goodsList, 1,flag);
}
});
},
goodsListVal(goodsList, type,flag) {
let { attributeValueList } = this.data.datas.componentData;
console.log(goodsList, "------------goodsListVal");
console.log(goodsList,this.data.storageKey, "------------goodsListVal");
goodsList.forEach((item, index) => {
item.marketingTag = item.defaultTags
? this.filtermark(
......@@ -499,6 +479,7 @@ const componentOptions = {
let loadingFlag = this.getStorageSync('loadingFlag')
loadingFlag[that.data.datasIndex] = false
this.setStorageSync('loadingFlag', loadingFlag);
console.log(this.data.storageKey, pageGoodsList,'-----pageGoodsList')
that.setData({
"datas.componentData.goodsList": list,
pageGoodsList,
......@@ -633,8 +614,6 @@ const componentOptions = {
loadingFlag,
})
that.setStorageSync('loadingFlag',loadingFlag)
that.moreProduct(false)
console.log('load--ok');
}
......@@ -782,11 +761,9 @@ const componentOptions = {
});
},
setStorageSync(key, val) {
console.log(`${this.data.storageKey}_${key}`,'-------------533')
return wx.setStorageSync(`${this.data.storageKey}_${key}`,val)
},
getStorageSync(key) {
console.log(`${this.data.storageKey}_${key}`,'-------------537')
return wx.getStorageSync(`${this.data.storageKey}_${key}`)
},
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment