baiyuchengpin/pages_course/livingInvite.vue

<template>
	<view class="container" :class="isLoggedIn?'bg-red':'bg-redA'">
	<!-- <view class="container" :class="{'bg-red':isLoggedIn}"> -->
		<!-- View 1: Not Logged In -->
		<view v-if="!isLoggedIn" class="landing-view">
			<view class="card" @click="handleLogin">
				<view class="icon-box">
					<!-- Using a link icon, if not available locally, using a remote one or css shape -->
					<!-- <image class="icon-link" :src="linkIcon" mode="aspectFit"></image> -->
					<u-icon name="share" size='40' color='#ffffff'></u-icon>
				</view>
				<view class="text">邀请您生成专属直播观看链接</view>
			</view>
		</view>

		<!-- View 2: Logged In / Success -->
		<view v-else class="success-view">
			<view class="header-text">您的专属直播观看链接生成成功，为保障您的个人信息安全，请勿分享给别人</view>
			
			<view class="info-card">
				<view class="user-row">
					<image class="avatar" :src="userInfo.avatar || defaultAvatar" mode="aspectFill"></image>
					<view class="user-details">
						<view class="name">{{userInfo.nickName || '微信用户'}}</view>
						<view class="id">ID {{userInfo.userId || userInfo.id || '8059522'}}</view>
					</view>
				</view>
				
				<view class="divider"></view>
				
				<view class="detail-row">
					<text class="label">所属经销商</text>
					<text class="value">{{userInfo.deptName || '运营'}}</text>
				</view>
				<view class="detail-row">
					<text class="label">当前跟进人</text>
					<text class="value">{{userInfo.userName || '运营'}}</text>
				</view>
			</view>
			
			<button class="copy-btn" @click="handleCopyLink">复制链接</button>
		</view>
	</view>
</template>

<script>
	import { loginByMiniApp, getUserInfo ,getConfigByKey} from '@/api/user.js';
	export default {
		data() {
			return {
				isLoggedIn: false,
				userInfo: {},
				defaultAvatar: 'https://jsbk-1356516894.cos.ap-chongqing.myqcloud.com/orangeShop/detault_head.png',
				linkIcon: 'https://jsbk-1356516894.cos.ap-chongqing.myqcloud.com/orangeShop/link_icon.png', 
				liveLink: ''
			}
		},
		onLoad(option) {
			this.checkLoginStatus();
		},
		methods: {
			checkLoginStatus() {
				const token = uni.getStorageSync('AppToken');
				if (token) {
					this.isLoggedIn = true;
					this.loadUserInfo();
				} else {
					this.handleLogin()
					this.isLoggedIn = false;
				}
			},
			loadUserInfo() {
				const storedUser = uni.getStorageSync('userInfo');
				if (storedUser) {
					try {
						this.userInfo = JSON.parse(storedUser);
					} catch (e) {
						this.userInfo = storedUser;
					}
				}
				// Optionally fetch latest info
				getUserInfo().then(res => {
					if (res.code === 200 && res.user) {
						this.userInfo = res.user;
						uni.setStorageSync('userInfo', JSON.stringify(res.user));
					}
				});
			},
				// Silent Login Flow
				async handleLogin(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:wx.getAccountInfoSync().miniProgram.appId,
								   userId:data.userId
								})
								.then( res => {
									uni.hideLoading();
									if(res.code==200){
										console.log("loginFsUserWx:",res)
										// this.userinfos=uni.getStorageSync('userinfos')
										let token = uni.getStorageSync('TOKEN_WEXIN');
										let user = uni.getStorageSync('userInfo')
										uni.setStorageSync(TOKEN_KEYAuto, token);
										uni.setStorageSync('auto_userInfo', JSON.stringify(user));
										this.user = user
										this.isLoggedIn = true
										// this.getIsAddKf() 
									}else if(res.code==406){
										uni.showToast({
											icon:'none',
											title: '该用户已成为其他销售会员',
										});
									}else{
										uni.showToast({
											icon:'none',
											title: res.msg,
										});
									}
								   
								 })
							},
						})
					}else{
						uni.setStorageSync('H5course',{
							companyId: this.urlOption.companyId,
							companyUserId:this.urlOption.companyUserId,
							type: 1, //1自动，其他手动
						})
						await this.$store.dispatch('getWebviewUrl');
						uni.navigateTo({
							url:'/pages_course/webview?H5course='+uni.getStorageSync('H5course')
						})
					}
				},
			generateLiveLink() {
				// Mocking the link generation based on user ID
				// In a real app, this might come from an API
				const userId = this.userInfo.userId || this.userInfo.id;
				// Example link format
				this.liveLink = `https://course.jsbk.com/live/invite?uid=${userId}`;
			},
			handleCopyLink() {
				if (!this.liveLink) {
					this.generateLiveLink();
				}
				uni.setClipboardData({
					data: this.liveLink,
					success: () => {
						uni.showToast({ title: '链接已复制', icon: 'success' });
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		&.bg-red {
			/* Red gradient background for View 2 */
			background: linear-gradient(180deg, #D52C32 0%, #ff4455  20%, #f5f5f5 30%, #f5f5f5 100%);
		}
		&.bg-redA {
			/* Red gradient background for View 2 */
			background: linear-gradient(180deg, #ffe1e2 0%, #f3e2e2  20%, #faeaea 30%, #f5f5f5 100%);
		}
	}

	/* View 1 Styles */
	.landing-view {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		padding-top: 150rpx;
		// background-color: #f8f8f8;
	}

	.card {
		width: 600rpx;
		height: 400rpx;
		background: #ffffff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		
		&:active {
			opacity: 0.9;
			transform: scale(0.98);
		}

		.icon-box {
			width: 120rpx;
			height: 120rpx;
			background: #FF4D4F; /* Red background for the icon placeholder */
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 40rpx;
			box-shadow: 0 4rpx 10rpx rgba(255, 77, 79, 0.3);
			
			.icon-link {
				width: 70rpx;
				height: 70rpx;
				filter: brightness(0) invert(1); /* Make the icon white */
			}
		}

		.text {
			font-size: 30rpx;
			color: #666666;
			text-align: center;
		}
	}

	/* View 2 Styles */
	.success-view {
		width: 100%;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header-text {
		color: #ffffff;
		font-size: 28rpx;
		line-height: 1.5;
		margin-bottom: 40rpx;
		text-align: left;
		width: 100%;
		padding: 0 10rpx;
	}

	.info-card {
		width: 100%;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		margin-bottom: 60rpx;
	}

	.user-row {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			background-color: #eee;
		}

		.user-details {
			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 8rpx;
			}
			.id {
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
	
	.divider {
		height: 1rpx;
		background-color: #eeeeee;
		width: 100%;
		margin-bottom: 30rpx;
	}

	.detail-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		
		&:last-child {
			margin-bottom: 0;
		}

		.label {
			color: #999999;
		}

		.value {
			color: #333333;
			font-weight: 500;
		}
	}

	.copy-btn {
		width: 100%;
		height: 90rpx;
		background: #FF2E4D;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 8rpx 16rpx rgba(255, 46, 77, 0.3);
		
		&:active {
			background: #E02844;
		}
		
		&::after {
			border: none;
		}
	}
</style>