car-wash-front/src/pages/user/index.vue

<template>
  <uv-navbar leftIcon="" title="我的" bg-color="#C6171E"></uv-navbar>
  <view class="w100 bg" style="background-color:#C6171E "></view>
<!--  <image src="/static/user/user-bg.png" mode="widthFix" class="bg"/>-->

  <block>
    <view class="container" :style="containerStyle">
      <view class="header flex-column">
        <view class="flex-grow flex-center">
          <image
              src="/static/user/round.png"
              mode="heightFix"
              style="width: 12orpx;height: 120rpx"/>
        </view>
        <view class="main flex-shrink">
          <image
              class="avatar"
              src='/static/iconfont/me.svg'>
              </image>
          <view class="phone fs-40 fw-500">{{ user.mobilePhone }}</view>

          <view class="money" @click="toPage({path: '/pages-user/wallet/index'})">
            <view class="money-left">
              <image src="/static/iconfont/chongzhi.svg"  mode="widthFit"  style="width: 40rpx;height: 40rpx"></image>
<!--              <uv-icon name="red-packet" size="24" color="#C6171E"></uv-icon>-->
              <view style="font-size: 16px;margin-left: 10rpx;">钱包 | 充值</view>
            </view>

            <view class="money-right">
              <view class="money-right_balance">¥ {{ ((user.balance || 0) / 100).toFixed(2) }}</view>
            </view>

          </view>
        </view>
      </view>

      <view class="body">
        <block v-for="(item, index) in menu" :key="index">
          <view
              class="menu-item"
              @click="toPage(item)">
            <view class="menu-item_left">
              <image :src="item.icon"></image>
              <view class="menu-item_left-title">{{ item.title }}</view>
            </view>
            <view class="menu-item_right">
              <uv-icon name="arrow-right" size="16"></uv-icon>
            </view>
          </view>
        </block>

        <view class="logout-btn" v-if="isLogin">
          <view class="mt20 logout-btn-wrap"  type="error" @click="logoutUser">退出登录</view>
        </view>
      </view>
    </view>
  </block>

  <cover-view class="login_bar" v-if="!isLogin">
    <login-bar class="w100 text-center"></login-bar>
  </cover-view>

<!--  <view class="logout-btn">
    <uv-button :custom-style="customStyle" type="error" @click="logoutUser">退出登录</uv-button>
  </view>-->

  <tab-bar :index="2"/>
</template>

<script setup lang="ts">
import {onHide, onLoad, onShow} from "@dcloudio/uni-app";
import {computed, ref} from "vue";
import TabBar from "@/components/tab-bar/index.vue";
import LoginBar from "@/components/login-bar/index.vue";
import {checkLogin, clearToken} from "@/utils/auth"
import {get} from "@/utils/https";
import {getServicePhone} from "@/utils/common";

const containerStyle = ref({});
const user = ref<any>({
  id: 0,
  avatar: "",
  mobilePhoneFormat: '',
  balance: 0,
});
const isLogin = ref(false)
const service = ref("15012341234");
const menu = ref([
  {
    title: "绑定车辆",
    path: "/pages-user/profile/index",
    icon: '/static/user/profile.png'
  },
  /*  {
      title: "我的卡包",
      path: "/pages/coupon/index",
      icon: '/static/user/coupon.png'
    },*/
  {
    title: "我的订单",
    path: "/pages-order/list/index",

    icon:  '/static/user/faq.png'
  },
  /*  {
      title: "我的收藏",
      path: "/pages-user/fav/index",
      icon: '/static/user/fav.png'
    },*/

  {
    title: "联系我们",
    path: "/pages-user/contact/index",
    icon: '/static/user/contact.png'
  },
  {
    title: "洗车指导",
    path: "/pages-user/faq/index",
    icon: '/static/iconfont/default/guide.svg'
  },
  {
    title: "纠错上报",
    path: "/pages-user/feedback/index",
    icon: '/static/user/feedback.png'
  },
]);



const toPage = (item: any) => {
  checkLogin().then(() => {
    let {title, path} = item;
    let servicePhone = getServicePhone();
    if (path.includes('contact')) {
      uni.makePhoneCall({
        phoneNumber: servicePhone,
        fail: (error) => {
          console.log(error)
        }
      });
      return;
    }

    uni.navigateTo({
      url: item.path,
    });
  })

};

const loginListen = () => {

}

const logoutUser = () => {
  uni.showModal({
    title: "温馨提示",
    content: "确定退出登录吗？",
    confirmColor: "#2d9e95",
    confirmText: "确定退出",
    cancelText: "手滑了",
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({
          title: "退出中",
        });

        get(`/user/logout`).then(() => {
          uni.hideLoading();
          uni.showToast({
            icon: "success",
            title: "已退出",
          });
          getApp<any>().globalData.manualLogout = true;
          clearToken();
          setTimeout(() => {
            uni.exitMiniProgram()
          }, 1500);

        })
      }
    },
  });
};

onLoad(() => {
  uni.setNavigationBarTitle({title: '个人中心'})
  const bound = uni.getMenuButtonBoundingClientRect();
  containerStyle.value = {
    top: `${bound.bottom + 10}px`,
  };
});

const addListener = () => {
  uni.$on('login', function (data) {
    isLogin.value = data.isLogin;
    console.log("event>>>", data)
    if (data.isLogin) {
      user.value = getApp<any>().globalData.user;
      console.log("event1111>>>", user.value)
    }
  })

  uni.$on('logout', function (data) {
    isLogin.value = false;
    user.value = {}
  })
}

const removeListener = () => {
  uni.$off('logout');
  uni.$off('login');
}

onShow(() => {
  const userData = getApp<any>().globalData.user;
  if (userData && userData.id) {
    isLogin.value = true;
    user.value = userData;
  }
  // loginListen();
  addListener();
});

onHide(()=>{
  removeListener();
})
</script>

<style lang="scss" scope>
page{
  background-color: #fafafa;
}
.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 460rpx;
}

.container {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
}

.header {
  //height: 400rpx;
  width: 100%;

  .main {
    //height: 234rpx;
    padding: 60rpx auto;
    background: rgba(254, 255, 255, 0.7);
    border-radius: 40rpx 40rpx 0 0;
    position: relative;
    text-align: center;

    .avatar {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -90rpx;
      width: 110rpx;
      height: 110rpx;
      border: 2rpx solid #ffffff;
      filter: drop-shadow(0px 4rpx 8rpx rgba(0, 24, 60, 0.1));
      background-size: cover;
      background-repeat: no-repeat;
      border-radius: 50%;
    }

    .phone {
      padding-top: 78rpx;
      color: #000;
    }

    .money {
      //position: absolute;
      //left: 0;
      //bottom: 0;
      width: 600rpx;
      //height: 98rpx;
      background: #feffff;
      border-radius: 120rpx;
      margin: 0 auto;
      margin-top: 60rpx;
      color: #000000;
      padding: 40rpx;

      display: flex;
      align-content: center;
      align-items: center;
      justify-content: space-between;

      &-left {
        color: $uni-color-primary;
        display: inline-flex;
        align-items: flex-end;
      }

      &-right {
        color: $uni-color-primary;
        display: inline-flex;
        align-items: flex-end;

        &_balance {
          font-weight: 600;
          font-size: 20px;
          margin-right: 10px;
        }
      }
    }
  }
}

.body {
  width: 100%;
  background-color: #fff;
  //border-top: 1px solid $uni-color-primary;
  //padding: 0rpx 30rpx;

  .menu-item {
    display: inline-flex;
    justify-content: space-between;
    background-color: #fff;
    height: 90rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
    align-items: center;
    width: 100%;

    &_left {
      display: flex;
      align-items: center;
      align-content: center;
      margin-left: 20rpx;

      image {
        width: 42rpx;
        height: 42rpx;
        margin-right: 20rpx;
      }

      &-title {
        font-size: 13px;
      }
    }

    &_right {
      text-align: right;
      width: 60rpx;
    }


    &:last-child {
      border-bottom: none;
    }
  }
}

.logout-btn {
  width: calc(100vw - 60rpx);
  margin: 60rpx auto;

  &-wrap{
    height: 80rpx;
    font-size: 28rpx;
    margin: 20px auto;
    width: 540rpx;
    text-align: center;
    background: #dd524d;
    color: white;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
  }
}
</style>