yixing_zc_wx/pages/mine/mine.vue

<template>
  <view>
    <img src="../../static/mine/banner.png" class="banner" />
    <div class="info">
      <div class="headerandwelcome">
        <img src="../../static/mine/head.png" alt="" class="header" />
        <div class="weltxt">
          {{ getUserLocalStorageInfo.user.truename }}，欢迎您！
        </div>
      </div>
      <div class="labelpage">
        <div class="labelpage_row">
          <img height="44rpx" src="../../static/mine/versionicon.png" alt="" />
          <div class="labelpage_text">
            <div class="labelpage_name">当前版本号</div>
            <div class="labelpage_value">v1.0.1</div>
            <div class="border"></div>
          </div>
        </div>
        <div
          class="labelpage_row"
          style="margin-top: 48rpx"
          @click="editPassWord()"
        >
          <img height="44rpx" src="../../static/mine/editpassword.png" alt="" />
          <div class="labelpage_text">
            <div class="labelpage_name">密码修改</div>
            <div class="labelpage_value">
              <img
                src="../../static/mine/youjiantou.png"
                style="width: 44rpx; height: 44rpx"
                alt=""
              />
            </div>
            <div class="border"></div>
          </div>
        </div>
        <div
          class="labelpage_row"
          style="margin-top: 48rpx"
          @click="outLogin()"
        >
          <img height="44rpx" src="../../static/mine/outicon.png" alt="" />
          <div class="labelpage_text">
            <div class="labelpage_name">退出账号</div>
            <div class="labelpage_value">
              <img
                src="../../static/mine/youjiantou.png"
                style="width: 44rpx; height: 44rpx"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>
<script>
import { getUserInfo, getUserLocalStorageInfo } from "@/js_sdk/http";
export default {
  data() {
    return {
      userInfo: {},
      getUserLocalStorageInfo: getUserLocalStorageInfo(),
    };
  },
  onLoad() {
    //option为object类型，会序列化上个页面传递的参数
    // this.getUserInfo(); //打印出上个页面传递的参数。
  },

  methods: {
    outLogin() {
      wx.showModal({
        title: "提示！",
        content: "是否确认退出登录？",
        success: function (res) {
          if (res.confirm) {
            uni.clearStorageSync();
            uni.reLaunch({
              url: "/pages/login/login",
            });
          }
        },
      });
    },
    editPassWord() {
      uni.navigateTo({
        url: "/pages/subPackages/password/index",
      });
    },
    async getUserInfo() {
      let data = await getUserInfo();
      this.userInfo = data.data;
    },
  },
};
</script>
<style scoped lang="scss">
.banner {
  width: 100%;
  height: 424rpx;
  position: absolute;
  z-index: 1;
}
.headerandwelcome {
  margin-bottom: 60rpx;
  height: 120rpx;
  width: 100%;
}
.info {
  position: absolute;
  width: calc(100% - 64rpx);
  margin: 60rpx 32rpx 0 32rpx;
  z-index: 2;
}
.header {
  height: 120rpx;
  width: 120rpx;
  margin-left: 15rpx;
  border-radius: 50%;
  float: left;
}
.weltxt {
  height: 120rpx;
  line-height: 120rpx;
  color: #ffffff;
  margin-left: 32rpx;
  float: left;
}
.labelpage {
  width: calc(100% - 96rpx);
  height: 308rpx;
  padding: 96rpx 48rpx;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  background: #ffffff;
}
.labelpage_row {
  height: 83rpx;
  width: 100%;
  img {
    height: 44rpx;
    width: 44rpx;
    float: left;
    margin-right: 12rpx;
  }
  .labelpage_text {
    width: calc(100% - 64rpx);
    height: 44rpx;
    line-height: 44rpx;
    float: left;
  }
  .labelpage_name {
    height: 44rpx;
    line-height: 44rpx;
    float: left;
    font-size: 28rpx;
    color: #081640;
    font-weight: 400;
  }
  .labelpage_value {
    height: 44rpx;
    line-height: 44rpx;
    float: right;
    font-size: 28rpx;
    color: #1d18bc;
    font-weight: 400;
  }
  .border {
    margin-top: 48rpx;
    width: 100%;
    height: 1rpx;
    border-bottom: 2rpx solid #e6e6e6;
    float: left;
  }
}
</style>