diff --git a/components/list/dynamic/daynamicInfo.vue b/components/list/dynamic/daynamicInfo.vue index d509b6e..110cd92 100644 --- a/components/list/dynamic/daynamicInfo.vue +++ b/components/list/dynamic/daynamicInfo.vue @@ -3,13 +3,13 @@ - + + :style="videoStyle"> @@ -70,6 +70,35 @@ } return mediaArray + }, + // 根据媒体数量决定布局类型 + layoutClass(){ + const count = this.mediaList.length + if(count === 1){ + return 'single-layout' + } else if(count === 2 || count === 4){ + return 'grid-layout-2x2' + } else { + return 'grid-layout-3x3' + } + }, + // 动态视频样式 + videoStyle(){ + const count = this.mediaList.length + let style = 'border-radius: 20rpx;' + + if(count === 1){ + // 单个视频占满宽度 + style += 'width: 100%; height: 400rpx;' + } else if(count === 2 || count === 4){ + // 4宫格布局 + style += 'width: calc(50% - 10rpx); height: 200rpx;' + } else { + // 9宫格布局 + style += 'width: calc(33.33% - 10rpx); height: 150rpx;' + } + + return style } }, data() { @@ -112,20 +141,54 @@ .Artworkimages { display: flex; flex-wrap: wrap; + margin-top: 20rpx; - .wrokimg { - margin: 10rpx; - position: relative; + // 单图布局 - 占满宽度 + &.single-layout { + .wrokimg { + width: 100%; + margin: 0; + + image { + width: 100%; + height: 400rpx; + border-radius: 20rpx; + } + } + } - image { - height: 190rpx; - width: 190rpx; - border-radius: 20rpx; + // 4宫格布局 - 2x2 + &.grid-layout-2x2 { + .wrokimg { + width: calc(50% - 10rpx); + margin: 5rpx; + + image { + width: 100%; + height: 200rpx; + border-radius: 20rpx; + } + } + } + + // 9宫格布局 - 3x3 + &.grid-layout-3x3 { + .wrokimg { + width: calc(33.33% - 10rpx); + margin: 5rpx; + + image { + width: 100%; + height: 150rpx; + border-radius: 20rpx; + } } + } + + .wrokimg { + position: relative; video { - height: 190rpx; - width: 190rpx; border-radius: 20rpx; } diff --git a/mixins/share.js b/mixins/share.js index 461c81d..ab70118 100644 --- a/mixins/share.js +++ b/mixins/share.js @@ -18,8 +18,10 @@ export default { // 定义全局分享 // 1.发送给朋友 onShareAppMessage(res) { + console.log('this.share', this.share); let o = { ...this.share, + imageUrl : this.share.imageUrl || this.configList.applet_logo } if(this.userInfo.id){ o.path = this.share.path + '?shareId=' + this.userInfo.id diff --git a/pages/index/article.vue b/pages/index/article.vue index 79c5e33..4f1b340 100644 --- a/pages/index/article.vue +++ b/pages/index/article.vue @@ -6,7 +6,7 @@ diff --git a/pages/index/index.vue b/pages/index/index.vue index 92ea380..cb6f9cf 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -225,12 +225,12 @@ // this.getBannerList() this.$store.commit('getCategory') }, - onShareAppMessage(res) { - return { - title: this.headInfo.name, - path: '/pages/index/index' - } - }, + // onShareAppMessage(res) { + // return { + // title: this.headInfo.name, + // path: '/pages/index/index' + // } + // }, onShow() { // this.onSubscribeMessageTap(); this.getUserInfo(); @@ -311,6 +311,7 @@ this.$api('getIndexHeaderInfo', res => { if (res.code == 200) { this.headInfo = res.result + this.share.title = this.headInfo.name } }) }, diff --git a/pages_order/article/index.vue b/pages_order/article/index.vue index 0d600f3..fc3bd70 100644 --- a/pages_order/article/index.vue +++ b/pages_order/article/index.vue @@ -1,6 +1,6 @@