WeCom.html 45 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512
  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. <!-- 引入样式文件 -->
  10. <link rel="stylesheet"
  11. href="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012584633/vant.css" />
  12. <link rel="stylesheet" href="css/select-tag.css">
  13. <!-- 必须先引入vue, 后使用vant-ui -->
  14. <script
  15. src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017957144/vue.js"></script>
  16. <!-- 引入vant的组件库-->
  17. <!-- 引入 Vant 的 JS 文件 -->
  18. <script
  19. src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012748487/vant.min.js"></script>
  20. <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  21. <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
  22. <script src="js/select-tag.js"></script>
  23. <!-- <script src="js/vconsole.min.js"></script>
  24. <script>
  25. var vConsole = new window.VConsole();
  26. </script> -->
  27. </head>
  28. <style>
  29. body {
  30. margin: 0;
  31. padding: 0;
  32. }
  33. .box {
  34. width: 100vw;
  35. height: 100vh;
  36. height: calc(100vh - constant(safe-area-inset-top));
  37. height: calc(100vh - env(safe-area-inset-top));
  38. box-sizing: border-box;
  39. background: #F7F9FC;
  40. }
  41. .page5 {
  42. width: 100vw;
  43. height: 100vh;
  44. height: calc(100vh - constant(safe-area-inset-top));
  45. height: calc(100vh - env(safe-area-inset-top));
  46. box-sizing: border-box;
  47. }
  48. .tabbar {
  49. width: 100%;
  50. height: 46px;
  51. background: #FFFFFF;
  52. box-shadow: 0px -10px 20px 1px rgba(62,89,132,0.03);
  53. border-radius: 20px 20px 0px 0px;
  54. position: fixed;
  55. bottom: 0;
  56. left: 0;
  57. z-index: 2;
  58. font-size: 10px;
  59. color: #858F9B;
  60. margin-bottom: constant(safe-area-inset-bottom);
  61. margin-bottom: env(safe-area-inset-bottom);
  62. }
  63. .tabbar_box {
  64. display: flex;
  65. justify-content: space-between;
  66. align-items: center;
  67. padding: 0 60px;
  68. }
  69. .tabbar_item {
  70. display: flex;
  71. flex-direction: column;
  72. align-items: center;
  73. }
  74. .tabbar_text {
  75. font-size: 10px;
  76. color: #7D97BF;
  77. line-height: 15px;
  78. }
  79. .tabbar_text_active {
  80. font-size: 10px;
  81. line-height: 15px;
  82. color: #136DFB;
  83. }
  84. .tabbar_img {
  85. width: 32px;
  86. height: 32px;
  87. }
  88. .home_bg {
  89. width: 100%;
  90. height: 240px;
  91. position: absolute;
  92. top: 0;
  93. left: 0;
  94. z-index: 1;
  95. }
  96. .home_bg img{
  97. width: 100%;
  98. height: 100%;
  99. }
  100. .home_box {
  101. position: absolute;
  102. top: 94px;
  103. left: 0;
  104. z-index: 2;
  105. width: 100%;
  106. height: auto;
  107. /* padding-bottom: 46px; */
  108. }
  109. .task_content {
  110. padding: 0 15px 46px;
  111. }
  112. .wel_tip {
  113. font-weight: bold;
  114. font-size: 16px;
  115. color: #222222;
  116. line-height: 27px;
  117. padding-left: 15px;
  118. padding-bottom: 30px;
  119. }
  120. .task_box {
  121. padding: 15px 9px;
  122. background: linear-gradient( 180deg, rgba(255,255,255,0.8) 0%, #FFFFFF 100%);
  123. border-radius: 15px;
  124. border: 1px solid #FFFFFF;
  125. box-sizing: border-box;
  126. margin-bottom: 15px;
  127. }
  128. .task_top {
  129. display: flex;
  130. justify-content: space-between;
  131. align-items: center;
  132. padding-bottom: 15px;
  133. }
  134. .task_top_left {
  135. display: flex;
  136. align-items: center;
  137. font-weight: 500;
  138. font-size: 14px;
  139. color: #222222;
  140. line-height: 20px;
  141. }
  142. .task_top_left img{
  143. width: 20px;
  144. height: 20px;
  145. margin-right: 5px;
  146. }
  147. .task_top_right {
  148. display: flex;
  149. align-items: center;
  150. font-size: 12px;
  151. color: #136DFB;
  152. line-height: 17px;
  153. }
  154. .task_top_right img{
  155. width: 16px;
  156. height: 16px;
  157. }
  158. .notask_tip {
  159. font-size: 12px;
  160. color: #CCCCCC;
  161. line-height: 17px;
  162. padding-top: 55px;
  163. text-align: center;
  164. }
  165. .task_list {
  166. gap: 10px;
  167. display: flex;
  168. flex-direction: column;
  169. }
  170. .task_item {
  171. background: #F5F8FC;
  172. border-radius: 10px;
  173. display: flex;
  174. padding: 10px 20px 15px 10px;
  175. display: flex;
  176. align-items: center;
  177. }
  178. .task_item_left {
  179. display: flex;
  180. flex-direction: column;
  181. }
  182. .task_item_left_top {
  183. display: flex;
  184. align-items: center;
  185. font-size: 12px;
  186. color: #666666;
  187. }
  188. .task_item_left_top img{
  189. width: 18px;
  190. height: 18px;
  191. margin-right: 5px;
  192. border-radius: 50%;
  193. }
  194. .task_item_left_bottom {
  195. font-size: 12px;
  196. color: #222222;
  197. line-height: 17px;
  198. padding-top: 10px;
  199. width: 240px;
  200. overflow: hidden;
  201. white-space: nowrap;
  202. text-overflow: ellipsis;
  203. }
  204. .task_item_CLIENT_LOG {
  205. height: 17px;
  206. }
  207. .task_item_CLIENT_LOG div{
  208. font-size: 12px;
  209. color: #222222;
  210. line-height: 17px;
  211. padding-top: 10px;
  212. width: 240px; /* 必须设置宽度 */
  213. overflow: hidden;
  214. white-space: nowrap;
  215. text-overflow: ellipsis;
  216. }
  217. .task_item_line {
  218. width: 1px;
  219. height: 40px;
  220. margin: 0 15px;
  221. background: linear-gradient( 180deg, rgba(217,219,227,0) 0%, #D9DBE3 49%, rgba(217,219,227,0) 100%);
  222. }
  223. .task_item_right {
  224. font-size: 12px;
  225. color: #136DFB;
  226. line-height: 17px;
  227. white-space: nowrap;
  228. }
  229. .client_box_title {
  230. display: flex;
  231. align-items: center;
  232. font-weight: 500;
  233. font-size: 14px;
  234. color: #222222;
  235. line-height: 20px;
  236. margin-bottom: 10px;
  237. }
  238. .time_box {
  239. display: flex;
  240. align-items: center;
  241. font-size: 12px;
  242. color: #FFFFFF;
  243. background: #136DFB;
  244. border-radius: 5px;
  245. padding: 2px 4px 2px;
  246. margin-left: 10px;
  247. height: 20px;
  248. box-sizing: border-box;
  249. }
  250. .time_box img {
  251. width: 16px;
  252. height: 16px;
  253. }
  254. .time_box span {
  255. padding-left: 2px;
  256. }
  257. .client_box {
  258. display: flex;
  259. align-items: center;
  260. gap: 10px;
  261. }
  262. .client_data_item {
  263. width: 168px;
  264. height: 86px;
  265. padding: 15px 10px;
  266. box-sizing: border-box;
  267. }
  268. .client_all {
  269. background-image: url('./img/qw/client_all.png');
  270. background-size: 100% 100%;
  271. }
  272. .client_add {
  273. background-image: url('./img/qw/client_add.png');
  274. background-size: 100% 100%;
  275. }
  276. .client_title {
  277. font-size: 12px;
  278. color: #666666;
  279. line-height: 17px;
  280. }
  281. .client_num {
  282. font-weight: bold;
  283. font-size: 20px;
  284. line-height: 29px;
  285. padding-top: 10px;
  286. }
  287. .client_all_color {
  288. color: #136DFB;
  289. }
  290. .client_add_color {
  291. color: #FFA041;
  292. }
  293. .date_box {
  294. width: 162px;
  295. padding: 10px;
  296. background: #FFFFFF;
  297. box-shadow: 0px 3px 6px 1px rgba(62,89,132,0.05);
  298. border-radius: 8px;
  299. display: flex;
  300. flex-wrap: wrap;
  301. gap: 10px;
  302. box-sizing: border-box;
  303. }
  304. .date_item {
  305. width: 66px;
  306. font-size: 12px;
  307. color: #222222;
  308. line-height: 17px;
  309. padding: 8px 0;
  310. background: #F7F9FC;
  311. border-radius: 8px;
  312. text-align: center;
  313. }
  314. .date_active {
  315. width: 66px;
  316. font-size: 12px;
  317. color: #FFFFFF;
  318. line-height: 17px;
  319. padding: 8px 0;
  320. background: #136DFB;
  321. border-radius: 8px;
  322. text-align: center;
  323. }
  324. .client_top {
  325. width: 100%;
  326. position: absolute;
  327. top: 0;
  328. left: 0;
  329. z-index: 1;
  330. background: #FFFFFF;
  331. }
  332. .client_top_box {
  333. padding: 15px 15px 0px;
  334. }
  335. .search_icon {
  336. width: 24px;
  337. height: 24px;
  338. }
  339. .search_input {
  340. padding: 0;
  341. }
  342. .search_input .van-search__content {
  343. padding: 0;
  344. border-radius: 19px;
  345. }
  346. .search_input .van-cell {
  347. padding: 0;
  348. }
  349. .search_input .van-field__body {
  350. display: flex;
  351. align-items: center;
  352. position: relative;
  353. }
  354. .search_input .van-field__body input{
  355. border: none;
  356. width: 100%;
  357. height: 40px;
  358. background: #FAFAFA;
  359. padding: 10px 36px 10px 15px;
  360. border-radius: 19px;
  361. }
  362. .search_input .van-field__body input:focus {
  363. outline: none;
  364. }
  365. .search_input .van-field__body .van-field__right-icon{
  366. position: absolute;
  367. right: 12px;
  368. }
  369. .van-tabs--line .van-tabs__wrap {
  370. height: 40px;
  371. }
  372. .van-tab--active {
  373. color: #136DFB !important;
  374. }
  375. .van-tab {
  376. color: #999999;
  377. }
  378. .client_top_line {
  379. width: 100%;
  380. height: 1px;
  381. background: #F1F1F1;
  382. }
  383. .tag_box {
  384. display: flex;
  385. align-items: center;
  386. gap: 10px;
  387. padding-top: 10px;
  388. padding-left: 15px;
  389. }
  390. .tag_box_item {
  391. font-size: 14px;
  392. color: #999999;
  393. line-height: 20px;
  394. padding: 4px 16px;
  395. border-radius: 10px;
  396. background: #FAFAFA;
  397. }
  398. .tag_box_active {
  399. font-size: 14px;
  400. color: #1677FF;
  401. line-height: 20px;
  402. padding: 4px 16px;
  403. border-radius: 10px;
  404. background: rgba(22, 119, 255, 0.1);
  405. }
  406. .client_content {
  407. position: absolute;
  408. left: 0;
  409. z-index: 1;
  410. width: 100%;
  411. }
  412. .client_content_box {
  413. padding: 10px 15px 15px;
  414. height: calc(100vh - 144px);
  415. box-sizing: border-box;
  416. }
  417. .client_date {
  418. display: flex;
  419. align-items: center;
  420. gap: 8px;
  421. padding-left: 2px;
  422. margin-bottom: 10px;
  423. }
  424. .client_date_item {
  425. font-size: 12px;
  426. color: #999999;
  427. line-height: 17px;
  428. padding: 3px 9px;
  429. background: #F7F9FC;
  430. border: 1px solid #F7F9FC;
  431. }
  432. .client_date_active {
  433. font-size: 12px;
  434. color: #1677FF;
  435. line-height: 17px;
  436. padding: 3px 9px;
  437. border-radius: 10px;
  438. background: rgba(22,119,255,0.05);
  439. border: 1px solid #136DFB;
  440. }
  441. .client_list {
  442. display: flex;
  443. flex-direction: column;
  444. gap: 10px;
  445. height: calc(100vh - 189px);
  446. overflow: auto;
  447. padding-bottom: 100px;
  448. box-sizing: border-box;
  449. }
  450. .noclient_list {
  451. display: flex;
  452. align-items: center;
  453. justify-content: center;
  454. height: calc(100vh - 189px);
  455. overflow: auto;
  456. padding-bottom: 46px;
  457. box-sizing: border-box;
  458. font-size: 14px;
  459. color: #CCCCCC;
  460. line-height: 20px;
  461. flex-direction: column;
  462. }
  463. .noclient_list img {
  464. width: 102px;
  465. height: 90px;
  466. margin-bottom: 20px;
  467. }
  468. .client_item {
  469. background: #FFFFFF;
  470. border-radius: 15px;
  471. border: 1px solid #FFFFFF;
  472. padding: 10px 15px;
  473. box-sizing: border-box;
  474. height: 68px;
  475. display: flex;
  476. align-items: center;
  477. margin-bottom: 10px;
  478. }
  479. .van-radio__icon {
  480. width: 16px;
  481. height: 16px;
  482. }
  483. .van-radio__label {
  484. font-size: 14px;
  485. line-height: 20px;
  486. color: #222222;
  487. }
  488. .van-radio--horizontal {
  489. margin-right: 20px;
  490. }
  491. .van-radio-group {
  492. margin-top: 15px;
  493. margin-left: 15px;
  494. }
  495. .check_div {
  496. width: 16px;
  497. height: 16px;
  498. border-radius: 50%;
  499. border: 1px solid #CCCCCC;
  500. box-sizing: border-box;
  501. margin-right: 15px;
  502. }
  503. .check_div_active {
  504. width: 16px;
  505. height: 16px;
  506. border-radius: 50%;
  507. border: 1px solid #136DFB;
  508. box-sizing: border-box;
  509. margin-right: 15px;
  510. }
  511. .check_div_active:after{
  512. content: "";
  513. display: block;
  514. width: 10px;
  515. height: 10px;
  516. border-radius: 50%;
  517. background: #136DFB;
  518. position: relative;
  519. top: 2px;
  520. left: 2px;
  521. }
  522. .client_info {
  523. display: flex;
  524. align-items: center;
  525. flex: 1;
  526. min-width: 0;
  527. overflow: hidden;
  528. }
  529. .client_info img{
  530. width: 48px;
  531. height: 48px;
  532. border-radius: 8px;
  533. margin-right: 10px;
  534. flex-shrink: 0;
  535. }
  536. .client_info_text {
  537. font-weight: 500;
  538. font-size: 14px;
  539. color: #222222;
  540. display: flex;
  541. flex-direction: column;
  542. gap: 8px;
  543. flex: 1;
  544. min-width: 0;
  545. overflow: hidden;
  546. }
  547. .client_tag {
  548. display: flex;
  549. align-items: center;
  550. gap: 8px;
  551. overflow: hidden;
  552. flex-wrap: wrap;
  553. width: 100%;
  554. max-height: 21px;
  555. }
  556. .client_tag span {
  557. height: 21px;
  558. font-size: 12px;
  559. color: #999999;
  560. line-height: 17px;
  561. border-radius: 5px;
  562. padding: 2px 8px;
  563. background: #FAFAFA;
  564. border: 1px solid #F1F1F1;
  565. box-sizing: border-box;
  566. }
  567. .van-checkbox__icon .van-icon {
  568. width: 16px;
  569. height: 16px;
  570. line-height: 16px;
  571. border: 1px solid #CCCCCC;
  572. }
  573. .group_item {
  574. background: #FFFFFF;
  575. border-radius: 15px;
  576. border: 1px solid #FFFFFF;
  577. padding: 15px;
  578. box-sizing: border-box;
  579. height: 102px;
  580. }
  581. .group_info {
  582. display: flex;
  583. flex-direction: column;
  584. }
  585. .group_name {
  586. font-weight: 500;
  587. font-size: 14px;
  588. color: #222222;
  589. line-height: 20px;
  590. }
  591. .group_data {
  592. font-weight: 500;
  593. font-size: 12px;
  594. color: #999999;
  595. line-height: 17px;
  596. display: flex;
  597. align-items: center;
  598. padding: 10px 0 8px;
  599. }
  600. .create_time {
  601. font-size: 12px;
  602. color: #999999;
  603. line-height: 17px;
  604. }
  605. .send_foot {
  606. position: absolute;
  607. bottom: 61px;
  608. left: 0;
  609. width: 100%;
  610. }
  611. .send_btn {
  612. font-weight: 500;
  613. font-size: 14px;
  614. color: #FFFFFF;
  615. line-height: 20px;
  616. padding: 15px 0;
  617. border-radius: 20px;
  618. background: #1677FF;
  619. margin: 0 35px;
  620. text-align: center;
  621. }
  622. .marketing_bg {
  623. width: 100%;
  624. height: 200px;
  625. position: absolute;
  626. top: 0;
  627. left: 0;
  628. z-index: 0;
  629. }
  630. .marketing_bg img{
  631. width: 100%;
  632. height: 100%;
  633. }
  634. .marketing_box {
  635. position: absolute;
  636. top: 138px;
  637. left: 0;
  638. z-index: 1;
  639. width: 100%;
  640. /* height: calc(100vh - 138px); */
  641. background: linear-gradient( 180deg, rgba(247,249,252,0.8) 0%, #F7F9FC 100%);
  642. border-radius: 15px 15px 0 0;
  643. border: 1px solid #FFFFFF;
  644. border-bottom: unset;
  645. box-sizing: border-box;
  646. }
  647. .marketing_content {
  648. padding: 20px 15px 46px;
  649. }
  650. .reach_tools {
  651. display: flex;
  652. align-items: center;
  653. font-weight: 500;
  654. font-size: 14px;
  655. color: #222222;
  656. }
  657. .reach_tools img {
  658. width: 20px;
  659. height: 20px;
  660. margin-right: 5px;
  661. }
  662. .reach_tools_title {
  663. margin-top: 30px;
  664. }
  665. .tools_box {
  666. width: calc(50% - 7px);
  667. height: 72px;
  668. box-sizing: border-box;
  669. display: flex;
  670. align-items: center;
  671. padding: 15px 10px;
  672. background: linear-gradient( 180deg, rgba(255,255,255,0.5) 0%, #FFFFFF 100%);
  673. border-radius: 15px;
  674. border: 1px solid #FFFFFF;
  675. margin-top: 15px;
  676. }
  677. .tools_box img {
  678. width: 40px;
  679. height: 40px;
  680. margin-right: 8px;
  681. }
  682. .tools_box_info {
  683. display: flex;
  684. flex-direction: column;
  685. font-weight: 500;
  686. font-size: 14px;
  687. color: #222222;
  688. line-height: 20px;
  689. white-space: nowrap;
  690. flex: 1;
  691. min-width: 0;
  692. }
  693. .tools_box_info_text {
  694. font-weight: 400;
  695. font-size: 12px;
  696. color: #999999;
  697. line-height: 17px;
  698. padding-top: 5px;
  699. overflow: hidden;
  700. white-space: nowrap;
  701. text-overflow: ellipsis;
  702. }
  703. .tools_box_list {
  704. display: flex;
  705. flex-wrap: wrap;
  706. justify-content: space-between;
  707. }
  708. .task_manage_item {
  709. font-weight: 400;
  710. font-size: 12px;
  711. color: #666666;
  712. line-height: 17px;
  713. }
  714. .van-checkbox {
  715. width: 31px;
  716. }
  717. </style>
  718. <body>
  719. <div id="box" class="box">
  720. <div class="page5" :style="{'padding': bind ? '0' : '0 15px'}">
  721. <!-- 首页 -->
  722. <div v-if="activeTabbar === 'home'">
  723. <div v-if="bind" :style="{'height': 'calc(100vh - 46px)'}">
  724. <iframe :src="`qw/qwJxs.html?bId=${bId}&env=${env}`" width="100%" height="100%" frameborder="0"></iframe>
  725. </div>
  726. <div v-else>
  727. <div class="home_bg">
  728. <img src="./img/qw/home_bg.png" alt="">
  729. </div>
  730. <div class="home_box">
  731. <div class="wel_tip">
  732. <div>{{nowTime}}</div>
  733. <div>{{memberName}}</div>
  734. </div>
  735. <div class="task_content">
  736. <div class="task_box" :style="{'height': taskList.length ? '295px' : '180px'}">
  737. <div class="task_top">
  738. <div class="task_top_left">
  739. <img src="./img/qw/to-do.png" alt="">
  740. <div>待办任务</div>
  741. </div>
  742. <div class="task_top_right" @click="handleAllTask">
  743. <div>全部任务</div>
  744. <img src="./img/qw/link-icon.png" alt="">
  745. </div>
  746. </div>
  747. <div class="task_list" v-if="taskList.length > 0">
  748. <div class="task_item" v-for="item in taskList" :key="item.id">
  749. <div class="task_item_left">
  750. <div class="task_item_left_top">
  751. <img :src="item.clientAvatar ? item.clientAvatar : './img/qw/mem_icon.png'" alt="">
  752. <div>{{ item.clientName }}</div>
  753. </div>
  754. <div class="task_item_CLIENT_LOG" v-if="item.type === 'CLIENT_LOG'" v-html="item.taskDesc"></div>
  755. <div class="task_item_left_bottom" v-else>{{item.taskDesc}}</div>
  756. </div>
  757. <div class="task_item_line"></div>
  758. <div class="task_item_right" @click="handleTaskDetail(item)">{{item.type === 'MONITORED_MESSAGE' ? '回复' : '查看'}}</div>
  759. </div>
  760. </div>
  761. <div class="notask_tip" v-else>暂无需要完成的任务</div>
  762. </div>
  763. <div class="client_box_title">
  764. <div>我的客户</div>
  765. <van-popover v-model="timePopover" trigger="click" placement="bottom-start">
  766. <div class="date_box">
  767. <div :class="dateIndex === '今日' ? 'date_active' : 'date_item'" @click="handleDate('今日')">今日</div>
  768. <div :class="dateIndex === '近7天' ? 'date_active' : 'date_item'" @click="handleDate('近7天')">近7天</div>
  769. <div :class="dateIndex === '近30天' ? 'date_active' : 'date_item'" @click="handleDate('近30天')">近30天</div>
  770. <div :class="dateIndex === '自定义' ? 'date_active' : 'date_item'" @click="handleDate('自定义')">自定义</div>
  771. </div>
  772. <template #reference>
  773. <div class="time_box">
  774. <img src="./img/qw/time_icon.png" alt="">
  775. <span>{{dateIndex}}</span>
  776. <img src="./img/qw/time_select.png" alt="">
  777. </div>
  778. </template>
  779. </van-popover>
  780. </div>
  781. <div class="client_box">
  782. <div class="client_data_item client_all">
  783. <div class="client_title">总客户数</div>
  784. <div class="client_num client_all_color">{{clientTotal}}</div>
  785. </div>
  786. <div class="client_data_item client_add">
  787. <div class="client_title">新增客户数</div>
  788. <div class="client_num client_add_color">{{clientAdd}}</div>
  789. </div>
  790. </div>
  791. </div>
  792. </div>
  793. </div>
  794. </div>
  795. <!-- 自定义时间 -->
  796. <van-calendar type="range" v-model="showSelfDate" @confirm="onSelfConfirm" color="#1677FF" :min-date="minDate"
  797. :max-date="maxDate" :allow-same-day="true"></van-calendar>
  798. <!-- 客户 -->
  799. <div v-if="activeTabbar === 'client'">
  800. <div class="client_top" :style="activeTab === '客户' ? 'height: 144px' : 'height: 100px'">
  801. <div class="client_top_box">
  802. <van-search class="search_input" placeholder="搜索客户昵称/客户群昵称" v-model="keyword" :clearable="false" left-icon="" @search="handleSearch">
  803. <!-- 自定义右侧图标 -->
  804. <template v-slot:right-icon>
  805. <img class="search_icon" src="./img/qw/search_icon.png" @click="handleSearch" />
  806. </template>
  807. </van-search>
  808. </div>
  809. <van-tabs v-model="activeTab" ref="tabs" color="#136DFB" line-width="18px" line-height="2px" @change="handleChange">
  810. <van-tab title="客户" name="客户"></van-tab>
  811. <van-tab title="客户群" name="客户群"></van-tab>
  812. </van-tabs>
  813. <div class="client_top_line" v-if="activeTab === '客户'"></div>
  814. <div class="tag_box" v-if="activeTab === '客户'">
  815. <div :class="activeTag === '全部' ? 'tag_box_active' : 'tag_box_item'" @click="handleTagClick('全部')">全部</div>
  816. <div :class="activeTag === '按客户标签筛选' ? 'tag_box_active' : 'tag_box_item'" @click="handleTagClick('按客户标签筛选')">按客户标签筛选</div>
  817. </div>
  818. </div>
  819. <!-- 标签筛选组件 -->
  820. <select-tag :tenancy-Id="tenancyId" :label-Filter.sync="labelFilter" :show-Client-Tag.sync="showClientTag" :select-Tag-List.sync="clientTags" @add="handleAdd"></select-tag>
  821. <!-- 客户、客户群列表 -->
  822. <div class="client_content" :style="activeTab === '客户' ? 'top: 144px' : 'top: 100px'">
  823. <div class="client_content_box">
  824. <div class="client_date">
  825. <div :class="clientDate === 'today' ? 'client_date_active' : 'client_date_item'" @click="handleClientDate('today')">今日</div>
  826. <div :class="clientDate === 'week' ? 'client_date_active' : 'client_date_item'" @click="handleClientDate('week')">近7天</div>
  827. <div :class="clientDate === 'month' ? 'client_date_active' : 'client_date_item'" @click="handleClientDate('month')">近30天</div>
  828. <div :class="clientDate === 'custom' ? 'client_date_active' : 'client_date_item'" @click="handleClientDate('custom')">自定义</div>
  829. </div>
  830. <div class="client_list" v-if="clientList.length > 0">
  831. <!-- 使用 checkbox-group 统一管理选中项 -->
  832. <van-checkbox-group v-model="checkedClientIds" @change="onChangeChecked">
  833. <div class="client_item" v-for="item in clientList" :key="item.id">
  834. <van-checkbox :name="item.id">
  835. <template #icon="props">
  836. <div :class="props.checked ? 'check_div_active' : 'check_div'"></div>
  837. </template>
  838. </van-checkbox>
  839. <div class="client_info" @click="handleClientDetail(item)">
  840. <img :src="item.avatar ? item.avatar : './img/qw/mem_icon.png'" alt="">
  841. <div class="client_info_text">
  842. <div>{{item.name}}</div>
  843. <div class="client_tag">
  844. <span v-for="(tag, tagIndex) in item.tagList" :key="tagIndex">
  845. {{tag}}
  846. </span>
  847. </div>
  848. </div>
  849. </div>
  850. </div>
  851. </van-checkbox-group>
  852. </div>
  853. <div class="client_list" v-else-if="groupList.length > 0">
  854. <div class="group_item" v-for="item in groupList" :key="item.id" @click="handleGroupClientDetail(item)">
  855. <div class="group_info">
  856. <div class="group_name">{{item.name}}</div>
  857. <div class="group_data">
  858. 群主:<span style="color: #136DFB;padding-right: 15px;">{{item.ownAccountName}}</span>
  859. 群人数:<span style="color: #FFA041;padding-right: 15px;">{{item.groupMemberNumber}}</span>
  860. 群客户数:<span style="color: #5DD565;">{{item.clientNum}}</span>
  861. </div>
  862. <div class="create_time">建群时间:{{formatDate(item.createdGroupTime)}}</div>
  863. </div>
  864. </div>
  865. </div>
  866. <div class="noclient_list" v-else>
  867. <div v-if="loading">搜寻中...</div>
  868. <div v-else>
  869. <img src="./img/qw/no_task.png" alt="">
  870. <div class="notask_text">暂无数据</div>
  871. </div>
  872. </div>
  873. <div class="send_foot" v-if="checkedClientIds.length > 0 && activeTab === '客户'">
  874. <div class="send_btn" @click="handleMass">创建群发</div>
  875. </div>
  876. </div>
  877. </div>
  878. </div>
  879. <!-- 营销 -->
  880. <div v-if="activeTabbar === 'marketing'">
  881. <div class="marketing_bg">
  882. <img src="./img/qw/market_bg.png" alt="">
  883. </div>
  884. <div class="marketing_box">
  885. <div class="marketing_content">
  886. <div class="reach_tools">
  887. <img src="./img/qw/reach_tools.png" alt="">
  888. <span>触达工具</span>
  889. </div>
  890. <div class="tools_box" @click="handleAiCall">
  891. <img src="./img/qw/ai_call.png" alt="">
  892. <div class="tools_box_info">
  893. <div>AI外呼</div>
  894. <div class="tools_box_info_text">你的专属外呼助理</div>
  895. </div>
  896. </div>
  897. <div v-if="bind">
  898. <div class="reach_tools reach_tools_title">
  899. <img src="./img/qw/task_icon.png" alt="">
  900. <span>任务管理</span>
  901. </div>
  902. <div class="tools_box_list">
  903. <div class="tools_box" @click="handleClientMass">
  904. <img src="./img/qw/client_mass.png" alt="">
  905. <div class="task_manage_item">客户群发任务</div>
  906. </div>
  907. <div class="tools_box" @click="handleClientGroupMass">
  908. <img src="./img/qw/group_mass.png" alt="">
  909. <div class="task_manage_item">客户群群发任务</div>
  910. </div>
  911. <div class="tools_box" @click="handlePyqMass">
  912. <img src="./img/qw/pyq_mass.png" alt="">
  913. <div class="task_manage_item">朋友圈群发任务</div>
  914. </div>
  915. </div>
  916. </div>
  917. </div>
  918. </div>
  919. </div>
  920. <!-- 底部导航栏 -->
  921. <div class="tabbar">
  922. <div class="tabbar_box">
  923. <div class="tabbar_item" @click="handleTabClick('home')">
  924. <img class="tabbar_img" :src="activeTabbar === 'home' ? './img/qw/tabbar-home1.png' : './img/qw/tabbar-home.png'" />
  925. <div :class="activeTabbar === 'home' ? 'tabbar_text_active' : 'tabbar_text'">首页</div>
  926. </div>
  927. <div class="tabbar_item" @click="handleTabClick('client')">
  928. <img class="tabbar_img" :src="activeTabbar === 'client' ? './img/qw/tabbar-client1.png' : './img/qw/tabbar-client.png'" />
  929. <div :class="activeTabbar === 'client' ? 'tabbar_text_active' : 'tabbar_text'">客户</div>
  930. </div>
  931. <div class="tabbar_item" @click="handleTabClick('marketing')">
  932. <img class="tabbar_img" :src="activeTabbar === 'marketing' ? './img/qw/tabbar-market1.png' : './img/qw/tabbar-market.png'" />
  933. <div :class="activeTabbar === 'marketing' ? 'tabbar_text_active' : 'tabbar_text'">营销</div>
  934. </div>
  935. </div>
  936. </div>
  937. </div>
  938. </div>
  939. </body>
  940. <script>
  941. new Vue({
  942. el: '#box',
  943. data() {
  944. return {
  945. httpUrl: '',
  946. bId: null,
  947. env: '',
  948. memberId: null,
  949. tenancyId: '',
  950. nowTime: '',
  951. memberName: '',
  952. bind: false, // 首页
  953. taskList: [],
  954. clientAdd: null,
  955. clientTotal: null,
  956. dateIndex: '今日',
  957. timePopover: false,
  958. startTime: null,
  959. endTime: null,
  960. showSelfDate: false,
  961. minDate: '',
  962. maxDate: '',
  963. clientStartTime: null, // 客户
  964. clientEndTime: null,
  965. clientList: [],
  966. groupList: [],
  967. clientDate: '',
  968. activeTab: '客户',
  969. activeTag: '全部',
  970. loading: false,
  971. labelFilter: 0,
  972. clientTags: [],
  973. activeTabbar: 'home',
  974. keyword: '',
  975. showClientTag: false,
  976. // 客户列表勾选的 id 集合
  977. checkedClientIds: [],
  978. // 勾选的客户列表(包含 id + externalUserid 等信息)
  979. selectedClients: [],
  980. aiCallToken: null, // AI外呼token
  981. }
  982. },
  983. created() {
  984. let nowDat = new Date();
  985. let dateY = nowDat.getFullYear()
  986. let dateM = nowDat.getMonth()
  987. let dateD = nowDat.getDate()
  988. // 设置日期可选最小值minDate、最大值maxDate
  989. this.minDate = new Date(dateY - 100, dateM, dateD)
  990. //日历可选范围为一年,dateY + 1
  991. this.maxDate = new Date(dateY, dateM, dateD - 1)
  992. this.bId = this.getQueryParam('bId')
  993. this.env = this.getQueryParam('env')
  994. this.getGreeting()
  995. if (!this.env || this.env === 'prod') {
  996. this.httpUrl = 'https://wlapi.wefanbot.com'
  997. } else {
  998. this.httpUrl = 'http://test.wefanbot.com:18993'
  999. }
  1000. if (this.getQueryParam('memberId')) {
  1001. // 已授权
  1002. this.memberId = this.getQueryParam('memberId')
  1003. this.getCpH5Login()
  1004. } else {
  1005. // 授权
  1006. this.getAuth()
  1007. }
  1008. this.startTime = this.getDateTime(0)
  1009. this.endTime = this.getDateTime(0)
  1010. this.getQyWxSign()
  1011. },
  1012. methods: {
  1013. getAuth() {
  1014. fetch(this.httpUrl + `/p/insuite/p/getRedirectUri?env=${this.env}&bId=${this.bId}`)
  1015. .then(res => {
  1016. return res.json()
  1017. }).then(result => {
  1018. let { data, code, msg } = result
  1019. if (code === 1) {
  1020. window.location.replace(data)
  1021. } else {
  1022. vant.Toast.fail(msg)
  1023. }
  1024. })
  1025. },
  1026. getGreeting() {
  1027. const now = new Date();
  1028. const hour = now.getHours(); // 获取当前小时 (0-23)
  1029. if (hour >= 5 && hour < 12) {
  1030. this.nowTime = '早上好~'
  1031. } else if (hour >= 12 && hour < 18) {
  1032. this.nowTime = '下午好~'
  1033. } else {
  1034. this.nowTime = '晚上好~'
  1035. }
  1036. },
  1037. getCpH5Login() {
  1038. fetch(this.httpUrl + '/scrm/v1/wxcp-workbench/p/cpH5Login', {
  1039. method: 'post',
  1040. body: JSON.stringify({
  1041. bid: this.bId,
  1042. memberId: this.memberId,
  1043. }),
  1044. headers: {
  1045. 'Content-Type': 'application/json'
  1046. }
  1047. }).then(res => {
  1048. return res.json()
  1049. }).then(result => {
  1050. let { data, code, msg } = result
  1051. if (code === 1) {
  1052. this.bind = data.bind
  1053. if (this.bind) {
  1054. localStorage.setItem('tokenValue', data.token)
  1055. localStorage.setItem('tenancyIdValue', data.tenancyId)
  1056. localStorage.setItem('userId', data.userId)
  1057. localStorage.setItem('qwTenancyNameValue', this.nowTime + data.memberName)
  1058. } else {
  1059. this.clientData()
  1060. this.getTaskList()
  1061. }
  1062. this.tenancyId = data.tenancyId || ''
  1063. this.memberName = data.memberName || ''
  1064. } else {
  1065. vant.Toast.fail(msg)
  1066. }
  1067. })
  1068. },
  1069. // 我的客户
  1070. clientData() {
  1071. fetch(this.httpUrl + '/scrm/v1/wxcp-workbench/p/clientData', {
  1072. method: 'post',
  1073. body: JSON.stringify({
  1074. memberId: this.memberId,
  1075. startTime: this.startTime,
  1076. endTime: this.endTime
  1077. }),
  1078. headers: {
  1079. 'Content-Type': 'application/json'
  1080. }
  1081. }).then(res => {
  1082. return res.json()
  1083. }).then(result => {
  1084. let { data, code, msg } = result
  1085. if (code === 1) {
  1086. this.clientAdd = data.clientAdd
  1087. this.clientTotal = data.clientTotal
  1088. } else {
  1089. vant.Toast.fail(msg)
  1090. }
  1091. })
  1092. },
  1093. // 切换日期
  1094. handleDate(text) {
  1095. this.dateIndex = text
  1096. if (text === '今日') {
  1097. this.startTime = this.getDateTime(0)
  1098. this.endTime = this.getDateTime(0)
  1099. } else if (text === '近7天') {
  1100. this.startTime = this.getDateTime(-7)
  1101. this.endTime = this.getDateTime(-1)
  1102. } else if (text === '近30天') {
  1103. this.startTime = this.getDateTime(-30)
  1104. this.endTime = this.getDateTime(-1)
  1105. } else if (text === '自定义') {
  1106. this.showSelfDate = true
  1107. }
  1108. this.clientData()
  1109. this.timePopover = false
  1110. },
  1111. // 自定义日期
  1112. onSelfConfirm(date) {
  1113. const [start, end] = date
  1114. if (this.formatDate(new Date()) === this.formatDate(end)) {
  1115. this.formatDate(end) = this.formatDate(start)
  1116. }
  1117. this.showSelfDate = false
  1118. if (this.activeTabbar === 'home') {
  1119. this.startTime = this.formatDate(start)
  1120. this.endTime = this.formatDate(end)
  1121. this.clientData()
  1122. } else if (this.activeTabbar === 'client') {
  1123. this.clientStartTime = this.formatDate(start)
  1124. this.clientEndTime = this.formatDate(end)
  1125. if (this.activeTab === '客户') {
  1126. this.pageClient()
  1127. } else {
  1128. this.pageGroup()
  1129. }
  1130. }
  1131. },
  1132. // 切换底部tabbar
  1133. handleTabClick(tab) {
  1134. this.activeTabbar = tab
  1135. if (tab === 'home') {
  1136. this.getTaskList()
  1137. this.clientData()
  1138. } else if (tab === 'client') {
  1139. this.clientStartTime = null
  1140. this.clientEndTime = null
  1141. this.clientDate = ''
  1142. this.activeTab = '客户'
  1143. this.pageClient()
  1144. } else if (tab === 'marketing') {
  1145. }
  1146. },
  1147. // 查询待办任务
  1148. getTaskList () {
  1149. fetch(this.httpUrl + `/scrm/v1/wxcp-member-todo-task/p/page?memberId=${this.memberId}&page=1&pageCount=3`)
  1150. .then(res => {
  1151. return res.json()
  1152. }).then(result => {
  1153. let { data, code, msg } = result
  1154. if (code === 1) {
  1155. this.taskList = data.records || []
  1156. } else {
  1157. vant.Toast.fail(msg)
  1158. }
  1159. })
  1160. },
  1161. // 全部任务
  1162. handleAllTask() {
  1163. window.location.href = `qw/toDoTaskList.html?memberId=${this.memberId}&env=${this.env}&bId=${this.bId}`
  1164. },
  1165. // 任务详情
  1166. handleTaskDetail(item) {
  1167. if (item.type === 'MONITORED_MESSAGE') {
  1168. if (!item.clientExternalUserId) {
  1169. vant.Toast.fail('无效')
  1170. return
  1171. }
  1172. wx.openEnterpriseChat({
  1173. externalUserIds: item.clientExternalUserId, // 参与会话的外部联系人列表,格式为userId1;userId2;…,用分号隔开。
  1174. groupName: "", // 会话名称。单聊时该参数传入空字符串""即可。
  1175. chatId: "",
  1176. success: function (res) {
  1177. var chatId = res.chatId; //返回当前群聊ID,仅当使用agentConfig注入该接口权限时才返回chatId
  1178. // 回调
  1179. console.log('成功', res);
  1180. },
  1181. fail: function (res) {
  1182. // 回调
  1183. if (res.errMsg.indexOf('function not exist') > -1) {
  1184. alert('版本过低请升级');
  1185. }
  1186. console.log('失败', res);
  1187. },
  1188. complete: function (res) {
  1189. // 回调
  1190. console.log('完成', res);
  1191. }
  1192. })
  1193. } else {
  1194. window.location.href = `qw/taskDetail.html?taskId=${item.todoTaskId}&type=${item.type}&env=${this.env}&bId=${this.bId}`
  1195. }
  1196. },
  1197. handleChange(tab) {
  1198. this.activeTab = tab
  1199. this.keyword = ''
  1200. this.clientList = []
  1201. this.groupList = []
  1202. this.clientStartTime = null
  1203. this.clientEndTime = null
  1204. if (tab === '客户') {
  1205. this.pageClient()
  1206. } else if (tab === '客户群') {
  1207. this.pageGroup()
  1208. }
  1209. },
  1210. handleAdd(tagType, tagList) {
  1211. this.labelFilter = tagType
  1212. this.clientTags = tagList
  1213. this.tagIds = tagList.length ? tagList.map(item => item.id) : []
  1214. this.pageClient()
  1215. },
  1216. // 搜索客户
  1217. handleSearch() {
  1218. if (this.activeTab === '客户') {
  1219. this.pageClient()
  1220. } else {
  1221. this.pageGroup()
  1222. }
  1223. },
  1224. // 全部客户
  1225. pageClient() {
  1226. this.loading = true
  1227. fetch(this.httpUrl + '/scrm/v1/wxcp-workbench/p/pageClient', {
  1228. method: 'post',
  1229. body: JSON.stringify({
  1230. bid: this.bId,
  1231. memberId: this.memberId,
  1232. startTime: this.clientStartTime,
  1233. endTime: this.clientEndTime,
  1234. keyword: this.keyword,
  1235. labelFilter: this.labelFilter,
  1236. tagIds: this.tagIds,
  1237. page: 1,
  1238. pageCount: 1000,
  1239. }),
  1240. headers: {
  1241. 'Content-Type': 'application/json',
  1242. }
  1243. }).then(res => {
  1244. return res.json()
  1245. }).then(result => {
  1246. let { data, code, msg } = result
  1247. if (code === 1) {
  1248. this.clientList = data.records || []
  1249. // 刷新列表时清空已勾选项
  1250. console.log('勾选项', this.selectedClients)
  1251. } else {
  1252. vant.Toast.fail(msg)
  1253. }
  1254. }).finally(() => {
  1255. this.loading = false
  1256. })
  1257. },
  1258. // 全部客户群
  1259. pageGroup () {
  1260. this.loading = true
  1261. fetch(this.httpUrl + '/scrm/v1/wxcp-workbench/p/pageGroup', {
  1262. method: 'post',
  1263. body: JSON.stringify({
  1264. bid: this.bId,
  1265. memberId: this.memberId,
  1266. keyword: this.keyword,
  1267. startTime: this.clientStartTime,
  1268. endTime: this.clientEndTime,
  1269. page: 1,
  1270. pageCount: 1000,
  1271. }),
  1272. headers: {
  1273. 'Content-Type': 'application/json',
  1274. }
  1275. }).then(res => {
  1276. return res.json()
  1277. }).then(result => {
  1278. let { data, code, msg } = result
  1279. if (code === 1) {
  1280. this.groupList = data.records || []
  1281. } else {
  1282. vant.Toast.fail(msg)
  1283. }
  1284. }).finally(() => {
  1285. this.loading = false
  1286. })
  1287. },
  1288. // 客户日期筛选
  1289. handleClientDate(text) {
  1290. if (this.clientDate === text) {
  1291. this.clientDate = ''
  1292. this.clientStartTime = ''
  1293. this.clientEndTime = ''
  1294. } else {
  1295. this.clientDate = text
  1296. }
  1297. if (this.clientDate === 'today') {
  1298. this.clientStartTime = this.getDateTime(0)
  1299. this.clientEndTime = this.getDateTime(0)
  1300. } else if (this.clientDate === 'week') {
  1301. this.clientStartTime = this.getDateTime(-7)
  1302. this.clientEndTime = this.getDateTime(-1)
  1303. } else if (this.clientDate === 'month') {
  1304. this.clientStartTime = this.getDateTime(-30)
  1305. this.clientEndTime = this.getDateTime(-1)
  1306. } else if (this.clientDate === 'custom') {
  1307. this.showSelfDate = true
  1308. }
  1309. if (this.activeTab === '客户') {
  1310. this.pageClient()
  1311. } else {
  1312. this.pageGroup()
  1313. }
  1314. },
  1315. handleTagClick(tag) {
  1316. this.activeTag = tag
  1317. if (tag === '按客户标签筛选') {
  1318. this.showClientTag = true
  1319. } else {
  1320. this.labelFilter = 0
  1321. this.tagIds = []
  1322. this.clientTags = []
  1323. this.pageClient()
  1324. }
  1325. },
  1326. // 客户详情
  1327. handleClientDetail(item) {
  1328. window.location.href = `userProfile.html?bId=${this.bId}&env=${this.env}&memberId=${item.memberId}&externalUserId=${item.externalUserid}`
  1329. },
  1330. // 客户群详情
  1331. handleGroupClientDetail(item) {
  1332. window.location.href = `qw/clientGroupDetail.html?bId=${this.bId}&memberId=${this.memberId}&groupId=${item.id}&env=${this.env}`
  1333. },
  1334. // 营销群发
  1335. handleMass() {
  1336. localStorage.setItem('clientData', JSON.stringify(this.selectedClients))
  1337. window.location.href = `qw/mass.html?bId=${this.bId}&env=${this.env}&memberId=${this.memberId}`
  1338. },
  1339. // 客户群发任务
  1340. handleClientMass() {
  1341. window.location.href = `qw/clientMassList.html?bId=${this.bId}&env=${this.env}&memberId=${this.memberId}`
  1342. },
  1343. // 客户群群发任务
  1344. handleClientGroupMass() {
  1345. window.location.href = `qw/clientGroupMassList.html?bId=${this.bId}&env=${this.env}&memberId=${this.memberId}`
  1346. },
  1347. // 朋友圈群发任务
  1348. handlePyqMass() {
  1349. window.location.href = `qw/pyqMassList.html?bId=${this.bId}&env=${this.env}&memberId=${this.memberId}`
  1350. },
  1351. handleAiCall () {
  1352. // 获取顾问手机号
  1353. fetch(this.httpUrl + `/call/api/user/p/getPhone?memberId=${this.memberId}`)
  1354. .then(res => {
  1355. return res.json()
  1356. }).then(result => {
  1357. let { data, code, msg } = result
  1358. if (code === 1) {
  1359. if (data) {
  1360. this.wxcpLoginRegister(data)
  1361. }
  1362. } else {
  1363. vant.Toast.fail(msg)
  1364. }
  1365. })
  1366. },
  1367. wxcpLoginRegister (phone) {
  1368. fetch(this.httpUrl + '/call/api/user/p/wxcpLoginRegister', {
  1369. method: 'post',
  1370. body: JSON.stringify({
  1371. memberId: this.memberId,
  1372. phone: phone,
  1373. }),
  1374. headers: {
  1375. 'Content-Type': 'application/json',
  1376. }
  1377. }).then(res => {
  1378. const resHeader = res.headers
  1379. this.aiCallToken = resHeader.get("token")
  1380. return res.json()
  1381. }).then(result => {
  1382. let { data, code, msg } = result
  1383. if (code === 1) {
  1384. } else {
  1385. vant.Toast.fail(msg)
  1386. }
  1387. }).finally(() => {
  1388. if (!this.env || this.env === 'prod') {
  1389. window.location.href = `https://call.wefanbot.com/?token=${this.aiCallToken}`
  1390. } else {
  1391. window.location.href = `https://test.wefanbot.com:18211/?token=${this.aiCallToken}`
  1392. }
  1393. })
  1394. },
  1395. // 勾选客户变更
  1396. onChangeChecked (value) {
  1397. // value 为当前勾选的 name 数组(即 id 集合)
  1398. this.checkedClientIds = value
  1399. // 根据勾选的 id,从 clientList 里筛出完整客户信息
  1400. this.selectedClients = this.clientList
  1401. .filter(item => value.includes(item.id))
  1402. .map(item => ({
  1403. clientId: item.id,
  1404. externalUserid: item.externalUserid,
  1405. avatar: item.avatar,
  1406. tagList: item.tagList || [],
  1407. // 如果后面还需要其它字段,也可以一起带上
  1408. name: item.name,
  1409. }))
  1410. console.log('当前选中的客户列表(含 id 和 externalUserid): ', this.selectedClients)
  1411. },
  1412. formatDate(input) {
  1413. // 创建 Date 对象(兼容不同浏览器)
  1414. const date = new Date(input)
  1415. // 提取年、月、日
  1416. const year = date.getFullYear()
  1417. const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始,需要+1
  1418. const day = String(date.getDate()).padStart(2, '0')
  1419. return `${year}-${month}-${day}`
  1420. },
  1421. // 日期格式处理
  1422. getDateTime(day) {
  1423. let today = new Date()
  1424. let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
  1425. today.setTime(targetday_milliseconds)
  1426. let tYear = today.getFullYear()
  1427. let tMonth = today.getMonth() + 1
  1428. let tDate = today.getDate()
  1429. if (tMonth < 10) {
  1430. tMonth = '0' + tMonth
  1431. }
  1432. if (tDate < 10) {
  1433. tDate = '0' + tDate
  1434. }
  1435. return tYear + '-' + tMonth + '-' + tDate
  1436. },
  1437. getQyWxSign() {
  1438. fetch(this.httpUrl + '/scrm/v1/wxcp-corp/p/getAgentConfig', {
  1439. method: 'post',
  1440. body: JSON.stringify({
  1441. bid: this.bId,
  1442. url: window.location.href,
  1443. }),
  1444. headers: {
  1445. 'Content-Type': 'application/json'
  1446. }
  1447. }).then(res => {
  1448. return res.json()
  1449. }).then(result => {
  1450. let { data, code, msg } = result
  1451. if (code === 1) {
  1452. wx.config({
  1453. beta: true,
  1454. debug: false,
  1455. appId: data.corpid, // 必填,企业号的唯一标识,此处填写企业号corpid
  1456. timestamp: data.timestamp, // 必填,生成签名的时间戳
  1457. nonceStr: data.nonceStr, // 必填,生成签名的随机串
  1458. signature: data.agentSignature, // 必填,签名,见附录1
  1459. jsApiList: ['checkJsApi', 'openEnterpriseChat'] // 必填,需要使用的JS接口列表
  1460. })
  1461. wx.agentConfig({
  1462. corpid: data.corpid,
  1463. agentid: data.agentId,
  1464. timestamp: data.timestamp, // 必填,生成签名的时间戳
  1465. nonceStr: data.nonceStr, // 必填,生成签名的随机串
  1466. signature: data.agentSignature, // 必填,签名,见附录1
  1467. jsApiList: ['openEnterpriseChat'], // 必填,需要使用的JS接口列表
  1468. success: function (res) {
  1469. // 回调
  1470. console.log('agentConfig成功', res);
  1471. },
  1472. fail: function (res) {
  1473. if (res.errMsg.indexOf('function not exist') > -1) {
  1474. alert('版本过低请升级');
  1475. }
  1476. },
  1477. complete: function (res) {
  1478. // 回调
  1479. console.log('complete', res);
  1480. }
  1481. });
  1482. } else {
  1483. vant.Toast.fail(msg)
  1484. }
  1485. })
  1486. },
  1487. // 截取url中的数据
  1488. getQueryParam(paramName) {
  1489. // 获取当前URL的查询字符串部分
  1490. const queryString = window.location.search;
  1491. // 创建一个URLSearchParams对象
  1492. const urlParams = new URLSearchParams(queryString);
  1493. // 返回指定参数的值,如果不存在则返回null
  1494. return urlParams.get(paramName);
  1495. },
  1496. }
  1497. })
  1498. </script>
  1499. </html>