antissoft / lvqianmeiye_ERP

<template>
	<view class="store-list-container">
		<!-- 搜索卡片 -->
		<view class="search-card">
			<u-search 
				v-model="searchKeyword" 
				placeholder="搜索门店名称" 
				@search="onSearchInput" 
				@clear="onSearchInput"
				@custom="onSearchInput"
				class="search-input">
			</u-search>
		</view>
		
		<!-- 门店列表 -->
		<view class="store-list" v-if="storeList.length > 0">
			<view 
				v-for="(store, index) in storeList" 
				:key="store.id"
				class="store-card"
			>
				<view class="store-header">
					<view class="store-name">{{ store.dm || '无' }}</view>
					<view class="store-status" :class="store.zxzt === '开店' ? 'status-open' : store.zxzt === '闭店' ? 'status-closed' : ''">
						{{ store.zxzt || '无' }}
					</view>
				</view>
				<view class="store-row">
					<view class="store-item">
						<text class="store-label">单据门店</text>
						<text class="store-value">{{ store.djmd || '无' }}</text>
					</view>
					<view class="store-item">
						<text class="store-label">城市</text>
						<text class="store-value">{{ store.cs || '无' }}</text>
					</view>
				</view>
				<view class="store-row">
					<view class="store-item">
						<text class="store-label">联系人</text>
						<text class="store-value">{{ store.xm || '无' }}</text>
					</view>
					<view class="store-item">
						<text class="store-label">联系电话</text>
						<text class="store-value">{{ store.dhhm || '无' }}</text>
					</view>
				</view>
				<view class="store-row">
					<view class="store-item">
						<text class="store-label">座机</text>
						<text class="store-value">{{ store.zj || '无' }}</text>
					</view>
					<view class="store-item">
						<text class="store-label">在职人数</text>
						<text class="store-value">{{ store.zzrs || 0 }}人</text>
					</view>
				</view>
				<view class="store-row" v-if="store.kysj">
					<view class="store-item full-width">
						<text class="store-label">开业时间</text>
						<text class="store-value">{{ utils.formatTimeday(store.kysj) }}</text>
					</view>
				</view>
				<view class="store-row" v-if="store.dz">
					<view class="store-item full-width">
						<text class="store-label">地址</text>
						<text class="store-value">{{ store.dz || '无' }}</text>
					</view>
				</view>
                <view class="store-actions">
					<button class="edit-btn" @click.stop="openEditDialog(store)">修改在职人数</button>
				</view>
			</view>
		</view>
		
		<!-- 加载状态 -->
		<view v-if="isLoading" class="loading">
			<u-loading-icon mode="circle" color="#43a047"></u-loading-icon>
			<text class="loading-text">正在加载门店数据...</text>
		</view>
		
		<!-- 加载更多 -->
		<view v-if="isLoadingMore" class="loading-more">
			<u-loading-icon mode="circle" color="#43a047" size="16"></u-loading-icon>
			<text class="loading-more-text">正在加载更多...</text>
		</view>
		
		<!-- 无更多数据 -->
		<view v-if="!hasMoreData && storeList.length > 0" class="no-more-data">
			已加载全部数据
		</view>
		
		<!-- 空状态 -->
		<view v-if="!isLoading && storeList.length === 0" class="empty-state">
			<view class="empty-state-icon">🏪</view>
			<view class="empty-state-text">暂无门店数据</view>
			<view class="empty-state-subtext">请稍后再试或联系管理员</view>
		</view>
		
		<!-- 搜索空状态 -->
		<view v-if="!isLoading && storeList.length === 0 && isSearching" class="empty-state">
			<view class="empty-state-icon">🔍</view>
			<view class="empty-state-text">未找到匹配的门店</view>
			<view class="empty-state-subtext">请尝试其他搜索关键词</view>
		</view>
		
		<!-- 编辑在职人数弹窗 -->
		<view v-if="showEditDialog" class="dialog-overlay" @click="closeEditDialog">
			<view class="edit-dialog" @click.stop>
				<view class="dialog-header">
					<text class="dialog-title">修改在职人数</text>
				</view>
				<view class="dialog-content">
					<view class="form-item">
						<text class="form-label">门店名称</text>
						<text class="form-value">{{ currentStore.dm || '无' }}</text>
					</view>
					<view class="form-item">
						<text class="form-label">在职人数</text>
						<u-input 
							v-model="editZzrs" 
							type="number" 
							placeholder="请输入在职人数"
							:clearable="true"
						/>
					</view>
				</view>
				<view class="dialog-buttons">
					<button class="dialog-btn cancel-dialog-btn" @click="closeEditDialog">取消</button>
					<button 
						class="dialog-btn confirm-dialog-btn" 
						@click="submitEdit"
						:loading="submitLoading"
					>
						确定
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import storeApi from '@/apis/modules/store.js'
	
	export default {
		data() {
			return {
				// 搜索相关
				searchKeyword: '',
				searchTimeout: null,
				isSearching: false,
				
				// 列表相关
				storeList: [],
				currentPage: 1,
				pageSize: 10,
				isLoading: false,
				isLoadingMore: false,
				hasMoreData: true,
				
				// 用户信息
				userInfo: null,
				
				// 编辑相关
				showEditDialog: false,
				currentStore: {},
				editZzrs: '',
				submitLoading: false
			}
		},
		onLoad() {
			this.initializePage();
		},
		onReachBottom() {
			this.loadMoreData();
		},
		methods: {
			// 初始化页面
			async initializePage() {
				try {
					// 获取用户信息
					this.userInfo = uni.getStorageSync('userInfo');
					if (!this.userInfo || Object.keys(this.userInfo).length === 0) {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						});
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 1500);
						return;
					}
					
					await this.loadStoreData(true);
				} catch (error) {
					console.error('页面初始化失败:', error);
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					});
				}
			},
			
			// 搜索输入处理
			onSearchInput() {
				// 清除之前的定时器
				if (this.searchTimeout) {
					clearTimeout(this.searchTimeout);
				}
				
				// 设置防抖，500ms后执行搜索
				this.searchTimeout = setTimeout(() => {
					if (this.searchKeyword.trim()) {
						this.isSearching = true;
					} else {
						this.isSearching = false;
					}
					
					// 重置分页状态
					this.currentPage = 1;
					this.hasMoreData = true;
					this.loadStoreData(true);
				}, 500);
			},
			
			// 加载门店数据
			async loadStoreData(isFirstLoad = false) {
				if (this.isLoading) return;
				
				try {
					this.isLoading = true;
					
					if (isFirstLoad) {
						this.isLoadingMore = false;
					} else {
						this.isLoadingMore = true;
					}
					
					const params = {
						currentPage: this.currentPage,
						pageSize: this.pageSize
					};
					
					// 添加搜索参数
					if (this.searchKeyword.trim()) {
						// 只按门店名称搜索
						params.dm = this.searchKeyword.trim();
					}
					
					const result = await storeApi.getStoreList(params);
					
					if (result.code === 200 && result.data && result.data.list) {
						const stores = result.data.list.map(item => ({
							id: item.id,
							mdbm: item.mdbm || '',
							djmdbh: item.djmdbh || '',
							djmd: item.djmd || '无',
							dm: item.dm || '无',
							cs: item.cs || '无',
							dz: item.dz || '',
							xm: item.xm || '无',
							dhhm: item.dhhm || '无',
							zj: item.zj || '',
							kysj: item.kysj,
							zxzt: item.zxzt || '',
							gsmc: item.gsmc || '',
							fr: item.fr || '',
							ywsb: item.ywsb || '',
							zzrs: item.zzrs || 0,
							storeCategory: item.storeCategory || '',
							storeType: item.storeType || ''
						}));
						
						if (isFirstLoad) {
							this.storeList = [...stores];
						} else {
							this.storeList = [...this.storeList, ...stores];
						}
						
						// 检查是否还有更多数据
						this.hasMoreData = stores.length === this.pageSize;
					} else {
						if (isFirstLoad) {
							this.storeList = [];
						}
						this.hasMoreData = false;
					}
					
					this.currentPage++;
				} catch (error) {
					console.error('加载门店数据失败:', error);
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
					if (isFirstLoad) {
						this.storeList = [];
					}
					this.hasMoreData = false;
				} finally {
					this.isLoading = false;
					this.isLoadingMore = false;
				}
			},
			
			// 加载更多数据
			async loadMoreData() {
				if (this.isLoading || !this.hasMoreData) return;
				await this.loadStoreData(false);
			},
			
			
			
			// 打开编辑弹窗
			openEditDialog(store) {
				this.currentStore = store;
				this.editZzrs = store.zzrs || '';
				this.showEditDialog = true;
			},
			
			// 关闭编辑弹窗
			closeEditDialog() {
				this.showEditDialog = false;
				this.currentStore = {};
				this.editZzrs = '';
			},
			
			// 提交编辑
			async submitEdit() {
				if (this.submitLoading) return;
				
				// 验证输入
				if (!this.editZzrs && this.editZzrs !== 0) {
					uni.showToast({
						title: '请输入在职人数',
						icon: 'none'
					});
					return;
				}
				
				const zzrs = parseInt(this.editZzrs);
				if (isNaN(zzrs) || zzrs < 0) {
					uni.showToast({
						title: '请输入有效的数字',
						icon: 'none'
					});
					return;
				}
				
				this.submitLoading = true;
				try {
					// 先获取门店完整信息
					const detailRes = await storeApi.getStoreDetail(this.currentStore.id);
					if (detailRes.code !== 200) {
						throw new Error(detailRes.msg || '获取门店信息失败');
					}
					
					// 更新在职人数
					const updateData = {
						...detailRes.data,
						zzrs: zzrs
					};
					
					const result = await storeApi.updateStore(this.currentStore.id, updateData);
					
					if (result.code === 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						});
						
						// 更新列表中的数据
						const index = this.storeList.findIndex(item => item.id === this.currentStore.id);
						if (index !== -1) {
							this.storeList[index].zzrs = zzrs;
						}
						
						this.closeEditDialog();
					} else {
						uni.showToast({
							title: result.msg || '修改失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('修改在职人数失败:', error);
					uni.showToast({
						title: '修改失败，请重试',
						icon: 'none'
					});
				} finally {
					this.submitLoading = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.store-list-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
		padding: 20rpx;
	}
	
	.search-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		padding: 40rpx;
		margin-bottom: 40rpx;
	}
	
	.store-list {
		margin-bottom: 40rpx;
	}
	
	.store-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 40rpx 0 rgba(76, 175, 80, 0.12);
		border: 2rpx solid #e8f5e9;
		padding: 40rpx;
		margin-bottom: 32rpx;
		transition: all 0.2s ease;
	}
	
	.store-card:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 12rpx 48rpx 0 rgba(76, 175, 80, 0.18);
	}
	
	.store-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #e8f5e9;
	}
	
	.store-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #2e7d32;
		flex: 1;
	}
	
	.store-status {
		padding: 8rpx 20rpx;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-weight: 500;
	}
	
	.status-open {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		color: #fff;
	}
	
	.status-closed {
		background: #f5f5f5;
		color: #999;
	}
	
	.store-row {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 24rpx;
		gap: 16rpx;
	}
	
	.store-row:last-child {
		margin-bottom: 0;
	}
	
	.store-item {
		flex: 1 1 calc(50% - 8rpx);
		min-width: 0;
		display: flex;
		align-items: center;
		gap: 12rpx;
		padding: 16rpx 24rpx;
		background: #f8fdf8;
		border-radius: 16rpx;
		border: 2rpx solid #e8f5e9;
	}
	
	.store-item.full-width {
		flex: 1 1 100%;
	}
	
	.store-label {
		color: #388e3c;
		font-weight: 600;
		font-size: 28rpx;
		white-space: nowrap;
		margin-right: 30rpx;
		text-align: center;
	}
	
	.store-value {
		color: #2e7d32;
		font-size: 30rpx;
		font-weight: 500;
		word-break: break-all;
		flex: 1;
	}
	
	.loading {
		text-align: center;
		padding: 80rpx 40rpx;
		color: #6a9c6a;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20rpx;
	}
	
	.loading-text {
		font-size: 28rpx;
	}
	
	.loading-more {
		text-align: center;
		padding: 40rpx;
		color: #6a9c6a;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16rpx;
	}
	
	.loading-more-text {
		font-size: 28rpx;
	}
	
	.no-more-data {
		text-align: center;
		padding: 40rpx;
		color: #6a9c6a;
		font-size: 28rpx;
		opacity: 0.8;
	}
	
	.empty-state {
		text-align: center;
		padding: 120rpx 40rpx;
		color: #6a9c6a;
	}
	
	.empty-state-icon {
		font-size: 120rpx;
		margin-bottom: 32rpx;
		opacity: 0.6;
	}
	
	.empty-state-text {
		font-size: 32rpx;
		margin-bottom: 16rpx;
	}
	
	.empty-state-subtext {
		font-size: 28rpx;
		opacity: 0.8;
	}
	
	.store-actions {
		margin-top: 24rpx;
		padding-top: 24rpx;
		border-top: 2rpx solid #e8f5e9;
	}
	
	.edit-btn {
		width: 100%;
		height: 72rpx;
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		color: #fff;
		border: none;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 600;
		box-shadow: 0 4rpx 16rpx rgba(67, 233, 123, 0.3);
		transition: all 0.2s ease;
	}
	
	.edit-btn:active {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 20rpx rgba(67, 233, 123, 0.4);
	}
	
	/* 编辑弹窗样式 */
	.dialog-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}
	
	.edit-dialog {
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		width: 600rpx;
		max-width: 90%;
	}
	
	.dialog-header {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		padding: 32rpx 40rpx;
		text-align: center;
	}
	
	.dialog-title {
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
	}
	
	.dialog-content {
		padding: 40rpx;
	}
	
	.form-item {
		margin-bottom: 32rpx;
	}
	
	.form-item:last-child {
		margin-bottom: 0;
	}
	
	.form-label {
		font-size: 28rpx;
		color: #388e3c;
		font-weight: 600;
		margin-bottom: 16rpx;
		display: block;
	}
	
	.form-value {
		font-size: 30rpx;
		color: #2e7d32;
		font-weight: 500;
		display: block;
		padding: 16rpx 20rpx;
		background: #f8fdf8;
		border-radius: 12rpx;
		border: 2rpx solid #e8f5e9;
	}
	
	::v-deep .u-input {
		border: 2rpx solid #e8f5e9;
		border-radius: 12rpx;
		background: #f8fff8;
	}
	
	::v-deep .u-input__content {
		padding: 20rpx;
	}
	
	::v-deep .u-input__content__field-wrapper__field {
		font-size: 28rpx;
		color: #2e7d32;
	}
	
	.dialog-buttons {
		display: flex;
		gap: 24rpx;
		padding: 0 40rpx 40rpx;
	}
	
	.dialog-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
		transition: all 0.3s ease;
	}
	
	.cancel-dialog-btn {
		background: #f5f5f5;
		color: #666;
		border: 2rpx solid #e0e0e0;
	}
	
	.cancel-dialog-btn:active {
		background: #eeeeee;
	}
	
	.confirm-dialog-btn {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		color: #fff;
		border: none;
		box-shadow: 0 4rpx 16rpx rgba(67, 233, 123, 0.3);
	}
	
	.confirm-dialog-btn:active {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 20rpx rgba(67, 233, 123, 0.4);
	}
</style>