weCom/pages/index/index.vue

<template>
	<view class="content" style="background: #F4F5F7;">
		<view class="top">
			<view>
				<image class="logo" :src="userDetail.avatar"></image>
			</view>
			<view class="topRight">
				<view class="wxName">{{userDetail.name}}</view>
				<view class="titleBox">
					<view class="title" v-for="(item,index) in customerInfo.lables">{{item.name}}</view>
				</view>
			</view>	
		</view>
		<view class="tabBox">
			<view class="tabline" :class="{tabActive:tabIndex==1}" @click="tabFn(1)">客户信息</view>
			<view class="tabline" :class="{tabActive:tabIndex==2}" @click="tabFn(2)">车辆信息</view>
			<view class="tabline" :class="{tabActive:tabIndex==3}" @click="tabFn(3)">套餐余额</view>
			<view class="tabline" :class="{tabActive:tabIndex==4}" @click="tabFn(4)">优惠券</view>
			<view class="tabline" :class="{tabActive:tabIndex==5}" @click="tabFn(5)">消费历史</view>
		</view>
		
		<custom ref="customView" :token="token" v-show="tabIndex==1"></custom>
	    <car ref="carView"  :token="token" v-show="tabIndex==2"></car>
	    <packageV ref="packageView" v-show="tabIndex==3"></packageV> 
		<coupon ref="couponView" v-show="tabIndex==4"></coupon>
		<consumption ref="consumptionView" v-show="tabIndex==5"></consumption>
	  <!--  <view>{{code}}</view>
		<view @click="copy(code)">复制code</view> -->
		<!--<view style="color: red;">{{userId}}</view>
		<view @click="copy(userId)">复制userId</view>
		
		<view @click="copy(token)">{{token}}</view>
		<view>{{agentId}}</view> -->
		<!-- <view @click="oAuth">重新授权</view> -->
		<!-- <view style="color: red;">{{userId}}</view>
		<view @click="copy(userId)">复制userId</view>
		<view>{{token}}</view>
		<view @click="copy(token)">复制token</view> -->
	</view>
</template>

<script>
	import custom from './custom.vue' 
	import car from './car.vue' 
	import packageV from './package.vue' 
	import coupon from './coupon.vue' 
	import consumption from './consumption.vue' 
	export default {
		components: {
			custom,car,packageV,coupon,consumption
		},
		
		data() {
			return {
				title: 'Hello',
				tabIndex:1,
				token:'',
				code:'',
				userId:'',
				userDetail:'',
				customerInfo:'',
				corpID:'',
				agentId:'',
				unionID:'',
			}
		},
		onLoad() {
			var that=this
            this.code=uni.getStorageSync('code')
			this.token=uni.getStorageSync('token')
			this.corpID=uni.getStorageSync('corpID')
			this.agentId=uni.getStorageSync('agentId')
			//this.userId='wmMGjbBgAA0JAbGD5Vu8BzEuYgZhvhOA'
			//this.token='26AF53EA2DC528681ABD7B3AC46072E96F0A964431A2453CF0F1DA1C28732A1EAF945459643F62A3A6FD87751E6880BB'
			
		   //this.userId='wmMGjbBgAALroygkoaVBN4-W2O1daIkg'
			//this.token='065BAA93971FEB1A37A08D682FCDB41CC69E76FC36BB038790FB99C5CD71C28EAF945459643F62A3A6FD87751E6880BB'
			this.userId='wmMGjbBgAAeKTdCmEN0CLKPNwJ4ACTxw'
			this.token='0A809B6077F4044EDECFC49762B59668E9508B2CA4C6C4791C8894B2B1A7338AAF945459643F62A3A6FD87751E6880BB'
			 uni.setStorage({
				key: 'token',
				data: that.token,
				 success: function () {	
					  that.extCustomerInfo()
					  that.extUserDetail()
				 }
			}); 
			uni.setStorage({
				key: 'userId',
				data: that.userId,
				 success: function () {	
					
				 }
			}); 
			/* this.code='aSBU0ums_4Z3ofjrfgSlYppwI9Cku5qtIg45ECkJTYY'
			
			 
			 */ 
			/* if(!this.token){
				this.authUserInfo()
			}else{
				 this.extCustomerInfo()
				 
				//this.$refs.customView.getdata() 
				this.extUserDetail()
				 //this.init()
			}
			 */
		   //	this.authUserInfo()
			//this.extUserDetail()
		},
		methods: {
			tabFn(num){
			   this.tabIndex=num
			   if(num==1){
				   this.$refs.customView.getdata()
			   }
			   if(num==2){
			   		this.$refs.carView.getdata()
			   }
			   if(num == 3){
				   this.$refs.packageView.getdata()
			   }
			   if(num==4){
			   	  this.$refs.couponView.getdata()
			   }
			   if(num==5){
			   	  this.$refs.consumptionView.getdata()
			   }
			   
			},
			extCustomerInfo(){
				var that=this;
				this.$http('enterprise/wechat/extCustomerInfo', {
				   corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
				  // extUserId:'wmMGjbBgAA0JAbGD5Vu8BzEuYgZhvhOA',
				    extUserId:this.userId,
				   token:this.token
				}, 'GET').then(res => {
				    this.customerInfo=res.data.customerInfo
					uni.setStorage({
						key: 'integral',
						data: that.customerInfo.integral,
						 success: function () {	 }
					});
					uni.setStorage({
						key: 'levelName',
						data: that.customerInfo.levelName,
						 success: function () {	 }
					});
					var map=res.data.map
					var arr=[]
					if(map.length){
						map.forEach(item=>{
							arr.push(item.PlateNumber)
						})
					}
					uni.setStorage({
						key: 'PlateNumberArr',
						data: arr,
						 success: function () {	 }
					});
					
					
				})
			},
			extUserDetail(){
				var that=this;
				this.$http('enterpriseWechat/auth/extUserDetail', {
				   corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
				  // extUserId:'wmMGjbBgAA0JAbGD5Vu8BzEuYgZhvhOA'
				  extUserId:this.userId
				}, 'GET').then(res => {
					uni.hideLoading();
					this.userDetail=res.data
					this.$refs.customView.getdata()
				})
			},
			authUserInfo(){
				var that=this;
				uni.showLoading({
				 	title: '加载中'
				}); 
				this.$http('enterpriseWechat/auth/authUserInfo', {
				   corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
				   code: this.code
				}, 'GET').then(res => {
					
					this.token=res.data.token
					uni.setStorage({
						key: 'token',
						data: that.token,
						 success: function () {	
							 that.init()
						 }
					});
					
					//that.extUserDetail()
					//that.extCustomerInfo()
				})
			},
			init(){
				/* if(this.$wx.agentConfig){
						uni.showToast({
							title: 'agentConfig',
							icon: 'none',
							duration: 3000
						});			   
				}else{
					   uni.showToast({
						title: 'agentConfig失败',
						icon: 'none',
						duration: 3000
					   });
				} */
				var that=this
				this.$http('enterpriseWechat/auth/getAgentConfig', {
				   corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
				   url:'http://qw.66km.com.cn/'
				}, 'GET').then(res => {
					console.log(11)
					that.$wx.agentConfig({
					    corpid: 'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g', // 必填，企业微信的corpid，必须与当前登录的企业一致
					    agentid:that.agentId, // 必填，企业微信的应用id （e.g. 1000247）
					    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
					    nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
					    signature: res.data.signature,// 必填，签名，见附录-JS-SDK使用权限签名算法
					    jsApiList: ['getCurExternalContact','getContext'], //必填，传入需要使用的接口名称
					    success: function(res) {
						   console.log(res)
						  /* uni.showToast({
							title: 'agentConfig成功',
							icon: 'none',
							duration: 3000
						   }); */
						// 回调
						   that.getContext()
					    },
					    fail: function(err) {
							   console.log(err)
							   uni.showToast({
								title: 'agentConfig失败11',
								icon: 'none',
								duration: 3000
							   });
					        if(res.errMsg.indexOf('function not exist') > -1){
					            alert('版本过低请升级')
					        }
					    }
					});
				})
			},
			getContext(){
			   var that=this;
			   this.$wx.invoke('getContext', {
				   }, function(res){
				   if(res.err_msg == "getContext:ok"){
					  // entry  = res.entry ; //返回进入H5页面的入口类型，目前有normal、contact_profile、single_chat_tools、group_chat_tools、chat_attachment
					//shareTicket = res.shareTicket; //可用于调用getShareInfo接口
					that.getCurExternalContact()
				   }else {
					   //错误处理
					   uni.showToast({
						title: '入口不对',
						icon: 'none',
						duration: 3000
					   });
				   }
			   });
			},
			getCurExternalContact(){
				var that=this;
			   this.$wx.invoke('getCurExternalContact', {
					   }, function(res){
					   if(res.err_msg == "getCurExternalContact:ok"){
						   that.userId  = res.userId ; //返回当前外部联系人userId
						   uni.setStorage({
						   	key: 'userId',
						   	data: that.userId,
						   	 success: function () {	
						   		
						   	 }
						   });
						   that.extUserDetail()
						   that.extCustomerInfo()
					   }else {
						   //错误处理
						   uni.showToast({
								title: 'userId获取失败',
								icon: 'none',
								duration: 3000
						   });
					   }
				   });
			},
		   init2(){
			   var that=this;
			    console.log(this.$wx.config)
				if(this.code){
					if(that.$wx.config){
										   
					}else{
						   uni.showToast({
							title: 'agentConfig失败',
							icon: 'none',
							duration: 3000
						   });
					}
				}else{
					uni.navigateTo({
						url:'auto'
					})
				}
			    uni.showLoading({
			     	title: '加载中'
			    }); 
			   /* this.$http('enterpriseWechat/auth/oAuth2', {
			     corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
			   	 redirectUri:'http://qw.66km.com.cn/#/',
				 agentId:'1000036'
			   }, 'GET').then(res => {
			   	   uni.hideLoading();
			   	   console.log(res.data)
			   }).catch(err=>{
			   		uni.hideLoading();
			   }) */
			  
			   this.$http('enterpriseWechat/auth/getAgentConfig', {
			     corpID:'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g',
				 url:'http://qw.66km.com.cn/'
			   }, 'GET').then(res => {
			   	   uni.hideLoading();
				   console.log(this.$wx)
				  
				   this.$wx.config({
				     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				     appId: 'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g', // 必填，公众号的唯一标识
				     timestamp: res.data.timestamp, // 必填，生成签名的时间戳
				     nonceStr:  res.data.nonceStr, // 必填，生成签名的随机串
				     signature: res.data.signature,// 必填，签名
				     jsApiList: [getCurExternalContact] // 必填，需要使用的JS接口列表
				   }); 
				   that.$wx.ready(() => {
					   if(that.$wx.agentConfig){
					   					   
					   }else{
							   uni.showToast({
								title: 'agentConfig失败',
								icon: 'none',
								duration: 3000
							   });
					   }
					  // that.agentConfigFn()
					  that.$wx.agentConfig({
					      corpid: 'wpMGjbBgAA_zIu6wbKy48zFSbGiGeP8g', // 必填，企业微信的corpid，必须与当前登录的企业一致
					      agentid: '1000051', // 必填，企业微信的应用id （e.g. 1000247）
					      timestamp: res.data.timestamp, // 必填，生成签名的时间戳
					      nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
					      signature: res.data.signature,// 必填，签名，见附录-JS-SDK使用权限签名算法
					      jsApiList: ['getCurExternalContact'], //必填，传入需要使用的接口名称
					      success: function(res) {
								   console.log(res)
								   uni.showToast({
									title: 'agentConfig成功',
									icon: 'none',
									duration: 3000
								   });
					          // 回调
					  			taht.getContext()
					      },
					      fail: function(res) {
								   console.log(res)
								   uni.showToast({
									title: 'agentConfig失败',
									icon: 'none',
									duration: 3000
								   });
					          if(res.errMsg.indexOf('function not exist') > -1){
					              alert('版本过低请升级')
					          }
					      }
					  });
				   })
				 
			   	
			   }).catch(err=>{
				    uni.hideLoading();
			   })
		   },
		   agentConfigFn(){
			   
		   },
		   
          
		   oAuth(){
			  uni.navigateTo({
			  	url:'auto?appid='+this.agentId+'&agentid='+this.agentId
			  }) 
		   },
		   copy(e){
			    uni.setClipboardData({
			       data: e,
			       success: function () {
			      
			         uni.showToast({
			           title: '复制成功',
			           icon: 'success',
			           duration: 2000
			         });
			       },
			       fail: function () {
			         console.log('复制失败');
			        
			       }
			     });
		   }
		}
	}
</script>

<style scoped>
	.top{
		background: #fff;
	}
	.top{
		display: flex;
		padding: 30rpx 24rpx;
	}
	.logo{
		width: 98rpx;height: 98rpx;
	}
	.topRight{
		padding-left: 20rpx;
	}
	.wxName{
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 45rpx;
	}
	.titleBox{
		display: flex;
		padding-top: 10rpx;
		display: flex;    flex-wrap: wrap;
		width: 500rpx;
	}
	.title{
		height: 36rpx;
		border-radius: 4rpx;
		border: 1px solid #FF8113;
		line-height: 34rpx;
		font-size: 24rpx;
		color: #FF8113;
		padding: 0 8rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
	.tabBox{
		display: flex;justify-content: space-between;
		background: #fff;
		margin-top: 16rpx;
		padding: 30rpx 24rpx;
		font-size: 30rpx;
		color: #333333;
		line-height: 42rpx;
	}
	.tabActive{
		color: #FF8113;font-weight: 500;
		border-bottom: 2px solid #FF8113;
	}
	.tabline{
		padding-bottom: 8rpx;
	}
</style>