product_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"
             style="margin-top: 48rpx">
          <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 } 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')
          },
        });
      }
      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.navigateTo({
        url: "/pages/subPackages/password/index",
      });
    },
    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>