sqxp/sqxp-wx/pages/supplier/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';
// Store
const userStore = useUserStore();
const avatarDisplayUrl = computed(() => resolveUserAvatarUrl(userStore.userInfo?.avatarUrl, userStore.userInfo?.role));
// 角色名称
const roleName = computed(() => {
    switch (userStore.userRole) {
        case 'client':
            return '客户';
        case 'supplier':
            return '供应商';
        case 'deliver':
            return '配送员';
        default:
            return '用户';
    }
});
// 主题色（三端统一品牌绿）
const brandHex = computed(() => '#0a9f6d');
const userCardStyle = computed(() => ({ background: brandHex.value }));
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;
        return;
    }
    if (!userStore.isSupplier) {
        uni.showToast({ title: '您不是供应商用户', icon: 'none' });
        setTimeout(() => userStore.navigateToHome(), 1500);
        profileLoading.value = false;
        return;
    }
    (async () => {
        try {
            await loadServicePhone();
        }
        finally {
            profileLoading.value = false;
        }
    })();
});

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

<template>
  <view class="supplier-profile">
    <ClientSkeleton v-if="profileLoading" variant="hero-list" :rows="2" />
    <template v-else>
    <!-- 用户信息卡片 -->
    <view class="user-card" :style="userCardStyle">
      <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>
          <text class="user-role">{{ roleName }}</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-list">
      <view class="menu-item" @click="onCallService">
        <view class="menu-left">
          <view class="solid-icon menu-icon icon-phone"></view>
          <text class="menu-text">联系客服</text>
        </view>
        <text class="menu-arrow">›</text>
      </view>
      <view class="menu-item">
        <view class="menu-left">
          <view class="solid-icon menu-icon icon-phone"></view>
          <text class="menu-text">手机号</text>
        </view>
        <view class="menu-right">
          <text class="menu-value">{{ userStore.userInfo?.phone || '未绑定' }}</text>
        </view>
      </view>

      <view class="menu-item">
        <view class="menu-left">
          <view class="solid-icon menu-icon icon-region"></view>
          <text class="menu-text">所属区域</text>
        </view>
        <view class="menu-right">
          <text class="menu-value">{{ userStore.userInfo?.regionName || '未分配' }}</text>
        </view>
      </view>
    </view>

    <!-- 设置菜单 -->
    <view class="menu-list">
      <view class="menu-item">
        <view class="menu-left">
          <view class="solid-icon menu-icon icon-password"></view>
          <text class="menu-text">修改密码</text>
        </view>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item">
        <view class="menu-left">
          <view class="solid-icon menu-icon icon-notice"></view>
          <text class="menu-text">消息通知</text>
        </view>
        <text class="menu-arrow">›</text>
      </view>

      <view class="menu-item">
        <view class="menu-left">
          <view class="solid-icon menu-icon icon-about"></view>
          <text class="menu-text">关于我们</text>
        </view>
        <text class="menu-arrow">›</text>
      </view>
    </view>

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

    <!-- 版本信息 -->
    <view class="version-info">
      <text>V1.0.0</text>
    </view>
    </template>
  </view>
</template>

<style lang="scss" scoped>
.supplier-profile {
  min-height: 100vh;
  background: #f3f7f5;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

// 用户信息卡片
.user-card {
  padding: 56rpx 30rpx 44rpx;
  color: #ffffff;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: 0 8px 20px rgba(10, 159, 109, 0.1);

  .user-info {
    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;

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

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

      .user-name {
        font-size: 36rpx;
        font-weight: 500;
        margin-bottom: 8rpx;
      }

      .user-role {
        font-size: 24rpx;
        opacity: 0.8;
      }
    }
  }
}

// 菜单列表
.menu-list {
  background: #ffffff;
  margin: 20rpx;
  border-radius: 14px;
  border: 1px solid #d9e9e1;
  overflow: hidden;

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;

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

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

      .menu-icon {
        width: 44rpx;
        height: 44rpx;
        margin-right: 20rpx;
      }

      .emoji-icon {
        display: none;
      }

      .menu-text {
        font-size: 28rpx;
        color: #303133;
      }
    }

    .menu-right {
      .menu-value {
        font-size: 28rpx;
        color: #909399;
      }
    }

    .menu-right--phone {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12rpx;
      max-width: 62%;
    }

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

.solid-icon {
  position: relative;
  border-radius: 12rpx;
  flex-shrink: 0;
}

.solid-icon::before,
.solid-icon::after {
  content: '';
  position: absolute;
}

.icon-phone {
  background: #0a9f6d;
}

.icon-phone::before {
  left: 12rpx;
  top: 6rpx;
  width: 20rpx;
  height: 32rpx;
  border-radius: 5rpx;
  border: 3rpx solid #ffffff;
}

.icon-phone::after {
  left: 20rpx;
  bottom: 8rpx;
  width: 4rpx;
  height: 4rpx;
  border-radius: 50%;
  background: #ffffff;
}

.icon-region {
  background: #0a9f6d;
}

.icon-region::before {
  left: 14rpx;
  top: 8rpx;
  width: 16rpx;
  height: 24rpx;
  border-radius: 10rpx;
  transform: rotate(45deg);
  background: #ffffff;
}

.icon-region::after {
  left: 22rpx;
  top: 18rpx;
  width: 6rpx;
  height: 6rpx;
  border-radius: 50%;
  background: #0a9f6d;
}

.icon-password {
  background: #ee0a24;
}

.icon-password::before {
  left: 10rpx;
  top: 20rpx;
  width: 24rpx;
  height: 16rpx;
  border-radius: 4rpx;
  background: #ffffff;
}

.icon-password::after {
  left: 14rpx;
  top: 10rpx;
  width: 16rpx;
  height: 12rpx;
  border: 3rpx solid #ffffff;
  border-bottom: 0;
  border-radius: 10rpx 10rpx 0 0;
}

.icon-notice {
  background: #0a9f6d;
}

.icon-notice::before {
  left: 12rpx;
  top: 9rpx;
  width: 20rpx;
  height: 18rpx;
  border-radius: 10rpx 10rpx 6rpx 6rpx;
  background: #ffffff;
}

.icon-notice::after {
  left: 18rpx;
  bottom: 7rpx;
  width: 8rpx;
  height: 4rpx;
  border-radius: 0 0 6rpx 6rpx;
  background: #ffffff;
}

.icon-about {
  background: #05a050;
}

.icon-about::before {
  content: 'i';
  left: 0;
  top: 3rpx;
  width: 100%;
  text-align: center;
  font-size: 30rpx;
  font-weight: 700;
  color: #ffffff;
}

// 退出登录
.logout-btn {
  margin: 40rpx 20rpx;
  height: 88rpx;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #d9e9e1;
  display: flex;
  align-items: center;
  justify-content: center;

  text {
    font-size: 28rpx;
    color: #0a9f6d;
  }
}

// 版本信息
.version-info {
  text-align: center;
  padding: 30rpx;

  text {
    font-size: 24rpx;
    color: #c0c4cc;
  }
}
</style>