版本提交

api/api.js

@@ -20,4 +20,7 @@ let request = new Request().http
  }
  export function iqiyiClickCallback(data) {
  	 return request('/baidu/iqiyiClickCallback',data,'GET');
+ }
+ export function dyClickCallback(data) {
+ 	 return request('/baidu/dyClickCallback',data,'GET');
  }

common/request.js

@@ -2,9 +2,12 @@
 export default class Request {
 	http(router, data = {}, method,contentType) {
 		let that = this;
-		let path = 'http://localhost:8008';
-		// let path = 'http://n9jxvn.natappfree.cc';
+		// let path = 'http://localhost:8008';
+		// let path = 'http://t8756345.natappfree.cc';
+		// let path = 'http://uis.ftrur.com/prod-api';
+		let path = 'https://bd-1.muyii.top/prod-api';
 		// let path = 'https://bd.runtzh.com/prod-api';
+		// let path = 'https://www.jrwlcq.com/prod-api';
 		uni.setStorageSync('requestPath',path)
 		// uni.showLoading({
 		// 	title: '載入中'

manifest.json

@@ -71,8 +71,12 @@
     "h5" : {
         "title" : "H5",
         "router" : {
-            "mode" : "hash",
-			"base" : "./"
+            "mode" : "history",
+            "base" : "/"
+        },
+        "devServer" : {
+            "disableHostCheck" : true,
+            "https" : false
         }
     },
     "vueVersion" : "2"

pages/index/index.vue

@@ -1,9 +1,10 @@
 <template>
   <view class="content" :style="{paddingBottom: paddingBottom}">
-    <view class="item" v-for="(item, index) in json" :class="item.classText.join(' ')" @click="click(item)">
+    <view class="item" v-for="(item, index) in json" :class="item.classText.join(' ')" @click="click(item, 0)">
       <p v-if="item.type === 'h5-text'" :style="item.style">{{ item.content }}</p>
-      <img :ref="'myImage' + index" @load="handleImageLoad(index, item)" v-if="item.type === 'h5-image'"
-           :src="item.url"/>
+      <img :ref="'myImage' + index" @load="handleImageLoad(index, item)" v-if="item.type === 'h5-image'" :src="item.url"/>
+	  <view class="image-child" v-if="item.type === 'h5-image'"></view>
+	  
       <div v-if="item.type === 'h5-sep'" :class="item.classText.join(' ')"></div>
       <div class="countdown2-box"
            :style="{ backgroundImage: item.bgImage && item.bgImage !== '#' ? `url(${item.bgImage})` : '' }"
@@ -21,13 +22,14 @@
             <div v-for="(message, index) in item.messages" :key="index"
                  :class="['message-wrapper', message.sender === 'user' ? 'user-message' : 'agent-message']"
             >
+			
               <div class="avatar">
                 <img :src="message.sender === 'user' ? userAvatar : getAgentAvatar(item)" alt="Avatar"/>
               </div>
               <div class="message-content">
                 <div v-if="message.text" class="message-text" v-html="message.text"></div>
                 <!-- Options buttons -->
-                <div v-if="message.options && message.options.length > 0" class="options-container">
+                <div v-if="message.options && message.options.length > 0 && !message.click" class="options-container">
                   <button
                       v-for="(option, optIndex) in message.options"
                       :key="optIndex"
@@ -42,6 +44,7 @@
                 </div>
               </div>
             </div>
+			<img v-if="item.showButton" :ref="'addButton' + index" @load="handleImageLoad2(index, item)" :style="item.addWxButtonStyle" :src="item.addWxButtonImg" @click.stop="click(item, 1)" style="width: 100%;" />
           </div>
         </div>
       </div>
@@ -50,7 +53,7 @@
 </template>
 <script>
 // 引入Clipboard
-import {getTemplateByNo, getTemplateById, callback, youkuClickCallback, iqiyiClickCallback} from '../../api/api.js'
+import {getTemplateByNo, getTemplateById, baiduClickCallback, callback, youkuClickCallback, iqiyiClickCallback, dyClickCallback} from '../../api/api.js'
 import agentAvatar from '../../static/customer.png'
 import userAvatar from '../../static/profile.png'
 
@@ -72,6 +75,7 @@ export default {
       type: 0,
       show: false,
       name: '',
+	  url: "",
       tel: '',
       accountId: '',
       ip: '',
@@ -87,6 +91,7 @@ export default {
     window.vueInstance = this  // 将 Vue 实例暴露到全局
   },
   onLoad(option) {
+	this.url = window.location.href;
     this.params = option;
     this.no = this.params.no;
     this.id = this.params.tid;
@@ -145,6 +150,13 @@ export default {
         this.impress_id = this.params.impress_id;
         this.sign = this.params.sign;
       }
+      // 巨量（抖音）
+      if (this.type == 3) {
+        this.click_id = this.params.clickid;
+        this.creative_id = this.params.creativeid;
+        this.vid = this.params.adid;
+      }
+	  console.info(this.params.adid)
       this.loadCountdownData();
       this.loadChatMessage();
     },
@@ -173,7 +185,7 @@ export default {
         }
         // 如果有答案就直接用户消息和客服消息
         let nextMsg = h5ChatItem.agentMsg.shift();
-
+		message.click = true;
         h5ChatItem.messages.push({
           id: this.getChatMsgIdMax(),
           sender: 'user',
@@ -212,15 +224,22 @@ export default {
             break;
           }
         }
-
         if (h5ChatItem.agentMsg.length === 0) {
-          await this.delay(1000);
+          await this.delay(200);
+		  if(h5ChatItem.addWxFun){
+			  //显示加微按钮
+			 h5ChatItem.showButton = true; 
+		  }
           h5ChatItem.messages.push({
             id: this.getChatMsgIdMax(),
             sender: 'agent',
-            text: "好的，已经为您分配专业老师。<span style='color:red'>【点击下方按钮】</span>添加老师，获取免费上课链接。!",
+            text: h5ChatItem.lastMsg.map(e => {
+                if(e.type == 0) return e.text;
+                if(e.type == 1) return "<span style='color: red'>"+ e.text +"</span>";
+              }).join(""),
             options: []
           });
+		  
         }
       }catch (err) {
         console.error(err);
@@ -243,6 +262,7 @@ export default {
     // 加载聊天组件的消息
     async loadChatMessage() {
       let h5ChatItem = this.json.filter(e => e.type === 'h5-chat')[0]
+	  if(!h5ChatItem) return;
       h5ChatItem.messages = []
 
       // 先输出所有的欢迎信息，欢迎信息为没有options的数据，以及后面一条数据
@@ -392,17 +412,53 @@ export default {
         this.paddingBottom = clientHeight + "px";
       }
     },
+    handleImageLoad2(index, item) {
+		const imgElement = this.$refs["addButton" + index][0]; // 获取图片 DOM 元素
+		
+		// 1. 获取图片原始宽高
+		const naturalWidth = imgElement.naturalWidth;
+		const naturalHeight = imgElement.naturalHeight;
+		
+		// 2. 获取容器尺寸（假设容器是图片的父元素）
+		const container = imgElement.parentElement;
+		const containerWidth = container.clientWidth;
+		const containerHeight = container.clientHeight;
+		
+		// 3. 计算缩放后的宽高（保持比例）
+		const imageAspectRatio = naturalWidth / naturalHeight; // 原始宽高比
+		const containerAspectRatio = containerWidth / containerHeight; // 容器宽高比
+		
+		let targetWidth, targetHeight;
+		
+		// 根据容器宽高比决定以哪一边为基准缩放
+		if (containerAspectRatio > imageAspectRatio) {
+		  // 容器更宽，以高度为基准
+		  targetHeight = containerHeight;
+		  targetWidth = targetHeight * imageAspectRatio;
+		} else {
+		  // 容器更高，以宽度为基准
+		  targetWidth = containerWidth;
+		  targetHeight = targetWidth / imageAspectRatio;
+		}
+		
+		// 4. 应用缩放后的尺寸
+		imgElement.style.width = `${targetWidth - 16}px`;
+		imgElement.style.height = `${targetHeight}px`;
+    },
     confirm() {
       this.show = false
     },
     clickToWx(workUrl) {
+		if(this.site && this.site.workUrl != null && this.site.workUrl != undefined && this.site.workUrl != ''){
+			workUrl = this.site.workUrl;
+		}
       // 百度
       if (this.type == 0) {
         let data = {
           id: this.id,
           url: window.location.href,
           vid: this.vid,
-          clickType: 67,
+          clickType: 79,
         };
         baiduClickCallback(data).then(e => {
           window.location.href = workUrl + "?customer_channel=" + this.vid;
@@ -417,6 +473,7 @@ export default {
           aid: this.aid,
           clickId: this.click_id,
           ip: this.ip,
+		  clickType: "wechat"
         };
         youkuClickCallback(data).then(e => {
           window.location.href = workUrl + "?customer_channel=" + this.vid;
@@ -448,18 +505,41 @@ export default {
             sign: this.sign,
             clickType: "200"
           };
-          iqiyiClickCallback(data).then(e => {
+          dyClickCallback(data).then(e => {
             window.location.href = workUrl + "?customer_channel=" + this.impress_id;
           })
         }
       }
+      // 爱奇艺
+      if (this.type == 3) {
+		let data = {
+		  url: window.location.href,
+		  id: this.id,
+		  clickId: this.click_id,
+		  creativeId: this.creative_id,
+		  vid:this.vid
+		};
+		dyClickCallback(data).then(e => {
+		  window.location.href = workUrl + "?customer_channel=" + this.vid;
+		})
+      }
+	  
+	  
+	  if (this.type == 99) {
+		  window.location.href = workUrl + "?customer_channel=" + '{"siteId":'+this.id+'}';
+		}
 
     },
-    click(item) {
-      if (!item.addWxFun) {
-        return
-      }
-      this.clickToWx(item.workUrl)
+    click(item, type) {
+		if(type == 0){
+		console.info(item)
+			if (!item.addWxFun || item.type === "h5-chat") {
+			  return
+			}
+			this.clickToWx(item.workUrl)
+		}else{
+			this.clickToWx(item.workUrl)
+		}
     }
   }
 }
@@ -484,6 +564,7 @@ export default {
   flex-direction: column;
   width: 100%;
   box-sizing: border-box;
+  font-weight: bold;
 }
 
 .message-wrapper {
@@ -493,6 +574,9 @@ export default {
   width: auto;
   align-items: flex-start;
 }
+.message-wrapper:last-child{
+	margin-bottom: 0 !important;
+}
 
 .agent-message {
   align-self: flex-start;
@@ -527,6 +611,9 @@ export default {
   min-width: 0;
   width: auto;
 }
+.message-content>.message-text,.message-content .option-button{
+	font-size: 17px;
+}
 
 .message-text {
   padding: 10px 12px;
@@ -639,12 +726,21 @@ input, button {
   min-height: 32px;
 }
 .item {
+	position: relative;
   display: flex;
   flex-direction: column;
   flex: 1;
   margin: 0;
   width: 100%;
-
+	.image-child{
+		position: absolute;
+		top: 0%;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: transparent; /* 设置为透明 */
+		z-index: 1000;
+	}
   img {
     width: 100%;
   }

unpackage/dist/build/web/index.html

@@ -1,15 +1,2 @@
-<!DOCTYPE html><html lang=zh-CN><head><script>window._agl = window._agl || [];
-			(function () {
-				_agl.push(
-					['production', '_f7L2XwGXjyszb4d1e2oxPybgD']
-				);
-				(function () {
-					var agl = document.createElement('script');
-					agl.type = 'text/javascript';
-					agl.async = true;
-					agl.src = 'https://fxgate.baidu.com/angelia/fcagl.js?production=_f7L2XwGXjyszb4d1e2oxPybgD';
-					var s = document.getElementsByTagName('script')[0];
-					s.parentNode.insertBefore(agl, s);
-				})();
-			})();</script><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>H5</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=./static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=./static/js/chunk-vendors.b252c7f4.js></script><script src=./static/js/index.d48b0386.js></script></body></html>
+<!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>H5</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=/static/index.2da1efab.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/static/js/chunk-vendors.c1fa4268.js></script><script src=/static/js/index.09296361.js></script></body></html>