xiongmao/pages/my/my.vue

<!-- 个人中心 -->
<template>
	<view class="wrap">

		<view class="head">
			<image :src="isLogin ? info.headimg : '../../static/avatar.png'" class="avatar"
				mode="aspectFill"></image>
			<view class="head-sidebar">
				<view class="head-sidebar-top">
					<view class="my-name" v-if="isLogin">{{info.name}}</view>
					<view class="my-name" v-if="!isLogin"><text @tap="login">登录</text>/<text @tap="register">注册</text></view>
					<view class="head-btn-box">
						<button type="default" @tap="message">
							<image src="../../static/my-head1.png" mode=""></image>
						</button>
						<button type="default" @tap="setUp">
							<image src="../../static/my-head2.png" mode=""></image>
						</button>
					</view>
				</view>
				<view class="my-tag" @tap="member">
					<image src="../../static/grade.png" mode=""></image>
					大众会员 
				</view>
			</view> 
		</view>

		<view class="content-box">

			<view class="card">
				<view class="card-top">
					<view class="card-top-item" @tap="myFans">
						我的粉丝<text>28</text>
					</view>
					<view class="card-top-item" @tap="myCommission">
						我的佣金<text>{{info.wallet.money}}</text>
					</view>
				</view>
				<view class="card-bottom">
					<view class="card-bottom-item" @tap="myCollection">
						<text>15</text>
						<text>收藏</text>
					</view>
					<view class="card-bottom-item" @tap="browseHistory">
						<text>15</text>
						<text>浏览记录</text>
					</view>
					<view class="card-bottom-item" @tap="integral">
						<text>{{info.wallet.integral}}</text>
						<text>积分</text>
					</view>
					<view class="card-bottom-item" @tap="coupon">
						<text>15</text>
						<text>卡券</text>
					</view>
				</view>
			</view>

			<view class="my-module">
				<view class="my-top">
					<text class="my-top-name">我的订单</text>
					<view class="all-btn" @tap="myOrder">
						查看全部订单
						<image src="../../static/back-icon2.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="my-order-list">
					<view class="my-order-item">
						<image src="../../static/my-menu1.png" class="my-order-item-img" mode=""></image>
						待付款
						<view class="num">6</view>
					</view>
					<view class="my-order-item">
						<image src="../../static/my-menu2.png" class="my-order-item-img" mode=""></image>
						待发货
						<view class="num">6</view>
					</view>
					<view class="my-order-item">
						<image src="../../static/my-menu3.png" class="my-order-item-img" mode=""></image>
						待收货
					</view>
					<view class="my-order-item">
						<image src="../../static/my-menu4.png" class="my-order-item-img" mode=""></image>
						待评价
						<view class="num">6</view>
					</view>
					<view class="my-order-item">
						<image src="../../static/my-menu5.png" class="my-order-item-img" mode=""></image>
						售后
					</view>
				</view>
			</view>

			<view class="my-module">
				<view class="my-top">
					<text class="my-top-name">常用功能</text>
				</view>
				<view class="my-nav-list">
					<view class="my-nav-item" @tap="joinHandsWithPartners">
						<image src="../../static/my-nav1.png" class="my-nav-item-img" mode=""></image>
						携手合伙人
					</view>
					<view class="my-nav-item" @tap="signInAward">
						<image src="../../static/my-nav2.png" class="my-nav-item-img" mode=""></image>
						签到奖励
					</view>
					<view class="my-nav-item" @tap="myCommission">
						<image src="../../static/my-nav3.png" class="my-nav-item-img" mode=""></image>
						我的分销
					</view>
					<view class="my-nav-item">
						<image src="../../static/my-nav4.png" class="my-nav-item-img" mode=""></image>
						产品溯源
					</view>
					<view class="my-nav-item" @tap="myAppointment">
						<image src="../../static/my-nav5.png" class="my-nav-item-img" mode=""></image>
						我的预约
					</view>
					<view class="my-nav-item" @tap="feedback">
						<image src="../../static/my-nav6.png" class="my-nav-item-img" mode=""></image>
						意见反馈
					</view>
					<view class="my-nav-item" @tap="onlineService">
						<image src="../../static/my-nav7.png" class="my-nav-item-img" mode=""></image>
						在线客服
					</view>
					<view class="my-nav-item" @tap="informationMaterial">
						<image src="../../static/my-nav8.png" class="my-nav-item-img" mode=""></image>
						资讯素材
					</view>
				</view>
			</view>


		</view>
		
		<!-- 底部tabbar组件 -->
		<tab-bar :current="4"></tab-bar>
		
	</view>
</template>

<script>
	import { userCenterGetUserInfo } from '../../common/service.js';
	export default {
		data() {
			return {
				//是否登录
				isLogin: false,
				info: {
					wallet: {},
				},
			}
		},
		onLoad() {
		},
		onShow() {
			this.getUserInfo();	
		},
		methods: {
			getUserInfo() {
				userCenterGetUserInfo({
					success: ({code, data, msg}) => {
						if (code == 1) {
							uni.setStorageSync('USER_INFO', data.detail);
							this.info = data.detail;
							this.isLogin = true;
						} else {
							uni.showToast({
								icon: 'none',
								title: msg,
							});
						}
					},
				});
			},
			//跳转消息
			message() {
				uni.navigateTo({
					url: 'message/message'
				})
			},
			//跳转设置
			setUp() {
				uni.navigateTo({
					url: 'set-up/set-up'
				})
			},
			//跳转我的粉丝
			myFans() {
				uni.navigateTo({
					url: 'my-fans/my-fans'
				})
			},
			//跳转我的佣金
			myCommission() {
				uni.navigateTo({
					url: 'my-commission/my-commission'
				})
			},
			//跳转收藏
			myCollection() {
				uni.navigateTo({
					url: 'my-collection/my-collection'
				})
			},
			//跳转浏览记录
			browseHistory() {
				uni.navigateTo({
					url: 'browse-history/browse-history'
				})
			},
			//跳转积分
			integral() {
				uni.navigateTo({
					url: 'integral/integral'
				})
			},
			//跳转卡券
			coupon() {
				uni.navigateTo({
					url: 'coupon/coupon'
				})
			},
			//跳转我的分销
			myCommission() {
				uni.navigateTo({
					url: 'my-commission/my-commission'
				})
			},
			//跳转我的预约
			myAppointment() {
				uni.navigateTo({
					url: 'my-appointment/my-appointment'
				})
			},
			//跳转意见反馈
			feedback() {
				uni.navigateTo({
					url: 'feedback/feedback'
				})
			},
			//跳转咨询素材
			informationMaterial() {
				uni.navigateTo({
					url: 'information-material/information-material'
				})
			},
			//跳转签到奖励
			signInAward() {
				uni.navigateTo({
					url: 'sign-in-award/sign-in-award'
				})
			},
			//跳转在线客服
			onlineService() {
				uni.navigateTo({
					url: 'online-service/online-service'
				})
			},
			//跳转我的订单
			myOrder() {
				uni.navigateTo({
					url: '../my-order/my-order'
				})
			},
			//跳转登录
			login() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			//跳转注册
			register() {
				uni.navigateTo({
					url: '../login/register/register'
				})
			},
			//跳转大众会员
			member() {
				uni.navigateTo({
					url: 'member/member'
				})
			},
			//跳转携手合作人
			joinHandsWithPartners() {
				uni.navigateTo({
					url: 'join-hands-with-partners/join-hands-with-partners'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./my.css";
</style>