timeLine.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
  1. <template>
  2. <view class="time-line">
  3. <view class="line-item" v-for="(item, index) in dataList" :key="index" @click="goDetailFromTimeLine(item, index)">
  4. <view class="time">{{ item.date }}</view>
  5. <view class="content" v-if="item.Content.length">
  6. <text class="content-reg" v-if="item.IsRed"></text>
  7. <rich-text
  8. :style="{ height: item.isExpand ? 'auto' : richTextHeight + 'px' }"
  9. :data-index="index"
  10. :class="['rich-text', item.isExpand && 'expand', (item.ArticleId || item.ChartId) && 'texe-color']"
  11. :nodes="item.Content"
  12. >
  13. </rich-text>
  14. <view class="expan-btn" :class="[{ pos: !item.isExpand }, (item.ArticleId || item.ChartId) && 'expan-btn-padding']" @click.stop="handleExpand(item, index)" v-if="item.isShowBtn">{{
  15. item.isExpand ? "收起" : "展开"
  16. }}</view>
  17. </view>
  18. <view class="title" v-else>
  19. <text class="content-reg" v-if="item.IsRed"></text>
  20. {{ item.Title }}</view
  21. >
  22. </view>
  23. <view v-show="loadTimeLine" class="loadTimeLine"></view>
  24. <!-- 视频模块 -->
  25. <videoModule :showVideoPop.sync="showVideoPop" :videoPopList="videoPopList" />
  26. <audioModule ref="timeLineAudio" :showAudioPop.sync="showAudioPop" />
  27. </view>
  28. </template>
  29. <script>
  30. import { Reports } from "@/config/api.js";
  31. import videoModule from "@/components/videoModule/index";
  32. import audioModule from "@/components/audioModule/index";
  33. export default {
  34. name: "",
  35. components: { videoModule, audioModule },
  36. props: {
  37. dataList: {
  38. type: Array,
  39. default: [],
  40. },
  41. },
  42. data() {
  43. return {
  44. richTextHeight: 10000,
  45. loadTimeLine: false, //时间线的遮罩
  46. showVideoPop: false,
  47. videoPopList: {},
  48. showAudioPop: false,
  49. };
  50. },
  51. computed: {},
  52. watch: {},
  53. created() {},
  54. mounted() {},
  55. methods: {
  56. async goDetailFromTimeLine(item, index) {
  57. // console.log(item);
  58. item.TimeLineId &&
  59. (await Reports.postTacticsHistory({
  60. TimeLineId: item.TimeLineId,
  61. }));
  62. if (item.Content.length !== 0 && !item.ArticleId && !item.ChartId) return;
  63. if (item.SubCategoryName === "路演精华") {
  64. //跳转路演精华
  65. uni.navigateTo({
  66. url: "/reportPages/roadEssence/roadEssence?id=" + item.Id,
  67. });
  68. } else if (item.Resource == 4) {
  69. if (!item.VideoUrl) return;
  70. this.showVideoPop = true;
  71. this.videoPopList = {
  72. Id: item.Id,
  73. ResourceUrl: item.VideoUrl,
  74. Title: item.Title,
  75. ActivityId: item.Id,
  76. };
  77. } else if (item.Resource == 5) {
  78. if (!item.VoiceUrl) return;
  79. this.$store.commit("audioBg/parseIntAudio", true);
  80. // 判断是否为同一个音频
  81. if (this.$store.state.audioBg.indexId == item.Id) {
  82. if (this.globalBgAudioManager.paused) {
  83. this.globalBgAudioManager.play();
  84. }
  85. } else {
  86. let VoiceList = {
  87. Url: item.VoiceUrl,
  88. Name: item.Title,
  89. PlaySeconds: item.VoicePlaySeconds,
  90. };
  91. this.$store.commit("audioBg/addAudio", { list: VoiceList, indexId: item.Id, activityTitle: item.Title });
  92. }
  93. this.showAudioPop = true;
  94. } else {
  95. !item.ArticleId && !item.ChartId && this.$emit("setRouter");
  96. if (item.Resource === 2) {
  97. // 跳转产品内测详情
  98. uni.navigateTo({
  99. url: "/reportPages/internalDetials/internalDetials?id=" + item.Id,
  100. });
  101. } else if (item.Resource === 1) {
  102. if (item.Id || item.ArticleId) {
  103. uni.navigateTo({
  104. url: "/pageMy/reportDetail/reportDetail?id=" + (item.Id || item.ArticleId),
  105. });
  106. } else if (item.ChartId) {
  107. uni.navigateTo({
  108. url: "/pageMy/chartPage/chartPage?id=" + item.ChartId,
  109. });
  110. }
  111. }
  112. }
  113. }, //展开收起晨会内容
  114. // 去往文章详情的
  115. async handleExpand(item, index) {
  116. item.TimeLineId
  117. ? await Reports.postTacticsHistory({
  118. TimeLineId: item.TimeLineId,
  119. })
  120. : this.getRecordTracking("展开收起", { Id: item.Id });
  121. item.isExpand = !item.isExpand;
  122. this.$parent.timeLine.splice(index, 1, item);
  123. },
  124. getConentsHeight() {
  125. const query = wx.createSelectorQuery().in(this);
  126. query.selectAll(".rich-text").boundingClientRect();
  127. query.exec((res) => {
  128. //根据timeLine的第一项确定当前手机三行文字的高度
  129. const standardHeight = res[0][0].height;
  130. this.richTextHeight = standardHeight;
  131. res[0].forEach((item) => {
  132. let temp = this.$parent.timeLine[item.dataset.index];
  133. //超过这个高度的,需要显示展开/收起按钮
  134. if (item.height > standardHeight) {
  135. temp.isExpand = false;
  136. temp.isShowBtn = true;
  137. } else {
  138. temp.isExpand = true;
  139. temp.isShowBtn = false;
  140. }
  141. });
  142. //然后把timeLine的第一项扔掉
  143. this.$parent.timeLine.shift();
  144. this.loadTimeLine = false;
  145. });
  146. },
  147. },
  148. };
  149. </script>
  150. <style scoped lang="scss">
  151. .time-line {
  152. padding: 30rpx 40rpx 20rpx 40rpx;
  153. min-height: calc(100vh - 390rpx);
  154. background-color: #ffffff;
  155. position: relative;
  156. .texe-color {
  157. color: #3385ff;
  158. }
  159. .loadTimeLine {
  160. top: 0;
  161. bottom: 0;
  162. left: 0;
  163. right: 0;
  164. position: absolute;
  165. background-color: #fff;
  166. z-index: 6;
  167. }
  168. .line-item {
  169. position: relative;
  170. padding: 0 0 50rpx 40rpx;
  171. /* border-left:1rpx solid #DAE9FD; */
  172. &:last-child {
  173. padding-bottom: 0;
  174. &::after {
  175. height: calc(100% - 25rpx);
  176. }
  177. }
  178. &:first-child {
  179. .time {
  180. &::after {
  181. background-color: #3385ff;
  182. }
  183. }
  184. }
  185. &::before,
  186. &::after {
  187. position: absolute;
  188. content: "";
  189. }
  190. &::before {
  191. width: 24rpx;
  192. height: 24rpx;
  193. background-color: #dae9fd;
  194. z-index: 1;
  195. left: 0;
  196. top: 27rpx;
  197. transform: translate(-50%, -50%);
  198. border-radius: 50%;
  199. }
  200. &::after {
  201. top: 17rpx;
  202. left: 0;
  203. width: 1rpx;
  204. height: calc(100%);
  205. background-color: #dae9fd;
  206. z-index: 2;
  207. }
  208. .time {
  209. display: flex;
  210. align-items: center;
  211. justify-content: center;
  212. width: 185rpx;
  213. height: 50rpx;
  214. background-color: #e5efff;
  215. border-radius: 64rpx;
  216. color: $uni-color-new;
  217. font-size: 28rpx;
  218. font-weight: 600;
  219. margin-bottom: 20rpx;
  220. position: relative;
  221. &::before,
  222. &::after {
  223. position: absolute;
  224. content: "";
  225. left: -36rpx;
  226. top: 27rpx;
  227. width: 24rpx;
  228. height: 1rpx;
  229. background-color: #e5efff;
  230. z-index: 1;
  231. }
  232. &::after {
  233. left: -40rpx;
  234. top: 27rpx;
  235. width: 12rpx;
  236. height: 12rpx;
  237. border-radius: 50%;
  238. transform: translate(-50%, -50%);
  239. background-color: $uni-color-new;
  240. z-index: 3;
  241. }
  242. }
  243. .content {
  244. color: #666666;
  245. position: relative;
  246. .rich-text {
  247. overflow: hidden;
  248. text-overflow: ellipsis;
  249. text-align: justify;
  250. display: -webkit-box;
  251. -webkit-line-clamp: 3;
  252. -webkit-box-orient: vertical;
  253. position: relative;
  254. &.expand {
  255. -webkit-line-clamp: 999;
  256. height: auto;
  257. }
  258. }
  259. .expan-btn {
  260. color: $uni-color-new;
  261. text-align: right;
  262. &.pos {
  263. padding: 0 0 0 40rpx;
  264. background-color: rgba(255, 255, 255, 0.882);
  265. position: absolute;
  266. right: 0;
  267. bottom: 0;
  268. }
  269. }
  270. .expan-btn-padding {
  271. &.pos {
  272. padding: 0 0 0 80rpx;
  273. }
  274. }
  275. .content-reg {
  276. position: absolute;
  277. top: 10rpx;
  278. left: -20rpx;
  279. width: 14rpx;
  280. height: 14rpx;
  281. background-color: #ff0000;
  282. border-radius: 50%;
  283. }
  284. }
  285. .title {
  286. position: relative;
  287. color: $uni-color-new;
  288. .content-reg {
  289. position: absolute;
  290. top: 10rpx;
  291. left: -20rpx;
  292. width: 14rpx;
  293. height: 14rpx;
  294. background-color: #ff0000;
  295. border-radius: 50%;
  296. }
  297. }
  298. }
  299. }
  300. </style>