Commit 8450d4db authored by 罗超's avatar 罗超

Merge branch 'master' of http://gitlab.oytour.com/luochao/confucius into master

parents 183715f0 2a8a74d1
...@@ -12,7 +12,7 @@ export default { ...@@ -12,7 +12,7 @@ export default {
<style> <style>
@import url('~assets/css/font.css'); @import url('~assets/css/font.css');
@import url('//at.alicdn.com/t/font_2077629_a7sx3iejpat.css'); @import url('//at.alicdn.com/t/font_2077629_d6aa14tmbq.css');
html, html,
body, body,
......
...@@ -109,5 +109,19 @@ export function GetStudentInfo(data) { ...@@ -109,5 +109,19 @@ export function GetStudentInfo(data) {
}) })
} }
/**
* 获取付款码
*
*/
export function GenerateOrder(data) {
return request({
url: '/WeChatPay/GenerateOrder',
method: 'post',
data
})
}
...@@ -188,16 +188,15 @@ ...@@ -188,16 +188,15 @@
padding: 0!important; padding: 0!important;
height:20px; height:20px;
} }
</style> </style>
<template> <template>
<div class="TcConfirmMain"> <div class="TcConfirmMain">
<div class="TCdiv_content" :class="dialogVisible?'CisHideen':''"> <div class="TCdiv_content">
<!-- 签字 --> <!-- 签字 -->
<div class="signSpan"> <div class="signSpan">
<div @click="isShowSignDiv=true,dialogVisible=true" :class="dialogVisible?'CisHideen':''" class="sign"> <div @click="goSign()" class="sign">
<span style="padding:0;"><i style="font-size:1.2rem" class="iconfont icon-qianming"></i></span> <span style="padding:0;"><i style="font-size:1.2rem" class="iconfont icon-qianming"></i></span>
<span style="font-size:1.2rem;margin-left:0.2rem;" v-if="msg.Sign==''||msg.Sign==null">签字</span> <span style="font-size:1.2rem;margin-left:0.2rem;" v-if="dataList.Sign==''||dataList.Sign==null">签字</span>
<span style="font-size:1.2rem;margin-left:0.2rem;" v-else>重新签字</span> <span style="font-size:1.2rem;margin-left:0.2rem;" v-else>重新签字</span>
</div> </div>
</div> </div>
...@@ -387,7 +386,7 @@ ...@@ -387,7 +386,7 @@
<span style="width:50px;display:inline-block;text-align:center;" class="comConInput">{{dataList.SealDateDay}}</span> <span style="width:50px;display:inline-block;text-align:center;" class="comConInput">{{dataList.SealDateDay}}</span>
</p> </p>
<div style="margin-top:100px;position:relative;"> <div style="margin-top:100px;position:relative;">
乙方签字(盖章):<img v-if="dataList.Sign" :src="dataList.Sign" style="width:45px;position:absolute;top:-30px;" /> 乙方签字(盖章):<img v-if="dataList.Sign" :src="dataList.Sign" style="width:80px;position:absolute;top:-15px;" />
</div> </div>
<p style="margin:40px 0 30px 0;"> <p style="margin:40px 0 30px 0;">
<span style="width:50px;display:inline-block;text-align:center;" class="comConInput">{{dataList.StuSignYear}}</span> <span style="width:50px;display:inline-block;text-align:center;" class="comConInput">{{dataList.StuSignYear}}</span>
...@@ -769,46 +768,13 @@ ...@@ -769,46 +768,13 @@
<div class="comConInput" style="width:50px;"></div> <div class="comConInput" style="width:50px;"></div>
</div> </div>
</div> </div>
</div>
</div>
</div>
<div class="CliSignDiv" :class="dialogVisible?'isShowSign':''" @touchmove.prevent>
<div class="CliSignDiv" style="height:100%;background:#fff;z-index:100">
<div class="CanvasDiv">
<div class="dash">
<div id="canvas" style="position:relative;top:0;">
</div>
</div>
</div>
<div class="bottom" style="text-align:center;height:60px;line-height:60px">
<el-row>
<el-col :span="12">
<div style="width:100%;" @click="handelClearEl()">
<span style="font-size:1.2rem;color:rgb(36, 173, 229)" class="iconfont icon-zhongzhi"></span>
<span style="font-size:1.2rem">重置签名</span>
</div>
</el-col>
<el-col :span="12">
<div style="width:100%;" @click="handelSaveEl()">
<span style="font-size:1.2rem;color:rgb(36, 173, 229)" class="iconfont icon-dagou"></span>
<span style="font-size:1.2rem">完成签名</span>
</div>
</el-col>
</el-row>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment'
let canvas = document.createElement("canvas");
let cxt = canvas.getContext("2d");
import { import {
SetEducationContractSign,
GetEducationContractInfo GetEducationContractInfo
} from '../api/sale/contract' } from '../api/sale/contract'
...@@ -817,13 +783,6 @@ ...@@ -817,13 +783,6 @@
return { return {
dataList: [], dataList: [],
dialogVisible: false, dialogVisible: false,
linewidth: 5, //线条粗细,选填
color: "black", //线条颜色,选填
background: "#fff", //线条背景,选填
msg: {
ContractId: 0,
Sign: ''
},
gmsg: { gmsg: {
ContractId: 0 ContractId: 0
}, },
...@@ -836,7 +795,6 @@ ...@@ -836,7 +795,6 @@
this.gmsg.ContractId = this.$route.query.ContractId; this.gmsg.ContractId = this.$route.query.ContractId;
this.getList(); this.getList();
} }
}, },
methods: { methods: {
//获取数据 //获取数据
...@@ -850,73 +808,18 @@ ...@@ -850,73 +808,18 @@
ChangeTab(num) { ChangeTab(num) {
this.ActiveTab = num; this.ActiveTab = num;
}, },
getCanvas() { //跳转至合同签名
let el = document.getElementById("canvas"); goSign(){
el.appendChild(canvas); this.$router.push({
canvas.width = el.clientWidth; path: '/contractSign',
canvas.height = el.clientHeight; query: {
//cxt.fillStyle = this.background; //填充绘图的背景颜色 ContractId: this.gmsg.ContractId,
cxt.fillStyle = 'rgba(255, 255, 255, 0)'; Money:this.dataList.Money
cxt.fillRect(0, 0, canvas.width, canvas.height); //绘制“已填色”的矩形 }
cxt.strokeStyle = this.color; //笔触的颜色 });
cxt.lineCap = "round"; //线条末端线帽的样式
let linewidth = this.linewidth;
//开始绘制
canvas.addEventListener(
"touchstart",
function (e) {
cxt.beginPath();
cxt.lineWidth = linewidth; //当前线条的宽度,以像素计
cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}.bind(this),
false
);
//绘制中
canvas.addEventListener(
"touchmove",
function (e) {
cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
cxt.stroke();
}.bind(this),
false
);
//结束绘制
canvas.addEventListener(
"touchend",
function () {
cxt.closePath();
}.bind(this),
false
);
},
handelClearEl() {
cxt.clearRect(0, 0, canvas.width, canvas.height);
},
handelSaveEl() {
let imgBase64 = canvas.toDataURL();
this.msg.Sign = imgBase64;
this.msg.ContractId = this.$route.query.ContractId;
this.SaveMsg();
},
//提交数据
SaveMsg() {
SetEducationContractSign(this.msg).then(res => {
if (res.Code == 1) {
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: '保存成功!',
position: 'top'
})
this.dialogVisible = false;
this.getList();
}
})
} }
}, },
mounted() { mounted() {
this.getCanvas();
} }
}; };
......
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
.Contract_TwoDiv { .Contract_TwoDiv {
width: 100%; width: 100%;
height: 28rem; height: 28rem;
margin-top:50px; margin-top: 50px;
background-color: #F3F9FC; background-color: #F3F9FC;
text-align: center; text-align: center;
color: #111111; color: #111111;
...@@ -38,25 +38,27 @@ ...@@ -38,25 +38,27 @@
.contractTotal { .contractTotal {
font-size: 20px; font-size: 20px;
padding-top:50px; padding-top: 50px;
} }
.contractMoney { .contractMoney {
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
margin-top:10px; margin-top: 10px;
} }
.contractTwoCode{
width:180px; .contractTwoCode {
height:180px; width: 180px;
border:1px solid #d1d1d1; height: 180px;
margin:20px auto; margin: 20px auto;
} }
.TwoCodeRemind{
color:#888888; .TwoCodeRemind {
font-size:20px; color: #888888;
margin-top:20px; font-size: 18px;
margin-top: 20px;
} }
</style> </style>
<template> <template>
<div class="ContractPay"> <div class="ContractPay">
...@@ -65,42 +67,71 @@ ...@@ -65,42 +67,71 @@
</div> </div>
<div class="Contract_TwoDiv"> <div class="Contract_TwoDiv">
<div class="contractTotal">合同总价</div> <div class="contractTotal">合同总价</div>
<div class="contractMoney">10000.00</div> <div class="contractMoney">{{Money}}</div>
<div class="contractTwoCode"> <div class="contractTwoCode" id="qrcode" ref="qrcode">
</div> </div>
<div class="TwoCodeRemind">长按识别上图收款码,完成支付</div> <div class="TwoCodeRemind">长按识别上图收款码,完成支付</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {
GenerateOrder
} from '../api/sale/contract'
import QRCode from 'qrcodejs2'
export default { export default {
data() { data() {
return { return {
dataList: [], msg: {
contractId: 0
},
Money:0,
dataList: {}
}; };
}, },
created() { created() {
},
mounted() {
if (this.$route.query.contractId) {
this.msg.contractId = this.$route.query.contractId;
this.getList();
}
if(this.$route.query.Money){
this.Money = this.$route.query.Money;
}
}, },
methods: { methods: {
//获取数据 //获取数据
getList() { getList() {
// GetEducationContractInfo(this.gmsg).then(res => { GenerateOrder(this.msg).then(res => {
// if (res.Code == 1) { if (res.Code == 1) {
// this.dataList = res.Data; this.dataList = res.Data;
// } this.qrcode(this.dataList.code_url);
// }) }
}).catch((e) => {
})
},
qrcode(code_url) {
let qrcode = new QRCode('qrcode', {
width: 180,
height: 180, // 高度
text: code_url // 二维码内容
})
}, },
//跳转至合同详情 //跳转至合同详情
goContractConfirm(){ goContractConfirm() {
this.$router.push({ this.$router.push({
path: 'contractConfirm', path: 'contractConfirm',
query: {} query: {
ContractId: this.msg.contractId
}
}); });
} }
}, },
mounted() {}
}; };
</script> </script>
<style>
.loadingtext {
transform: rotate(-90deg);
color: red;
}
.signature .Sign_Item {
-webkit-transform: rotate(-90deg);
}
.signature .Sign_Text {
text-align: center;
}
.signature .boardBox {
width: 100vw;
height: 90vh;
background: #f9f9f9;
}
.signature .sigfn_Bar {
box-sizing: border-box;
padding: 0rem 1rem;
display: flex;
width: 100vw;
height: 10vh;
background-color: #ffffff;
justify-content: space-around;
align-items: center;
}
.signature .icoDicv{
width:40px;
height:40px;
background: gray;
border-radius: 50%;
color:#fff;
text-align: center;
line-height: 40px;
}
.signature .icoDicv i{
font-size:25px;
}
</style>
<template>
<div class="signature" @touchmove.prevent>
<div class="boardBox" ref="boardBox">
<canvas ref="board" id="canvas" @touchstart="mStart" @touchmove="mMove" @touchend="mEnd"></canvas>
</div>
<div class="sigfn_Bar">
<div class="Sign_Item" @click="goback">
<div class="icoDicv">
<i class="iconfont icon-tuichu"></i>
</div>
<div class="Sign_Text">退出</div>
</div>
<div class="Sign_Item" @click="clearcanvas">
<div class="icoDicv">
<i class="iconfont icon-zhongzhi"></i>
</div>
<div class="Sign_Text">重绘</div>
</div>
<div class="Sign_Item" @click="getcanvas">
<div class="icoDicv" style="background:red;">
<i class="iconfont icon-xiazai"></i>
</div>
<div class="Sign_Text">保存</div>
</div>
</div>
</div>
</template>
<script>
import {
SetEducationContractSign
} from '../api/sale/contract'
export default {
data() {
return {
familysignatureurl: "",
basedata: "",
ctx: null,
point: {
x: 0,
y: 0,
},
moving: false, // 是否正在绘制中且移动
msg:{
ContractId: 0,
Sign:''
},
Money:0
};
},
mounted() {
let board = this.$refs.board; // 获取DOM
board.width = this.$refs.boardBox.offsetWidth; // 设置画布宽
board.height = this.$refs.boardBox.offsetHeight; // 设置画布高
this.ctx = board.getContext("2d"); // 二维绘图
this.ctx.strokeStyle = "#000"; // 颜色
this.ctx.lineWidth = 5; // 线条宽度
if (this.$route.query.ContractId) {
this.msg.ContractId = this.$route.query.ContractId;
}
if (this.$route.query.Money){
this.Money = this.$route.query.Money;
}
},
methods: {
// 触摸(开始)
mStart(e) {
let x = e.touches[0].clientX - e.target.offsetLeft,
y = e.touches[0].clientY - e.target.offsetTop; // 获取触摸点在画板(canvas)的坐标
this.point.x = x;
this.point.y = y;
this.ctx.beginPath();
this.moving = true;
},
// 滑动中...
mMove(e) {
if (this.moving) {
let x = e.touches[0].clientX - e.target.offsetLeft,
y = e.touches[0].clientY - e.target.offsetTop; // 获取触摸点在画板(canvas)的坐标
this.ctx.moveTo(this.point.x, this.point.y); // 把路径移动到画布中的指定点,不创建线条(起始点)
this.ctx.lineTo(x, y); // 添加一个新点,然后创建从该点到画布中最后指定点的线条,不创建线条
this.ctx.stroke(); // 绘制
(this.point.x = x), (this.point.y = y); // 重置点坐标为上一个坐标
}
},
// 滑动结束
mEnd() {
if (this.moving) {
this.ctx.closePath(); // 停止绘制
this.moving = false; // 关闭绘制开关
}
},
getcanvas() {
//绘画转图片
document.getElementById("canvas").toDataURL("image/png");
document.getElementById("canvas").toBlob(async (blobObj) => {
var file1 = new File([blobObj], "pic.png", {
type: blobObj.type,
lastModified: Date.now(),
});
this.convertImg(file1);
});
},
//旋转图片
convertImg(file) {
let _this = this;
var canvas1 = document.createElement("canvas");
var context1 = canvas1.getContext("2d");
var oReader = new FileReader();
oReader.readAsDataURL(file);
oReader.onload = function (e) {
var img = new Image();
img.src = e.target.result;
img.onload = function () {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制
var maxWidth = 1080,
maxHeight = 1080;
// 目标尺寸
var targetWidth = originWidth,
targetHeight = originHeight;
// 图片尺寸超过300x300的限制
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
targetWidth = maxWidth;
targetHeight = Math.round(
maxWidth * (originHeight / originWidth)
);
} else {
targetHeight = maxHeight;
targetWidth = Math.round(
maxHeight * (originWidth / originHeight)
);
}
}
var type = "image/jpeg";
// canvas对图片进行缩放
canvas1.width = targetHeight;
canvas1.height = targetWidth;
// 旋转90度
context1.translate(0, 0);
context1.rotate(Math.PI / 2);
// (0,-imgHeight) 从旋转原理图那里获得的起始点
// context.clearRect(0, -targetHeight, targetWidth, targetHeight);
context1.drawImage(img, 0, -targetHeight, targetWidth, targetHeight);
// 将canvas的透明背景设置成白色
var imageData = context1.getImageData(
0,
0,
canvas1.width,
canvas1.height
);
for (var i = 0; i < imageData.data.length; i += 4) {
// 当该像素是透明的,则设置成白色
if (imageData.data[i + 3] == 0) {
imageData.data[i] = 255;
imageData.data[i + 1] = 255;
imageData.data[i + 2] = 255;
imageData.data[i + 3] = 255;
}
}
context1.putImageData(imageData, 0, 0);
var dataurl = canvas1.toDataURL(type);
// _this.basedata = dataurl;
_this.msg.Sign = canvas1.toDataURL(type);
_this.SaveMsg();
};
};
},
//提交数据
SaveMsg() {
SetEducationContractSign(this.msg).then(res => {
if (res.Code == 1) {
this.$q.notify({
icon: 'iconfont icon-chenggong',
color: 'accent',
timeout: 2000,
message: '保存成功!',
position: 'top'
})
this.$router.push({
path: '/contractPay',
query: {
contractId: this.msg.ContractId,
Money: this.Money
}
});
}
})
},
//base64转Blob
base64ToBlob(base64Data) {
let arr = base64Data.split(","),
fileType = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
l = bstr.length,
u8Arr = new Uint8Array(l);
while (l--) {
u8Arr[l] = bstr.charCodeAt(l);
}
return new Blob([u8Arr], {
type: fileType,
});
},
//清除画布
clearcanvas() {
var c = document.getElementById("canvas");
var cxt = c.getContext("2d");
c.height = c.height;
this.ctx.lineWidth = 3;
},
//返回上一级
goback() {
this.$router.push({
path: '/contractConfirm',
query: {
ContractId: this.msg.ContractId
}
});
},
},
};
</script>
...@@ -683,7 +683,7 @@ ...@@ -683,7 +683,7 @@
<div class="contractInput" style="width:50px;">{{dataList.SealDateDay}}</div> <div class="contractInput" style="width:50px;">{{dataList.SealDateDay}}</div>
</div> </div>
<div class="contractContent" style="margin-top:150px;position:relative;"> <div class="contractContent" style="margin-top:150px;position:relative;">
乙方签字(盖章):<img style="width:50px;position:absolute;top:-40px;" :src="dataList.Sign" /> 乙方签字(盖章):<img style="width:80px;position:absolute;" :src="dataList.Sign" />
</div> </div>
<div class="contractContent" style="text-align:right;margin-top:150px;"> <div class="contractContent" style="text-align:right;margin-top:150px;">
<div class="contractInput" style="width:50px;">{{dataList.StuSignYear}}</div> <div class="contractInput" style="width:50px;">{{dataList.StuSignYear}}</div>
......
...@@ -1591,6 +1591,12 @@ ...@@ -1591,6 +1591,12 @@
this.msg.RB_Branch_Id = this.msg.RB_Branch_Id == 0 ? this.getLocalStorage().School_Id : this.msg this.msg.RB_Branch_Id = this.msg.RB_Branch_Id == 0 ? this.getLocalStorage().School_Id : this.msg
.RB_Branch_Id; .RB_Branch_Id;
} }
let userInfo = this.getLocalStorage()
if(!this.$route.query.companyID&&userInfo.Group_Id==100000){
this.msg.RB_Branch_Id = 4
}
if (this.orderObj && this.orderObj.companyIDList && this.orderObj.companyIDList.length > 0) { if (this.orderObj && this.orderObj.companyIDList && this.orderObj.companyIDList.length > 0) {
this.msg.RB_Branch_Id = this.orderObj.companyIDList[0]; this.msg.RB_Branch_Id = this.orderObj.companyIDList[0];
} else if (this.$route.query.companyID) { } else if (this.$route.query.companyID) {
...@@ -1982,6 +1988,7 @@ ...@@ -1982,6 +1988,7 @@
let second = myDate.getSeconds() < 10 ? "0" + myDate.getSeconds() : myDate.getSeconds(); let second = myDate.getSeconds() < 10 ? "0" + myDate.getSeconds() : myDate.getSeconds();
this.timer = hour + ':' + minute + ':' + second; this.timer = hour + ':' + minute + ':' + second;
// this.financeinfo_post_GetList(TCID); // this.financeinfo_post_GetList(TCID);
if (this.$route.query.edit) { if (this.$route.query.edit) {
// 编辑 // 编辑
this.msg.FrID = this.$route.query.FrID; this.msg.FrID = this.$route.query.FrID;
......
...@@ -1607,6 +1607,10 @@ ...@@ -1607,6 +1607,10 @@
this.msg.RB_Branch_Id = this.msg.RB_Branch_Id == 0 || this.msg.RB_Branch_Id == ParentCompanyId ? this this.msg.RB_Branch_Id = this.msg.RB_Branch_Id == 0 || this.msg.RB_Branch_Id == ParentCompanyId ? this
.getLocalStorage().School_Id : this.msg.RB_Branch_Id; .getLocalStorage().School_Id : this.msg.RB_Branch_Id;
if(!this.$route.query.companyID&&userInfo.Group_Id==100000){
this.msg.RB_Branch_Id = 4
}
if (this.orderObj && this.orderObj.companyIDList && this.orderObj.companyIDList.length > 0) { if (this.orderObj && this.orderObj.companyIDList && this.orderObj.companyIDList.length > 0) {
this.msg.RB_Branch_Id = this.orderObj.companyIDList[0]; this.msg.RB_Branch_Id = this.orderObj.companyIDList[0];
} else if (this.$route.query.companyID) { } else if (this.$route.query.companyID) {
...@@ -1841,6 +1845,7 @@ ...@@ -1841,6 +1845,7 @@
this.timer = hour + ':' + minute + ':' + second; this.timer = hour + ':' + minute + ':' + second;
this.IsUploadPic = this.$route.query.IsUploadPic; this.IsUploadPic = this.$route.query.IsUploadPic;
this.msg.Cmd = this.$route.query.Cmd ? this.$route.query.Cmd : ''; this.msg.Cmd = this.$route.query.Cmd ? this.$route.query.Cmd : '';
this.getCompany(); this.getCompany();
if (this.$route.query.edit) { if (this.$route.query.edit) {
this.edit = this.$route.query.edit; this.edit = this.$route.query.edit;
......
...@@ -726,6 +726,11 @@ const routes = [{ ...@@ -726,6 +726,11 @@ const routes = [{
component: () => component: () =>
import("pages/contractConfirm.vue") import("pages/contractConfirm.vue")
}, },
{
path: '/contractSign', //合同签名页面
component: () =>
import("pages/contractSign.vue")
},
{ {
path: "/contractPay", path: "/contractPay",
component: () => component: () =>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment