jianbing/pages/my/my.vue

<template>
	<view class="my u-relative">
		<view class="my-bg">
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-text-center text-fff lg" :style="{paddingTop: statusBar  + 'px'}">我的</view>
			<!-- #endif -->
			
			<view class="u-p-t-60 px32 text-fff">
				<navigator class="row-between" :url="isLogin ? '/pages/my/profile' : '/pages/login/login'" hover-class="none">
					<view>
						<view v-if="isLogin" class="row u-col-top">
							<view>
								<u-avatar :src="userInfo.avatar ? userInfo.avatar : cloudPath + 'img/icon_avatar_empty2.png'" size="112"></u-avatar>
							</view>
							<view class="u-m-l-32 nr u-m-10">
								<view>{{ userInfo.nickname }}</view>
								<view class="u-m-t-16">{{userInfo.mobile || userInfo.sn}}</view>
							</view>
						</view>
						
						<view v-if="!isLogin" class="row u-col-top">
							<view>
								<u-avatar :src="cloudPath + 'img/icon_avatar_empty2.png'" size="112"></u-avatar>
							</view>
							<view class="u-m-l-32 nr u-m-10">
								<view>点击登录</view>
								<view class="u-m-t-16">登录体验更多功能</view>
							</view>
						</view>
					</view>
					<view>
						<u-icon name="arrow-right" size="40" color="#fff"></u-icon>
					</view>
				</navigator>
			</view>
		</view>
		
		<view class="block px32">
			<view class="bg-white u-m-t-34 balance row-between br16 u-p-l-22 u-p-r-22 box-shadown">
				<view>
					<navigator class="u-flex u-row-center" url="/pages/my/wallet" hover-class="none">
						<u-image :src="cloudPath + 'img/icon_balance.png'" width="52" height="52"></u-image>
						<view class="u-m-l-60 u-text-center">
							<view class="nr">{{userInfo.user_money || 0.00}}</view>
							<view class="text-default xs">余额</view>
						</view>
					</navigator>
				</view>

				<view>
					<u-line class="u-line" direction="col" length="47"></u-line>
				</view>

				<view>
					<navigator class="u-flex u-row-center" url="/bundle/pages/points/points" hover-class="none">
						<u-image :src="cloudPath + 'img/icon_points.png'" width="52" height="52"></u-image>
						<view class="u-m-l-60 u-text-center">
							<view class="nr">{{ userInfo.user_integral || 0}}</view>
							<view class="text-default xs">积分</view>
						</view>
					</navigator>
				</view>

				<view>
					<u-line class="u-line" direction="col" length="47"></u-line>
				</view>
				
				<view>
					<navigator class="u-flex u-row-center" url="/bundle/pages/coupon/coupon" hover-class="none">
						<u-image :src="cloudPath + 'img/icon_coupon.png'" width="52" height="52"></u-image>
						<view class="u-m-l-60 u-text-center">
							<view class="nr">{{ userInfo.coupon || 0}}</view>
							<view class="text-default xs u-text-center">券</view>
						</view>
					</navigator>
				</view>
			</view>
			
			<view class="bg-white u-m-t-32 service br16 u-p-t-32 u-p-l-22 u-p-r-22 box-shadown">
				<view class="nr bold-600">服务功能</view>
				<view>
					<u-grid :col="4" :border="false">
						<u-grid-item v-for="(item, index) in menuList[1]['content']['data']" :key="index" @click="tapMenu(item.link.path)">
							<u-image :src="item.image" width="64" height="64"></u-image>
							<view class="grid-text mt10">{{item.name}}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			
			<!-- 活动图 -->
			<view class="br16 u-m-t-32">
				<u-image :src="cloudPath + 'img/activity.png'" height="264"></u-image>
			</view>
		</view>
	</view>
</template>	

<script>
	import { mapGetters, mapActions } from 'vuex'
	import { getMenu } from '@/api/store'
	import { menuJump } from '@/utils/tools'
	import { toLogin, wxMnpLogin } from '@/utils/login'

	
	export default {
		data() {
			return {
				menuList: [],
			}
		},
		
		onShow() {
		    this.getUser()
		},
		
		onLoad() {
			this.getMenuFun()
		},
		
		methods: {
			...mapActions(['getUser']),
			
			// 获取菜单
			async getMenuFun() {
				const { data, code } = await getMenu({
				    type: 2
				})
				if (code == 1) {
				    this.menuList = data
					console.log("this.menuList>>>", this.menuList);
					return false;
				}
			},
			
			// 点击菜单跳转页面
			tapMenu(path) {
			    if (!this.isLogin) return toLogin()
				uni.navigateTo({
					url: path
				})
			    // menuJump(item)
			},
		},
		computed: {
			...mapGetters(['cartNum', 'userInfo', 'inviteCode', 'appConfig']),
			statusBar() {
				return uni.getSystemInfoSync().statusBarHeight + 10
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
	
	.my-bg {
		background-image: url(#{$cloudPath}img/my_bg1.png);
		height: 588rpx;
	}
	
	.block {
		z-index: 1;
		position: absolute;
		left: 0;
		right: 0;
		
		/* #ifdef MP-WEIXIN*/  
		top: 410rpx;
		/* #endif */
		
		/* #ifndef MP-WEIXIN*/
		top: 228rpx;
		/* #endif */
		
		background-color: #F6F6F6;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}
	
	.balance {
		height: 132rpx;
	}
	
	.service {
		height: 249rpx;
	}
	
	.box-shadown {
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
	}
</style>