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

<template>

  <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">
          <view
              class="avatar"
              @click="toPage(2)"
              :style="{
              'background-image': `url(${user.avatar})`,
            }"
          ></view>
          <view class="phone fs-40 fw-500">{{ user.mobilePhoneFormat }}</view>

          <view class="money" @click="toPage({path: '/pages-user/account/index'})">
            <uv-icon name="red-packet" size="24"></uv-icon>
            <view>¥{{ user.balance }}</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>
    </view>
  </block>
  <tab-bar :index="4"/>
</template>

<script setup lang="ts">
import {onLoad, onShow} from "@dcloudio/uni-app";
import {ref} from "vue";
import TabBar from "@/components/tab-bar";

const containerStyle = ref({});
const user = ref<any>({
  avatar: "",
  mobilePhoneFormat: '15012341234',
  balance: '2345.67',
});
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/index",
    icon: '/static/user/order.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/user/faq.png'
  },
  {
    title: "纠错上报",
    path: "/pages-user/feedback/index",
    icon: '/static/user/feedback.png'
  },
]);
const toPage = (item: any) => {
  let {title, path} = item;
  if (path.includes('contact')) {
    uni.makePhoneCall({
      phoneNumber: service.value,
      fail: (error) => {
        console.log(error)
      }
    });
    return;
  }else if(path.includes("order")||path.includes("coupon")){
    uni.switchTab({
      url:path
    })
  }
  uni.navigateTo({
    url: item.path,
  });
};

onLoad(() => {
  uni.setNavigationBarTitle({title: '个人中心'})
  const bound = uni.getMenuButtonBoundingClientRect();
  containerStyle.value = {
    top: `${bound.bottom + 10}px`,
  };
  // fetchContact().then((res) => {
  //   if (res && res.mobile) {
  //     service.value = res.mobile;
  //   }
  // });
});
onShow(() => {
  // fetchProfile().then((res) => {
  //   res.mobilePhoneFormat =
  //       res.mobilePhone.slice(0, 3) + "****" + res.mobilePhone.slice(7);
  //   res.avatar = res.avatar
  //       ? res.avatar
  //       : "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
  //   user.value = res;
  // });
});
</script>

<style lang="scss" scope>
.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 660rpx;
}

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

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

  .main {
    height: 334rpx;
    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: 690rpx;
      height: 118rpx;
      background: #feffff;
      border-radius: 120rpx;
      margin: 0 auto;
      margin-top: 30rpx;
      color: #000000;
      padding: 0 24rpx 0 40rpx;

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

    }
  }
}

.body {
  width: 100%;
  background-color: #fff;
  //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;
    }
  }
}


</style>