bigdata_WX/pages/my/index/index.vue

<template>
  <view class="subject">
    <view style="width: 100%; position: relative" class="subject-top">
      <view class="personal" v-if="isLogin">
        <view class="personal_left">
          <image :src="userinfos.image" mode="" @error="error"></image>
        </view>
        <view class="personal_center">
          <p>
            {{ usernames }}
            <view @click="userinfo" class="userinfo">
              <u-icon
                name="edit-pen"
                class="edit-pen"
              ></u-icon>
            </view>
          </p>
          <p>{{ userinfos.email || userinfos.mobile || '' }}</p>
        </view>
        <!-- <view class="personal_right" @click="userinfo">
          <uni-icons
            type="compose"
            style="margin-right: 10rpx"
            color="#FFFFFF"
          ></uni-icons>
          编辑
        </view> -->
      </view>
    </view>
    <view class="menu">
      <view>
        <view class="AboutUs" @click="about">
          <image :src="personIcon" mode="" class="icon_left"></image>
          关于我们
          <uni-icons type="arrowright" class="icon_right"></uni-icons>
        </view>
      </view>
      <view style="background-color: #ffffff" v-if="isLogin">
        <view class="quit" @click="outto">
          <image :src="logoutIcon" mode="" class="icon_left"></image>
          退出登录
          <uni-icons type="arrowright" class="icon_right"></uni-icons>
        </view>
      </view>
      <view style="background-color: #ffffff" v-else>
        <view class="quit" @click="handleLogin">
          <image :src="logoutIcon" mode="" class="icon_left"></image>
          去登录
          <uni-icons type="arrowright" class="icon_right"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import personIcon from '../../assets/personIcon.png';
import logoutIcon from '../../assets/logout.png';

export default {
  data() {
    return {
      personIcon,
      logoutIcon,
      usernames: '',
      userinfos: {},
      isLogin: false,
    };
  },
  methods: {
    //user.login.user_login_info
    //home.homes.personal_center
    async getUserlogin() {
      const session_key = uni.getStorageSync('session_key');
      this.isLogin = !!session_key;
      if (!this.isLogin) {
        return;
      }

      const res = await this.$myRequest({
        url: '/api/api_gateway?method=user.login.user_login_info',
        method: 'POST',
      });
      console.log(res.children);
      this.usernames = res.username;
      this.getUsermsg(this.usernames);
      uni.setStorage({
        key: 'jurisdiction',
        data: JSON.stringify(res.children),
      });
    },
    async getuserinfonew() {
      const res = await this.$myRequest({
        url: '/api/v2/theme/home/info/',
      });
      if (res.items && res.items.logo_url) {
        this.userinfos.image = res.items.logo_url;
      } else {
        this.userinfos.image = '';
      }
    },
    async getUsermsg(user) {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=home.homes.personal_center',
        data: {
          username: user,
        },
      });
      console.log(res);
      res.image = '';
      this.userinfos = res;
      this.getuserinfonew();
    }, //user.login.logout_user
    async getlogout() {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=user.login.logout_user',
      });
    },
    handleLogin() {
      console.log('---------------------- login');
      uni.navigateTo({
        url: '/pages/login/login',
      });
    },
    about() {
      uni.navigateTo({
        url: '../about/about',
      });
    },
    error(e) {
      this.userinfos.image =
        '../../../static/images/my/f856c0422304bdd24a008f4d75b76e3.png';
    },
    // feedback(){
    // 	uni.navigateTo({
    // 		url:"../feedback/feedback"
    // 	})
    // },
    userinfo() {
      uni.navigateTo({
        url: '../user-info/user-info?data=' + JSON.stringify(this.userinfos),
      });
    },
    outto() {
      uni.showModal({
        title: '提示',
        content: '是否退出登录',
        success: (res) => {
          if (res.confirm) {
            this.getlogout();
            uni.removeStorage({
              key: 'session_key',
            });
            uni.reLaunch({
              url: '../../login/login',
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        },
      });
    },
  },
  onLoad() {
    this.getUserlogin();
  },
  onShow() {
    this.getUserlogin();
    this.$forceUpdate();
  },
};
</script>
<style lang="scss">
.subject {
  width: 100%;
  height: 100vh;
  background: #F5F6FA;
  .subject-top{
    height: 450rpx;
    background-image: url('https://s3.hnyfwlw.com/webstaticimg/bigdata_app/image/personBg.png');
    background-size: cover;
  }
}

.personal {
  width: 90%;
  margin: 0 auto;
  display: flex;
  padding: 20rpx 0 40rpx;
  padding-top: 136rpx;
  box-sizing: border-box;
  position: relative;
  .personal_left {
    width: 120rpx;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 30rpx;
    border: 4rpx solid #ffffff;
    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
    }
  }

  .personal_center {
    padding-top: 20rpx;
    color:#ffffff;

    p:nth-child(1) {
      width: 100%;
      font-size: 34rpx;
      font-weight: 700;
      margin-bottom: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .userinfo{
      width: 40rpx;
      height: 40rpx;
      border-radius: 16rpx;
      color:#ffffff;
      font-size: 24rpx;
      background: #00000014;
      margin-left: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .edit-pen{
        font-size: 20rpx;
      }
    }
    p:nth-child(2) {
      font-size: 24rpx;
    }
  }

  .personal_right {
    width: 150rpx;
    background-color: #55c87b;
    height: 60rpx;
    text-align: center;
    border-radius: 30rpx;
    line-height: 60rpx;
    color: #ffffff;
    position: absolute;
    right: 30rpx;
  }
}
.menu{
  margin: 0 32rpx;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  top: -140rpx;
}
.AboutUs,
.quit,
.opinion {
  display:flex;
  align-items: center;
  width: 90%;
  height: 100rpx;
  line-height: 100rpx;
  margin: 0rpx auto;
  position: relative;
  padding-left: 20rpx;
  font-size: 28rpx;

  .icon_left {
    margin-right: 20rpx;
    color: #55c87b !important;
    width: 40rpx;
    height: 40rpx;
  }

  .icon_right {
    position: absolute;
    top: 0;
    right: 10rpx;
    font-size: 32rpx !important;
  }
}

.opinion {
  margin: 0 auto;
  border-top: 2rpx solid #eaeaea;
}
</style>