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

<template>
	<view class="user-list-page">
		<NavBar title="用户列表" bgColor="#fff" color="#000"></NavBar>
		<!-- 顶部操作栏 -->
		<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 NavBar from '@/components/nav-bar/index.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>