timeLine.vue 6.9 KB

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