云上美博会楼层模板移动新增

pages/h5/activity/activity-detail.vue

@@ -1,35 +1,51 @@
 <template>
-	<view class="detail">
-		<image :src="adsImage" mode="widthFix" show-menu-by-longpress></image>
-	</view>
+    <view class="detail">
+        <template v-if="type === 'video'">
+            <video :src="videoUrl"></video>
+        </template>
+        <template v-else>
+            <image :src="adsImage" mode="widthFix" show-menu-by-longpress></image>
+        </template>
+    </view>
 </template>
 
 <script>
-	export default{
-		data(){
-			return{
-				adsImage:'',
-				title:''
-			}
-		},
-		onLoad(option) {
-			this.adsImage = option.adsImage
-			this.title= option.title
-			console.log(this.title);
-			if(this.title && this.title!==null && this.title !== 'null'){
-				uni.setNavigationBarTitle({title:this.title});
-			}
-		}
-	}
+export default {
+    data() {
+        return {
+            adsImage: '',
+            videoUrl: '',
+            title: '',
+            type: ''
+        }
+    },
+    onLoad(option) {
+        this.title = option.title
+        this.type = option.type || 'image'
+        if (this.type === 'video') {
+            this.videoUrl = option.videoUrl
+        } else {
+            this.adsImage = option.adsImage
+        }
+        if (this.title && this.title !== 'null') {
+            uni.setNavigationBarTitle({ title: this.title })
+        }
+    }
+}
 </script>
 
 <style lang="scss">
-.detail{
-	width: 100%;
-	height: auto;
-	image{
-		width: 100%;
-		height: auto;
-	}
+.detail {
+    width: 100%;
+    height: auto;
+    image {
+        width: 100%;
+        height: auto;
+    }
+    video {
+        width: 100vw;
+        height: 100vh;
+        background: #999;
+    }
 }
 </style>

pages/h5/activity/activity-floorMore.vue

@@ -83,12 +83,12 @@
 	import productJ from '@/components/cm-module/pageFloorTemplate/templateJ.vue'
 	import productK from '@/components/cm-module/pageFloorTemplate/templateK.vue'
 	//引入图片模板
-	import pictureD from '@/components/cm-module/pcitureTemplate/templateD.vue'
-	import pictureF from '@/components/cm-module/pcitureTemplate/templateF.vue'
+	import pictureD from './components/template-picture/templateD.vue'
+	import pictureF from './components/template-picture/templateF.vue'
 	//引入图文模板
-	import articleA from '@/components/cm-module/articleTemplate/templateA.vue'
-	import articleB from '@/components/cm-module/articleTemplate/templateB.vue'
-	import articleD from '@/components/cm-module/articleTemplate/templateD.vue'
+	import articleA from './components/template-article/templateA.vue'
+	import articleB from './components/template-article/templateB.vue'
+	import articleD from './components/template-article/templateD.vue'
 	export default{
 		components:{
 			productA,

pages/h5/activity/activity-topic.vue

@@ -18,10 +18,10 @@
 	import { mapState,mapMutations} from 'vuex' 
 	import customFloor from '@/components/cm-custom/custom-floor' 		 //自定义导航
 	import templateNav from '@/components/cm-module/pageTemplate/templateNav.vue'
-	import pageFloor from './components/pageFloor.vue'
+    import pageFloor from './components/active-floor.vue'
+    import  ActivityContact from './components/activity-contact.vue'
 	import authorize from '@/common/config/authorize.js'
 	import wxLogin from '@/common/config/wxLogin.js'
-    import  ActivityContact from './components/index.vue'
 	
 	export default{ 
 		components:{

pages/h5/activity/components/pageFloor.vue → pages/h5/activity/components/active-floor.vue

@@ -4,12 +4,9 @@
             <view class="tui-group-name" v-if="page.floorContent">
                 <view class="tui-group-title">
                     <view class="tui-group-l">{{ page.title }}</view>
-                    <view
-                        class="tui-group-r"
-                        v-if="showMore(page)"
-                        @click="NavToDetailPage(page)"
-                    >
-                        <text>更多</text> <text class="iconfont icon-xiayibu"></text>
+                    <view class="tui-group-r" v-if="showMore(page)" @click="NavToDetailPage(page)">
+                        <text>更多</text>
+                        <text class="iconfont icon-xiayibu"></text>
                     </view>
                 </view>
                 <view class="tui-sub__desc">{{ page.detail }}</view>
@@ -94,17 +91,17 @@
                 <liveB :pageData="page" :userIdentity="userIdentity"></liveB>
             </template>
             <!-- 视频模板 -->
-            <template v-if="page.floorContent.templateType == '26'">
-                <pictureH :pageData="page" :userIdentity="userIdentity"></pictureH>
+            <template v-if="isTemplate(['26', '30'], page)">
+                <videoA :pageData="page" :userIdentity="userIdentity"></videoA>
             </template>
-            <template v-if="page.floorContent.templateType == '27'">
-                <pictureC :pageData="page" :userIdentity="userIdentity"></pictureC>
+            <template v-if="isTemplate(['27', '31'], page)">
+                <videoB :pageData="page" :userIdentity="userIdentity"></videoB>
             </template>
-            <template v-if="page.floorContent.templateType == '28'">
-                <pictureG :pageData="page" :userIdentity="userIdentity"></pictureG>
+            <template v-if="isTemplate(['28', '32'], page)">
+                <videoC :pageData="page" :userIdentity="userIdentity"></videoC>
             </template>
-            <template v-if="page.floorContent.templateType == '29'">
-                <pictureD :pageData="page" :userIdentity="userIdentity"></pictureD>
+            <template v-if="isTemplate(['29', '33'], page)">
+                <videoD :pageData="page" :userIdentity="userIdentity"></videoD>
             </template>
         </view>
     </view>
@@ -124,23 +121,28 @@ import productI from '@/components/cm-module/pageTemplate/templateI.vue'
 import productJ from '@/components/cm-module/pageTemplate/templateJ.vue'
 import productK from '@/components/cm-module/pageTemplate/templateK.vue'
 //引入图片模板
-import pictureA from '@/components/cm-module/pcitureTemplate/templateA.vue'
-import pictureB from '@/components/cm-module/pcitureTemplate/templateB.vue'
-import pictureC from '@/components/cm-module/pcitureTemplate/templateC.vue'
-import pictureD from '@/components/cm-module/pcitureTemplate/templateD.vue'
-import pictureE from '@/components/cm-module/pcitureTemplate/templateE.vue'
-import pictureF from '@/components/cm-module/pcitureTemplate/templateF.vue'
-import pictureG from '@/components/cm-module/pcitureTemplate/templateG.vue'
-import pictureH from '@/components/cm-module/pcitureTemplate/templateH.vue'
+import pictureA from './template-picture/templateA.vue'
+import pictureB from './template-picture/templateB.vue'
+import pictureC from './template-picture/templateC.vue'
+import pictureD from './template-picture/templateD.vue'
+import pictureE from './template-picture/templateE.vue'
+import pictureF from './template-picture/templateF.vue'
+import pictureG from './template-picture/templateG.vue'
+import pictureH from './template-picture/templateH.vue'
 //引入图文模板
-import articleA from '@/components/cm-module/articleTemplate/templateA.vue'
-import articleB from '@/components/cm-module/articleTemplate/templateB.vue'
-import articleC from '@/components/cm-module/articleTemplate/templateC.vue'
-import articleD from '@/components/cm-module/articleTemplate/templateD.vue'
+import articleA from './template-article/templateA.vue'
+import articleB from './template-article/templateB.vue'
+import articleC from './template-article/templateC.vue'
+import articleD from './template-article/templateD.vue'
 // 直播楼层模板
-import liveA from '@/components/cm-module/liveTemplate/templateA.vue'
-import liveB from '@/components/cm-module/liveTemplate/templateB.vue'
-import liveC from '@/components/cm-module/liveTemplate/templateC.vue'
+import liveA from './template-live/templateA.vue'
+import liveB from './template-live/templateB.vue'
+import liveC from './template-live/templateC.vue'
+// 视频模板
+import videoA from './template-video/templateA.vue'
+import videoB from './template-video/templateB.vue'
+import videoC from './template-video/templateC.vue'
+import videoD from './template-video/templateD.vue'
 
 export default {
     name: 'pageFloor',
@@ -170,7 +172,11 @@ export default {
         articleD,
         liveA,
         liveC,
-        liveB
+        liveB,
+        videoA,
+        videoB,
+        videoC,
+        videoD
     },
     props: {
         list: {
@@ -202,14 +208,18 @@ export default {
                 `/pages/h5/activity/activity-floorMore?pageType=${this.pageType}&floorId=${page.id}&title=${page.title}`
             )
         },
-        showMore(page){
+        showMore(page) {
             // if(page.floorContent.templateType)
-            if(page.floorContent.templateType == 10){
-               if(page.floorImageList.length <= 1){
+            if (page.floorContent.templateType == 10) {
+                if (page.floorImageList.length <= 1) {
                     return false
-               }
+                }
             }
             return !this.isSwiperTemp.includes(page.floorContent.templateType)
+        },
+        isTemplate(temp = [], page) {
+            const templateType = page?.floorContent?.templateType
+            return templateType && temp.includes(id)
         }
     }
 }

pages/h5/activity/components/template-video/templateA.vue

@@ -0,0 +1,101 @@
+<template>
+    <view class="picture">
+        <view class="section" v-for="(item, index) in productList" :key="index" @click="navigaitionTo(item)">
+            <image :src="item.appletsImage"></image>
+            <view class="cm-cover" v-if="pageData.floorContent.templateClassify === 4"></view>
+        </view>
+    </view>
+</template>
+
+<script>
+import caimeiApi from '@/common/config/caimeiApi.js'
+export default {
+    data() {
+        return {
+            productList: []
+        }
+    },
+    props: {
+        pageData: {
+            type: Object
+        },
+        userIdentity: {
+            type: Number
+        },
+        flag: {
+            type: Boolean,
+            default: false
+        }
+    },
+    created() {
+        this.initData(this.pageData)
+    },
+    watch: {
+        pageData: {
+            handler: function(el) {
+                //监听对象的变换使用 function，箭头函数容易出现this指向不正确
+                this.pageData = el
+                this.initData(this.pageData)
+            },
+            deep: true
+        }
+    },
+    methods: {
+        initData(data) {
+            if (this.flag) {
+                this.productList = data.floorImageList
+            } else {
+                this.productList = data.floorImageList.slice(0, 6)
+            }
+        },
+        navigaitionTo(item) {
+            if (item.adsImage === '' && item.linkType === -1) return
+            if (item.linkType === -1) {
+                const url = `/pages/h5/activity/activity-detail?type=image&adsImage=${item.adsImage}&title=${item.name}`
+                return uni.navigateTo({ url })
+            } else {
+                const url = `/pages/h5/activity/activity-detail?type=video&videoUrl=${item.link}&title=${item.name}`
+                return uni.navigateTo({ url })
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.picture {
+    width: 100%;
+    .section {
+        float: left;
+        position: relative;
+        margin-bottom: 14rpx;
+        margin-right: 14rpx;
+        width: 224rpx;
+        height: 157rpx;
+        overflow: hidden;
+        border-radius: 16rpx;
+        image {
+            width: 224rpx;
+            height: 257rpx;
+        }
+        &:nth-child(1),
+        &:nth-child(2),
+        &:nth-child(3) {
+            margin-top: 0;
+        }
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
+        .cm-cover {
+            z-index: 99;
+            top: 0;
+            left: 0;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: url(https://static.caimei365.com/app/img/icon2/cm_player.png) no-repeat center;
+            background-size: 40rpx 40rpx;
+        }
+    }
+}
+</style>

pages/h5/activity/components/template-video/templateB.vue

@@ -0,0 +1,80 @@
+<template>
+	<scroll-view scroll-x="true" class="picture">
+		<view class="section" v-for="(item , index) in productList" @click="navigaitionTo(item)" :key="index">
+			<image :src="item.appletsImage" ></image>
+            <view class="cm-cover" v-if="pageData.floorContent.templateClassify === 4"></view>
+		</view>
+	</scroll-view>
+</template>
+
+<script>
+import caimeiApi from '@/common/config/caimeiApi.js'
+export default{
+	data(){
+		return{
+			productList:[]
+		}
+	},
+	props:{
+		pageData: {
+			type: Object
+		},
+		userIdentity: {
+			type: Number
+		}
+	},
+	created() {
+		this.initData(this.pageData)
+	},
+	methods:{
+		initData(data){
+			this.productList = data.floorImageList
+		},
+		navigaitionTo(item){
+			if (item.adsImage === '' && item.linkType === -1) {
+				return
+			}else if(item.linkType === -1){
+				uni.navigateTo({
+					url:`/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
+				})
+			}else{
+				caimeiApi.FlooryNavigateTo(item)
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.picture{
+	width: 750rpx;
+	margin-left: -24rpx;
+	white-space: nowrap;
+	.section{
+        position: relative;
+		display: inline-block;
+		margin-right: 24rpx;
+		width: 310rpx;
+		height: 240rpx;
+		overflow: hidden;
+		border-radius: 16rpx;
+		image{
+			width: 310rpx;
+			height: 240rpx;
+		}
+		&:first-child{
+			margin-left: 24rpx;
+		}
+        .cm-cover{
+            z-index: 99;
+            top: 0;
+            left: 0;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background:url(https://static.caimei365.com/app/img/icon2/cm_player.png) no-repeat center;
+            background-size: 40rpx 40rpx;
+        }
+	}
+}
+</style>

pages/h5/activity/components/template-video/templateC.vue

@@ -0,0 +1,102 @@
+<template>
+	<view class="picture">
+		<view class="section" v-for="(item,index) in productList" :key="index" @click="navigaitionTo(item)">
+			<image :src="item.appletsImage" ></image>
+            <view class="cm-cover" v-if="pageData.floorContent.templateClassify === 4"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+import caimeiApi from '@/common/config/caimeiApi.js'
+export default{
+	data(){
+		return{
+			productList:[]
+		}
+	},
+	props:{
+		pageData: {
+			type: Object
+		},
+		userIdentity: {
+			type: Number
+		},
+		flag:{
+			type:Boolean,
+			default:false
+		}
+	},
+	created() {
+		this.initData(this.pageData)
+	},
+	watch: {
+		pageData: {
+			handler: function(el) {
+				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
+				this.pageData = el
+				this.initData(this.pageData)
+			},
+			deep: true
+		}
+	},
+	methods:{
+		initData(data){
+			if(this.flag){
+				this.productList = data.floorImageList
+			}else{
+				this.productList = data.floorImageList.slice(0,4)
+			}
+			
+		},
+		navigaitionTo(item){
+			if (item.adsImage === '' && item.linkType === -1) {
+				return
+			}else if(item.linkType === -1){
+				uni.navigateTo({
+					url:`/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
+				})
+			}else{
+				caimeiApi.FlooryNavigateTo(item)
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.picture{
+	width: 100%;
+	.section{
+        float: left;
+        position: relative;
+		margin-bottom: 24rpx;
+        margin-right: 24rpx;
+		width: 339rpx;
+		height: 230rpx;
+		overflow: hidden;
+		border-radius: 16rpx;
+		image{
+			width: 339rpx;
+			height: 230rpx;
+		}
+		&:nth-child(1),
+        &:nth-child(2){
+			margin-top: 0;
+		}
+        &:nth-child(2n){
+            margin-right: 0;
+        }
+        .cm-cover{
+            z-index: 99;
+            top: 0;
+            left: 0;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background:url(https://static.caimei365.com/app/img/icon2/cm_player.png) no-repeat center;
+            background-size: 40rpx 40rpx;
+        }
+	}
+}
+</style>

pages/h5/activity/components/template-video/templateD.vue

@@ -0,0 +1,96 @@
+<template>
+	<view class="picture">
+		<view class="section" v-for="(item,index) in productList" :key="index" @click="navigaitionTo(item)">
+			<image :src="item.appletsImage" ></image>
+            <view class="cm-cover" v-if="pageData.floorContent.templateClassify === 4"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+import caimeiApi from '@/common/config/caimeiApi.js'
+export default{
+	data(){
+		return{
+			productList:[]
+		}
+	},
+	props:{
+		pageData: {
+			type: Object
+		},
+		userIdentity: {
+			type: Number
+		},
+		flag:{
+			type:Boolean,
+			default:false
+		}
+	},
+	created() {
+		this.initData(this.pageData)
+	},
+	watch: {
+		pageData: {
+			handler: function(el) {
+				//监听对象的变换使用 function，箭头函数容易出现this指向不正确
+				this.pageData = el
+				this.initData(this.pageData)
+			},
+			deep: true
+		}
+	},
+	methods:{
+		initData(data){
+			if(this.flag){
+				this.productList = data.floorImageList
+			}else{
+				this.productList = data.floorImageList.slice(0,2)
+			}
+			
+		},
+		navigaitionTo(item){
+			if (item.adsImage === '' && item.linkType === -1) {
+				return
+			}else if(item.linkType === -1){
+				uni.navigateTo({
+					url:`/pages/h5/activity/activity-detail?adsImage=${item.adsImage}&title=${item.name}`
+				})
+			}else{
+				caimeiApi.FlooryNavigateTo(item)
+			}
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.picture{
+	width: 100%;
+	.section{
+        position: relative;
+		margin-bottom: 24rpx;
+		width: 702rpx;
+		height: 360rpx;
+		overflow: hidden;
+		border-radius: 16rpx;
+		image{
+			width: 702rpx;
+			height: 360rpx;
+		}
+		&:first-child{
+			margin-top: 0;
+		}
+        .cm-cover{
+            z-index: 99;
+            top: 0;
+            left: 0;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background: url(https://static.caimei365.com/app/img/icon2/cm_player.png) no-repeat center;
+            background-size: 40rpx 40rpx;
+        }
+	}
+}
+</style>