| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template>
|
| | | <view class="mine">
|
| | | <!-- 头é¨èæ¯å¾ç -->
|
| | | <view class="mine_head"
|
| | | :style="{ height: 'calc(' + height + ' + ' + '236rpx)', backgroundImage: 'url(' + backgroundImage + ')' }">
|
| | | <view :style="{width: '100%', height: statusbarHeight + 'px'}"></view>
|
| | | <view class="mine_head_title" :style="{width: '100%', height: navHeight + 'px'}">
|
| | | <text>æç</text>
|
| | | </view>
|
| | | <view class="mine_head_user">
|
| | | <image :src="userInfo.avatar ? `${userInfo.prefixUrl}${userInfo.avatar}` : avatar" mode="widthFix"></image>
|
| | | <view class="mine_head_user_right">
|
| | | <text>{{userInfo.realname}}</text>
|
| | | <text>欢è¿åæ¥ï½</text>
|
| | | </view>
|
| | | </view>
|
| | | </view>
|
| | | |
| | | <!-- 导èªå
容 -->
|
| | | <view class="mine_list">
|
| | | <view class="mine_list_item" v-for="(item, index) in list" :key="index" @click="jump(item.path)">
|
| | | <view class="left">
|
| | | <image :src="item.icon" mode="widthFix"></image>
|
| | | <text>{{item.name}}</text>
|
| | | </view>
|
| | | <u-icon name="arrow-right" color="#999999" size="20"></u-icon>
|
| | | </view>
|
| | | </view>
|
| | | |
| | | <!-- éåºæé® -->
|
| | | <view class="mine_exit" :style="{ bottom: 'calc(' + '198rpx' + ' + ' + 'env(safe-area-inset-bottom))' }" @click="exit">
|
| | | <text>éåºç»å½</text>
|
| | | </view>
|
| | | |
| | | <!-- åºé¨å¯¼èª -->
|
| | | <Tabbar :current="'2'" color="#fff"></Tabbar>
|
| | | </view>
|
| | | </template>
|
| | |
|
| | | <script>
|
| | | import { mapState, mapMutations } from 'vuex'
|
| | | export default {
|
| | | data() {
|
| | | return {
|
| | | backgroundImage: 'https://dmtest.ahapp.net/file/projects/20230511/7d1f149816e24e68bb2df9011be53990.png',
|
| | | avatar: require('@/static/meeting/common/default_user@2x.png'),
|
| | | list: [
|
| | | { name: 'ä¸ªäººèµæ', path: '/pages/personal/personal', icon: require('@/static/meeting/icon/wd_ic_ziliao@2x.png') },
|
| | | { name: 'æé¢çº¦çä¼è®®å®¤', path: '/pages/myAppointment/myAppointment', icon: require('@/static/meeting/icon/wd_ic_yuyue@2x.png') },
|
| | | { name: 'æç®¡ççä¼è®®å®¤', path: '/pages/manage/manage', icon: require('@/static/meeting/icon/wd_ic_guanli@2x.png') },
|
| | | { name: 'ä¿®æ¹å¯ç ', path: '/pages/changePassword/changePassword', icon: require('@/static/meeting/icon/wd_ic_mima@2x.png') }
|
| | | ]
|
| | | }
|
| | | },
|
| | | computed: {
|
| | | ...mapState(['statusbarHeight', 'navHeight', 'userInfo']),
|
| | | height() {
|
| | | return `${this.statusbarHeight + this.navHeight}px`;
|
| | | }
|
| | | },
|
| | | onLoad() {
|
| | | |
| | | },
|
| | | methods: {
|
| | | ...mapMutations(["empty"]),
|
| | | jump(e) {
|
| | | uni.navigateTo({
|
| | | url: e
|
| | | });
|
| | | },
|
| | | exit() {
|
| | | this.empty()
|
| | | uni.reLaunch({
|
| | | url: '/pages/login/login'
|
| | | });
|
| | | }
|
| | | }
|
| | | }
|
| | | </script>
|
| | |
|
| | | <style>
|
| | | page {
|
| | | background-color: #fff !important;
|
| | | }
|
| | | </style>
|
| | |
|
| | | <style lang="scss" scoped>
|
| | | .mine {
|
| | | width: 100%;
|
| | | background-color: #fff;
|
| | | .mine_head {
|
| | | width: 100%;
|
| | | background-repeat: no-repeat;
|
| | | background-size: 100%;
|
| | | .mine_head_title {
|
| | | padding-left: 30rpx;
|
| | | box-sizing: border-box;
|
| | | display: flex;
|
| | | align-items: center;
|
| | | text {
|
| | | font-size: 36rpx;
|
| | | font-family: PingFangSC-Semibold, PingFang SC;
|
| | | font-weight: 600;
|
| | | color: #FFFFFF;
|
| | | }
|
| | | }
|
| | | .mine_head_user {
|
| | | width: 100%;
|
| | | height: 108rpx;
|
| | | padding: 0 30rpx;
|
| | | box-sizing: border-box;
|
| | | display: flex;
|
| | | align-items: center;
|
| | | margin-top: 32rpx;
|
| | | image {
|
| | | flex-shrink: 0;
|
| | | width: 108rpx;
|
| | | height: 108rpx;
|
| | | margin-right: 26rpx;
|
| | | border-radius: 50%;
|
| | | }
|
| | | .mine_head_user_right {
|
| | | flex: 1;
|
| | | height: 108rpx;
|
| | | display: flex;
|
| | | flex-direction: column;
|
| | | justify-content: space-between;
|
| | | text {
|
| | | &:first-child {
|
| | | font-size: 40rpx;
|
| | | font-family: PingFangSC-Semibold, PingFang SC;
|
| | | font-weight: 600;
|
| | | color: #FFFFFF;
|
| | | }
|
| | | &:last-child {
|
| | | font-size: 24rpx;
|
| | | font-family: PingFangSC-Regular, PingFang SC;
|
| | | font-weight: 400;
|
| | | color: #FFFFFF;
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | | .mine_exit {
|
| | | position: fixed;
|
| | | left: 50%;
|
| | | transform: translate(-50%, 0);
|
| | | width: 200rpx;
|
| | | height: 72rpx;
|
| | | line-height: 72rpx;
|
| | | text-align: center;
|
| | | border-radius: 4rpx;
|
| | | font-size: 28rpx;
|
| | | font-family: PingFangSC-Regular, PingFang SC;
|
| | | font-weight: 400;
|
| | | color: #333333;
|
| | | border: 1rpx solid #999999;
|
| | | }
|
| | | .mine_list {
|
| | | width: 100%;
|
| | | border-radius: 20rpx 20rpx 0rpx 0rpx;
|
| | | position: relative;
|
| | | top: -22rpx;
|
| | | background-color: #fff;
|
| | | padding: 40rpx 30rpx;
|
| | | box-sizing: border-box;
|
| | | display: flex;
|
| | | flex-direction: column;
|
| | | .mine_list_item {
|
| | | width: 100%;
|
| | | height: 100rpx;
|
| | | display: flex;
|
| | | align-items: center;
|
| | | justify-content: space-between;
|
| | | border-bottom: 2rpx solid #E5E5E5;
|
| | | position: relative;
|
| | | overflow: hidden;
|
| | | button {
|
| | | width: 110%;
|
| | | height: 110%;
|
| | | position: absolute;
|
| | | top: -10rpx;
|
| | | left: -10rpx;
|
| | | border: none !important;
|
| | | background-color: rgba(0, 0, 0, 0);
|
| | | z-index: 9;
|
| | | }
|
| | | .left {
|
| | | display: flex;
|
| | | align-items: center;
|
| | | text {
|
| | | font-size: 30rpx;
|
| | | font-family: PingFangSC-Regular, PingFang SC;
|
| | | font-weight: 400;
|
| | | color: #222222;
|
| | | }
|
| | | image {
|
| | | width: 32rpx;
|
| | | height: 32rpx;
|
| | | margin-right: 20rpx;
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|
| | | </style>
|