XLJK-web/xinlijiankang-uniapp-main/pages/lecturer/my.vue

<template>
	<view class="yywegg">
		<u-navbar :is-back="false" :border-bottom="false" :background="background">
			<view style="width: 100%;">
			</view>
		</u-navbar>

		<view class="">
			<view class="fzctob mywoddt">
				<!-- @click.stop="getnickImage" -->
				<image :src="userinfo ? userinfo.avater : '/static/lecturer/le01.png'"
					style="width: 152rpx;height: 152rpx;border-radius:160rpx;min-width:152rpx;margin-right: 24rpx;"
					mode=""></image>
				<view class="flztoa" style="width: 100%;">
					<view class="fsxto">
						<view class="letxtfy nickName-text">
							<span v-if="!userinfo" @click="login">请登录</span>
							<span v-else>{{ userinfo.nickname}}</span>
							<image src="/static/lecturer/bianji.png" mode="widthFix" class="title-icon-bianji" @click="goToModifyInfo"></image>
						</view>
						<!-- <text class="letxtfy">美丽的蝴蝶</text> -->
						<input @blur="inputBlur" v-if="userinfo && type == 0" type="text" style="width: 400rpx;"
							placeholder="请输入签名" placeholder-style="color: #fff;" v-model="userinfo.desc">
						<image @click="upLabel" v-if="userinfo && type == '1' && userinfo.lecturer.tag.length==0"
							src="/static/my/add_label.png" style="width: 40rpx; height: 40rpx; border-radius: 50%;">
						</image>
						<view class="fzctob letxtfya" v-if="userinfo != '' && type == '1'" @click="upLabel">
							<text v-if="index<2" v-for="(item,index) in userinfo.lecturer.tag"
								:key="index">{{item}}</text>
						</view>
					</view>
					<view class="fzddrew letxtfyb" v-if="userinfo != ''" @click="changetype">
						<image src="/static/lecturer/le02.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
						<text>切换身份</text>
					</view>
				</view>
			</view>

			<view class="flztoa lebkty">
				<navigator class="fzddrew" style="width: 25%;" url="../lecturer/wdgz" hover-class="none">
					<text>{{userinfo.focus?userinfo.focus:'0'}}</text>
					<text class="leshurt">关注</text>
				</navigator>
				<view class="leshuxd"></view>
				<navigator class="fzddrew" style="width: 25%;" url="../lecturer/wdsc" hover-class="none">
					<text>{{userinfo.fans?userinfo.fans:'0'}}</text>
					<text class="leshurt">粉丝</text>
				</navigator>
			</view>
		</view>

		<view class="leybbaw" @click="clickUrllist">
			<!-- <navigator class="flztoa lelbyyr" url="../lecturer/wdcp" hover-class="none">
				<text>我的测评</text>
				<image src="/static/lecturer/le03.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
			</navigator>
			<view class="lehettnn"></view> -->
			<navigator class="flztoa lelbyyr" url="../lecturer/wdsc" hover-class="none">
				<text>我的收藏</text>
				<image src="/static/lecturer/le03.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
			</navigator>
			<view class="lehettnn"></view>
			<navigator class="flztoa lelbyyr" url="../lecturer/wdhd" hover-class="none">
				<text>我的活动</text>
				<image src="/static/lecturer/le03.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
			</navigator>
			<view class="lehettnn"></view>
			<navigator class="flztoa lelbyyr" url="../lecturer/wdkc" hover-class="none" v-show="type==1">
				<text>我的课程</text>
				<image src="/static/lecturer/le03.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
			</navigator>
			<view class="lehettnn" v-show="is_lecturer==1"></view>
			<navigator class="flztoa lelbyyr" url="../lecturer/kcdd" hover-class="none">
				<text>课程订单</text>
				<image src="/static/lecturer/le03.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
			</navigator>
			<view class="lehettnn"></view>
			
			
			<navigator class="flztoa lelbyyr" url="../lecturer/wdxuexi" hover-class="none">
				<text>我的学习</text>
				<image src="/static/lecturer/le03.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
			</navigator>
			<view class="lehettnn"></view>

<!-- 			<navigator class="flztoa lelbyyr" url="../lecturer/wdzx" hover-class="none">
				<text>我的答疑</text>
				<image src="/static/lecturer/le03.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
			</navigator>
			<view class="lehettnn"></view> -->

<!-- 			<navigator class="flztoa lelbyyr" url="../index/wdjh" hover-class="none">
				<text>我的解惑</text>
				<image src="/static/lecturer/le03.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
			</navigator>
			<view class="lehettnn"></view> -->


			<!-- 

			
			<navigator class="flztoa lelbyyr" url="../index/coupon" hover-class="none">
				<text>课程优惠券</text>
				<image src="/static/lecturer/le03.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
			</navigator> -->

		</view>

		<!-- <view class="leybbaw">
			<view class="flztoa lelbyyr" @click="showCode">
				<text>邀请</text>
				<image src="/static/lecturer/le03.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
			</view>
		</view>

		<view class="leybbaw">
			<navigator class="flztoa lelbyyr" url="../index/invite">
				<text>邀请码</text>
				<image src="/static/lecturer/le03.png" style="width: 48rpx;height: 48rpx;" mode=""></image>
			</navigator>
		</view> -->
		<u-popup v-model="show" mode="center">
			<view class="wdcjeer" v-if="userinfo">
				<view class="wddvbh">
					<image :src="userinfo.avatarUrl" class="wddimg" mode=""></image>
					<text class="wddvbhtxt">{{userinfo.nickName}}</text>
					<view class="fzctob kcwwerrt" v-if="type==1" style="margin-top: 10rpx;">
						<text v-for="(item,index) in userinfo.lecturer.tag" :key="index">{{item}}</text>
					</view>
					<text v-else style="color: #333333; font-size: 32rpx;">{{userinfo.note}}</text>
				</view>
				<view class="" style="height: 170rpx;"></view>
				<view class="wddbwwt">
					<view class="wdbhgt">
						<image :src="code" style="width: 318rpx;height: 318rpx;" mode=""></image>
					</view>
					<text class="wdbhddn">分享二维码</text>
				</view>
				<view class="wddvbhyu">
					<image src="/static/my/myq1.png" @click="saveImage" style="width: 128rpx;height: 128rpx;" mode="">
					</image>
					<image src="/static/my/myq2.png" @click="shareWechat" style="width: 128rpx;height: 128rpx;" mode="">
					</image>
					<image src="/static/my/myq3.png" @click="shareFriend" style="width: 128rpx;height: 128rpx;" mode="">
					</image>
				</view>
			</view>
		</u-popup>
		<view style="height: 120rpx;"></view>
		<tabBar :active-index="activeIndex" @change="onTabBarChange"></tabBar>
		<!-- 绘制海报插件 -->
		<!-- :isCanvasToTempFilePath="canvasto"  @success="path = $event" -->
		<l-painter v-if="userinfo && code" ref="painter" isCanvasToTempFilePath @success="path = $event"
			custom-style="position: fixed; left: 200%;"
			css="width: 750rpx; padding-bottom: 40rpx; background: rgba(0,170,255,0); padding-top: 113rpx;">
			<l-painter-view
				css="width: 702rpx;  text-align: center; box-sizing: border-box; margin-left: 24rpx; padding: 30rpx; padding-bottom: 80rpx; border-radius: 16rpx; background: white;">
				<l-painter-image :src="userinfo.avatarUrl"
					css="box-sizing: border-box; display: block; margin: auto; margin-top: -120rpx; width: 200rpx;height: 200rpx; border-radius: 50%; box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.1607843137254902); border: 4rpx solid #FFFFFF;">
				</l-painter-image>
				<l-painter-text :text="userinfo.nickName"
					css="box-sizing: border-box; color: #333333; font-size: 50rpx;"></l-painter-text>
				<l-painter-text v-if="type==0" :text="userinfo.note"
					css="display: block; box-sizing: border-box; color: #333333; font-size: 22rpx;"></l-painter-text>
				<l-painter-view v-else>
					<l-painter-text v-for="(item,index) in userinfo.lecturer.tag" :key="index" :text="item"
						css="margin-top: 10rpx; margin-right: 20rpx; border-radius: 38rpx; background: #F4F4F4; color: #999999; padding: 2rpx 20rpx; display: inline-block; font-size: 20rpx;">
					</l-painter-text>
				</l-painter-view>
				<l-painter-view
					css="margin: auto; text-align: center; margin-top: 90rpx; width: 372rpx; height: 372rpx; background-image: url(/static/my/myr1.png) top center no-repeat">
					<l-painter-image :src="code"
						css="width: 318rpx; box-sizing: border-box; margin-top: 24rpx; height: 318rpx;">
					</l-painter-image>
				</l-painter-view>

			</l-painter-view>

		</l-painter>
		<!-- <image v-show="path" :src="path" mode="widthFix" style="width: 100%;"></image> -->


		<u-popup v-model="labelshow" mode="bottom" :closeable="false" :border-radius="20"
			:safe-area-inset-bottom="true">
			<view class="" style="padding: 50rpx;30rpx">
				<view class="flztoa" style="margin-bottom: 40rpx;">
					<text @click="labelshow = false;" style="color: #999999;">取消</text>
					<text style="font-size: 36rpx;font-weight: bold;">选择标签</text>
					<text @click="ensureLabel">确定</text>
				</view>

				<!-- <view class="tanckku">
								<uni-data-checkbox :multiple="true" mode="tag" v-model="radioa" :localdata="sex"
									selectedColor="#374B6E !important" style="margin-top: 24rpx;"></uni-data-checkbox>
						</view> -->
				<scroll-view scroll-y style="height: 500rpx;">
					<view class="label-outer">
						<view :class="item.toggle?'label-act':'class-label'" @click="changeLabel(index)"
							v-for="(item,index) in labellist" :key="index">{{item.title}}</view>
					</view>
				</scroll-view>

			</view>
		</u-popup>
	</view>
</template>
<style>
	page {
		background: #FAFAFA;
	}
</style>
<script>
	export default {
		data() {
			return {
				show: false,
				labelshow: false,
				background: {
					backgroundColor: '#95bf7f',
				},
				type: '', //0普通用户 1讲师
				userinfo: '', //全部用户信息
				path: '', // 海报生成的图片路径
				is_lecturer: 0,
				type: 0, // 展示当前身份    0 普通 1 讲师
				code: '',
				logininfo: '', // 登录成功后返回的info
				labellist: [],
				is_login: true,
				activeIndex: 3,
			}
		},
		onLoad() {
			// uni.showLoading({
			//     title: '绘制中...',
			// })
			// this.getuserinfo(false);
			// uni.setStorageSync('id',4)
			// 
			let invite_id = uni.getStorageSync('invite_id');
			let user_id = uni.getStorageSync('id');

		},
		watch: {
			path(val) {
				if (val != '') {
					uni.hideLoading()
				}
			}
		},
		onShow() {
			this.activeIndex = 3;
			this.is_lecturer = uni.getStorageSync('is_lecturer')
			// if(uni.getStorageSync('id')){
			//     this.canvasto = true
			// }
			console.log('onshow')
			if (uni.getStorageSync('id')) {
				this.getuserinfo(false);
				this.type = uni.getStorageSync('type')
			} else {
				this.userinfo == '';
			}
		},
		methods: {
			onTabBarChange(index) {
				this.activeIndex = index;
			},
			// 点击修改
			goToModifyInfo(){
				uni.navigateTo({
					url: '/pages/lecturer/modifyInfo/modifyInfo',
				})
			},
			
			// 确定修改标签
			ensureLabel() {
				let toggleArr = this.labellist.filter(item => item.toggle)
				let tagsarr = []
				toggleArr.map(item => {
					tagsarr.push(item.title)
				})
				this.$post({
					data: {
						do: 'LecturerTagUpdate',
						data: {
							tags: tagsarr.join(','),
							id: uni.getStorageSync('id')
						}
					}
				}).then(res => {
					this.labelshow = false
					uni.showToast({
						icon: 'none',
						title: res.message,
						mask: true
					})
					setTimeout(() => {
						this.getuserinfo()
					}, 1500)
					console.log(res, '++++')
				})
			},
			// 改变标签选择状态
			changeLabel(index) {
				let length = this.labellist.filter(item => item.toggle).length
				if (length >= 2 && !this.labellist[index].toggle) {
					return
				}
				this.labellist[index].toggle = !this.labellist[index].toggle
			},
			// 讲师标签
			upLabel() {
				this.$post({
					data: {
						do: 'LecturerTag',
						data: {
							page: 1
						}
					}
				}).then(res => {
					console.log(res, '+++')
					let labellist = []
					// this.userinfo.lecturer.tag
					res.data.map(item => {
						labellist.push({
							title: item,
							toggle: this.userinfo.lecturer.tag.includes(item) ? true : false
							// toggle:false
						})
					})
					this.labellist = labellist
					this.labelshow = true
				})
			},
			// 更新
			inputBlur() {
				let id = uni.getStorageSync('id');
				this.$request.saveuserInfo({
					desc: this.userinfo.desc
				}).then( res =>{
					console.log(res)
					
				}).catch( e=>{
					console.log(e)
				})
			},
			getnickImage() {
				console.log(this.logininfo.id)
				uni.getUserProfile({
					desc: '用于昵称和头像的展示',
					success: res => {
						console.log(res, '++++')
						console.log({
							user_id: this.logininfo.id,
							nickName: res.userInfo.nickName,
							avatarUrl: res.userInfo.avatarUrl
						})
						this.$post({
							data: {
								do: 'UpdateUser',
								data: {
									user_id: this.logininfo.id,
									nickName: res.userInfo.nickName,
									avatarUrl: res.userInfo.avatarUrl
								}
							}
						}).then(res => {
							console.log(res, 'rrrrrrrrrr')
							for (let i in this.logininfo) {
								uni.setStorageSync(i, this.logininfo[i])
							}
							this.type == 0;
							this.getuserinfo();
						})
						// this.nickName = res.userInfo.nickName
						// this.avatarUrl = res.userInfo.avatarUrl
						// this.country = res.userInfo.country
						// this.province = res.userInfo.province
						// this.city = res.userInfo.city
						// this.gender = res.userInfo.gender
						// uni.login({
						// 	provider: 'weixin',
						// 	success: (res) => {
						// 		this.loginCode = res.code
						// 		uni.hideLoading()
						// 		this.popShow = true
						// 	},
						// })
					},
					fail: (err) => {
						uni.hideLoading()
					}
				})
			},
			showCode() {
				if (uni.getStorageSync('id')) {
					this.show = true
				} else {
					// #ifdef MP
					this.mpLogin()
					return
					// #endif
				}
			},
			// 获取二维码
			getCode() {
				this.$post({
					data: {
						do: 'GetUserQr',
						data: {
							user_id: uni.getStorageSync('id')
						}
					},
					loading: false
				}).then(res => {
					console.log(res, 'cccccccccccc')
					this.code = res.data.url
				})
			},
			login() {
				if(!this.is_login){
					return
				}
				this.is_login = false;
				this.mpLogin();
				// if (!uni.getStorageSync('id')) {
				// 	// #ifdef MP
				// 	this.mpLogin()
				// 	// #endif
				// 	// #ifndef MP
				// 	uni.navigateTo({
				// 		url: '/pages/login/appLogin'
				// 	})
				// 	// #endif
				// }
			},
			// 小程序登录
			mpLogin() {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log(res, 'rrrrrr')
						const code = res.code;
						that.getLogin(code);
					}
				})
			},
			getLogin(c){
				let that = this;
				uni.showLoading({
					title: "登录中..."
				})
				that.$request.getLogin({code:c}).then(res => {
					uni.hideLoading();
					console.log(res)
					if(res.code == 0){
						that.logininfo = res.data;
						that.userinfo = res.data;
						uni.setStorageSync('userinfo',res.data);
						uni.setStorageSync('id',res.data.id);
						uni.setStorageSync("token",res.data.token);
						that.is_login = true;
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					// uni.showModal({
					// 	title: '提示',
					// 	content: '是否进行头像和昵称授权',
					// 	success: (res) => {
					// 		if (res.confirm) {
					// 			this.getnickImage()
					// 		}
					// 	}
					// })
				}).catch(e =>{
					uni.hideLoading();
					console.log(e)
					that.is_login = true;
				})
			},
			//获取用户信息
			getuserinfo(loading = true) {
				let id = uni.getStorageSync('id');
				this.$request.getuserinfo({
					id
				}).then( res =>{
					console.log(res)
					this.userinfo = res.data
				}).catch( e=>{
					console.log(e)
				})
			},
			changetype() {
				uni.navigateTo({
					url: '../index/yhdl',
					// success: () => {
					// 	setTimeout(() => {
					// 		this.userinfo = '' // 切换身份 重新绘制海报使用
					// 	}, 500)
					// }
				})
			},
			// 保存海报
			saveImage() {
				if (this.path) {
					uni.saveImageToPhotosAlbum({
						filePath: this.path,
						success: function() {
							uni.showToast({
								title: '保存成功'
							})
						}
					});
				} else {
					uni.showToast({
						title: '海报绘制失败，请截图分享',
						icon: 'none'
					})
				}
			},
			// 分享给好友
			shareWechat() {
				// #ifdef MP
				uni.showShareImageMenu({
					path: this.path
				})
				// #endif
				// #ifdef APP-PLUS
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession", // WXSceneSession 微信聊天界面   WXSceneTimeline 朋友圈
					type: 2,
					imageUrl: this.path,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// #endif
			},
			// 分享朋友圈
			shareFriend() {
				// #ifdef MP
				uni.showToast({
					title: '请将海报保存到手机，自行分享。',
					icon: 'none'
				})
				// #endif
				// #ifdef APP-PLUS
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline", // WXSceneSession 微信聊天界面   WXSceneTimeline 朋友圈
					type: 2,
					imageUrl: this.path,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>

	.nickName-text{
		display: flex;
		align-items: center;
	}
	.title-icon-bianji{
		width: 32rpx;
		height: 36rpx;
		margin-left: 16rpx;
	}

</style>
<style>
	.label-outer {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	.label-outer>view {
		margin-right: 30rpx;
		margin-bottom: 30rpx;
	}

	.label-outer>view:nth-of-type(3n+3) {
		margin-right: 0rpx;
	}

	.class-label {
		width: 192rpx;
		height: 72rpx;
		background: #F4F4F4;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #999999;
		overflow: hidden;
	}

	.label-act {
		width: 192rpx;
		height: 72rpx;
		background: #374B6E;
		border-radius: 36rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #ffffff;
		overflow: hidden;
	}
</style>