419 lines
9.2 KiB
Vue
419 lines
9.2 KiB
Vue
<template>
|
|
<view class="mine-container">
|
|
<!-- 切换身份 -->
|
|
<view class="dl-title">
|
|
<view class="left-search" @click="changeUserType('bz'==nowUserType?'tgz':'bz')">
|
|
<image class="dl-image" src="@/static/mine/change_role.png" mode="aspectFit"></image>
|
|
<text class="dl-text">切换至{{'bz'==nowUserType?'通告主':'博主'}}</text>
|
|
</view>
|
|
</view>
|
|
<!-- 头像信息 -->
|
|
<view class="dl-person-box">
|
|
<view class="user-image-box">
|
|
<view class="dl-image-box">
|
|
<image class="touxiang" src="@/static/images/profile.jpg" mode="aspectFit"></image>
|
|
<image class="sex" src="@/static/mine/sex_girl.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="name-box">
|
|
<text style="margin-bottom: 10rpx;">李林</text>
|
|
<view class="fans-box">
|
|
<image src="@/static/mine/fans.png" mode="aspectFit"></image>
|
|
<view class="fans-num">1000</view>
|
|
</view>
|
|
</view>
|
|
<view class="edit-box">
|
|
编辑 <uni-icons type="right" color="#929292" size="12">{{item.unicode}}</uni-icons>
|
|
</view>
|
|
</view>
|
|
<!-- 会员开通 -->
|
|
<view class="dl-member-box">
|
|
<view class="dl-left">
|
|
<image class="dl-icon" src="@/static/index/zuanshi.png" mode="aspectFit"></image>
|
|
<text>开通会员 解锁更多权益</text>
|
|
</view>
|
|
<view class="dl-right">
|
|
<view class="dl-go-view">立即开通</view>
|
|
</view>
|
|
</view>
|
|
<!-- 积分 -->
|
|
<view class="points-box">
|
|
<view class="item-box">
|
|
<view class="item-text-box">
|
|
<view>积分<text class="red-text">140</text></view>
|
|
<view class="dl-little">赚积分<uni-icons type="right" size="10">{{item.unicode}}</uni-icons></view>
|
|
</view>
|
|
<image src="@/static/index/zuanshi.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="item-box">
|
|
<view class="item-text-box">
|
|
<view>报名<text class="red-text">140</text>次</view>
|
|
<view class="dl-little">去提额<uni-icons type="right" size="10">{{item.unicode}}</uni-icons></view>
|
|
</view>
|
|
<image src="@/static/index/zuanshi.png" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 个人信息和其他信息 -->
|
|
<view class="other-box">
|
|
<view class="box-room">
|
|
<view class="detail-title">个人信息</view>
|
|
<view class="menu-box">
|
|
<view class="menu-item">
|
|
<image src="@/static/mine/zuji.png" mode="aspectFit"></image>
|
|
<view>足迹</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<image src="@/static/mine/shezhi.png" mode="aspectFit"></image>
|
|
<view>设置</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<image src="@/static/mine/dizhi.png" mode="aspectFit"></image>
|
|
<view>地址</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<image src="@/static/mine/mingpian.png" mode="aspectFit"></image>
|
|
<view>名片</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<image src="@/static/mine/tongyong.png" mode="aspectFit"></image>
|
|
<view>通用</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="other-box">
|
|
<view class="box-room">
|
|
<view class="detail-title">其他信息</view>
|
|
<view class="menu-box">
|
|
<view class="menu-item">
|
|
<image src="@/static/mine/xinrenshouce.png" mode="aspectFit"></image>
|
|
<view>新人手册</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<image src="@/static/mine/kefu.png" mode="aspectFit"></image>
|
|
<view>联系客服</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<image src="@/static/mine/gognzhonghao.png" mode="aspectFit"></image>
|
|
<view>公众号</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<image src="@/static/mine/jairushequ.png" mode="aspectFit"></image>
|
|
<view>加入社区</view>
|
|
</view>
|
|
<view class="menu-item">
|
|
<image src="@/static/mine/yijianfankui.png" mode="aspectFit"></image>
|
|
<view>意见反馈</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabBarVue from '@/components/tabbar/tabBar.vue'
|
|
import storage from '@/utils/storage'
|
|
import constant from '@/utils/constant';
|
|
import {
|
|
changeUserType,
|
|
getUserType,
|
|
formatNumberWithUnits,
|
|
calculateTimeDifference
|
|
} from '@/utils/common.js'
|
|
|
|
export default {
|
|
components: {
|
|
tabBarVue,
|
|
},
|
|
data() {
|
|
return {
|
|
//当前用户类型
|
|
nowUserType: null,
|
|
}
|
|
},
|
|
onLoad() {
|
|
nowUserType = getUserType()
|
|
},
|
|
computed: {
|
|
windowHeight() {
|
|
return uni.getSystemInfoSync().windowHeight - 50
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 切换用户身份
|
|
*/
|
|
changeUserType(type) {
|
|
changeUserType(type)
|
|
this.nowUserType = type
|
|
},
|
|
handleToInfo() {
|
|
this.$tab.navigateTo('/pages/mine/info/index')
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mine-container {
|
|
width: 100%;
|
|
color: #363636;
|
|
font-size: 38rpx;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.dl-title {
|
|
width: 100%;
|
|
background-color: white;
|
|
display: flex;
|
|
position: relative;
|
|
z-index: 10;
|
|
font-size: 26rpx;
|
|
padding: 55rpx 10rpx 13rpx 15rpx;
|
|
border-bottom: 1px solid #F4F4F4;
|
|
|
|
|
|
.left-search {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: left;
|
|
position: relative;
|
|
|
|
.dl-image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
|
|
.dl-text {
|
|
padding-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dl-person-box {
|
|
width: 100%;
|
|
background-color: white;
|
|
padding: 20rpx 25rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.user-image-box {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.dl-image-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100rpx;
|
|
position: relative;
|
|
|
|
.touxiang {
|
|
border-radius: 50%;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.sex {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
position: absolute;
|
|
bottom: -5rpx;
|
|
right: 0rpx;
|
|
}
|
|
}
|
|
|
|
.name-box {
|
|
display: flex;
|
|
padding-left: 20rpx;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
align-items: self-start;
|
|
justify-content: center;
|
|
|
|
.fans-box {
|
|
font-size: 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #FEF4EF;
|
|
padding: 5rpx 10rpx;
|
|
color: #FE9860;
|
|
border-radius: 20rpx;
|
|
|
|
image {
|
|
height: 20rpx;
|
|
width: 20rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.fans-num {}
|
|
}
|
|
|
|
.edit-box {
|
|
color: #929292;
|
|
text-align: right;
|
|
padding-right: 20rpx;
|
|
font-size: 22rpx;
|
|
width: 200rpx;
|
|
|
|
}
|
|
}
|
|
|
|
.dl-member-box {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10rpx;
|
|
border-radius: 35rpx;
|
|
justify-content: center;
|
|
height: 120rpx;
|
|
width: 100%;
|
|
background: url('/static/index/member-bg.png');
|
|
background-size: contain;
|
|
background-position: center;
|
|
/* 图片居中显示 */
|
|
background-repeat: no-repeat;
|
|
/* 不重复背景图片 */
|
|
|
|
.dl-left {
|
|
display: flex;
|
|
flex: 1;
|
|
padding-left: 30rpx;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
color: #623109;
|
|
justify-content: left;
|
|
|
|
.dl-icon {
|
|
width: 60rpx;
|
|
height: 56rpx;
|
|
|
|
}
|
|
}
|
|
|
|
.dl-right {
|
|
.dl-go-view {
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #F5D8A5;
|
|
color: #623109;
|
|
padding: 10rpx 25rpx;
|
|
float: right;
|
|
border-radius: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.points-box {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.item-box {
|
|
flex: 1;
|
|
border-radius: 20rpx;
|
|
background-color: #FEF4EF;
|
|
margin: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20rpx;
|
|
|
|
.item-text-box {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.dl-little {
|
|
font-size: 22rpx;
|
|
background-color: white;
|
|
border-radius: 20rpx;
|
|
padding: 5rpx 20rpx;
|
|
margin-top: 15rpx;
|
|
}
|
|
}
|
|
|
|
image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
|
|
.red-text {
|
|
color: #FC1F3E;
|
|
}
|
|
}
|
|
}
|
|
|
|
.other-box {
|
|
background-color: #F6F6F6;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
padding: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.box-room {
|
|
display: flex;
|
|
background-color: white;
|
|
border-radius: 20rpx;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
padding: 25rpx 30rpx;
|
|
align-items: self-start;
|
|
justify-content: center;
|
|
|
|
.detail-title {
|
|
border-left: 8rpx solid #FC1F3E;
|
|
font-weight: bold;
|
|
font-size: 29rpx;
|
|
padding-left: 20rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
}
|
|
|
|
.menu-box {
|
|
border-top: 1rpx solid #F7F7F7;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.menu-item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24rpx;
|
|
margin: 10rpx;
|
|
|
|
image {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |