<template>
    <!-- 个人中心 我的卡片 -->
    <view class="jy-me">
        <!-- 左头像 右昵称 收获地址 -->
        <view class="jy-me-header">
            <image class="jy-me-header-img" :src="userinfo.userPortrait" mode="aspectFill"></image>
            <view class="jy-me-header-na">
                <text class="jy-me-header-name">{{ userinfo.userRealName }}</text>
                <view class="jy-me-header-phone df"
                    @click="checkLink('pages/mine/delivery-address/index', 'navigateTo')">
                    <image :src="dingwei" mode="aspectFill"></image>
                    <text>收货地址</text>
                </view>
            </view>
        </view>
        <view class="jy-me-nav">
            <image @click="goTo('customer_service')" :src="kefu" mode="aspectFill"></image>
            <image @click="goTo('set-up')" :src="shezhi" mode="aspectFill"></image>
        </view>
    </view>

</template>
<script setup>
import { inject } from 'vue'
import kefu from '@/static/mine-kefu.png'
import shezhi from '@/static/mine-shezhi.png'
import dingwei from '@/static/mine-dingwei.png'
import { useStore } from 'vuex'
const { checkLink } = inject('util')
const { userinfo } = useStore().state

const goTo = (path) => {
    checkLink('pages/mine/' + path + '/index', 'navigateTo')
}
</script>
<style scoped lang="scss">
.jy-me {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 0;

    .jy-me-header {
        display: flex;
        align-items: center;

        .jy-me-header-img {
            width: 136rpx;
            height: 136rpx;
            border-radius: 50%;
            background: #D8D8D8;
        }

        .jy-me-header-na {
            height: 136rpx;
            margin-left: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: flex-start;

            .jy-me-header-name {
                font-size: 32rpx;
                color: #333333;
            }

            .jy-me-header-phone {
                display: flex;
                align-items: center;

                text {
                    color: #333333;
                    font-size: 22rpx;
                }

                image {
                    width: 24rpx;
                    height: 24rpx;
                    margin-right: 10rpx;
                }
            }
        }
    }

    .jy-me-nav {
        display: flex;
        justify-content: space-between;

        image {
            width: 40rpx;
            height: 40rpx;
            margin-left: 20rpx;
        }
    }
}
</style>