dd_pc/src/hint.vue

<template>
	<div>
		<div @click="init()">
			<img src="./assets/image/pc.png" style="width:100%;height:auto" v-if="type == 'PC'" />
			<div class="app" v-else :style="{ width: width }">
				<img src="./assets/image/app1.png" :style="{ width: width, height: 'auto' }" />
			</div>
		</div>
	</div>
</template>

<script>
import { openTryoutSku } from 'dingtalk-design-libs';
import openLink from 'dingtalk-jsapi/api/biz/util/openLink';
import close from 'dingtalk-jsapi/api/biz/navigation/close';
export default {
	data() {
		return {
			corpId: '',
			token: '',
			type: 'APP',
			width: ''
		};
	},
	created() {
		this.width = document.body.clientWidth + 'px';
	},
	mounted() {
		var url = window.location.href;
		// let url='https://test-ding.g107.com/?purchaseToken=$PURCHASE_TOKEN$&corpId=$CORPID$&appEntityType=PC#/hint';
		var data = this.GetRequest(url);
		this.corpId = data.corpId;
		this.token = data.purchaseToken;
		if(data.appEntityType.indexOf('APP')>=0){
			this.type ='APP';
		}else{
			this.type ='PC';
		}
		console.log(data,this.type)
		if (this.corpId) {
			this.$nextTick(()=>{
				this.init();
			})
		}
	},
	methods: {
		IsPC() {
		    var userAgentInfo = navigator.userAgent;
		    var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];
		    var flag = true;
		    for (var v = 0; v < Agents.length; v++) {
		        if (userAgentInfo.indexOf(Agents[v]) > 0) {
		            flag = false;
		            break;
		        }
		    }
		    return flag;
		},
		init() {
			// 开发者自行判断调用这个方法的时机
			openTryoutSku({
				// corpId可以从应用首页的url上获取到
				corpId: this.corpId,
				// corpId: 'ding897857ddc9137670ffe93478753d9884',
				// 应用的appId
				appId: 55493,
				// 从应用首页的url上获取到，url上参数名为 purchaseToken。
				// purchaseToken如何配置参照下文”配置入口地址“章节。
				token: this.token,
				miniAppId: this.type == 'APP' ? 5000000000104741 : '' // 如果是三方小程序应用，需要设置一下自身的miniAppId。H5微应用可以不设置这个参数
			}).then(res => {
				const {
					// action的值为：
					// 'ok'，用户执行了开通动作，或将自己加入了已开通的应用的可见范围内
					// 'cancel', 用户点击了取消按钮
					// 'unknown'，用户点击空白区域关闭了弹窗，此时可以跟cancel采取同样的处理逻辑
					action,
					// 开通了应用的组织的corpId。因为个人开通可能会用钉钉的隐藏组织，所以开通应用的组织的corpId以这里返回的为准。
					corpId
				} = res;
				if (action === 'ok') {
					if (this.type == 'APP') {
						close({});
					} else {
						if(this.IsPC()){
							window.location.replace('https://pc.dd.g107.com?corpId=' + corpId)
						}else{
							openLink({ url:'https://pc.dd.g107.com?corpId=' + corpId }).then(() => close({}));
						}
						
					}
				}
			})
			.catch((res) => {
				console.log(res);
				// 钉钉侧出现了技术异常，比如打开弹窗失败等，出现概率非常低
			});
		},
		GetRequest(urlStr) {
			if (typeof urlStr == 'undefined') {
				var url = decodeURI(location.search); //获取url中"?"符后的字符串
			} else {
				var url = '?' + urlStr.split('?')[1];
			}
			var theRequest = new Object();
			var strs;
			if (url.indexOf('?') != -1) {
				var str = url.substr(1);
				strs = str.split('&');
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return theRequest;
		}
	}
};
</script>

<style scoped="scoped">
.app {
	margin: 0 auto;
	height: auto;
	padding: 0;
}
.app img {
	/* width: 375px; */
}
</style>