<template>
	<view class="userHeaderBox">
        <view class="titlenav" :style="{ paddingTop: nav }">
            <view class="carrHeader-left-icon" @click="goBack">
					<u-icon name="arrow-left" size="38" color="#000"></u-icon>
                </view>
            {{ pageTitle   }}
        </view>
        <view class="userHeadPic row">
            <view class="userHeadPicL">
                <u-avatar :src="b2b_user_info.photo?b2b_user_info.photo:user_info.avatar" size="97" shape="circle"></u-avatar>
                <!-- <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748795455095258.png" mode="widthFix"></image> -->
            </view>
            <view class="col column">
                <text v-if="b2b_user_info&&b2b_user_info.name" 
                class="userHeadPicR_title" @click="navigatorToProfile">
                    {{ b2b_user_info.name }}
                </text>
                <text v-else-if="mall_UserInfo&&mall_UserInfo.Name" 
                class="userHeadPicR_title">
                    {{mall_UserInfo.Name}}
                </text>
                <text v-else class="userHeadPicR_title" @click="login(user_info)">
                    立即登录
                </text>
                <text class="userHeadPicR_text">销售:{{ b2b_user_info.salesBaseInfo.emName }}等3人</text>
            </view>
        </view>
        <view class="userHeadPasBox">
            <view class="userHeadPNumBox row-sb-n">
                <view class="userHeadPNum">
                    <view class="userHeadPNumT">当前余额</view>
                    <view class="userHeadPNumB">
                        <text>￥</text>
                        10550
                    </view>
                </view>
                <view class="userHeadPNum active">
                    <view class="userHeadPNumT">待结算</view>
                    <view class="userHeadPNumB">
                        <text>￥</text>
                        10550
                    </view>
                </view>
            </view>
            <view class="userHeadPNumS row-sb-n">
                <view class="userHeadPNumSL">累计已省</view>
                <view class="userHeadPNumSR">
                    ￥<text>15818</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
        props:['user_info','b2b_user_info'],
		data() {
			return {
				pageTitle: "幸福存折",
				nav: 0,
                progress:[
					{
						text:'1',
						colorStyle: 'active',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'2',
						colorStyle: 'active',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'3',
						colorStyle: 'active',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'4',
						colorStyle: 'active',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'',
						colorStyle: '',
						radiusL: '',
						radiusR: '',
						img:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528736165089.png'
					},
				],
			};
		},
		components: {},
        computed: {
            
        },
		created() {
			
        },
		onLoad() {
			this.nav = uni.getSystemInfoSync().statusBarHeight + "px";
		},
		mounted() {
			
		},
		onShow() {
			
		},
		methods: {
            goBack(){
                uni.navigateBack({delta:-1})
            },
			navigatorToProfile(){
				// #ifdef MP-DI
                    uni.navigateTo({
                        url:'/pages/user-center/user-profile'
                    })
				// #endif
			},
		},
	};
</script>

<style lang="scss" scoped>
    @import url("@/asset/css/flex.css");
    
	.userHeaderBox{
        width: 750rpx;
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638774883791846536.png')no-repeat #F3F2EF;
        background-size: 100% auto;
        padding-top: 118rpx;
        position: relative;
    }
    .carrHeader-left-icon{
        position: absolute;
        left: 32rpx;
        top: 119rpx;
        z-index: 2;
    }
    .titlenav {
		width: 100%;
		text-align: center;
		font-size: 16px;
		color: #000;
	}
    .userHeadPic{
        padding: 49rpx 20rpx 25rpx 62rpx;
    }
    .userHeadPicL{
        width: 97rpx;
        height: 97rpx;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 27rpx;
    }
    .userHeadPicL image{
        width: 97rpx;
        height: 97rpx;
        display: block;
    }
    .userHeadPicR_title{
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 36rpx;
        color: #080A09;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .userHeadPicR_text{
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #61462E;
        margin-top: 16rpx;
        letter-spacing: 1rpx;
    }
    .jz_LineDetaVipPr{
		margin-top: 28rpx;
		position: relative;
		left: -20rpx;
	}
	.jz_LineDetaVip{
		width: 100%;
		height: 120rpx;
		background: linear-gradient(90deg, #3F423F, #313131);
		border-radius: 18rpx;
		display: flex;
		flex-direction: column;
		padding: 15rpx 0 6rpx 0;
		margin-top: 18rpx;
		margin-bottom: 18rpx;
	}
	.jz_LineDetaVipTop{
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #E2C27A;
		letter-spacing: .1rpx;
		display: flex;
		align-content: center;
		padding: 0 34rpx;
	}
	.jz_LineDetaVipTop img{
		width: 21rpx;
		height: 21rpx;
		display: inline-block;
		margin-left: 5rpx;
	}
	.jz_LineDetaVPB{
		display: flex;
		
	}
	.jz_LineDetaVPBBox{
		display: flex;
		align-items: center;
		width: 1px;
		flex: 1;
	}
	.jz_LineDetaVPBN{
		width: 30rpx;
		height: 30rpx;
		background: #2E2E2E;
		border-radius: 50%;
		text-align: center;
		line-height: 28rpx;
		font-family: DIN Black;
		font-weight: bold;
		font-size: 24rpx;
		color:  #494949;;
	}
	.jz_LineDetaVPBLine{
		flex: 1;
		height: 10rpx;
		background: #000;
	}
	.jz_LineDetaVPBBoxI{
		position: relative;
		flex: 1;
	}
	.jz_LineDetaVPBBoxI img{
		width: 87rpx;
		height: 99rpx;
		position: absolute;
		bottom: -35rpx;
		right: 8rpx;
		z-index: 2;
	}
	.jz_LineDetaVPBBox.active .jz_LineDetaVPBN{
		background: linear-gradient(270deg, #C99E59, #FFFFB3);
	}
	.jz_LineDetaVPBBox.active .jz_LineDetaVPBLine{
		background: #C99E59;
		color: #583F2C;
	}
    .VPBLRadiusL{
		border-radius: 20rpx 0 0 20rpx ;
	}
	.VPBLRadiusR{
		border-radius: 0 20rpx 20rpx 0;
	}
	.jz_LineDetaVPBY{
		position: absolute;
		left: -29rpx;
		right: 0;
		top: 0;
	}
    .userHeadPasBox{
        padding: 0 30rpx;
    }
    .userHeadPNum{
        width: 330rpx;
        border-radius: 18rpx;
        background: rgba(255, 255, 255,.2);
        padding: 30rpx 20rpx 40rpx 50rpx;
    }
    .userHeadPNumT{
        font-weight: 500;
        font-size: 28rpx;
        color: #4F360D;
        margin-bottom: 21rpx;
    }
    .userHeadPNumB{
        color: #FF3166 ;
        font-size: 48rpx;
        font-weight: bold;
    }
    .userHeadPNumB text{
        font-size: 29rpx;
    }
    .userHeadPNum.active .userHeadPNumB{
        color: #4F360D;
    }
    .userHeadPNumS{
        border-radius: 18rpx;
        background: rgba(255, 255, 255,.2);
        padding: 30rpx 40rpx 40rpx 50rpx;
        margin-top: 30rpx;
        margin-bottom: 40rpx;
    }
    .userHeadPNumSL{
        font-size: 29rpx;
        color: #4F360D;
    }
    .userHeadPNumSR{
        color: #4F360D ;
        font-size: 29rpx;
        font-weight: bold;
    }
    .userHeadPNumSR text{
        font-size: 48rpx;
    }
</style>
