<template> <view class="time-line"> <view class="line-item" v-for="(item, index) in dataList" :key="index" @click="goDetailFromTimeLine(item, index)"> <view class="time">{{ item.date }}</view> <view class="content" v-if="item.Content.length"> <text class="content-reg" v-if="item.IsRed"></text> <rich-text :style="{ height: item.isExpand ? 'auto' : richTextHeight + 'px' }" :data-index="index" :class="['rich-text', item.isExpand && 'expand', (item.ArticleId || item.ChartId) && 'texe-color']" :nodes="item.Content" > </rich-text> <view class="expan-btn" :class="[{ pos: !item.isExpand }, (item.ArticleId || item.ChartId) && 'expan-btn-padding']" @click.stop="handleExpand(item, index)" v-if="item.isShowBtn">{{ item.isExpand ? "收起" : "展开" }}</view> </view> <view class="title" v-else> <text class="content-reg" v-if="item.IsRed"></text> {{ item.Title }}</view > </view> <view v-show="loadTimeLine" class="loadTimeLine"></view> <!-- 视频模块 --> <videoModule :showVideoPop.sync="showVideoPop" :videoPopList="videoPopList" /> <audioModule ref="timeLineAudio" :showAudioPop.sync="showAudioPop" /> </view> </template> <script> import { Reports } from "@/config/api.js"; import videoModule from "@/components/videoModule/index"; import audioModule from "@/components/audioModule/index"; export default { name: "", components: {videoModule,audioModule}, props: { dataList: { type: Array, default: [], }, }, data() { return { richTextHeight: 10000, loadTimeLine: false, //时间线的遮罩 showVideoPop:false, videoPopList:{}, showAudioPop:false }; }, computed: {}, watch: {}, created() {}, mounted() {}, methods: { async goDetailFromTimeLine(item, index) { // console.log(item); item.TimeLineId && (await Reports.postTacticsHistory({ TimeLineId: item.TimeLineId, })); if (item.Content.length !== 0 && !item.ArticleId && !item.ChartId) return; if (item.SubCategoryName === "路演精华") { //跳转路演精华 uni.navigateTo({ url: "/reportPages/roadEssence/roadEssence?id=" + item.Id, }); } else if(item.Resource == 4){ if(!item.VideoUrl) return this.showVideoPop=true this.videoPopList={ Id: item.Id, ResourceUrl: item.VideoUrl, Title: item.Title, ActivityId:item.Id } }else if(item.Resource == 5){ if(!item.VoiceUrl) return this.$store.commit("audioBg/parseIntAudio", true); // 判断是否为同一个音频 if (this.$store.state.audioBg.indexId == item.Id) { if (this.globalBgAudioManager.paused) { this.globalBgAudioManager.play(); } } else { let VoiceList = { Url: item.VoiceUrl, Name: item.Title, PlaySeconds: item.VoicePlaySeconds, }; this.$store.commit("audioBg/addAudio", { list: VoiceList, indexId: item.Id, activityTitle: item.Title }); } this.showAudioPop = true; }else { !item.ArticleId && !item.ChartId && this.$emit("setRouter"); if (item.Resource === 2) { // 跳转产品内测详情 uni.navigateTo({ url: "/reportPages/internalDetials/internalDetials?id=" + item.Id, }); } else if (item.Resource === 1) { if (item.Id || item.ArticleId) { uni.navigateTo({ url: "/pageMy/reportDetail/reportDetail?id=" + (item.Id || item.ArticleId), }); } else if (item.ChartId) { uni.navigateTo({ url: "/pageMy/chartPage/chartPage?id=" + item.ChartId, }); } } } }, //展开收起晨会内容 // 去往文章详情的 async handleExpand(item, index) { item.TimeLineId ? await Reports.postTacticsHistory({ TimeLineId: item.TimeLineId, }) : this.getRecordTracking("展开收起", { Id: item.Id }); item.isExpand = !item.isExpand; this.$parent.timeLine.splice(index, 1, item); }, getConentsHeight() { const query = wx.createSelectorQuery().in(this); 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.$parent.timeLine[item.dataset.index]; //超过这个高度的,需要显示展开/收起按钮 if (item.height > standardHeight) { temp.isExpand = false; temp.isShowBtn = true; } else { temp.isExpand = true; temp.isShowBtn = false; } }); //然后把timeLine的第一项扔掉 this.$parent.timeLine.shift(); this.loadTimeLine = false; }); }, }, }; </script> <style scoped lang="scss"> .time-line { padding: 30rpx 40rpx 20rpx 40rpx; min-height: calc(100vh - 190rpx); background-color: #ffffff; position: relative; .texe-color { color: #3385ff; } .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; } } .expan-btn-padding { &.pos { padding: 0 0 0 80rpx; } } .content-reg { position: absolute; top: 10rpx; left: -20rpx; width: 14rpx; height: 14rpx; background-color: #ff0000; border-radius: 50%; } } .title { position: relative; color: #3385ff; .content-reg { position: absolute; top: 10rpx; left: -20rpx; width: 14rpx; height: 14rpx; background-color: #ff0000; border-radius: 50%; } } } } </style>