swim-weapp/pages/mine/mine.vue

<template>
	<view class="content">
		<view v-if="show">
			<authPhone v-on:watchShow='watchShow'></authPhone>
		</view>

		<view class="top_wrap">
			<view class="wrap">
				<view class="info_left">
					<open-data type="userAvatarUrl"></open-data>
				</view>
				<view class="info_right">
					<text>{{nickname}}</text>
					<text class="tel">{{tel}}</text>
				</view>
				<!-- <view class="tongbu" @click="tongbu">
					同步用户信息
				</view> -->
				<view class='tongbu' type='primary' @click="wxGetUserInfo" v-if="tbShow==false">
					同步用户信息
				</view>
			</view>

			<view class="stu_course">
				<u-cell-group class="course" >
					<u-cell-item class="course_item" title="学员课程" :title-style="{'font-size':'17px','font-weight':'bold'}"
					 :border-bottom="false" @click="to_course">
						<view class="icon" slot="icon" size="52">
							<image src="../../static/course.png" mode=""></image>
						</view>
					</u-cell-item>
				</u-cell-group>
			</view>
		</view>

		<view class="item_wrap">
			<u-cell-group class="group">
				<u-cell-item class="item" title="私教记录" :arrow="false" :value="personal_training_nums" :value-style="{'font-size':'17px','font-weight':'bold','color':'#FF4600'}">
					<view class="icon" slot="icon" size="52">
						<image src="../../static/mine_item1.png" mode=""></image>
					</view>
				</u-cell-item>
				<u-cell-item class="item" title="培训班记录" :arrow="false" :value="course_nums" :value-style="{'font-size':'17px','font-weight':'bold','color':'#FF4600'}">
					<view class="icon" slot="icon" size="52">
						<image src="../../static/mine_item2.png" mode=""></image>
					</view>
				</u-cell-item>
				<u-cell-item class="item" title="学生信息" value="修改" :value-style="{'font-size':'14px','color':'#999999'}" @click="to_stuInfo">
					<view class="icon" slot="icon" size="52">
						<image src="../../static/mine_item3.png" mode=""></image>
					</view>
				</u-cell-item>
				<!-- <picker mode="selector" @change="location" :range="value">
					<u-cell-item class="item" :title="title" value="修改" :value-style="{'font-size':'14px','color':'#999999'}">
						<view class="icon" slot="icon" size="52">
							<image src="../../static/loc.png" mode=""></image>
						</view>
					</u-cell-item>
				</picker> -->
			</u-cell-group>

		</view>
	</view>
</template>

<script>
	import authPhone from "../../components/authorize.vue"
	export default {
		components: {
			// 注册
			authPhone
		},
		data() {
			return {
				show: false,
				img_url: '',
				course_nums: '0次',
				personal_training_nums: '0次',
				tel: '12345678901',
				nickname: '啦啦啦啦',
				value: ['张', 2, 3],
				title: '马波尔儿童游泳馆',
				tbShow: false
			}
		},
		onShow() {
			uni.getSetting({
				success: (res) => {
						this.tbShow = res.authSetting['scope.userInfo']
						console.log(res.authSetting['scope.userInfo'],'授权')
				}
				// success(res)=>{
				// 
				// }
			})
			if (this.vuex_is_auth == false || !this.vuex_is_auth) {
				this.show = true
			}
		},
		onLoad() {
			console.log(this, 'ppppp')
			let that = this
			this.getUser()
			// this.$u.post('/user', data).then(res => {
			// 
			// })

		},
		methods: {
			//获取用户信息
			getUser() {
				this.$u.get('/user').then(res => {
					console.log(res, 'user')
					this.nickname = res.data.data.nickname
					let num = res.data.data.mobile
					if (num) {
						this.tel = num.substring(0, 3) + '****' + num.substring(7)
					}
					this.$u.get('/user/course-statistical').then(data => {
						console.log(data, 'mine')
						this.course_nums = data.data.course_nums + '次'
						this.personal_training_nums = data.data.personal_training_nums + '次'
					})
					this.$u.get('/shops').then(res => {
						this.value = []
						res.data.data.forEach(item => {
							this.value.push(item.name)
						})
						console.log(this.value, 'shops')
					})
				})
			},
			//同步用户信息
			wxGetUserInfo() {
				uni.getUserProfile({
					desc: '获取你的昵称、头像、地区及性别',
					success: res => {
						this.$u.post('/user/sync-info', res.userInfo).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: '同步成功',
									icon: 'none'
								})
								this.tbShow=false
								this.getUser()
							}
						})
					},
					fail: res => {
						console.log(2);
						console.log(res)
						//拒绝授权
						uni.showToast({
							title: '用户拒绝授权',
							icon: 'error',
							duration: 2000
						});
						return;
					}
				})
				// uni.getUserProfile({
				// 	success: (res) => {
				// 		console.log(res.userInfo,'用户信息');
				// 		// this.$u.post('/user/sync-info', res.userInfo).then(res=>{
				// 		// 	if(res.code==200){
				// 		// 		uni.showToast({
				// 		// 			title:'同步成功',
				// 		// 			icon:'none'
				// 		// 		})
				// 		// 		this.getUser()
				// 		// 	}
				// 		})
				// 	},
				// 	fail: () => {
				// 		console.log("未授权");
				// 	}
				// })
			},
			//监听子组件变化
			watchShow(value) {
				console.log(value, '姊川福')
				this.show = value
			},
			//跳转页面
			to_course() {
				uni.navigateTo({
					url: './stu-course'
				})
			},
			//私教记录
			to_record() {
				uni.navigateTo({
					url: './record'
				})
			},
			//培训班记录
			to_train() {
				uni.navigateTo({
					url: './train'
				})
			},
			to_stuInfo() {
				uni.navigateTo({
					url: './stu_info'
				})
			},
			location(e) {
				let index = e.detail.value
				this.title = this.value[index]
				console.log(e, 'this.value[e]')
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;

		.content {
			.top_wrap {
				width: 100%;
				height: 195px;
				background: linear-gradient(90deg, #FF8F09, #FF3B21);
				position: relative;

				.tongbu {
					position: absolute;
					top: 40px;
					right: 0;
					background-color: #FFFFFF;
					border-radius: 22px 0 0 22px;
					height: 30px;
					line-height: 30px;
					font-size: 12px;
					color: #FF3B21;
					padding: 0 10px;
				}

				button::after {
					border: none !important;
				}

				.wrap {
					display: flex;
					padding-top: 38px;
					color: #ffffff;

					.info_left {
						width: 60px;
						height: 60px;
						border-radius: 50%;
						overflow: hidden;
						margin-left: 13px;

						image {
							width: 60px;
							height: 60px;
						}
					}

					.info_right {
						margin-left: 10px;

						text {
							display: block;
							font-size: 19px;
							font-weight: bold;
						}

						.tel {
							font-size: 16px;
							font-weight: normal;
							margin-top: 10px;
						}
					}
				}

				.stu_course {
					margin: 0 12px;
					// height: 84px;
				    margin-top: 50px;
					overflow: hidden!important;
					border-radius: 8px!important;
					background-color: #fff;

					.course {
						height: 84px;
					}

					.course_item {
						height: 84px;
					}

					.icon {
						margin-left: 2px;
						margin-right: 16px;
						display: flex;
						align-items: center;

						image {
							width: 52px;
							height: 52px;
						}
					}
				}
			}

			.item_wrap {

				margin: 0 12px;
		
				border-radius: 8px;
				overflow: hidden;
				// top: 12px;
				margin-top: 42px;

				.group {
					width: 351px;
					height: 256px;

					.item {
						height: 64px;

						.icon {
							margin-right: 16px;

							image {
								width: 24px;
								height: 24px;
							}
						}
					}
				}
			}
		}
	}
</style>