<template>
    <view>
        <!-- 头部 -->
        <view class="userHead" v-if="isUser">
            <navigator hover-class="none" class="userHead-img" url="/pages/setUpForm/form_submit?type=avatar">
                <image :src="userInfo.avatar" mode="aspectFill"></image>
                <view class="userHead-edit">
                    <text>编辑头像</text>
                </view>
            </navigator>
            
            <view class="userHead-text">
                <view class="userHead-name" v-if="userInfo.identity">
                    <view class="userHead-nickn">
                        {{userInfo.nickname}}
                    </view>
                    <view class="userHead-tips default" v-if="userInfo.identity.identity_id == 0">
                        {{ userInfo.identity.name }}
                    </view>
                    <view class="userHead-tips super" v-else-if="userInfo.identity.identity_id == 1">
                        <image src="/static/img/user_identity_00.png"></image><text>{{ userInfo.identity.name }}</text>
                    </view>
                    <view class="userHead-tips sage" v-else>
                        <image src="/static/img/user_identity_01.png"></image><text>{{ userInfo.identity.name }}</text>
                    </view>
                </view>
                <view class="userHead-tel">
                    {{userInfo.username}}
                </view>
            </view>
        </view>
        <view class="userHead" @click="userLogin" v-else>
            <image class="userHead-img no-userHead" src="https://card.ysd-bs.com/storage/materials/2021/09/01/default_cover.png" mode="aspectFill"></image>
            <view class="userHead-text">
                <view class="userHead-login">
                    去登录
                </view>
            </view>
        </view>
        
        <!-- 我的会员卡 -->
        <view class="userCard">
        	<view class="userCard-title">我的会员卡</view>
        	<view class="userCard-cont">
        		<view class="userCard-clip">
        			<swiper class="userCard-swiper" :autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration" :current="swiper.current">
                        <swiper-item class="userCard-item" @click="swiperNav" :data-type="('silver')">
                            <image class="userCard-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/user_card_00.png" mode="scaleToFill"></image>
                            <view class="userCard-parice" style="color: #676869" v-if="isUser"><text>可用余额：</text>{{ userInfo.account.silver }}</view>
                        </swiper-item>
                        <swiper-item class="userCard-item" @click="swiperNav" :data-type="('drill')">
                            <image class="userCard-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/user_card_02.png" mode="scaleToFill"></image>
                            <view class="userCard-parice" style="color: #192b4c" v-if="isUser"><text>可用余额：</text>{{ userInfo.account.drill }}</view>
                        </swiper-item>
                        <swiper-item class="userCard-item" @click="swiperNav" :data-type="('balance')" v-if="userInfo.identity.identity_id != 0">
                            <image class="userCard-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/user_card_01.png" mode="scaleToFill"></image>
                            <view class="userCard-parice" style="color: #ff8f00" v-if="isUser"><text>可用余额：</text>{{ userInfo.account.balance }}</view>
                        </swiper-item>
        			</swiper>
        		</view>
        		<image src="/static/icon/arrow_left.png" class="userCard-arrow-left" @click="rightSee('nextImg')"></image>
        		<image src="/static/icon/arrow_right.png" class="userCard-arrow-right" @click="rightSee('prevImg')"></image>
        	</view>
        	<view class="userCard-tips">
        		滑动切换，查看更多权益
        		<image src="/static/icon/arrow_tips.png"></image>
        	</view>
        </view>
        
        <!-- 我的服务 -->
        <view class="userCard">
        	<view class="userCard-title">我的服务</view>
        	<view class="userOrder">
        		<view class="userOrder-label" @click="userNav('/pages/coupon/coupon')">
        			<view class="userOrder-icon active">
        				<image src="/static/img/userCoupon.png"></image>
        			</view>
        			<text>我的卡券</text>
        		</view>
        		<view class="userOrder-label" @click="userNav('/pages/packet/packet')">
        			<view class="userOrder-icon active">
        				<image src="/static/img/userOrder_06.png"></image>
        			</view>
        			<text>红包领取</text>
        		</view>
        		<view class="userOrder-label" @click="userNav('/pages/site/index')">
        			<view class="userOrder-icon active">
        				<image src="/static/img/userSite.png"></image>
        			</view>
        			<text>收货地址</text>
        		</view>
        		<view class="userOrder-label" @click="userNav('/pages/activate/activate')">
        			<view class="userOrder-icon active">
        				<image src="/static/img/userOrder_05.png"></image>
        			</view>
        			<text>实体卡激活</text>
        		</view>
        	</view>
        </view>
        
        <!-- 我的订单 -->
        <view class="userCard">
        	<view class="userCard-title">兑换订单</view>
        	<view class="userOrder userOrder-label-new">
        		<view class="userOrder-label" @click="userNav('/pages/order/order?orderType=welfareGoods')">
        			<view class="userOrder-icon">
        				<image src="/static/img/userOrder_00.png"></image>
        			</view>
        			<text>福利券订单</text>
        		</view>
        		<view class="userOrder-label" @click="userNav('/pages/order/order?orderType=welfare')">
        			<view class="userOrder-icon">
        				<image src="/static/img/userOrder_01.png"></image>
        			</view>
        			<text>福利商品订单</text>
        		</view>
        		<view class="userOrder-label" @click="userNav('/pages/order/order?orderType=rightsCoupons')">
        			<view class="userOrder-icon">
        				<image src="/static/img/userOrder_02.png"></image>
        			</view>
        			<text>权益券订单</text>
        		</view>
        		<view class="userOrder-label" @click="userNav('/pages/order/order?orderType=rights')">
        			<view class="userOrder-icon">
        				<image src="/static/img/userOrder_03.png"></image>
        			</view>
        			<text>权益商品订单</text>
        		</view>
        	</view>
        </view>
        
        <!-- 我的工具 -->
        <view class="userCard" v-if="isUser">
        	<view class="userCard-title">我的工具</view>
        	<view class="userOrder">
        		<view class="userOrder-label" @click="userNav('/pages/userStored/index')" v-if="userInfo.identity.identity_id != 0">
        			<view class="userOrder-icon active">
        				<image src="/static/img/userOrder_07.png"></image>
        			</view>
        			<text>储值分享</text>
        		</view>
        		<view class="userOrder-label" @click="userNav('/pages/userGoods/index')" v-if="userInfo.identity.identity_id != 0">
        			<view class="userOrder-icon active">
        				<image src="/static/img/userOrder_08.png"></image>
        			</view>
        			<text>产品分享</text>
        		</view>
        		<view class="userOrder-label" @click="userNav('/pages/favour/favour')">
        			<view class="userOrder-icon active">
        				<image src="/static/img/userOrder_09.png"></image>
        			</view>
        			<text>红包赠予</text>
        		</view>
        		<view class="userOrder-label" @click="userNav('/pages/setUpForm/index')">
        			<view class="userOrder-icon active">
        				<image src="/static/img/userOrder_11.png"></image>
        			</view>
        			<text>个人设置</text>
        		</view>
        	</view>
        </view>
        
    </view>
</template>

<script>
    import { index } from '@/apis/interfaces/user'
    export default {
    	data() {
    		return {
                isUser: false,  // 用户是否登录
    			// 卡轮播
    			swiper: {
    			    imgUrls: [
    			        {
    			            id      : 0,
    			            src     : 'https://card.ysd-bs.com/storage/materials/2021/09/01/user_card_00.png',
    			            color   : '#676869',
    			            type    : 'silver'
    			        },
    			        {
    			            id      : 2,
    			            src     : 'https://card.ysd-bs.com/storage/materials/2021/09/01/user_card_02.png',
    			            color   : '#192b4c',
    			            type    : 'drill'
    			        }
    			    ],
    			    autoplay: false,
    			    interval: 5000,
    			    duration: 1000,
    			    current : 0
    			},
                userInfo: {
                    avatar  : '',  // 用户头像
                    identity: '',  // 用户身份
                    nickname: '',  // 用户名称
                    username: '',  // 用户手机号
                    account : ''   // 用户会员卡信息
                },
                account: {
                    
                }
    		}
    	},
        onLoad() {},
        onShow() {
            if(uni.getStorageSync("token")) {
                this.isUser = true
                // 获取用户登录信息
                this.userData();
            }
        },
        methods: {
            // 用户登录后信息
            userData() {
                index().then(res => {
                    // 是否设置过密码缓存
                    uni.setStorage({
                        key     : 'hasPaypass',
                        data    : res.info.has_paypass
                    })
                    this.userInfo = res.info
                    this.userInfo.order = res.order
                }).catch(err => {
                    uni.showToast({
                        icon: 'none',
                        title: err.message
                    })
                })
            },
            
            // 处理账户积分跳转
            swiperNav(e) {
                let newType = e.currentTarget.dataset.type
                if(this.isUser){
                    if(newType == "balance"){
                        uni.navigateTo({
                            url: '/pages/account/myBalance'
                        })
                        return
                    }
        
                    uni.navigateTo({
                        url: "/pages/account/account?type=" + newType
                    })
                }else{
                    // 去登录
                    uni.navigateTo({
                        url: "/pages/auth/login"
                    })
                }
            },
            
            // 处理未登录时的转跳
            userNav(url){
                let pageUrl = url
                if(uni.getStorageSync("token")) {
                    uni.navigateTo({
                        url: pageUrl
                    })
                    return
                }
                // 去登录
                uni.navigateTo({
                    url: "/pages/auth/login"
                })
            },
            
            // 右,左箭头
            rightSee (e) {
                var swiper = this.swiper;
                var current = swiper.current;
                if(e == 'nextImg') swiper.current = current < (swiper.imgUrls.length - 1) ? current + 1 : 0;
                if(e == 'prevImg') swiper.current = current > 0 ? current - 1 : swiper.imgUrls.length - 1;
                this.swiper = swiper
            },
            
            // 用户登录
            userLogin() {
                uni.navigateTo({
                    url: '/pages/auth/login'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    /* 头部 */
    .userHead {
        display: flex;
        padding: 30rpx;
        box-sizing: border-box;
        background: white;
        .userHead-img {
            width: 135rpx;
            height: 135rpx;
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            image {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
            .userHead-edit {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                text-align: center;
                height: 48rpx;
                line-height: 38rpx;
                background-color: rgba(0,0,0,.5);
                color: #fff;
                text {
                    display: inline-block;
                    font-size: 24rpx;
                    transform: scale(.9);
                }
            }
        }
        .userHead-text {
            margin-left: 30rpx;
            width: calc(100% - 160rpx);
            .userHead-login {
                border: 2rpx solid #313131;
                border-radius: 6rpx;
                font-size: 28rpx;
                padding: 8rpx 30rpx;
                margin-top: 40rpx;
                display: inline-block;
            }
            .userHead-name {
                margin: 20rpx 0;
                font-size: 32rpx;
                font-weight: 600;
                display: flex;
            }
            .userHead-tips {
                background: #c6c6c6;
                border-radius: 30rpx;
                color: #fff;
                font-size: 24rpx;
                padding: 0 15rpx;
                height: 40rpx;
                line-height: 40rpx;
                text-align: center;
                display: inline-block;
                z-index: 99;
                margin-left: 10rpx;
                margin-top: 4rpx;
                &.active {
                    left: 8rpx;
                    background: #000;
                    color: #fff;
                }
                image {
                    width: 24rpx;
                    height: 24rpx;
                    margin-right: 5rpx;
                    vertical-align: -2rpx;
                }
                &.super,
                &.sage {
                    background: #000;
                }
            }
        }
    }
    
    // 我的会员卡
    .userCard {
        background: white;
        padding-bottom: 30rpx;
        margin-bottom: 20rpx;
        .userCard-title {
            font-size: 32rpx;
            font-weight: 600;
            padding: 30rpx 30rpx 0;
            margin: 20rpx 0;
        }
        .userCard-cont {
            padding:  30rpx 80rpx;
            box-sizing: border-box;
            position: relative;
            .userCard-clip {
                position: relative;
                padding-top: 55%;
                width: 100%;
                .userCard-swiper {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 9;
                    .userCard-item {
                        padding: 0 10rpx;
                        box-sizing: border-box;
                        .userCard-img {
                            width: 100%;
                            height: 100%;
                            background-size: 100% 100%;
                        }
                        .userCard-parice {
                            position: absolute;
                            z-index: 9;
                            left: 30rpx;
                            bottom: 50rpx;
                            color: #f79210;
                            font-weight: 600;
                            font-size: 36rpx;
                        }
                    }
                }
            }
            .userCard-arrow-left, .userCard-arrow-right {
                width: 50rpx;
                height: 50rpx;
                position: absolute;
                top: calc(50% - 25rpx);
            }
            .userCard-arrow-left {
                right: 10rpx;
            }
            .userCard-arrow-right {
                left: 10rpx;
            }
        }
        .userCard-tips {
            background: #f0f4fa;
            border-radius: 30rpx;
            width: 360rpx;
            text-align: center;
            margin: 0 auto;
            color: #b4bbc4;
            font-size: 26rpx;
            padding: 14rpx 0;
            image {
                width: 20rpx;
                height: 20rpx;
            }
        }
    }
    
    // 我的服务
    .userOrder {
        overflow: hidden;
        margin-top: 40rpx;
        .userOrder-label {
            float: left;
            width: 25%;
            text-align: center;
            font-size: 28rpx;
            .userOrder-icon {
                width: 94rpx;
                height: 94rpx;
                background: #000;
                border-radius: 50%;
                padding: 18rpx;
                box-sizing: border-box;
                margin: 0 auto 10rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>
