fhxnuser_uniapp_fudai_video_01/pages_course/shortLink.vue

<template>
	<view class="content">
		<image class="bgimg" src="/static/home_top_bg.png" mode="widthFix"></image>
		<view class="header-nav"
			:style="{height: `calc(88rpx + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
			专属链接
		</view>
		<view v-if="isLogin" class="content-body" :style="{paddingTop: `calc(88rpx + ${statusBarHeight}px)`}">
			<view class="tip">
				您的专属链接生成成功，为保障您的个人信息安全，请勿分享给别人
			</view>
			<view class="cardbox">
				<view class="x-f">
					<u-avatar :src="avatar||user.avatar" size="44"></u-avatar>
					<view class="ml24">
						<view class="fs36 username">{{username||user.nickName}}</view>
						<view class="userid mt12 fs26" v-if="user&&user.userId">ID {{user.userId}}</view>
					</view>
				</view>
				<u-line color="#eee" margin="30rpx 0"></u-line>
				<view class="x-f">
					<text class="label fs30 mr24">所属经销商</text>
					<text class="val fs30">{{qwUser.companyName}}</text>
				</view>
				<u-line color="#eee" margin="30rpx 0"></u-line>
				<view class="x-f mb24">
					<text class="label fs30 mr24">当前跟进人</text>
					<text class="val fs30">{{qwUser.qwUserName}}</text>
				</view>
			</view>
			<view class="button x-ac mt24" @click="handleCopy">复制链接</view>
		</view>
		<view v-if="!isLogin" :style="{paddingTop: `calc(88rpx + ${statusBarHeight}px)`}">
			<view class="login-loading x-ac">
				<courseLoading></courseLoading>
				<text class="mt30">邀请您生成您的专属链接</text>
			</view>
		</view>
	</view>
</template>

<script>
	import courseLoading from './components/courseLoading.vue'
	import { mapGetters } from 'vuex';
	import{ 
		handleFsUserWx,
		getByAppId,loginByMp,getUserInfoByQwUser,encryptLink} from "@/api/course.js"
	export default {
		components:{
			courseLoading
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				shortLink: '',
				loading: true,
				isLogin: false,
				username: '',
				avatar: '',
				user:{},
				qwUser: {},
				urlOption: '',
				code:'',
				authType: 1, // 授权方式
			}
		},
		computed: {
			...mapGetters(['coureLogin']),
		},
		watch: {
		    coureLogin: {
		      immediate: true,          // 页面一进入就检查一次
		      handler(val) {
		        if (val == 2) {
					console.log("AppToken失效，请重新登录")
					this.isLogin = false
					this.goLogin()
		        }
		      }
		    }
		},
		onLoad(option) {
			if (option.course) {
				this.urlOption = option.course ? JSON.parse(decodeURIComponent(option.course)) : {}
			} else if(option.s){
				this.urlOption = option.s ? JSON.parse(decodeURIComponent(option.s)) : {}
			} else {
				const keys = decodeURIComponent(Object.keys(option)[0]);
				this.urlOption = JSON.parse(keys.split('course=')[1])
			}
			uni.$on('usercode',(data)=>{
				if(data) {
					this.code=data.code
					this.loginFsUserWx(data)
				}
			})
			if(this.code) return;
			this.utils.isLoginCourse().then(
				res => {
					console.log("=====isLoginCourse=======sss",res)
					if(res){
						this.isLogin = true
						this.getUserInfoByQwUser()
					} else{
						this.isLogin = false
						this.goLogin()
					}
				},
				rej => {}
			);
		},
		onShow() {
			if(uni.getStorageSync('auto_userInfo') && JSON.stringify(uni.getStorageSync('auto_userInfo'))!='{}') {
				this.user = JSON.parse(uni.getStorageSync('auto_userInfo'))
			} else {
				this.user = {}
			}
		},
		onUnload() {
			uni.$off('usercode')
		},
		beforeDestroy() {
			uni.$off('usercode')
		},
		methods: {
			getUserInfoByQwUser() {
				const param = {
					...this.urlOption,
					appId: getApp().globalData.appId
				}
				getUserInfoByQwUser(this.urlOption).then(res=>{
					if(res.code ==200) {
						this.qwUser = res.data.qwUser || {}
						this.username = res.data.user.nickName || ''
						this.avatar = res.data.user.avatar || ''
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			handleCopy() {
				this.utils.isLoginCourse().then(res => {
					console.log("=====isLoginCourse=======sss",res)
					if(res){
						this.isLogin = true
						if(!this.shortLink) {
							this.encryptLink()
						} else {
							uni.setClipboardData({
								data: this.shortLink,
								success: () => {
									uni.showToast({
										title: '链接已成功复制到剪切板',
										icon: 'none'
									})
								}
							});
						}
					} else{
						this.isLogin = false
						this.goLogin(1)
					}
				});
			},
			encryptLink() {
				const param = {
					...this.urlOption,
					token:uni.getStorageSync('AppTokenmini_RTCourse')
				}
				const str = JSON.stringify(param)
				encryptLink({url: str}).then(res=>{
					if(res.code==200){
						const path = res.data.encryptionLink? res.data.encryptionLink.split('?s=')[0] : ''
						const link = res.data.encryptionLink? res.data.encryptionLink.split('?s=')[1] : ''
						this.shortLink = path+ '?s=' + encodeURIComponent(link)
						uni.setClipboardData({
							data: this.shortLink,
							success: () => {
								uni.showToast({
									title: '链接已成功复制到剪切板',
									icon: 'success'
								})
							}
						});
					} else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			goWXLogin() {
				this.utils.getProvider().then(provider=>{
					console.log('当前的环境商',provider)
					if (!provider) {
					  reject()
					}
					uni.login({
						provider: provider,
						success: async loginRes => {
							console.log(loginRes)
							uni.getUserInfo({
							   provider: provider,
							   success: (infoRes)=> {
								    uni.showToast({
										title: '登录中...',
										icon: 'loading'
								    });
									loginByMp({code: loginRes.code,encryptedData:infoRes.encryptedData,iv:infoRes.iv,appId: getApp().globalData.appId}).then(res=>{
										uni.showToast({
											title: '登录成功',
											icon: 'none'
										});
										 uni.hideLoading();
										 if (res.code == 200) {
											this.$store.commit('setCoureLogin', 1);
											uni.setStorageSync('AppTokenmini_RTCourse', res.token);
											uni.setStorageSync('auto_userInfo', JSON.stringify(res.user));
											this.user = res.user
											this.isLogin = true
											this.getUserInfoByQwUser()
										 } else {
											uni.showToast({
												title: res.msg,
												icon: 'none'
											});
										 }
									 }).catch(err=>{
										uni.hideLoading();
										uni.showToast({
											icon:'none',
											title: "登录失败,请重新登录",
										});
									});
							   }
							});
						}
					})
				}).catch(err => {})
			},
			goLogin() {
				this.getByAppId()
			},
			getByAppId(){
				getByAppId(getApp().globalData.appId).then(res=>{
					if(res.code == 200) {
						this.authType = res.config.authType || 1
						if(this.authType == 1) {
							this.code = ''
							this.goWXLogin()
						} else if(this.authType==2) {
							this.loginFsUserWx()
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				}).catch((err)=>{
					uni.showToast({
						title: JSON.stringify(err),
						icon: 'error'
					})
				})
			},
			async loginFsUserWx(data) {
				if(data){
					console.log('huoqu1222',data)
					uni.showLoading({
						title: '登录中'
					})
					uni.login({
						provider: "weixin",
						success: async loginRes => {
							console.log(loginRes)
							let code = loginRes.code // 获取开发code
							handleFsUserWx({
							   code: code,
							   appId:getApp().globalData.appId,
							   userId:data.userId
							})
							.then( res => {
								uni.showToast({
									title: '登录成功',
									icon: 'none'
								});
								uni.hideLoading();
								if(res.code==200){
									this.code = ''
									console.log("loginFsUserWx:",res)
									// this.userinfos=uni.getStorageSync('userinfos')
									let token = uni.getStorageSync('TOKEN_WEXIN');
									let user = uni.getStorageSync('web_userInfo')
									// this.userInfo=uni.getStorageSync('userInfo');
									// this.isLogin = true
									
									this.$store.commit('setCoureLogin', 1);
									uni.setStorageSync('AppTokenmini_RTCourse', token);
									uni.setStorageSync('auto_userInfo', JSON.stringify(user));
									this.user = user
									this.isLogin = true
									this.getUserInfoByQwUser()
								}else{
									uni.showToast({
										icon:'none',
										title: res.msg,
									});
								}
							   
							 })
						},
					})
				}else{
					uni.setStorageSync('H5course',{
						companyId: this.urlOption.companyId,
						companyUserId:this.urlOption.companyUserId,
					})
					await this.$store.dispatch('getWebviewUrl');
					uni.navigateTo({
						url:'/pages_course/webview?H5course='+uni.getStorageSync('H5course')
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-loading {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 24rpx;
		position: relative;
		z-index: 999;
		margin: 100rpx 30rpx 30rpx 30rpx;
		flex-direction: column;
		font-size: 30rpx;
		color: #555;
		padding: 60rpx;
	}
	.content {
		min-height: 100vh;
		&-body {
			position: relative;
			z-index: 3;
			padding: 0 40rpx;
			min-height: 100vh;
		}

		.cardbox {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 24rpx;
			margin-top: 30rpx;
		}

		.username {
			font-weight: bold;
		}

		.userid {
			color: #999;
		}
		
		.label {
			color: #555;
		}
		.button {
			width: 100%;
			height: 100rpx;
			background: linear-gradient(90deg, #FF5C03 0%, #F0964C 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 34rpx;
			color: #FFFFFF;
		}
	}
	.tip {
		color: #FF5C03;
		font-size: 28rpx;
		margin-top: 100rpx;
	}

	.bgimg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.header-nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		height: 88rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		box-sizing: border-box;
	}
</style>