crm/resources/zqxgdigitalize/src/App.vue

<template>
	<div id="app">
		<keep-alive>
			<router-view v-if="$route.meta.keepAlive" />
		</keep-alive>
		<router-view v-if="!$route.meta.keepAlive" />
	</div>
</template>

<script>
	import {
		mapMutations,
	} from "vuex";
	import wx from "weixin-js-sdk";
	import {
		empdetail
	} from "@/api/user/user";
	import {
		haveOutCall
	} from "@/api/index/crm";
	import {
		getAgentName
	} from "@/api/broker/index.js";
	import * as api from "@/api/user/user.js";
	export default {
		name: "App",
		data() {
			return {};
		},
		created() {
			var that = this;
			var hrefList = that.getQueryStringArgs(window.location.href);
			if (!!hrefList.token) {
				that.setToken(hrefList.token);
				if (!hrefList.btype) {
					this.userfun(); 
					this.getCallOutSystem();
				}
				this.$nextTick(() => {
					this.getAgentName();
				})
			}
			that.setclientype(hrefList.client_type);
			let str = window.location.hash.split("?")[0].split("#/")[1];
			if (!!hrefList.empid) {
				that.setempid(hrefList.empid);
			}
			if (!!hrefList.platform) {
				this.setplatform(hrefList.platform);
			}
		},
		methods: {
			...mapMutations([
				"setToken",
				"setclientype",
				"setempid",
				"setpersonObj",
				"setplatform",
				"setAgentName",
				"setOutCallSystem"
			]),
			//处理链接携带的参数
			getQueryStringArgs: function(url) {
				url = url == null ? window.location.href : url;
				var search = url.substring(url.lastIndexOf("?") + 1);
				var obj = {};
				var reg = /([^?&=]+)=([^?&=]*)/g;
				search.replace(reg, function(rs, $1, $2) {
					var name = decodeURIComponent($1);
					var val = decodeURIComponent($2);
					val = String(val);
					obj[name] = val;
					return rs;
				});
				return obj;
			},
			//获取装修推荐官自定义名称
			getAgentName() {
				getAgentName({}).then(res => {
					if (res.data.code == 0) {
						this.setAgentName(res.data.name);
					}
				})
			},
			getCallOutSystem() {
				haveOutCall({}).then(res => {
					if (res.data.code == 0) {
						this.setOutCallSystem(res.data.data);
					}
				})
			},
			//获取员工用户信息
			userfun() {
				const that = this;
				let data = {
					alertshow: 1,
				};
				empdetail(data).then((res) => {
					if (res.data.code == 0 || res.data.code == 601) {
						that.setpersonObj(res.data.data);
						that.setempid(res.data.data.id);
						this.setWXChatConfig();
					}
				});
			},
			/**
			 * 配置微信JSDK
			 * */
			setWXChatConfig() {
				let url = location.href.split("#")[0];
				api.getwxticket({
						url: url,
						alertshow: 1,
					})
					.then((res) => {
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: res.data.data.appid, // 必填，公众号的唯一标识
							timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: res.data.data.noncestr, // 必填，生成签名的随机串
							signature: res.data.data.sign, // 必填，签名
							jsApiList: ["chooseImage", "uploadImage", "getLocalImgData","scanQRCode"], // 必填，需要使用的JS接口列表
						});
						wx.ready(function() {});
					});
			},
		},
	};
</script>

<style lang="less">
	@import "./styles/base.css";

	#app {
		width: 100vw;
		height: 100vh !important;
		max-width: 800px;
		/*no*/
		margin: 0 auto;
		font-family: PingFangSC-Regular, PingFang SC;
	}
	
	.block_content {
		p {
			width: 100% !important;
			max-height: none !important;
			img {
				width: 100% !important;
				height: auto !important;
				margin: 0px !important;
				padding: 0px !important;
				display: block;
			}
		}
	}

	.ellipsis {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.bgbox {
		width: 100%;
		height: 16px;
		background: #eaf0f4;
	}

	.layBox {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99999;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.layBox .van-loading {
		top: 40%;
	}

	.layBox .van-loading__text {
		color: #fff;
	}

	.lhr40 {
		line-height: 40px;
	}

	.loadmiddle {
		div {
			width: 30px;
			height: 50px;
			border-radius: 15px;
			margin-right: 16px;
			position: relative;
			// top: -30px;
		}

		div:last-child {
			margin-right: 0;
		}

		div.firstbox {
			height: 50px;
			animation: mymove 1.2s infinite; //1.2
			-webkit-animation: mymove 1.2s infinite;
			/* Safari 和 Chrome */
		}

		div.secondbox {
			height: 80px;
			animation: mymove1 1.2s infinite; //1.2
			-webkit-animation: mymove1 1.2s infinite;
			/* Safari 和 Chrome */
		}

		div.thirdbox {
			height: 110px;
			animation: mymove2 1.2s infinite;
			-webkit-animation: mymove2 1.2s infinite;
			/* Safari 和 Chrome */
		}
	}

	.loadmiddle {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		height: 150px;
		flex-direction: row;
		position: relative;
		top: 0;
		animation: movetop 1.2s infinite;
		-webkit-animation: movetop 1.2s infinite;
		/* Safari 和 Chrome */
	}

	@keyframes movetop {
		0% {
			top: 0;
		}

		58% {
			top: 0;
		}

		100% {
			top: -60px;
		}
	}

	.loadmiddle div {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: end;
	}

	.faceimg {
		display: block;
		width: 160px;
		height: 126px;
		margin: 0 auto 0;
		position: relative;
		top: -30px;
		z-index: 1;
		overflow: hidden;
		animation: myheight 1.2s infinite;
		-webkit-animation: myheight 1.2s infinite;

		/* Safari 和 Chrome */
		img {
			display: block;
			width: 100%;
		}
	}

	@keyframes myheight {
		0% {
			height: 0px;
			top: -30px;
		}

		58% {
			height: 0px;
			top: -30px;
		}

		100% {
			height: 126px;
			top: -90px;
		}
	}

	@keyframes mymove {
		0% {
			height: 50px;
		}

		12.5% {
			height: 20px;
		}

		25% {
			height: 50px;
		}

		100% {
			height: 50px;
		}
	}

	@keyframes mymove1 {
		0% {
			height: 80px;
		}

		20.834% {
			height: 30px;
		}

		41.7% {
			height: 80px;
		}

		100% {
			height: 80px;
		}
	}

	@keyframes mymove2 {
		0% {
			height: 110px;
		}

		29.2% {
			height: 40px;
		}

		58.3% {
			height: 110px;
		}

		100% {
			height: 110px;
		}
	}

	.unfuturelayer {
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.16);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;
	}

	.unfuturebox {
		display: block;
		width: 600px;
		height: 485px;
		position: fixed;
		top: 50%;
		left: 75px;
		transform: translateY(-50%);
		background-color: #fff;
		box-shadow: 0px 6px 26px rgba(0, 0, 0, 0.16);
		border-radius: 8px;
	}

	.unfuturebox img {
		display: block;
		width: 470px;
		height: 405px;
		margin: 40px auto;
	}
</style>