hint.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <template>
  2. <div>
  3. <div @click="init()">
  4. <img src="./assets/image/pc.png" style="width:100%;height:auto" v-if="type == 'PC'" />
  5. <div class="app" v-else :style="{ width: width }">
  6. <img src="./assets/image/app1.png" :style="{ width: width, height: 'auto' }" />
  7. </div>
  8. </div>
  9. </div>
  10. </template>
  11. <script>
  12. import { openTryoutSku } from 'dingtalk-design-libs';
  13. import openLink from 'dingtalk-jsapi/api/biz/util/openLink';
  14. import close from 'dingtalk-jsapi/api/biz/navigation/close';
  15. export default {
  16. data() {
  17. return {
  18. corpId: '',
  19. token: '',
  20. type: 'APP',
  21. width: ''
  22. };
  23. },
  24. created() {
  25. this.width = document.body.clientWidth + 'px';
  26. },
  27. mounted() {
  28. var url = window.location.href;
  29. // let url='https://test-ding.g107.com/?purchaseToken=$PURCHASE_TOKEN$&corpId=$CORPID$&appEntityType=PC#/hint';
  30. var data = this.GetRequest(url);
  31. this.corpId = data.corpId;
  32. this.token = data.purchaseToken;
  33. if(data.appEntityType.indexOf('APP')>=0){
  34. this.type ='APP';
  35. }else{
  36. this.type ='PC';
  37. }
  38. if (this.corpId) {
  39. this.$nextTick(()=>{
  40. this.init();
  41. })
  42. }
  43. },
  44. methods: {
  45. IsPC() {
  46. var userAgentInfo = navigator.userAgent;
  47. var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];
  48. var flag = true;
  49. for (var v = 0; v < Agents.length; v++) {
  50. if (userAgentInfo.indexOf(Agents[v]) > 0) {
  51. flag = false;
  52. break;
  53. }
  54. }
  55. return flag;
  56. },
  57. init() {
  58. // 开发者自行判断调用这个方法的时机
  59. openTryoutSku({
  60. // corpId可以从应用首页的url上获取到
  61. corpId: this.corpId,
  62. // corpId: 'ding897857ddc9137670ffe93478753d9884',
  63. // 应用的appId
  64. appId: 55493,
  65. // 从应用首页的url上获取到,url上参数名为 purchaseToken。
  66. // purchaseToken如何配置参照下文”配置入口地址“章节。
  67. token: this.token,
  68. miniAppId: this.type == 'APP' ? 5000000000104741 : '' // 如果是三方小程序应用,需要设置一下自身的miniAppId。H5微应用可以不设置这个参数
  69. }).then(res => {
  70. const {
  71. // action的值为:
  72. // 'ok',用户执行了开通动作,或将自己加入了已开通的应用的可见范围内
  73. // 'cancel', 用户点击了取消按钮
  74. // 'unknown',用户点击空白区域关闭了弹窗,此时可以跟cancel采取同样的处理逻辑
  75. action,
  76. // 开通了应用的组织的corpId。因为个人开通可能会用钉钉的隐藏组织,所以开通应用的组织的corpId以这里返回的为准。
  77. corpId
  78. } = res;
  79. if (action === 'ok') {
  80. if (this.type == 'APP') {
  81. close({});
  82. } else {
  83. if(this.IsPC()){
  84. window.location.replace('https://pc.dd.g107.com?corpId=' + corpId)
  85. }else{
  86. openLink({ url:'https://pc.dd.g107.com?corpId=' + corpId }).then(() => close({}));
  87. }
  88. }
  89. }
  90. })
  91. .catch((res) => {
  92. console.log(res);
  93. // 钉钉侧出现了技术异常,比如打开弹窗失败等,出现概率非常低
  94. });
  95. },
  96. GetRequest(urlStr) {
  97. if (typeof urlStr == 'undefined') {
  98. var url = decodeURI(location.search); //获取url中"?"符后的字符串
  99. } else {
  100. var url = '?' + urlStr.split('?')[1];
  101. }
  102. var theRequest = new Object();
  103. var strs;
  104. if (url.indexOf('?') != -1) {
  105. var str = url.substr(1);
  106. strs = str.split('&');
  107. for (var i = 0; i < strs.length; i++) {
  108. theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
  109. }
  110. }
  111. return theRequest;
  112. }
  113. }
  114. };
  115. </script>
  116. <style scoped="scoped">
  117. .app {
  118. margin: 0 auto;
  119. height: auto;
  120. padding: 0;
  121. }
  122. .app img {
  123. /* width: 375px; */
  124. }
  125. </style>