首页菜单增加学习模块

assets/http/api.js

@@ -86,6 +86,13 @@ const activity = {
 			'Content-Type': 'application/x-www-form-urlencoded'
 		}
 	}),
+	
+	//获取学习列表
+	getStudyList: p => http.get('sing_active/activestudy/list', p),
+	//获取学习详情
+	getStudyDetail: p => http.get('sing_active/activestudy/detail', {
+		params: p
+	}),
 }
 
 //微信api

pages.json

@@ -275,10 +275,19 @@
             
         }
         ,{
-            "path" : "pages/video/list",
+            "path" : "pages/study/list",
             "style" :                                                                                    
             {
-                "navigationBarTitleText": "视频列表",
+                "navigationBarTitleText": "",
+                "navigationStyle": "custom"
+            }
+            
+        }
+        ,{
+            "path" : "pages/study/detail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "活动详情",
                 "navigationStyle": "custom"
             }
             

pages/study/detail.vue

@@ -0,0 +1,45 @@
+<template>
+	<view>
+		<video v-if="detail.type == 'VIDEO_TEXT'" class="works-video" @error="videoError" :src="detail.videoUrl"></video>
+		<!-- <image v-else class="works-video" @click="$util.preview(detail.imageUrl)" :src="detail.imageUrl" mode="widthFix"></image> -->
+		
+		<view style="padding: 30rpx;">
+			<u-parse :html="content" ></u-parse>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				content: '',
+				detail: ''
+			}
+		},
+		onLoad(options) {
+			this.fetchDetail(options.id)
+		},
+		methods: {
+			fetchDetail(id) {
+				this.$api.activity.getStudyDetail({id: id}).then(res => {
+					this.content = decodeURIComponent(res.data.data.content)
+					this.detail = res.data.data
+					uni.setNavigationBarTitle({
+						title: this.detail.title
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+page {
+	background-color: #FFFFFF;
+}
+.works-video {
+	width: 100vw;
+	height: 422rpx;
+}
+</style>

pages/study/list.vue

@@ -0,0 +1,128 @@
+<template>
+	<view class="wrap" :style="vuex_skin">
+		<!-- #ifdef MP-WEIXIN -->
+		<u-navbar title-color="#000000" :is-back="fasle" title="视频列表"></u-navbar>
+		<!-- #endif -->
+		
+		<view style="padding: 30rpx 30rpx 10rpx;">
+			<u-swiper :list="swiperList" border-radius="12" name="url" mode="rect" height="300" @click="handleSwiper"></u-swiper>
+		</view>
+		
+		<view>
+			<mescroll-body height="80%" ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
+				<u-card :show-head="false" margin="20rpx" padding="20" v-for="(item,index) in studyList" :key="index" @click="$jump('/pages/study/detail?id='+item.id)">
+					<view class="container-wrap" slot="body">
+						<image :src="item.imageUrl" mode="aspectFill"></image>
+						<view class="right">
+							<view class="title text-cut-1">{{item.title}}</view>
+							<view class="cu-tag bg-tag radius margin-right-10" style="font-weight: 400; margin-top: 10rpx;">{{item.type === 'IMAGE_TEXT' ? '图文类型' : '视频类型'}}</view>
+							<view class="cu-btn round sm line-base btn">
+								去学习
+							</view>
+						</view>
+					</view>
+				</u-card>
+			</mescroll-body>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin],
+		data() {
+			return {
+				activeSetting: '', //平台活动数据
+				swiperList: [], //轮播图列表
+				downOption: {
+					auto: false
+				},
+				upOption: {
+					auto: true,
+					empty: {
+						use: false
+					}
+				},
+				studyList: [], //学习图文视频列表
+			}
+		},
+		onReady() {
+			this.getActivityParams();
+		},
+		methods: {
+			handleSwiper(index){
+				let url = this.swiperList[index].path;
+				if(!!url && (url.indexOf('http://') > -1 || url.indexOf('https://') > -1) ){
+					window.location.href = url;
+				}
+			},
+			/**
+			 * 获取活动参数
+			 */
+			getActivityParams() {
+				let params = {
+					activeId: this.vuex_active_setting.defaultActiveId,
+					platformSettingEnum: 'ACTIVE_SETTING'
+				}
+				this.$api.platform.getPlatformValue(params).then(res => {
+					this.activeSetting = JSON.parse(res.data.data);
+					this.swiperList =  this.activeSetting.learnVideos.learnVideosBanner;
+					uni.setNavigationBarTitle({
+						title: this.activeSetting.learnVideos.learnVideosTitle
+					})
+				})
+			},
+			upCallback(mescroll) {
+				let params = {
+					current: mescroll.num,
+					size: mescroll.size,
+					activeId: this.vuex_active_setting.defaultActiveId
+				}
+				this.$api.activity.getStudyList(params).then(res => {
+					// console.log(res.data.data.records);
+					let data = res.data.data.records
+					let total = res.data.data.total
+					mescroll.endBySize(data.length, total);
+					if (mescroll.num == 1) this.studyList = []; //如果是第一页需手动制空列表
+					this.studyList = this.studyList.concat(data); //追加新数据
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page{
+		padding-bottom: 50rpx;
+	}
+	.container-wrap{
+		display: flex;
+		image{
+			width: 230rpx;
+			height: 230rpx;
+			min-height: 230rpx;
+			min-width: 230rpx;
+			border-radius: 10rpx;
+			margin-right: 20rpx;
+		}
+		.right{
+			// display: flex;
+			// flex-direction: column;
+			// justify-content: space-between;
+			position: relative;
+			width: 100%;
+			.title {
+				font-weight: 800;
+				color: #353535;
+				font-size: 32rpx;
+			}
+			.btn{
+				position: absolute;
+				bottom: 0;
+				right: 0;
+			}
+		}
+	}
+</style>

pages/video/list.vue

@@ -1,81 +0,0 @@
-<template>
-	<view class="wrap">
-		<!-- #ifdef MP-WEIXIN -->
-		<u-navbar title-color="#000000" :is-back="fasle" title="视频列表"></u-navbar>
-		<!-- #endif -->
-		
-		<u-waterfall v-model="flowList" ref="uWaterfall" style="margin-top: 10rpx;">
-			<template v-slot:left="{leftList}">
-				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
-					<video v-show='item.$index==indexCurrent' :src="item.videoUrl" autoplay :id="'myVideo'+item.$index"></video>
-					<u-lazy-load v-show='item.$index!=indexCurrent' border-radius="10" :image="item.imageUrl" :index="index" @click="videoPlay(item.$index)"></u-lazy-load>
-					<u-icon v-show='item.$index!=indexCurrent' class="video-play" color="#fff" size="50" name="play-circle" @click="videoPlay(item.$index)"></u-icon>
-				</view>
-			</template>
-			<template v-slot:right="{rightList}">
-				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
-					<video v-show='item.$index==indexCurrent' :src="item.videoUrl" autoplay :id="'myVideo'+item.$index"></video>
-					<u-lazy-load v-show='item.$index!=indexCurrent' border-radius="10" :image="item.imageUrl" :index="index" @click="videoPlay(item.$index)"></u-lazy-load>
-					<u-icon v-show='item.$index!=indexCurrent' class="video-play" color="#fff" size="50" name="play-circle" @click="videoPlay(item.$index)"></u-icon>
-				</view>
-			</template>
-		</u-waterfall>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				flowList: [],
-				indexCurrent: null
-			}
-		},
-		async onLoad() {
-			let params = { 
-				activeId: this.vuex_active_setting.defaultActiveId,
-				platformSettingEnum: 'ACTIVE_SETTING' ,
-			}
-			this.flowList = JSON.parse((await this.$api.platform.getPlatformValue(params)).data.data).learnVideo;
-		},
-		methods: {
-			videoPlay(index){
-				let curIdx = index;
-				// 有播放时先将prev暂停，再播放当前点击的current
-				if (this.indexCurrent != null) {
-				  let videoContextPrev = uni.createVideoContext('myVideo' + this.indexCurrent)
-				  if (this.indexCurrent != curIdx) {
-					videoContextPrev.pause()
-				  }
-				  this.indexCurrent = curIdx;
-				  let videoContextCurrent = uni.createVideoContext('myVideo' + curIdx)
-				  videoContextCurrent.play()
-				} else {  // 没有播放时播放视频
-				  this.indexCurrent = curIdx
-				  let videoContext = uni.createVideoContext('myVideo' + curIdx) //这里对应的视频id
-				  videoContext.play()
-				}
-			},
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.demo-warter {
-		border-radius: 8px;
-		margin: 5px;
-		background-color: #ffffff;
-		padding: 8px;
-		position: relative;
-		.video-play{
-			position: absolute;
-			bottom: 20rpx;
-			left: 20rpx;
-		}
-	}
-	
-	video, image{
-		width: 330rpx;
-		max-height: 330rpx;
-	}
-</style>