index.vue 5.19 KB
<template>
  <view class="wode-container">
    <view class="head-top-box">
      <view class="head-image-box">
        <u-avatar :src="pic" size="140"></u-avatar>
      </view>
      <view style="display: flex; flex-direction: column; width: 100%;">
        <view class="manager-info">
          <view class="manager-info-transport-company-name">
            <text>{{ userInfo.transportCompanyName }}</text>
          </view>
          <view class="choose-type-item-text-right-label">{{ userInfo.userType }}</view>
        </view>
      </view>
    </view>
    <view class="more-setting-box">
      <view class="more-setting-title">
        更多设置
      </view>
      <view class="cell-box" @click="handleAddressManager" hover-class="handlerClick">
        <view class="cell-icon">
          <image width="35rpx" height="35rpx" src="../../static/image/address-manager.png"></image>
        </view>
        <view class="cell-label">
          <text>地 址 管 理</text>
        </view>
      </view>
      <view class="cell-box" @click="handlerChangeRole" hover-class="handlerClick">
        <view class="cell-icon">
          <image src="../../static/image/role-change.png"></image>
        </view>
        <view class="cell-label">
          <text>角 色 切 换</text>
        </view>
      </view>
      <view class="cell-box" @click="handleLoginOut" hover-class="handlerClick">
        <view class="cell-icon">
          <image src="../../static/image/quit-login.png"></image>
        </view>
        <view class="cell-label">
          <text>退 出 登 录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { loginOut, queryRole } from "@/apis/user";
import headImg from "@/static/image/st_pic.png";
import { useMainStore } from "@/stores/index";
import { setRequestToken } from '@/utils/request/request.js';
import { computed, ref } from "vue";
const store = useMainStore();
const pic = ref(headImg)
const show = ref(true)
const userInfo = computed(() => store.userInfo)
const handleAddressManager = () => {
  uni.$u.route({
    url: `pages/home/address/index`,
  })
}
const handlerChangeRole = () => {
  uni.showModal({
    title: '提示',
    content: '是否进行身份切换?',
    success: function (res) {
      if (res.confirm) {
        queryRole().then(res => {
          if (res.data.success) {
            uni.$u.route({
              url: `pages/wode/choose/index?ruleVos= ${encodeURIComponent(JSON.stringify(res.data.data.ruleVos))}`,
            })
          }
        })

      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
}
const handleLoginOut = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出吗?',
    success: function (res) {
      if (res.confirm) {
        loginOut().then(res => {
          if (res.data.success) {
            store.token = null;
            setRequestToken();
            uni.$u.toast("已退出")
            uni.$u.route({
              type: "reLaunch",
              url: "pages/login/index"
            })
          }
        })
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
}
</script>

<style lang="scss" scoped>
.wode-container {
  height: 100%;
  box-sizing: border-box;

  .head-top-box {
    display: flex;
    align-items: center;
    background: #19a97c;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-radius: 0 0 30rpx 30rpx;
    height: 300rpx;

    .head-image-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 180rpx;
      height: 180rpx;
      margin-right: 30rpx;
    }
  }

  .more-setting-box {
    margin-top: 60rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
    align-items: center;

    .more-setting-title {
      color: $u-info;
    }

    .cell-box {
      display: flex;
      align-items: center;
      line-height: 80rpx;
      font-size: 35rpx;
      background-color: white;
      border-radius: 15rpx;
      margin: 40rpx 0;

      .cell-icon {
        margin: 0 20rpx;
        display: flex;
        align-items: center;

        image {
          background-size: 100% 100%;
          width: 40rpx;
          height: 40rpx;
        }

        u-icon {}
      }

      .cell-label {
        text {}
      }
    }

    .handlerClick {
      @include handleClick;
    }
  }
}

.user-box {
  background-color: #fff;
}

.u-cell-group {
  background-color: #fff;
}


.manager-info {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  color: white;

  .choose-tyep-item-text-right-info {
    font-size: 40rpx;
  }

  .manager-info-transport-company-name {
    display: flex;
    color: white;
    line-height: 80rpx;
    font-size: 40rpx;
  }

  .choose-tyep-item-text-right-company {
    font-weight: bolder;
    line-height: 40rpx;
    font-size: 40rpx;
  }

  .choose-type-item-text-right-label {
    font-size: 30rpx;
    padding: 8rpx 15rpx;
    border-radius: 5rpx;
    color: $u-main-color;
    font-weight: 600;
    margin-bottom: 10rpx;
    background: #f3a200;
  }
}

.manager-info-parent-company-name {
  color: white;

  text {
    color: white;
  }
}
</style>