flying-monkey/pages/workOrder/workOrderThree.vue

725 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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';
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,//防抖
}
},
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(options) {
//获得Canvas的上下文
content = uni.createCanvasContext('firstCanvas')
//设置线的颜色
content.setStrokeStyle("#000")
//设置线的宽度
content.setLineWidth(5)
//设置线两端端点样式更加圆润
content.setLineCap('round')
//设置两条线连接处更加圆润
content.setLineJoin('round');
// 调用税金换算事件
// this.conversionEv();
},
methods: {
// 提交审核事件
submitEv() {
if(this.checkEmpty()) {
if(this.flag) {
this.flag = false;
let params = {
a:this.clearingForm[this.currentWay].title,
b:this.serviceTime,
c:this.detailObj.doorToDoorFee,
d:this.detailObj.taxes,
e:this.detailObj.materialCost,
f:this.detailObj.otherCost,
g:this.totalPrice,
h:this.paymentMode,
i:this.billingIndex,
j:this.isMoney,
k:this.signImage,
m:this.remarkText
}
console.log(params);
}
}
},
// 判空
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,308);
}).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>