flying-monkey/pages/workOrder/workOrderThree.vue

<template>
	<view class="content">
		<statusNav returnColor="#c2c2c2" navBarTitle="处理工单"></statusNav>
		<container-subgroup-two>
			<view slot="content" style="margin: -20rpx -25rpx 0rpx;">
				<view class="work-order-schedule">
					<view class="li">
						<view class="icon  icon-after">1</view>
						<view class="text">签到执行</view>
					</view>
					<view class="li">
						<view class="icon  icon-after">2</view>
						<view class="text">填写维保单</view>
					</view>
					<view class="li">
						<view class="icon on">3</view>
						<view class="text">结算审核</view>
					</view>
				</view>
				<view class="clearing-form">
					<view class="title">结算方式</view>
					<view class="clearing-form-content">
						<view class="li" @click="clearingFormFun(index)" v-for="(item,index) in clearingForm" :key="index">
							<image class="icon" v-if="currentWay==index" src="../../static/iocn/xuanz.png" mode="" lazy-load></image>
							<image class="icon" v-else src="../../static/iocn/xuan.png" mode="" lazy-load></image>
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="work-order-from">
					<!-- <picker mode="date" @change="serveDate">
						<view class="serve-date">
							<view class="text" v-if="serviceTime==''">请选择服务时间</view>
							<view class="text" style="color: #000000;" v-else>{{serviceTime}}</view>
							<image class="icon" src="../../static/iocn/jt.png" mode=""></image>
						</view>
					</picker> -->
					<view class="total-cost">
						<view class="li">
							<view class="text">上门费</view>
							<view class="price">￥{{detailObj.doorToDoorFee}}</view>
						</view>
						<view class="li">
							<view class="text on">税金</view>
							<view class="price">￥{{taxesPrice}}</view>
						</view>
						<view class="li">
							<view class="text">材料费</view>
							<view class="price">￥{{detailObj.materialCost}}</view>
						</view>
						<view class="li">
							<view class="text flexs">其他费用</view>
							<view class="price disac">
								<input class="tright fon28" type="digit" v-model="detailObj.otherCost" placeholder="0.00" />
							</view>
						</view>
					</view>
					<view class="total-price">
						费用合计<text class="money">￥{{totalPrice}}</text>
					</view>
					<picker @change="bindPickerChange" :value="paymentModeIndex" :range="array">
						<view class="serve-date">
							<view class="text" v-if="paymentMode==''">请选择付款方式</view>
							<view class="text" v-else style="color: #000000;">{{paymentMode}}</view>
							<image class="icon" src="../../static/iocn/jt.png" mode="" lazy-load></image>
						</view>
					</picker>
					<view class="is-invoice">
						<view class="text">是否开票</view>
						<view class="radio" @click="isInvoiceFun(0)">
							<image v-if="billingIndex==0 && currentWay!=1 && currentWay!=2" src="../../static/iocn/xz.png" class="icon" mode="" lazy-load></image>
							<view v-else class="icon1"></view>
							<text>专票</text>
						</view>
						<view class="radio" @click="isInvoiceFun(1)">
							<image v-if="billingIndex==1 && currentWay!=1 && currentWay!=2" src="../../static/iocn/xz.png" class="icon" mode="" lazy-load></image>
							<view v-else class="icon1"></view>
							<text>普票</text>
						</view>
						<view class="radio" @click="isInvoiceFun(2)">
							<image v-if="billingIndex==2 && currentWay!=1 && currentWay!=2" src="../../static/iocn/xz.png" class="icon" mode="" lazy-load></image>
							<view v-else class="icon1"></view>
							<text>不开票</text>
						</view>
					</view>
					<view class="is-invoice">
						<view class="text">是否收款</view>
						<view class="radio" @click="isMoneyFun(true)">
							<image v-if="isMoney && currentWay!=1 && currentWay!=2" src="../../static/iocn/xz.png" class="icon" mode="" lazy-load></image>
							<view v-else class="icon1"></view>
							<text>是</text>
						</view>
						<view class="radio" @click="isMoneyFun(false)">
							<image v-if="!isMoney && currentWay!=1 && currentWay!=2" src="../../static/iocn/xz.png" class="icon" mode="" lazy-load></image>
							<view v-else class="icon1"></view>
							<text>否</text>
						</view>
					</view>
					<view class="customerSignature">
						<view class="title">
                            <view class="">
                                  客户签名
                            </view>
                          <view class="" @click="clearClick"   v-if="!isCanvas">
                             清除 
                          </view>
                        </view>
						<view class='contents'>
							<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move'
								@touchstart='start($event)' @touchend='end' @touchcancel='cancel' @longtap='tap'
								disable-scroll='true' @error='error'>
							</canvas>
							<!-- <button @click='clearClick'>清除</button> -->
							<!--          <button @click='saveClick'>保存图片</button> -->
						</view>
						<view class="text" v-if="isCanvas">请在此签名</view>
					</view>
					<view class="money-receiving-code" @tap="openCollectionCodeEv">
						<view class="title">
							<image src="../../static/iocn/shoukuan.png" class="icon" mode="" lazy-load></image>
							<view class="text">微信、支付宝等收款码</view>
						</view>
						<image src="../../static/iocn/jt.png" mode="" class="img" lazy-load></image>
					</view>
					<view v-if="ifCollectionCode" :class="detailObj.collectionCode.length >= 3 ? 'disjbac' :'disac'" style="margin: 15rpx 0;">
						<view class="width32 radius10" style="overflow: hidden;" :class="detailObj.collectionCode.length >= 3 ? '' :'mar-y20'" v-for="(item,index) in detailObj.collectionCode" :key="index">
							<image :src="item" mode="aspectFill" class="width100" lazy-load style="vertical-align: middle;height: 240rpx;"></image>
						</view>
					</view>
					<view class="address">
						<image class="icon" src="../../static/iocn/dizi.png" mode="" lazy-load></image>
						<view class="text ">{{detailObj.address}}</view>
					</view>
					<view class="remark">
						<view class="title">备注内容</view>
						<textarea class="textarea" v-model="remarkText" placeholder="请输入备注内容" />
					</view>
				</view>
				<button class="submit-button" type="default" @tap="submitEv">提交审核</button>
			</view>
		</container-subgroup-two>
	</view>
</template>

<script>
	import statusNav from '../../components/status-nav.vue';
	import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import {base64ToPath} from '@/jsFile/base64-src.js';
	import {handleWorkOrderGet,handleWorkOrderSubmit,uploadImg} from '../../jsFile/public-api.js';
	
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth;
			canvash = canvasw * 9 / 16;
		},
	})
	export default {
		components: {
			footTabOne,
			statusNav,
			containerSubgroupTwo
		},
		data() {
			return {
				clearingForm: [
					{title: '单次付费'},
					{title: '质保免费'},
					{title: '验收扫尾'},
					{title: '包年签单'},
				],
				currentWay:0,//结束方式类型
                signatureState:false,
				array: ['微信', '支付宝', '银行转账'],
				paymentModeIndex:0,
				serviceTime:'' ,// 服务时间
				detailObj:{
					doorToDoorFee:'120.09',
					taxes:'120.20',
					materialCost:'120.02',
					otherCost:'',
					address:'湖南省株洲市荷塘区红旗中路456号(五矿二十三冶)',
					collectionCode:[
						'/static/del/500478055.png',
						'/static/del/img001.png',
						'/static/del/500478055.png',
					]
				},
				paymentMode:'',//支付方式
				billingIndex:0,//开票类型 0:专票 1：普票 2：不开票
				isMoney: true,//是否收款
				isCanvas: true,
				signImage: '',//签名图片
				ifCollectionCode:false,//是否显示收款码
				remarkText:'',//备注内容
				saveTimer:null,//保存签名延迟时间事件
				flag:true,//防抖
				signId:'',//签名图片id
				orderId:''//工单id
			}
		},
		computed:{
			totalPrice() {
				let prices = 0;
				if(this.currentWay!=1 && this.currentWay!=2) {
					prices = this.$toolAll.tools.operationEv(this.detailObj.doorToDoorFee,this.taxesPrice,'+',2);
					prices = this.$toolAll.tools.operationEv(prices,this.detailObj.materialCost,'+',2);
					prices = this.$toolAll.tools.operationEv(prices,this.detailObj.otherCost,'+',2);
				}
				return this.$toolAll.tools.addXiaoShu(prices);
			},
			taxesPrice() {
				let taxesResult = 0
				if(this.billingIndex!=0) {
					taxesResult = '0.00';
				} else {
					taxesResult = this.$toolAll.tools.operationEv(this.detailObj.doorToDoorFee,this.detailObj.materialCost,'+',2);
					taxesResult = this.$toolAll.tools.operationEv(taxesResult,this.detailObj.otherCost,'+',2);
					taxesResult = this.$toolAll.tools.operationEv(taxesResult,0.1,"*",2);
				}
				return taxesResult;
			}
		},
		onLoad: function(op) {
			//获得Canvas的上下文
			content = uni.createCanvasContext('firstCanvas')
			//设置线的颜色
			content.setStrokeStyle("#000")
			//设置线的宽度
			content.setLineWidth(5)
			//设置线两端端点样式更加圆润
			content.setLineCap('round')
			//设置两条线连接处更加圆润
			content.setLineJoin('round');
			// 调用税金换算事件
			// this.conversionEv();
			if(op.id!=undefined) {
				this.orderId = op.id;
				// 调用查询结算审核信息事件
				this.handleWorkOrderGet(this.orderId);
			}
			this.handleWorkOrderGet();
		},
		methods: {
			// 查询结算审核信息
			handleWorkOrderGet(id){
				let params = {
					order_id:14,
					steps:3
				}
				handleWorkOrderGet(params).then(res=>{
					if(res.code) {
						let dataObj = res.data;
					}
				})
			},
			// 提交审核事件
			submitEv() {
				if(this.checkEmpty()) {
					if(this.flag) {
						this.flag = false;
						let params = {
							order_id:this.orderId,
							steps:3,
							settlement_type:[1,2,3,4][this.currentWay],//结算方式1：单次收费		2：质保免费		3：验收扫尾		4：包年签单
							c:this.detailObj.doorToDoorFee,
							d:this.detailObj.taxes,
							e:this.detailObj.materialCost,
							f:this.detailObj.otherCost,
							g:this.totalPrice,
							pay_type:[1,2,3][this.paymentModeIndex],//支付方式1：微信		2：支付宝	3：银行转账
							invoice_type:[3,2,1][this.billingIndex],//开票方式3：专票	2：普票		1：不开票
							is_collection:this.isMoney ? 1 : 0,//是否收款
							signature:this.signId,//签名id
							settlement_remark:this.remarkText//备注内容
						}
						console.log(params);
						handleWorkOrderSubmit(params).then(res=>{
							if(res.code) {
								uni.navigateTo({
								    url: `/pages/workOrder/workorderTwo?id=${this.orderId}`
								})
							}
							this.flag = true;
						})
					}
				}
			},
			// 判空
			checkEmpty(){
				let result = false;
				// if(!this.serviceTime) {
				// 	this.$toolAll.tools.showToast('请选择服务时间');
				// } else 
				if(!this.paymentMode) {
					this.$toolAll.tools.showToast('请选择付款方式');
				} else if(!this.signImage) {
					this.$toolAll.tools.showToast('请签名');
				} else {
					result = true;
				}
				return result;
			},
			// 收款码点击事件
			openCollectionCodeEv(){
				if(this.currentWay!=1 && this.currentWay!=2) {
					this.ifCollectionCode = !this.ifCollectionCode;
				}
			},
			clearingFormFun(index) {
				this.currentWay = index;
			},
			bindPickerChange(data) {
				this.paymentModeIndex = data.detail.value;
				this.paymentMode = this.array[this.paymentModeIndex];
			},
			// serveDate(data) {
			// 	this.serviceTime = data.detail.value;
			// },
			isInvoiceFun(index) {
				if(this.currentWay!=1 && this.currentWay!=2) {
					this.billingIndex = index;
					// this.conversionEv();
				}
			},
			// 税金费用换算
			// conversionEv(){
			// 	if(this.billingIndex!=0) {
			// 		this.detailObj.taxes = '0.00';
			// 	} else {
			// 		let priceTotal = this.$toolAll.tools.operationEv(this.detailObj.doorToDoorFee,this.detailObj.materialCost,'+',2);
			// 		priceTotal = this.$toolAll.tools.operationEv(priceTotal,this.detailObj.otherCost,'+',2);
			// 		this.detailObj.taxes = this.$toolAll.tools.operationEv(priceTotal,0.1,"*",2);
			// 	}
			// },
			isMoneyFun(is) {
				if(this.currentWay!=1 && this.currentWay!=2) {
					this.isMoney = is;
				}
			},
			// 画布
			// 画布的触摸移动开始手势响应
			start: function(e) {
				this.isCanvas = false
                this.signatureState=true
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y,
				}
				touchs.push(point);
				clearTimeout(this.saveTimer);
			},
			// 画布的触摸移动手势响应
			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				touchs.push(point)
				if (touchs.length >= 2) {
					this.draw(touchs)
				}
			},
			// 画布的触摸移动结束手势响应
			end: function(e) {
				console.log("触摸结束" + e)
				//清空轨迹数组
				for (let i = 0; i < touchs.length; i++) {
					touchs.pop()
				}
				this.saveTimer = setTimeout(()=>{
					this.saveClick();
				},3000)
			},
			// 画布的触摸取消响应
			cancel: function(e) {
				console.log("触摸取消" + e)
			},
			// 画布的长按手势响应
			tap: function(e) {
				console.log("长按手势" + e)
			},
			error: function(e) {
				console.log("画布触摸错误" + e)
			},
			//绘制
			draw: function(touchs) {
				let point1 = touchs[0]
				let point2 = touchs[1]
				touchs.shift()
				content.moveTo(point1.x, point1.y)
				content.lineTo(point2.x, point2.y)
				content.stroke()
				content.draw(true)
			},
			//清除操作
			clearClick: function() {
				//清除画布
                  this.isCanvas = true
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
			},
			//保存图片
			saveClick: function() {
				var that = this
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: function(res) {
						// base64转图片路径
						base64ToPath(res.tempFilePath).then(path => {
							that.signImage = path;
							console.log(that.signImage);
							uploadImg({path:that.signImage}).then(res=>{
								if(res.code) {
									that.signId = res.data.id;
								} else {
									that.$toolAll.tools.showToast(res.msg);
								}
							})
						}).catch(error => {})
					}
				})
			}
		}
	}
</script>

<style>
	.submit-button {
		width: 686rpx;
		border-radius: 50rpx;
		height: 90rpx;
		background-color: #02A2ea;
		line-height: 90rpx;
		color: #FFFFFF;
		margin-top: 60rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.work-order-schedule {
		display: flex;
		padding: 22rpx 29rpx;
		margin-top: 10rpx;
		background-color: #FFFFFF;
		justify-content: space-between;
	}

	.work-order-schedule .icon {
		width: 38rpx;
		height: 38rpx;
		color: #FFFFFF;
		margin: auto;
		position: relative;
		font-size: 24rpx;
		margin-bottom: 10rpx;
		text-align: center;
		line-height: 38rpx;
		background-color: #999999;
		border-radius: 50%;

	}

	.work-order-schedule .on {
		background-color: #5391F3
	}

	.work-order-schedule .text {
		font-size: 24rpx;
		color: #333333;
	}

	.work-order-schedule .icon-after::after {
		content: "";
		width: 265rpx;
		height: 2rpx;
		background-color: #999999;
		position: absolute;
		top: 19rpx;
		left: 38rpx;
	}

	.clearing-form-content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 30rpx;
		background-color: #FFFFFF;
		padding-top: 28rpx;
	}

	.clearing-form-content .li .icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 18rpx;
	}

	.clearing-form-content .li {
		width: 26%;
		display: flex;
		align-items: center;
		margin-bottom: 33rpx;
		font-size: 28rpx;
	}

	.clearing-form .title {

		font-size: 28rpx;
		color: #4d4b4b;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.serve-date {
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		align-items: center;
		margin-top: 14rpx;
	}

	.serve-date .text {
		font-size: 28rpx;
		color: #999999;
	}

	.serve-date .icon {
		font-size: 28rpx;
		color: #999999;
		width: 22rpx;
		height: 12rpx;
	}

	.work-order-from {
		padding: 0 13rpx;
	}

	.total-cost {
		margin-top: 14rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.total-cost .li {
		width: 49%;
		height: 80rpx;
		padding: 0 14rpx;
		background-color: #FFFFFF;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		border-radius: 8rpx;
		margin-bottom: 14rpx;
		box-sizing: border-box;
	}

	.total-cost .li .text {
		color: #999999;
		font-size: 26rpx;
	}

	.total-cost .li .on {
		letter-spacing: 45rpx;
	}

	.total-cost .li .price {
		color: #333333;
		font-size: 26rpx;
	}

	.total-price {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;
		color: #333333;
	}

	.total-price .money {
		color: #e52e2e;
		font-weight: bold;
	}

	.is-invoice {
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		margin-top: 13rpx;
		box-sizing: border-box;
	}

	.is-invoice .text {
		font-size: 26rpx;
		margin-right: 60rpx
	}

	.is-invoice .radio .icon {
		width: 26rpx;
		height: 26rpx;
		background-color: #00A2E9;
		border-radius: 50%;

		margin-right: 20rpx;
	}

	.is-invoice .radio .icon1 {
		width: 26rpx;
		height: 26rpx;
		border-radius: 50%;
		box-sizing: border-box;
		margin-right: 20rpx;
		border: solid 2rpx #eeeeee;
	}

	.is-invoice .radio {
		display: flex;
		font-size: 26rpx;
		align-items: center;
		margin-right: 40rpx;
	}

	.customerSignature .title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
        display: flex;
        justify-content: space-between;
	}

	.customerSignature {
		margin-top: 13rpx;
		padding: 24rpx 13rpx;
		background-color: #FFFFFF;
		position: relative;
	}

	content {
		width: 100%;
	}

	.customerSignature .text {
		position: absolute;
		top: 50%;
		width: 100%;
		text-align: center;
		color: #cccccc;
	}

	.firstCanvas {
		background-color: #FFFFFF;
		width: 100%;
		height: 320rpx;
	}

	.contents image {
		width: 100%;
		height: 200px;
		background-color: orange;
	}

	.firstCanvas {
		border: 2rpx dashed #cccccc;
		border-radius: 10rpx;
	}

	.money-receiving-code {
		width: 100%;
		height: 80rpx;
		display: flex;
		padding: 0rpx 13rpx;
		align-items: center;
		margin-top: 13rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		justify-content: space-between;
	}

	.money-receiving-code .title {
		display: flex;
		align-items: center;

	}

	.money-receiving-code .title .icon {
		width: 22rpx;
		height: 22rpx;
		margin-right: 30rpx;
	}

	.money-receiving-code .title .text {
		font-size: 26rpx;
		color: #333333;
	}

	.money-receiving-code .img {
		width: 22rpx;
		height: 12rpx;
		transform: rotateZ(-90deg);
	}

	.address {
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		margin-top: 13rpx;
		box-sizing: border-box;
		padding: 0rpx 13rpx;
	}

	.address .icon {
		width: 24rpx;
		height: 32rpx;
		margin-right: 30rpx;
	}

	.address .text {
		font-size: 26rpx;
		color: #5d5c5c;
	}

	.remark {
		width: 100%;
		margin-top: 13rpx;
		background-color: #FFFFFF;
		padding: 20rpx 14rpx;
		height: 360rpx;
		box-sizing: border-box;
	}

	.remark .title {
		margin-bottom: 30rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.remark .textarea {
		font-size: 28rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #f5f5f5;
		height: 193rpx;
		border-radius: 10rpx;
		padding: 23rpx;
	}
</style>