FE-V2-XCX/pages_manage/workbench/receiveCasuallyPat/casuallyPatInfo.vue

<!-- 收到随手拍详情 -->
<template>
    <view id="casuallyPatInfo">
        <view class="big-box">
			<view class="title-box">
			    <view>{{newData.handleStatus == 0?'问题发现人：':'问题反馈人：'}}</view>
			    <view>{{newData.applyName}}</view>
			</view>
			<view class="title-box">
			    <view>{{newData.handleStatus == 0?'发现时间：':'反馈时间：'}}</view>
			    <view>{{newData.createTimeStr2}}</view>
			</view>
            <view class="title-box">
                <view>实验室名称：</view>
                <view>{{newData.subName}}</view>
            </view>
            <view class="title-box">
                <view>描述：</view>
                <view>{{newData.describe}}</view>
            </view>
            <view class="img-max-box">
                <view class="img-title-box">现场照片：</view>
                <view class="img-for-max-box">
                    <img :src="baseUrl+img" v-for="(img,index) in newData.imgList" :key="index" @click="clickImg(img)">
                </view>
            </view>
			<view class="tip"></view>
			<view class="title-box" v-if="newData.handleStatus == 1">
			    <view>处理人：</view>
			    <view>{{newData.handleName}}</view>
			</view>
			<view class="title-box" v-if="newData.handleStatus == 1">
			    <view>处理时间：</view>
			    <view>{{newData.handleDescribe}}</view>
			</view>
			<view class="input-box">
			    <view class="left-box">处理描述：</view>
			    <textarea :disabled="newData.handleStatus==1" v-model="formData.handleDescribe" maxlength="200" placeholder="请输入描述"></textarea>
			</view>
			<view class="up-img-box">
			    <view class="title-view">处理后照片:</view>
			    <view class="img-max-box">
			        <view class="img-box" v-for="(item,index) in formData.handleImg" :key="index">
			            <img class="img-data" :src="baseUrl+item" @click="clickImg(item)">
			            <img class="position-img" src="@/images/icon_ssp_closure.png" v-if="newData.handleStatus==0" @click="delImg(index)">
			        </view>
			        <img class="add-button" src="@/images/icon_07.png" @click="selectImage" v-if="newData.handleStatus==0">
			    </view>
			</view>
        </view>
        <view class="bottom-button-box" :class="newData.handleStatus == 0?'colorA':'colorB'" @click="clickButton">{{newData.handleStatus == 0?'处理':'已处理'}}</view>
    </view>
</template>

<script>
    import { getPhotonote,editPhotoNote,groupListRead} from '@/api/index.js'
	import { config } from '@/api/request/config.js'
    export default {
        data() {
            return {
				baseUrl:config.base_url,
                itemData:{},
                newData:{},
				formData:{
					handleDescribe:'',
					handleImg:[],
				},
            }
        },
        onLoad(option) {
            this.itemData = JSON.parse(decodeURIComponent(option.item));
            console.log("this.itemData",this.itemData)
		
            this.getPhotonote();
			if(this.itemData.isApply==2){
				this.readNnreadFun();
			}
			
        },
        methods: {
			//已读未读
		
			async readNnreadFun() {
			    let self = this;
			    const {data} = await groupListRead({messageId:this.itemData.messageId})
			    if(data.code==200){
					console.log(data.data.dynamicId)
					self.itemData.id=data.data.dynamicId
					console.log(self.itemData.id)
					 this.getPhotonote();
			    }
			},
			    
            clickButton(){
                let self = this;
                if(self.newData.handleStatus == 0){
                    uni.showModal({
                        content: '确认处理吗?',
                        cancelColor:"#999",
                        confirmColor:"#0183FA",
                        success: function (res) {
                            if (res.confirm) {
                                self.editPhotoNote();
                                console.log('用户点击确定');
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                }
            },
            //确认处理随手拍
            async editPhotoNote(){
                let obj = {
                  id:this.itemData.id,
                };
                const {data} = await editPhotoNote(
                    {
                        id:this.itemData.id,
						handleDescribe:this.formData.handleDescribe,
						handleImg:this.formData.handleImg.join(','),
                    }
                );
                if(data.code == 200){
                    uni.showToast({
                        title: '处理成功',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    setTimeout(function(){
                        uni.navigateBack();
                    },2000);
                }
            },
            //获取管理员工作台随手拍数量数据
            async getPhotonote(){
                const {data} = await getPhotonote(this.itemData.id);
                if(data.code == 200){
                    this.newData = data.data;
					if(data.data.handleImg){
						this.formData.handleDescribe=data.data.handleDescribe;
						this.formData.handleImg=data.data.handleImg.split(',');
					}
					
                    this.newData.imgList = data.data.imgUrl.split(",");
					
                }
            },
			// 图片上传
			selectImage(index) {
			    let self = this;
			    if(self.formData.handleImg.length>4){
			        uni.showToast({
			            title: '最多上传5张图片',
			            icon:"none",
			            mask:true,
			            duration: 2000
			        });
			        return
			    }
			    wx.chooseImage({
			        count: 1,
			        sizeType: ["original", "compressed"],
			        sourceType: ["album", "camera"],
			        success: function(res) {
						console.log(res)
			            let tempFilePaths = res.tempFilePaths[0];
			            self.uploadImg(tempFilePaths,index);
			        }
			    });
			},
			async uploadImg(tempFilePaths,index){
			    var self = this;
			    uni.showLoading({
			        title: '上传中',
			        mask: true
			    });
			    uni.uploadFile({
			        url: config.base_url+'/file/upload', //仅为示例，非真实的接口地址
			        header:{'Authorization':uni.getStorageSync('token')},
			        filePath: tempFilePaths,
			        name: 'file',
			        formData: {
			            'user': 'test'
			        },
			        success: (uploadFileRes) => {
			            let res = JSON.parse(uploadFileRes.data);
						if(res.code == 200){
							self.formData.handleImg.push(res.data.url);
			              
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
			        },
			        fail: err => {},
			        complete: () => {
			            uni.hideLoading()
			        }
			    });
			},
			//删除图片
			delImg(index){
			    this.formData.handleImg.splice(index,1);
			},
            clickImg(url) {
                wx.previewImage({
                    urls: [this.baseUrl+url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
                    current: '', // 当前显示图片的http链接，默认是第一个
                    success: function(res) {},
                    fail: function(res) {},
                    complete: function(res) {},
                })
            }
        }
    }
</script>

<style lang="stylus" scoped>
    #casuallyPatInfo{
        height:100%;
        overflow-y:scroll;
        .big-box{
            overflow hidden
            background #fff
            margin:20rpx;
            border-radius:20rpx;
            padding:20rpx;
            .title-box{
                display flex
                view{
                    line-height:60rpx;
                }
                view:nth-child(1){
                    width:180rpx;
                    font-size:30rpx;
                    color:#999 ;
                }
                view:nth-child(2){
                    font-size:28rpx;
                    flex:1;
                    color:#333333;
                }
            }
            .img-max-box{
                display flex;
				flex-wrap: wrap;
                .img-title-box{
                    width:150rpx;
                    line-height:60rpx;
                    font-size:30rpx;
                    color:#999 ;
                }
                .img-for-max-box{
                    flex:1;
                    margin-top:20rpx;
                    img{
                        height:150rpx;
                        width:150rpx;
                        display inline-block
                        margin: 0 20rpx 20rpx 0;
                    }
                }
            }
             .tip{
				 width: 662rpx;
				 height: 1rpx;
				 border-top :1rpx dashed #e0e0e0;
				 padding-bottom :30rpx;
				 box-sizing :border-box;
			 }
			 .input-box{
                 height:auto;
                 //display flex;
			
                 
                 .left-box{
                     width:180rpx;
                     line-height:80rpx;
                     font-size: 30rpx;
                     color:#333;
                 }
                 textarea{
                     width:620rpx;
                     border-radius: 10rpx;
                     border:2rpx solid #E0E0E0;
                     height:206rpx;
                     padding:20rpx;
                     font-size: 24rpx;
                     color: #333;
                 }
             }
			 .up-img-box{
            display flex
            margin-top:30rpx;
            .title-view{
                width:180rpx;
                line-height:80rpx;
                font-size: 30rpx;
                color:#333;
            }
            .img-max-box{
                width:510rpx;
                .img-box{
                    display inline-block
                    height:140rpx;
                    width:140rpx;
                    position relative
                    margin:0 20rpx 20rpx 0;
                    .img-data{
                        height:140rpx;
                        width:140rpx;
                    }
                    .position-img{
                        position absolute
                        right:0;
                        top:0;
                        width:36rpx;
                        height:36rpx;
                    }
                }
                .add-button{
                    display inline-block
                    height:150rpx;
                    width:150rpx;
                }
            }
        }
                
		}
        .bottom-button-box{
            width: 550rpx;
            height: 80rpx;
            border-radius: 20rpx;
            font-size:30rpx;
            line-height:80rpx;
            margin:120rpx auto 40rpx;
            text-align center;
        }
        .colorA{
            color: #ffffff;
            background:#0183fa;
        }
        .colorB{
            color:#333;
            background: #E0E0E0;
        }
    }
</style>