+ {{ socketState.isConnect ? customerServiceInfo.title : '网络已断开，请检查网络后刷新重试' }}
+
+
+ '; + } else if (child.nodeName === 'IMG') { + // 有emjio 和 一般图片 + // 图片解析后直接发送，不跟文字表情一组 + if (child.name !== 'emoji') { + let srcReg = /src=[\'\']?([^\'\']*)[\'\']?/i; + let src = child.outerHTML.match(srcReg); + const data = { + from: 'customer', + mode: 'image', + date: new Date().getTime(), + content: { + url: src[1], + path: src[1].replace(/http:\/\/[^\/]*/, ''), + }, + }; + formatInputCallBack && formatInputCallBack(data); + } else { + // 非表情图片跟文字一起发送 + res += child.outerHTML; + } + } else if (child.nodeName === 'DIV') { + res += `
${child.outerHTML}
`;
+ }
+ });
+ if (res) {
+ const data = {
+ from: 'customer',
+ mode: 'text',
+ date: new Date().getTime(),
+ content: {
+ text: filterXSS(res),
+ },
+ };
+ formatInputCallBack && formatInputCallBack(data);
+ }
+ unref(virtualNode).innerHTML = '';
+ };
+
+ /**
+ * 状态回调
+ * @param {*} res -接口返回数据
+ */
+ const callBackNotice = (res) => {
+ ElNotification({
+ title: 'socket',
+ message: res.msg,
+ showClose: true,
+ type: res.error === 0 ? 'success' : 'warning',
+ duration: 1200,
+ });
+ };
+
+ /**
+ * 格式化发送信息
+ * @param {Object} message
+ * @returns obj - 消息对象
+ */
+ const formatInput = (message) => {
+ let obj = {};
+ switch (message.mode) {
+ case 'text':
+ obj = {
+ message_type: 'text',
+ message: message.content.text,
+ };
+ break;
+ case 'image':
+ obj = {
+ message_type: 'image',
+ message: message.content.path,
+ };
+ break;
+ case 'goods':
+ obj = {
+ message_type: 'goods',
+ message: message.content.item,
+ };
+ break;
+ case 'order':
+ obj = {
+ message_type: 'order',
+ message: message.content.item,
+ };
+ break;
+ default:
+ break;
+ }
+ return obj;
+ };
+ /**
+ * 格式化接收信息
+ * @param {*} message
+ * @returns obj - 消息对象
+ */
+ const formatMessage = (message) => {
+ let obj = {};
+ switch (message.message_type) {
+ case 'system':
+ obj = {
+ from: 'system', // 用户customer左 | 顾客customer_service右 | 系统system中间
+ mode: 'system', // goods,order,image,text,system
+ date: message.create_time * 1000, //时间
+ content: {
+ //内容
+ text: message.message,
+ },
+ };
+ break;
+ case 'text':
+ obj = {
+ from: message.sender_identify,
+ mode: message.message_type,
+ date: message.create_time * 1000, //时间
+ sender: message.sender,
+ content: {
+ text: message.message,
+ messageId: message.id,
+ },
+ };
+ break;
+ case 'image':
+ obj = {
+ from: message.sender_identify,
+ mode: message.message_type,
+ date: message.create_time * 1000, //时间
+ sender: message.sender,
+ content: {
+ url: sheep.$url.cdn(message.message),
+ messageId: message.id,
+ },
+ };
+ break;
+ case 'goods':
+ obj = {
+ from: message.sender_identify,
+ mode: message.message_type,
+ date: message.create_time * 1000, //时间
+ sender: message.sender,
+ content: {
+ item: message.message,
+ messageId: message.id,
+ },
+ };
+ break;
+ case 'order':
+ obj = {
+ from: message.sender_identify,
+ mode: message.message_type,
+ date: message.create_time * 1000, //时间
+ sender: message.sender,
+ content: {
+ item: message.message,
+ messageId: message.id,
+ },
+ };
+ break;
+ default:
+ break;
+ }
+ return obj;
+ };
+
+ /**
+ * file 转换为 img
+ * @param {*} file - file 文件
+ * @returns img - img标签
+ */
+ const readImg = (file) => {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ const reader = new FileReader();
+ reader.onload = function (e) {
+ img.src = e.target.result;
+ };
+ reader.onerror = function (e) {
+ reject(e);
+ };
+ reader.readAsDataURL(file);
+ img.onload = function () {
+ resolve(img);
+ };
+ img.onerror = function (e) {
+ reject(e);
+ };
+ });
+ };
+
+ /**
+ * 压缩图片
+ *@param img -被压缩的img对象
+ * @param type -压缩后转换的文件类型
+ * @param mx -触发压缩的图片最大宽度限制
+ * @param mh -触发压缩的图片最大高度限制
+ * @returns blob - 文件流
+ */
+ const compressImg = (img, type = 'image/jpeg', mx = 1000, mh = 1000, quality = 1) => {
+ return new Promise((resolve, reject) => {
+ const canvas = document.createElement('canvas');
+ const context = canvas.getContext('2d');
+ const { width: originWidth, height: originHeight } = img;
+ // 最大尺寸限制
+ const maxWidth = mx;
+ const maxHeight = mh;
+ // 目标尺寸
+ let targetWidth = originWidth;
+ let targetHeight = originHeight;
+ if (originWidth > maxWidth || originHeight > maxHeight) {
+ if (originWidth / originHeight > 1) {
+ // 宽图片
+ targetWidth = maxWidth;
+ targetHeight = Math.round(maxWidth * (originHeight / originWidth));
+ } else {
+ // 高图片
+ targetHeight = maxHeight;
+ targetWidth = Math.round(maxHeight * (originWidth / originHeight));
+ }
+ }
+ canvas.width = targetWidth;
+ canvas.height = targetHeight;
+ context.clearRect(0, 0, targetWidth, targetHeight);
+ // 图片绘制
+ context.drawImage(img, 0, 0, targetWidth, targetHeight);
+ canvas.toBlob(
+ function (blob) {
+ resolve(blob);
+ },
+ type,
+ quality,
+ );
+ });
+ };
+
+ return {
+ compressImg,
+ readImg,
+ formatMessage,
+ formatInput,
+ callBackNotice,
+
+ socketInit,
+ socketSendMsg,
+ socketClose,
+ socketHistoryList,
+
+ getFocus,
+ formatChatInput,
+ onDrop,
+ onPaste,
+ upload,
+
+ getUserToken,
+
+ state,
+
+ socketTest,
+
+ showTime,
+ formatTime,
+ };
+}
diff --git a/pages/commission/apply.vue b/pages/commission/apply.vue
new file mode 100644
index 00000000..174de72a
--- /dev/null
+++ b/pages/commission/apply.vue
@@ -0,0 +1,285 @@
+
+
+
+
+
+ {{ promos.title }}
+
+
+
+
+