123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190 |
- <template>
- <view class="back-content">
- <!-- 轮播图 -->
- <swiper class="top-ad-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="600" :circular="true">
- <swiper-item v-if="infoData.backlogPhotoList && infoData.backlogPhotoList.length" v-for="(item,index) in infoData.backlogPhotoList" :key="index">
- <div class="swiper-item uni-bg-red">
- <!-- <image class="swiper-item-imgse" :fade-show='true' :src="item.photo"></image> -->
- <u-image mode="scaleToFill" width="750upx" height="400upx" :src="item.photo"></u-image>
- </div>
- </swiper-item>
- <u-image v-else mode="scaleToFill" width="750upx" height="400upx" src="/static/noPic.jpg"></u-image>
- </swiper>
- <view class="back-text">
- <!-- 门店 -->
- <view class="text-item">
- {{infoData.storeName}}
- </view>
- <!-- 处理人 -->
- <view class="text-item">
- <view>
- <text>处理人</text>
- <text class="margin-left ellipsis-one">张三丰</text>
- </view>
- <view class="time ">
- {{infoData.effectiveEndTime}} 到期
- </view>
- </view>
- <!-- 创建人 -->
- <view class="text-item">
- <view>
- <text>创建人</text>
- <text class="margin-left ellipsis-one">张三丰</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">
- <u-button v-if="infoData.status=='待整改'" type="primary">整改完成</u-button>
- <view v-else-if="infoData.status=='待审核'" class="check-pending">
- <u-button class="act-btn" type="error">整改不通过</u-button>
- <u-button class="act-btn" type="success">整改通过</u-button>
- </view>
- <view v-else class="comment-input">
- <input type="text" v-model="comment" @confirm="sendComment" placeholder="请输入评论..."/>
- <view>整改状态:{{infoData.status}}</view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import { getBackLogDetail } from '@/api/backLog.js'
- export default {
- components: {
- },
- data() {
- return {
- infoData:{}, // 详情数据
- numList: [
- {
- name: '2020-08-09 \xa0\xa0\xa0\xa0\审核问题 \xa0\xa0\xa0\xa0\审核通过',
- }, {
- name: '2020-08-09 审核问题 审核不通过'
- }, {
- name: '2020-08-09 \xa0\xa0\xa0\xa0\创建问题 \xa0\xa0\xa0\xa0\ 抄送 \xa0\xa0\xa0\xa0\所有人'
- },
- ],
- comment: '' // 评论
- }
- },
- onLoad(option) {
- console.log(option.id)
- this.getData(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 = {}
- }
- })
- },
- sendComment (v) {
-
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .back-content {
- background-color: #eee;
- height: 100%;
- display: flex;
- flex-direction: column;
- // 轮播图
- .top-ad-swiper{
- height: 340upx;
- }
- .swiper-item-imgse{
- width: 750upx;
- height: 340upx;
- }
- // 详情内容
- .back-text{
- background: #ffffff;
- padding: 10upx 20upx;
- margin: 20upx 0;
- 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{
- background-color: #f4f4f4;
- padding: 20upx;
- border-radius: 10upx;
- }
- view{
- margin-top: 20upx;
- }
- }
- }
- }
- </style>
|