jinNiucourseMall_uniapp/pages_manage/components/manageIndex.vue

<template>
	<view class="content container">
		<view class="bg" v-if="!viewload"></view>
		<view class="cont-box" v-if="!viewload">
			<view class="user-cont" @click="navTo('/pages_managedata/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_managedata/managedetail')">
						<image :src="imgPath+'/app/images/menu_info.png'"></image>
						<view class="m-name">销售管理</view>
					</view>
					<view class="menu-item" @click="navTo('/pages_managedata/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_managedata/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_managedata/about')">
						<image :src="imgPath+'/app/manergevip/about.png'"></image>
						<view class="m-name">关于我们</view>
					</view>
					<view class="menu-item" @click="navTo('/pages_managedata/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/manageCompany.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,
				balance: 0
			}
		},
		onShow() {
		},
		onShareAppMessage() {
			return {
				title: this.$store.state.logoname + '小程序的' + this.user.nickName + '邀请您成为销售', // 分享卡片标题
				path: '/pages_course/course/becomeSale?id=' + this.user.companyId, // 目标页面路径
				// 携带参数：将当前页面的数据拼接到路径中
				imageUrl: this.user.avatar || this.logoimg, // 分享卡片封面图（可选）
				success: (res) => {
					console.log("分享成功", res);
				},
				fail: (err) => {
					console.log("分享失败", err);
				},
			}
		},
		computed: {
			imgPath() {
				return this.$store.state.imgpath
			},
			...mapGetters(['logoimg']),
		},
		watch: {
		    logoimg: {
		      immediate: true,          // 页面一进入就检查一次
		      handler(val) {
				  return val
		      }
		    },
		},
		mounted() {
			this.getCompanyUsers()
		},
		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.logoimg, // 分享图标
						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
				const pages = '/pages_course/becomeSale?id=' + this.user.companyId
				this.$emit('childsales', pages);
				// 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('ManageToken')
				// 条件编译判断平台，设置不同登录页路径
				let loginPage = '';
				// #ifdef H5
				loginPage = '/pages/auth/login';
				// #endif
				// #ifdef MP-WEIXIN
				loginPage = '/pages_manage/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 scoped lang="scss">
	page {
		height: 100%;
		background: #f6f6f6;
	}

	.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>