You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
187 lines
4.4 KiB
187 lines
4.4 KiB
<!-- 页面 ss-p-t-50-->
|
|
<template>
|
|
<view class="ss-user-info-wrap">
|
|
<view class="ss-flex ss-col-center ss-row-between" style="width: 100%;">
|
|
<view class="left-box ss-flex ss-col-center ss-m-l-70">
|
|
<view class="avatar-box ss-m-r-24">
|
|
<image
|
|
class="avatar-img"
|
|
:src="
|
|
isLogin
|
|
? sheep.$url.cdn(userInfo.avatar)
|
|
: sheep.$url.static('/assets/addons/shopro/uniapp/default_avatar.png')
|
|
"
|
|
mode="aspectFill"
|
|
@tap="sheep.$router.go('/pages/user/info')"
|
|
></image>
|
|
</view>
|
|
<view>
|
|
<view class="nickname-box ss-flex ss-col-center">
|
|
<view class="nick-name ss-m-r-20" @tap="sheep.$router.go('/pages/user/info')">
|
|
{{ userInfo?.nickname || nickname }}
|
|
<view class="nick-name-type" v-if="userInfo.agent">{{ userInfo.agent.level_info.name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right-box ss-m-r-70">
|
|
<image src="/static/set-icon.png" class="set-icon-iamge" @tap="sheep.$router.go('/pages/public/setting')"/>
|
|
<!-- <button class="ss-reset-button" @tap="showShareModal">
|
|
<text class="sicon-qrcode"></text>
|
|
</button> -->
|
|
</view>
|
|
</view>
|
|
|
|
<!--<view
|
|
class="bind-mobile-box ss-flex ss-row-between ss-col-center"
|
|
v-if="isLogin && !userInfo.verification?.mobile"
|
|
>
|
|
<view class="ss-flex">
|
|
<text class="cicon-mobile-o"></text>
|
|
<view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>
|
|
</view>
|
|
<button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
|
|
</view>-->
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
/**
|
|
* 用户卡片
|
|
*
|
|
* @property {Number} leftSpace - 容器左间距
|
|
* @property {Number} rightSpace - 容器右间距
|
|
*
|
|
* @property {String} avatar - 头像
|
|
* @property {String} nickname - 昵称
|
|
* @property {String} vip - 等级
|
|
* @property {String} collectNum - 收藏数
|
|
* @property {String} likeNum - 点赞数
|
|
*
|
|
*
|
|
*/
|
|
import { computed, reactive } from 'vue';
|
|
import sheep from '@/sheep';
|
|
import { showShareModal, showAuthModal } from '@/sheep/hooks/useModal';
|
|
|
|
// 用户信息
|
|
const userInfo = computed(() => sheep.$store('user').userInfo);
|
|
|
|
// 是否登录
|
|
const isLogin = computed(() => sheep.$store('user').isLogin);
|
|
// 接收参数
|
|
const props = defineProps({
|
|
background: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
// 头像
|
|
avatar: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
nickname: {
|
|
type: String,
|
|
default: '请先登录',
|
|
},
|
|
vip: {
|
|
type: [String, Number],
|
|
default: '1',
|
|
},
|
|
collectNum: {
|
|
type: [String, Number],
|
|
default: '1',
|
|
},
|
|
likeNum: {
|
|
type: [String, Number],
|
|
default: '1',
|
|
},
|
|
});
|
|
|
|
function onBind() {
|
|
showAuthModal('changeMobile');
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.ss-user-info-wrap {
|
|
box-sizing: border-box;
|
|
background: rgba(223, 247, 240, 0.8);
|
|
height: 276rpx;
|
|
display: flex;
|
|
|
|
.avatar-box {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
|
|
.avatar-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.nick-name {
|
|
font-size: 40rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: normal;
|
|
}
|
|
|
|
.nick-name-type {
|
|
width: 100rpx;
|
|
font-weight: 400;
|
|
font-size: 18rpx;
|
|
color: #FFFFFF;
|
|
background: var(--ui-BG-Main);
|
|
padding: 5rpx 10rpx;
|
|
border-radius: 15rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.vip-img {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
|
|
.sicon-qrcode {
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.set-icon-iamge {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
}
|
|
}
|
|
|
|
.bind-mobile-box {
|
|
width: 100%;
|
|
height: 84rpx;
|
|
padding: 0 34rpx 0 44rpx;
|
|
box-sizing: border-box;
|
|
background: #ffffff;
|
|
box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);
|
|
|
|
.cicon-mobile-o {
|
|
font-size: 30rpx;
|
|
color: #ff690d;
|
|
}
|
|
|
|
.mobile-title {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #ff690d;
|
|
}
|
|
|
|
.bind-btn {
|
|
width: 100rpx;
|
|
height: 50rpx;
|
|
background: #ff6100;
|
|
border-radius: 25rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
</style>
|
|
|