|
|
@@ -1,199 +1,211 @@
|
|
|
<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="flex-box flex-v-ce">
|
|
|
- <userImage style="margin-right: 15px;" width="50px" height="50px" :user_name="workDetailData.owner_name" :img_url="workDetailData.owner_img_url"></userImage>
|
|
|
- <div>
|
|
|
- <div style="line-height: 25px;">我悬赏的{{$getTypsName(workDetailData.pt_id)}}任务
|
|
|
- <span v-if="workDetailData.point_config.base_point>0" class="red">+{{workDetailData.point_config.base_point}}</span>
|
|
|
- <span v-else class="green">{{workDetailData.point_config.base_point}}</span>
|
|
|
- {{$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>
|
|
|
+ <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="flex-box flex-v-ce">
|
|
|
+ <userImage
|
|
|
+ style="margin-right: 15px;"
|
|
|
+ width="50px"
|
|
|
+ height="50px"
|
|
|
+ :user_name="workDetailData.owner_name"
|
|
|
+ :img_url="workDetailData.owner_img_url"
|
|
|
+ ></userImage>
|
|
|
+ <div>
|
|
|
+ <div style="line-height: 25px;">
|
|
|
+ 我悬赏的{{ $getTypsName(workDetailData.pt_id) }}任务
|
|
|
+ <span v-if="workDetailData.point_config.base_point > 0" class="red">+{{ workDetailData.point_config.base_point }}</span>
|
|
|
+ <span v-else class="green">{{ workDetailData.point_config.base_point }}</span>
|
|
|
+ {{ $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">{{workDetailData.point_config.base_point}}{{$getTypsName(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.point_config.ahead_award_point">
|
|
|
+ <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">{{ workDetailData.point_config.base_point }}{{ $getTypsName(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.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" v-if="workDetailData.department_info.length>0">
|
|
|
- <span v-for="(item,index) in workDetailData.department_info" :key="index">{{item.name}},</span>
|
|
|
- </div>
|
|
|
- <div class="content_text" v-else>全公司</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>
|
|
|
+ <li class="flex-box" v-if="workDetailData.department_info">
|
|
|
+ <div class="label">可见范围</div>
|
|
|
+ <div class="content_text" v-if="workDetailData.department_info.length > 0">
|
|
|
+ <span v-for="(item, index) in workDetailData.department_info" :key="index">{{ item.name }},</span>
|
|
|
+ </div>
|
|
|
+ <div class="content_text" v-else>全公司</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,//打开抽屉
|
|
|
+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:''}
|
|
|
- },
|
|
|
- }
|
|
|
- },
|
|
|
- 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.$axios('get','/api/integral/task',data).then(res => {
|
|
|
+ loading: false,
|
|
|
+ workDetailData: {
|
|
|
+ point_config: { base_point: '' }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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.$axios('get', '/api/integral/task', data)
|
|
|
+ .then(res => {
|
|
|
if (res.data.code == 1) {
|
|
|
- self.workDetailData = res.data.data
|
|
|
- }
|
|
|
- }).finally(()=>{
|
|
|
- self.loading = false
|
|
|
- })
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
+ self.workDetailData = res.data.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ 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
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .fontColorF{
|
|
|
- color:#909399;
|
|
|
- }
|
|
|
- .yellow{
|
|
|
- color: #E6A23C;
|
|
|
- }
|
|
|
- .details_content {
|
|
|
- padding: 20px;
|
|
|
- height: calc(100vh - 60px);
|
|
|
- overflow: auto;
|
|
|
- .row_title {
|
|
|
- position: relative;
|
|
|
- margin: 0 0 20px 0;
|
|
|
- padding-top: 12px;
|
|
|
- font-size: 16px;
|
|
|
- color: #303133;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
- .row_title:before {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- content: ' ';
|
|
|
- width: 100%;
|
|
|
- border-top: 1px #f8f8f8 solid;
|
|
|
- }
|
|
|
- .el-row {
|
|
|
- margin-bottom: 10px;
|
|
|
- font-size: 14px;
|
|
|
- .el-col-4 {
|
|
|
- color: #606266;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .details_title {
|
|
|
- font-size: 18px;
|
|
|
- padding: 20px;
|
|
|
- border-bottom: 1px #efefef solid;
|
|
|
- }
|
|
|
+.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;
|
|
|
+}
|
|
|
+.details_content {
|
|
|
+ padding: 20px;
|
|
|
+ height: calc(100vh - 60px);
|
|
|
+ overflow: auto;
|
|
|
+ .row_title {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 0 20px 0;
|
|
|
+ padding-top: 12px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #303133;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .row_title:before {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ content: ' ';
|
|
|
+ width: 100%;
|
|
|
+ border-top: 1px #f8f8f8 solid;
|
|
|
+ }
|
|
|
+ .el-row {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ .el-col-4 {
|
|
|
+ color: #606266;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.details_title {
|
|
|
+ font-size: 18px;
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: 1px #efefef solid;
|
|
|
+}
|
|
|
</style>
|
347617796@qq.com