task-list-item.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. <template>
  2. <custom-waterfalls-flow :style="{width: widthNum+'rpx'}" img-suffix="?x-oss-process=style/app-w350"
  3. :class="['my-waterfalls' , showTaskStatus ? 'show-task-status' : '']" ref="waterfallsFlowRef" :value="dataList"
  4. imageKey="image" @wapperClick="onWapperClick">
  5. <template v-slot:default="item">
  6. <template v-if="taskTag && showTaskStatus">
  7. <tag class="task-status" :bgColor="taskTag.bgColor" :color="taskTag.color" :tag-name="taskTag.name"
  8. borderRadius="0 20rpx 0 20rpx" />
  9. </template>
  10. <view class="task-item-info">
  11. <!-- ?x-oss-process=style/app-w350 -->
  12. <view class="task-item-name zw-two-row">{{item.title || item.taskTitle}}</view>
  13. <view class="task-item-tag" v-if="item.classifyDictName">
  14. <text class="tag-item">{{item.classifyDictName}}</text>
  15. </view>
  16. <view class="task-integral">
  17. <image class="task-integral-icon" src="../static/integral-icon.png" mode="aspectFit" />
  18. <text class="task-integral-num">{{item.rewardPoints}}积分</text>
  19. </view>
  20. </view>
  21. </template>
  22. </custom-waterfalls-flow>
  23. </template>
  24. <script>
  25. import tag from "./tag.vue"
  26. export default {
  27. components: {
  28. tag
  29. },
  30. props: {
  31. widthNum: {
  32. type: Number,
  33. default: 690
  34. },
  35. dataList: {
  36. type: Array,
  37. default: () => [],
  38. required: true
  39. },
  40. taskTag: {
  41. type: Object,
  42. default: () => null,
  43. },
  44. // 任务空间: false - 任务大厅进入详情; true - 我的任务列表进入
  45. privateTask: {
  46. type: Boolean,
  47. default: false
  48. },
  49. // 任务详情
  50. // taskObj: {
  51. // type: Object,
  52. // default: () => {},
  53. // required: true
  54. // },
  55. // 是否显示任务状态
  56. showTaskStatus: {
  57. type: Boolean,
  58. default: false
  59. },
  60. },
  61. data() {
  62. return {
  63. // this.$refs.waterfallsFlowRef.refresh();
  64. }
  65. },
  66. methods: {
  67. refresh() {
  68. try {
  69. this.$refs.waterfallsFlowRef.refresh();
  70. } catch (e) {
  71. //TODO handle the exception
  72. }
  73. },
  74. // onWapperClick(e){
  75. // console.log('onWapperClick = ' , e)
  76. // },
  77. onWapperClick(info) {
  78. let path = "/pages/task/task-details";
  79. if (this.privateTask) {
  80. const childTask = info;
  81. if (info.taskType === 0) {
  82. // 单任务
  83. if (info.checkStatus === 0) {
  84. // 未提交 - 任务详情
  85. path = `${path}?receiveTaskId=${info.receiveTaskId}`
  86. } else {
  87. // 已提交 - 审核详情
  88. path = `/pages/task/task-audit?receiveTaskId=${info.receiveTaskId}`
  89. }
  90. } else {
  91. // 多任务 - 任务详情
  92. path = `${path}?receiveTaskId=${info.receiveTaskId}`
  93. }
  94. } else {
  95. // 任务大厅,直接进入任务详情
  96. path = `${path}?taskId=${info.taskId}`
  97. }
  98. this.$u.route(path)
  99. }
  100. },
  101. watch: {
  102. dataList: {
  103. handler(newL, oldL) {
  104. if (!newL || newL.length === 0) {
  105. this.refresh()
  106. }
  107. },
  108. deep: true,
  109. immediate: true
  110. }
  111. }
  112. }
  113. </script>
  114. <style lang="scss" scoped>
  115. .my-waterfalls {
  116. // width: 690rpx;
  117. // background-color: hotpink;
  118. display: flex;
  119. justify-content: space-between;
  120. align-items: flex-start;
  121. /deep/ .waterfalls-flow-column {
  122. width: calc(50% - 10rpx) !important;
  123. margin: 0 !important;
  124. &:last-child {
  125. // background-color: greenyellow;
  126. // margin-left: 20rpx !important;
  127. }
  128. .column-value {
  129. margin-bottom: 30rpx !important;
  130. border-radius: 20rpx !important;
  131. }
  132. }
  133. }
  134. .show-task-status {
  135. /deep/ .waterfalls-flow-column {
  136. .column-value {
  137. position: relative;
  138. .task-status {
  139. position: absolute;
  140. right: 0;
  141. top: 0;
  142. }
  143. }
  144. }
  145. }
  146. .task-item-info {
  147. width: 100%;
  148. // background-color: red;
  149. padding: 12rpx 25rpx 28rpx;
  150. .task-item-name {
  151. font-size: 26rpx;
  152. font-family: PingFang SC, PingFang SC-Bold;
  153. font-weight: 700;
  154. color: #1a1a1a;
  155. line-height: 38rpx;
  156. }
  157. .task-item-tag {
  158. padding: 5rpx 0;
  159. .tag-item {
  160. display: inline-block;
  161. padding: 8rpx 15rpx;
  162. background-color: #d4f5fd;
  163. color: #3db9d3;
  164. border-radius: 20rpx 0 20rpx 0;
  165. font-size: 22rpx;
  166. line-height: 1;
  167. }
  168. }
  169. .task-integral {
  170. padding-top: 20rpx;
  171. display: flex;
  172. flex-direction: row;
  173. align-items: center;
  174. .task-integral-icon {
  175. width: 27rpx;
  176. height: 30rpx;
  177. line-height: 0;
  178. }
  179. .task-integral-num {
  180. padding-left: 10rpx;
  181. font-size: 24rpx;
  182. color: #808080;
  183. }
  184. }
  185. }
  186. </style>