idea_fire_safety_wx/pages/mine/mine.vue

<template>
  <view class="mine">
    <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">
          <span style="font-size: 48rpx; font-weight: 600">欢迎您！</span>
          <span style="font-size: 32rpx; margin-top: 5rpx">{{
            getUserLocalStorageInfo.username
              ? getUserLocalStorageInfo.username
              : "游客"
          }}</span>
        </div>
      </div>

      <div class="labelpage">
        <div class="labelpage_row" @click="toMineInfo">
          <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 class="labelpage_row">
          <div class="labelpage_text">
            <div class="labelpage_name">当前版本号</div>
            <div class="labelpage_value">v1.0.1</div>
          </div>
        </div>
        <div class="labelpage_row" @click="editPassWord()">
          <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 class="labelpage_row" @click="changeUserType">
          <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 class="labelpage_row" @click="outLogin()">
          <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>
    <van-popup
      :show="show"
      @close="onClose"
      closeable
      position="bottom"
      custom-style="height:720rpx;"
    >
      <div class="userType">用户类型</div>
      <div class="choose">
        <div
          @click="chooseIdentity(1)"
          :class="isSelect === 1 ? 'select isselect' : 'select'"
        >
          <div>
            <img
              class="headerImg"
              src="./chooseIdentityImg/header1.png"
              alt=""
            />
          </div>
          <div class="name">企业上报</div>
          <div class="huan"><van-icon name="success" /></div>
        </div>
        <div
          @click="chooseIdentity(2)"
          :class="isSelect === 2 ? 'select isselect' : 'select'"
          class="select"
          style="margin-top: 20px"
        >
          <div>
            <img
              class="headerImg"
              src="./chooseIdentityImg/header2.png"
              alt=""
            />
          </div>
          <div class="name">属地核查</div>
          <div class="huan"><van-icon name="success" /></div>
        </div>
        <div
          @click="chooseIdentity(3)"
          :class="isSelect === 3 ? 'select isselect' : 'select'"
          class="select"
          style="margin-top: 20px"
        >
          <div>
            <img
              class="headerImg"
              src="./chooseIdentityImg/header3.png"
              alt=""
            />
          </div>
          <div class="name">部门检查</div>
          <div class="huan"><van-icon name="success" /></div>
        </div>
      </div>
      <div class="btnbox">
        <van-button class="btn" @click="goLogin">确认</van-button>
      </div>
      <!-- <van-picker :columns="columns" @cancel="onCancel" @confirm="onConfirm" show-toolbar/> -->
    </van-popup>
  </view>
</template>
<script>
import {
  getUserInfo,
  getUserLocalStorageInfo,
  switchCommonUser,
} from "@/js_sdk/http";
export default {
  data() {
    return {
      userInfo: {},
      getUserLocalStorageInfo: getUserLocalStorageInfo(),
      userType: true,
      show: false,
      isSelect: 1,
      columns: ["普通用户", "企业用户", "管理用户"],
      menuList: [
        {
          name: "我的收藏",
          img: require("./image/sc.png"),
          isNew: false,
          path: "/myCollection",
        },
        {
          name: "我的活动",
          img: require("./image/hd.png"),
          isNew: false,
          path: "/myActivities",
        },
        {
          name: "我的订单",
          img: require("./image/dd.png"),
          isNew: false,
          path: "/myOrder",
        },
        {
          name: "我的反馈",
          img: require("./image/fk.png"),
          isNew: false,
          path: "/feedback",
        },
      ],
    };
  },
  onLoad() {
    //option为object类型，会序列化上个页面传递的参数
    // this.getUserInfo(); //打印出上个页面传递的参数。
  },

  methods: {
    onClose() {
      console.log(123);
      this.show = false;
    },
    chooseIdentity(e) {
      this.isSelect = e;
    },
    toPath(item) {
      if (item.path) {
        uni.navigateTo({
          url: "/pages/subPackages/minePages" + item.path,
        });
      }
    },
    toMineInfo() {
      uni.navigateTo({
        url: "/pages/subPackages/minePages/mineInfo",
      });
    },
    toMineMsg() {
      uni.navigateTo({
        url: "/pages/subPackages/minePages/mineMessage",
      });
    },
    onCancel() {
      this.show = false;
    },
    onConfirm(e) {
      if (e.detail.value !== "普通用户") {
        uni.navigateTo({
          url: "/pages/login2/login?loginType=" + e.detail.value,
          success: function (e) {
            // uni.$emit('userType', 'OK')
          },
        });
      } else {
        let data = {
          id: this.getUserLocalStorageInfo.id,
        };
        switchCommonUser(data).then((e) => {
          if (e.errno === 0) {
            delete this.getUserLocalStorageInfo.userId;
            this.getUserLocalStorageInfo.userType = "3";
            this.getUserLocalStorageInfo.username = "";
            console.log(this.getUserLocalStorageInfo);
            wx.setStorageSync(
              "USERINFO",
              JSON.stringify(this.getUserLocalStorageInfo)
            );
          }
          // console.log(e.data.user);
          // uni.clearStorageSync();
        });
      }
      this.show = false;
    },
    changeUserType() {
      this.show = true;
      // uni.navigateTo({
      //   url: "/pages/login2/login",
      //   success: function (e) {
      //     // uni.$emit('userType', 'OK')
      //   },
      // });
    },
    outLogin() {
      wx.showModal({
        title: "提示！",
        content: "是否确认退出登录？",
        success: function (res) {
          if (res.confirm) {
            uni.clearStorageSync();
            uni.reLaunch({
              url: "/pages/login/login",
            });
          }
        },
      });
    },
    editPassWord() {
      uni.navigateBack();
    },
    async getUserInfo() {
      let data = await getUserInfo();
      this.userInfo = data.data;
    },
  },
};
</script>
<style lang="scss">
.mine {
  .userType {
    font-weight: bold;
    font-size: 36rpx;
    color: #333333;
    margin-top: 24rpx;
    margin-left: 36rpx;
    margin-bottom: 48rpx;
  }
  .btnbox {
    margin-top: 30rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    .btn {
      button {
        width: 594rpx;
        height: 96rpx;
        background: #4c7af3;
        border-radius: 48rpx 48rpx 48rpx 48rpx;
        text-align: center;
        line-height: 96rpx;
        color: white;
      }

      text-align: center;
    }
  }
  .huan {
    width: 40rpx;
    height: 40rpx;
    border: 4rpx solid #c0c2c3;
    background: #ffffff;
    color: #c0c2c3;
    border-radius: 50%;
    text-align: center;
    line-height: 40rpx;
  }
  .choose {
    // position: absolute;
    // top: 800rpx;

    width: 100%;
    .headerImg {
      height: 88rpx;
      width: 88rpx;
    }
    .select {
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 654rpx;
      height: 128rpx;
      background: #f5f6f8;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 20rpx 32rpx;
      box-sizing: border-box;
    }
    .name {
      margin-right: 160px;
    }
  }
  .isselect {
    border: 2rpx solid #4c7af3;
    .huan {
      background: #4c7af3;
      color: white;
    }
  }
}
.banner {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.headerandwelcome {
  margin-bottom: 52rpx;
  height: 120rpx;
  width: 100%;
  box-sizing: border-box;
  padding-left: 60rpx;
}
.info {
  position: absolute;
  //width: calc(100% - 64rpx);
  margin: auto;
  margin-top: 60rpx;
  z-index: 2;
}
.header {
  height: 120rpx;
  width: 120rpx;
  //margin-left: 15rpx;
  border-radius: 50%;
  float: left;
}
.weltxt {
  height: 120rpx;
  color: #ffffff;
  margin-left: 32rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  float: left;
  color: black;
}
.cardBox {
  width: 686rpx;
  height: 100rpx;
  box-sizing: border-box;
  background: rgba(20, 33, 76, 1);
  border-radius: 16rpx 16rpx 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  margin-left: 32rpx;
  .rightIcon {
    width: 36rpx;
    height: 36rpx;
  }
  .cardLeft {
    display: flex;
    align-items: center;
  }
}
.labelpage {
  width: 686rpx;
  margin-left: 32rpx;
  box-sizing: border-box;
  padding: 32rpx;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  background: #ffffff;
}
.labelpage_row {
  display: flex;
  align-items: center;
  height: 112rpx;
  width: 100%;
  width: 100%;
  border-bottom: 2rpx solid #e6e6e6;
  img {
    height: 44rpx;
    width: 44rpx;
    float: left;
  }
  .labelpage_text {
    width: 100%;
    height: 44rpx;
    line-height: 44rpx;
    float: left;
  }
  .labelpage_name {
    height: 44rpx;
    line-height: 44rpx;
    float: left;
    font-size: 34rpx;
    color: #081640;
    font-weight: 400;
  }
  .labelpage_value {
    height: 44rpx;
    line-height: 44rpx;
    float: right;
    font-size: 34rpx;
    color: #666666;
    font-weight: 400;
  }
  .border {
    margin-top: 48rpx;
    width: 100%;
    height: 1rpx;
    border-bottom: 2rpx solid #e6e6e6;
    float: left;
  }
}
.mineMenuBody {
  width: 686rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  background: white;
  padding: 24rpx 0;
  margin: 24rpx 32rpx;
  border-radius: 2vw;
  .mineMenuItem {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    .redDoll {
      position: absolute;
      right: 0;
      top: 0;
      width: 16rpx;
      height: 16rpx;
      background: #f25551;
      border-radius: 50%;
    }
    .menuImg {
      width: 80rpx;
      height: 80rpx;
    }
    .menuName {
      color: #333333;
      font-size: 28rpx;
      margin-top: 8rpx;
    }
  }
}
</style>