spark-student/pages/user/index.vue

<template>
	<view class="content">
		<view class="user-info">
			<view class="user-data">
				<view class="user-name">{{userData.nickName}}</view>
				<view class="user-phone">{{userData.phone}}</view>
			</view>
			<view class="user-img">
				<u-avatar :src="userData.headImage" size="160"></u-avatar>
			</view>
		</view>
		<scroll-view scroll-x class="member-box">
			<view class="member-card" @click="goToMemberCard()" v-if="memberInfo.status == 0">
				<view class="member-info">
					<view class="member-title">我的账号</view>
					<view class="member-text">您目前尚未开通会员</view>
				</view>
				<view class="member-handle">立即开通&nbsp;<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<template v-else>
				<view class="member-card" @click="goToMemberCard(item)" v-for="(item, index) in studentList" :key="index">
					<view class="member-info">
						<view class="member-title">{{item.studentName}}</view>
						<view class="member-text">
							<view>剩余&nbsp;{{item.days}}&nbsp;天到期</view>
						</view>
					</view>
					<view class="member-handle">{{item.days === 0 ? '立即开通' : '立即续费'}}&nbsp;<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</template>
		</scroll-view>
		<view class="user-handle" v-for="(item, index) in handleList" :key="index" @click="goToHandle(item)">
			<view class="handle-icon">
				<u-image :src="item.icon" mode="aspectFit" width="28px" height="28px"></u-image>
			</view>
			<view class="handle-label">
				<!-- <button type="primary" open-type="share" @click="share" v-if="item.path == 'share'" class="share-text">{{item.label}}</button> -->
				<text>{{item.label}}</text>
			</view>
			<view class="handle-arrow">
				<u-icon name="arrow-right" color="#cccccc" size="32"></u-icon>
			</view>
		</view>
		<u-modal v-model="userInfoShow" title="您没有上传头像" :show-confirm-button="false" :mask-close-able="true">
			<u-button type="default" :ripple="true" @getuserinfo="changeWxInfo" :custom-style="{...handleDefaultCustomStyle, marginLeft: '', marginTop: '20px'}"
			 open-type="getUserInfo">点击一键上传</u-button>
		</u-modal>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		computed: {
			...mapGetters([
				'handleDefaultCustomStyle',
			])
		},
		data() {
			return {
				userData: {
					headImage: '',
					userId: '',
					nickName: '',
					userName: '',
					phone: '',
				},
				userInfoShow: false,
				memberInfo: {
					lastDays: 0,
					status: 0,
				},
				handleList: [{
						label: '订单管理',
						path: 'orderList',
						icon: API.getServerImg + 'dingdanguanli.png'
					},
					{
						label: '学员信息',
						path: 'studentList',
						icon: API.getServerImg + 'xueyuanxinxi.png'
					},
					{
						label: '我的优惠券',
						path: 'couponList',
						icon: API.getServerImg + 'youhiquan.png'
					},
					{
						label: '分享有礼',
						path: 'shareInfo',
						icon: API.getServerImg + 'liwu.png'
					},
					{
						label: '我的评价',
						path: 'evaluateList',
						icon: API.getServerImg + 'pingjia.png'
					},
					{
						label: '预约体验',
						path: 'subscribeInfo',
						icon: API.getServerImg + 'yuyue.png'
					},
					// {
					// 	label: '订阅通知',
					// 	path: 'sendMessage',
					// 	icon: API.getServerImg + 'yuyue.png'
					// },
					{
						label: '退出登录',
						path: 'logout',
						icon: API.getServerImg + 'yuyue.png'
					},
				],
				studentList: [],
				templateList: []
			}
		},
		onShow() {
			if (uni.getStorageSync('userData')) {
				this.userData = uni.getStorageSync('userData')
			}
			if (!this.userData.headImage || !this.userData.nickName) {
				this.userInfoShow = true
			}
			// 获取可购买会员卡学员列表
			NET.request(API.getAllStudentList, {}, 'POST').then(res => {
				this.studentList = res.data
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.message,
					type: 'warning',
				})
			})
			// 获取我的账户
			NET.request(API.getMemberInfo, {}, 'POST').then(res => {
				this.memberInfo = res.data
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.message,
					type: 'warning',
				})
			})
			// 获取订阅模板
			NET.request(API.getTemplate, {}, 'POST').then(res => {
				this.templateList = res.data || []
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.message,
					type: 'warning',
				})
			})
		},
		methods: {
			//  跳转开通会员
			goToMemberCard(site) {
				// 跳转所有场馆页
				uni.navigateTo({
					url: '/pagesMember/venueMore'
				})
				// pagesMember/venueMore
				// uni.navigateTo({
				// 	url: '/pagesMain/memberCardList' + (this.memberInfo.status == 0 ? '' : '?studentId=' + site.studentId +
				// 		'&studentName=' + site.studentName + (site.venueId ? '&venueId=' + site.venueId + '&venueName=' + site.venueName :
				// 			''))
				// });
			},
			//  跳转我的各列表界面
			goToHandle(site) {
				if (site.path == 'sendMessage') {
					wx.requestSubscribeMessage({
						tmplIds: this.templateList,
						success: (res) => {},
						fail: (error) => {
							// this.$refs.uTips.show({
							// 	title: '订阅失败：' + error.errMsg,
							// 	type: 'warning',
							// })
						},
					})
				} else if(site.path == 'subscribelForm') {
					uni.navigateTo({
						url: '/pagesMember/' + site.path
					});
				// 	 try {
				// 			uni.scanCode({
				// 				onlyFromCamera: true,
				// 				success: function (res) {
				// 					console.log(res)
				// 				},
				// 				fail: function (res) {
				// 					this.$refs.uTips.show({
				// 						title: "调用摄像头失败",
				// 						type: 'warning',
				// 					})
				// 				},
				// 			});
				// 		} catch {
				// 			this.$refs.uTips.show({
				// 				title: "调用摄像头失败",
				// 				type: 'warning',
				// 			})
				// 		}
				} else if(site.path == 'logout'){
					uni.removeStorageSync('token')
					uni.navigateTo({
						url: '/pages/login/index'
					});
				}else {
					console.log('/pagesMain/' + site.path);
					uni.navigateTo({
						url: '/pagesMain/' + site.path
					});
				}
			},
			//  分享
			share() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			//  更换昵称头像
			changeWxInfo(info) {
				NET.request(API.changeWxInfo, {
					avatarUrl: info.target.userInfo.avatarUrl,
					nickName: info.target.userInfo.nickName,
				}, 'POST').then(res => {
					this.$refs.uTips.show({
						title: '设置成功',
						type: 'success',
					})
					this.userInfoShow = false
					uni.setStorage({
						key: 'userData',
						data: {
							...uni.getStorageSync('userData'),
							headImage: res.data.avatarUrl,
							nickName: res.data.nickName,
						}
					})
					this.userData.headImage = res.data.avatarUrl
					this.userData.nickName = res.data.nickName
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			}
		}
	}
</script>

<style lang='scss'>
	@import "@/static/css/themes.scss";

	.content {
		width: 100%;
		height: 100vh;
		float: left;

		.user-info {
			width: 100%;
			height: 110px;
			float: left;

			.user-data {
				width: calc(100% - 110px);
				height: 110px;
				padding: 15px 0 15px 15px;
				float: left;

				.user-name {
					width: 100%;
					float: left;
					font-size: 24px;
					line-height: 30px;
					margin-top: 10px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.user-phone {
					width: 100%;
					color: #cccccc;
					line-height: 30px;
					float: left;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.user-img {
				width: 110px;
				height: 110px;
				padding: 15px;
				float: left;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.member-box {
			white-space: nowrap;
			float: left;
			width: 100vw;
			height: 92px;

			.member-card {
				width: calc(100vw - 30px);
				display: inline-block;
				border-radius: 10px;
				background-color: $mainColor;
				padding: 15px;
				margin: 0 15px 20px 15px;
				position: relative;

				.member-info {
					width: calc(100% - 100px);
					float: left;

					.member-title {
						font-size: 18px;
						line-height: 20px;
						color: #FFFFFF;
						font-weight: bold;
					}

					.member-text {
						margin-top: 5px;
						line-height: 16px;
						color: #FFFFFF;
					}
				}

				.member-handle {
					width: 90px;
					height: 30px;
					margin-top: 6px;
					float: right;
					background-color: #FFFFFF;
					border-radius: 20px;
					font-size: 13px;
					color: $mainColor;
					text-align: center;
					font-weight: bold;
					line-height: 30px;
				}
			}
		}

		.user-handle {
			width: 100vw;
			height: 40px;
			float: left;
			padding: 0 15px;
			margin-bottom: 10px;
			display: flex;
			align-items: center;

			.handle-icon {
				width: 40px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				display: flex;
				align-items: center;
			}

			.handle-label {
				height: 40px;
				flex: 1;
				margin-left: 10px;
				line-height: 40px;
				font-size: 15px;
				position: relative;
			}

			.handle-arrow {
				line-height: 40px;
			}

			.share-text {
				width: 100vw;
				padding: 0 65px;
				font-size: 16px;
				text-align: left;
				color: #303133;
				background-color: transparent;
				position: absolute;
				left: -65px;
			}

			.share-text:after {
				border: none;
			}
		}
	}
</style>