<template> <view class="back-content"> <!-- 轮播图 --> <swiper v-if="infoData.backlogPhotoList && infoData.backlogPhotoList.length" class="top-ad-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="600" :circular="true"> <swiper-item v-for="(item,index) in infoData.backlogPhotoList" :key="index"> <div class="swiper-item uni-bg-red"> <u-image mode="scaleToFill" width="750upx" height="400upx" :src="item.photo"></u-image> </div> </swiper-item> </swiper> <view v-else class="noPic"> 暂无图片 </view> <view class="back-text"> <!-- 门店 --> <view class="text-item"> <view class="ellipsis-one"> {{infoData.storeName}} </view> <view class="time "> {{infoData.effectiveEndTime}} 到期 </view> </view> <!-- 创建人 --> <view class="text-item"> <view> <text>创建人</text> <text class="margin-left ellipsis-one">{{infoData.putUserName}}</text> </view> <view class="time"> {{infoData.createTime}} 创建 </view> </view> <!-- 指标 --> <view class="text-item"> <view> 考评指标 </view> <view class="margin-left"> {{infoData.clsName}} </view> </view> <!-- 描述 --> <view class="text-item"> <view> 描述 </view> <view class="margin-left"> {{infoData.problemDesc}} </view> </view> </view> <view class="step-content"> <u-steps :list="numList" direction ="column" :current="0"></u-steps> </view> <view class="footer"> <!-- receiveFlag 接收人/责任人标记 只有处理人可以整改--> <!-- 目前版本不做 --> <!-- <u-button @click="handleSubmit(0)" v-if="infoData.receiveFlag && infoData.receiveFlag == 1 && infoData.statusDictValue=='待整改'" type="primary">整改完成</u-button> --> <!-- putFlag 创建人标记 只有创建人可以审核--> <view v-if="infoData.putFlag && infoData.putFlag == 1 && infoData.statusDictValue=='待审核'" class="check-pending"> <u-button @click="handleSubmit(1)" class="act-btn" type="error">整改不通过</u-button> <u-button @click="handleSubmit(2)" class="act-btn" type="success">整改通过</u-button> </view> <!-- copyFlag 抄送标识 只有抄送人可以评论--> <view v-if="infoData.copyFlag && infoData.copyFlag==1" class="comment-input"> <view class="input-cont"> <textarea auto-height :class="[isFocus?'active':'']" v-model="comment" @focus="sendComment" placeholder="请输入评论..."/> <u-button @click="handleSubmit(3)" class="input-btn" v-if="isFocus" size="mini" type="warning">发送</u-button> </view> <view>整改状态:<text :class="clsStatus(infoData.statusDictValue)">{{infoData.statusDictValue}}</text></view> </view> </view> </view> </template> <script> import { getBackLogDetail, getBackLogRecord, handleBackLog } from '@/api/backLog.js' export default { components: { }, data() { return { backlogId: '', // 待办id infoData:{}, // 详情数据 numList: [], comment: '', // 评论 isFocus: false, // 评论键盘是否弹起 handleType: ['SOLVE','AUDIT_NO','AUDIT_YES','COMMENTS'] //SOLVE("SOLVE", "整改问题"),AUDIT_YES("AUDIT_YES", "审核通过"),AUDIT_NO("AUDIT_NO", "审核不通过"),COMMENTS("COMMENTS", "发表评论"); } }, onLoad(option) { console.log(option.id) this.backlogId = option.id this.getData(option.id) this.getRecordData(option.id) }, methods: { // 获取详情数据 getData (id) { getBackLogDetail({id:id}).then(res=>{ if(res.status==200){ this.infoData = res.data } else { this.toashMsg(res.message) this.infoData = {} } }) }, // 获取进度数据 getRecordData (id) { getBackLogRecord({id:id}).then(res=>{ if(res.status==200){ let arr = [] res.data.map(item=>{ const p = {} const k = '\xa0\xa0\xa0\xa0\xa0\xa0' p.name = item.handleTime + k + item.handleTypeDictValue + k + (item.handleDesc ? item.handleDesc : '') arr.push(p) }) this.numList = arr } else { this.toashMsg(res.message) this.numList = [] } }) }, sendComment (v) { console.log(v,'vvvvvvvvvv') this.isFocus = true }, // 提交处理 handleSubmit(index) { const params = { backlogId: this.backlogId, handleDesc: this.comment, handleType: this.handleType[index] } handleBackLog(params).then(res=>{ if(res.status==200){ this.comment = '' this.isFocus = false this.getRecordData(this.backlogId) } this.toashMsg(res.message) }) }, // 状态颜色处理 clsStatus(status){ if(status == '待审核'){ return 'dsh' } if(status == '待整改'){ return 'dzg' } if(status == '整改完成'){ return 'ywc' } if(status == '已过期'){ return 'ygq' } } } } </script> <style lang="scss" scoped> .back-content { background-color: #eee; height: 100%; display: flex; flex-direction: column; // 轮播图 .top-ad-swiper{ height: 340upx; } .noPic{ width: 750upx; height: 400upx; font-size: 38upx; text-align: center; line-height: 400upx; color: #666; } // 详情内容 .back-text{ background: #ffffff; padding: 10upx 20upx; margin-bottom: 20upx; border-radius: 6upx; box-shadow: 1px 1px 3px #EEEEEE; .text-item{ display: flex; align-items: center; padding: 10upx 10upx; font-size: 28upx; justify-content: space-between; .margin-left{ margin-left: 30upx; } .time{ color: #888; font-size: 26upx; margin-left: 10upx; } > view{ &:first-child{ flex: 1; } } } } // 步骤条 .step-content { padding: 0 20upx; background-color: #fff; flex: 1; overflow-y: scroll; } // 底部按钮 .footer { background-color: #fff; // margin-top: 20upx; .check-pending{ display: flex; .act-btn { width: 50%; } } .comment-input{ width: 100%; padding: 20upx; .input-cont{ width: 100%; background-color: #f4f4f4; border-radius: 10upx; display: flex; justify-content: space-between; align-items: center; padding: 0 20upx; textarea{ padding: 20upx; height: 100%; flex: 1; } .active{ background-color: #fff; margin: 20upx; } .input-btn{ padding: 20upx; height: 60upx; } } view{ margin-top: 20upx; } } .dsh{ color: red; } .dzg{ color: #007AFF; } .ygq { color: #999; } .ywc { color: #10c71e; } } } </style>