caimei-applets-caimei/pages/tabBar/user/user.vue

<template>
	<view class="container user clearfix">
		<cm-custom :navbar-data='nvabarData'></cm-custom>
		<view class="user-section">
			<view class="header" :style="{background:'url('+ bgImgUrl +')',backgroundSize:'cover'}">
				<view class="header-main" :style="{paddingTop:(CustomBar+20)+'px'}" v-if="hasLogin">
					<view class="header-text">
						<view class="user-item"><text class="u-h1">{{name}}</text>
						<text class="u-viptips" v-if="userIdentity == 2">{{userType}}</text>
						<text class="u-tips" v-if="userIdentity == 4">{{userType}}</text>
					</view>
						<view class="user-item"><text class="u-p">账户余额：{{userMoney}}元</text></view>
					</view>
					<view class="header-icon"><image :src="headpic == null? '../../../static/temp/icon-club@3x.png' : headpic" mode=""></image></view>
				</view>
				<view class="header-main-none" :style="{paddingTop:(CustomBar+20)+'px'}" v-else>
					<view class="header-text">
						<view class="user-item">
							<text class="u-h1" @click="navigator('/pages/login/login')">账号登录</text><text class="u-h1 line">/</text>
							<text class="u-h1" @click="navigatorNex('/pages/login/register')">立即注册</text>
						</view>
						<view class="user-item">
							<text class="u-p" @click="navigator('/pages/login/login')">登录商城了解更多产品信息吧！</text>
						</view>
						<view class="user-item" @click="navigatorNex('/pages/login/logincode')">
							<view class="u-btn"><text>邀请码登录</text><text class="iconfont icon-xiangyouhuabeifen"></text></view>
						</view>
					</view>
					<view class="header-icon" @click="navigator('/pages/login/login')">
						<image src="../../../static/temp/icon-club@3x.png" mode=""></image>
					</view>
				</view>
				<!-- 订单 -->
				<view class="user-order">
					<view class="tab-title" @click="navigator('/pages/user/order/order-list?state=0')">
						<text class="cell-tit">我的订单</text>
						<text class="cell-more">查看全部</text>
						<text class="iconfont icon-xiayibu"></text>
					</view>
					<view class="order-section">
						<view class="order-item" @click="navigator('/pages/user/order/order-list?state=1')" hover-class="common-hover"  :hover-stay-time="50">
							<view class="order-icon">
								<image src="../../../static/temp/order5@3x.png" mode=""></image>
								<text 	v-if="confirmedCount>0" 
										class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
										:class="[confirmedCount < 10 ? 'goleft':'']">
										{{confirmedCount == 99? '99+' : confirmedCount}}
								</text>
							</view>
							<text class="order-t">待确认</text>
						</view>
						<view class="order-item" @click="navigator('/pages/user/order/order-list?state=2')"  hover-class="common-hover" :hover-stay-time="50">
							<view class="order-icon">
								<image src="../../../static/temp/order1@3x.png" mode=""></image>
								<text  v-if="paymentCount >0" 
									   class="uni-badge uni-badge-error uni-small uni-badge--small icon-num " 
									   :class="[paymentCount < 10 ? 'goleft':'']">
									   {{paymentCount == 99? '99+' : paymentCount}}
								</text>
							</view>
							<text class="order-t">待付款</text>
						</view>
						<view class="order-item" @click="navigator('/pages/user/order/order-list?state=3')" hover-class="common-hover"  :hover-stay-time="50">
							<view class="order-icon">
								<image src="../../../static/temp/order2@3x.png" mode=""></image>
								<text   v-if="waitShipmentsCount >0" 
										class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
										:class="[waitShipmentsCount < 10 ? 'goleft':'']">
										{{waitShipmentsCount == 99? '99+' : waitShipmentsCount}}
								</text>
							</view>
							<text class="order-t">待发货</text>
						</view>
						<view class="order-item" @click="navigator('/pages/user/order/order-list?state=4')" hover-class="common-hover"  :hover-stay-time="50">
							<view class="order-icon">
								<image src="../../../static/temp/order3@3x.png" mode=""></image>
								<text 	v-if="shipmentsCount>0" 
										class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
										:class="[shipmentsCount < 10 ? 'goleft':'']">
										{{shipmentsCount == 99? '99+' : shipmentsCount}}
								</text>
							</view>
							<text class="order-t">已发货</text>
						</view>
						<view class="order-item" @click="navigator('/pages/user/order/order-list?state=5')" hover-class="common-hover"  :hover-stay-time="50">
							<view class="order-icon">
								<image src="../../../static/temp/order4@3x.png" mode=""></image>
								<text 	v-if="salesReturnCount >0"
										class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
										:class="[salesReturnCount < 10 ? 'goleft':'']">
										{{salesReturnCount == 99? '99+' : salesReturnCount}}
								</text>
							</view>
							<text class="order-t">退货/款</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部跳转 -->
			<view class="foot-list">
				<view class="list-cell-item" v-show="hasLogin">
					<view class="list-cell" v-show="userIdentity == 4" @click="navigator(`/pages/login/apply?clubStatus=${clubStatus}`)" hover-class="cell-hover" :hover-stay-time="50">
						<text class="cell-tit">升级会员机构</text>
						<text class="cell-more">
							<text class="txt">{{clubStatusText(clubStatus)}}</text>
							<text class="iconfont icon-xiayibu"></text>
						</text>
					</view>
					<view class="list-cell" @click="navigator('/pages/user/regularPurchase/regularPurchase')" hover-class="cell-hover" :hover-stay-time="50">
						<text class="cell-tit">再次购买</text>
						<text class="cell-more iconfont icon-xiayibu"></text>
					</view>
				</view>
				<view class="list-cell-item">
					<view class="list-cell"  v-for="(item, index) in firstList" :key="index" @click="navigator(item.path)" hover-class="cell-hover" :hover-stay-time="50">
						<text class="cell-tit">{{item.name}}</text>
						<text class="cell-more iconfont icon-xiayibu"></text>
					</view>
				</view>
				<view class="list-cell-item">
					<view class="list-cell" hover-class="cell-hover" :hover-stay-time="50">
						<text class="cell-tit">联系我们</text>
						<text class="cell-more" @click="toPhone">{{contactNumber}}</text>
					</view>
					<view class="list-cell last" @click="this.$api.navigateTo('/pages/user/about/about')" hover-class="cell-hover" :hover-stay-time="50">
						<text class="cell-tit">关于我们</text>
						<text class="cell-more iconfont icon-xiayibu"></text>
					</view>
				</view>	
			</view>
		</view>	
	</view>
</template>
<script>
	import uniBadge from '@/components/uni-badge/uni-badge.vue'
	import authorize from '@/common/config/authorize.js'
	import { mapState,mapMutations } from 'vuex'
	import { personalInfo } from "@/api/use.js"
	
	export default{
		components: {
			uniBadge
		},
		data() {
			return{	
				nvabarData: {//顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 0,
					title: '我的', // 导航栏 中间的标题
					haveBack:false,
					textLeft:this.$store.state.isIphone,
					textColor:'#FFFFFF',
					bgColor:''
				},
				CustomBar:this.CustomBar,// 顶部导航栏高度
				bgImgUrl:'https://img.caimei365.com/group1/M00/03/94/Cmis216Sk_SAPDwvAAcTspdl8h0610.png',
				name:'',
				userType:"",
				headpic:'',
				userMoney:'0.00',
				contactNumber:'',
				openid:'',
				aboutHtml:'',
				telPhone:'',
				bindMobile:'',
				clubStatus:'',	//机构升级会员机构审核状态1:待审核  91:审核失败
				userIdentity:'', //机构等级
				confirmedCount:0,//待确认
				paymentCount:0, //待付款角标
				waitShipmentsCount:0, //待收货角标
				shipmentsCount:0,  //已发货角标
				salesReturnCount:'',//退货/款角标
				firstList:[
					{name:'运营人员管理',path:'/pages/user/operator/list'},
					{name:'账户余额明细',path:'/pages/user/account/account'},
					{name:'收货地址管理',path:'/pages/user/address/address'},
					{name:'机构资料',path:'/pages/login/information'},
					{name:'账户设置',path:'/pages/user/setting/setting'},
				]
			}
		},
		onLoad(){

		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			getUserInfo(){
				personalInfo({userID:this.userID}).then(response =>{
					this.$store.commit('updateAllNum',response.data.count)
					let data =response.data
					let $userData = data.user
					let $clubData = data.club
					if($userData.ableUserMoney == 0 || $userData.ableUserMoney ==null){
						this.userMoney = '0.00';
					}else{
						let i =  $userData.ableUserMoney.toString().lastIndexOf('.');
						let money;
						if(i==-1){
							money = this.$api.FormatMoney($userData.ableUserMoney); //会所剩余余额
							this.userMoney = money +'.00'
						}else{
							money = this.$api.FormatMoney($userData.ableUserMoney); //会所剩余余额
							this.userMoney = money
						}
					}
					this.userIdentity = $userData.userIdentity //机构等级
					if(this.userIdentity == 2){
						this.name = $clubData.name //会员机构名称
						this.userType = '会员机构'
					}else{
						this.name = $userData.userName //普通机构名称
						this.userType = '普通机构'
					}
					this.headpic = $userData.image //会所头像
					this.bindMobile = $userData.bindMobile//登录手机号
					this.clubStatus = $userData.clubStatus //机构审核状态
					this.contactNumber = data.organize.contactNumber //联系电话		
					this.confirmedCount = this.showBadge(data.confirmedCount)//待确认
					this.paymentCount = this.showBadge(data.paymentCount)//待付款
					this.waitShipmentsCount = this.showBadge(data.waitShipmentsCount)//待收货		
					this.shipmentsCount = this.showBadge(data.shipmentsCount)//已发货	
					this.salesReturnCount = this.showBadge(data.salesReturnCount)//退货/款	
					let clubInfo ={name:this.name,image:this.headpic,clubID:$clubData.clubID}
					uni.setStorage({//缓存机构
						key: 'clubInfo',  
						data: clubInfo  
					}) 
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			toPhone(){
				uni.makePhoneCall({
				    phoneNumber:this.contactNumber //仅为示例
				});
			},
			navigator(url){
				authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
					if(wxResponse == 1){
						if(this.hasLogin){
							this.$api.navigateTo(url)
						}else{
							this.$api.navigateTo('/pages/login/login?type=0')
						}
					}else{
						this.$api.navigateTo('/pages/authorization/authorization?type=1')
					}
				})	
			},			
			navigatorNex(url){
				authorize.getSetting().then(wxResponse =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
					if(wxResponse == 1){
						if(!this.hasLogin){
							this.$api.navigateTo(url)
						}
					}else{
						this.$api.navigateTo('/pages/authorization/authorization?type=1')
					}
				})	
			},			
			showBadge(n){
				let num ='';
				if(n>100){num = 99}else{num = n;}
				return num;
			},	
			clubStatusText(state){
				let stateText;
				switch(state){
					case 90:
						 stateText = ''
						 break;
					case 1:
						 stateText = '待审核'
						 break;
					case 92:
						 stateText = '审核不通过'
						 break;
				}
				return stateText
			}
		},
		onPageScroll(e){//实时获取到滚动的值
			if(e.scrollTop>20){
				this.nvabarData.bgColor = '#FFFFFF'
				this.nvabarData.textColor = '#333333'
			}else{
				this.nvabarData.bgColor = ''
				this.nvabarData.textColor = '#FFFFFF'
			}	
		},
		onPullDownRefresh() {//下拉刷新
			if(this.hasLogin){
				this.getUserInfo()
				uni.stopPullDownRefresh()
			}else{
				uni.stopPullDownRefresh()
			}
		},
		onShow(){
			if(this.hasLogin){
				this.$api.getStorage().then((resolve) =>{
					this.userID = resolve.userID
					this.getUserInfo()
				})
			}else{
				this.$store.commit('updateAllNum',0)
			}
		}	
	}
</script>

<style lang="scss">
	@import "@/uni.scss";
	page{
		background-color: #F7F7F7;
	}
	.user{
		width: 100%;
		height: 100%;
		position:relative;
		background: rgba(247, 247, 247, 1);
	}	
	.header{
		width: 100%;
		height: 440rpx;
		position: relative;
		background-size: cover;
	}	
	.header-main{
		width: 702rpx;
		height: 128rpx;
		padding: 0 24rpx;
		display: flex;
		.header-text{
			flex: 8;
			display: flex;
			flex-direction: column;
			.user-item{
				flex: 1;
				height: 64rpx;
				line-height: 64rpx;
				.u-tips{
					display: inline-block;
					float: left;
					width: 98rpx;
					height: 30rpx;
					border: 1px solid #FFFFFF;
					background: linear-gradient(128deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
					border-radius: 16rpx;
					line-height: 30rpx;
					font-size: $font-size-20;
					text-align: center;
					color: #FFFFFF;
					margin-left: 10rpx;
					margin-top: 17rpx;
				}
				.u-viptips{
					display: inline-block;
					float: left;
					width: 98rpx;
					height: 30rpx;
					border: 1px solid #FFE600;
					background: linear-gradient(128deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
					border-radius: 16rpx;
					line-height: 30rpx;
					font-size: $font-size-20;
					text-align: center;
					color: #FFE600;
					margin-left: 10rpx;
					margin-top: 17rpx;
				}
				.u-h1{
					float: left;
					font-size: $font-size-36;
					color: #FFFFFF;
					text-align: left;
					-o-text-overflow: ellipsis;
					text-overflow: ellipsis;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.u-p{
					font-size: $font-size-24;
					line-height: 64rpx;
					color: #FFFFFF;
					text-align: left;
				}
			}
		}
		.header-icon{
			flex: 2;
			margin-right: 20rpx;
			image{
				float: right;
				width: 128rpx;
				height: 128rpx;
				border-radius: 100%;
				border: 2rpx solid #FFFFFF;
			}
		}
	}
	.header-main-none{
		width: 702rpx;
		height: 152rpx;
		padding: 0 24rpx;
		display: flex;
		.header-text{
			flex: 8;
			display: flex;
			flex-direction: column;
			.user-item{
				flex: 1;
				height: 50rpx;
				line-height: 50rpx;
				.line{
					margin: 0 10rpx;
				}
				.u-h1{
					float: left;
					font-size: $font-size-36;
					color: #FFFFFF;
					text-align: left;
					-o-text-overflow: ellipsis;
					text-overflow: ellipsis;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.u-p{
					font-size: $font-size-24;
					line-height: 50rpx;
					color: #EFEFEF;
					text-align: left;
				}
				.u-btn{
					width: 160rpx;
					height: 40rpx;
					background: rgba(255,255,255,.5);
					border-radius: 5rpx;
					line-height: 40rpx;
					text-align: center;
					font-size: $font-size-24;
					color: #FFFFFF;
					display: block;
					margin-top: 5rpx;
					padding-left: 6rpx;
					.icon-xiangyouhuabeifen{
						font-size: $font-size-24;
					}
				}
			}
		}
		.header-icon{
			flex: 2;
			display: flex;
			margin-right: 20rpx;
			align-items: center;
			justify-content: center;
			image{
				float: right;
				width: 128rpx;
				height: 128rpx;
				border-radius: 100%;
				border: 2rpx solid #FFFFFF;
			}
		}
	}
	.user-order{
		width: 654rpx;
		height: auto;
		padding: 0 24rpx;
		background-color: $bg-color;
		margin-bottom: 24rpx;
		position: absolute;
		bottom: -170rpx;
		left: 24rpx;
		border-radius: 20rpx;
		box-shadow:0px 3px 6px rgba(225,86,22,0.07);
	}	
	.tab-title{
		font-size: $font-size-28;
		line-height: 80rpx;
		color: #333333;
		text-align:left;
		border-bottom: 1px solid #F8F8F8;
		position: relative;
		.cell-tit{
			font-size: $font-size-28;
			color: $text-color;
		}
		.cell-more{
			float: right;
			line-height: 80rpx;
			font-size: $font-size-24;
			color: $text-color;
			padding-right: 30rpx;
		}
		.iconfont{
			width: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			position: absolute;
			right: 0;
			top: 0;
			display: block;
			font-size: $font-size-28;
		}
	}
	.order-section{
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		height: 99rpx;
		padding: 24rpx 0;
	}
	.order-item{
		flex:1;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		&:last-child{
			margin-right: 0;
		}
		.order-icon{
			width: 52rpx;
			height: 52rpx;
			position: relative;
			image{
				width: 52rpx;
				height: 52rpx;
			}
			.icon-num{
				position: absolute;
				right:-24rpx;
				top: -9rpx;
			}
			.icon-num.goleft{
				right: -12rpx;
			}
		}
		.order-t{
			line-height: 50rpx;
			font-size: $font-size-24;
			color: $text-color;
		}
	}
	.foot-list{
		width: 702rpx;
		padding: 0 24rpx;
		padding-top: 168rpx;
	}	
	.list-cell-item{
		width: 654rpx;
		height: auto;
		margin-bottom: 24rpx;
		padding:0 24rpx;
		background: $bg-color;
		border-radius: 20rpx;
		box-shadow:0px 3px 6px rgba(225,86,22,0.07);
	}
	.list-cell{
		display:flex;
		width: 100%;
		align-items:baseline;
		line-height:100rpx;
		position:relative;
		background: $bg-color;
		justify-content: center;
		// border-bottom: 1px solid #EBEBEB;
		&.cell-hover{
			background:#fafafa;
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-size-28;
			color:$text-color;
			margin-left:10rpx;
			.txt{
				color: #FB4343;
				padding-right: 10rpx;
			}
		}
		.cell-tit{
			flex: 1;
			font-size: $font-size-28;
			color: $text-color;
			margin-right:10rpx;
		}
		.cell-tip{
			font-size: $font-size-28;
			color: $text-color;
		}
	}	
	.list-cell.last{
		border-bottom: none;
	}
	.uni-badge--small {
		-webkit-transform: scale(.8);
		-ms-transform: scale(.8);
		transform: scale(.8);
		-webkit-transform-origin: center center;
		-ms-transform-origin: center center;
		transform-origin: center center;
	}
	.uni-badge {
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 12px;
		line-height: 1;
		display: inline-block;
		padding: 3px 6px;
		color: #333;
		border-radius: 100px;
		background-color: #f1f1f1;
	}
	.uni-badge-error {
		color: #fff;
		background-color: #dd524d;
	}
</style>