gdy_qywx_pc/src/views/common/rewardTaskDetailsPopup.vue

<template>
  <div>
    <!-- 悬赏任务详情弹窗 -->
    <el-drawer :modal-append-to-body="false" :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;">我悬赏的{{get_point_name(workDetailData.pt_id)}}任务    {{workDetailData.point_config.base_point}}{{get_point_name(workDetailData.pt_id)}}</div>
                <div style="color: #909399; line-height: 25px;"><b><WWOpenData type="userName" :openid="workDetailData.receiver_name"></WWOpenData></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"><WWOpenData type="userName" :openid="workDetailData.receiver_name"></WWOpenData></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 yellow">{{workDetailData.point_config.base_point}}{{get_point_name(workDetailData.pt_id)}}</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.department_info" >
            <div class="label">可见范围</div>
            <div class="content_text">
              <span v-for="(item,index) in workDetailData.department_info" :key="index">
                <WWOpenData type="departmentName" :openid="item.name"></WWOpenData><span v-if="(workDetailData.department_info.length-index)>1">,</span>
              </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: 'repeatTaskDetailsPopup',
    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:''}
        },
        point_types: JSON.parse(localStorage.getItem('SET_POINT_TYPES'))
      }
    },
    components: {},
    watch:{},
    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.$http('get','/api/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
        })
      },
      // 获取积分名称
      get_point_name(id){
        let name = ''
        this.point_types.forEach(element => {
          if (element.id == id) {
            name = element.name
          }
        });
        return name
      },
    }
  }
</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
      }
    }
  }
  .fontColorF{
    color:#909399;
  }
  .yellow{
    color: #E6A23C;
  }
</style>