查研观向8.4 提测

pages-search/components/report.vue

@@ -18,9 +18,33 @@
             </view>
           </view>
           <view class="read-more" v-if="item.IndustrialSubjectList">
-            <text class="text-box text_oneLine" v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId">
+<!--            <text class="text-box text_oneLine" v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId">
               {{ val.SubjectName }}
-            </text>
+            </text> -->
+			<view class="industry-video-item" @click.stop="handelVideoPlay(item)"
+			:style="{'background-image':'url('+item.IndustryVideo.BackgroundImg+ ')'}" v-if="item.IndustryVideo">
+				5min
+				<br />
+				逻辑解析
+				<view class="industry-video-icon">
+					<image src="https://hzstatic.hzinsights.com/cygx/video-right-top-icon.svg"></image>
+				</view>
+			</view>
+			<view v-if="item.IndustryVideo" style="display: flex;flex-wrap: wrap;width: 420rpx;">
+				<view v-for="val in item.IndustrialSubjectList.slice(0,4)" :key="val.IndustrialSubjectId" class="text-box text_oneLine">
+					{{ val.SubjectName }}
+				</view>
+			</view>
+			<block v-if="item.IndustryVideo && item.IndustrialSubjectList.length>4">
+				<view v-for="val in item.IndustrialSubjectList.slice(4)" :key="val.IndustrialSubjectId" class="text-box text_oneLine">
+					{{ val.SubjectName }}
+				</view>
+			</block>
+			<block v-if="!item.IndustryVideo">
+				<view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" class="text-box text_oneLine">
+					{{ val.SubjectName }}
+				</view>
+			</block>
           </view>
         </view>
       </block>
@@ -40,10 +64,34 @@
               <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
             </view>
           </view>
-          <view class="read-more" @click="themeDetails(item)" v-if="item.IndustrialSubjectList">
-            <text class="text-box text_oneLine" v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId">
+          <view class="read-more" v-if="item.IndustrialSubjectList">
+<!--            <text class="text-box text_oneLine" v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId">
               {{ val.SubjectName }}
-            </text>
+            </text> -->
+			<view class="industry-video-item" @click.stop="handelVideoPlay(item)"
+			:style="{'background-image':'url('+item.IndustryVideo.BackgroundImg+ ')'}" v-if="item.IndustryVideo">
+				5min
+				<br />
+				逻辑解析
+				<view class="industry-video-icon">
+					<image src="https://hzstatic.hzinsights.com/cygx/video-right-top-icon.svg"></image>
+				</view>
+			</view>
+			<view v-if="item.IndustryVideo" style="display: flex;flex-wrap: wrap;width: 420rpx;">
+				<view v-for="val in item.IndustrialSubjectList.slice(0,4)" :key="val.IndustrialSubjectId" class="text-box text_oneLine">
+					{{ val.SubjectName }}
+				</view>
+			</view>
+			<block v-if="item.IndustryVideo && item.IndustrialSubjectList.length>4">
+				<view v-for="val in item.IndustrialSubjectList.slice(4)" :key="val.IndustrialSubjectId" class="text-box text_oneLine">
+					{{ val.SubjectName }}
+				</view>
+			</block>
+			<block v-if="!item.IndustryVideo">
+				<view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" class="text-box text_oneLine">
+					{{ val.SubjectName }}
+				</view>
+			</block>
           </view>
         </view>
       </block>
@@ -116,13 +164,16 @@
         <rich-text :nodes="accounts"></rich-text>
       </view>
     </u-modal>
+	<!-- 视频模块 -->
+	<videoModule :showVideoPop="showVideoPop" :videoPopList="videoPopList" class="industry-video-module"/>
   </view>
 </template>
 
 <script>
 import {Report } from "@/config/api"
+import videoModule from "@/components/videoModule/index";
 export default {
-  components: {},
+  components: {videoModule},
   props: {
     reportPageData: {
       type: Object,
@@ -134,6 +185,8 @@ export default {
       confirmText: "知道了",
       isCancelBtn: false,
       accounts: "",
+	  showVideoPop:false, //视频弹窗显示控制
+	  videoPopList:{},// 视频信息
     };
   },
   watch: {},
@@ -188,6 +241,23 @@ export default {
       }
       this.goFollowShow = false;
     },
+	// 视频播放事件
+	handelVideoPlay(item){
+		let params={
+			Id:item.IndustryVideo.Id,
+			ResourceUrl:item.IndustryVideo.ResourceUrl,
+			BackgroundImg:item.IndustryVideo.BackgroundImg,
+			Title:`5min【${item.IndustryName}】逻辑解析`
+		}
+		if (this.$store.state.videoPlay.playVideoId != item.Id) {
+		  this.$store.commit("videoPlay/palyTimeUpdate", 0);
+		  this.$store.commit("videoPlay/playVideo", item.Id);
+		}
+		console.log(params);
+		this.globalBgAudioManager.stop();
+		this.videoPopList = params;
+		this.showVideoPop = true;
+	}
   },
 };
 </script>
@@ -218,14 +288,49 @@ export default {
       margin-top: 20rpx;
       display: flex;
       flex-wrap: wrap;
-      margin-left: 30rpx;
+      margin-left: 80rpx;
+	  .industry-video-item{
+	  	height: 126rpx;
+	  	width: 170rpx;
+		// width: 216rpx;
+	  	margin: 0 40rpx 30rpx 0;
+		// margin: 0 15rpx 30rpx 0;
+	  	border-radius: 8rpx;
+	  	background-size: cover;
+	  	background-position: center;
+	  	background-repeat: no-repeat;
+	  	font-weight: 500;
+	  	font-size: 32rpx;
+	  	color: white;
+	  	line-height: 45rpx;
+	  	padding: 20rpx;
+	  	position: relative;
+	  	overflow: hidden;
+	  	.industry-video-icon{
+	  		height: 0rpx;
+	  		width: 0rpx;
+	  		border-style: solid;
+	  		border-color: #3385FF #3385FF transparent transparent;
+	  		border-width: 28rpx;
+	  		position: absolute;
+	  		right: 0;
+	  		top: 0;
+	  		image{
+	  			position: absolute;
+	  			right: -24rpx;
+	  			bottom: 0;
+	  			height: 20rpx;
+	  			width: 20rpx;
+	  		}
+	  	}
+	  }
       .text-box {
-        margin-bottom: 27rpx;
-        margin-right: 15rpx;
+        margin-bottom: 30rpx;
+        margin-right: 40rpx;
         padding: 0;
         font-size: 24rpx;
         color: #408fff;
-        width: 216rpx;
+        width: 170rpx;
         height: 46rpx;
         line-height: 46rpx;
         text-align: center !important;
@@ -302,4 +407,4 @@ export default {
     }
   }
 }
-</style>
+</style>

pages-search/indedxSearch/indedxSearch.vue

@@ -78,7 +78,8 @@
               <view class="more-rivet" @click="tabsActiveMore(3)"> 更多 <u-icon name="arrow-right" color="#3385FF" size="28"></u-icon> </view>
             </view>
           </view>
-          <reportPage :reportPageData="reportPageData" v-if="Object.keys(reportPageData).length && (tabsActive == 3 || tabsActive == 1)" />
+          <reportPage :reportPageData="reportPageData" id="container-report-page"
+		  v-if="Object.keys(reportPageData).length && (tabsActive == 3 || tabsActive == 1)" />
 
           <view class="more-activity more-box" v-if="tabsActive === 1 && haveResultActivity">
             <text class="more-text"> 活动/回放 </text>
@@ -605,3 +606,17 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+	#container-report-page{
+		.industry-video-module{
+			  .global-video-box{
+				  .video-content{
+					  top: 400rpx!important;
+				  }
+				  .close-icon{
+					  top: 330rpx!important;
+				  }
+			  }
+		}
+	}
+</style>

pages/index/index.vue

@@ -41,7 +41,8 @@
       <view class="audio-video-content" v-if="topTabsActive == 4">
         <view class="audio-item" v-for="item in videoAudioList" :key="item.Id">
           <view class="cover-item" :style="{ 'background-image': 'url(' + item.BackgroundImg + ')' }">
-            <block v-if="item.Type == 2">
+			  <!-- type:3 -- 产业视频 -->
+            <block v-if="item.Type == 2 || item.Type == 3"> 
               <image class="img-bg" @click="handelPlay(item)" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/play_icon_index.png"></image>
             </block>
             <block v-else>
@@ -708,7 +709,8 @@ export default {
     if (from === "button") {
       let item = target.dataset.item;
       let audio_id = item.Type == 1 || item.AudioType == 1 ? item.Id : "";
-      let video_id = item.Type == 2 ? item.Id : "";
+	  // type=2 -- 活动视频 type=3 -- 产业视频
+      let video_id = item.Type == 2 || item.Type == 3 ? item.Id : "";
       let activity_id = item.Type == 2 && item.ActivityId > 0 ? item.ActivityId : "";
       let title_share = item.AudioTitle || item.Title;
       return {

pages/reportForm/index.scss

@@ -403,9 +403,41 @@
     margin-left: 60rpx;
     display: flex;
     flex-wrap: wrap;
-
+	.industry-video-item{
+		height: 126rpx;
+		width: 170rpx;
+		margin: 0 40rpx 27rpx 0;
+		border-radius: 8rpx;
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+		font-weight: 500;
+		font-size: 32rpx;
+		color: white;
+		line-height: 45rpx;
+		padding: 20rpx;
+		position: relative;
+		overflow: hidden;
+		.industry-video-icon{
+			height: 0rpx;
+			width: 0rpx;
+			border-style: solid;
+			border-color: #3385FF #3385FF transparent transparent;
+			border-width: 28rpx;
+			position: absolute;
+			right: 0;
+			top: 0;
+			image{
+				position: absolute;
+				right: -24rpx;
+				bottom: 0;
+				height: 20rpx;
+				width: 20rpx;
+			}
+		}
+	}
     .text-box {
-      margin-bottom: 27rpx;
+      margin-bottom: 30rpx;
       margin-right: 40rpx;
       padding: 0;
       font-size: 24rpx;

pages/reportForm/reportForm.vue

@@ -98,7 +98,8 @@
               </view>
             </view>
           </view>
-          <view class="content-box" v-if="item.IndustrialSubjectList.length > 6">
+		  <!-- 多于6个时 取消展开/收起 的交互 全部显示 ------- 查研观向 8.4 -->
+<!--          <view class="content-box" v-if="item.IndustrialSubjectList.length > 6">
             <u-read-more :toggle="true" :show-height="item.IndustrialSubjectList.length > 6 ? 140 : 150" :shadow-style="shadowStyle" close-text="展开" color="#D1D1D1">
               <view class="read-more">
                 <view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" @click="goIndustryReport(item.IndustrialManagementId)" class="text-box">
@@ -106,10 +107,28 @@
                 </view>
               </view>
             </u-read-more>
-          </view>
-          <view class="content-box" v-else @click="goIndustryReport(item.IndustrialManagementId)">
+          </view> -->
+          <view class="content-box" @click="goIndustryReport(item.IndustrialManagementId)">
             <view class="read-more">
-              <view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" class="text-box">{{ val.SubjectName }}</view>
+				<view class="industry-video-item" @click.stop="handelVideoPlay(item)"
+				:style="{'background-image':'url('+item.IndustryVideo.BackgroundImg+ ')'}" v-if="item.IndustryVideo">
+					5min
+					<br />
+					逻辑解析
+					<view class="industry-video-icon">
+						<image src="https://hzstatic.hzinsights.com/cygx/video-right-top-icon.svg"></image>
+					</view>
+				</view>
+				<view v-if="item.IndustryVideo" style="display: flex;flex-wrap: wrap;width: 420rpx;">
+					<view v-for="val in item.IndustrialSubjectList.slice(0,4)" :key="val.IndustrialSubjectId" class="text-box">{{ val.SubjectName }}</view>
+				</view>
+				<block v-if="item.IndustryVideo && item.IndustrialSubjectList.length>4">
+					<view v-for="val in item.IndustrialSubjectList.slice(4)" :key="val.IndustrialSubjectId" class="text-box">{{ val.SubjectName }}</view>
+				</block>
+				<block v-if="!item.IndustryVideo">
+					<view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" class="text-box">{{ val.SubjectName }}</view>
+				</block>
+<!-- 				<view v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId" class="text-box">{{ val.SubjectName }}</view> -->
             </view>
           </view>
         </view>
@@ -133,6 +152,8 @@
       </view>
     </u-modal>
     <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
+	<!-- 视频模块 -->
+	<videoModule :showVideoPop="showVideoPop" :videoPopList="videoPopList" />
     <suspenButton v-if="wholeShowListData.IsShow" />
   </view>
 </template>
@@ -143,6 +164,7 @@ import coverGuide from "./components/coverGuide.vue";
 import { Throttle, Debounce } from "@/config/util.js";
 import freeCharge from "@/components/freeCharge";
 import suspenButton from "@/components/suspen_button.vue";
+import videoModule from "@/components/videoModule/index";
 import { Reports } from "@/config/api.js";
 let app = getApp();
 export default {
@@ -151,6 +173,7 @@ export default {
     coverGuide,
     freeCharge,
     suspenButton,
+	videoModule
   },
   data() {
     return {
@@ -190,6 +213,8 @@ export default {
       isCancelBtn: false,
       scrollLeft: 0,
       showTransition: false, //点击绝密后的隐现
+	  showVideoPop:false, //视频弹窗显示控制
+	  videoPopList:{},// 视频信息
     };
   },
   onLoad(option) {
@@ -421,6 +446,23 @@ export default {
       this.page_no = 1;
       this.getIndustryList();
     },
+	// 视频播放事件
+	handelVideoPlay(item){
+		let params={
+			Id:item.IndustryVideo.Id,
+			ResourceUrl:item.IndustryVideo.ResourceUrl,
+			BackgroundImg:item.IndustryVideo.BackgroundImg,
+			Title:`5min【${item.IndustryName}】逻辑解析`
+		}
+		if (this.$store.state.videoPlay.playVideoId != item.Id) {
+		  this.$store.commit("videoPlay/palyTimeUpdate", 0);
+		  this.$store.commit("videoPlay/playVideo", item.Id);
+		}
+		console.log(params);
+		this.globalBgAudioManager.stop();
+		this.videoPopList = params;
+		this.showVideoPop = true;
+	}
   },
   /* 触底 */
   onReachBottom: Throttle(function () {

reportPages/IndustryReport/IndustryReport.vue

@@ -1,9 +1,21 @@
 <template>
-  <view class="container industry-content">
+  <view class="container industry-content" id="industry-content">
     <view v-if="haveData">
       <view class="content-top">
-        <view class="top-bg">产业赛道布局于{{ layoutTime }}</view>
-        <view class="top-box">
+        <view class="top-bg">
+			<!-- 详情封面图 -->
+			<image :src="industryVideo.DetailImgUrl" class="industry-video-poster" 
+			v-show="industryVideo.ResourceUrl && industryVideo.DetailImgUrl && !havePlayed"
+			@click="playVideo"></image>
+			<!-- 视频 -->
+			<video :src="industryVideo.ResourceUrl" class="industry-video" id="industry-video"
+			v-show="industryVideo.ResourceUrl && (havePlayed || (!industryVideo.DetailImgUrl))" controls></video>
+			<view class="top-bg-title" 
+			:style="{'height':industryVideo.ResourceUrl?'70rpx':'99rpx',
+			'background-color':industryVideo.ResourceUrl?'white':'#d1ebff'}">产业赛道布局于{{ layoutTime }}</view>
+		</view>
+		<!-- industryVideo.ResourceUrl -- 视频url -->
+        <view class="top-box" :style="{'top':industryVideo.ResourceUrl?'418rpx':'99rpx'}">
           <view class="top-tab-cont">
             <view class="tab-cont">
               <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-into-view="'_' + tabIndex">
@@ -20,7 +32,7 @@
           </view>
         </view>
       </view>
-      <view class="collect-ul">
+      <view class="collect-ul" :style="{'padding-top':industryVideo.ResourceUrl?'528rpx':'210rpx'}">
         <view class="collect-ltem" v-for="(item, index) in collectList" :key="index" @click="goDetail(item, index)">
           <view class="item-left">
             <text class="title text_twoLine"
@@ -71,6 +83,8 @@ export default {
       totalPage: "",
       toggleTabIndex: 0,
       titleReport: "",
+	  industryVideo:{},
+	  havePlayed:false,
     };
   },
   onLoad(option) {
@@ -119,6 +133,7 @@ export default {
           });
           this.titleReport = res.Data.IndustryName;
           this.layoutTime = res.Data.LayoutTime;
+		  this.industryVideo = res.Data.IndustryVideo
           if (res.Data.List) {
             this.tabAct_id = res.Data.List[0].CategoryId;
             this.tabBars = res.Data.List;
@@ -171,6 +186,17 @@ export default {
         }
       }
     },
+	// 播放视频
+	playVideo(){		
+		const query = uni.createSelectorQuery().in(this)
+		query.select("#industry-video").context(data =>{
+			data.context.play()
+			setTimeout(()=>{
+				this.havePlayed=true
+			},100)
+			
+		}).exec()
+	}
   },
   /* 触底 */
   onReachBottom: Throttle(function () {
@@ -212,22 +238,45 @@ export default {
     top: 0;
     left: 0;
     width: 100%;
-    z-index: 999;
-    background-color: #d1ebff;
-    height: 73rpx;
-    color: #2c83ff;
-    font-size: 24rpx;
-    line-height: 73rpx;
-    text-align: center;
+    z-index: 100;
+    background-color: white;
+	text-align: center;
+	.industry-video-poster{
+		border-radius: 8rpx 8rpx 0 0;
+		height: 340rpx;
+		width: 728rpx;
+	}
+	.industry-video{
+		height: 340rpx;
+		width: 728rpx;
+	}
+	.top-bg-title{
+		height: 99rpx;
+		color: #2c83ff;
+		background-color: #d1ebff;
+		font-size: 28rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.test{
+		position: relative;
+		span{
+			position: absolute;
+			left: 30rpx;
+			bottom: 30rpx;
+			color: white;
+		}
+	}
   }
   .top-box {
     position: fixed;
 
     width: 100%;
 
-    top: 73rpx;
+    top: 99rpx;
     left: 0;
-    z-index: 999;
+    z-index: 100;
   }
 
   .top-tab-cont {
@@ -288,7 +337,7 @@ export default {
   }
   .collect-ul {
     // margin-top: 30rpx;s
-    padding-top: 175rpx;
+    padding-top: 210rpx;
     // padding-top: 4rpx;
     .collect-ltem {
       display: flex;
@@ -323,4 +372,16 @@ export default {
     }
   }
 }
+#industry-content{
+  .industry-video-module{
+	  .global-video-box{
+		  .video-content{
+			  top: 400rpx!important;
+		  }
+		  .close-icon{
+			  top: 330rpx!important;
+		  }
+	  }
+  }
+}
 </style>