cygx8.3:时间线静态页面

reportPages/IndustryReport/IndustryReport.vue

@@ -21,17 +21,36 @@
         </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>
+        <!-- 其他tab -->
+        <block v-show="tabAct_id!==1">
+          <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" />
+        </block>
+        <!-- 时间线 -->
+        <block v-if="tabAct_id===1">
+          <view class="time-line">
+            <view class="line-item" v-for="(item,index) in timeLine" :key="index">
+              <view class="time">{{item.date}}</view>
+              <view class="content" v-if="item.content">
+                <rich-text class="rich-text"  :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>
+          </view>
+        </block>
       </view>
     </view>
     <view class="nodata" v-else>
@@ -71,6 +90,45 @@ export default {
       totalPage: "",
       toggleTabIndex: 0,
       titleReport: "",
+      timeLine:[],
+      mockTimeLine:[
+        {
+          date:'不重要',
+          content:'<p>hello,world</p><p>hello,world</p><p>hello,world</p>'
+        },//第一项是为了获取当前手机下,三行是多少相对高度
+        {
+          date:'2022.10.20',
+          isMeeting:true,
+          content:'<p>hello,world</p><p>hello,world</p><p>hello,world</p><p>hello,world</p>',
+          isExpand:true, //默认全部是展开的,获取富文本高度后,选择显示和不显示
+          isShowBtn:true,//默认展开/收起按钮也是显示的
+        },
+        {
+          date:'2022.10.19',
+          isMeeting:false,
+          title:'药调研016-IVD及高直耗材集采情况及影响研讨关于啥的凑字数'
+        },
+        {
+          date:'2022.10.18',
+          isMeeting:true,
+          content:'<p>hello,world啥的凑字数啥的凑字数啥的凑字数啥的凑字数啥的凑字数啥的凑字数啥的凑字数啥的凑字数啥的凑字数啥的凑字数啥的凑字数啥的凑字数啥的</p>',
+          isExpand:true,
+          isShowBtn:true
+        },
+        {
+          date:'2022.10.17',
+          isMeeting:false,
+          title:'药调研016-IVD及高直耗材集采情况及影响研讨关于啥的凑字数'
+        },
+         {
+          date:'2022.10.16',
+          isMeeting:true,
+          content:'<p>hello,world</p>',
+          isExpand:true,
+          isShowBtn:true
+        },
+      ],
+      loadTimeLine:false
     };
   },
   onLoad(option) {
@@ -91,6 +149,9 @@ export default {
         if (this.tabAct_id) {
           (this.page_no = 1), (this.collectList = []);
           this.getCollectList();
+          this.tabAct_id===1&&setTimeout(()=>{
+            this.getConentsHeight()
+          },300)
         }
       },
       immediate: true,
@@ -103,6 +164,7 @@ export default {
       if (this.tabAct_id !== item.CategoryId) {
         this.tabAct_id = item.CategoryId;
         this.pageNum = 1;
+        this.timeLine=[]
         uni.pageScrollTo({
           scrollTop: 0,
           duration: 0,
@@ -122,12 +184,29 @@ export default {
           if (res.Data.List) {
             this.tabAct_id = res.Data.List[0].CategoryId;
             this.tabBars = res.Data.List;
+            //just for test
+            this.tabBars.unshift({
+              CategoryId:1,
+              MatchTypeName:'时间线',
+              IsRed:false
+            })
+            this.tabAct_id = res.Data.List[0].CategoryId;
           }
         }
       });
     },
     /* 获取列表 */
     getCollectList() {
+      //just for test
+      if(this.tabAct_id===1) {
+        this.loadTimeLine = true
+        this.timeLine = uni.$u.deepClone(this.mockTimeLine)
+        if (this.refresh) {
+          uni.stopPullDownRefresh();
+          this.refresh = false;
+        }
+        return
+      }
       Reports.getArticleList({
         PageSize: this.pageSize,
         CurrentIndex: this.page_no,
@@ -171,6 +250,32 @@ export default {
         }
       }
     },
+    //展开收起晨会内容
+    handleExpand(item,index){
+      item.isExpand = !item.isExpand
+      this.mockTimeLine.splice(index,1,item)
+    },
+    //获取所有晨会内容的高度并决定是否显示展开收起按钮
+    getConentsHeight(){
+      const query = wx.createSelectorQuery()
+      query.selectAll(".rich-text").boundingClientRect()
+      query.exec(res=>{
+        const standardHeight = res[0][0].height 
+        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
+      })
+    }
   },
   /* 触底 */
   onReachBottom: Throttle(function () {
@@ -179,6 +284,9 @@ export default {
     this.page_no++;
     if (this.tabAct_id) {
       this.getCollectList();
+      this.tabAct_id===1&&setTimeout(()=>{
+            this.getConentsHeight()
+          },300)
     }
   }),
   /* 下拉刷新 */
@@ -187,6 +295,9 @@ export default {
       this.page_no = 1;
       this.refresh = true;
       this.getCollectList();
+      this.tabAct_id===1&&setTimeout(()=>{
+            this.getConentsHeight()
+          },300)
     }
   }),
   /**
@@ -321,6 +432,126 @@ export default {
         color: #999;
       }
     }
+    .time-line{
+      margin-top:15rpx;
+      padding:30rpx 40rpx 50rpx 40rpx;
+      height: calc(100vh - 190rpx);
+      overflow-y: scroll;
+      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:205rpx;
+          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 20rpx;
+              background-color: rgba(255, 255, 255, 0.882);
+              position:absolute;
+              right:0;
+              bottom:0;
+            }
+          }
+        }
+        .title{
+          color:#3385FF;
+        }
+      }
+    }
+    
   }
 }
 </style>