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

<template>
	<view class="container user clearfix">
		<view class="user-section" :class="[!isShowNoLogin  ? 'show' : 'none']">
			<view class="u-header">
				<image src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/03/%E6%88%91%E7%9A%84%20%E2%80%93%201%403x.png" mode=""></image>
				<view class="u-header-main">
					<view class="user-item">
						<view class="logo-m">
							<image :src="headpic == null? '../../../static/temp/icon-club@3x.png' : headpic" mode=""></image>
						</view>
					</view>
					<view class="user-item">
						<text class="u-h1">{{name}}</text>
					</view>
					<view class="user-item">
						<text class="u-p">账户余额：{{userMoney}}元</text>
					</view>
				</view>
			</view>
			<!-- 订单 -->
			<view class="user-order">
				<view class="tab-title">我的订单</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/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=2')"  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=3')" 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=4')" 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 class="order-item" @click="navigator('/pages/user/order/order-list?state=0')" hover-class="common-hover"  :hover-stay-time="50">
						<view class="order-icon">
							<image src="../../../static/temp/order5@3x.png" mode=""></image>
						</view>
						<text class="order-t">全部订单</text>
					</view>
				</view>
			</view>
			<!-- 底部跳转 -->
			<view class="foot-list">
				<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"  v-for="(item, index) in twoList" :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" @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" @click="navigator('/pages/user/setting/setting')" 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" 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="navigator('/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 { mapState,mapMutations } from 'vuex'
	import { personalInfo } from "@/api/use.js"
	
	export default{
		components: {
			uniBadge
		},
		data() {
			return{	
				name:'采美采购商城',
				headpic:'',
				userMoney:0.00,
				contactNumber:'',
				openid:'',
				aboutHtml:'',
				telPhone:'',
				paymentCount:0, //待付款角标
				waitShipmentsCount:0, //待收货角标
				shipmentsCount:0,  //已发货角标
				salesReturnCount:'',//退货/款角标
				isShowNoLogin:false,
				firstList:[
					{name:'运营人员管理',path:'/pages/user/operator/list'},
					{name:'机构资料',path:'/pages/user-module/information'},
					{name:'收货地址管理',path:'/pages/user/address/address'}
				],
				twoList:[
					{name:'账户余额明细',path:'/pages/user/account/account'},
					{name:'发票信息',path:'/pages/user/invoice/invoice'}
				]
			}
		},
		onLoad(){
			
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			initData(){
				personalInfo({userID:this.userID}).then(response =>{
					this.$store.commit('updateAllNum',response.data.count)
					let user_data =response.data
					let _userData = user_data.user
					let _clubData = user_data.club
					if(_userData.ableUserMoney == 0){
						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.name = _clubData.name //会所名称
					this.headpic = _userData.image //会所头像
					this.contactNumber = user_data.organize.contactNumber //联系电话		
					this.paymentCount = this.showBadge(user_data.paymentCount)//待付款
					this.waitShipmentsCount = this.showBadge(user_data.waitShipmentsCount)//待收货		
					this.shipmentsCount = this.showBadge(user_data.shipmentsCount)//已发货	
					this.salesReturnCount = this.showBadge(user_data.salesReturnCount)//退货/款	
					let clubInfo ={name:this.name,image:this.headpic}
					uni.setStorage({//缓存用户登陆状态
						key: 'clubInfo',  
						data: clubInfo  
					}) 
				}).catch(response =>{
					this.$util.msg(response.msg,2000)
				})
			},
			toPhone(){
				uni.makePhoneCall({
				    phoneNumber:this.contactNumber //仅为示例
				});
			},
			navigator(url){
				this.$api.navigateTo(url)
			},			
			showBadge(n){
				let num ='';
				if(n>100){num = 99}else{num = n;}
				return num;
			},
			onPullDownRefresh() {//下拉刷新
				this.initData()
				uni.stopPullDownRefresh()
			},
			onShow(){
				if(!this.hasLogin){
					this.isShowNoLogin = true;
					this.$api.redirectTo('/pages/user-module/login-accont?type=4')
					this.$store.commit('updateAllNum',0)
				}else{
					this.$api.getStorage().then((resolve) =>{
						console.log(resolve)
						this.userID = resolve.userID
						this.initData()
						this.isShowNoLogin = false;
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "@/uni.scss";
	page{
		background-color: #F7F7F7;
	}
	.user{
		width: 100%;
		height: 100%;
		position:relative;
		background: rgba(247, 247, 247, 1);
	}	
	.user-section.none{
		display: none;
	}
	.user-section.show{
		display: block;
	}
	.u-header{
		width: 100%;
		height: 400rpx;
		position: relative;
		image{
			width: 100%;
			height: 400rpx;
		}
	}	
	.u-header-main{
		width: 100%;
		height: 284rpx;
		padding: 58rpx 0;
		position: absolute;
		top: 0;
		left: 0;
		.user-item{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 16rpx;
			.u-h1{
				width: 410rpx;
				font-size: $font-size-28;
				line-height: 40rpx;
				color: #FFFFFF;
				margin-bottom: 8rpx;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				align-items: center;
			}
			.u-p{
				font-size: $font-size-24;
				line-height: 40rpx;
				color: #FFFFFF;
			}
		}
		.logo-m{
			width: 144rpx;
			height: 144rpx;
			border: 2rpx solid #FFFFFF;
			border-radius: 100%;
			background: $bg-color;
			image{
				width: 144rpx;
				height: 144rpx;
				border-radius: 100%;
			}
		}
	}

	.user-order{
		width: 702rpx;
		height: auto;
		padding: 0 24rpx;
		background-color: $bg-color;
		margin-bottom: 24rpx;
	}	
	.tab-title{
		font-size: $font-size-28;
		line-height: 80rpx;
		color: #333333;
		text-align:left;
		border-bottom: 1px solid #F8F8F8;
	}
	.order-section{
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		height: 99rpx;
		padding: 24rpx 0;
	}
	.order-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 98rpx;
		position: relative;
		margin-right: 53rpx;
		&: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: 100%;
		// margin-bottom: 150rpx;
	}	
	.list-cell-item{
		width: 702rpx;
		height: auto;
		margin-bottom: 24rpx;
		padding:0 24rpx;
		background: $bg-color;
	}
	.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;
		}
		.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>