smartSum.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
  8. <title>智能总结</title>
  9. <!--引入 element-ui 的样式,-->
  10. <link rel="stylesheet"
  11. href="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742018383195/element-ui.css">
  12. <!-- 必须先引入vue, 后使用element-ui -->
  13. <script
  14. src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017957144/vue.js"></script>
  15. <!-- 引入element 的组件库-->
  16. <script
  17. src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017747738/element-ui.js"></script>
  18. <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  19. <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
  20. <!-- <script src="js/vconsole.min.js"></script>
  21. <script>
  22. var vConsole = new window.VConsole();
  23. </script> -->
  24. </head>
  25. <style>
  26. body {
  27. margin: 0;
  28. padding: 0;
  29. }
  30. .box {
  31. width: 100vw;
  32. height: auto;
  33. box-sizing: border-box;
  34. background: linear-gradient(180deg, #FAFCFF 0%, #FAFAFA 100%);
  35. }
  36. .page6 {
  37. width: 100vw;
  38. height: 100vh;
  39. padding: 15px;
  40. box-sizing: border-box;
  41. }
  42. .ai_title {
  43. display: flex;
  44. align-items: center;
  45. font-weight: 500;
  46. font-size: 16px;
  47. color: #222222;
  48. padding-bottom: 10px;
  49. }
  50. .title_point {
  51. width: 4px;
  52. height: 4px;
  53. background: #1677FF;
  54. border-radius: 2px;
  55. margin-right: 5px;
  56. }
  57. .sum_content {
  58. font-weight: 400;
  59. font-size: 14px;
  60. line-height: 28px;
  61. background: #FFFFFF;
  62. color: #222222;
  63. padding: 15px;
  64. border-radius: 10px;
  65. margin-bottom: 15px;
  66. }
  67. .day_title {
  68. font-weight: 500;
  69. font-size: 14px;
  70. color: #1677FF;
  71. line-height: 28px;
  72. }
  73. .mater_title {
  74. font-weight: 500;
  75. font-size: 14px;
  76. color: #222222;
  77. line-height: 28px;
  78. }
  79. .mater_link {
  80. width: 100%;
  81. background: #FAFAFA;
  82. padding: 10px;
  83. border-radius: 10px;
  84. display: flex;
  85. align-items: center;
  86. box-sizing: border-box;
  87. }
  88. .mater_link img {
  89. width: 47px;
  90. height: 47px;
  91. border-radius: 5px;
  92. margin-right: 10px;
  93. }
  94. .link_content {
  95. display: flex;
  96. flex-direction: column;
  97. }
  98. .link_title {
  99. font-weight: 500;
  100. font-size: 14px;
  101. color: #222222;
  102. line-height: 20px;
  103. padding-bottom: 10px;
  104. }
  105. .link_des {
  106. font-weight: 400;
  107. font-size: 12px;
  108. color: #999999;
  109. line-height: 12px;
  110. }
  111. .model_img {
  112. width: 100%;
  113. height: auto;
  114. }
  115. .send_btn {
  116. background: #1677FF;
  117. border-radius: 10px;
  118. font-weight: 500;
  119. font-size: 16px;
  120. color: #FFFFFF;
  121. text-align: center;
  122. padding: 12px 0;
  123. line-height: 22px;
  124. margin-top: 15px;
  125. }
  126. .ok_btn {
  127. background: #CCCCCC;
  128. border-radius: 10px;
  129. font-weight: 500;
  130. font-size: 16px;
  131. color: #FFFFFF;
  132. text-align: center;
  133. padding: 12px 0;
  134. line-height: 22px;
  135. margin-top: 15px;
  136. }
  137. </style>
  138. <body>
  139. <div id="box" class="box">
  140. <div class="page6">
  141. <div class="ai_title">
  142. <span class="title_point"></span>
  143. <span>AI总结:</span>
  144. </div>
  145. <div class="sum_content">
  146. {{summarytData.summary}}
  147. </div>
  148. <div class="ai_title">
  149. <span class="title_point"></span>
  150. <span>AI跟进建议:</span>
  151. </div>
  152. <div class="sum_content" v-for="(item, index) in summarytData.suggestList" :key="index">
  153. <div class="day_title">第{{item.day}}天:{{item.title}}</div>
  154. <div class="mater_title">参考话术:</div>
  155. <div>{{item.contentText}}</div>
  156. <div class="mater_title" v-if="item.model">推荐内容:</div>
  157. <div class="mater_link" v-if="item.model && item.model.matterType === 5">
  158. <img :src="item.model.imgUrl" alt="">
  159. <div class="link_content">
  160. <div class="link_title">{{item.model.linkTitle}}</div>
  161. <div class="link_des">{{item.model.linkDescription}}</div>
  162. </div>
  163. </div>
  164. <div v-if="item.model && item.model.matterType === 1">
  165. <img class="model_img" :src="item.model.imgUrl" alt="">
  166. </div>
  167. <div :class="item.status ? 'ok_btn' : 'send_btn'" @click="handleSend(item.status, index)">{{item.status ? '已完成' : '一键发送'}}</div>
  168. </div>
  169. </div>
  170. </div>
  171. </body>
  172. <script>
  173. new Vue({
  174. el: '#box',
  175. data() {
  176. return {
  177. httpUrl: '',
  178. bId: null,
  179. env: '',
  180. memberId: null,
  181. summarytData: {},
  182. }
  183. },
  184. created() {
  185. this.bId = this.getQueryParam('bId')
  186. this.env = this.getQueryParam('env')
  187. if (!this.env || this.env === 'prod') {
  188. this.httpUrl = 'https://wlapi.wefanbot.com'
  189. } else {
  190. this.httpUrl = 'http://test.wefanbot.com:18993'
  191. }
  192. if (this.getQueryParam('memberId')) {
  193. // 已授权
  194. this.memberId = this.getQueryParam('memberId')
  195. this.getAiSummary()
  196. } else {
  197. // 授权
  198. this.getAuth()
  199. }
  200. // this.memberId = "woU17nDAAAfzP9lzjd-G8iwCiveKR8GA"
  201. // this.getAiSummary()
  202. },
  203. methods: {
  204. getAuth() {
  205. fetch(this.httpUrl + `/p/insuite/p/getRedirectUri?env=${this.env}&bId=${this.bId}`)
  206. .then(res => {
  207. return res.json()
  208. }).then(result => {
  209. let { data, code, msg } = result
  210. if (code === 1) {
  211. window.location.replace(data)
  212. } else {
  213. this.$message({
  214. message: msg,
  215. type: 'warning'
  216. })
  217. }
  218. })
  219. },
  220. getAiSummary() {
  221. fetch(this.httpUrl + '/scrm/v1/wxcp-chat-tool/p/aiSummary', {
  222. method: 'post',
  223. body: JSON.stringify({
  224. bid: this.bId,
  225. memberId: this.memberId,
  226. }),
  227. headers: {
  228. 'Content-Type': 'application/json'
  229. }
  230. }).then(res => {
  231. return res.json()
  232. }).then(result => {
  233. let { data, code, msg } = result
  234. if (code === 1) {
  235. this.summarytData = data
  236. if (this.summarytData.suggestList && this.summarytData.suggestList.length > 0) {
  237. this.summarytData.suggestList.forEach(item => {
  238. this.$set(item,'status', false)
  239. })
  240. }
  241. } else {
  242. this.$message({
  243. message: msg,
  244. type: 'warning'
  245. })
  246. }
  247. })
  248. },
  249. handleSend(status, index) {
  250. if (status) {
  251. return
  252. }
  253. this.summarytData.suggestList.forEach((item, i) => {
  254. if (index === i) {
  255. this.$set(item, 'status', true)
  256. this.$message({
  257. message: '发送成功',
  258. type: 'success'
  259. })
  260. }
  261. })
  262. },
  263. // 截取url中的数据
  264. getQueryParam(paramName) {
  265. // 获取当前URL的查询字符串部分
  266. const queryString = window.location.search;
  267. // 创建一个URLSearchParams对象
  268. const urlParams = new URLSearchParams(queryString);
  269. // 返回指定参数的值,如果不存在则返回null
  270. return urlParams.get(paramName);
  271. },
  272. }
  273. })
  274. </script>
  275. </html>