bigDataApp/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>
          {{$isneutral?"关于我们":"关于更新"}}
					<p class="update" v-if="updateTF">NEW</p>
          <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/personIcon1.png';
import logoutIcon from '../../assets/logout.png';
	export default {
		data() {
			return {
				personIcon,
				logoutIcon,
				isLogin: false,
				usernames: '',
				userinfos: {},
				versions: "",
				updateTF: false
			}
		},
		methods: {
			handleLogin() {
			  console.log('---------------------- login');
			  uni.navigateTo({
			    url: '/pages/login/login',
			  });
			},
			async getEquipList() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=home.homes.app_version_record',
					data: {
						ret: "first"
					}
				})
				console.log(res)
				// this.appName = res[0].app_name
				this.versions = Number(res[0].app_num.match(/\d+/g).join(""))
				var ids = Number(plus.runtime.version.match(/\d+/g).join(""))
				if (this.versions > ids) {
					this.updateTF = true
				} else {
					this.updateTF = false
				}
			},
			//user.login.user_login_info
			//home.homes.personal_center
			async getUserlogin() {
				const session_key = uni.getStorageSync('session_key');
				this.isLogin = !!session_key;
				console.log(this.isLogin);
				if (!this.isLogin) {
				  return;
				}
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=user.login.user_login_info',
				})
				console.log(res.children)
				this.usernames = res.username
				this.getUsermsg(this.usernames)
				uni.setStorage({
					key: 'jurisdiction',
					data: JSON.stringify(res.children),
					success: () => {

					}
				})
			},
			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
					}
				})
      	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',
				})
			},
			about() {
				uni.navigateTo({
					url: "../about/about"
				})
			},
			imageError(e) {
				if (e) {
					this.userinfos.image = "../../../static/images/my/user.png"
				}
			},
			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()
			this.getEquipList()
		},
		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>