gdy_pc_8/src/point/views/common/rewardTaskDetailsPopup.vue

<template>
  <div>
    <!-- 悬赏任务详情弹窗 -->
    <el-drawer :visible.sync="Delay_to_open" :with-header="false" :size="'500px'" :before-close="handleClose" :custom-class="'drawer_details'">
      <div class="details_title">{{ title }}</div>
      <div class="details_content" v-if="workDetailData" v-loading="loading">
        <el-row>
          <el-col :span="24">
            <div class="">
              <userImage
                style="margin-right: 15px;"
                width="50px"
                height="50px"
                class="fl"
                :id="workDetailData.owner_id"
                :user_name="workDetailData.owner_name"
                :img_url="workDetailData.owner_img_url"
              ></userImage>
              <div>
                <div style="line-height: 25px;">
                  我悬赏的{{ $getTypsName(workDetailData.pt_id) }}任务 {{ workDetailData.point_config.base_point }}{{ $getTypsName(workDetailData.pt_id) }}
                </div>
                <div style="color: #909399; line-height: 25px;">
                  <b>{{ workDetailData.receiver_name }}</b>
                  {{ workDetailData.status_mark }}
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <ul>
          <li class="flex-box">
            <div class="label">任务内容</div>
            <div class="content_text">{{ workDetailData.task_name }}</div>
          </li>
          <li class="flex-box" v-if="workDetailData.status == 2 && workDetailData.receiver_id != 0">
            <div class="label">领取人</div>
            <div class="content_text">{{ workDetailData.receiver_name }}</div>
          </li>
          <li class="flex-box" v-if="workDetailData.status == 3 && workDetailData.receiver_id != 0">
            <div class="label">完成人</div>
            <div class="content_text">{{ workDetailData.receiver_name }}</div>
          </li>
          <li class="flex-box" v-if="workDetailData.task_remark">
            <div class="label">任务备注</div>
            <div class="content_text">{{ workDetailData.task_remark }}</div>
          </li>
          <li class="flex-box" v-if="workDetailData.point_config">
            <div class="label">任务积分</div>
            <div class="content_text orange">{{ workDetailData.point_config.base_point }}{{ $getTypsName(workDetailData.pt_id) }}</div>
          </li>
          <li class="flex-box">
            <div class="label">发布时间</div>
            <div class="content_text">{{ workDetailData.create_time }}</div>
          </li>
          <li class="flex-box">
            <div class="label">截止时间</div>
            <div class="content_text">{{ workDetailData.end_time }}</div>
          </li>
					<li class="flex-box" v-if="workDetailData.point_config">
						<div class="label">逾期扣分</div>
						<div class="content_text">{{ workDetailData.point_config.timeout_deduction_point }}/天</div>
					</li>
					<li class="flex-box" v-if="workDetailData.point_config.ahead_award_point">
						<div class="label">提前奖分</div>
						<div class="content_text">{{ workDetailData.point_config.ahead_award_point }}/天</div>
					</li>
          <li class="flex-box" v-if="workDetailData.department_info">
            <div class="label">可见范围</div>
            <div class="content_text">
              <span v-for="(item, index) in workDetailData.department_info">{{ item.name }}，</span>
            </div>
          </li>
          <li class="flex-box">
            <div class="label">任务类型</div>
            <div class="content_text">{{ workDetailData.source_type_mark }}</div>
          </li>
        </ul>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'rewardTaskDetailsPopup',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      Delay_to_open: false, //打开抽屉
      loading: false,
      workDetailData: {
        point_config: { base_point: '' }
      }
    };
  },
  mounted() {
    this.getData();
    this.Delay_to_open = this.visible; //更换打开抽屉时机，避免打开两次
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.$emit('update:visible', false);
    },
    // 获取数据
    getData() {
      let self = this;
      self.loading = true;
      let data = { task_id: this.id };
      self
        .$axiosUser('get', '/api/pro/integral/task', data)
        .then(res => {
          if (res.data.code == 1) {
            self.workDetailData = res.data.data;
          }
          self.loading = false;
        })
        .catch(e => {
          self.$message.error(e.data.msg);
          self.loading = false;
        });
    }
  }
};
</script>
<style lang="scss" scoped="scoped">
.details_content {
  & .d_userMessage {
    margin-left: 10px;
  }
  & .d_userMessage div:nth-child(1) {
    font-size: 16px;
    margin-bottom: 8px;
  }
  & .d_userMessage div:nth-child(2) {
    font-size: 12px;
    color: #909399;
  }
  & .d_progress {
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 10px;
  }
  & ul {
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
    & li {
      padding: 6px 0;
    }
    & .label {
      width: 80px;
      text-align: left;
      color: #909399;
    }
    & .content_text {
      flex: 1;
    }
  }
}

</style>