timeLine.vue 5.9 KB

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