studytour-front/pages/index/center.vue

<template>
	<view class="page__view">

		<image class="bg" src="@/static/image/center-bg.png" mode="widthFix"></image>

		<view class="main">

			<view class="content">
				<view class="flex user">
					<!-- 用户信息 -->
					<template v-if="isLogin">
						<view class="user-avatar" v-if="userInfo.headImage">
							<image class="user-avatar-img" :src="userInfo.headImage" mode="scaleToFill"></image>
						</view>
						<view class="user-avatar is-default" v-else>
							<image class="user-avatar-img" src="@/pages_order/static/center/avatar-default.png" mode="scaleToFill"></image>
						</view>
						<view class="user-info">
							<view class="flex user-info-name">
								<view class="highligt" v-if="userInfo.nickName">{{ userInfo.nickName || '' }}</view>
								<view class="light">{{ `ID：${userInfo.id}` }}</view>
							</view>
							<view class="user-info-desc" v-if="userInfo.phone">{{ `手机号：${userInfo.phone}` }}</view>
						</view>
					</template>
					<template v-else>
						<view class="user-avatar is-default">
							<image class="user-avatar-img" src="@/pages_order/static/center/avatar-default.png" mode="scaleToFill"></image>
						</view>
						<view class="user-info">
							<view class="user-info-tips">暂未登录 请先登录</view>
						</view>
					</template>
				</view>

				<template v-if="isLogin">

					<view class="flex card member-bind">
						<view class="left">成员绑定</view>
						<view class="flex right">
							<button class="btn" @click="jumpToBindMember">绑定</button>
							<uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
						</view>
					</view>

					<!-- 订单信息 -->
					<order-card></order-card>

					<!-- 用户菜单 -->
					<view class="card">
						<view v-for="item in list1" :key="item.id">
							<template v-if="item.key === 'service'">
								<button plain class="flex btn-service" open-type="contact">
									<view class="flex row">
										<view class="flex label">
											<image class="icon" :src="item.icon" mode="scaleToFill"></image>
											<view>{{ item.label }}</view>
										</view>
										<uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
									</view>			
								</button>
							</template>
							<view v-else class="flex row" @click="onClick(item)">
								<view class="flex label">
									<image class="icon" :src="item.icon" mode="scaleToFill"></image>
									<view>{{ item.label }}</view>
								</view>
								<uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
							</view>						
						</view>
					</view>
					<view class="card">
						<view v-for="item in list2" :key="item.id">
							<view class="flex row" @click="onClick(item)">
								<view class="flex label">
									<image class="icon" :src="item.icon" mode="scaleToFill"></image>
									<view>{{ item.label }}</view>
								</view>
								<uv-icon name="arrow-right" color="#C6C6C6" size="24rpx"></uv-icon>
							</view>						
						</view>
					</view>

				</template>
				<!-- 用户登陆 -->
				<template v-else>
					<view class="login">
						<button class="btn" @click="$utils.toLogin">立即登录</button>
						<view class="tips">暂未登录 请先登录</view>
					</view>
				</template>

			</view>

			<tabber select="center" />

		</view>

	</view>
</template>

<script>
	import { mapState } from 'vuex'

	import tabber from '@/components/base/tabbar.vue'
	import orderCard from '@/pages_order/center/orderCard.vue'

	export default {
		components: {
			orderCard,
			tabber,
		},
		data() {
			return {
				list1: [
					{ id: '001', label: '我的收藏', icon: '/pages_order/static/center/icon-collect.png', path: '/pages_order/product/collectList' },
					{ id: '004', label: '学员管理', icon: '/pages_order/static/center/icon-student.png', path: `/pages_order/member/memberList` },
					{ id: '003', label: '我的优惠券', icon: '/pages_order/static/center/icon-coupon.png', path: `/pages_order/coupon/couponList/index` },
				],
				list2: [
					{ id: '005', label: '我的评价', icon: '/pages_order/static/center/icon-comment.png', path: `/pages_order/comment/commentRecords` },
					{ id: '006', label: '开营通知', icon: '/pages_order/static/center/icon-msg.png', path: `/pages_order/message/list` },
					{ id: '007', label: '修改信息', icon: '/pages_order/static/center/icon-modifyInfo.png', path: `/pages_order/auth/wxUserInfo?mode=edit` },
					{ id: '008', label: '退出登录', icon: '/pages_order/static/center/icon-logout.png', key: 'logout' },
				],
			}
		},
		computed: {
			...mapState(['userInfo', 'configList']),
			isLogin() {
				return this.userInfo && this.userInfo.id
			}
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.$store.commit('getUserInfo')
				this.$store.commit('getUserCenterData')
			}
		},
		methods: {
			onClick(target) {
				const { key, path } = target

				switch(key) {
					case 'comment':
          	this.$utils.navigateTo('/pages_order/comment/commentRecords')
						break
					case 'logout':
						this.$store.commit('logout')
						break
					default:
						path && this.$utils.navigateTo(path)
						break
				}
			},
			jumpToBindMember() {
				this.$utils.navigateTo('/pages_order/member/memberBind')
			},
		},
	}
</script>

<style scoped lang="scss">

	.page__view {
		width: 100vw;
		min-height: 100vh;
		background: $uni-bg-color;
		position: relative;

    /deep/ .nav-bar__view {
      position: fixed;
      top: 0;
      left: 0;
    }

		.nav-icon {
			width: 200rpx;
			height: auto;
			vertical-align: top;
		}

	}

	.bg {
		width: 100vw;
		height: auto;
	}

	.main {
		position: absolute;
		top: 176rpx;
		left: 0;
		width: 100%;
	}

	.content {
		width: 100%;
		padding: 16rpx 32rpx 80rpx 32rpx;
		box-sizing: border-box;
	}

	.user {
		column-gap: 24rpx;

		&-avatar {
			flex: none;
			width: 100rpx;
			height: 100rpx;
			border: 4rpx solid #FFFFFF;
			border-radius: 50%;
			overflow: hidden;

			&.is-default {
				width: 108rpx;
				height: 108rpx;
				border: none;
			}

			&-img {
				width: 100%;
				height: 100%;
			}
		}

		&-info {
			flex: 1;

			&-name {
				justify-content: flex-start;
				flex-wrap: wrap;
				gap: 16rpx;
				font-family: PingFang SC;
				color: #FFFFFF;

				.highligt {
					font-weight: 600;
					font-size: 36rpx;
					line-height: 1.2;
					text-shadow: 0 1px 0 #37313140;
				}

				.light {
					font-size: 24rpx;
				}
			}

			&-desc {
				margin-top: 4rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 1.8;
				color: #FFFFFF;
				text-shadow: 0 1px 0 #37313140;
			}

			&-tips {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				line-height: 1.2;
				color: #FFFFFF;
			}
		}
	}
	
	.card {
		margin-top: 32rpx;
		width: 100%;
		background: #FFFFFF;
		border: 2rpx solid #FFFFFF;
		border-radius: 32rpx;
    box-sizing: border-box;

		.row {
			justify-content: space-between;
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;

			.label {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 1;
				color: #252545;

				.icon {
					margin-right: 16rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.btn-service {
		border: none;
		padding: 0;
	}

	.login {
		margin-top: 307rpx;
		padding: 0 128rpx;

		.btn {
			padding: 16rpx 0;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			line-height: 1.4;
			color: #FFFFFF;
			background-image: linear-gradient(to right, #21FEEC, #019AF9);
			border-radius: 41rpx;
		}

		.tips {
			margin-top: 16rpx;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			line-height: 1.4;
			color: #A3A3A3;
		}
	}

	.member-bind {
		justify-content: space-between;
		padding: 32rpx;
		background: linear-gradient(to right, #FBFEFF, #DAF3FF);

		.left {
			font-size: 36rpx;
			font-weight: 600;
			color: #252545;
		}

		.right {
			column-gap: 16rpx;

			.btn {
				padding: 6rpx 50rpx;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 1.5;
				color: #FFFFFF;
				background: linear-gradient(to right, #21FEEC, #019AF9);
				border: 2rpx solid #00A9FF;
				border-radius: 30rpx;
			}
		}
	}
</style>