<template>
	<view class="my" v-if="ifLoading">
		<status-nav :ifReturn="false" :titleColor="titleColor" :backgroudColor="backgroudColor"></status-nav>
		<image src="/static/public/my-bg.jpg" mode="" class="allbg" mode="widthFix"></image>
		<view class="my-content">
			<view class="my-word">
				<view class="face">
					<image :src="userInfo.mobile ? baseHttps+userInfo.headimgurl : headimgUrl" mode="widthFix" class="image"></image>
				</view>
				<view class="text">
					<text>
						<text class="st u-m-t-10" v-if="userInfo.mobile">{{userInfo.nickname}}</text>
						<text class="st u-m-t-10" v-else  @tap="goPage('/pagesA/login/login')">点击登录</text>
					</text>
					<view class="phone">
						<text v-if="userInfo.mobile">{{userInfo.mobile}}</text>
						<text v-else class="fs24">Hello,欢迎来到打水商城</text>
					</view>
				</view>
			</view>
			
			<view class="my-group">
				<view class="my-title flex">
					<view class="lg">我的订单</view>
				</view>
				
				<view class="my-list my-order">
					<view class="boxs" v-for="(item,index) in myOrder" :key="index" @tap="goPage(item.src)">
						<view class="title">
							<image :src="item.icon" mode="heightFix"></image>
						</view>
						<view class="st">{{item.text}}</view>
					</view>
				</view>
			</view>
			
			
			<view class="my-group">
				<view class="my-title flex">
					<view class="lg">我的功能</view>
				</view>
				
				<view class="my-list my-use">
					<view class="boxs"  v-for="(item,index) in myUse" :key="index" @tap="goPage(item.src,item.type)">
						<view class="title">
							<view class="image">
								<image :src="item.icon" mode="heightFix"></image>
							</view>
						</view>
						<view class="st">{{item.text}}</view>
						
						<button open-type="contact" bindcontact="handleContact" session-from="sessionFrom" v-if="item.type == 'service'" class="service-btns"></button>
					</view>
				</view>
			</view>
		</view>
		<!-- 尾部 -->
		<foot-bar :current="2"></foot-bar>
	</view>
</template>

<script>
	import {
		postUserInfo,
	} from "@/api/index";
	export default {
		data() {
			return {
				titleColor:'#ffffff', //状态栏文字颜色
				backgroudColor:'none', //导航栏背景
				baseHttps:`${getApp().globalData.hostapi}`, //接口链接
				userInfo:{},//我的数据
				headimgUrl:'/static/public/logo-avatar.png',
				ifLoading:false,
				order_count:{},//订单角标
				myOrder:[
					{
						icon:'/static/my/order-04.png',
						text:'全部订单',
						src:'/pagesA/order/order?index=all',
					},
					{
						icon:'/static/my/order-01.png',
						text:'待付款',
						src:'/pagesA/order/order?index=0',
					},
					{
						icon:'/static/my/order-02.png',
						text:'待收货',
						src:'/pagesA/order/order?index=2',
					},
					{
						icon:'/static/my/order-03.png',
						text:'已完成',
						src:'/pagesA/order/order?index=3',
					}
				],
				myUse:[
					{
						src:'/pages/my/information',
						icon:'/static/my/nav-01.png',
						text:'个人信息'
					},
					{
						src:'/pagesA/address/address',
						icon:'/static/my/nav-02.png',
						text:'地址列表'
					},
					{
						src:'',
						icon:'/static/my/nav-04.png',
						text:'我的推广',
						type:'none2',
					},
					{
						src:'',
						icon:'/static/my/nav-05.png',
						text:'积分明细',
						type:'none2',
					},
					{
						src:'',
						icon:'/static/my/nav-06.png',
						text:'商务合作',
						type:'phone'
					},
					{
						src:'',
						icon:'/static/my/nav-01.png',
						text:'我的客服',
						type:'service'
					},
				],
			};
		},
		onLoad() {
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {	
			getUserInfo() {
				postUserInfo().then(res => {
					if(res.code == 0){
						this.userInfo = res.data.baseInfo;
						if(this.userInfo.mobile !== '') {
							this.userInfo.mobile = this.$toolAll.tools.hideMPhone(this.userInfo.mobile); 
						}
						this.ifLoading = true;
						uni.setStorageSync('userInfo',res.data.baseInfo)//缓存用户信息
					}
				})
			},
			
			// 跳转页面
			goPage(url,type) {
				if (this.$toolAll.tools.judgeAuth()) {
					if(type == 'phone') {
						uni.makePhoneCall({
							phoneNumber:uni.getStorageSync("baseInfo").business_tel
						})
					}else if(type == 'none') {
						this.$toolAll.tools.showToast('暂未开放，敬请期待');
					}else {
						uni.navigateTo({
							url:url
						})
					}
				}
			},
		}
	}
</script>
<style scoped>
	image {
		height: 0;
	}
	.my {
		position: relative;
		background-color: #f7f7f7;
		min-height: 100vh;
	}
	.allbg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}
	
	.my-content {
		margin: 0 20rpx;
		position: relative;
		z-index: 99;
	}
	
	.my-word {
		display: flex;
		align-items: flex-end;
		position: relative;
	}
	.my-word .face {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100%;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		overflow: hidden;
	}
	.my-word .face .image {
		width: 100%;
	}
	.my-word .text {
		height: 100%;
		display: flex;
		line-height: 50rpx;
		flex-direction: column;
	}
	.my-word .text .st {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	.my-word .text .phone {
		font-size: 28rpx;
		color: rgba(51,51,51,0.8);
		margin-top: 10rpx;
	}
	
	.my-list {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		justify-content: space-around;
	}
	.my-list  .boxs {
		text-align: center;
		position: relative;
	}
	
	.my-jf .boxs .title {
		font-size: 28rpx;
		line-height: 54rpx;
		color: #333;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 54rpx;
		position: relative;
	} 
	.my-jf .boxs .title image {
		width: 50rpx;
	}
	 .my-jf .boxs .st {
	 	font-size: 22rpx;
		line-height: 44rpx;
	 	color: rgba(51,51,51,0.8);
	}
	.my-jf .boxs  .vip-st {
		font-size: 22rpx;
		color: #fff;
		background-color: #f00;
		height: 40rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 40rpx;
		padding: 0 24rpx;
	}
	.price {
		font-size: 32rpx !important;
		color: #f72e2e!important;
		display: flex;
		align-items: flex-end;
	}
	.price text {
		font-size: 22rpx;
	}
	.my-order .boxs .title image {
		display: inline-block;
		height: 44rpx;
	}
	.my-order .boxs .st {
		font-size: 28rpx;
		color: #333;
		margin-top: 10rpx;
	}
	.my-use .boxs .title .image {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width:76rpx;
		height: 76rpx;
		background: #f3e8de;
		border-radius: 50%;
	}
	.my-use {
		flex-wrap: wrap;
		justify-content: flex-start;	
	}
	.my-use .boxs  {
		width: 25%;
		margin: 18rpx 0;
	}
	.my-use .boxs .title .image image {
		height: 40rpx;
		display: block;
	}
	.my-use .boxs .st {
		font-size: 26rpx;
		color: #333;
		margin-top: 10rpx;
	}
	.my-use .boxs .service-btns {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 9;
	}
	.writeOff {
		position: absolute;
		right: -20rpx;
		top: 27rpx;
		display: inline-block;
		padding: 0 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fff;
		color: #333;
		font-size: 26rpx;
		border-radius: 50rpx 0 0 50rpx;
		box-shadow: 0 2px 14rpx rgba(0,0,0,0.1);
	}
	.my-order .title {
		position: relative;
	}
	.my-order .title .icon {
		position: absolute;
		right: -3rpx;
		top: -18rpx;
		width: 36rpx;
		height: 36rpx;
		background-color: #f00;
		border-radius: 50%;
		color: #fff;
		font-size: 20rpx;
		text-align: center;
		line-height: 36rpx;
	}
	.my-group {
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}
	.my-title {
	    height: 88rpx;
	    padding: 0 30rpx;
		border-bottom: 1px dashed #E5E5E5;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	
	.my-title .lg {
		font-size: 32rpx;
	}
	
	.my-title .muted {
		color: #999999;
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}
</style>
