service_list.html 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. <!-- +---------------------------------------------------------------------- -->
  2. <!-- | CRMEB [ CRMEB赋能开发者,助力企业发展 ] -->
  3. <!-- +---------------------------------------------------------------------- -->
  4. <!-- | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved. -->
  5. <!-- +---------------------------------------------------------------------- -->
  6. <!-- | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权 -->
  7. <!-- +---------------------------------------------------------------------- -->
  8. <!-- | Author: CRMEB Team <admin@crmeb.com> -->
  9. <!-- +---------------------------------------------------------------------- -->
  10. {extend name="public/container"}
  11. {block name="title"}客服列表{/block}
  12. {block name="head_top"}
  13. <link rel="stylesheet" type="text/css" href="{__WAP_PATH}crmeb/css/store_service.css"/>
  14. {if $service_url neq '' && $service_configuration eq 2}
  15. <script src="{$service_url}/customerServer.js"></script>
  16. {/if}
  17. <style>
  18. body {
  19. background-color: #FFFFFF;
  20. }
  21. .empty {
  22. display: block;
  23. width: 4.14rem;
  24. margin: 1.5rem auto 0;
  25. }
  26. </style>
  27. {/block}
  28. {block name="content"}
  29. <div class="cus_server" id="app" v-cloak>
  30. <div v-if="serviceConfiguration === '1'">
  31. <ul v-if="list.length">
  32. <li v-for="item in list" @click="go_kefu(item)">
  33. <img :src="item.avatar">
  34. <span>{{item.nickname}}</span>
  35. </li>
  36. </ul>
  37. <img v-if="!list.length && loadend" class="empty" src="/wap/first/zsff/images/empty.png">
  38. </div>
  39. <quick-menu></quick-menu>
  40. </div>
  41. {/block}
  42. {block name="foot"}
  43. <script>
  44. var site_name = "{$Auth_site_name}",isWechat='{$isWechat}',service_configuration='{$service_configuration}',serviceUrl='{$service_url}';
  45. var userInfo = {$userInfo};
  46. require(['vue', 'helper', 'store', 'layer', 'quick'], function (Vue, $h, store) {
  47. new Vue({
  48. el: '#app',
  49. data: {
  50. loading: false,
  51. loadend: false,
  52. loadTitle: '上拉加载更多',
  53. list:[],
  54. where:{
  55. page:1,
  56. limit:20
  57. },
  58. url: isWechat ? $h.U({ c: 'index', a: 'login' }) : $h.U({ c: 'login', a: 'phone_check' }),
  59. site_name: site_name,
  60. isWechat: isWechat,
  61. serviceConfiguration:service_configuration,
  62. kefu_token:'',
  63. },
  64. created: function () {
  65. var vm = this;
  66. if (this.serviceConfiguration === '1') {
  67. this.get_service_list();
  68. $h.EventUtil.listenTouchDirection(document, function (){
  69. vm.get_service_list();
  70. }, false);
  71. } else {
  72. if (this.serviceConfiguration === '2') {
  73. if (serviceUrl) {
  74. this.get_kefu_token();
  75. } else {
  76. layer.msg('未配置客服站网址', { anim: 0 }, function () {
  77. window.history.back();
  78. });
  79. }
  80. }
  81. }
  82. },
  83. methods: {
  84. // crmeb客服
  85. initServer: function () {
  86. var option = {
  87. openUrl: serviceUrl,
  88. token: this.kefu_token,
  89. isShowTip: true,
  90. domId: 'customerServerTip',
  91. sendUserData: {
  92. nickName: userInfo.nickname, // 用户昵称
  93. phone: userInfo.phone, // 用户联系方式
  94. avatar: userInfo.avatar // 用户头像 URL地址
  95. }
  96. };
  97. var canCustomerServer = new initCustomerServer(option);
  98. canCustomerServer.init();
  99. window.addEventListener('message', function () {
  100. document.getElementById('iframe_content').style.top = 0;
  101. }, { once: true });
  102. },
  103. // 客服列表
  104. get_service_list:function () {
  105. var vm = this;
  106. if(this.loading) return;
  107. if(this.loadend) return;
  108. this.loadTitle = '';
  109. this.loading = true;
  110. store.baseGet($h.U({
  111. c: 'service',
  112. a: 'get_service_list',
  113. q: this.where
  114. }), function (res) {
  115. var data = res.data.data;
  116. vm.list = vm.list.concat(data);
  117. vm.loading = false;
  118. vm.where.page++;
  119. vm.loadend = vm.where.limit > data.length;
  120. vm.loadTitle = vm.loadend ? '我是有底线的' : '上拉加载更多';
  121. }, function () {
  122. vm.loadTitle = '上拉加载更多';
  123. vm.loading = false;
  124. });
  125. },
  126. // 客服token
  127. get_kefu_token:function () {
  128. var vm = this;
  129. store.baseGet($h.U({
  130. c: 'service',
  131. a: 'get_kefu_token'
  132. }),function (res) {
  133. vm.kefu_token = res.data.data.kefu_token;
  134. if (vm.kefu_token) {
  135. vm.initServer();
  136. } else {
  137. layer.msg('未配置客服token', { anim: 0 }, function () {
  138. window.history.back();
  139. });
  140. }
  141. });
  142. },
  143. go_kefu:function (item) {
  144. window.location.assign("{:Url('service/service_ing')}?to_uid=" + item.uid);
  145. }
  146. }
  147. })
  148. })
  149. </script>
  150. {/block}