perry-mall/pages/tabbar/my/my.vue

<template>
	<view class="pad-x180">
		<!-- 状态栏 -->
		<status-nav 
		:ifTitle="true" 
		:ifReturn="false"
		:ifCenter="true"
		:navBarTitle="'个人中心'"></status-nav>
		<!-- 容器 -->
		<container-subgroup>
			<view slot="content">
				<view class="disjcac fc">
					<image class="mar-sx20" :src="userInfo.headimgurl" mode="aspectFill" style="width: 224rpx;height: 224rpx;border-radius: 60rpx;"></image>
					<view class="fon36 bold">{{userInfo.nickname}}</view>
				</view>
				<!-- 我的订单状态 -->
				<view style="margin-top: 100rpx;">
					<view class="mar-x50 disjbac">
						<view class="fon36 col0">我的订单</view>
						<navigator url="/pagesA/myOrder/myOrder?index=0" hover-class="none">
							<view class="disac colpeili">
								<view class="fon24 mar-y10">全部订单</view>
								<i class="icon icon-next bold400" style="font-size: 28rpx;"></i>
							</view>
						</navigator>
					</view>
					<view class="disjbac fon28 col3 mar-x50">
						<view @tap="chooseOrderStatus(indexo)" v-for="(itemo,indexo) in orderStatus" :key="indexo">
							<view class="disac fc posir">
								<image :src="itemo.src" :style="{width:[50,46,48,49,49][indexo]+'rpx',height:[44,40,42,44,45][indexo]+'rpx'}" class="icon-img" mode="widthFix"></image>
								<view class="mar-sx10 fon24 col0">{{itemo.title}}</view>
								<view class="posia red-num" style="right: 0;top: -20rpx;" v-if="itemo.num!=0">{{itemo.num}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 功能列表 -->
				<function-list :list="funcList"></function-list>
			</view>
		</container-subgroup>
		<!-- 底部tab -->
		<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='2'></foot-tab>
	</view>
</template>

<script>
	import functionList from '@/components/function-list/function-list.vue';
	// 底部组件
	import footTab from '@/components/foot-tab.vue';
	export default {
		components:{functionList,footTab},
		data() {
			return {
				orderStatus:[//我的订单状态
					{src:'/static/public/icon-payment.png',title:'待付款',num:0},
					{src:'/static/public/icon-send-goods.png',title:'待发货',num:0},
					{src:'/static/public/icon-take.png',title:'待收货',num:0},
					{src:'/static/public/icon-finish.png',title:'已完成',num:0},
					{src:'/static/public/icon-refund.png',title:'已取消',num:0},
				],
				funcList:[//个人中心列表数组
					{
						leftImg:'/static/public/icon-address.png',
						title:'收货地址',
						num:0,
						content:'',
						rightImg:'',
						url:'/pagesA/myAddress/myAddress'
					},
					{
						leftImg:'/static/public/icon-distribution.png',
						title:'分销中心',
						num:0,
						content:'百万奖金等你来拿',
						rightImg:'',
						url:'/pagesA/distributionCenter/distributionCenter'
					},
					{
						leftImg:'/static/public/icon-duty.png',
						title:'免责声明',
						num:0,
						content:'',
						rightImg:'',
						url:'/pagesB/disclaimers/disclaimers'
					},
					{
						leftImg:'/static/public/icon-aboutus.png',
						title:'关于我们',
						num:0,
						content:'',
						rightImg:'',
						url:'/pagesB/aboutUs/aboutUs'
					}
				],
				userInfo:{},//用户信息
				titleList:uni.getStorageSync('footTitle'), // 底部导航文字
				imgList:uni.getStorageSync('footimg'), // 底部导航图标
			}
		},
		onShow() {
			// 查询用户信息
			this.checkInfo();
		},
		onShareAppMessage() {
			var shareObj = {
				path: `/pages/tabbar/my/my?invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
			};
			return shareObj;
		},
		onLoad(options) {
			if(uni.getStorageSync('phone_active')){
				this.$toolAll.tools.clearShare();
			} else {
				uni.setStorageSync('existCode',options.invite_code);
				uni.setStorageSync('transientUrl',`/pages/tabbar/my/my`);
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		},
		methods: {
			chooseOrderStatus(index){
				let statusIndex = ''
				if(index==0) statusIndex = 1;
				if(index==1) statusIndex = 2;
				if(index==2) statusIndex = 3;
				if(index==3) statusIndex = 4;
				if(index==4) statusIndex = 5;
				uni.navigateTo({
					url:'/pagesA/myOrder/myOrder?index='+statusIndex
				})
			},
			checkInfo(){
				this.$requst.post('/api/user/info').then(res=>{
					// console.log('用户信息：',res);
					if(res.code==0 && res.data.length!=0) {
						this.userInfo = res.data;
						this.orderStatus[0].num = this.userInfo.order_count.waiting;//待付款
						this.orderStatus[1].num = this.userInfo.order_count.paid;//待发货
						this.orderStatus[2].num = this.userInfo.order_count.shipped;//待收货
					} else {
						this.$toolAll.tools.showToast(res.msg);
						this.$toolAll.tools.goLogin();
					}
				},error=>{this.$toolAll.tools.showToast(error.msg);})
			}
		}
	}
</script>

<style>

</style>