chartItem.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <view class="container-chart-item global_card_content" @click="goDetail(list)">
  3. <view class="global_title">
  4. <mp-html :content="richTextClamp(2) + list.Title + '</div>'" />
  5. </view>
  6. <view class="item-content-img">
  7. <image :src="list.BodyHtml" mode=""></image>
  8. </view>
  9. <view class="chart-tag">
  10. <text class="tag-item" v-if="list.PtagName">{{ list.PtagName }}</text>
  11. <text class="tag-item" v-if="list.CtagName">{{ list.CtagName }}</text>
  12. </view>
  13. <view class="chart-collect" v-if="isMyChartCollection">
  14. <text class="cancel" @click.stop="myChartIsTop(list.ChartId)">{{ list.IsTop ? "取消置顶" : "置顶" }}</text>
  15. <text class="remove" @click.stop="myChartCollect(list.ChartId)">移除</text>
  16. </view>
  17. <view class="my-chart-collect" v-if="isMyChartCollection && list.IsTop"></view>
  18. </view>
  19. </template>
  20. <script>
  21. export default {
  22. name: "",
  23. components: {},
  24. props: {
  25. list: {
  26. type: Object,
  27. default: {},
  28. required: true,
  29. },
  30. isMyChartCollection: {
  31. type: Boolean,
  32. default: false,
  33. },
  34. },
  35. data() {
  36. return {};
  37. },
  38. computed: {},
  39. watch: {},
  40. created() {},
  41. mounted() {},
  42. methods: {
  43. goDetail(item) {
  44. if (item.HomeType !== 1) {
  45. /* 无需授权且已绑定 检验是或否有权限 */
  46. uni.navigateTo({ url: "/pageMy/chartPage/chartPage?id=" + item.ChartId });
  47. }
  48. },
  49. myChartIsTop(id) {
  50. this.$emit("myChartIsTop", id);
  51. },
  52. myChartCollect(id) {
  53. this.$emit("myChartCollect", id);
  54. },
  55. richTextClamp(val) {
  56. return `<div style="${
  57. val == 7 ? "min-height: 50px;" : ""
  58. }line-clamp: ${val};-webkit-line-clamp: ${val};text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;word-wrap: break-word;word-break: break-all;">`;
  59. },
  60. },
  61. };
  62. </script>
  63. <style scoped lang="scss">
  64. .container-chart-item {
  65. position: relative;
  66. width: 100%;
  67. padding: 20rpx 20rpx 0;
  68. background: #ffffff;
  69. box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
  70. border-radius: 8rpx;
  71. margin-bottom: 20rpx;
  72. overflow: hidden;
  73. .chart-title {
  74. height: 90rpx;
  75. font-size: 32rpx;
  76. font-weight: 500;
  77. color: #333333;
  78. line-height: 42rpx;
  79. border-bottom: 1rpx solid #dcdfe6;
  80. }
  81. .item-content-img {
  82. margin-top: 20rpx;
  83. width: 100%;
  84. height: 228rpx;
  85. padding: 10rpx 20rpx;
  86. background-color: #f0f1f3;
  87. image {
  88. width: 100%;
  89. height: 100%;
  90. }
  91. }
  92. .chart-collect {
  93. display: flex;
  94. align-items: center;
  95. justify-content: space-between;
  96. padding-bottom: 20rpx;
  97. .cancel {
  98. background: $uni-color-new;
  99. margin-right: 20rpx;
  100. color: #ffffff;
  101. }
  102. .remove {
  103. border: 1px solid $uni-color-new;
  104. color: $uni-color-new;
  105. }
  106. text {
  107. width: 150rpx;
  108. height: 46rpx;
  109. line-height: 46rpx;
  110. text-align: center;
  111. font-size: 24rpx;
  112. border-radius: 8rpx;
  113. }
  114. }
  115. .my-chart-collect {
  116. position: absolute;
  117. top: -2rpx;
  118. left: 0;
  119. width: 0;
  120. height: 0;
  121. border-top: 30rpx solid $uni-color-new;
  122. border-right: 30rpx solid transparent;
  123. }
  124. .chart-tag {
  125. display: flex;
  126. align-items: center;
  127. justify-content: space-between;
  128. height: 78rpx;
  129. .tag-item {
  130. display: flex;
  131. align-items: center;
  132. justify-content: center;
  133. width: 150rpx;
  134. height: 44rpx;
  135. border-radius: 150rpx;
  136. color: $uni-color-new;
  137. font-size: 24rpx;
  138. background-color: #e5efff;
  139. }
  140. }
  141. }
  142. </style>