<!--
 * @Author: euzhi
 * @Description: 个人中心
-->
<template>
<view class="appCotent">
    <view class="content">
        <custom-tarbar :selected="4"></custom-tarbar>
        <view class="personal">
            <div class="ps__bg">
                <div class="ps__title"></div>
                <div class="ps__info">
                    <div class="info__cover">
                        <image :src="avatar" />
                    </div>
                    <div>
                        <div class="info__name">{{userInfo.nickName}}</div>
                        <div class="view__info" @click="editInfo">
                            查看个人主页或编辑资料
                            <span>
                                <image src="@/static/my/my7.png">
                            </span>
                        </div>
                    </div>
                </div>
                <div class="ps__shop">
                    <div class="shop__tab">
                        <div class="tab__top">
                            <span>商品订单</span>
                            <div class="tab__all" @click="goOrder(0)">
                                <span>全部订单</span>
                                <span>
                                    <image src="@/static/my/my5.png">
                                </span>
                            </div>
                        </div>
                        <div class="tab__bottom">
                            <div class="tab__item" v-for="(vo,inx) in items" :key="inx" @click="goOrder(inx+1)">
                                <image :src="vo.icon" />
                                <div>{{vo.title}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ps__list">
                <div class="list__item" v-for="(vo,inx) in menu" :key="inx" @click="goUrl(vo)">
                    <div class="list__left">
                        <image :src="vo.icon" alt="" srcset="">
                            {{vo.title}}
                    </div>
                    <div class="list__right">
                        <image src="@/static/my/my5.png" alt="" srcset="">
                    </div>
                </div>
            </div>
            <div class="ps__btn" @click="loginOut">退出登录</div>
        </view>
        <u-gap bgColor="transparent" height="70"></u-gap>
    </view>
</view>
</template>

<script>
import customTarbar from '@/common/wxcomponents/custom-tarbar/custom-tarbar.vue';
export default {
    components: {
        'custom-tarbar': customTarbar
    },
    data() {
        return {
            menu: [{
                    icon: require("@/static/my/my12.png"),
                    title: "我的地址",
                    url: "/pagesD/pages/personal/myAddress"
                },
                {
                    icon: require("@/static/my/my8.png"),
                    title: "使用帮助",
                    url: "/pagesD/pages/personal/help"
                },
                {
                    icon: require("@/static/my/my1.png"),
                    title: "常见问题",
                    url: "/pagesD/pages/personal/asking"
                },
                {
                    icon: require("@/static/my/my11.png"),
                    title: "问题反馈",
                    url: "/pagesD/pages/personal/ask"
                }
            ],
            items: [{
                    title: '待发货',
                    icon: require('@/static/my/my2.png'),
                    page:0
                },
                {
                    title: '待收货',
                    icon: require('@/static/my/my3.png'),
                    page:2
                }, {
                    title: '已完成',
                    icon: require('@/static/my/my14.png'),
                    page:3
                }, {
                    title: '退款/售后',
                    icon: require('@/static/my/my9.png'),
                    page:4
                }
            ],
			//用户信息
			userInfo: {},
			//头像
			avatar: '',
        }
    },
    methods: {
        loginOut(){
             uni.navigateTo({
                url: '/pages/binding/index'
            });
        },
        goOrder(current) {
            uni.navigateTo({
                url: '/pagesD/pages/personal/myOrder?current=' + current
            });
        },
        goUrl(vo) {
            uni.navigateTo({
                url: vo.url
            });
        },
        editInfo() {
            uni.navigateTo({
                url: '/pagesD/pages/personal/userInfo'
            });
        },
		getUserInfo(){
			let opts = { url: '/app/user/info', method: 'get' };
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					this.userInfo = res.data.data
					this.avatar = this.http.baseUrl + this.userInfo.avatar
				}
			})
		},
    },
	onShow() {
		this.getUserInfo()
	},
};
</script>

<style lang="scss" scoped>
.personal {
    .ps__bg {
        background: url('http://euzhi.com/my15.png') no-repeat;
        background-size: cover;
        z-index: 999;
        .ps__title {
            font-size: 40rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            text-align: center;
            padding-top: 40rpx;
        }

        .ps__info {
            padding: 65rpx 40rpx 30rpx 40rpx;
            display: flex;
            align-items: center;
            position: relative;

            .info__cover {
                width: 130rpx;
                height: 130rpx;
                background: url('@/static/my/my10.png') no-repeat;
                background-size: contain;
                margin-right: 32rpx;

                image {
                    width: 130rpx;
                    height: 130rpx;
                    border-radius: 50%;
                }
            }

            .info__name {
                font-size: 38rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #FFFFFF;
                opacity: 0.96;
                margin-bottom: 28rpx;
            }

            .view__info {
                font-size: 30rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                opacity: 0.96;
                display: flex;
                align-items: center;

                span {
                    position: absolute;
                    right: 40rpx;

                    image {
                        width: 16rpx;
                        height: 26rpx;
                    }
                }
            }
        }

        .ps__shop {
            padding: 0 40rpx;

            .shop__tab {
                padding: 30rpx;
                background: #FFFFFF;
                box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
                border-radius: 20rpx;

                .tab__top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 20rpx;

                    >span {
                        font-size: 34rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #333333;
                    }

                    .tab__all {
                        font-size: 26rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #999999;

                        image {
                            width: 11rpx;
                            height: 18rpx;
                            padding-left: 20rpx;
                        }
                    }
                }

                .tab__bottom {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-top: 20rpx;

                    .tab__item {
                        font-size: 28rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #666666;
                        width: 25%;
                        text-align: center;

                        image {
                            width: 60rpx;
                            height: 49rpx;
                            margin-bottom: 10rpx;
                        }
                    }
                }
            }
        }
    }

    .ps__list {
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
        border-radius: 20rpx;
        margin-top: 20rpx;

        .list__item {
            position: relative;
            padding: 26rpx 40rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .list__left {
                font-size: 32rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                display: flex;
                align-items: center;

                image {
                    width: 27rpx;
                    height: 33rpx;
                    margin-right: 34rpx;
                }
            }

            .list__right {

                image {
                    width: 11rpx;
                    height: 18rpx;
                }
            }
        }

        .list__item::before {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 650rpx;
            height: 1rpx;
            background: rgba(0, 0, 0, .1);
        }

        .list__item:nth-of-type(2) {
            .list__left {
                image {
                    width: 29rpx;
                    height: 25rpx;
                    margin-right: 32rpx;
                }
            }
        }

        .list__item:nth-of-type(3) {
            .list__left {
                image {
                    width: 28rpx;
                    height: 28rpx;
                    margin-right: 33rpx;
                }
            }
        }

        .list__item:nth-of-type(4) {
            .list__left {
                image {
                    width: 28rpx;
                    height: 28rpx;
                    margin-right: 33rpx;
                }
            }
        }

        .list__item:nth-last-of-type(1)::before {
            content: '';
            background: transparent
        }
    }

    .ps__btn {
        margin-top: 20rpx;
        width: 100%;
        height: 100rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.16);
        border-radius: 20rpx;
        text-align: center;
        line-height: 100rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
    }
}
</style>
