great_mobileui/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 block-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 block-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 block-wrap u-flex u-row-between">
			<view class="property-item" @click="checkauth('/credits/creditslist')">
				<view class="up">{{memberInfo.credit||0}}</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">
				<view class="up">{{memberInfo.couponNum||0}}</view>
				<view class="down">优惠券</view>
			</view>
		</view>
		<view class="card block-wrap">
			<image class="logo" :src="staticUrl+'/img/sitename.png'" mode="heightFix"></image>
			<view class="bottom u-flex u-row-between">
				<view class="left">
					<view class="card-title">加入会员或绑定年卡</view>
					<view class="card-con">解锁门票优惠、数字勋章、餐饮酒店折扣等超多权益</view>
				</view>
				<view class="card-btn">成为会员</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 block-wrap">
			<view class="title">常用工具</view>
			<view class="tools-wrap">
				<view class="" 
					  v-for="(item,index) in tools" 
					  @click="toolsClick(item)"
					  :key="index">
					  <view class="tool-item u-flex u-row-between" v-if="!item.share">
					  	<view class="left u-flex">
					  		<u-icon :name="item.ico" color="#333333" size="55rpx"></u-icon>
							<text class="name">{{item.name}}</text>
					  	</view>
					  	<u-icon name="arrow-right" color="#ddd" size="40rpx"></u-icon>
					  </view>
					  <view class="tool-item" v-if="item.share==1">
					  	<button class="button-item u-flex u-row-between" type="default" open-type="contact">
							<view class="left u-flex">
								<u-icon :name="item.ico" color="#333333" size="55rpx"></u-icon>
								<text class="name">{{item.name}}</text>
							</view>
							<u-icon name="arrow-right" color="#ddd" size="40rpx"></u-icon>
						</button>
					  </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/ticket-order.png',badge:'ticket'},
					{name:'商品订单',status:'1',ico:this.$commonConfig.staticUrl+'/img/goods-order.png',badge:'goods'},
					{name:'酒店订单',status:'2',ico:this.$commonConfig.staticUrl+'/img/hotel-order.png',badge:'hotel'},
					{name:'积分订单',status:'3',ico:this.$commonConfig.staticUrl+'/img/credits-order.png',badge:'credits'},
				],
				orderBadge:{
					ticket:'0',
					goods:'0',
					hotel:'0',
					credits:'0'
				},
				tools:[
					{name:'收货地址',url:'/center/recharge',ico:this.$commonConfig.staticUrl+'/img/dizhi.png',checkauth:true},
					{name:'我的收藏',url:'center/addrlist',ico:this.$commonConfig.staticUrl+'/img/shoucang.png',checkauth:true},
					{name:'投诉反馈',url:'center/addrlist',ico:this.$commonConfig.staticUrl+'/img/fankui.png',checkauth:true},
					{name:'开具发票',url:'center/addrlist',ico:this.$commonConfig.staticUrl+'/img/fapiao.png',checkauth:true},
					{name:'分享给好友',share:'1',ico:this.$commonConfig.staticUrl+'/img/fenxiang.png'},
					// {name:'客服电话',phone:'',ico:this.$commonConfig.staticUrl+'/img/tool-phone.png'},
					// {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: #fff;
	padding-top: 0;
}
</style>
<style lang="scss" scoped>
.block-wrap{
	margin: 24rpx 32rpx;
}
.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{
	background: #F9F9F9;
	border-radius: 20rpx;
	text-align: center;
	padding: 18rpx 0;
	.property-item{
		flex: 1;
		&:nth-of-type(2){
			border-left: 1.5px dashed #7F7F7F;
			border-right: 1.5px dashed #7F7F7F;
		}
	}
	.up{
		font-size: 32rpx;
		font-weight: 600;
		color: #1D7BFF;
		line-height: 48rpx;
		margin-bottom: 5rpx;
		/deep/ .u-icon{
			display: block;
		}
	}
	.down{
		font-size: 24rpx;
		font-weight: 400;
		color: #7F7F7F;
		line-height: 37rpx;
	}
}
.card{
	position: relative;
	height: 328rpx;
	background: url(https://unsplash.it/670/328?id=1) no-repeat;
	background-size: 100%;
	border-radius: 24rpx;
	overflow: hidden;
	padding: 26rpx 40rpx;
	box-sizing: border-box;
	.logo{
		display: block;
		max-height: 68rpx;
		width: auto;
		margin-bottom: 74rpx;
	}
	.left{flex: 1;}
	.card-btn{
		width: 144rpx;
		margin-left: 110rpx;
		text-align: center;
		height: 50rpx;
		line-height: 50rpx;
		background-color: #fff;
		font-size: 24rpx;
		font-weight: 500;
		color: #1C84FF;
		border-radius: 50rpx;
	}
	.card-title{
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 54rpx;
		margin-bottom: 12rpx;
	}
	.card-con{
		font-size: 24rpx;
		font-weight: 400;
		color: #E1E1E1;
		line-height: 32rpx;
	}
}
.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{
		
	}
	.tool-item{
		padding: 12rpx 18rpx;
		background-color: #FBFBFB;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		.name{
			font-size: 32rpx;
			font-weight: 400;
			color: #363636;
			margin-left: 12rpx;
		}
	}
	.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>