ylrz_scrm_company_h5/pages/user/index.vue

<template>
	<view class="content container">
		<!-- #ifdef MP-WEIXIN -->
		<view class="h110"></view>
		<!-- #endif -->
		<view class="bg" v-if="!viewload"></view>
		<view class="cont-box" v-if="!viewload">
			<view class="user-cont" @click="navTo('/pages/user/userInfo')">
				<view class="user-box" v-if="user!=null">
					<view class="left">
						<u-avatar :src="user.avatar" size="50"></u-avatar>
						<!-- <image class="img" :src="user.avatar" mode="aspectFill"></image> -->
						<view class="user" >
							<view class="username">{{user.nickName}}</view>
							<view class="account">{{user.email}}</view>
						</view>
					</view>
					<view class="right" >
						<image :src="imgPath+'/app/images/right_arrow.png'"></image>
					</view>
				</view>
				<view class="justify-between align-center">
					<view class="company" v-if="user!=null">
						<!-- <image :src="imgPath+'/app/images/icon_comp.png'"></image> -->
						<view class="base-color-6">公司：</view>
						<view class="name">{{user.companyName||'暂无数据'}}</view>
					</view>
					<view class="company" v-if="user!=null">
						<view class="base-color-6">部门：</view>
						<view class="name">{{user.dept.deptName||'无'}}</view>
					</view>
				</view>
				<view class="justify-between align-center">
					<view class="company" v-if="user!=null">
						<view class="base-color-6">岗位：</view>
						<view class="name">{{user.postname||'无'}}</view>
					</view>
					<view class="company" v-if="user!=null">
						<view class="base-color-6">角色：</view>
						<view class="name">{{user.rolesname||'无'}}</view>
					</view>
				</view>
			</view>
			<view class="bgf radius15 p30 justify-between align-center mb40" v-if="balance" >
				<view class="fs24">红包剩余金额</view>
				<view class="fs40 bold">{{balance.toFixed(2)}}</view>
			</view>
			<view class="menu-box" style="margin-top: -20rpx;" >
				<view class="title-box">
					<image class="icon" :src="imgPath+'/app/manergevip/chang.png'"></image>
					<view class="title">常用功能</view>
				</view>
				<view class="line"></view>
				<view class="menus" v-if="user!=null">
					<view class="menu-item" @click="navTo('/pages_manage/manageIndex')">
						<image :src="imgPath+'/app/images/menu_info.png'"></image>
						<view class="m-name">销售管理</view>
					</view>
					<view class="menu-item" @click="navTo('/pages/user/users/users')" v-if="user.userType=='00'">
						<image :src="imgPath+'/app/manergevip/qudao.png'"></image>
						<view class="m-name">审核销售</view>
					</view>
					<view class="menu-item" @click="handleShare" v-if="user.userType=='00'">
						<image :src="imgPath+'/app/manergevip/share-manage.png'" ></image>
						<view class="m-name">邀请销售</view>
					</view>
					<view class="menu-item" @click="navTo('/pages/courseManage/manage/lableSetup')">
						<image :src="imgPath+'/app/images/changeLable.png'"></image>
						<view class="m-name">标签设置</view>
					</view>
			 	</view>
			</view>
			<view class="menu-box">
				<view class="title-box">
					<image class="icon" :src="imgPath+'/app/manergevip/qita.png'"></image>
					<view class="title">其它工具</view>
				</view>
				<view class="line"></view>
				<view class="menus">
					<view class="menu-item" @click="navTo('/pages/user/about')">
						<image :src="imgPath+'/app/manergevip/about.png'"></image>
						<view class="m-name">关于我们</view>
					</view>
					<view class="menu-item" @click="navTo('/pages/user/editUser')">
						<image :src="imgPath+'/app/manergevip/setup.png'"></image>
						<view class="m-name">设置</view>
					</view>
				<!-- 	<view class="menu-item" @click="navTo('/pages_course/exportlist/exportlist')">
						<u-icon name="attach" color="#2979ff" size="28"></u-icon>
						<view class="m-name">导出列表</view>
					</view> -->
				</view>
				
			</view>
			<view class="btn-box" >
				<view class="sub-btn" @click="showLogout()">退出登录</view>
			</view>
		</view>
		<!-- 分享弹窗 -->
		<u-popup :show="showShare" :closeOnClickOverlay="true" :round='20' @close="closeShare" @open="openShare">
			<view class="sharePop x-ac">
				<!--#ifdef MP-WEIXIN-->
				<view class="sharePop-item y-f" @click="shareimg">
					<image :src="imgPath+'/app/images/card_icon.png'" mode="aspectFill"
						style="width: 80rpx; height: 80rpx;margin-top: 20rpx;"></image>
					<view style="font-weight: bold;margin-bottom: 4px;">生成卡片</view>
					<view style="font-size: 12px;color: #888;">指导分享轻松转发</view>
					<button open-type="share" class="share">分享课程</button>
				</view>
				<!--#endif-->
				<!-- <view class="sharePop-item y-f" @click="buildimg">
					<image :src="imgPath+'/app/images/poster_icon.png'" mode="aspectFill"></image>
					<view style="font-weight: bold;margin-bottom: 4px;">生成海报</view>
					<view style="font-size: 12px;color: #888;">保存海报美观宣传</view>
				</view> -->
				<!--#ifdef H5-->
				<view class="sharePop-item y-f" @click="shareSale">
					<image :src="imgPath+'/app/images/link_icon.png'" mode="aspectFill"></image>
					<view style="font-weight: bold;margin-bottom: 4px;">复制链接</view>
					<view style="font-size: 12px;color: #888;">生成链接一键复制</view>
				</view>
				<!--#endif-->
			</view>
		</u-popup>
		<!-- 长按保存海报 -->
		<u-popup :show="setImg"  @close="closeimg" :round="12">
			<view  class="w100 h500">
				<image :src="codeLink.url" class="codeimg w660" mode="widthFix"></image>
			</view>
			<view class="justify-around mtb40">
				<view class="column justify-center align-center" @click="downimg">
					<image :src="imgPath+'/app/image/downicon.png'" class="w80 h80"></image>
					<view class="mt10">长按图片保存</view>
				</view>
			</view>
		</u-popup>
		<!-- 设置链接有效时长弹窗 -->
		<!-- <u-modal :show="setTimeShow" content='content' class="model" @confirm="confirmTime">
			<view class="setTimebox">
				<view class="timetip">不传默认以系统参数为准</view>
				<view class="x-f">
					<text style="margin-right: 20px;">链接有效时长(分钟)</text>
					<u-input fontSize="14px" placeholder="链接有效时长" border="none" v-model="time" maxlength="5"></u-input>
				</view>
			</view>
		</u-modal> -->
		<!-- 卡片分享引导 -->
		<u-overlay :show="showzhidao" @click="showzhidao = false" style="z-index: 9999;">
			<view class="point-box">
				<view class="imgshe" >
					<image :src="imgPath+'/app/image/point.png'" class="w300 h300"></image>
				</view>
				<view class="column colorf fs32 xu-box fs40
				align-center justify-center">
					<view class="justify-center">点击右上角
					<image :src="imgPath+'/app/image/wxmore.png'"
					class="w50 h50 mlr10"></image>
					</view>
					<view class="mt20">选择 “转发给朋友”</view>
					<view style="color: #cbcbcb;" class="fs28 mt40">点击任意位置关闭弹窗</view>
				</view>
			</view>
		</u-overlay>
		<u-modal :show="show" title="提示" :showCancelButton="true"  @cancel="hideLogout()" @confirm="logout()" content='确认退出吗?'></u-modal>
		<u-loading-page :loading="viewload" iconSize="32" loadingColor="#3c9cff" fontSize="20"
		:loading-text="loadingtext" ></u-loading-page>
	</view>
</template>

<script>
	
	import { getCompanyUser } from '@/api/user.js'
	import {
		sharecourselink,
		buildCode,
		getSDK,
		becomeVipuser,
		becomeVipuserImg
	} from '@/api/courseManage'
	import wx from 'weixin-js-sdk'
	export default {
		data() {
			return {
				viewload:true,
				loadingtext:"数据加载中...",
				show:false,
				user:null,
				showShare:false,
				copyLinks:'',
				setTimeShow:false,
				time:'',
				setImg:false,
				codeLink:'',
				showzhidao:false,
				imgs:this.$store.state.imgpath+'/app/image/logo.png',
				balance:0
			}
		},
		onShow() {
			console.log(this.imgs)
			this.getCompanyUsers()
		},
		onShareAppMessage() {
			return {
				title: this.$store.state.logoname+'小程序的'+this.user.nickName+'邀请您成为销售', // 分享卡片标题
				path: '/pages_course/course/becomeSale?id='+this.user.companyId, // 目标页面路径
				// 携带参数：将当前页面的数据拼接到路径中
				imageUrl: this.user.avatar || this.imgs, // 分享卡片封面图（可选）
				success: (res) => {
					console.log("分享成功", res);
				},
				fail: (err) => {
					console.log("分享失败", err);
				},
			}
		},
		computed: {
		    imgPath() {
		      return this.$store.state.imgpath
		    }
		},
		mounted() {
		},
		methods: {
			shareSale(){
				 const fullUrl = location.href;
				 const Path = fullUrl.split('/#')[0] || '';
				setTimeout(() => {
					uni.setClipboardData({
						data: Path+'/#/pages_course/course/becomeSale?id='+this.user.companyId,
						success: () => {
							uni.showToast({
								title: '邀请链接已复制',
								icon: 'none',
								duration: 2000
							});
							// this.setTimeShow = !this.setTimeShow
							this.showShare = false
							// console.log(res)
						},
						fail: () => {
							uni.showToast({
								title: '复制失败',
								icon: 'none'
							});
						}
					});
				}, 100)
			},
			// 获取jssdk
			getjssdklist() {
				const param = {
					url: window.location.href.split('#')[0] // 注意去除 hash
				}
				getSDK(param).then(res => {
					wx.config({
						debug: false,
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.signature, // 必填，签名
						jsApiList: ["updateAppMessageShareData", "onMenuShareAppMessage", ] // 必填，需要使用的JS接口列表
					});
				})
			},
			shareimg(){
				//分享好友
				let self = this
				// 配置--配置全局 
				wx.ready(function() { //需在用户可能点击分享按钮前就先调用
					wx.updateAppMessageShareData({
						title: self.user.userName+"邀请您成为销售", // 分享标题
						desc: self.user.deptName, // 分享描述
						link:self.copyLinks, 
						imgUrl: self.codeLink.url ||self.imgs, // 分享图标
						success: function(res) {
							self.showzhidao=true
							self.setImg=false
							self.showShare=false
							// 设置成功
							uni.showToast({
								title: '卡片已生成',
								icon: 'none',
								duration: 1000
							}); 
						},
						fail: function(err) {
							// console.log(err);
							uni.showToast({
								title: '卡片生成失败，请重试',
								icon: 'none',
								duration: 2000
							})
						}
					})
				});
			},
			handleShare() {
				this.showShare = true
				// this.getjssdklist()
				// this.getlink('preload'); // 提前加载链接
			},
			//设置链接时长
			confirmTime() {
				this.setTimeShow = false
				this.showShare = false
				this.getlink('preload')
				this.copyLink()
			},
			closeimg(){
				this.setImg=false
				this.showShare=false
			},
			buildimg() {
				//生成海报
				this.setImg=!this.setImg
				this.getshareimg()
			},
			getshareimg(){
				//生成海报
				uni.showLoading({
					title: '正在生成中...'
				})
				const param={
					code:'',
					companyId:this.user.companyId,
					companyUserId:this.user.userId
				}
				becomeVipuserImg(param).then(res=>{
					if(res.code==200){
						this.codeLink=res.data
						this.getlink()
						// console.log(res)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getlink(type){
				//生成链接
				const param={
					companyId:this.user.companyId,
					companyUserId:this.user.userId,
					tagids:'',
					limitTime:this.time
				}
				becomeVipuser(param).then(res=>{
					if(res.code==200){
						this.copyLinks=res.data
						if (this.copyLinks.startsWith('http://')) {
							this.copyLinks = this.copyLinks.replace('http://', 'https://');
						  }
						// console.log(this.copyLinks,'分享链接')
					}else{
					}
				})
			},
			copyLink(){
				console.log(this.showShare)
				setTimeout(() => {
					uni.setClipboardData({
						data: this.copyLinks,
						success: () => {
							uni.showToast({
								title: '链接已复制',
								icon: 'none',
								duration: 2000
							});
							// this.setTimeShow = !this.setTimeShow
							this.showShare = false
						},
						fail: () => {
							uni.showToast({
								title: '复制失败',
								icon: 'none'
							});
						}
					});
				}, 100)
			},
			closeShare() {
				this.showShare = false
			},
			openShare() {
				// this.showShare = false
			},
			showLogout(){
				this.show=true;
			},
			hideLogout(){
				this.show=false;	
			},
			logout(){
				uni.removeStorageSync('AppToken')
				// 条件编译判断平台，设置不同登录页路径
				 let loginPage = '';
				 // #ifdef H5
				 loginPage = '/pages/auth/login';
				 // #endif
				 // #ifdef MP-WEIXIN
				 loginPage = '/pages/auth/login';
				 // #endif
				uni.navigateTo({
					url: loginPage,
				})
			},
			navTo(url){
				uni.navigateTo({
					url
				})
			},
			getCompanyUsers(){
				var data = {
				};
				getCompanyUser(data).then(res => {
					if(res.code==200){
						this.viewload=false
						console.log(res)
						this.user=res.user;
						this.balance=res.balance
						if(res.user.posts){
							this.user.postname=res.user.posts.map(item=>item.postName).join(",")
						}
						if(res.user.roles){
							this.user.rolesname=res.user.roles.map(item=>item.roleName).join(",")
						}
						if(this.user.avatar){
							this.user.avatar=uni.getStorageSync('requestPath')+res.user.avatar
						}else{
							this.user.avatar=='';
						}
						console.log('头像',this.user.avatar)
					}else{
						
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.share{
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	.container {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #222222;
		height: 100%;
		overflow: hidden;
	}
	.imgshe{
		display: flex;
		flex-direction: row-reverse
	}
	.point-box{
		height: 100%;
		width: 100%;
		.xu-box{
			border: #f5f5f5 4rpx dashed;
			padding: 20rpx 20rpx;
		}
	}
	.setTimebox {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		width: fit-content;
		height: fit-content;
	}
	.codeimg {
		position: absolute;
		z-index: 9999;
		left: 40rpx;
		top: 40rpx;
	}
	.timetip {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #2979ff;
		text-align: center;
		margin-bottom: 5px;
	}
	.content{
		position: relative;
		height: 100%;
		width: 100%;
		.bg{
			width: 100%;
			height: 550upx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			background: linear-gradient(to bottom, #dae9ff, #e1e1fd);
			// background: linear-gradient(to bottom, #8bbfff, #1773ff);
			border-radius: 0rpx 0rpx 60rpx 60rpx;
		}
		.cont-box{
			position: relative;
			z-index: 2;
			padding: 30rpx 30rpx 200rpx;
			.user-cont{
				// box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
				padding: 30rpx;
				// background-color: #fff;
				border-radius: 15rpx;
				.user-box{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.left{
						flex:1;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						image{
							border-radius: 50%;
							width:120rpx;
							height:120rpx;
						}
						.user{
							margin-left: 20rpx;
							width: calc(100% - 140rpx);
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							justify-content: flex-start;
							.username{
								font-size: 38rpx;
								font-family: PingFang SC;
								color: #111;
								font-weight: bold;
							}
							.account{
								padding: 5rpx 0rpx;
								border-radius: 30rpx;
								margin-top: 20rpx;
								font-size: 24rpx;
								font-family: PingFang SC;
								color: #515151;
							}
						}
					}
					.right{
						image{
							width: 15rpx;
							height:30rpx;
						}
						
					}
					
				}
				.company{
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					image{
						width:40rpx;
						height:40rpx;
					}
					.name{
						margin-left: 15rpx;
						font-size: 28rpx;
						color: #111;
					}
				}
			}
			
			.menu-box{
				box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
				width: 100%;
				margin-top: 30rpx;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 15rpx;
				.title-box{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.icon{
						width: 40rpx;
						height:40rpx;
					}
					.title{
						margin-left: 10rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						color: #111;
					}
				}
				.line{
					margin-top: 15rpx;
					height: 0.5rpx;
					width: 100%;
					background-color: #efefef;
				}
				.menus{
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex-wrap: wrap;
				}
				.menu-item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 25%;
					margin-bottom: 20rpx;
					image{
						width:60rpx;
						height:60rpx;
					}
					.m-name{
						margin-top: 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						color: #111;
					}
				}
				
			}
			.menu-box1{
				width: 100%;
				margin-top: 30rpx;
				padding: 0rpx 30rpx;
				background-color: #fff;
				border-radius: 15rpx;
				.menu-item{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					line-height: 100rpx;
					.left{
						flex:1;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						image{
							width: 30rpx;
							height:30rpx;
						}
						.label{
							margin-left: 10rpx;
						}
					}
					.right{
						image{
							width: 10rpx;
							height:15rpx;
						}
						
					}
				}
			}
		}
	}
	.btn-box{
		margin: 30rpx 0rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.sub-btn{
			// box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
			border: 1rpx solid #f8f8f8;
			background: #FFFFFF;
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-size: 30upx;
			font-family: PingFang SC;
			color: #2979ff;
		}
	}
	.sharePop {
		background-color: #fff;
		padding: 20px 0;
		border-radius: 20px 20px 0 0;
	
		&-item {
			padding: 0 10px;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			display: inline-flex !important;
	
			image {
				height: 48px;
				width: 48px;
				margin-bottom: 10px;
			}
		}
	}
</style>