<template>
	<view class="page">
		<view class="pageMain">
			<view class="topBox flex align-center" @click="goLogin">
				<image :src="isLogin ? userHeader : '/static/user/headimg_no.png'" class="headerImg"></image>
				<view class="flex-one margin-left-30">
					<view class="text-40 text-ff text-bold" v-if="!isLogin">
						去登录
					</view>
					<view class="" v-if="isLogin">
						<view class="text-40 text-ff text-bold margin-bottom-15">{{userName}}</view>
						<view class="text-24 text-ff editBox" @click.stop="go('/pages/member/personal')">修改资料</view>
					</view>
				</view>
			</view>

			<view class="width-100p position-relative" style="margin-top: -40rpx;z-index: 5;">
				<ty-bar-order-nav :list="orderTabs" @needLogin="needLogin"></ty-bar-order-nav>
			</view>

			<view class="bg-ff radius-20 margin-top-25">
				<view class="line-height-80 text-28 text-bold padding-left-40 border-bottom-ed">
					我的应用
				</view>
				<view class="padding-lr-15 padding-top-40 padding-bottom-50 flex flex-wrap">
					<view class="flex flex-direction align-center justify-center" style="width: 25%;"
						@click="goLink('/pages/member/expertFollow')">
						<view class="iconImg">
							<image src="/static/home/icon1.png" class="width-100p height-100p block"></image>
						</view>
						<view class="margin-top-10 text-24">
							关注的专家
						</view>
					</view>
					<view class="flex flex-direction align-center justify-center" style="width: 25%;"
						@click="goLink('/pages/member/materialCollect')">
						<view class="iconImg">
							<image src="/static/home/icon2.png" class="width-100p height-100p block"></image>
						</view>
						<view class="margin-top-10 text-24">
							收藏的材料
						</view>
					</view>
					<view class="flex flex-direction align-center justify-center" style="width: 25%;"
						@click="goLink('/pages/member/evaluateList')">
						<view class="iconImg">
							<image src="/static/home/icon3.png" class="width-100p height-100p block"></image>
						</view>
						<view class="margin-top-10 text-24">
							我的评价
						</view>
					</view>
					<view class="flex flex-direction align-center justify-center" style="width: 25%;"
						@click="go('/pages/common/richText?title=关于我们&url=project/api/Config/getAboutUsData&param=about_us')">
						<view class="iconImg">
							<image src="/static/home/icon4.png" class="width-100p height-100p block"></image>
						</view>
						<view class="margin-top-10 text-24">
							关于我们
						</view>
					</view>
					<view class="flex flex-direction align-center justify-center margin-top-50 position-relative"
						style="width: 25%;" @click="goLink('/pages/expertCenter/index')" v-if="is_expert > 0">
						<view class="iconImg">
							<image src="/static/home/icon5.png" class="width-100p height-100p block"></image>
						</view>
						<view class="margin-top-10 text-24">
							专家中心
						</view>
						<view class="circleBox" v-if="expert_red == 2"></view>
					</view>
					<view class="flex flex-direction align-center justify-center margin-top-50" style="width: 25%;"
						@click="goLink('/pages/member/expertSettle')" v-if="is_expert == 0">
						<view class="iconImg">
							<image src="/static/home/icon5.png" class="width-100p height-100p block"></image>
						</view>
						<view class="margin-top-10 text-24">
							入驻为专家
						</view>
					</view>
					<view class="flex flex-direction align-center justify-center margin-top-50 position-relative"
						style="width: 25%;" @click="goLink('/pages/supplierCenter/index')" v-if="is_supply > 0">
						<view class="iconImg">
							<image src="/static/home/icon6.png" class="width-100p height-100p block"></image>
						</view>
						<view class="margin-top-10 text-24">
							供应商中心
						</view>
						<view class="circleBox" v-if="supply_red == 2"></view>
					</view>
					<view class="flex flex-direction align-center justify-center margin-top-50" style="width: 25%;"
						@click="goLink('/pages/member/supplierSettle')" v-if="is_supply == 0">
						<view class="iconImg">
							<image src="/static/home/icon6.png" class="width-100p height-100p block"></image>
						</view>
						<view class="margin-top-10 text-24">
							入驻为供应商
						</view>
					</view>
					<view class="flex flex-direction align-center justify-center margin-top-50" style="width: 25%;"
						@click="goLink('/pages/feedback/index')">
						<view class="iconImg">
							<image src="/static/home/icon7.png" class="width-100p height-100p block"></image>
						</view>
						<view class="margin-top-10 text-24">
							意见反馈
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userHeader: '',
				userName: '',
				isLogin: 1,
				// 订单tab
				orderTabs: {
					list: [{
						icon: 'tyIcon-qianbao',
						name: '待支付',
						size: 46,
						number: 0,
						url: 'pages/expert/orderList?index=1'
					}, {
						icon: 'tyIcon-daishouhuo1',
						name: '进行中',
						size: 42,
						number: 0,
						url: 'pages/expert/orderList?index=2'
					}, {
						icon: 'tyIcon-daishouhuo',
						name: '待评价',
						size: 50,
						number: 0,
						url: 'pages/expert/orderList?index=3'
					}, {
						icon: 'tyIcon-pingjia',
						name: '已完成',
						size: 52,
						number: 0,
						url: 'pages/expert/orderList?index=4'
					}],
					last: {
						icon: 'tyIcon-weibiaoti-',
						name: '全部订单',
						size: 54,
						number: 0,
						url: 'pages/expert/orderList'
					}
				},
				is_expert: 0, //是否展示专家中心 大于0展示
				is_supply: 0, //是否展示供应商中心 大于0展示
				expert_red: 1, //专家中心是否展示红点 1-不展示 2-展示 
				supply_red: 1, //供应商中心是否展示红点 1-不展示 2-展示
			}
		},
		onLoad(options) {

		},
		onShow() {
			this.isLogin = this.cn.isLogin();
			this.getPageData();
			if(this.cn.isLogin()){
				this.getBottomTabRed()
			}
		},
		methods: {
			goLogin(){
				if(this.cn.isLogin()){
					return
				}else{
					uni.navigateTo({
						url: '/pages/home/login'
					})
				}
			},
			// 获取底部导航栏红点是否显示
			getBottomTabRed(){
				this.rq.getData('chat/api/FriendsChat/getNoReadNumber').then((res)=>{
					if(res.code == 0){
						if(res.data.number > 0){
							uni.showTabBarRedDot({
								index: 1
							})
						}else{
							uni.removeTabBarBadge({ index: 1 })
						}
					}
				})
			},
			getPageData() {
				this.rq.getData('fire/api/Fire/userCenter').then(res => {
					if (res.code == 0) {
						this.userHeader = res.data.user_info.head_img ? res.data.user_info.head_img : '';
						this.userName = res.data.user_info.nick_name ? res.data.user_info.nick_name : '';
						if (res.data.ordering_number > 0) {
							this.orderTabs.list[1].number = 1;
						}
						this.is_expert = res.data.is_expert;
						this.is_supply = res.data.is_supply;
						this.expert_red = res.data.expert_red;
						this.supply_red = res.data.supply_red;
					}
				})
			},
			needLogin() {
				uni.navigateTo({
					url: '/pages/home/login'
				})
			},
			goLink(url) {
				if (this.cn.isLogin()) {
					uni.navigateTo({
						url: url
					})
				} else {
					uni.navigateTo({
						url: '/pages/home/login'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.topBox {
		width: 100vw;
		background: #2F97FF;
		padding: 47rpx 40rpx 73rpx;
		box-sizing: border-box;
	}

	.headerImg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		display: block;
	}

	.editBox {
		padding: 8rpx 0;
		width: 152rpx;
		text-align: center;
		line-height: 33rpx;
		border-radius: 35rpx;
		border: 1rpx solid #fff;
	}

	.orderBox {
		width: 100vw;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: -20rpx;
	}

	.orderBox .eveOrder {
		padding: 50rpx 0 36rpx;
	}

	.allOrder {
		box-shadow: -12rpx 0rpx 13rpx -8rpx rgba(0, 0, 0, 0.06);
	}

	.iconImg {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.circleBox {
		width: 20rpx;
		height: 20rpx;
		background: #FF8534;
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: calc(50% + 15rpx);
	}
</style>
