settle_down_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">
          <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="cardBox" @tap="toMineMsg">
        <div class="cardLeft">
          <span style="color: #ffc97c; font-size: 28rpx">我的消息</span>
          <span style="color: #ffffff; font-size: 40rpx; margin-left: 18rpx"
            >0</span
          >
        </div>
        <img src="./image/rightIcon.png" class="rightIcon" />
      </div> -->
      <!-- <div class="mineMenuBody">
        <div v-for="item in menuList" class="mineMenuItem" @tap="toPath(item)">
          <div class="redDoll" v-show="item.isNew"></div>
          <img :src="item.img" class="menuImg" />
          <span class="menuName">{{ item.name }}</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 class="border"></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 class="border"></div>
          </div>
        </div>
        <div
          class="labelpage_row"
          style="margin-top: 48rpx"
          @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 class="border"></div>
          </div>
        </div>
        <!-- <div
          class="labelpage_row"
          style="margin-top: 48rpx"
          @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 class="border"></div>
          </div>
        </div> -->
        <div
          class="labelpage_row"
          style="margin-top: 48rpx"
          @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" position="bottom" custom-style="height: 40%;">
      <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,
      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: {
    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/login2/login",
            });
          }
        },
      });
    },
    editPassWord() {
      uni.navigateBack();
    },
    async getUserInfo() {
      let data = await getUserInfo();
      this.userInfo = data.data;
    },
  },
};
</script>
<style lang="scss">
.banner {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
.headerandwelcome {
  margin-bottom: 60rpx;
  height: 120rpx;
  width: 100%;
  padding-left: 60rpx;
}
.info {
  position: absolute;
  //width: calc(100% - 64rpx);
  margin: 60rpx 0 0 0;
  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: 83rpx;
  width: 100%;
  img {
    height: 44rpx;
    width: 44rpx;
    float: left;
    margin-right: 12rpx;
  }
  .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>