mtsd/sqxp-wx/pages/deliverer/profile/profile.vue

<script setup>
import { computed, onMounted, ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useUserStore } from '@/stores/user';
import { resolveUserAvatarUrl } from '@/utils/avatar';
import ClientSkeleton from '@/components/client/client-skeleton.vue';
import ClientImageLoader from '@/components/client/client-image-loader.vue';
import { fetchServicePhone, dialServicePhone } from '@/utils/service-contact';
import { IMG_LOGO_WATERMARK } from '@/utils/staticAsset';
// Store
const userStore = useUserStore();
const avatarDisplayUrl = computed(() => resolveUserAvatarUrl(userStore.userInfo?.avatarUrl, userStore.userInfo?.role));
const headerStyle = { background: 'linear-gradient(145deg, #087f57, #0a9f6d)' };
const servicePhone = ref('');
const profileLoading = ref(true);
async function loadServicePhone() {
    servicePhone.value = await fetchServicePhone();
}
async function onCallService() {
    const p = servicePhone.value || (await fetchServicePhone());
    servicePhone.value = p;
    dialServicePhone(p);
}
// 退出登录
function handleLogout() {
    uni.showModal({
        title: '提示',
        content: '确定退出登录？',
        success: async (res) => {
            if (res.confirm) {
                await userStore.logout();
            }
        }
    });
}
onMounted(() => {
    if (!userStore.isLoggedIn) {
        uni.reLaunch({ url: '/pages/login/login' });
        profileLoading.value = false;
    }
    else if (!userStore.isDeliverer) {
        uni.showToast({ title: '您不是配送员', icon: 'none' });
        setTimeout(() => userStore.navigateToHome(), 1500);
        profileLoading.value = false;
    }
    else {
        (async () => {
            try {
                await loadServicePhone();
            }
            finally {
                profileLoading.value = false;
            }
        })();
    }
});

onShow(() => {
    if (!userStore.isLoggedIn || !userStore.isDeliverer)
        return;
    void loadServicePhone();
});
</script>

<template>
  <view class="deliverer-profile">
    <ClientSkeleton v-if="profileLoading" variant="hero-list" :rows="2" />
    <template v-else>
    <!-- 用户信息卡片 -->
    <view class="user-card" :style="headerStyle">
      <image class="header-watermark" :src="staticAssetUrl('images/logo11.png')" mode="aspectFit" />
      <view class="user-info">
        <view class="avatar">
          <ClientImageLoader class="avatar-img" :src="avatarDisplayUrl" mode="aspectFill" radius="50%" />
        </view>
        <view class="user-detail">
          <text class="user-name">{{ userStore.userInfo?.realName || '配送员' }}</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <view class="menu-item" @click="onCallService">
        <view class="menu-left">
          <view class="menu-icon-badge">
            <text class="menu-icon">☎</text>
          </view>
          <text class="menu-text">联系客服</text>
        </view>
        <text class="menu-arrow">›</text>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-btn" @click="handleLogout">
      <text>退出登录</text>
    </view>
    </template>
  </view>
</template>

<style lang="scss" scoped>
.deliverer-profile {
  min-height: 100vh;
  background: #f3f7f5;
}

// 用户信息卡片
.user-card {
  position: relative;
  padding: 56rpx 20rpx 26rpx;
  margin: 16rpx 16rpx 8rpx;
  border-radius: 18rpx;
  color: #ffffff;
  overflow: hidden;

  .user-info {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 24rpx;
      overflow: hidden;
      border: 2rpx solid rgba(255, 255, 255, 0.45);

      .avatar-img {
        width: 100%;
        height: 100%;
      }
    }

    .user-detail {
      display: flex;
      flex-direction: column;

      .user-name {
        font-size: 34rpx;
        font-weight: 700;
      }

    }
  }
}

.header-watermark {
  position: absolute;
  right: -12rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 240rpx;
  height: 240rpx;
  opacity: 0.12;
  z-index: 1;
}

// 功能菜单
.menu-list {
  background: #ffffff;
  margin: 10rpx 16rpx 16rpx;
  border-radius: 18rpx;
  overflow: hidden;
  border: 1rpx solid #d9e9e1;

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22rpx 16rpx;
    border-bottom: 1rpx solid rgba(217, 233, 225, 0.9);

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

    .menu-left {
      display: flex;
      align-items: center;

      .menu-icon-badge {
        width: 64rpx;
        height: 64rpx;
        border-radius: 18rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
        margin-right: 16rpx;
        box-shadow: 0 6rpx 16rpx rgba(16, 185, 129, 0.22);
      }

      .menu-icon {
        font-size: 34rpx;
        color: #ffffff;
      }

      .menu-text {
        font-size: 28rpx;
        color: #1f2a26;
        font-weight: 600;
      }
    }

    .menu-arrow {
      font-size: 32rpx;
      color: #9aa9a2;
    }
  }
}

// 退出登录
.logout-btn {
  margin: 10rpx 16rpx 24rpx;
  height: 88rpx;
  background: #ffffff;
  border-radius: 18rpx;
  border: 1rpx solid #d9e9e1;
  display: flex;
  align-items: center;
  justify-content: center;

  text {
    font-size: 28rpx;
    color: #087f57;
    font-weight: 700;
  }
}
</style>