xusfood_client/center/center.vue

<template>
	<view class="pages">
		<view class="page-bg">
			<img class="img" :src="staticUrl+'/img/center-index-bg.png'" alt="">
		</view>
		<view class="base-info page-wrap u-flex u-row-between">
			<view class="left u-flex">
				<u-avatar :src="avatar" size="110rpx"></u-avatar>
				<view class="info">
					<view class="name ellipsis-1">{{vuex_member_info.name}}</view>
					<view class="level u-flex">
						<u-icon :name="staticUrl+'/img/level-01.png'" color="#333333" size="30rpx"></u-icon>
						<text class="level-name">{{vuex_member_info.levelName}}</text>
					</view>
				</view>
			</view>
			<u-icon @click="$u.route('/center/memberinfo',{type:'redirectTo'})" name="setting-fill" color="#333333" size="38rpx"></u-icon>
		</view>
		<view class="property page-wrap u-flex u-row-between">
			<view class="property-item" @click="showPayCode = true">
				<view class="up">
					<u-icon :name="staticUrl+'/img/paycode.png'" color="#333333" size="42rpx"></u-icon>
				</view>
				<view class="down">付款码</view>
			</view>
			<view class="property-item">
				<view class="up">{{memberInfo.balance}}</view>
				<view class="down">余额</view>
			</view>
			<view class="property-item">
				<view class="up">{{memberInfo.credit}}</view>
				<view class="down">积分</view>
			</view>
			<view class="property-item">
				<view class="up">{{memberInfo.couponNum}}</view>
				<view class="down">优惠券</view>
			</view>
		</view>
		<view class="order-state">
			<view class="title">我的订单</view>
			<view class="u-flex u-row-between">
				<view class="state" @click="orderClick(item,index)" v-for="(item,index) in orderState" :key="index">
					<view class="up">
						<u-icon :name="item.ico" color="#333333" size="60rpx"></u-icon>
						<u-badge v-if="item.badge" type="error" max="99" :value="orderBadge[item.badge]" :absolute="true" :offset="[0,0]"></u-badge>
					</view>
					<view class="down">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="tools page-wrap">
			<view class="title">常用工具</view>
			<view class="u-flex u-row-left">
				<view class="tool-item" 
					  v-for="(item,index) in tools" 
					  @click="toolsClick(item)"
					  :key="index">
					<view class="up">
						<u-icon :name="item.ico" color="#333333" size="60rpx"></u-icon>
					</view>
					<view class="down">{{item.name}}</view>
				</view>
			</view>
		</view>
		<u-overlay :show="showPayCode" @click="showPayCode = false">
			<view class="pay-code-warp u-flex u-row-center">
				<view class="rect" @tap.stop>
					<u--image :showLoading="true" :src="payCodeImg" width="180px" height="180px"></u--image>
				</view>
			</view>
		</u-overlay>
		<tabbar :tabbarIndexProps="Number(3)" />
	</view>
</template>

<script>
	import tabbar from "../components/tabbar.vue"
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				avatar:this.$commonConfig.staticUrl+'/img/avatar.png',
				showPayCode:false,
				payCodeImg:'https://cdn.uviewui.com/uview/album/1.jpg',
				memberInfo:{},
				orderState:[
					{name:'全部订单',status:'',ico:this.$commonConfig.staticUrl+'/img/orderstateico-all.png'},
					{name:'待付款',status:'0',ico:this.$commonConfig.staticUrl+'/img/orderstateico-01.png',badge:'noPayNum'},
					{name:'待收货',status:'2',ico:this.$commonConfig.staticUrl+'/img/orderstateico-02.png',badge:'collectNum'},
					{name:'待评价',status:'3',ico:this.$commonConfig.staticUrl+'/img/orderstateico-03.png',badge:'commentNum'},
					{name:'退款/售后',status:'7',ico:this.$commonConfig.staticUrl+'/img/orderstateico-04.png',badge:'refundNum'},
				],
				orderBadge:{
					noPayNum:'0',
					deliverNum:'0',
					collectNum:'0',
					commentNum:'0',
					refundNum:'0',
				},
				tools:[
					{name:'充值中心',url:'/center/addrlist',ico:this.$commonConfig.staticUrl+'/img/tool-chongzhi.png'},
					{name:'地址管理',url:'/center/addrlist',ico:this.$commonConfig.staticUrl+'/img/tool-map.png'},
				]
			}
		},
		onShow() {	
			this.getMemberInfo();
			this.statisticsOrder();
		},
		onLoad() {

		},
		methods: {
			getMemberInfo(){
				this.$u.api.memberInfo({id:this.vuex_user_info.userid}).then(res=>{
					this.memberInfo = res.data;
					this.avatar =  res.data.avatar;
					// console.log('memberInfo',this.memberInfo);
					}).catch(err=>{
					console.log('memberInfo',err.data);
				})
			},
			toolsClick(item){
				console.log('item',item);
				uni.$u.route(item.url);
			},
			orderClick(item,index){
				console.log('item',item);
				uni.$u.route('/shopping/order', {
					current: index,
					type: 'redirectTo'
				});
			},
			statisticsOrder(){
				this.$u.api.statisticsOrder().then(res=>{
					let data = res.data || {};
					this.orderBadge = Object.assign(this.orderBadge,data)
					// console.log('statisticsOrder',res.data);
					// console.log('this.orderBadge',this.orderBadge);
					}).catch(err=>{
					console.log('memberInfo',err.data);
				})
			}
		}
	}
</script>
<style>
page{
	background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.title{
	font-size: 32rpx;
	font-weight: 600;
	color: #333333;
	line-height: 45rpx;
	margin-bottom: 30rpx;
}
.base-info{
	margin-bottom: 10rpx;
	.info{
		margin-left: 30rpx;
		.name{
			font-size: 40rpx;
			font-weight: 600;
			color: #333333;
			line-height: 56rpx;
			margin-bottom: 10rpx;
		}
		.level{
			background: linear-gradient(131deg, #FFF2DB 0%, #FFD9A5 100%);
			border-radius: 2px;
			font-size: 22rpx;
			font-weight: 400;
			color: #333333;
			line-height: 30rpx;
			padding: 6rpx 16rpx;
			.level-name{
				margin-left: 10rpx;
			}
		}
	}
}
.property{
	text-align: center;
	.up{
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		line-height: 45rpx;
		/deep/ .u-icon{
			display: block;
		}
	}
	.down{
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
		line-height: 37rpx;
	}
}
.order-state{
	.title{margin-bottom: 30rpx;}
	background-color: #fff;
	padding: 30rpx;
	margin: 0 20rpx 50rpx;
	.state{
		text-align: center;
		/deep/ .u-icon{
			display: block;
		}
		.up{
			position: relative;
		}
		.down{
			font-size: 22rpx;
			font-weight: 400;
			color: #666666;
			line-height: 31rpx;
		}
	}
}
.tools{
	.tool-item{
		margin-left: 40rpx;
		text-align: center;
		/deep/ .u-icon{
			display: block;
		}
		.down{
			font-size: 22rpx;
			font-weight: 400;
			color: #666666;
			line-height: 31rpx;
		}
	}
}
.pay-code-warp{
	height: 100vh;
}
</style>