xusfood_client/center/center.vue

<template>
	<view class="pages">
		<view class="" :style="{height: navHeight+'px' }"></view>
		<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"  v-if="vuex_member_info.name">
			<view class="left u-flex">
				<u-avatar :src="avatar||staticUrl+'/img/avatar.png'" 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="base-info page-wrap u-flex u-row-between" @click="goLogin" v-else>
			<view class="left u-flex">
				<u-avatar :src="staticUrl+'/img/avatar.png'" size="110rpx"></u-avatar>
				<view class="info">
					<view class="name ellipsis-1">立即登录</view>
				</view>
			</view>
			<u-icon 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="checkauth('/center/paycode')">
				<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" @click="checkauth('/center/mybalance')">
				<view class="up">{{memberInfo.balance||0}}</view>
				<view class="down">余额</view>
			</view>
			<view class="property-item" @click="checkauth('/credits/creditslist')">
				<view class="up">{{memberInfo.credit||0}}</view>
				<view class="down">积分</view>
			</view>
			<view class="property-item">
				<view class="up">{{memberInfo.couponNum||0}}</view>
				<view class="down">优惠券</view>
			</view>
		</view>
		<view class="order-state">
			<view class="title u-flex u-row-between">
				<view class="left">订单中心</view>
				<view class="right u-flex"  @click="$u.route('/shopping/order')">
					全部订单
					<u-icon name="arrow-right" color="#00A447" size="24rpx"></u-icon>
				</view>
			</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="tools-wrap u-flex u-row-left">
				<view class="tool-item" 
					  v-for="(item,index) in tools" 
					  @click="toolsClick(item)"
					  :key="index">
					  <view class="" v-if="item.chat==1">
					  	<button class="button-item" type="default" open-type="contact">
							<u-icon :name="item.ico" color="#333333" size="60rpx"></u-icon>
							<view style="margin-top: 10rpx;">在线客服</view>
						</button>
					  </view>
					  <view class="" v-else>
					  	<view class="up">
					  		<u-icon :name="item.ico" color="#333333" size="60rpx"></u-icon>
					  	</view>
					  	<view class="down">{{item.name}}</view>
					  </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="2" />
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	import tabbar from "../components/tabbar.vue"
	export default {
		components:{
			tabbar
		},
		mixins:[systemInfo],
		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:'1',ico:this.$commonConfig.staticUrl+'/img/orderstateico-all.png',badge:'deliverNum'},
					{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/recharge',ico:this.$commonConfig.staticUrl+'/img/tool-chongzhi.png'},
					{name:'地址管理',url:'center/addrlist',ico:this.$commonConfig.staticUrl+'/img/tool-map.png',checkauth:true},
					{name:'客服电话',phone:'',ico:this.$commonConfig.staticUrl+'/img/tool-phone.png'},
					{name:'购物车',url:'shopping/cart',ico:this.$commonConfig.staticUrl+'/img/center-icon-cart.png',checkauth:true},
					{name:'在线客服',chat:'1',ico:this.$commonConfig.staticUrl+'/img/center-icon-chat.png'},
				]
			}
		},
		onShow() {	
			if(this.vuex_member_info.name){
				this.getMemberInfo();
				this.statisticsOrder();
			}
			
		},
		onLoad() {
			this.getSystemInfo();
		},
		methods: {
			getMemberInfo(){
				this.$u.api.memberInfo({id:this.vuex_member_info.id}).then(res=>{
					this.memberInfo = res.data;
					this.avatar =  res.data.avatar;
					this.$u.vuex('vuex_member_info', res.data);
					// console.log('memberInfo',this.memberInfo);
					}).catch(err=>{
					console.log('memberInfo',err.data);
				})
			},
			toolsClick(item){
				let that = this;
				console.log('item',item);
				if ('phone' in item) {
					if(!that.memberInfo.customerMobile){
						uni.showToast({
							title:'电话号码为空',
							icon:"none"
						})
						return
					}
				  uni.makePhoneCall({
				  	phoneNumber: that.memberInfo.customerMobile,
					success() {
						console.log('success');
					},
					fail() {
						console.log('fail');
					}
				  });
				  return
				}
				if ('chat' in item) {
					return
				}
				if(item.checkauth){
					this.checkauth(item.url)
				}else{
					uni.$u.route(item.url);
				}
				
			},
			orderClick(item,index){
				console.log('item',item);
				uni.$u.route('/shopping/order', {
					// current: index,
					status: item.status,
					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);
				})
			},
			goLogin(){
				uni.setStorage({
					key: 'backUrl',
					data:'center/center' ,
					success: function () {
						uni.$u.route('/pages/login/login')
					}
				});
			},
			checkauth(pageUrl){
				if(this.vuex_member_info.name){
					uni.$u.route(pageUrl)
				}else{
					uni.showModal({
					  title: '提示',
					  content: '你需要登录后,才可使用此功能！',
					  success: res => {
					    if (res.confirm) {
							uni.setStorage({
								key: 'backUrl',
								data:pageUrl ,
								success: function () {
									uni.$u.route('/pages/login/login')
								}
							});
					    }
					  }
					})
				}
			}
		}
	}
</script>
<style>
page{
	background-color: #F5F5F5;
	padding-top: 0;
}
</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{
			width: fit-content;
			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;
		.right{
			font-size: 24rpx;
			color: #00A447;
		}
	}
	background-color: #fff;
	padding: 20rpx;
	margin: 0 20rpx 50rpx;
	.state{
		text-align: center;
		/deep/ .u-icon{
			display: block;
		}
		.up{
			position: relative;
		}
		.down{
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			line-height: 31rpx;
		}
	}
}
.tools{
	.tools-wrap{
		background-color: #fff;
		padding: 30rpx 0;
		border-radius: 8rpx;
	}
	.tool-item{
		margin-left: 40rpx;
		text-align: center;
		/deep/ .u-icon{
			display: block;
		}
		.down{
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			line-height: 31rpx;
		}
	}
	.button-item{
		background-color: transparent;
		line-height: 1;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		border: 0;
		padding: 0;
		top: -2px;
		&::after{border: initial;}
	}
}
.pay-code-warp{
	height: 100vh;
}
</style>