antissoft / lvqianmeiye_ERP

<template>
	<view class="container">
		<!-- 日期范围筛选 -->
		<view class="date-filter-card">
			<view class="date-filter-header">
				<!-- <text class="filter-title">日期筛选</text> -->
				<view class="date-range-display" @click="showCalendarFun">
					<text class="date-text">{{ formatDateRange() }}</text>
					<text class="calendar-icon">📅</text>
				</view>
			</view>
			<view class="debt-filter">
				<text class="debt-filter-label">是否欠款</text>
				<u-switch v-model="filterDebt" @change="handleDebtFilterChange" active-color="#43a047"></u-switch>
			</view>
		</view>
		<!-- 搜索栏 -->
		<view class="search-card">
			<view class="search-input-wrapper">
				<u-input 
					v-model="searchKeyword" 
					placeholder="搜索顾客的姓名或者电话" 
					@input="handleSearchInput"
					@focus="handleSearchFocus"
					@blur="handleSearchBlur"
					@clear="handleSearchClear"
					:clearable="true"
					class="search-input"
				>
					<template slot="suffix">
						<u-icon name="search" size="20" color="#909399" @click="handleSearch"></u-icon>
					</template>
				</u-input>
				<!-- 下拉选择列表 -->
				<view v-if="showSuggestions && searchSuggestions.length > 0" class="suggestions-dropdown">
					<scroll-view scroll-y class="suggestions-list">
						<view 
							v-for="(item, index) in searchSuggestions" 
							:key="index"
							class="suggestion-item"
							@click="selectSuggestion(item)"
						>
							<view class="suggestion-name">{{ item.khmc || '未知会员' }}</view>
							<view class="suggestion-phone">{{ item.sjh || '无' }}</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>



		<!-- 日历组件 -->
		<uni-calendar
			:range="true"
			ref="calendar"
			@confirm="handleDateConfirm"
			:insert="false"
		></uni-calendar>

		<!-- 数据列表 -->
		<view class="list-card">
			<view class="list-header">
				<text class="header-text">开单记录</text>
				<text class="total-count">共 {{ totalCount }} 条</text>
			</view>

			<scroll-view scroll-y class="list-content" @scrolltolower="loadMore">
				<view v-for="(item, index) in dataList" :key="index" class="list-item" @click="goToDetail(item)">
					<view class="item-header">
						<view class="customer-name">{{ item.kdhyc || item.kdhy || '未知会员' }}</view>
						<view class="order-time">{{ utils.formatTime(item.kdrq) }}</view>
					</view>
					<view class="item-details">
						<view class="detail-item">
							<text class="detail-label">整单业绩:</text>
							<text class="detail-value">¥{{ item.zdyj || 0 }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">实付业绩:</text>
							<text class="detail-value">¥{{ item.sfyj || 0 }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">欠款:</text>
							<text class="detail-value" :style="qkcomputed(item) > 0 ? 'color: #ef6c00;' : ''">¥{{ qkcomputed(item) }} </text>
						</view>
						<view class="detail-item">
							<text class="detail-label">付款方式:</text>
							<text class="detail-value">{{ item.fkfs || '无' }}</text>
						</view>
					</view>
					<view class="item-status">
						<view class="status-badge" :class="item.isEffective !='1'?'debt':'normal'">
							<!-- :class="getStatusClass(item)" -->
							{{ getStatusText(item) }}
						</view>
						<!-- 欠款大于0时显示补欠款按钮 -->
						<view v-if="qkcomputed(item) > 0 && item.isEffective == '1' && newuserInfo.gw != '科技老师'" class="repay-btn" @click.stop="handleRepay(item)">
							补欠款
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-if="!loading && dataList.length === 0" class="empty-state">
					<view class="empty-icon">📋</view>
					<view>暂无开单数据</view>
					<view v-if="searchKeyword" class="empty-search-tip">未找到匹配"{{ searchKeyword }}"的记录</view>
				</view>

				<!-- 加载状态 -->
				<view v-if="loading && dataList.length === 0" class="loading">正在加载数据...</view>

				<!-- 加载更多 -->
				<u-loadmore v-if="dataList.length > 0" :status="loadmoreStatus" :load-text="loadText"></u-loadmore>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import lxApi from '@/apis/modules/lx.js'
	import memberApi from '@/apis/modules/member.js'
	import uniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue'

	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				loading: false,
				searchKeyword: '',
				dataList: [],
				currentPage: 1,
				pageSize: 10,
				totalCount: 0,
				hasMore: true,
				searchTimer: null,
				loadmoreStatus: 'loadmore',
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				},
				userInfo: uni.getStorageSync('userInfo'),
				newuserInfo: uni.getStorageSync('newuserInfo'),
				// 日期范围筛选相关
				showCalendar: false,
				startDate: this.utils.getTodayString(),
				endDate: this.utils.getTodayString(),
				dateRange: this.utils.getTodayRange(),
				// 是否欠款筛选
				filterDebt: false,
				// 搜索建议相关
				searchSuggestions: [],
				showSuggestions: false,
				suggestionTimer: null,
				selectedMemberId: null
			}
		},

		watch: {
			// 监听搜索关键词变化，处理清空情况
			searchKeyword(newVal) {
				if (!newVal || newVal.trim() === '') {
					this.selectedMemberId = null
					this.searchSuggestions = []
					this.showSuggestions = false
				}
			}
		},

		onLoad() {
			this.initializePage()
		},
		onShow() {
			// 页面显示时刷新数据
			// this.refreshData()
		},

		onUnload() {
			// 页面卸载时清理定时器
			if (this.searchTimer) {
				clearTimeout(this.searchTimer)
				this.searchTimer = null
			}
			if (this.suggestionTimer) {
				clearTimeout(this.suggestionTimer)
				this.suggestionTimer = null
			}
		},

		methods: {
			showCalendarFun(){
				this.$refs.calendar.open();
			},
			qkcomputed(e){
				let qk = 0
				qk = Number(e.qk) - Number(e.paidDebt)
				return qk
			},
			// 初始化页面
			async initializePage() {
				try {
					// 检查登录状态
					await this.checkLoginStatus()

					// 加载第一页数据
					await this.loadLxList()
				} catch (error) {
					console.error('页面初始化失败:', error)
					this.showErrorState('页面初始化失败，请刷新重试')
				}
			},

			// 检查登录状态
			async checkLoginStatus() {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}
			},

			// 加载开单列表
			async loadLxList() {
				if (this.loading) return

				try {
					this.loading = true
					this.showLoadingState()

					const params = {
						currentPage: this.currentPage,
						pageSize: this.pageSize
					}
					// 添加用户ID参数
					if(this.newuserInfo.gw == '科技老师'){
						params.kjblsId = this.userInfo.userId
					} else if(this.newuserInfo.gw == '健康师') {
						params.jksId = this.userInfo.userId
					} else if(this.newuserInfo.gw == '店助' || this.newuserInfo.gw == '店长') {
						params.djmd = this.newuserInfo.mdid || '暂无'
					} else {
						if (this.userInfo && this.userInfo.userId) {
							params.CreateUser = this.userInfo.userId
						}
					}
					
					// 添加搜索关键字
					if (this.searchKeyword) {
						// 如果已选择会员ID，直接使用；否则通过搜索获取
						if (this.selectedMemberId) {
							params.kdhy = this.selectedMemberId
						} else {
							params.kdhy = await this.utils.gethy(this.searchKeyword)
						}
					}

					// 添加日期范围参数
					if (this.dateRange && this.dateRange.length === 2) {
						params.kdrq = `${this.dateRange[0]},${this.dateRange[1]}`
					}

					// 添加是否欠款筛选参数
					if (this.filterDebt) {
						params.qk = 0
					}

					const res = await lxApi.getLxList(params)

					if (res.code === 200) {
						const data = res.data
						this.totalCount = data.pagination?.total || 0
						const list = data.list || []

						if (this.currentPage === 1) {
							// 第一页，清空列表
							this.dataList = list
						} else {
							// 加载更多，追加到列表
							this.dataList = [...this.dataList, ...list]
						}

						// 判断是否还有更多数据
						this.hasMore = list.length === this.pageSize

						// 更新加载状态
						if (this.hasMore) {
							this.loadmoreStatus = 'loadmore'
						} else {
							this.loadmoreStatus = 'nomore'
						}
					} else {
						throw new Error(res.message || '获取数据失败')
					}

				} catch (error) {
					console.error('加载开单列表失败:', error)
					if (this.currentPage === 1) {
						this.showErrorState('加载数据失败，请重试')
					} else {
						this.showMessage('加载更多数据失败', 'error')
					}
				} finally {
					this.loading = false
				}
			},

			// 搜索输入处理
			handleSearchInput() {
				// v-model 已经更新了 searchKeyword，直接使用
				this.selectedMemberId = null
				this.showSuggestions = false
				
				// 清除之前的定时器
				if (this.suggestionTimer) {
					clearTimeout(this.suggestionTimer)
				}
				
				// 如果输入为空，隐藏建议列表
				if (!this.searchKeyword || this.searchKeyword.trim() === '') {
					this.searchSuggestions = []
					this.showSuggestions = false
					return
				}
				
				// 延迟搜索建议，避免频繁请求
				this.suggestionTimer = setTimeout(() => {
					this.loadSearchSuggestions(this.searchKeyword.trim())
				}, 300)
			},
			
			// 搜索框获得焦点
			handleSearchFocus() {
				if (this.searchKeyword && this.searchSuggestions.length > 0) {
					this.showSuggestions = true
				}
			},
			handleSearchClear() {
				this.searchKeyword = ''
				this.selectedMemberId = null
				this.searchSuggestions = []
				this.showSuggestions = false
				this.resetAndSearch()
			},
			// 搜索框失去焦点
			handleSearchBlur() {
				// 延迟隐藏，确保点击选项时能触发
				setTimeout(() => {
					this.showSuggestions = false
				}, 200)
			},
			
			// 加载搜索建议
			async loadSearchSuggestions(keyword) {
				try {
					const params = {
						currentPage: 1,
						pageSize: 10,
						keyword: keyword
					}
					
					const result = await memberApi.getMemberList(params)
					if (result.code === 200 && result.data) {
						this.searchSuggestions = result.data.list || []
						this.showSuggestions = this.searchSuggestions.length > 0
					} else {
						this.searchSuggestions = []
						this.showSuggestions = false
					}
				} catch (error) {
					console.error('加载搜索建议失败:', error)
					this.searchSuggestions = []
					this.showSuggestions = false
				}
			},
			
			// 选择搜索建议
			selectSuggestion(item) {
				this.searchKeyword = item.khmc || item.sjh || ''
				this.selectedMemberId = item.id
				this.showSuggestions = false
				// 执行搜索
				this.resetAndSearch()
			},
			
			// 搜索
			handleSearch() {
				// 清除之前的定时器
				if (this.searchTimer) {
					clearTimeout(this.searchTimer)
				}

				// 设置新的定时器，延迟500ms执行搜索
				this.searchTimer = setTimeout(() => {
					this.resetAndSearch()
				}, 500)
			},

			// 重置并搜索
			async resetAndSearch() {
				this.currentPage = 1
				this.hasMore = true
				this.loadmoreStatus = 'loadmore'
				this.dataList = []
				await this.loadLxList()
			},

			// 刷新数据
			refreshData() {
				this.currentPage = 1
				this.hasMore = true
				this.loadmoreStatus = 'loadmore'
				this.dataList = []
				this.loadLxList()
			},

			// 加载更多
			async loadMore() {
				if (this.loading || !this.hasMore || this.loadmoreStatus === 'nomore') return

				this.loadmoreStatus = 'loading'
				this.currentPage++
				await this.loadLxList()
			},

			// 跳转到详情页
			goToDetail(item) {
				console.log('开单详情:', item)
				uni.navigateTo({
					url: `/pages/lx-detail/lx-detail?id=${item.id}`
				})
			},

			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取状态样式类
			getStatusClass(item) {
				// 根据业务逻辑判断状态
				if (item.qk && parseFloat(item.qk) > 0) {
					return 'debt' // 有欠款
				} else if (item.sfck === '是') {
					return 'deduct' // 储扣
				} else {
					return 'normal' // 正常
				}
			},

			// 获取状态文本
			getStatusText(item) {
				if (item.isEffective == '1') {
					return '正常'
				} else {
					return '作废'
				}
			},

			// 显示加载状态
			showLoadingState() {
				// 加载状态由模板控制
			},

			// 显示错误状态
			showErrorState(message) {
				uni.showToast({
					title: message,
					icon: 'none'
				})
			},

			// 显示消息提示
			showMessage(message, type = 'info') {
				uni.showToast({
					title: message,
					icon: type === 'error' ? 'error' : 'none'
				})
			},

			// 处理补欠款
			handleRepay(item) {
				console.log('补欠款:', item)
				// 这里可以跳转到补欠款页面或弹出补欠款对话框
				uni.showModal({
					title: '补欠款',
					content: `确认要为 ${item.kdhyc || item.kdhy || '未知会员'} 补欠款 ¥${item.qk} 吗？`,
					success: (res) => {
						if (res.confirm) {
							// 用户确认，执行补欠款逻辑
							// this.executeRepay(item)
							uni.navigateTo({
								url: `/pages/lx/lx?supplementBillingId=${item.id}&kdhy=${item.kdhy}&qk=${this.qkcomputed(item)}`
							})
						}
					}
				})
			},

			// 格式化日期范围显示
			formatDateRange() {
				if (!this.startDate || !this.endDate) {
					return '请选择日期'
				}
				
				const startDate = new Date(this.startDate)
				const endDate = new Date(this.endDate)
				
				return `${uni.$u.timeFormat(startDate,'yyyy-mm-dd')} - ${uni.$u.timeFormat(endDate,'yyyy-mm-dd')}`
			},

			// 处理日期确认
			handleDateConfirm(e) {
				console.log('日期选择结果:', e)
				
				// uni-calendar组件返回的是包含start和end的对象
				if (e && e.range && e.range.data) {
					// 更新dateRange用于API调用（时间戳格式）
					const startTime = new Date(e.range.data[0]).getTime()
					const endTime = new Date(e.range.data[e.range.data.length-1]).getTime()
					this.dateRange = [startTime, endTime]
					
					// 更新startDate和endDate用于显示
					this.startDate = e.range.data[0]
					this.endDate = e.range.data[e.range.data.length-1]
					
					// 日期变化时重新加载数据
					this.resetAndSearch()
				}
			},

			// 处理欠款筛选变化
			handleDebtFilterChange() {
				this.resetAndSearch()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
		padding: 40rpx 40rpx;
		box-sizing: border-box;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.back-btn {
		background: #fff;
		border: none;
		border-radius: 24rpx;
		padding: 16rpx 24rpx;
		color: #388e3c;
		font-size: 28rpx;
		box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.15);
		transition: all 0.2s ease;
	}

	.header-title {
		text-align: center;
		color: #388e3c;
		font-size: 36rpx;
		font-weight: bold;
		letter-spacing: 4rpx;
		flex: 1;
	}

	.search-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		padding: 30rpx;
		margin-bottom: 40rpx;
		position: relative;
		box-sizing: border-box;
		width: 100%;
	}

	.search-input-wrapper {
		position: relative;
		width: 100%;
	}

	.search-input {
		width: 100%;
		box-sizing: border-box;
		border-radius: 18rpx;
	}

	.suggestions-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.15);
		margin-top: 8rpx;
		z-index: 999;
		max-height: 600rpx;
		overflow: hidden;
	}

	.suggestions-list {
		max-height: 600rpx;
	}

	.suggestion-item {
		padding: 24rpx 32rpx;
		border-bottom: 2rpx solid #f0f0f0;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.suggestion-item:last-child {
		border-bottom: none;
	}

	.suggestion-item:active {
		background: #f8fff8;
	}

	.suggestion-name {
		font-size: 28rpx;
		color: #2e7d32;
		font-weight: 500;
		margin-bottom: 8rpx;
	}

	.suggestion-phone {
		font-size: 24rpx;
		color: #6a9c6a;
	}

	.date-filter-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		padding: 40rpx;
		margin-bottom: 40rpx;
	}

	.date-filter-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.filter-title {
		font-size: 28rpx;
		color: #2e7d32;
		font-weight: 600;
	}

	.date-range-display {
		display: flex;
		align-items: center;
		background: #f9fff9;
		border: 3rpx solid #c8e6c9;
		border-radius: 24rpx;
		padding: 24rpx 32rpx;
		cursor: pointer;
		transition: all 0.2s ease;
		// min-width: 300rpx;
		justify-content: space-between;
		width: 100%;
		box-sizing: border-box;
	}

	.date-range-display:active {
		border-color: #43a047;
		background: #fff;
		transform: scale(0.98);
	}

	.date-text {
		font-size: 28rpx;
		color: #2e7d32;
		flex: 1;
	}

	.calendar-icon {
		font-size: 32rpx;
		margin-left: 16rpx;
	}

	.list-card {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.1);
		overflow: hidden;
		max-height: 70vh;
	}

	.list-header {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		padding: 32rpx 40rpx;
		color: #fff;
		font-weight: 600;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-text {
		font-size: 32rpx;
	}

	.total-count {
		font-size: 28rpx;
		opacity: 0.9;
	}

	.list-content {
		max-height: calc(70vh - 120rpx);
		overflow-y: auto;
	}

	.list-item {
		padding: 32rpx 40rpx;
		border-bottom: 2rpx solid #f0f0f0;
		cursor: pointer;
		transition: all 0.2s ease;
		position: relative;
	}

	.list-item:hover {
		background: #f8fff8;
		transform: translateX(8rpx);
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.customer-name {
		font-weight: 600;
		color: #2e7d32;
		font-size: 32rpx;
	}

	.order-time {
		font-size: 24rpx;
		color: #6a9c6a;
	}

	.item-details {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16rpx;
		margin-bottom: 16rpx;
	}

	.detail-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #555;
	}

	.detail-label {
		color: #6a9c6a;
		margin-right: 12rpx;
		font-size: 24rpx;
	}

	.detail-value {
		color: #2e7d32;
		font-weight: 500;
	}

	.item-status {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 16rpx;
		margin-top: 16rpx;
	}

	.status-badge {
		display: inline-block;
		padding: 8rpx 24rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
	}

	.status-badge.normal {
		background: #e8f5e9;
		color: #2e7d32;
		border: 2rpx solid #c8e6c9;
	}

	.status-badge.debt {
		background: #fff3e0;
		color: #ef6c00;
		border: 2rpx solid #ffe0b2;
	}

	.status-badge.deduct {
		background: #e3f2fd;
		color: #1976d2;
		border: 2rpx solid #bbdefb;
	}

	.repay-btn {
		background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
		color: #fff;
		padding: 12rpx 24rpx;
		border-radius: 24rpx;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
		transition: all 0.2s ease;
		cursor: pointer;
	}

	.repay-btn:active {
		transform: scale(0.95);
		box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.4);
	}

	.loading {
		text-align: center;
		padding: 80rpx 40rpx;
		color: #6a9c6a;
		font-size: 28rpx;
	}

	.empty-state {
		text-align: center;
		padding: 120rpx 40rpx;
		color: #6a9c6a;
	}

	.empty-icon {
		font-size: 120rpx;
		margin-bottom: 32rpx;
		opacity: 0.5;
	}

	.empty-search-tip {
		margin-top: 16rpx;
		font-size: 28rpx;
		opacity: 0.7;
	}

	.debt-filter {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 24rpx;
		padding-top: 24rpx;
		border-top: 2rpx solid #f0f0f0;
	}

	.debt-filter-label {
		font-size: 28rpx;
		color: #2e7d32;
		font-weight: 500;
	}




</style>