wangluohuoyun-huozhuapp/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 class="left">
				付款方式
			</view>
			<view class="right">
				<view class="left-text">平台垫付运费</view>
					<u-switch @change="change" v-model="value" inactiveColor='#ABB0BB' size="20" ></u-switch>
			</view> -->
		<!-- </view> -->
		<view class="content2">
			<view class="title">
				合同摘要
			</view>
			<view class='row-between'>
				<view class="gray">发货单位</view>
				<view class="">{{dataDetails.cargoOwner?dataDetails.cargoOwner:'个人货主'}}</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.freightInfo.freight}}{{dataDetails.illingMethod==0?'元/吨':'元/车'}}</view>
			</view> -->
			<view class='row-between'>
				<!-- 后加 -->
				<view class="gray">收费比例（%）</view>
				<view class="">{{chargeProportion}}</view><!-- 暂时写死6% -->
			</view>
			<view style='color:#6A6A6A;margin-top:20px;font-size:30rpx;align-items: center;' class="flex">
				<u--image style='margin-right:3px;position:relative;top:1rpx;' @click='consent'
					:src="consentStatus==true?'../../static/images/mine/duihao@2x.png':'../../static/images/mine/wxz.png'"
					width="17px" height="17px"></u--image>
				我已阅读并同意
				<view>
					<u--text type="primary" text="《货物运输委托协议》" @click="lookContract"></u--text>
				</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>
		<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="$u.throttle(submit, 1000)" class="saveBtn">提交</view>
			<!-- <button @click="previewCanvasImg" class="previewBtn">预览</button> -->
			<!-- <button @click="subCanvas" class="subBtn">完成</button> -->
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	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: {
					carrierInfo: {},
					serviceCharge: '50'
				},
				radiolist1: [{
						name: '平台垫付运费',
						disabled: false
					},
					{
						name: '无需平台垫付运费',
						disabled: false
					},
				],
				chargeProportion: "", //收费比例
				consentStatus: false,
				codestatus: false,
				addType: "",
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication'])
		},
		onLoad(options) {
			that = this
			// 如果登录之后没有切换到我的页面缓存不会存上，所以在这调用接口取收费比例
			this.$request.baseRequest('get', '/cargoOwnerInfo/firstAuthentication', {
				phone: this.userInfo.phone
			}).then(res => {
				uni.setStorageSync("firstAuthentication", res.data)
				//收费比例从缓存中取
				that.chargeProportion = uni.getStorageSync("firstAuthentication").chargeProportion * 100
			})
			this.dataDetails = JSON.parse(decodeURIComponent(options.obj))
			this.addType = JSON.parse(decodeURIComponent(options.type))
			// 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');
						this.$request.baseRequest('get', '/commonUser/getSignatureAddress', {
							phone: this.userInfo.phone,
							identification: 2
						}).then(res => {
							if (res.data) {
								if (res.data.signImg) {
									// 获取远程图片，canvas无法直接绘制远程图片
									this.userInfo.signImg = res.data.signImg
									this.isScaleStart = res.data.signImg
									uni.getImageInfo({
										src: res.data.signImg,
										success(res) {
											var ctx = uni.createCanvasContext('handWriting')
											console.log(res.width);
											console.log(res.height);
											ctx.drawImage(res.path, 0, 0)
											// ctx.drawImage(res.path, 0, 0, 330, 244)
											ctx.save()
											ctx.draw()
										},
										fail(res) {
											console.log("fail -> res", res)
											uni.showToast({
												title: "图片下载异常",
												duration: 2000,
												icon: "none"
											})
										}
									})
								}
							}
						})
					})
					.exec();
			});
		},
		methods: {
			lookContract() {
				uni.downloadFile({
					url: "https://taohaoliang.oss-cn-beijing.aliyuncs.com/pcfiles/hzContract.pdf",
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
			consent() {
				this.consentStatus = !this.consentStatus
				uni.setStorage({
					key: 'policyStorageKey',
					data: this.consentStatus
				});
			},
			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
				// }
				if (!that.consentStatus) {
					that.$refs.uToast.show({
						type: 'error',
						message: "请阅读并确认协议条款！",
					})
					return
				}

				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					width: 330,
					height: 244,
					destWidth: 330,
					destHeight: 244,
					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
								})
								if (that.addType == 1) { //新增
									that.$request.baseRequest('post', '/publishTaskInfo/api/addTask', that
											.dataDetails).then(res => {
											if (res.code == 200) {
												uni.removeStorage({
													key: 'storage_saddress'
												});
												uni.removeStorage({
													key: 'storage_faddress'
												});
												uni.removeStorage({
													key: 'releaseCargoOwner'
												});
												uni.removeStorage({
													key: 'releasecompId'
												});
												// uni.redirectTo({
												// 		url: "/pages/release/release"
												// })
												that.dataDetails.id = res.data
												let _obj = {}
												_obj.id = that.dataDetails.id
												_obj.cargoOwnerAutograph = that.dataDetails
													.cargoOwnerAutograph
												that.$request.baseRequest('get',
														'/publishTaskInfo/signContract', _obj).then(
														res => {
															uni.hideLoading()
															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('打开文档成功');
																// 			}
																// 		});
																// 	}
																// });
																that.$refs.uToast.show({
																	type: 'success',
																	message: "发布成功",
																	complete() {
																		uni.switchTab({
																			url: '/pages/order/index'
																		});
																	}
																})
															}
														})
													.catch(res => {
														uni.hideLoading()
														uni.$u.toast(res.message);
													});
											}
										})
										.catch(res => {
											uni.hideLoading()
											uni.showToast({
												title: res.message,
												icon: 'none',
												duration: 2000
											})
										});
								} else if (that.addType == 2) { //编辑
									that.$request.baseRequest('post', '/publishTaskInfo/api/editTask', that
											.dataDetails).then(res => {
											if (res.code == 200) {
												uni.removeStorage({
													key: 'storage_saddress'
												});
												uni.removeStorage({
													key: 'storage_faddress'
												});
												uni.removeStorage({
													key: 'releaseCargoOwner'
												});
												uni.removeStorage({
													key: 'releasecompId'
												});
												let _obj = {}
												_obj.id = that.dataDetails.id
												_obj.cargoOwnerAutograph = that.dataDetails
													.cargoOwnerAutograph
												that.$request.baseRequest('get',
														'/publishTaskInfo/signContract', _obj).then(
														res => {
															uni.hideLoading()
															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('打开文档成功');
																// 			}
																// 		});
																// 	}
																// });
																that.$refs.uToast.show({
																	type: 'success',
																	message: "修改成功",
																	complete() {
																		uni.switchTab({
																			url: '/pages/order/index'
																		});
																	}
																})
															}
														})
													.catch(res => {
														uni.hideLoading()
														uni.$u.toast(res.message);
													});
											}
										})
										.catch(res => {
											uni.hideLoading()
											uni.showToast({
												title: res.message,
												icon: 'none',
												duration: 2000
											})
										});
								}
							})
					}
				});
			},
			// 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;
		height: 50rpx;
	}

	.handBtn {
		display: flex;
		height: 60px;
		bottom: 0px;
		padding-top: 20rpx;
		background-color: #FFFFFF;
		justify-content: center;
	}

	uni-navigator {
		//条款
		display: inline-block;
		color: #2772FB;

	}

	/* 
	.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>