hint.vue 2.9 KB

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