|
|
@@ -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.Id && industryVideo.DetailImgUrl && !havePlayed"
|
|
|
+ @click="handelVideoPlay"></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.Id?'70rpx':'99rpx',
|
|
|
+ 'background-color':industryVideo.Id?'white':'#d1ebff'}">产业赛道布局于{{ layoutTime }}</view>
|
|
|
+ </view>
|
|
|
+ <!-- industryVideo.ResourceUrl -- 视频url -->
|
|
|
+ <view class="top-box" :style="{'top':industryVideo.Id?'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,18 +32,38 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="collect-ul">
|
|
|
- <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"
|
|
|
- >{{ item.Title }}
|
|
|
- <text class="reg-text" v-if="item.IsRed"></text>
|
|
|
- </text>
|
|
|
- <text class="text_twoLine desc">{{ item.PublishDate }}</text>
|
|
|
+ <view class="collect-ul" :style="{'padding-top':industryVideo.ResourceUrl?'528rpx':'210rpx'}">
|
|
|
+ <!-- 其他tab -->
|
|
|
+ <block v-show="tabAct_id!==99999">
|
|
|
+ <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"
|
|
|
+ >{{ item.Title }}
|
|
|
+ <text class="reg-text" v-if="item.IsRed"></text>
|
|
|
+ </text>
|
|
|
+ <text class="text_twoLine desc">{{ item.PublishDate }}</text>
|
|
|
+ </view>
|
|
|
+ <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
|
|
|
</view>
|
|
|
- <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
|
|
|
- </view>
|
|
|
- <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
|
|
|
+ <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1&&tabAct_id!==99999" />
|
|
|
+ </block>
|
|
|
+ <!-- 时间线 -->
|
|
|
+ <block v-if="tabAct_id===99999">
|
|
|
+ <view class="time-line">
|
|
|
+ <view class="line-item" v-for="(item,index) in timeLine" :key="index" @click="goDetailFromTimeLine(item, index)">
|
|
|
+ <view class="time">{{item.date}}</view>
|
|
|
+ <view class="content" v-if="item.Content.length">
|
|
|
+ <rich-text class="rich-text" :style="{height:item.isExpand?'auto':richTextHeight+'px'}" :data-index="index" :class="{'expand':item.isExpand}"
|
|
|
+ :nodes="item.Content">
|
|
|
+ </rich-text>
|
|
|
+ <view class="expan-btn" :class="{'pos':!item.isExpand}" @click="handleExpand(item,index)" v-if="item.isShowBtn">{{item.isExpand?'收起':'展开'}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="title" v-else>{{item.Title}}</view>
|
|
|
+ </view>
|
|
|
+ <view v-show="loadTimeLine" class="loadTimeLine"></view>
|
|
|
+ <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1&&tabAct_id===99999" />
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="nodata" v-else>
|
|
|
@@ -39,6 +71,8 @@
|
|
|
<text>暂时没有报告的内容</text>
|
|
|
</view>
|
|
|
<freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
|
|
|
+ <!-- 权限弹窗 -->
|
|
|
+ <modalDialog :isShowhasPermission="isShowhasPermission" :applyForIsShow="applyForIsShow" :jurisdictionList="jurisdictionList" :hasPermission="hasPermission" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -47,6 +81,7 @@ import { Mine } from "@/config/api.js"; //模拟
|
|
|
import { Reports } from "@/config/api.js"; //模拟
|
|
|
import { Throttle } from "@/config/util.js";
|
|
|
import freeCharge from "@/components/freeCharge";
|
|
|
+import modalDialog from "@/components/modalDialog.vue";
|
|
|
let app = getApp({ allowDefault: true });
|
|
|
export default {
|
|
|
data() {
|
|
|
@@ -72,6 +107,22 @@ export default {
|
|
|
toggleTabIndex: 0,
|
|
|
titleReport: "",
|
|
|
pcTabActive: "",
|
|
|
+ industryVideo:{},
|
|
|
+ authInfo:{},
|
|
|
+ havePlayed:false,
|
|
|
+ isShowhasPermission: false, // 联系销售的提交申请
|
|
|
+ applyForIsShow: false, // 提交申请
|
|
|
+ jurisdictionList: {},
|
|
|
+ hasPermission: "", //权限
|
|
|
+ timeLine:[],//时间线数据
|
|
|
+ mockTimeLine:[
|
|
|
+ {
|
|
|
+ date:'不重要',
|
|
|
+ Content:'<p>hello,world</p><p>hello,world</p><p>hello,world</p>'
|
|
|
+ },//第一项是为了获取当前手机下,三行是多少相对高度
|
|
|
+ ],
|
|
|
+ loadTimeLine:false,//时间线的遮罩
|
|
|
+ richTextHeight:1000,//晨会富文本最大高度
|
|
|
};
|
|
|
},
|
|
|
onLoad(option) {
|
|
|
@@ -84,6 +135,7 @@ export default {
|
|
|
},
|
|
|
components: {
|
|
|
freeCharge,
|
|
|
+ modalDialog
|
|
|
},
|
|
|
watch: {
|
|
|
//监听tabs的变化
|
|
|
@@ -104,6 +156,8 @@ export default {
|
|
|
if (this.tabAct_id !== item.CategoryId) {
|
|
|
this.tabAct_id = item.CategoryId;
|
|
|
this.pageNum = 1;
|
|
|
+ this.timeLine=[]
|
|
|
+ this.totalPage=""
|
|
|
uni.pageScrollTo({
|
|
|
scrollTop: 0,
|
|
|
duration: 0,
|
|
|
@@ -113,6 +167,7 @@ export default {
|
|
|
toArticleCategoryList() {
|
|
|
Reports.toArticleCategoryList({
|
|
|
IndustrialManagementId: this.industrialManagementId,
|
|
|
+ ShowTimeLine:1
|
|
|
}).then((res) => {
|
|
|
if (res.Ret == 200) {
|
|
|
uni.setNavigationBarTitle({
|
|
|
@@ -120,6 +175,8 @@ export default {
|
|
|
});
|
|
|
this.titleReport = res.Data.IndustryName;
|
|
|
this.layoutTime = res.Data.LayoutTime;
|
|
|
+ this.industryVideo = res.Data.IndustryVideo
|
|
|
+ this.authInfo = res.Data.AuthInfo
|
|
|
if (res.Data.List) {
|
|
|
this.tabAct_id = res.Data.List[0].CategoryId;
|
|
|
this.tabBars = res.Data.List;
|
|
|
@@ -129,6 +186,53 @@ export default {
|
|
|
},
|
|
|
/* 获取列表 */
|
|
|
getCollectList() {
|
|
|
+ //just for test
|
|
|
+ if(this.tabAct_id===99999) {
|
|
|
+ Reports.getArticleList({
|
|
|
+ PageSize: this.pageSize,
|
|
|
+ CurrentIndex: this.page_no,
|
|
|
+ CategoryId: 99999,
|
|
|
+ IndustrialManagementId: this.industrialManagementId,
|
|
|
+ }).then((res)=>{
|
|
|
+ if(res.Ret===200){
|
|
|
+ this.loadTimeLine = true
|
|
|
+ this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore"
|
|
|
+ this.totalPage = res.Data.Paging.Pages
|
|
|
+ let list = res.Data.List||[]
|
|
|
+ list = list.map(item=>{
|
|
|
+ let temp = item
|
|
|
+ temp.date = item.PublishTime.split(" ")[0]
|
|
|
+ if(item.Content.length){
|
|
|
+ temp.isExpand = true
|
|
|
+ temp.isShowBtn = true
|
|
|
+ }
|
|
|
+ return temp
|
|
|
+ })
|
|
|
+ if(this.page_no===1){
|
|
|
+ this.timeLine = list
|
|
|
+ this.haveData = this.timeLine.length ? true : false;
|
|
|
+ if (this.refresh) {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ this.refresh = false;
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.timeLine = this.timeLine.concat(list)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.timeLine.unshift(this.mockTimeLine[0])
|
|
|
+ //在获取高度前把所有的晨会展开,收起的话无法获取正确高度
|
|
|
+ this.timeLine.forEach(item=>{
|
|
|
+ if(item.Content.length){
|
|
|
+ item.isExpand = true
|
|
|
+ item.isShowBtn = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.getConentsHeight()
|
|
|
+ },0)
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
Reports.getArticleList({
|
|
|
PageSize: this.pageSize,
|
|
|
CurrentIndex: this.page_no,
|
|
|
@@ -161,7 +265,7 @@ export default {
|
|
|
await this.$store.dispatch("checkHandle");
|
|
|
if (!this.$store.state.isAuth && !this.$store.state.isBind) {
|
|
|
// 已授权已绑定
|
|
|
- if (item.IsHaveVideo) {
|
|
|
+ if (item.SubCategoryName=== "路演精华") {
|
|
|
//跳转路演精华
|
|
|
uni.navigateTo({
|
|
|
url: "/reportPages/roadEssence/roadEssence?id=" + item.ArticleId,
|
|
|
@@ -173,6 +277,89 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
+ // 视频播放权限判断
|
|
|
+ handelVideoPlay(){
|
|
|
+ if (!this.$store.state.isAuth && !this.$store.state.isBind) {
|
|
|
+ if (this.authInfo.HasPermission == 1) {
|
|
|
+ this.playVideo()
|
|
|
+ } else {
|
|
|
+ this.hasPermission = this.authInfo.HasPermission;
|
|
|
+ this.jurisdictionList.ActivityId = this.industryVideo.Id;
|
|
|
+ this.jurisdictionList.isAudioVideo = 3;
|
|
|
+ if (this.hasPermission == 2) {
|
|
|
+ this.jurisdictionList.SellerMobile = this.authInfo.SellerMobile;
|
|
|
+ this.jurisdictionList.SellerName = this.authInfo.SellerName;
|
|
|
+ this.jurisdictionList.PopupMsg = this.authInfo.PopupMsg;
|
|
|
+ this.isShowhasPermission = true;
|
|
|
+ } else if (this.hasPermission == 3 || this.hasPermission == 4 || this.hasPermission == 5) {
|
|
|
+ this.jurisdictionList.PopupMsg = this.authInfo.PopupMsg;
|
|
|
+ this.applyForIsShow = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$store.dispatch("checkHandle");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 播放视频
|
|
|
+ playVideo(){
|
|
|
+ const query = uni.createSelectorQuery().in(this)
|
|
|
+ query.select("#industry-video").context(data =>{
|
|
|
+ data.context.play()
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.havePlayed=true
|
|
|
+ },10)
|
|
|
+ }).exec()
|
|
|
+ },
|
|
|
+ //展开收起晨会内容
|
|
|
+ handleExpand(item,index){
|
|
|
+ item.isExpand = !item.isExpand
|
|
|
+ this.timeLine.splice(index,1,item)
|
|
|
+ },
|
|
|
+ //获取所有晨会内容的高度并决定是否显示展开收起按钮
|
|
|
+ getConentsHeight(){
|
|
|
+ const query = wx.createSelectorQuery()
|
|
|
+ query.selectAll(".rich-text").boundingClientRect()
|
|
|
+ query.exec(res=>{
|
|
|
+ /* console.log(res[0][0].height) */
|
|
|
+ //根据timeLine的第一项确定当前手机三行文字的高度
|
|
|
+ const standardHeight = res[0][0].height
|
|
|
+ this.richTextHeight = standardHeight
|
|
|
+ res[0].forEach(item=>{
|
|
|
+ let temp = this.timeLine[item.dataset.index]
|
|
|
+ //超过这个高度的,需要显示展开/收起按钮
|
|
|
+ if(item.height>standardHeight){
|
|
|
+ temp.isExpand = false
|
|
|
+ temp.isShowBtn = true
|
|
|
+ }else{
|
|
|
+ temp.isExpand = true
|
|
|
+ temp.isShowBtn = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //然后把timeLine的第一项扔掉
|
|
|
+ this.timeLine.shift()
|
|
|
+ this.loadTimeLine = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async goDetailFromTimeLine(item, index){
|
|
|
+ if(item.Content.length!==0) return;
|
|
|
+ await this.$store.dispatch("checkHandle");
|
|
|
+ if (!this.$store.state.isAuth && !this.$store.state.isBind) {
|
|
|
+ // 已授权已绑定
|
|
|
+ if (item.SubCategoryName=== "路演精华") {
|
|
|
+ //跳转路演精华
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/reportPages/roadEssence/roadEssence?id=" + item.Id,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: "/pageMy/reportDetail/reportDetail?id=" + item.Id,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getNode(content,isExpand){
|
|
|
+ return `<div style='-webkit-line-clamp: ${isExpand?9999:3};-webkit-box-orient: vertical;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;'>${content}</div>`
|
|
|
+ }
|
|
|
},
|
|
|
/* 触底 */
|
|
|
onReachBottom: Throttle(function () {
|
|
|
@@ -214,22 +401,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 {
|
|
|
@@ -290,7 +500,7 @@ export default {
|
|
|
}
|
|
|
.collect-ul {
|
|
|
// margin-top: 30rpx;s
|
|
|
- padding-top: 175rpx;
|
|
|
+ padding-top: 210rpx;
|
|
|
// padding-top: 4rpx;
|
|
|
.collect-ltem {
|
|
|
display: flex;
|
|
|
@@ -323,6 +533,137 @@ export default {
|
|
|
color: #999;
|
|
|
}
|
|
|
}
|
|
|
+ .time-line{
|
|
|
+ margin-top:15rpx;
|
|
|
+ padding:30rpx 40rpx 50rpx 40rpx;
|
|
|
+ min-height: calc(100vh - 190rpx);
|
|
|
+ background-color:#FFFFFF;
|
|
|
+ position: relative;
|
|
|
+ .loadTimeLine{
|
|
|
+ top:0;bottom:0;left:0;right:0;
|
|
|
+ position:absolute;
|
|
|
+ background-color: #fff;
|
|
|
+ z-index: 6;
|
|
|
+ }
|
|
|
+ .line-item{
|
|
|
+ position:relative;
|
|
|
+ padding:0 0 50rpx 40rpx;
|
|
|
+ /* border-left:1rpx solid #DAE9FD; */
|
|
|
+ &:last-child{
|
|
|
+ padding-bottom: 0;
|
|
|
+ &::after{
|
|
|
+ height: calc(100% - 25rpx);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:first-child{
|
|
|
+ .time{
|
|
|
+ &::after{
|
|
|
+ background-color: #3385FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::before,&::after{
|
|
|
+ position:absolute;
|
|
|
+ content: "";
|
|
|
+
|
|
|
+ }
|
|
|
+ &::before{
|
|
|
+ width:24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ background-color: #DAE9FD;
|
|
|
+ z-index: 1;
|
|
|
+ left:0;
|
|
|
+ top:27rpx;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ &::after{
|
|
|
+ top:17rpx;
|
|
|
+ left:0;
|
|
|
+ width:1rpx;
|
|
|
+ height:calc(100%);
|
|
|
+ background-color: #DAE9FD;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+ .time{
|
|
|
+ width:245rpx;
|
|
|
+ height: 55rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 45rpx;
|
|
|
+ padding:5rpx 20rpx;
|
|
|
+ background-color: #F5F9FF;
|
|
|
+ border-radius: 64rpx;
|
|
|
+ color:#5181C9;
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-bottom:20rpx;
|
|
|
+ position: relative;
|
|
|
+ &::before,&::after{
|
|
|
+ position:absolute;
|
|
|
+ content: "";
|
|
|
+ left:-36rpx;
|
|
|
+ top:27rpx;
|
|
|
+ width:24rpx;
|
|
|
+ height:1rpx;
|
|
|
+ background-color:#DAE9FD;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ &::after{
|
|
|
+ left:-40rpx;
|
|
|
+ top:27rpx;
|
|
|
+ width:12rpx;
|
|
|
+ height:12rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ background-color:#9DC5FF;
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ color:#666666;
|
|
|
+ position: relative;
|
|
|
+ .rich-text{
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ text-align: justify;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 3;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ position: relative;
|
|
|
+ &.expand{
|
|
|
+ -webkit-line-clamp: 999;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .expan-btn{
|
|
|
+ color:#2C83FF;
|
|
|
+ text-align: right;
|
|
|
+ &.pos{
|
|
|
+ padding:0 0 0 40rpx;
|
|
|
+ background-color: rgba(255, 255, 255, 0.882);
|
|
|
+ position:absolute;
|
|
|
+ right:0;
|
|
|
+ bottom:0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ color:#3385FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+#industry-content{
|
|
|
+ .industry-video-module{
|
|
|
+ .global-video-box{
|
|
|
+ .video-content{
|
|
|
+ top: 400rpx!important;
|
|
|
+ }
|
|
|
+ .close-icon{
|
|
|
+ top: 330rpx!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
bd0716