timeLine.vue 6.6 KB

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