fude/pages/index/addRecord.vue

<template>
	<view class="addRecord">
		<navbar title="添加记录" :isCenter="true" :back="true"></navbar>
		<view style="border-top:1px solid #EAEAEA;padding:40rpx 44rpx;">
			<u--form
				labelPosition="left"
				:model="form"
				:borderBottom="false"
				:rules="rules"
				ref="uForm"
				labelWidth="70"
				
			>
				<u-form-item
					label="验收项:"
					prop="form.acceptance"
					@click="showoption = true;"
					ref="item1"
					:borderBottom="false"
				>
					<view class="selectStyle">
						<u--input
							v-model="form.acceptance"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择"
							border="none"
						></u--input>
						<u-icon
								slot="right"
								name="arrow-right"
						></u-icon>
					</view>
				</u-form-item>
			<!-- 	<u-form-item
					:borderBottom="false"
					label="调试记录:"
					prop="record.record"
					
					ref="item1"
				>
					<u--textarea v-model="form.record" placeholder="请输入内容" ></u--textarea>
					
				</u-form-item> -->
				<u-form-item
					label="上传图片:"
					ref="item1"
					:borderBottom="false"
				>
					<u-upload
						:fileList="finishImageList"
						:capture="['camera']"
						:previewFullImage="true" 
						@afterRead="afterRead"
						:maxCount="6" width="80" height="80"
						@delete="deletePic"
						name="1"
						multiple
					></u-upload>
				</u-form-item>
				
			</u--form>
			<view class="btn" @click="addLogHandle">
				保存
			</view>
		</view>
		<u-action-sheet
			:show="showoption"
			:actions="actions"
			@close="showoption = false"
			@select="selectHandle"
		>
		</u-action-sheet>
		<u-toast ref="uToast"></u-toast>
		<!-- 设置canvas用于添加水印 -->
		<canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d"
			:style="{width: canvasSiz.width+'px',height: canvasSiz.height+'px',position: 'absolute',left:'-500000px',top: '-500000px'}" />
	</view>
</template>

<script>
	import navbar from '@/components/navbar.vue'
	import {addLogHandle} from '@/common/api.js'
	import {getToken} from '@/common/auth.js'
	
	export default {
		components:{navbar},
		data() {
			return {
				id:null,
				showoption: false,
				form:{
					acceptance:'',
					record:''
				},
				finishImageList:[],
				fileList1: [],
				actions: [
					
				],
				rules: {
					// 'form.record': {
					// 	required: true,
					// 	message: '请填写调试记录',
					// 	trigger: ['blur', 'change']
					// },
					'form.acceptance': {
						required: true,
						message: '请选择验收项',
						trigger: ['blur', 'change']
					},
				},
				//水印
				canvasSiz:{
					width:null,
					height:null,
				}
			}
		},
		onLoad(option) {
			this.id=option.id
			
			let arr = uni.getStorageSync('acceptance')
			this.actions=[]
			arr.forEach(item=>{
				this.actions.push({name:item.title})
				
			})
		},
		methods: {
			addLogHandle(){
				let image;
				if(this.finishImageList.length>0){
					let arr = this.finishImageList.map(item=>{
						return item.path
					})
					image=arr.join(',')
				}else{
					image=''
				}
				let params={
					wordorder_id:this.id.toString(),
					acceptance:this.form.acceptance,
					record:this.form.record,
					image:image,
					custom: { auth: true },
				}
				addLogHandle(params).then(res=>{
					console.log(res,"iiiii")
					if(res.code==1){
						this.$refs.uToast.show({
							message:'添加成功'
						});
						uni.navigateBack({
							delta:1
						})
					}
				})
			},
			selectHandle(val){
				this.form.acceptance = val.name
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				// console.log(event)
				// let path = event.file[0].url
				// uni.getImageInfo({
				// 	src: path,
				// 	success:(image)=> {
				// 		console.log(image);
				// 		this.canvasSiz.width = image.width;
				// 		this.canvasSiz.height = image.height;
				// 		 setTimeout(() => {
				// 			let ctx = uni.createCanvasContext('canvas-clipper', this);
				// 			ctx.drawImage(
				// 				path,
				// 				0,
				// 				0,
				// 				image.width,
				// 				image.height
				// 			);
				// 			// 设置文字水印
				// 			ctx.setFillStyle('white');
				// 			ctx.setFontSize(30);
				// 			ctx.fillText('抄表日期:', 20, 100);


				// 			//再来加个时间水印
				// 			var date = new Date();
				// 										//这里用了uview的js如果不适配需要自行修改
				// 			var time = this.$u.timeFormat(date, 'yyyy年mm月dd日 hh时MM分ss秒')
				// 			ctx.setFontSize(30);
				// 			ctx.fillText(time, 20, 140);

				// 			ctx.draw(false, () => {
				// 				// 导出图片
				// 				uni.canvasToTempFilePath({
				// 						destWidth: image.width,
				// 						destHeight: image.height,
				// 						canvasId: 'canvas-clipper',
				// 						fileType: 'png',
				// 						success:async(res)=> {
				// 							console.log(res,"999999")
				// 							let lists = [].concat(event.file)
				// 							let fileListLen = this[`fileList${event.name}`].length
				// 							lists.map((item) => {
				// 								this[`fileList${event.name}`].push({
				// 									...item,
				// 									status: 'uploading',
				// 									message: '上传中'
				// 								})
				// 							})
				// 							for (let i = 0; i < lists.length; i++) {
				// 								const result = await this.uploadFilePromise(lists[i].url)
												
				// 								if(JSON.parse(result).code==1){
				// 									let item = this[`fileList${event.name}`][fileListLen]
				// 									this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
				// 										status: 'success',
				// 										message: '',
				// 										url: result
				// 									}))
				// 									fileListLen++
				// 								}else{
				// 									this[`fileList${event.name}`].splice(fileListLen, 1)
				// 								}
												
				// 							}
				// 						}
				// 					},
				// 				   //这个_this是当前页this在onload里面赋值的
				// 					this
				// 				);
				// 			});
				// 		}, 500)
						

				// 	}
				// })
				
				
				
				
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					
					if(JSON.parse(result).code==1){
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						}))
						fileListLen++
					}else{
						this[`fileList${event.name}`].splice(fileListLen, 1)
					}
					
				}
				
			},
			//上传照片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
							token:getToken()
						},
						success: (res) => {
							if(JSON.parse(res.data).code==1){
								setTimeout(() => {
									this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
									resolve(res.data)
								}, 1000)
							}else{
								uni.$u.toast(JSON.parse(res.data).msg)
								
								resolve(res.data)
							}
						},
						fail: (res) => {
							console.log(res,"rrr")
						}
					});
				})
			},
			//删除图片
			deletePic(event) {
				// this[`fileList${event.name}`].splice(event.index, 1)
				this.finishImageList.splice(event.index, 1)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.addRecord{
	min-height: calc(100vh);
	background-color: #ffffff;
	
}
/deep/.u-upload__deletable{
	height: 50rpx  !important;
	width: 50rpx  !important;
	z-index:999 !important;
	.u-icon__icon{
		font-size: 40rpx !important;
		line-height: 40rpx !important;
		
	}
}
.btn{
	line-height: 98rpx;
	height: 98rpx;
	background: #8EC31F;
	border-radius: 10px;
	// margin:0 24rpx;
    text-align: center;
	font-size: 30rpx;
	font-family: Alibaba PuHuiTi;
	font-weight: 400;
	color: #FFFFFF;
	margin-top:80rpx;
}
.selectStyle{
	display: flex;
	padding: 30rpx;
	background: #FFFFFF;
	border: 1px solid #E5E7EA;
	border-radius: 10rpx;
}
</style>