协议签订 更改

master
lion 11 months ago
parent d7d89aa14f
commit 9960f8ea6e

@ -75,22 +75,6 @@
预览协议 预览协议
</view> </view>
</view> </view>
<!-- 协议预览区块 -->
<view class="agreementPreviewSection" v-if="agreementImage">
<view class="sectionTitle">协议预览</view>
<view class="agreementImageContainer">
<image
:src="agreementImage"
class="agreementImage"
mode="aspectFit"
@click="viewAgreementFullscreen">
</image>
</view>
<view class="agreementActions">
<text class="btnRegenerate" @click="regenerateAgreement">重新生成协议</text>
</view>
</view>
</view> </view>
<view class="bottom"> <view class="bottom">
@ -119,7 +103,7 @@
</view> </view>
<view class="popupFooter" v-if="agreementHtml"> <view class="popupFooter" v-if="agreementHtml">
<view class="btnGenerate" <view class="btnGenerate"
@click="generateAgreementImage" @click="handleDirectSubmit"
:class="{ disabled: isGenerating }" :class="{ disabled: isGenerating }"
:disabled="isGenerating"> :disabled="isGenerating">
{{ generateButtonText }} {{ generateButtonText }}
@ -154,7 +138,7 @@
<view class="btnRow btnRowReset" @click="resetPopupSignature">重置</view> <view class="btnRow btnRowReset" @click="resetPopupSignature">重置</view>
<view class="btnRow btnRowSave" @click="savePopupSignature">保存</view> <view class="btnRow btnRowSave" @click="savePopupSignature">保存</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</uni-popup> </uni-popup>
@ -162,7 +146,6 @@
</template> </template>
<script> <script>
import html2canvas from 'html2canvas';
var util = require("../../../../utils/util.js"); var util = require("../../../../utils/util.js");
export default { export default {
data() { data() {
@ -181,19 +164,16 @@
customerSignImage: "", // 客户签名图片 customerSignImage: "", // 客户签名图片
companySignImage: '', // 公司签名图片(固定) companySignImage: '', // 公司签名图片(固定)
// 协议预览相关 // 协议预览相关
agreementImage: "", // 协议图片路径
agreementId: "", // 协议ID
canPreview: false, // 是否可以预览
agreementHtml: "", // 协议HTML内容 agreementHtml: "", // 协议HTML内容
file_id: "", // 协议文件ID pendingAgreementHtml: "", // 待提交的HTML内容(包含完整头部)
// 签名组件配置 // 签名组件配置
penColor: '#000', penColor: '#000',
penSize: 3, penSize: 3,
openSmooth: true, openSmooth: true,
boundingBox: true, boundingBox: true,
// 生成协议按钮状态 // 按钮状态
isGenerating: false, // 是否正在生成协议 isGenerating: false, // 是否正在提交
generateButtonText: '生成协议', // 按钮文本 generateButtonText: '直接提交', // 按钮文本
// 全屏签名弹窗 // 全屏签名弹窗
currentSignatureType: '', currentSignatureType: '',
signaturePopupTitle: '', signaturePopupTitle: '',
@ -206,12 +186,8 @@
that.id = option.id; that.id = option.id;
util.getOrderInfo(option.id, function(r) { util.getOrderInfo(option.id, function(r) {
that.order = r.data; that.order = r.data;
// 初始化公司签名(固定图片) // 初始化公司签名(固定图片)
that.initCompanySign(); that.initCompanySign();
// 检查是否可以预览协议
that.checkCanPreview();
// 检查协议状态一致性
that.checkAgreementConsistency();
}, function(r) { }, function(r) {
}); });
@ -262,12 +238,6 @@
return false; return false;
} }
// 检查是否已生成协议文件
if (!that.file_id) {
util.alert("请先生成协议文件");
return false;
}
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: "确认签订协议?", content: "确认签订协议?",
@ -282,6 +252,42 @@
}); });
}, },
// 处理直接提交(从预览弹窗中调用)
handleDirectSubmit: function() {
var that = this;
// 防重复点击
if (that.isGenerating) {
util.alert('正在提交协议,请稍候...');
return;
}
// 设置按钮状态
that.isGenerating = true;
that.generateButtonText = '提交中...';
// 构建完整的HTML内容
const fullHtml = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>协议</title>
</head>
<body style="font-family: 'SimSun', 'Microsoft YaHei', 'WenQuanYi Zen Hei', sans-serif;">
${that.agreementHtml}
</body>
</html>`;
// 设置待提交的HTML内容
that.pendingAgreementHtml = fullHtml;
// 关闭弹窗并提交
that.closeAgreementPopup();
// 调用提交方法
that.submitAgreement();
},
// 打开全屏签名 // 打开全屏签名
openSignature: function(type){ openSignature: function(type){
this.currentSignatureType = type; this.currentSignatureType = type;
@ -596,12 +602,33 @@
var that = this; var that = this;
// 检查必要参数 // 检查必要参数
if (!that.paramedicSignId || !that.customerSignId || !that.companySignId || !that.file_id) { if (!that.paramedicSignId || !that.customerSignId || !that.companySignId) {
util.alert("请完成所有签名并生成协议文件"); util.alert("请完成所有签名");
return; return;
} }
console.log(that.paramedicSignId,that.customerSignId,that.companySignId,that.file_id)
return // 检查是否有待提交的HTML内容,如果没有则提示
if (!that.pendingAgreementHtml && !that.agreementHtml) {
util.alert("请先预览协议");
return;
}
// 构建完整的HTML内容(如果还没有)
const html = that.pendingAgreementHtml || `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>协议</title>
</head>
<body style="font-family: 'SimSun', 'Microsoft YaHei', 'WenQuanYi Zen Hei', sans-serif;">
${that.agreementHtml}
</body>
</html>`;
// 重置按钮状态
that.isGenerating = false;
that.generateButtonText = '直接提交';
util.request({ util.request({
api: 'manager/create-order-agreements', api: 'manager/create-order-agreements',
method: 'POST', method: 'POST',
@ -613,7 +640,7 @@
customer_sign_id: that.customerSignId, customer_sign_id: that.customerSignId,
// 后端若需要可传固定占位值 // 后端若需要可传固定占位值
company_sign_id: that.companySignId || 'STATIC_COMPANY_SIGN', company_sign_id: that.companySignId || 'STATIC_COMPANY_SIGN',
file_id: that.file_id html: html
}, },
utilSuccess: function(r) { utilSuccess: function(r) {
util.alert("协议签订成功"); util.alert("协议签订成功");
@ -649,80 +676,12 @@
// 打开预览弹窗 // 打开预览弹窗
that.$refs.agreementPopup.open(); that.$refs.agreementPopup.open();
}, },
// 重新生成协议
regenerateAgreement: function() {
var that = this;
uni.showModal({
title: '提示',
content: "确定要重新生成协议吗?",
confirmText: "确定",
confirmColor: "#000",
cancelColor: "#eee",
success(res) {
if (res.confirm) {
// 清除协议相关数据
that.agreementImage = "";
that.file_id = "";
that.agreementId = "";
// 重新打开协议预览
that.previewAgreement();
}
}
});
},
// 协议预览全屏
viewAgreementFullscreen: function() {
var that = this;
if (that.agreementImage) {
uni.previewImage({
current: that.agreementImage,
urls: [that.agreementImage],
zIndex: 9999
});
}
},
// 检查是否可以预览协议
checkCanPreview: function() {
var that = this;
if (that.order.file_id) {
that.canPreview = true;
that.agreementImage = util.HOST + that.order.file_path;
that.agreementId = that.order.file_id;
} else {
that.canPreview = false;
that.agreementImage = "";
that.agreementId = "";
}
},
// 关闭协议预览弹窗 // 关闭协议预览弹窗
closeAgreementPopup: function() { closeAgreementPopup: function() {
this.$refs.agreementPopup.close(); this.$refs.agreementPopup.close();
}, },
// 生成协议 (此方法在弹窗中调用,用于重新生成协议)
generateAgreement: function() {
var that = this;
uni.showModal({
title: '提示',
content: "确定要重新生成协议吗?",
confirmText: "确定",
confirmColor: "#000",
cancelColor: "#eee",
success(res) {
if (res.confirm) {
that.submitAgreement(); // 重新提交协议,会生成新的文件
util.alert('协议已重新生成,请刷新页面查看');
that.closeAgreementPopup(); // 关闭弹窗
}
}
});
},
// 处理协议内容,替换占位符 // 处理协议内容,替换占位符
processAgreementContent: function() { processAgreementContent: function() {
var that = this; var that = this;
@ -776,208 +735,6 @@
that.agreementHtml = content; that.agreementHtml = content;
}, },
// 生成协议图片
generateAgreementImage: function() {
var that = this;
// 防重复点击
if (that.isGenerating) {
util.alert('正在生成协议,请稍候...');
return;
}
// 设置按钮状态
that.isGenerating = true;
that.generateButtonText = '生成中...';
// 添加延迟,防止快速重复点击
setTimeout(() => {
that.startGenerateAgreement();
}, 500);
},
// 开始生成协议的具体逻辑
startGenerateAgreement: function() {
var that = this;
console.log('开始生成协议图片,协议HTML内容:', that.agreementHtml);
console.log('协议HTML内容长度:', that.agreementHtml ? that.agreementHtml.length : 0);
// 使用接口生成协议图片
that.generateAgreementByAPI();
},
// 使用接口生成协议图片
generateAgreementByAPI: function() {
var that = this;
// 构建完整的HTML内容
const fullHtml = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>协议</title>
</head>
<body style="font-family: 'SimSun', 'Microsoft YaHei', 'WenQuanYi Zen Hei', sans-serif;">
${that.agreementHtml}
</body>
</html>`;
console.log('准备发送到接口的HTML内容:', fullHtml);
var user = uni.getStorageSync('userInfo');
// 调用接口生成协议图片
uni.request({
url: util.HOST + 'manager/html-to-image',
method: 'POST',
header: {
'Content-Type': 'application/json',
},
data: {
html: fullHtml,
'token': user.access_token,
},
success: function(res) {
console.log('接口返回结果:', res);
if (res && res.statusCode === 200) {
// 获取生成的图片信息
const imageData = res.data;
that.agreementImage = util.HOST + imageData.public_path;
that.agreementId = imageData.id;
that.file_id = imageData.id;
console.log('协议生成成功:', imageData);
// 重置按钮状态
that.isGenerating = false;
that.generateButtonText = '生成协议';
// 关闭预览窗口
that.closeAgreementPopup();
util.alert('协议生成成功');
} else {
console.log('接口返回错误:', res.data);
that.handleAgreementGenerationError(res.data ? res.data.message : '协议生成失败');
}
},
fail: function(error) {
console.log('接口调用失败:', error);
that.handleAgreementGenerationError('网络请求失败');
}
});
},
// 处理协议生成错误
handleAgreementGenerationError: function(errorMessage) {
var that = this;
// 重置按钮状态
that.isGenerating = false;
that.generateButtonText = '生成协议';
util.alert(errorMessage || '协议生成失败,请稍后重试');
},
// 上传协议图片
uploadAgreementImage: function(file) {
var that = this;
var user = uni.getStorageSync('userInfo');
if (!user || !user.access_token) {
util.alert('用户未登录或token无效');
return;
}
// 将File对象转换为临时路径
const reader = new FileReader();
reader.onload = function(e) {
const tempPath = e.target.result;
uni.uploadFile({
url: util.HOST + 'manager/upload-image',
filePath: tempPath,
name: 'file',
formData: {
'token': user.access_token,
'folder': 'public'
},
success(res) {
if (res.statusCode == "200") {
try {
var mod = JSON.parse(res.data);
console.log('协议图片上传成功:', mod);
// 设置协议图片和ID
that.agreementImage = util.HOST + mod.public_path;
that.file_id = mod.id;
// 关闭弹窗
that.closeAgreementPopup();
util.alert('协议生成成功');
} catch (error) {
console.log('解析上传响应失败:', error);
util.alert('协议生成失败:响应格式错误');
// 重置按钮状态
that.isGenerating = false;
that.generateButtonText = '生成协议';
}
} else {
util.alert('协议生成失败:' + res.statusCode);
// 重置按钮状态
that.isGenerating = false;
that.generateButtonText = '生成协议';
}
},
fail(res) {
console.log('协议图片上传失败:', res);
util.alert('协议生成失败:网络错误');
// 重置按钮状态
that.isGenerating = false;
that.generateButtonText = '生成协议';
}
});
};
reader.readAsDataURL(file);
},
// 提交协议
submitAgreement: function() {
var that = this;
// 检查必要参数
if (!that.paramedicSignId || !that.customerSignId || !that.companySignId || !that.file_id) {
util.alert("请完成所有签名并生成协议文件");
return;
}
util.request({
api: 'manager/create-order-agreements',
method: 'POST',
data: {
order_id: that.id,
paramedic_id: that.order.paramedic_id,
paramedic_sign_id: that.paramedicSignId,
customer_id: that.order.customer_id,
customer_sign_id: that.customerSignId,
// 后端若需要可传固定占位值
company_sign_id: that.companySignId || 'STATIC_COMPANY_SIGN',
file_id: that.file_id
},
utilSuccess: function(r) {
util.alert("协议签订成功");
uni.navigateTo({
url: "/pages/order/order"
});
},
utilFail: function(r) {
util.alert(r);
}
});
},
// 预览协议 // 预览协议
previewAgreement: function() { previewAgreement: function() {
@ -1002,151 +759,6 @@
that.$refs.agreementPopup.open(); that.$refs.agreementPopup.open();
}, },
// 重新生成协议
regenerateAgreement: function() {
var that = this;
uni.showModal({
title: '提示',
content: "确定要重新生成协议吗?",
confirmText: "确定",
confirmColor: "#000",
cancelColor: "#eee",
success(res) {
if (res.confirm) {
// 清除协议相关数据
that.agreementImage = "";
that.file_id = "";
that.agreementId = "";
// 重新打开协议预览
that.previewAgreement();
}
}
});
},
// 协议预览全屏
viewAgreementFullscreen: function() {
var that = this;
if (that.agreementImage) {
uni.previewImage({
current: that.agreementImage,
urls: [that.agreementImage],
zIndex: 9999
});
}
},
// 检查是否可以预览协议
checkCanPreview: function() {
var that = this;
if (that.order.file_id) {
that.canPreview = true;
that.agreementImage = util.HOST + that.order.file_path;
that.agreementId = that.order.file_id;
} else {
that.canPreview = false;
that.agreementImage = "";
that.agreementId = "";
}
},
// 关闭协议预览弹窗
closeAgreementPopup: function() {
this.$refs.agreementPopup.close();
},
// 生成协议 (此方法在弹窗中调用,用于重新生成协议)
generateAgreement: function() {
var that = this;
uni.showModal({
title: '提示',
content: "确定要重新生成协议吗?",
confirmText: "确定",
confirmColor: "#000",
cancelColor: "#eee",
success(res) {
if (res.confirm) {
that.submitAgreement(); // 重新提交协议,会生成新的文件
util.alert('协议已重新生成,请刷新页面查看');
that.closeAgreementPopup(); // 关闭弹窗
}
}
});
},
// 处理协议内容,替换占位符
processAgreementContent: function() {
var that = this;
let content = that.order.project.content;
// 获取签名图片的样式(正向显示)
const getSignatureImgStyle = function(imagePath) {
if (!imagePath) return '';
// 统一使用正向显示,不进行旋转
return 'vertical-align: middle; display: inline-block; width: 50px; height: 20px; margin: 0 5px;';
};
// 定义占位符映射
const placeholders = {
'paramedic_sign': that.paramedicSignImage ? `<img src="${that.paramedicSignImage}" alt="护工签名" style="${getSignatureImgStyle(that.paramedicSignImage)}">` : '',
'customer_sign': that.customerSignImage ? `<img src="${that.customerSignImage}" alt="客户签名" style="${getSignatureImgStyle(that.customerSignImage)}">` : '',
'company_sign': `<img class="company-stamp" src="${that.companySignImage}" alt="公司签名" style="display: inline-block;width: 80px;height: 80px;position: relative;left: -150px;margin: 0 5px;vertical-align: middle;">`,
'manage_sign': `<img class="company-stamp" src="${that.companySignImage}" alt="公司签名" style="display: inline-block; width: 80px;height: 80px;position: relative;left: -150px;margin: 0 5px;vertical-align: middle;">`,
'paramedic_sign2': that.paramedicSignImage ? `<img src="${that.paramedicSignImage}" alt="护工签名" style="${getSignatureImgStyle(that.paramedicSignImage)} margin-right: 54px;">` : '',
'customer_sign2': that.customerSignImage ? `<img src="${that.customerSignImage}" alt="客户签名" style="${getSignatureImgStyle(that.customerSignImage)} margin-right: 54px;">` : '',
'manage_sign2': `<img class="company-stamp" src="${that.companySignImage}" alt="公司签名" style="display: inline-block; width: 80px;height: 80px;position: relative;left: -150px;vertical-align: middle; margin: 0 5px; margin-right: 54px;">`,
'paramedic_sign_id': that.paramedicSignId || '',
'customer_sign_id': that.customerSignId || '',
'company_sign_id': that.companySignId || 'STATIC_COMPANY_SIGN',
'days': that.order.days || '',
'price': that.order.price || '',
'total': that.order.total || '',
'range_mobile': (that.order.project && that.order.project.range_mobile) || '',
'complaint_mobile': (that.order.project && that.order.project.complaint_mobile) || '',
'today_date': (() => {
const today = new Date();
return today.getFullYear() + '年' + (today.getMonth() + 1) + '月' + today.getDate() + '日';
})()
};
// 替换所有占位符,包括被HTML标签包裹的情况
Object.keys(placeholders).forEach(key => {
// 匹配 {key} 或 {<span>key</span>} 等复杂情况
const regex = new RegExp(`\\{([^}]*${key}[^}]*)\\}`, 'g');
const matches = content.match(regex);
if (matches && matches.length > 0) {
content = content.replace(regex, placeholders[key]);
}
});
// 清理text-wrap-mode: nowrap样式
content = content.replace(/text-wrap-mode:\s*nowrap;?/gi, '');
content = content.replace(/text-wrap-mode:\s*nowrap/gi, '');
that.agreementHtml = content;
},
// 生成协议图片
generateAgreementImage: function() {
var that = this;
// 防重复点击
if (that.isGenerating) {
util.alert('正在生成协议,请稍候...');
return;
}
// 设置按钮状态
that.isGenerating = true;
that.generateButtonText = '生成中...';
// 添加延迟,防止快速重复点击
setTimeout(() => {
that.startGenerateAgreement();
}, 500);
}
} }
} }
</script> </script>
@ -1660,4 +1272,3 @@
} }
} }
</style> </style>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1,2 +1,2 @@
<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>护工管理</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)')) <!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>护工管理</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/h5/static/index.883130ca.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/h5/static/js/chunk-vendors.2916c8b2.js></script><script src=/h5/static/js/index.402d305a.js></script></body></html> document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/h5/static/index.883130ca.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/h5/static/js/chunk-vendors.2916c8b2.js></script><script src=/h5/static/js/index.31cd4916.js></script></body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save