98 lines
2.6 KiB
Vue
98 lines
2.6 KiB
Vue
|
<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>
|