customer-service.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <template lang="">
  2. <div>
  3. <!-- <v-btn @click="open({ templateId: 6635862 })">双子星模板</v-btn>
  4. <v-btn @click="open({ templateId: 6634867 })">唔即云模板</v-btn> -->
  5. </div>
  6. </template>
  7. <script>
  8. import qs from 'qs';
  9. export default {
  10. head() {
  11. return {
  12. script: [
  13. {
  14. src:
  15. 'https://qiyukf.com/script/98112bcf552907c28ee450c6a58269c3.js' +
  16. qs.stringify(
  17. {
  18. hidden: 0,
  19. sdkTemplateId:
  20. this.$route.query?.templateId ??
  21. process.env.QIYUKF_TEMPLATE_ID,
  22. },
  23. {
  24. addQueryPrefix: true,
  25. },
  26. ),
  27. async: true,
  28. callback: () => {
  29. // console.log(window.ysf);
  30. this.init(window.ysf);
  31. },
  32. },
  33. ],
  34. };
  35. },
  36. computed: {
  37. isAutoOpen() {
  38. return this.$route.query.autoopen === 'true';
  39. },
  40. isOnunread() {
  41. return this.$route.query.onunread === 'true';
  42. },
  43. },
  44. mounted() {},
  45. methods: {
  46. async init(ysf) {
  47. this.ysf = ysf;
  48. // console.log(ysf);
  49. await new Promise((resolve, reject) => {
  50. ysf('onready', resolve);
  51. });
  52. await new Promise((resolve, reject) => {
  53. ysf('config', {
  54. // welcomeTemplateId: 6635862,
  55. uid: String(this.$auth.user.id),
  56. name: this.$auth.user.userName,
  57. mobile: this.$auth.user.phone,
  58. email: this.$auth.user.email,
  59. data: JSON.stringify([
  60. { key: 'real_name', value: this.$auth.user.userName },
  61. { key: 'mobile_phone', hidden: true, value: this.$auth.user.phone },
  62. { key: 'email', value: this.$auth.user.email },
  63. // {
  64. // key: 'avatar',
  65. // label: '头像',
  66. // value:
  67. // 'https://ysf.qiyukf.net/operation/080659b993a45dd546fbd71efd5ef000',
  68. // }, // 访客头像
  69. {
  70. index: 0,
  71. key: 'account',
  72. label: '账号',
  73. value: this.$auth.user.phone,
  74. // href: 'http://example.domain/user/zhangsan',
  75. },
  76. // { index: 1, key: 'sex', label: '性别', value: '先生' },
  77. // {
  78. // index: 5,
  79. // key: 'reg_date',
  80. // label: '注册日期',
  81. // value: '2015-11-16',
  82. // },
  83. // {
  84. // index: 6,
  85. // key: 'last_login',
  86. // label: '上次登录时间',
  87. // value: '2015-12-22 15:38:54',
  88. // },
  89. ]),
  90. language: 'zh-cn',
  91. success: resolve,
  92. error: reject,
  93. });
  94. });
  95. if (this.isAutoOpen) {
  96. this.open({
  97. // templateId: 6635862,
  98. });
  99. }
  100. if (this.isOnunread) {
  101. this.onunread();
  102. }
  103. },
  104. open(data) {
  105. this.ysf('open', data);
  106. },
  107. getUnreadMsg() {
  108. const result = this.ysf('getUnreadMsg');
  109. console.log(result.total, result.type, result.message);
  110. },
  111. onunread() {
  112. this.ysf('onunread', (result) => {
  113. console.log(result.total, result.type, result.message);
  114. });
  115. },
  116. },
  117. };
  118. </script>