jiangping
2024-05-08 498e71eb8ce7db34e54f64dc2c83e8edc49c54a3
h5/pages/meeting/mine/mine.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,207 @@
<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>