wangluohuoyun-app/pages/order/signContract.vue

<template>
	<view class="content">
<!-- 		<view class="content1">
			<view style='width:70px'>付款方式</view>
			<u-radio-group v-model="dataDetails.advanceFreightService" placement="row">
				<u-radio :customStyle="radioCustomStyle" v-for="(item, index) in radiolist1" :key="index"
					:label="item.name" :name="item.name" @change="radioChange">
				</u-radio>
			</u-radio-group>

		</view> -->
		<view class="content2">
			<view class="title">
				合同摘要
			</view>
			<view class='row-between'>
				<view class="gray">发货单位</view>
				<view class="">{{dataDetails.compName?dataDetails.compName:'个人货主'}}</view>
			</view>
			<view class='row-between'>
				<view class="gray">发货地</view>
				<view class="place">
					{{dataDetails.sendPrivate}}{{dataDetails.sendCity}}{{dataDetails.sendArea}}{{dataDetails.sendDetailedAddress}}
				</view>
			</view>
			<view class='row-between'>
				<view class="gray">卸货地</view>
				<view class=" place">
					{{dataDetails.unloadPrivate}}{{dataDetails.unloadCity}}{{dataDetails.unloadArea}}{{dataDetails.unloadDetailedAddress}}
				</view>
			</view>
			<view class='row-between'>
				<view class="gray">货名</view>
				<view class="">{{dataDetails.goodsName}}</view>
			</view>
			<view class='row-between'>
				<view class="gray">距离</view>
				<view class="">约{{dataDetails.distance}}公里</view>
			</view>
			<view class='row-between'>
				<view class="gray">运费</view>
				<view class="">{{dataDetails.freight}}{{dataDetails.illingMethod==0?'元/吨':'元/车'}}</view>
				<!-- 				<view class="flex"><input type="text" placeholder="请输入运费" v-model="dataDetails.freight"
						class="text-align-right yf-input">{{dataDetails.freight}}元/车</view> -->
			</view>
		</view>
		<view class="wrapper content3">
			<view class="qm-row">
				<view class="handTitle">手写签名</view>
				<image src="@/static/xiangpica@2x.png" mode="widthFix" @click="retDraw" class="retDraw-image"></image>
				<!-- <button @click="retDraw" class="delBtn">重写</button> -->
			</view>

			<view class="handCenter">
				<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
					@touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
			</view>
			<view class="handRight">

			</view>
			<view class="handBtn">
				<!-- 			<image @click="selectColorEvent('black','#1A1A1A')"
					:src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
					:class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
				<image @click="selectColorEvent('red','#ca262a')"
					:src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
					:class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image> -->

				<!-- <button @click="saveCanvasAsImg" class="saveBtn">保存</button> -->
				<view @click="submit" class="saveBtn">提交</view>
				<!-- <button @click="previewCanvasImg" class="previewBtn">预览</button> -->
				<!-- <button @click="subCanvas" class="subBtn">完成</button> -->
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	var that;
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				isScaleStart: false,
				radioCustomStyle: {
					margin: '0 0 0 10rpx'
				},
				canvasName: 'handWriting',
				ctx: '',
				startX: null,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 5, // 笔记倍数
				value: true,
				dataDetails: {},
				radiolist1: [{
						name: '平台垫付运费',
						disabled: false
					},
					{
						name: '无需平台垫付运费',
						disabled: false
					},
				],
			};
		},
		onLoad(options) {
			that = this
			console.log(options)
			this.dataDetails =JSON.parse(options.obj) 
			this.dataDetails.advanceFreightService = '平台垫付运费'
			this.ctx = uni.createCanvasContext("handWriting");
			this.$nextTick(() => {
				uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {
						this.canvasWidth = rect.width;
						this.canvasHeight = rect.height;
						/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
						this.setCanvasBg('#fff');
					})
					.exec();
			});
		},
		methods: {
			submit() {
				if (!that.isScaleStart) {
					that.$refs.uToast.show({
						type: 'error',
						message: "手写签名不能为空！",
					})
					return
				}
				// if (uni.$u.test.isEmpty(that.dataDetails.freight)) {
				// 	that.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "运费不能为空！",
				// 	})
				// 	return
				// }
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success(res) {
						console.log(res.tempFilePath, 'canvas生成图片地址');
						uploadImage('image', res.tempFilePath, 'appData/',
							result => {
								// 上传成功
								console.log('图片地址', result)
								that.dataDetails.cargoOwnerAutograph = result


								uni.showLoading({
									title: '加载中',
									mask: true
								})

								that.$request.baseRequest('get', '/orderInfo/setPdf', that.dataDetails).then(res => {
										if (res.code == 200) {
											// that.contractSrc = res.data
											// uni.downloadFile({
											// 	url: res.data,
											// 	success: function(res) {
											// 		var filePath = res.tempFilePath;
											// 		uni.openDocument({
								   //  		filePath: filePath,
											// 			showMenu: true,
								   // 			success: function(res) {
											// 				console.log('打开文档成功');
											// 			}
											// 		});
											// 	}
											// });
											// this.$refs.uToast.show({
											// 	type: 'success',
											// 	message: "提交成功",
											// 	complete() {
											// 		that.upCallback({
											// 			size: 10,
											// 			num: 1
											// 		})
											// 	}
											// })

										}
									})
									.catch(res => {
										uni.$u.toast(res.message);
									});
							}
						)

					}
				});
			},
			// change(e){
			// 	if(this.value){
			// 		this.$set(this.dataDetails,'advanceFreightService',1)
			// 	}else{
			// 		this.$set(this.dataDetails,'advanceFreightService',0)
			// 	}
			// },
			// 笔迹开始
			uploadScaleStart(e) {
				this.isScaleStart = true
				this.startX = e.changedTouches[0].x
				this.startY = e.changedTouches[0].y
				//设置画笔参数
				//画笔颜色
				this.ctx.setStrokeStyle(this.lineColor)
				//设置线条粗细
				this.ctx.setLineWidth(this.lineSize)
				//设置线条的结束端点样式
				this.ctx.setLineCap("round") //'butt'、'round'、'square'
				//开始画笔
				this.ctx.beginPath()
			},
			// 笔迹移动
			uploadScaleMove(e) {
				//取点
				let temX = e.changedTouches[0].x
				let temY = e.changedTouches[0].y
				//画线条
				this.ctx.moveTo(this.startX, this.startY)
				this.ctx.lineTo(temX, temY)
				this.ctx.stroke()
				this.startX = temX
				this.startY = temY
				this.ctx.draw(true)
			},
			/**
			 * 重写
			 */
			retDraw() {
				this.ctx.clearRect(0, 0, 700, 730);
				this.ctx.draw();
				//设置canvas背景
				this.setCanvasBg('#fff');
			},
			/**
			 * @param {Object} str
			 * @param {Object} color
			 * 选择颜色
			 */
			selectColorEvent(str, color) {
				this.selectColor = str;
				this.lineColor = color;
			},
			//完成
			subCanvas() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success(res) {
						// console.log(res.tempFilePath, 'canvas生成图片地址');
						uni.showToast({
							title: '以保存'
						});
						//保存到系统相册
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已成功保存到相册',
									duration: 2000
								});
							}
						});
					}
				});
			},
			//保存到相册
			saveCanvasAsImg() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success(res) {
						console.log(res.tempFilePath, 'canvas生成图片地址');
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已保存到相册',
									duration: 2000
								});
							}
						});
					}
				});
			},
			//预览
			previewCanvasImg() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'jpg',
					quality: 1, //图片质量
					success(res) {
						uni.previewImage({
							urls: [res.tempFilePath] //预览图片 数组
						});
					}
				});
			},
			//设置canvas背景色  不设置  导出的canvas的背景为透明
			//@params：字符串  color
			setCanvasBg(color) {

				/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
				//rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
				//这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
				// ctx.setFillStyle('red')
				this.ctx.setFillStyle(color);
				this.ctx.fill(); //设置填充
				this.ctx.draw(); //开画
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fbfbfb;
		height: auto;
	}

	.content1 {
		background: white;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;

		.right {
			display: flex;
		}
	}

	.content2 {
		background: white;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 30rpx 20rpx;

		.title {
			font-size: 36rpx;
			font-weight: 700;
			margin-bottom: 20rpx;
		}

		.row-between {
			margin-bottom: 20rpx;
		}

		.left-text {
			margin-right: 20rpx;
		}

		.yf-input {
			padding-right: 10rpx;
		}
	}

	.content3 {
		background: white;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 30rpx 20rpx;
	}

	.place {
		width: 80%;
		text-align: right;
	}

	.handCenter {
		border: 4rpx dashed #e9e9e9;
		overflow: hidden;
		box-sizing: border-box;
		height: 500rpx;
	}

	.handWriting {
		background: #F9F9FB;
		width: 100%;
		height: 100%;
	}

	.handRight {
		display: inline-flex;
		align-items: center;
	}

	.handCenter {
		border: 4rpx dashed #e9e9e9;
		flex: 5;
		overflow: hidden;
		box-sizing: border-box;
	}

	.handTitle {
		font-size: 36rpx;
		color: #666;
		font-weight: 700;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.retDraw-image {
		width: 50rpx;

	}

	.qm-row {
		display: flex;
		justify-content: space-between;
	}

	.saveBtn {
		width: 80%;
		background: #2772FB;
		color: white;
		text-align: center;
		border-radius: 50rpx;
		padding: 20rpx;
	}

	.handBtn {
		display: flex;
		justify-content: center;
	}

	/* 
	.wrapper {
		width: 100%;
		height: 95vh;
		margin: 30rpx 0;
		overflow: hidden;
		display: flex;
		align-content: center;
		flex-direction: row;
		justify-content: center;
		font-size: 28rpx;
	}




	.handBtn button {
		font-size: 28rpx;
	}

	.handBtn {
		height: 95vh;
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: space-between;
		flex: 1;
	}

	.delBtn {
		position: absolute;
		top: 250rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.delBtn image {
		position: absolute;
		top: 13rpx;
		left: 25rpx;
	}

	.subBtn {
		position: absolute;
		bottom: 52rpx;
		left: -3rpx;
		display: inline-flex;
		transform: rotate(90deg);
		background: #008ef6;
		color: #fff;
		margin-bottom: 30rpx;
		text-align: center;
		justify-content: center;
	}



	.saveBtn {
		position: absolute;
		top: 375rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.previewBtn {
		position: absolute;
		top: 500rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}

	.uploadBtn {
		position: absolute;
		top: 625rpx;
		left: 0rpx;
		transform: rotate(90deg);
		color: #666;
	}



	.black-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 30rpx;
		left: 25rpx;
	}

	.black-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 100rpx;
		left: 10rpx;
	}

	.red-select {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: 140rpx;
		left: 25rpx;
	}

	.red-select.color_select {
		width: 90rpx;
		height: 90rpx;
		top: 120rpx;
		left: 10rpx;
	} */
</style>