rtliveCompany/pages/user/index.vue

<template>
	<view>
		<view class="top-cont">
			<image class="bg" src="@/static/image/top_bg.png" mode="widthFix"></image>
			<view class="top-inner">			
				<!-- 这里是状态栏 -->
				<view class="status_bar" :style="{height: statusBarHeight}"></view>
				<view class="user-info">
					<view class="left">
						<view class="head-img">
							<image :src="user.avatar==null?'/static/image/my_heads_icon64.png':user.avatar" mode="aspectFill"></image>
						</view>
						<view class="name-phone">
							<view class="x-f">
								<view class="name" v-if="UserInfo">{{user.nickname}}</view>
								<view class="name" v-else>请先登录</view>
								<text>{{user.phone?utils.parsePhone(user.phone):'-'}}</text>
							</view>
							
							<!-- <view class="phone">
							<image class="w32 h32" src="../../static/images/company/phone_icon16.png" mode=""></image>
							<text>{{user.phone?utils.parsePhone(user.phone):'-'}}</text>
							</view> -->
							
							<view class="vip">
								<image class="w24 h24" src="../../static/image/icon_v.png" mode=""></image>
								已认证
							</view>
						</view>
					</view>
					<view class="right">
						<view class="set" @click="navgetTo('/pages_user/user/personInfo')">
							<image class="w48 h48" src="../../static/image/right_arrow_black_icon24.png" mode=""></image>
						</view>
						<!-- <uni-badge size="small" :text="msgNum" absolute="rightTop" type="error">
							<view class="set" @click="navgetTo('/pages_user/user/personInfo')">
								<image class="w48 h48" src="../../static/images/user/center_set_icon.png" mode=""></image>
							</view>
						</uni-badge>
						<uni-badge size="small" :text="msgNum" absolute="rightTop" type="error">
							<view class="msg-box" @click="navgetTo('/pages_user/user/message')">
								<image class="w48 h48" src="../../static/images/user/center_new_icon.png" mode=""></image>
							</view>
						</uni-badge> -->
					<!-- 	<uni-badge size="small" absolute="rightTop" type="error">
						<view class="msg-box ml10" @click="navgetTo('/pages_user/user/complaint')">
							<u-icon name="edit-pen" color="#222426" size="28"></u-icon>
						</view>
						</uni-badge> -->
					</view>
				</view>
				<view class="vipbox">
					<image src="@/static/image/img_renzheng.png" mode="widthFix"></image>
				</view>
				
				<view class="content">
					<view class="task-list">
						<view class="item" v-for="(item,index) in tabs" :key="index"  @click="openLink(item)">
							<view class="left">
								<image :src="item.icon" mode=""></image>
								<view class="title-l">{{item.name}}</view>
							</view>
							<view class="right">
								<!-- <view class="num" v-if="item.num!==0">{{item.num}}</view> -->
								<image src="@/static/image/icon_my_more.png" mode=""></image>
							</view>
						</view>
					</view>
					<!-- 退出登录按钮 -->
					<view class="log-out" @click="logOut">退出登录</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import {getOrderCount} from '@/api/storeOrder'
	import {getUserInfo} from '@/api/user'
	export default {
		data() {
			return {
				count0:0,
				count1:0,
				count2:0,
				afterSalesCount:0,
				tabs:[
					{name:'我的积分',num:12,icon:'/static/image/icon_my_points.png',url:'/pages_user/points'},
					{name:'服务单确认',num:3,icon:'/static/image/icon_my_servicelist.png',url:''},
					{name:'银行卡',num:8,icon:'/static/image/icon_my_card.png',url:''},
					{name:'设置密码',num:0,icon:'/static/image/icon_my_password.png',url:''},
					{name:'用户协议',num:0,icon:'/static/image/icon_my_useragreement.png',url:'/web/userAgreement'},
				],
				user:{
					isPromoter:0,
					isWeixinAuth:0,
					phone:"",
					nickname:"用户昵称",
					avatarUrl:"/static/images/detault_head.png"
				},
				// 状态栏的高度
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				// 消息数量
				msgNum: 0,
			 isShow:true,
				 UserInfo: uni.getStorageSync('AppToken')
			};
		},
		onLoad() {
			console.log("onload")
		},
		onShow() {
			console.log("onshow")
			//this.getUserInfo();
			//this.getOrderCount();
		},
		onReachBottom() {
			console.log("onReachBottom")
			this.$refs.product.getGoodsProducts();
		},
		methods: {
			seeChange(){
				this.isShow=!this.isShow
			},
			callService(){
				 uni.makePhoneCall({
					phoneNumber:"4000717770",
					success:function(){
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			 
			getOrderCount(){
				getOrderCount().then(
					res => {
						if(res.code==200){
							this.count0=res.count0;
							this.count1=res.count1; 
							this.count2=res.count2; 
							this.afterSalesCount=res.afterSalesCount; 
						} 
					},
					rej => {}
				);
			},
			logOut(){
			 	uni.showModal({
			 		title:"提示",
			 		content:"确认退出登录吗?",
			 		showCancel:true,
			 		cancelText:'取消',
			 		confirmText:'确定',
			 		success:res=>{
			 			if(res.confirm){
							uni.setStorageSync('CompanyUserToken',null);
			 				uni.setStorageSync('AppToken',null);
							uni.setStorageSync('userInfo',null);
							uni.$emit('refreshLogin');
			 				uni.navigateTo({
			 					url: '/pages/auth/login'
			 				})							
			 			}else{
			 			}
			 		}
			 	})
			 },
			 openLink(item){
				 if(item.name=='用户协议'){
					 this.openH5()
					 return;
				 }
				 uni.navigateTo({
				 	url: item.url
				 })
				 // this.utils.isLogin().then(res => {
				 // 	if(res){
				 // 		uni.navigateTo({
				 // 			url: url+'?userId='+this.user.userId
				 // 		})
				 // 	}
				 // })
			 },
			toManager(){
				// uni.navigateTo({
				// 	url: '/pages_company/index'
				// })
				if(this.utils.checkCompanyUserLoginState()){
					uni.navigateTo({
						url: '/pages_company/index'
					})
				}
				else{
					uni.navigateTo({
						url: '/pages_company/auth/login'
					})
				}
				
			},
			openH5(url){
				var requestPath = uni.getStorageSync('requestPath');
				uni.setStorageSync('url',requestPath+url);
				uni.navigateTo({
					url: '../home/web'
				})
			},
			getUserInfo(){
				getUserInfo().then(
					res => {
						if(res.code==200){
							if(res.user!=null){
								this.user=res.user;
							}
							else{
								this.utils.loginOut();
							}
							
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			// 跳转页面
			navgetTo(url) {
				this.utils.isLogin().then(res => {
					if(res){
						uni.navigateTo({
							url: url+'?userId='+this.user.userId
						})
					}
				})
			},
			// 查看订单
			showOrder(status) {
				uni.navigateTo({
					url: '/pages_user/user/storeOrder?status=' + status
				})
			}
		}
	}
</script>

<style lang="scss">
	.top-cont{
		width: 100%;
		height: 600rpx;
		position: relative;
		// background-image: url(../../static/image/top_bg.png);
		// background-repeat:no-repeat;
		// background-size:100%;
		.bg{
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.top-inner{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			.user-info{
				padding: 88upx 30upx 32upx 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					position: relative;
					display: flex;
					.head-img{
						width: 112upx;
						height: 112upx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 32upx;
						border: 4upx solid #FFFFFF;
						//box-shadow: 0px 5px 15px 2px rgba(0,0,0,0.1);
						image{
							width: 100%;
							height: 100%;
						}
					}
					.name-phone{
						// padding-top: 15upx;
						display: flex;
						align-items: flex-start;
						flex-direction: column;
						justify-content: space-around;
						.name{
							font-size: 40upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
							line-height: 1;
						}
						text{
							font-family: PingFang SC, PingFang SC;
							font-weight: 600;
							font-size: 28rpx;
						}
						.phone{
							width: 220rpx;
							height: 48rpx;
							margin-top: 30upx;
							background: linear-gradient( 90deg, #FEA501 0%, #FECB8A 100%);
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							border: 1rpx solid #FEDDB9;
							display: flex;
							align-items: center;
							justify-content: center;
							text{
								font-size: 24upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #fff;
								line-height: 1;
								margin-left: 4rpx;
							}
							
						}
						.vip{
							display: flex;
							align-items: center;
							justify-content: center;
							width: 120rpx;
							height: 40rpx;
							background: linear-gradient( 90deg, #FFEBAA 0%, #FFD45D 100%);
							border-radius: 38rpx 38rpx 38rpx 38rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #694511;
						}
					}
				}
				.right{
					display: flex;
					align-items: center;
					justify-content: center;
					.msg-box{
						// margin-left: 10upx;
						width: 48upx;
						height: 48upx;
						// image{
						// 	width: 100%;
						// 	height: 100%;
						// }
					}
					.set{
						
						width: 48rpx;
						height: 48rpx;
						// margin-right: 20rpx;
						// image{
						// 	width: 100%;
						// 	height: 100%;
						// }
					}
				}
			}
			.balance{
				padding: 30rpx;
				height: 180rpx;
				margin: 50rpx 20rpx 0;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				background: linear-gradient( 266deg, #E83924 0%, #FEA603 100%);
				// background-image:url(../../static/images/balancebg.png);
				// background-repeat: no-repeat;
				// background-size: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content:space-around;
					height: 100%;
					.text{
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFFFFF;
						text-align: left;
						margin-right: 16rpx;
					}
					.num{
						font-family: Roboto, Roboto;
						font-weight: 500;
						font-size: 64rpx;
						color: #FFFFFF;
					}
				}
				.right{
					width: 132rpx;
					height: 64rpx;
					line-height: 64rpx;
					background: #FFFFFF;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #FF5030;
					text-align: center;
				}
			}
			.my-order{
				padding: 20upx 20upx 0;
				.inner{
					box-sizing: border-box;
					height: 245upx;
					background: #FFFFFF;
					border-radius: 16upx;
					padding: 40upx 30upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.title{
							font-size: 36upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #222222;
							line-height: 1;
						}
						.all-order{
							display: flex;
							align-items: center;
							.text{
								font-size: 26upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 1;
								margin-right: 8upx;
							}
							// image{
							// 	width: 14upx;
							// 	height: 24upx;
							// }
						}
					}
					.status-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 10upx;
						.item{
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							image{
								width: 48upx;
								height: 48upx;
								margin-bottom: 18upx;
							}
							.text{
								font-size: 26upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
								line-height: 1;
							}
						}
					}
				}
			}
			
		}
	}
	.vipbox{
	   margin-top: 24upx;
	   padding: 0 24upx;
	   image{
		   width: 100%;
	   }
	}
	.content{
		margin-top: 24upx;
		padding: 0 24upx;
		// display: flex;
		align-items: center;
		justify-content: center;
		.task-list{
			// padding: 24rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: flex-start;
			width: 100%;
			  box-sizing: border-box; 
			  border-radius: 24rpx;
			  background: #FFFFFF;
			.item{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding:28rpx 24rpx;
				box-sizing: border-box; 
				// margin-bottom: 24rpx;
				.left{
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 48rpx;
						height: 48rpx;
						margin-right: 32rpx;
					}
					.title-l{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #333333;
					}
				}
				.right{
					display: flex;
					align-items: center;
					.num{
						text-align: center;
						width: 50rpx;
						height: 36rpx;
						line-height: 36rpx;
						background: rgba(56,139,255,0.16);
						border-radius: 34rpx 34rpx 34rpx 34rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #388BFF;
					}
					image{
						width: 32rpx;
						height: 32rpx;
						margin-left: 12rpx;
					}
				}
			}
		}
		.used-tools{
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16upx;
			padding: 40upx 30upx;
			
			.title{
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				line-height: 1;
			}
			.tools-list{
				margin-top: 50upx;
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				.item{
					box-sizing: border-box;
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 50upx;
					position: relative;
					image{
						width: 48upx;
						height: 48upx;
					}
					.text{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333;
						line-height: 1;
						margin-top: 20upx;
					}
					.contact-btn{
						display: inline-block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}
			}
		}
		.log-out{
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			background: #FFFFFF;
			border-radius: 16upx;
			margin-top: 52upx;
		}
	}
	.sub-btn{
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.like-product{
		padding: 0 20rpx;
		 
	}
	.banner{
		padding: 20rpx 20rpx 0rpx 20rpx;
		height: 200rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width:100%;
			height: 100%;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}
		.tel_btn{
			width: 100%;
			height: 100%;
			top:0upx;
			position: absolute;
			opacity:0.0;
		}
	}
</style>