zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
始于初见
2024-12-27 12:32:22 +08:00
parent 4e30937b54
commit 33709c76be
4 changed files with 375 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -34,7 +34,7 @@
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-cropperjs": "^3.0.0", "vue-cropperjs": "^3.0.0",
"vue-i18n": "^8.10.0", "vue-i18n": "^8.10.0",
"vue-paypal-checkout": "^3.2.0", "vue-paypal-checkout": "latest",
"vue-pdf": "^4.3.0", "vue-pdf": "^4.3.0",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.3", "vue-router": "^3.0.3",

68
src/components/page/components/pendingPayment/PayPalButton copy.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<div>
<PayPal
currency="USD"
:client="paypal"
:amount="amount"
:env="env"
@payment-authorized="onPaymentSuccess"
@payment-completed="onPaymentError"
>
</PayPal>
</div>
</template>
<script>
import PayPal from 'vue-paypal-checkout';
export default {
data() {
return {
paypal: {
sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
},
// myItems: [
// {
// name: 'hat',
// quantity: '1',
// price: '5',
// currency: 'USD'
// },
// {
// name: 'handbag',
// // description: "Black handbag.",
// quantity: '1',
// price: '5',
// currency: 'USD'
// }
// ],
amount: '9.99', // Amount to be paid
env: 'sandbox'
};
},
components: {
PayPal
},
methods: {
onPaymentSuccess(payment) {
try {
console.log('Payment successful!', payment);
this.$emit('payment-success', payment);
} catch (error) {
console.error('Error in onPaymentSuccess callback:', error);
}
},
onPaymentError(error) {
try {
console.error('Payment error:', error);
this.$emit('payment-error', error);
} catch (err) {
console.error('Error in onPaymentError callback:', err);
}
}
}
};
</script>
<style scoped></style>

91
src/components/page/components/pendingPayment/PayPalButton.vue
View File

@@ -1,24 +1,35 @@
<template> <template>
<div> <div>
<PayPal <PayPal
currency="USD" currency="USD"
:client="paypal" :client="paypal"
:amount="amount" :amount="amount"
:env="env" :env="env"
:commit="true"
:on-success="onPaymentSuccess" @payment-authorized="onPaymentSuccess"
:on-error="onPaymentError" @payment-completed="onPaymentCompleted"
@payment-cancelled="onPaymentCancel"
locale="en_US"
:button-style="myStyle"
:token="paymentToken"
:paypal-button="paypalButton"
> >
</PayPal> </PayPal>
</div> </div>
</template> </template>
<!-- paymentID= "PAY-3L661344P7749433KLD2R5ZQ" -->
<script> <script>
import PayPal from 'vue-paypal-checkout'; import PayPal from 'vue-paypal-checkout';
export default { export default {
data() { data() {
return { return {
myStyle: {
label: 'checkout',
size: 'responsive',
shape: 'pill',
color: 'blue'
},
paymentToken: '2S842212TP193105C', // 存储自定义的 token
paypal: { paypal: {
sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr', sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE' production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
@@ -26,7 +37,6 @@ export default {
// myItems: [ // myItems: [
// { // {
// name: 'hat', // name: 'hat',
// quantity: '1', // quantity: '1',
// price: '5', // price: '5',
// currency: 'USD' // currency: 'USD'
@@ -46,17 +56,68 @@ export default {
components: { components: {
PayPal PayPal
}, },
created() {
// this.fetchCustomToken();
},
methods: { methods: {
onPaymentSuccess(payment) { // 配置 PayPal 按钮（传递自定义的 token）
alert(payment) paypalButton(data, actions) {
console.log('Payment successful!', payment); return actions.payment.create({
// Handle successful payment here transactions: [
this.$emit('payment-success', payment); {
amount: {
total: '20.00',
currency: 'USD'
},
custom: this.paymentToken // 将自定义 token 作为 custom 数据传递
}
]
});
}, },
onPaymentError(error) { async fetchCustomToken() {
console.error('Payment error:', error); try {
// Handle payment error here this.customToken = '2S842212TP193105C'; // 假设返回的 JSON 里有 token 字段
this.$emit('payment-error', error); } catch (error) {}
},
onPaymentSuccess(payment) {
try {
console.log('Payment successful Button!', payment);
// this.$emit('payment-success', payment);
// const token = this.paymentToken;
// // 使用token进行支付处理
// paypal.payment.execute(token, (error, payment) => {
// console.log('payment at line 73:', payment)
// if (error) {
// // 处理错误
// console.error('Error in onPaymentSuccess callback:', error);
// } else {
// // 处理支付成功的情况
// console.log('Payment successful Button!', payment);
// }
// });
} catch (error) {
console.error('Error in onPaymentSuccess callback:', error);
}
},
onPaymentCompleted(error) {
try {
console.error('Payment paymentCompleted Button:', error);
this.$emit('payment-error', error);
} catch (err) {
console.error('Error in paymentCompleted callback:', err);
}
},
onPaymentCancel(error) {
try {
console.error('Payment cancel Button:', error);
this.$emit('payment-error', error);
} catch (err) {
console.error('Error in onPaymentCancel callback:', err);
}
} }
} }
}; };

458
src/components/page/components/table/word.vue
View File

@@ -386,256 +386,254 @@ export default {
content_css: 'default', content_css: 'default',
setup(ed) { setup(ed) {
if(!_this.readonly){ if (!_this.readonly) {
ed.on('click', function (e) { ed.on('click', function (e) {
// 判断点击的是否是目标元素 // 判断点击的是否是目标元素
const target = e.target; const target = e.target;
console.log('target at line 351:', target); console.log('target at line 351:', target);
if (target.classList.contains('isRemarkIcon')) { if (target.classList.contains('isRemarkIcon')) {
_this.$emit('onComment', target.getAttribute('main-id')); _this.$emit('onComment', target.getAttribute('main-id'));
} }
}); });
// // 添加批注按钮 // // 添加批注按钮
ed.ui.registry.addButton('addImageButton', { ed.ui.registry.addButton('addImageButton', {
text: 'Add Figure', text: 'Add Figure',
icon: 'comment', icon: 'comment',
onAction: function () { onAction: function () {
_this.$emit('add', img); _this.$emit('add', img);
// const selection = ed.selection; // const selection = ed.selection;
// const selectedNode = selection.getNode(); // 获取选中的节点 // const selectedNode = selection.getNode(); // 获取选中的节点
// console.log('selectedNode at line 333:', selectedNode); // console.log('selectedNode at line 333:', selectedNode);
// if (selectedNode) { // if (selectedNode) {
// const comment = prompt('Enter your comment:'); // const comment = prompt('Enter your comment:');
// if (comment) { // if (comment) {
// const dataId = selectedNode.getAttribute('main-id'); // const dataId = selectedNode.getAttribute('main-id');
// _this.comments.push({ text: comment, time: new Date().getTime(), mId: dataId }); // _this.comments.push({ text: comment, time: new Date().getTime(), mId: dataId });
// } // }
// } else { // } else {
// alert('Please select some text to comment on.'); // alert('Please select some text to comment on.');
// } // }
} }
}); });
ed.on('dragstart', (e) => { ed.on('dragstart', (e) => {
// 阻止拖动事件 // 阻止拖动事件
e.preventDefault(); e.preventDefault();
}); });
// 监听焦点变化并高亮当前选中的元素 // 监听焦点变化并高亮当前选中的元素
ed.on('focus', function () { ed.on('focus', function () {
if (!isDeleting) { if (!isDeleting) {
// 处理正常的焦点逻辑 // 处理正常的焦点逻辑
ed.getBody().style.outline = 'none'; // 当编辑器获取焦点时，移除焦点框 ed.getBody().style.outline = 'none'; // 当编辑器获取焦点时，移除焦点框
_this.updateCurrentTag(ed);
}
});
// 监听焦点变化并高亮当前选中的元素
ed.on('selectionChange', function () {
_this.updateCurrentTag(ed); _this.updateCurrentTag(ed);
} });
});
// 监听焦点变化并高亮当前选中的元素
ed.on('selectionChange', function () {
_this.updateCurrentTag(ed);
});
ed.on('mouseup', function () { ed.on('mouseup', function () {
_this.updateCurrentTag(ed); _this.updateCurrentTag(ed);
}); });
ed.on('blur', function () { ed.on('blur', function () {
console.log('_this.lastPTag at line 367:', _this.lastTag); console.log('_this.lastPTag at line 367:', _this.lastTag);
if (_this.lastTag) { if (_this.lastTag) {
_this.lastTag.style.backgroundColor = ''; // 清除之前的高亮 _this.lastTag.style.backgroundColor = ''; // 清除之前的高亮
_this.lastTag.style.border = '';
_this.lastTag = null;
}
if (wordButtonContainer) {
wordButtonContainer.remove();
wordButtonContainer = null;
}
});
ed.on('drop', (event, index) => {
console.log('event at line 375:', event);
const selection = ed.selection;
const selectedNode = selection.getNode(); // 获取选中的节点
console.log('1899', selectedNode); // 查看光标位置的节点类型
// 向上遍历直到找到带有 main-id 属性的节点
const findParentWithMainId = (node) => {
while (node) {
if (node.hasAttribute && node.classList.contains('pMain')) {
return node; // 找到并返回该节点
}
node = node.parentNode; // 向上遍历父节点
}
return null; // 如果没有找到，返回 null
};
// 查找选中节点的父节点，直到找到带有 main-id 属性的节点
const nodeWithMainId = findParentWithMainId(selectedNode);
console.log('at line 395:', nodeWithMainId);
const dataId = nodeWithMainId.getAttribute('main-id');
event.preventDefault();
hideDeleteButton();
// 获取拖动的数据
_this.$emit('onDrop', event, dataId); // 阻止默认的行为
// 在编辑器中插入数据
// const content = <div class="dropped-item">${itemData}</div>;
// ed.insertContent(content); // 插入文本或HTML
});
// 方法：更新当前选中的 p 标签的样式
_this.updateCurrentTag = function (ed) {
var selection = ed.selection;
var node = selection.getNode();
// 向上查找包含的节点直到找到合适的标签
if (node && !node.classList.contains('pMain')) {
node = node.closest('.pMain'); // 向上找到最近的包含 'aa' 类的标签
}
if (node && node.classList.contains('pMain')) {
// 清除上一个高亮的节点样式
if (_this.lastTag && _this.lastTag !== node) {
_this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
_this.lastTag.style.border = ''; _this.lastTag.style.border = '';
_this.lastTag = null;
} }
if (wordButtonContainer) {
wordButtonContainer.remove();
wordButtonContainer = null;
}
});
ed.on('drop', (event, index) => {
console.log('event at line 375:', event);
// 设置当前节点的背景色和边框 const selection = ed.selection;
node.style.backgroundColor = 'rgb(0 102 153 / 10%)'; const selectedNode = selection.getNode(); // 获取选中的节点
node.style.border = '2px dashed rgb(0 102 153 / 50%)'; console.log('1899', selectedNode); // 查看光标位置的节点类型
// 更新选中的节点 // 向上遍历直到找到带有 main-id 属性的节点
var currentNode = node; const findParentWithMainId = (node) => {
while (node) {
if (node.hasAttribute && node.classList.contains('pMain')) {
return node; // 找到并返回该节点
}
node = node.parentNode; // 向上遍历父节点
}
return null; // 如果没有找到，返回 null
};
// 显示删除按钮 // 查找选中节点的父节点，直到找到带有 main-id 属性的节点
showDeleteButton(currentNode); const nodeWithMainId = findParentWithMainId(selectedNode);
console.log('at line 395:', nodeWithMainId);
// 更新 lastTag const dataId = nodeWithMainId.getAttribute('main-id');
_this.lastTag = node; event.preventDefault();
} else {
// 如果没有找到包含 'aa' 类的节点，隐藏删除按钮
hideDeleteButton(); hideDeleteButton();
} // 获取拖动的数据
}; _this.$emit('onDrop', event, dataId); // 阻止默认的行为
function hideDeleteButton() { // 在编辑器中插入数据
if (wordButtonContainer) { // const content = <div class="dropped-item">${itemData}</div>;
wordButtonContainer.remove(); // 移除删除按钮 // ed.insertContent(content); // 插入文本或HTML
wordButtonContainer = null; // 清空按钮引用
}
}
function showDeleteButton(paragraph) {
if (wordButtonContainer) {
wordButtonContainer.remove(); // 如果已有按钮容器，移除
}
// 获取 <p> 标签的位置信息
const paragraphRect = paragraph.getBoundingClientRect();
const iframe = ed.getDoc().defaultView.frameElement;
const iframeRect = iframe.getBoundingClientRect();
var left = 0;
if (_this.isEditComment) {
left = 100;
} else {
left = 80;
}
// 创建按钮容器 div
wordButtonContainer = document.createElement('div');
wordButtonContainer.style.position = 'absolute';
wordButtonContainer.style.top = `${iframeRect.top + paragraphRect.top + window.scrollY - 20}px`; // 确保按钮容器位于 <p> 标签旁边
wordButtonContainer.style.left = `${iframeRect.left + paragraphRect.left + paragraphRect.width - left}px`;
wordButtonContainer.style.zIndex = '9999'; // 设置更高的值
wordButtonContainer.style.display = 'flex'; // 使用 flex 布局将按钮水平排列
wordButtonContainer.style.alignItems = 'center'; // 垂直居中
// 创建删除按钮
const deleteButton = document.createElement('button');
deleteButton.style.backgroundColor = 'red';
deleteButton.style.color = 'white';
deleteButton.style.border = 'none';
deleteButton.style.borderRadius = '50%';
deleteButton.style.padding = '5px';
deleteButton.style.cursor = 'pointer';
deleteButton.style.marginLeft = '10px'; // 给批注按钮添加间距
const deleteIcon = document.createElement('i');
deleteIcon.classList.add('el-icon-delete'); // 使用 Element UI 删除图标
deleteIcon.style.fontSize = '20px';
deleteIcon.style.color = '#fff'; // 设置图标颜色
deleteButton.appendChild(deleteIcon);
deleteButton.addEventListener('mousedown', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
_this.$emit('onDelete', paragraph.getAttribute('main-id'));
}); });
// 方法：更新当前选中的 p 标签的样式
_this.updateCurrentTag = function (ed) {
var selection = ed.selection;
var node = selection.getNode();
// 创建批注按钮 // 向上查找包含的节点直到找到合适的标签
const editButton = document.createElement('button'); if (node && !node.classList.contains('pMain')) {
editButton.style.backgroundColor = 'rgb(19, 188, 32)'; node = node.closest('.pMain'); // 向上找到最近的包含 'aa' 类的标签
editButton.style.color = 'white';
editButton.style.border = 'none';
editButton.style.borderRadius = '50%';
editButton.style.padding = '5px';
editButton.style.marginLeft = '10px'; // 给批注按钮添加间距
editButton.style.cursor = 'pointer';
const editIcon = document.createElement('i');
editIcon.classList.add('el-icon-edit'); // 使用 Element UI 批注图标
editIcon.style.fontSize = '20px';
editIcon.style.color = '#fff'; // 设置图标颜色
editButton.appendChild(editIcon);
editButton.addEventListener('mousedown', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
// 触发批注事件
_this.$emit('onEdit', paragraph.getAttribute('main-id'));
});
// 将按钮添加到容器中
wordButtonContainer.appendChild(editButton);
wordButtonContainer.appendChild(deleteButton);
if (_this.isEditComment) {
// 创建批注按钮
const commentButton = document.createElement('button');
commentButton.style.backgroundColor = '#2b81ef';
commentButton.style.color = 'white';
commentButton.style.border = 'none';
commentButton.style.borderRadius = '50%';
commentButton.style.padding = '5px';
commentButton.style.marginLeft = '10px'; // 给批注按钮添加间距
commentButton.style.cursor = 'pointer';
const commentIcon = document.createElement('i');
commentIcon.classList.add('el-icon-chat-dot-square'); // 使用 Element UI 批注图标
commentIcon.style.fontSize = '20px';
commentIcon.style.color = '#fff'; // 设置图标颜色
commentButton.appendChild(commentIcon);
commentButton.addEventListener('mousedown', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
// 触发批注事件
_this.$emit('onAddComment', paragraph.getAttribute('main-id'));
if (wordButtonContainer) {
wordButtonContainer.remove(); // 移除删除按钮
wordButtonContainer = null; // 清空按钮引用
} }
});
wordButtonContainer.appendChild(commentButton); if (node && node.classList.contains('pMain')) {
} // 清除上一个高亮的节点样式
if (_this.lastTag && _this.lastTag !== node) {
_this.lastTag.style.backgroundColor = ''; // 清除上一个高亮的标签样式
_this.lastTag.style.border = '';
}
wordButtonContainer.classList.add('wordButtonContainer'); // 给按钮 // 设置当前节点的背景色和边框
// 将容器添加到页面中 node.style.backgroundColor = 'rgb(0 102 153 / 10%)';
document.body.appendChild(wordButtonContainer); node.style.border = '2px dashed rgb(0 102 153 / 50%)';
}
ed.on('mousedown', function (e) { // 更新选中的节点
// 检查点击的位置是否是删除按钮或选中的 <p> 标签 var currentNode = node;
if (!currentParagraph || (e.target !== wordButtonContainer && !currentParagraph.contains(e.target))) {
// 显示删除按钮
showDeleteButton(currentNode);
// 更新 lastTag
_this.lastTag = node;
} else {
// 如果没有找到包含 'aa' 类的节点，隐藏删除按钮
hideDeleteButton();
}
};
function hideDeleteButton() {
if (wordButtonContainer) { if (wordButtonContainer) {
wordButtonContainer.remove(); // 移除删除按钮 wordButtonContainer.remove(); // 移除删除按钮
wordButtonContainer = null; // 清空按钮引用 wordButtonContainer = null; // 清空按钮引用
} }
} }
}); function showDeleteButton(paragraph) {
if (wordButtonContainer) {
wordButtonContainer.remove(); // 如果已有按钮容器，移除
}
// 获取 <p> 标签的位置信息
const paragraphRect = paragraph.getBoundingClientRect();
const iframe = ed.getDoc().defaultView.frameElement;
const iframeRect = iframe.getBoundingClientRect();
var left = 0;
if (_this.isEditComment) {
left = 100;
} else {
left = 80;
}
// 创建按钮容器 div
wordButtonContainer = document.createElement('div');
wordButtonContainer.style.position = 'absolute';
wordButtonContainer.style.top = `${iframeRect.top + paragraphRect.top + window.scrollY - 20}px`; // 确保按钮容器位于 <p> 标签旁边
wordButtonContainer.style.left = `${iframeRect.left + paragraphRect.left + paragraphRect.width - left}px`;
wordButtonContainer.style.zIndex = '9999'; // 设置更高的值
wordButtonContainer.style.display = 'flex'; // 使用 flex 布局将按钮水平排列
wordButtonContainer.style.alignItems = 'center'; // 垂直居中
// 创建删除按钮
const deleteButton = document.createElement('button');
deleteButton.style.backgroundColor = 'red';
deleteButton.style.color = 'white';
deleteButton.style.border = 'none';
deleteButton.style.borderRadius = '50%';
deleteButton.style.padding = '5px';
deleteButton.style.cursor = 'pointer';
deleteButton.style.marginLeft = '10px'; // 给批注按钮添加间距
const deleteIcon = document.createElement('i');
deleteIcon.classList.add('el-icon-delete'); // 使用 Element UI 删除图标
deleteIcon.style.fontSize = '20px';
deleteIcon.style.color = '#fff'; // 设置图标颜色
deleteButton.appendChild(deleteIcon);
deleteButton.addEventListener('mousedown', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
_this.$emit('onDelete', paragraph.getAttribute('main-id'));
});
// 创建批注按钮
const editButton = document.createElement('button');
editButton.style.backgroundColor = 'rgb(19, 188, 32)';
editButton.style.color = 'white';
editButton.style.border = 'none';
editButton.style.borderRadius = '50%';
editButton.style.padding = '5px';
editButton.style.marginLeft = '10px'; // 给批注按钮添加间距
editButton.style.cursor = 'pointer';
const editIcon = document.createElement('i');
editIcon.classList.add('el-icon-edit'); // 使用 Element UI 批注图标
editIcon.style.fontSize = '20px';
editIcon.style.color = '#fff'; // 设置图标颜色
editButton.appendChild(editIcon);
editButton.addEventListener('mousedown', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
// 触发批注事件
_this.$emit('onEdit', paragraph.getAttribute('main-id'));
});
// 将按钮添加到容器中
wordButtonContainer.appendChild(editButton);
wordButtonContainer.appendChild(deleteButton);
if (_this.isEditComment) {
// 创建批注按钮
const commentButton = document.createElement('button');
commentButton.style.backgroundColor = '#2b81ef';
commentButton.style.color = 'white';
commentButton.style.border = 'none';
commentButton.style.borderRadius = '50%';
commentButton.style.padding = '5px';
commentButton.style.marginLeft = '10px'; // 给批注按钮添加间距
commentButton.style.cursor = 'pointer';
const commentIcon = document.createElement('i');
commentIcon.classList.add('el-icon-chat-dot-square'); // 使用 Element UI 批注图标
commentIcon.style.fontSize = '20px';
commentIcon.style.color = '#fff'; // 设置图标颜色
commentButton.appendChild(commentIcon);
commentButton.addEventListener('mousedown', function (e) {
e.stopImmediatePropagation();
e.preventDefault();
// 触发批注事件
_this.$emit('onAddComment', paragraph.getAttribute('main-id'));
if (wordButtonContainer) {
wordButtonContainer.remove(); // 移除删除按钮
wordButtonContainer = null; // 清空按钮引用
}
});
wordButtonContainer.appendChild(commentButton);
}
wordButtonContainer.classList.add('wordButtonContainer'); // 给按钮
// 将容器添加到页面中
document.body.appendChild(wordButtonContainer);
}
ed.on('mousedown', function (e) {
// 检查点击的位置是否是删除按钮或选中的 <p> 标签
if (!currentParagraph || (e.target !== wordButtonContainer && !currentParagraph.contains(e.target))) {
if (wordButtonContainer) {
wordButtonContainer.remove(); // 移除删除按钮
wordButtonContainer = null; // 清空按钮引用
}
}
});
} }
}, },
init_instance_callback: (editor) => { init_instance_callback: (editor) => {