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

<template>
	<view class="user-list-page">
		<!-- 顶部操作栏 -->
		<view class="action-bar">
			<view class="search-box">
				<uni-icons type="search" size="14" color="#999"></uni-icons>
				<input type="text" v-model="searchValue" placeholder="搜索姓名/手机号" class="search-input" />
			</view>
			<picker :range="shopOptions" range-key="text" @change="onShopChange">
				<view class="filter-btn">
					<text>{{ shopOptions[filterShop].text }}</text>
					<uni-icons type="bottom" size="12" color="#666"></uni-icons>
				</view>
			</picker>
			<button size="mini" class="add-btn" @click="goToAdd">+ 新增</button>
		</view>

		<!-- 用户列表 -->
		<view class="list-container">
			<view class="user-card" v-for="user in users" :key="user.id">
				<view class="user-header">
					<image :src="user.avatar" class="user-avatar" mode="aspectFill"></image>
					<view class="user-info-main">
						<text class="user-name">{{ user.name }}</text>
						<text class="phone-row">{{ user.phone }}</text>
					</view>
					<view class="user-status">
						<switch :checked="user.isActive" color="#ff9800" style="transform: scale(0.6);"
							@change="onStatusChange(user)" />
						<text class="status-text">{{ user.isActive ? '正常' : '禁用' }}</text>
					</view>
				</view>

				<view class="user-body">
					<view class="info-row">
						<text class="label">住址:</text>
						<text class="value">{{ user.address }}</text>
					</view>
					<view class="info-grid">
						<view class="grid-cell" @click="goToPetList(user)">
							<text class="label">关联宠物</text>
							<text class="value text-warning">{{ user.petCount }}只</text>
						</view>
						<view class="grid-cell" @click="goToOrderList(user)">
							<text class="label">订单数量</text>
							<text class="value">{{ user.orderCount }}单</text>
						</view>
					</view>
					<view class="source-box">
						<text class="source-tag">{{ user.source }}</text>
						<text class="create-time">创建时间: {{ user.createTime }}</text>
					</view>
				</view>

				<view class="card-actions">
					<button size="mini" class="action-btn" @click.stop="goToDetail(user)">详情</button>
					<button size="mini" class="action-btn" @click.stop="goToEdit(user)">编辑</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import userMockData from '@/mock/user.json'

const searchValue = ref('')
const filterShop = ref(0)
const shopOptions = [{ text: '全部', value: 0 }, { text: '三里屯店', value: 1 }, { text: '浦东新区店', value: 2 }]

const onShopChange = (e) => { filterShop.value = Number(e.detail.value) }

const users = ref(userMockData)

const goToAdd = () => uni.navigateTo({ url: '/pages/my/user/add/index' })
const goToDetail = (user) => uni.navigateTo({ url: '/pages/my/user/detail/index' })
const goToEdit = (user) => uni.navigateTo({ url: '/pages/my/user/edit/index' })
const goToPetList = (user) => uni.navigateTo({ url: `/pages/my/pet/list/index?userId=${user.id}` })
const goToOrderList = (user) => uni.reLaunch({ url: '/pages/order/list/index' })
const onStatusChange = (user) => {
	user.isActive = !user.isActive
	uni.showToast({ title: user.isActive ? '已启用' : '已禁用', icon: 'none' })
}
</script>

<style lang="scss" scoped>
.user-list-page { min-height: 100vh; background: #f2f2f2; padding-bottom: 40rpx; }
.action-bar { display: flex; align-items: center; padding: 20rpx 24rpx; background: #fff; gap: 16rpx; }
.search-box { flex: 1; display: flex; align-items: center; background: #f5f5f5; border-radius: 32rpx; padding: 12rpx 20rpx; gap: 12rpx; }
.search-input { flex: 1; font-size: 26rpx; background: transparent; }
.filter-btn { display: flex; align-items: center; gap: 8rpx; background: #f5f5f5; border-radius: 32rpx; padding: 12rpx 20rpx; font-size: 24rpx; color: #666; }
.add-btn { font-size: 24rpx; font-weight: bold; background: linear-gradient(90deg, #ffd53f, #ff9500); color: #333; border: none; border-radius: 32rpx; padding: 12rpx 24rpx; white-space: nowrap; }
.list-container { padding: 24rpx; }
.user-card { background: #fff; border-radius: 24rpx; padding: 28rpx; margin-bottom: 24rpx; }
.user-header { display: flex; align-items: center; margin-bottom: 24rpx; padding-bottom: 24rpx; border-bottom: 1rpx solid #f9f9f9; }
.user-avatar { width: 88rpx; height: 88rpx; border-radius: 50%; background: #f0f0f0; margin-right: 24rpx; }
.user-info-main { flex: 1; }
.user-name { display: block; font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 8rpx; }
.phone-row { display: block; font-size: 26rpx; color: #666; }
.user-status { display: flex; flex-direction: column; align-items: center; gap: 4rpx; }
.status-text { font-size: 20rpx; color: #ff9800; }
.user-body { font-size: 26rpx; }
.info-row { display: flex; margin-bottom: 16rpx; }
.label { color: #999; width: 100rpx; flex-shrink: 0; }
.value { color: #333; flex: 1; }
.info-grid { display: flex; background: #fdfdfd; border: 1rpx solid #f2f2f2; border-radius: 12rpx; padding: 20rpx; margin-bottom: 20rpx; }
.grid-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8rpx; }
.grid-cell .label { width: auto; font-size: 24rpx; }
.grid-cell .value { font-size: 30rpx; font-weight: bold; }
.text-warning { color: #ff9800; }
.source-box { background: #fff8e1; padding: 16rpx; border-radius: 8rpx; }
.source-tag { display: block; color: #ff9800; font-weight: bold; font-size: 24rpx; margin-bottom: 8rpx; }
.create-time { font-size: 22rpx; color: #a1887f; }
.card-actions { display: flex; justify-content: flex-end; gap: 20rpx; margin-top: 24rpx; padding-top: 24rpx; border-top: 1rpx dashed #eee; }
.action-btn { border: 1rpx solid #e0e0e0; color: #666; font-size: 24rpx; background: transparent; border-radius: 12rpx; padding: 8rpx 24rpx; }
</style>