v3-lab-xcx/pages_basics/photoInspection.vue

<!-- 拍照检查 -->
<template>
    <view id="photoInspection">
		<view class="photInspection-max">
			<view class="picker-max-box">
				<view class="picker-title-box">
					<view>*</view>
					<view>实验室:</view>
				</view>
				<picker @change="buttonChange"
					:range-key="'subjectName'" :value="subjectId" :range="buttonArray">
					<view class="picker-min-box">
						<view>{{buttonArrayIndex?buttonArray[buttonArrayIndex].subjectName:'请选择'}}</view>
						<img src="@/images/basicsModules/icon_06.png">
					</view>
				</picker>
			</view>
			<!-- 有图片 -->
			<view class="photo-b" v-if="pageType==1">
				<view class="photo-max-box">
				    <view class="photo-button" v-if="!newData.subUrl" @click="upImg('subUrl')">+ 添加</view>
				    <img :src="baseUrl+newData.subUrl" v-else @click="upImg('subUrl')">
				    <view class="photo-title">{{newData.sub}}</view>
				</view>
				<view class="photo-max-box">
				    <view class="photo-button" v-if="!newData.garbageUrl" @click="upImg('garbageUrl')">+ 添加</view>
				    <img :src="baseUrl+newData.garbageUrl" v-else @click="upImg('garbageUrl')">
				    <view class="photo-title">{{newData.garbage}}</view>
				</view>
				<view class="photo-max-box">
				    <view class="photo-button" v-if="!newData.dangerousUrl" @click="upImg('dangerousUrl')">+ 添加</view>
				    <img :src="baseUrl+newData.dangerousUrl" v-else @click="upImg('dangerousUrl')">
				    <view class="photo-title">{{newData.dangerous}}</view>
				</view>
				<view class="photo-max-box">
				    <view class="photo-button" v-if="!newData.sourceRiskUrl" @click="upImg('sourceRiskUrl')">+ 添加</view>
				    <img :src="baseUrl+newData.sourceRiskUrl" v-else @click="upImg('sourceRiskUrl')">
				    <view class="photo-title">{{newData.sourceRisk}}</view>
				</view>
			</view>
			<!-- 无图片 -->
			<view class="photo-b" v-if="pageType==2">
				<view v-for="(item,index) in photoList"  @click="photoClick(item)" class="list-li" :class="!item.type?'color-A':'color-B'">
					<view>{{item.name}}</view>
					<img v-if="item.type" :src="item.icon">
				</view>
			</view>
			
		</view>
		<view class="up-data-button" @click="upButton">离开</view>
		<helang-compress ref="helangCompress"></helang-compress>
    </view>
	
</template>

<script>
	import helangCompress from './component/compress.vue';
    import { config } from '@/api/request/config.js'
    import { addPhotoInspection,outSubjectList } from '@/api/apiDemo/index.js'
    export default {
		components: {
			helangCompress
		},
        data() {
            return {
				baseUrl:config.base_url,
                newData:{},
				buttonArray:[],
				buttonArrayIndex:"",
				pageType:2,
				photoList:[
					{type:false,name:'实验室照片',icon:require('@/images/basicsModules/icon_pzjc_xz.png')},
					{type:false,name:'垃圾桶清理后照片',icon:require('@/images/basicsModules/icon_pzjc_xz.png')},
					],
				params: {
					maxSize: 400,
					fileType: 'png',
					quality: 0.85,
					minSize: 320
				}

            }
        },
        onLoad(option) {
			this.newData = JSON.parse(decodeURIComponent(option.newData));
			console.log(this.newData)
        },
        onShow(){
			this.outSubjectList();
        },
        methods: {
			photoClick(item){
				item.type=!item.type;
			},
			buttonChange(e){
				console.log("e",e.mp.detail.value);
				this.buttonArrayIndex = e.mp.detail.value;
			},
			async outSubjectList(){
				const {data} = await outSubjectList();
				if(data.code == 200){
					this.buttonArray = data.data;
				}
			},
            upButton(){
                let self = this;
				if(!this.buttonArrayIndex){
					uni.showToast({
						title: '请选择实验室',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.newData.subUrl){
					uni.showToast({
						title: '请上传实验室照片',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				if(!this.newData.garbageUrl){
					uni.showToast({
						title: '请上传垃圾桶清理后照片',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
                uni.showModal({
                    // title: '确认要退出吗?',
                    content: '确认提交吗?',
                    cancelColor:"#999",
                    confirmColor:"#0183FA",
                    success: function (res) {
                        if (res.confirm) {
                            self.addPhotoInspection();
                            console.log('用户点击确定');
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            },
            //拍照检查提交
            async addPhotoInspection(){
				let obj = {
					subjectId:this.buttonArray[this.buttonArrayIndex].subjectId,
					subUrl:this.newData.subUrl,
					garbageUrl:this.newData.garbageUrl,
					dangerousUrl:this.newData.dangerousUrl,
					sourceRiskUrl:this.newData.sourceRiskUrl,
				}
				if(this.newData.id){
					obj.id = this.newData.id
				}
                const {data} = await addPhotoInspection(obj);
                if(data.code == 200){
                    uni.showToast({
                        title: '提交成功',
                        icon:"none",
                        mask:true,
                        duration: 2000
                    });
                    setTimeout(function(){
                        uni.navigateBack();
                    },2000);
                }
            },
            upImg(name){
                let self = this;
                wx.chooseImage({
                    count: 1,
                    sizeType: ["original", "compressed"],
                    sourceType: ["album", "camera"],
                    success: function(res) {
                        //let tempFilePaths = res.tempFilePaths[0];
                        //self.uploadImg(tempFilePaths,name);
						self.compress(res.tempFilePaths,name);
                    }
                });
            },
			//图片压缩
			compress(tempFilePaths,name) {
				 let self = this;
				uni.showLoading({
					title: '压缩中',
					mask: true
				});
			
				this.$refs.helangCompress.compress({
					src: tempFilePaths[0],
					maxSize: this.params.maxSize,
					fileType: this.params.fileType,
					quality: this.params.quality,
					minSize: this.params.minSize
				}).then((res) => {
					uni.hideLoading();
					console.log('压缩成功')
					self.uploadImg(res,name);
					
				}).catch((err) => {
					uni.hideLoading();
					uni.showToast({
						title: "压缩失败,请重新上传",
						icon: "none"
					})
				})
			},
            async uploadImg(tempFilePaths,name){
                var self = this;
                uni.showLoading({
                    title: '上传中',
                    mask: true
                });
                uni.uploadFile({
                    url: config.base_url+'/base/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.$set(self.newData,name,res.data.url);
							self.$set(self.newData,"real"+name,res.data.url);
						}else{
							uni.showToast({
								title: res.msg,
								icon:"none",
								mask:true,
								duration: 2000
							});
						}
                    },
                    fail: err => {},
                    complete: () => {
                        uni.hideLoading()
                    }
                });
            },
        }
    }
</script>

<style lang="stylus" scoped>
    #photoInspection{
        height:100%;
        width:100%;
		display:flex;
		flex-direction:column;
		.photInspection-max{
			flex:1;
			padding-bottom:40rpx;
			.photo-b{
				overflow-y:scroll;
				position: absolute;
				top: 140rpx;
				.photo-max-box{
				    width:702rpx;
				    height:422rpx;
				    border-radius: 20rpx;
				    background: #FFFFFF;
				    border:4rpx dashed #E0E0E0;
				    margin:20rpx 20rpx 0;
				    .photo-button{
				        height:336rpx;
				        width:702rpx;
				        color: #0183FA;
				        font-size:30rpx;
				        line-height 336rpx
				        text-align center
				    }
				    img{
				        height:336rpx;
				        width:702rpx;
				        border-top-left-radius :20rpx
				        border-top-right-radius :20rpx
				    }
				    .photo-title{
				        border-top:4rpx dashed #E0E0E0;
				        line-height:82rpx;
				        color: #333333;
				        font-size: 30rpx;
				        padding-left:28rpx;
				    }
				}
			}
			
			.null-view-box{
			    text-align center;
			    line-height:100rpx;
			    color:#999;
			    font-size:26rpx;
			}
			.photo-b{
				padding-bottom: 140rpx;
			}
			.picker-max-box{
				width: 100%;
				padding:20rpx 0;
				display:flex;
				background: #FFFFFF;
				position: fixed;
				z-index: 100;
				.picker-title-box{
					padding:0 20rpx;
					display flex
					view{
						line-height:80rpx;
						font-size:28rpx;
					}
					view:nth-child(1){
						color:red;
					}
					view:nth-child(2){

					}
					view:nth-child(3){
						color:#999;
					}
				}
				.picker-min-box{
					display flex;
					height:80rpx;
					width:556rpx;
					border:1rpx solid #a2a2a2;
					border-radius:10rpx;
					margin:0 20rpx;
					view{
						flex:1;
						line-height:80rpx;
						padding:0 20rpx;
						color:#999;
						font-size:28rpx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					img{
						width:24rpx;
						height:12rpx;
						margin:35rpx 23rpx;
					}
				}
			}
			.list-li{
				width: 690rpx;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				justify-content: space-between;
				margin: 20rpx 20rpx 0;
				>view{
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					line-height: 100rpx;
					text-align: left;
					padding-left: 28rpx;
				}
				>img{
					width: 60rpx;
					height: 60rpx;
					margin-top: 44rpx;
				}
				
			}
			.color-A{
				border: 2rpx dotted #E0E0E0;
			}
			.color-B{
				border: 2rpx dotted #0183FA;
			}
		}
		.up-data-button{
			width: 750rpx;
			height: 120rpx;
			background: #0183FA;
			line-height:120rpx;
			text-align center
			color:#fff;
			font-size: 30rpx;
			position: fixed;
			bottom: 0;
		}
    }
</style>