jszjdy-regulatory-app/pages/mine/index.vue

<template>
  <view class="container">
    <view class="banner">
      <view class="bg">
        <image
          src="/static/my/bannerbg.png"
          style="width: 100%; height: 377upx"
        />
      </view>

      <view class="user">
        <view class="tx">
          <image
            src="/static/my/tx.png"
            style="width: 140upx; height: 140upx"
          />
        </view>
        <view class="info">
          <view class="name">{{ userInfo.NAME }}</view>
          <view class="text"> {{ userInfo.USERNAME }} </view>
        </view>
      </view>
    </view>

    <view class="small_banner">
      <view class="info">
        <view class="big">
          防范事故
          <text class="fcr">保障安全</text>
        </view>
        <view class="text">治理隐患，健康你我他</view>
      </view>
    </view>

    <view class="mainer">
      <!--      <view-->
      <!--        class="wrap"-->
      <!--        @click="-->
      <!--          $u.route({-->
      <!--            url: '/pages/mine/about_us',-->
      <!--          })-->
      <!--        "-->
      <!--      >-->
      <!--        <view class="info">-->
      <!--          <view class="img">-->
      <!--            <image-->
      <!--              src="/static/my/i1.png"-->
      <!--              style="width: 36upx; height: 36upx"-->
      <!--            />-->
      <!--          </view>-->
      <!--          <view>关于我们</view>-->
      <!--        </view>-->
      <!--        <u-icon name="arrow-right"></u-icon>-->
      <!--      </view>-->

      <view
        class="wrap"
        @click="
          $u.route({
            url: '/pages/message/list',
          })
        "
      >
        <view class="info">
          <view class="img">
            <image
              src="/static/my/i2.png"
              style="width: 36upx; height: 36upx"
            />
          </view>
          <view>通知提醒</view>
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>

      <view
        class="wrap"
        @click="
          $u.route({
            url: '/pages/mine/change_password',
          })
        "
      >
        <view class="info">
          <view class="img">
            <image
              src="/static/my/i3.png"
              style="width: 36upx; height: 36upx"
            />
          </view>
          <view>修改密码</view>
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <view class="wrap" @click="$refs.updateVersionRef.fnUpdateVersion(true)">
        <view class="info">
          <view class="img">
            <image
              src="/static/my/i5.png"
              style="width: 36upx; height: 36upx"
            />
          </view>
          <view>版本更新</view>
        </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
    </view>
    <view class="layout_btner" @click="logOut">
      <view class="wrap">
        <view class="info">
          <view class="img">
            <image
              src="/static/my/i4.png"
              style="width: 36upx; height: 36upx"
            />
          </view>
          <view>退出登录</view>
        </view>
      </view>
    </view>
    <update-version ref="updateVersionRef" toast />
  </view>
</template>

<script>
import updateVersion from "@/components/update_version/index.vue";

export default {
  components: {
    updateVersion,
  },
  data() {
    return {};
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo;
    },
  },
  methods: {
    logOut() {
      uni.showModal({
        title: "提示",
        content: "确定退出登录吗？",
        success: (result) => {
          if (result.confirm) {
            const userInfo = {};
            for (const userInfoKey in this.userInfo) {
              if (
                Object.prototype.hasOwnProperty.call(this.userInfo, userInfoKey)
              ) {
                userInfo[userInfoKey] = "";
              }
            }
            this.$store.dispatch("setUserInfo", userInfo);
            uni.redirectTo({
              url: "/pages/login/login",
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100vh - 100upx);
  background: #fafafa;

  .banner {
    width: 100%;
    height: 377upx;
    position: relative;

    .bg {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      width: 100%;
      height: 377upx;
    }

    .user {
      position: absolute;
      z-index: 99;
      width: 90%;
      left: 50%;
      bottom: -40upx;
      transform: translateX(-50%);
      background: #ffffff;
      border-radius: 20upx;
      box-shadow: 0 0 20upx #eeeeee;
      padding: 20upx;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .tx {
        width: 140upx;
        height: 140upx;

        image {
          border-radius: 100%;
        }
      }

      .info {
        flex: 1;
        padding-left: 20upx;

        .name {
          font-size: 32upx;
          font-weight: bold;
        }

        .text {
          color: #999999;
          margin-top: 10upx;
        }
      }
    }
  }

  .small_banner {
    margin-top: 70upx;
    width: 90%;
    height: 185upx;
    background: url("../../static/my/bg1.png");
    background-size: 100% 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    .info {
      padding: 40upx 20upx;
      display: flex;
      flex-direction: column;
      align-content: center;

      .big {
        font-size: 36upx;
        color: #3d4054;
        font-weight: bold;

        .fcr {
          color: #ff871c;
          margin-left: 10upx;
        }
      }

      .text {
        color: #999999;
        margin-top: 10upx;
      }
    }
  }

  .mainer {
    width: 100%;
    background: #ffffff;
    padding: 20upx 40upx;
    margin-top: 20upx;
    box-sizing: border-box;

    .wrap {
      width: 100%;
      display: flex;
      justify-content: space-between;
      line-height: 3;

      .info {
        flex-basis: 90%;
        display: flex;
        align-items: center;

        .img {
          margin-right: 20upx;
          margin-top: 10upx;
        }
      }

      .more {
        flex-basis: 10%;
      }
    }
  }

  .layout_btner {
    width: 100%;
    background: #ffffff;
    padding: 0upx 40upx;
    margin-top: 20upx;
    box-sizing: border-box;

    .wrap {
      width: 100%;
      display: flex;
      justify-content: space-between;
      line-height: 3;

      .info {
        flex-basis: 90%;
        display: flex;
        align-items: center;

        .img {
          margin-right: 20upx;
          margin-top: 10upx;
        }
      }

      .more {
        flex-basis: 10%;
      }
    }
  }
}
</style>