Merge branch 'cygx8.3'

reportPages/IndustryReport/IndustryReport.vue

@@ -33,17 +33,37 @@
         </view>
       </view>
       <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"
-              >{{ item.Title }}
-              <text class="reg-text" v-if="item.IsRed"></text>
-            </text>
-            <text class="text_twoLine desc">{{ item.PublishDate }}</text>
+        <!-- 其他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>
@@ -94,6 +114,15 @@ export default {
       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) {
@@ -127,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,
@@ -136,6 +167,7 @@ export default {
     toArticleCategoryList() {
       Reports.toArticleCategoryList({
         IndustrialManagementId: this.industrialManagementId,
+        ShowTimeLine:1
       }).then((res) => {
         if (res.Ret == 200) {
           uni.setNavigationBarTitle({
@@ -154,6 +186,53 @@ export default {
     },
     /* 获取列表 */
     getCollectList() {
+      //just for test
+      if(this.tabAct_id===99999) {
+        this.loadTimeLine = true
+        Reports.getArticleList({
+        PageSize: this.pageSize,
+        CurrentIndex: this.page_no,
+        CategoryId: 99999,
+        IndustrialManagementId: this.industrialManagementId,
+      }).then((res)=>{
+       if(res.Ret===200){
+         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()
+        },300)
+      })
+        return
+      }
       Reports.getArticleList({
         PageSize: this.pageSize,
         CurrentIndex: this.page_no,
@@ -186,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,
@@ -230,7 +309,56 @@ export default {
 				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=>{
+        //根据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 () {
@@ -404,6 +532,125 @@ 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{