123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204 |
- <template>
- <custom-waterfalls-flow :style="{width: widthNum+'rpx'}" img-suffix="?x-oss-process=style/app-w350"
- :class="['my-waterfalls' , showTaskStatus ? 'show-task-status' : '']" ref="waterfallsFlowRef" :value="dataList"
- imageKey="image" @wapperClick="onWapperClick">
- <template v-slot:default="item">
- <template v-if="taskTag && showTaskStatus">
- <tag class="task-status" :bgColor="taskTag.bgColor" :color="taskTag.color" :tag-name="taskTag.name"
- borderRadius="0 20rpx 0 20rpx" />
- </template>
- <view class="task-item-info">
- <!-- ?x-oss-process=style/app-w350 -->
- <view class="task-item-name zw-two-row">{{item.title || item.taskTitle}}</view>
- <view class="task-item-tag" v-if="item.classifyDictName">
- <text class="tag-item">{{item.classifyDictName}}</text>
- </view>
- <view class="task-integral">
- <image class="task-integral-icon" src="../static/integral-icon.png" mode="aspectFit" />
- <text class="task-integral-num">{{item.rewardPoints}}积分</text>
- </view>
- </view>
- </template>
- </custom-waterfalls-flow>
- </template>
- <script>
- import tag from "./tag.vue"
- export default {
- components: {
- tag
- },
- props: {
- widthNum: {
- type: Number,
- default: 690
- },
- dataList: {
- type: Array,
- default: () => [],
- required: true
- },
- taskTag: {
- type: Object,
- default: () => null,
- },
- // 任务空间: false - 任务大厅进入详情; true - 我的任务列表进入
- privateTask: {
- type: Boolean,
- default: false
- },
- // 任务详情
- // taskObj: {
- // type: Object,
- // default: () => {},
- // required: true
- // },
- // 是否显示任务状态
- showTaskStatus: {
- type: Boolean,
- default: false
- },
- },
- data() {
- return {
- // this.$refs.waterfallsFlowRef.refresh();
- }
- },
- methods: {
- refresh() {
- try {
- this.$refs.waterfallsFlowRef.refresh();
- } catch (e) {
- //TODO handle the exception
- }
- },
- // onWapperClick(e){
- // console.log('onWapperClick = ' , e)
- // },
- onWapperClick(info) {
- let path = "/pages/task/task-details";
- if (this.privateTask) {
- const childTask = info;
- if (info.taskType === 0) {
- // 单任务
- if (info.checkStatus === 0) {
- // 未提交 - 任务详情
- path = `${path}?receiveTaskId=${info.receiveTaskId}`
- } else {
- // 已提交 - 审核详情
- path = `/pages/task/task-audit?receiveTaskId=${info.receiveTaskId}`
- }
- } else {
- // 多任务 - 任务详情
- path = `${path}?receiveTaskId=${info.receiveTaskId}`
- }
- } else {
- // 任务大厅,直接进入任务详情
- path = `${path}?taskId=${info.taskId}`
- }
- this.$u.route(path)
- }
- },
- watch: {
- dataList: {
- handler(newL, oldL) {
- if (!newL || newL.length === 0) {
- this.refresh()
- }
- },
- deep: true,
- immediate: true
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .my-waterfalls {
- // width: 690rpx;
- // background-color: hotpink;
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- /deep/ .waterfalls-flow-column {
- width: calc(50% - 10rpx) !important;
- margin: 0 !important;
- &:last-child {
- // background-color: greenyellow;
- // margin-left: 20rpx !important;
- }
- .column-value {
- margin-bottom: 30rpx !important;
- border-radius: 20rpx !important;
- }
- }
- }
- .show-task-status {
- /deep/ .waterfalls-flow-column {
- .column-value {
- position: relative;
- .task-status {
- position: absolute;
- right: 0;
- top: 0;
- }
- }
- }
- }
- .task-item-info {
- width: 100%;
- // background-color: red;
- padding: 12rpx 25rpx 28rpx;
- .task-item-name {
- font-size: 26rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: 700;
- color: #1a1a1a;
- line-height: 38rpx;
- }
- .task-item-tag {
- padding: 5rpx 0;
- .tag-item {
- display: inline-block;
- padding: 8rpx 15rpx;
- background-color: #d4f5fd;
- color: #3db9d3;
- border-radius: 20rpx 0 20rpx 0;
- font-size: 22rpx;
- line-height: 1;
- }
- }
- .task-integral {
- padding-top: 20rpx;
- display: flex;
- flex-direction: row;
- align-items: center;
- .task-integral-icon {
- width: 27rpx;
- height: 30rpx;
- line-height: 0;
- }
- .task-integral-num {
- padding-left: 10rpx;
- font-size: 24rpx;
- color: #808080;
- }
- }
- }
- </style>
|