pet-system-merchant-app/pages/my/user/detail/index.vue

<template>
	<view class="user-detail-page">
		<view class="user-hero">
			<image src="https://img.icons8.com/?size=256&id=23235&format=png" class="avatar" mode="aspectFill"></image>
			<text class="user-name">张先生</text>
			<text class="user-phone">13800138000</text>
		</view>
		<view class="info-card">
			<view class="info-row"><text class="label">性别</text><text class="value">男</text></view>
			<view class="info-row"><text class="label">住址</text><text class="value">北京市朝阳区三里屯</text></view>
			<view class="info-row"><text class="label">关联宠物</text><text class="value orange">2只</text></view>
			<view class="info-row"><text class="label">订单数量</text><text class="value">12单</text></view>
			<view class="info-row"><text class="label">录入来源</text><text class="value">三里屯店录入</text></view>
			<view class="info-row"><text class="label">创建时间</text><text class="value">2025-01-15 10:00</text></view>
			<view class="info-row"><text class="label">备注</text><text class="value">经常周末来</text></view>
		</view>
		<button class="edit-btn" @click="goToEdit">编辑用户</button>
	</view>
</template>

<script setup>
const goToEdit = () => uni.navigateTo({ url: '/pages/my/user/edit/index' })
</script>

<style lang="scss" scoped>
.user-detail-page { min-height: 100vh; background: #f7f8fa; padding-bottom: 160rpx; }
.user-hero { background: linear-gradient(150deg, #ffd53f, #ff9500); padding: 80rpx 40rpx 60rpx; display: flex; flex-direction: column; align-items: center; }
.avatar { width: 160rpx; height: 160rpx; border-radius: 50%; border: 8rpx solid #fff; margin-bottom: 20rpx; }
.user-name { font-size: 40rpx; font-weight: 800; color: #5c4314; }
.user-phone { font-size: 28rpx; color: #5c4314; opacity: 0.8; margin-top: 8rpx; }
.info-card { background: #fff; border-radius: 32rpx 32rpx 0 0; margin-top: -40rpx; padding: 40rpx 32rpx; position: relative; z-index: 3; }
.info-row { display: flex; justify-content: space-between; padding: 24rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.info-row:last-child { border-bottom: none; }
.label { font-size: 28rpx; color: #999; }
.value { font-size: 28rpx; color: #333; font-weight: 500; }
.value.orange { color: #ff9800; }
.edit-btn { margin: 40rpx 32rpx; width: calc(100% - 64rpx); height: 96rpx; background: linear-gradient(90deg, #ffd53f, #ff9500); color: #333; border: none; border-radius: 48rpx; font-size: 32rpx; font-weight: bold; line-height: 96rpx; }
</style>