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.
282 lines
7.6 KiB
282 lines
7.6 KiB
<template>
|
|
<view class="content">
|
|
<view class="top-area">
|
|
<view class="reset">
|
|
<image class="bg" src="/static/imgs/mine/mine-top-bg.png"></image>
|
|
<view class="operation-area">
|
|
<view class="user">
|
|
<image class="avatar" :src="userInfo.avatar || '/static/imgs/mine/user-avatar.png'"></image>
|
|
<view v-if="!hasLogin" @click="go2('login')">
|
|
<view>
|
|
<text style="font-size: 40rpx; color: #fff; font-weight: 600">点击登录</text>
|
|
</view>
|
|
<view style="margin-top: 10rpx">
|
|
<text style="font-size: 26rpx; color: #fff; font-weight: 400">登录解锁更全功能</text>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="user__name">
|
|
<text class="name">{{ userInfo.name }}</text>
|
|
<image v-if="userInfo.fddEnterpriseStatus === fddStatus.UNCERTIFIED" class="image" src="/static/imgs/mine/certified-icon.png"></image>
|
|
<image v-else class="image" src="/static/imgs/mine/non-certified-icon.png"></image>
|
|
</view>
|
|
<view style="margin-top: 10rpx">
|
|
<text style="font-size: 26rpx; color: #fff; font-weight: 400; word-break: break-all">{{ userInfo.supplierName }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="operation">
|
|
<view class="box">
|
|
<view class="container" @click="go2('message')">
|
|
<image class="icon" src="/static/imgs/mine/msg-icon.png"></image>
|
|
<view v-if="messageNum > 0" class="number">
|
|
<text class="text">{{ messageNum }}</text>
|
|
</view>
|
|
</view>
|
|
<image class="icon" @click="go2('setting')" src="/static/imgs/mine/setting-icon.png"></image>
|
|
</view>
|
|
<view class="box">
|
|
<text style="font-size: 24rpx; color: #fff; flex-shrink: 0">切换账号</text>
|
|
<image class="icon" style="width: 24rpx; height: 24rpx; margin-left: 8rpx" src="/static/imgs/mine/toggle-icon.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="vip-area">
|
|
<view class="vip-content">
|
|
<view class="left">
|
|
<image class="icon" src="/static/imgs/mine/vip-icon.png"></image>
|
|
<text class="text">VIP会员</text>
|
|
</view>
|
|
<text class="center">立即开通会员 尊享特权</text>
|
|
<view class="right">
|
|
<text class="text">开通会员</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view @click="logout">mine</view>
|
|
<view @click="go2('client-credit')">client-credit</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { exit, go2 } from '@/utils/hook.js'
|
|
import { fddEnterpriseStatus } from '@/enums/index.js'
|
|
import { getBaseInfo } from '@/apis/commonApi.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {
|
|
avatar: this.$store.state.userInfo.avatar,
|
|
name: this.$store.state.userInfo.name,
|
|
supplierName: this.$store.state.supplierInfo.name,
|
|
fddEnterpriseStatus: this.$store.state.supplierInfo.fddEnterpriseStatus
|
|
},
|
|
fddStatus: Object.freeze(fddEnterpriseStatus),
|
|
messageNum: 0,
|
|
companyNum: 0
|
|
}
|
|
},
|
|
methods: {
|
|
logout() {
|
|
exit()
|
|
},
|
|
go2
|
|
},
|
|
computed: {
|
|
hasLogin() {
|
|
return this.$store.state.qnToken != ''
|
|
}
|
|
},
|
|
onShow() {
|
|
getBaseInfo().then((res) => {
|
|
if (res) {
|
|
this.companyNum = res.enterpriseList.length
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.top-area {
|
|
width: 750rpx;
|
|
height: 380rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
border-radius: 0 0 350px 350px;
|
|
transform: scaleX(2.5);
|
|
.reset {
|
|
width: 750rpx;
|
|
height: 380rpx;
|
|
transform: scaleX(0.4); // 将比例缩至正常
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.bg {
|
|
width: 750rpx;
|
|
height: 380rpx;
|
|
z-index: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
.operation-area {
|
|
width: 750rpx;
|
|
margin: 96rpx 0 36rpx;
|
|
padding: 0 32rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
.user {
|
|
z-index: 5;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
.avatar {
|
|
width: 156rpx;
|
|
height: 156rpx;
|
|
border-radius: 50%;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
margin-right: 16rpx;
|
|
}
|
|
.user__name {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
.name {
|
|
font-size: 40rpx;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
margin-right: 16rpx;
|
|
word-break: break-all;
|
|
}
|
|
.image {
|
|
width: 100rpx;
|
|
height: 32rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
.operation {
|
|
z-index: 5;
|
|
margin-top: 18rpx;
|
|
margin-left: 20rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
.box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
margin-bottom: 36rpx;
|
|
.container {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
margin-right: 26rpx;
|
|
position: relative;
|
|
.number {
|
|
position: absolute;
|
|
top: -12rpx;
|
|
right: -12rpx;
|
|
// width:32rpx;
|
|
// height: 32rpx;
|
|
padding: 6rpx 10rpx;
|
|
background-color: #f5222d;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.text {
|
|
font-size: 20rpx;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
.icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.vip-area {
|
|
z-index: 5;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 686rpx;
|
|
height: 90rpx;
|
|
margin: 0 32rpx;
|
|
background-image: linear-gradient(90deg, #333333 0%, #696c6b 99%);
|
|
border-radius: 10rpx;
|
|
.vip-content {
|
|
width: 686rpx;
|
|
padding: 18rpx 24rpx 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
.icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.text {
|
|
font-size: 26rpx;
|
|
color: #dbc189;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.center {
|
|
font-size: 24rpx;
|
|
color: #e7e1be;
|
|
font-weight: 600;
|
|
}
|
|
.right {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 128rpx;
|
|
height: 44rpx;
|
|
border-radius: 14rpx;
|
|
background-image: linear-gradient(90deg, #f4edce 1%, #f3d99e 98%);
|
|
.text {
|
|
font-size: 24rpx;
|
|
color: #443015;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|