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="title">
				完善信息
			</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 class="flex">
					<u--input placeholder="请输入运费" border="none" type="number" v-model="dataDetails.freightCars"
						inputAlign='right' clearable></u--input>
					<!-- <span>元/车</span> -->
				</view>
			</view>
			<view class='row-between'>
				<view class="gray">车牌号</view>
				<view class="flex">
					<input class="" v-model='dataDetails.carrierInfo.carNo' @click.stop="handleShowKeyboard"
						:disabled="true" placeholder="输入车牌号" name="input" style="text-align: right;"></input>
				</view>
				
			</view>
			<view class='row-between'>
				<view class="gray">挂车号（选填）</view>
				<view class="flex">
					<u--input placeholder="请输入挂车号" border="none" v-model="dataDetails.trailerNumber" inputAlign='right'
						clearable></u--input>
				</view>
			</view>
			<view class='row-between'>
				<view class="gray">运输开始日期</view>
				<view class="">
					<view @click="dateShow">{{dataDetails.startDates?dataDetails.startDates:'请选择运输开始日期'}}
					</view>
					<u-datetime-picker :show="startShow" mode="date" @cancel="removeStart" @confirm="startDate"
						@close="removeStart"></u-datetime-picker>
				</view>
			</view>
			<view class='row-between'>
				<view class="gray">运输截止日期</view>
				<view class="">
					<!-- 	<u--input placeholder="请输入内容" border="none" v-model="dataDetails.value" inputAlign='right'
						clearable></u--input> -->
					<view class="" @click="endShow = true">{{dataDetails.endDates?dataDetails.endDates:'请选择运输截止日期'}}
					</view>
					<u-datetime-picker :show="endShow" mode="date" @cancel="removeEnd" @confirm="endDate"
						@close="removeEnd"></u-datetime-picker>
				</view>
			</view>
			<view class='row-between'>
				<view class="gray">联络人姓名</view>
				<view class="">
					<u--input placeholder="请输入联络人姓名" border="none" v-model="dataDetails.contactPersonName"
						inputAlign='right' clearable></u--input>
				</view>
			</view>
			<view class='row-between'>
				<view class="gray">联络人电话</view>
				<view class="">
					<u--input placeholder="请输入联络人电话" border="none" type="number" maxlength="11"
						v-model="dataDetails.contactPersonPhone" inputAlign='right' clearable></u--input>
				</view>
			</view>
			<view class='row-between'>
				<view class="gray">装车后预付款</view>
				<view class="">
					<u--input placeholder="请输入装车后预付款" border="none" v-model="dataDetails.advanceCharge"
						inputAlign='right' clearable></u--input>
				</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>
		<master-keyboard ref="keyboard" keyboardtype="car" :show="keyShow" :randomNumber="true" :newCar="false"
			:defaultValue="carNumber" @keyboardClick="handleClick"></master-keyboard>
		<u-toast ref="uToast"></u-toast>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	var that;
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				keyShow: false,
				carNumber: '',
				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
					},
				],
				startShow: false,
				endShow: false,


			};
		},
		onLoad(options) {debugger
			that = this
			console.log(JSON.parse(options.obj))
			// this.dataDetails = JSON.parse(options.obj)
			this.dataDetails = JSON.parse(decodeURIComponent(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: {
			//车牌号弹出键盘
			handleShowKeyboard() {
				debugger
				if (this.dataDetails.carrierInfo.carNo == '') {
					this.carNumber = ''
				} else {
					this.carNumber = this.dataDetails.carrierInfo.carNo
				}
				if (this.$refs.keyboard.open) {
					this.$refs.keyboard.open(false) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard[0].open(false)
				}
				if (this.$refs.keyboard.open) {
					this.$refs.keyboard.open(true) //true 键盘显示 false 键盘隐藏
				} else {
					this.$refs.keyboard[0].open(true)
				}
			},
			//车牌号弹出键盘
			handleClick(e) {
				this.carNumber = e.value
				this.dataDetails.carrierInfo.carNo = e.value //键盘输入值
			},
			dateShow() {
				this.startShow = true
			},
			removeStart() {
				this.startShow = false
			},
			removeEnd() {
				this.endShow = false
			},
			startDate(e) {
				let timeFormat = uni.$u.timeFormat
				this.dataDetails.startDates = timeFormat(e.value, "yyyy-mm-dd")
				this.startShow = false
			},
			endDate(e) {
				let timeFormat = uni.$u.timeFormat
				this.dataDetails.endDates = timeFormat(e.value, "yyyy-mm-dd")
				this.endShow = false
			},
			submit() {
				if (!that.isScaleStart) {
					that.$refs.uToast.show({
						type: 'error',
						message: "手写签名不能为空！",
					})
					return
				}
				if (uni.$u.test.isEmpty(that.dataDetails.freightCars)) {
					that.$refs.uToast.show({
						type: 'error',
						message: "运费不能为空！",
					})
					return
				}
				if (uni.$u.test.isEmpty(that.dataDetails.startDates)) {
					that.$refs.uToast.show({
						type: 'error',
						message: "运输起始日期不能为空！",
					})
					return
				}
				if (uni.$u.test.isEmpty(that.dataDetails.endDates)) {
					that.$refs.uToast.show({
						type: 'error',
						message: "运输截止日期不能为空！",
					})
					return
				}
				if (uni.$u.test.isEmpty(that.dataDetails.contactPersonName)) {
					that.$refs.uToast.show({
						type: 'error',
						message: "联络人姓名不能为空！",
					})
					return
				}
				if (uni.$u.test.isEmpty(that.dataDetails.contactPersonPhone)) {
					that.$refs.uToast.show({
						type: 'error',
						message: "联络人电话不能为空！",
					})
					return
				}
				if (uni.$u.test.isEmpty(that.dataDetails.advanceCharge)) {
					that.$refs.uToast.show({
						type: 'error',
						message: "装车后预付款不能为空！",
					})
					return
				}
				console.log(that.dataDetails)
				let _obj = {}
				debugger
				_obj.trailerNumber = that.dataDetails.trailerNumber
				_obj.startDates = that.dataDetails.startDates
				_obj.endDates = that.dataDetails.endDates
				_obj.contactPersonName = that.dataDetails.contactPersonName
				_obj.contactPersonPhone = that.dataDetails.contactPersonPhone
				_obj.freightCars = that.dataDetails.freightCars
				_obj.advanceCharge = that.dataDetails.advanceCharge
				_obj.id = that.dataDetails.id
				_obj.carNumber =that.dataDetails.carrierInfo.carNo

				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success(res) {
						console.log(res.tempFilePath, 'canvas生成图片地址');
						uploadImage('image', res.tempFilePath, 'appData/',
							result => {
								// 上传成功
								that.dataDetails.cargoOwnerAutograph = result
								_obj.driverAutograph = result
								uni.showLoading({
									title: '加载中',
									mask: true
								})
								that.$request.baseRequest('get', '/orderInfo/setPdf', _obj).then(
										res => {
											if (res.code == 200) {
												uni.hideLoading()
												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('打开文档成功');
															}
														});
													}
												});
												that.$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>