antissoft / lvqianmeiye_ERP

<template>
	<view class="container">
		<!-- 详情卡片 -->
		<view class="detail-card">
			<view class="card-header">耗卡详情</view>
			<view class="detail-content">
				<!-- 加载状态 -->
				<view v-if="loading" class="loading">正在加载详情...</view>
				
				<!-- 错误状态 -->
				<view v-else-if="error" class="error-state">
					<view>{{ error }}</view>
					<u-button class="retry-btn" @click="retryLoad" type="primary" size="small">重试</u-button>
				</view>
				
				<!-- 详情内容 -->
				<view v-else-if="consumeData" class="info-sections">
					<!-- 基本信息 -->
					<view class="info-section">
						<view class="section-title">基本信息</view>
						<view class="info-grid">
							<view class="info-item">
								<text class="info-label">会员姓名</text>
								<text class="info-value">{{ consumeData.hymc || consumeData.hy || '未知' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">客户类型</text>
								<text class="info-value">{{ consumeData.gklx || '无' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">耗卡时间</text>
								<text class="info-value">{{ formatTime(consumeData.hksj) }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">门店</text>
								<text class="info-value">{{ consumeData.mdmc || '无' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">是否含科技部</text>
								<view class="status-badge" :class="consumeData.sfykjb === '是' ? 'yes' : 'no'">
									{{ consumeData.sfykjb || '无' }}
								</view>
							</view>
							<view class="info-item">
								<text class="info-label">是否作废</text>
								<view class="status-badge" :class="consumeData&&consumeData.isEffective == '1' ? 'yes' : 'no'">
									{{ consumeData.isEffective == '1'?'正常':'作废' }}
								</view>
							</view>
							<view class="info-item" v-if="consumeData.appointmentId">
								<text class="info-label">关联预约号</text>
								<text class="info-value" style="color: #43a047;" @click.stop="goToAppointment(consumeData.appointmentId)">{{ consumeData.appointmentId || '无' }}</text>
							</view>
						</view>
					</view>
					
					<!-- 消费信息 -->
					<view class="info-section">
						<view class="section-title">消费信息</view>
						<view class="info-grid">
							<view class="info-item">
								<text class="info-label">消费金额</text>
								<text class="info-value amount">¥{{ consumeData.xfje || 0 }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">手工费用</text>
								<text class="info-value amount">¥{{ consumeData.sgfy || 0 }}</text>
							</view>
						</view>
					</view>
					<!-- 加班信息 -->
					<view class="info-section">
						<view class="section-title">加班信息</view>
						<view class="info-grid">
							<view class="info-item">
								<text class="info-label">是否加班</text>
								<text class="info-value amount">{{ consumeData.overtimeCoefficient>0?'是':'否' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">加班系数</text>
								<text class="info-value amount">{{ consumeData.overtimeCoefficient>0?consumeData.overtimeCoefficient:'无' }}</text>
							</view>
						</view>
					</view>
					<!-- 品项明细 -->
					<view class="info-section" v-if="consumeData.lqXhPxmxList && consumeData.lqXhPxmxList.length > 0">
						<view class="section-title">品项明细</view>
						<view class="px-list">
							<view v-for="(px, index) in consumeData.lqXhPxmxList" :key="index" class="px-item">
								<view class="px-header">
									<text class="px-name">{{ px.pxmc || '未知品项' }}</text>
									<text class="px-type">{{ px.sourceType || '购买' }}</text>
								</view>
								<view class="px-details">
									<view class="px-detail-item">
										<text class="px-label">次数:</text>
										<text class="px-value">{{ px.originalProjectNumber || 1 }}</text>
									</view>
									<view class="px-detail-item">
										<text class="px-label">单价:</text>
										<text class="px-value">¥{{ px.pxjg || 0 }}</text>
									</view>
									<view class="px-detail-item">
										<text class="px-label">总价:</text>
										<text class="px-value amount">¥{{ (px.pxjg * px.projectNumber) || 0 }}</text>
									</view>
								</view>
								
								<!-- 健康师业绩 -->
								<view class="staff-section" v-if="px.lqXhJksyjList && px.lqXhJksyjList.length > 0">
									<view class="staff-title">健康师业绩</view>
									<view class="staff-list">
										<view v-for="(jks, jksIndex) in px.lqXhJksyjList" :key="jksIndex" class="staff-item">
											<view class="staff-info">
												<text class="staff-name">{{ jks.jksxm || '未知' }}{{ jks.isAccompanied == '1'?'（ '+'陪同'+' )' :''}}</text>
												<text class="staff-amount">¥{{ jks.jksyj || 0 }}</text>
											</view>
											<view class="staff-details">
												<view class="staff-detail-item">
													<text class="staff-detail-label">次数:</text>
													<text class="staff-detail-value">{{ jks.kdpxNumber || 0 }}</text>
												</view>
												<view class="staff-detail-item">
													<text class="staff-detail-label">手工费:</text>
													<text class="staff-detail-value">¥{{ jks.laborCost || 0 }}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
								
								<!-- 科技部业绩 -->
								<view class="staff-section" v-if="px.lqXhKjbsyjList && px.lqXhKjbsyjList.length > 0">
									<view class="staff-title">科技部业绩</view>
									<view class="staff-list">
										<view v-for="(kjb, kjbIndex) in px.lqXhKjbsyjList" :key="kjbIndex" class="staff-item">
											<view class="staff-info">
												<text class="staff-name">{{ kjb.kjblsxm || '未知' }}</text>
												<text class="staff-amount">¥{{ kjb.kjblsyj || 0 }}</text>
											</view>
											<view class="staff-details">
												<view class="staff-detail-item">
													<text class="staff-detail-label">次数:</text>
													<text class="staff-detail-value">{{ kjb.hdpxNumber || 0 }}</text>
												</view>
												<view class="staff-detail-item">
													<text class="staff-detail-label">手工费:</text>
													<text class="staff-detail-value">¥{{ kjb.laborCost || 0 }}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 会员签字 -->
					<view class="info-section" v-if="consumeData && consumeData.hyqz && consumeData.hyqz.length > 0">
						<view class="section-title">会员签字</view>
						<view class="file-section">
							<view class="file-list">
								<view @click="previewSignature(consumeData.hyqz, 0)" class="file-item">
									<image :src="baseUrl + consumeData.hyqz[0].url" style="width: 100%;" mode="widthFix" />
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 备注信息 -->
				<view class="info-section" v-if="consumeData&&consumeData.isEffective != '1'">
					<view class="section-title">备注信息</view>
					<view class="info-item full-width"  >
							<text class="info-label">作废备注</text>
							<text class="info-value">{{ consumeData.cancelRemark || '无' }}</text>
					</view>
								
				</view>
				<!-- 操作按钮区域 -->
				<view class="action-buttons" v-if="consumeData && consumeData.isEffective == '1' && isCurrentMonth && newuserInfo.gw != '科技老师'">
					<button 
						class="action-btn cancel-btn" 
						@click="handleCancel" 
						type="error" 
						size="large"
						:loading="cancelLoading"
					>
						作废
					</button>
					<button 
						class="action-btn reopen-btn" 
						@click="handleReopen" 
						type="primary" 
						size="large"
						:loading="reopenLoading"
					>
						修改
					</button>
				</view>
			</view>
		</view>
		
		<!-- 作废备注对话框 -->
		<view v-if="showCancelDialog" class="dialog-overlay" @click="cancelCancelDialog">
			<view class="cancel-dialog" @click.stop>
				<view class="dialog-header">
					<text class="dialog-title">作废耗卡</text>
				</view>
				<view class="dialog-content">
					<text class="dialog-tip">确定要作废这个耗卡吗？此操作不可撤销。</text>
					<view class="remark-section">
						<text class="remark-label">作废原因：</text>
						<textarea 
							v-model="cancelRemark" 
							class="remark-input" 
							placeholder="请输入作废原因..."
							maxlength="200"
							:show-count="true"
						></textarea>
					</view>
				</view>
				<view class="dialog-buttons">
					<button class="dialog-btn cancel-dialog-btn" @click="cancelCancelDialog">取消</button>
					<button 
						class="dialog-btn confirm-dialog-btn" 
						@click="confirmCancel"
						:disabled="!cancelRemark.trim()"
						:loading="cancelLoading"
					>
						确认作废
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import consumeApi from '@/apis/modules/consume.js'
	import config from '@/common/config.js'

	export default {
		data() {
			return {
				newuserInfo: uni.getStorageSync('newuserInfo'),
				baseUrl: config.getImgBaseUrl(),
				loading: false,
				error: '',
				consumeId: null,
				consumeData: null,
				cancelLoading: false,
				reopenLoading: false,
				cancelRemark: '', // 作废备注
				showCancelDialog: false // 显示作废对话框
			}
		},

		computed: {
			// 判断耗卡日期是否在本月
			isCurrentMonth() {
				return true
				if (!this.consumeData || !this.consumeData.hksj) return false
				
				const consumeDate = new Date(this.consumeData.hksj)
				const currentDate = new Date()
				
				return consumeDate.getFullYear() === currentDate.getFullYear() &&
					   consumeDate.getMonth() === currentDate.getMonth()
			}
		},

		// API引用
		API: consumeApi,

		onLoad(options) {
			this.consumeId = options.id
			this.initializePage(options)
		},
		onShow() {
			this.loadConsumeDetail()
		},

		methods: {
			goToAppointment(appointmentId) {
				uni.navigateTo({
					url: '/pages/appointment-detail/appointment-detail?id='+appointmentId
				})
			},
			previewSignature(listfile, index) {
				let listfilenew = listfile.map(item => this.baseUrl + item.url)
				uni.previewImage({
					urls: listfilenew,
					current: index
				});
			},
			
			// 初始化页面
			async initializePage(options) {
				try {
					// 检查登录状态
					await this.checkLoginStatus()
					
					// 获取URL参数中的ID
					// this.consumeId = options.id
					
					if (!this.consumeId) {
						this.error = '缺少耗卡ID参数'
						return
					}
					
					// 加载耗卡详情
					// await this.loadConsumeDetail()
				} catch (error) {
					console.error('页面初始化失败:', error)
					this.error = '页面初始化失败，请刷新重试'
				}
			},

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

			// 加载耗卡详情
			async loadConsumeDetail() {
				try {
					this.loading = true
					this.error = ''
					
					const res = await this.API.getConsumeDetail(this.consumeId)
					
					if (res.code === 200) {
						this.consumeData = res.data
						this.consumeData.hyqz = this.consumeData.signatureFile?JSON.parse(this.consumeData.signatureFile):[]
					} else {
						throw new Error(res.message || '获取详情失败')
					}
					
				} catch (error) {
					console.error('加载耗卡详情失败:', error)
					this.error = '加载详情失败，请重试'
				} finally {
					this.loading = false
				}
			},

			// 重试加载
			async retryLoad() {
				await this.loadConsumeDetail()
			},

			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '无'
				const date = new Date(timestamp)
				return date.toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit'
				})
			},

			// 作废耗卡
			handleCancel() {
				this.cancelRemark = ''
				this.showCancelDialog = true
			},

			// 取消作废对话框
			cancelCancelDialog() {
				this.showCancelDialog = false
				this.cancelRemark = ''
			},

			// 确认作废
			async confirmCancel() {
				if (!this.cancelRemark.trim()) {
					uni.showToast({
						title: '请输入作废原因',
						icon: 'none'
					})
					return
				}

				try {
					this.cancelLoading = true
					
					const res = await this.API.cancelConsume(this.consumeId, this.cancelRemark.trim())
					
					if (res.code === 200) {
						uni.showToast({
							title: '作废成功',
							icon: 'success'
						})
						// 关闭对话框
						this.showCancelDialog = false
						this.cancelRemark = ''
						// 重新加载详情
						await this.loadConsumeDetail()
					} else {
						uni.showToast({
							title: res.msg || '作废失败，请重试',
							icon: 'none'
						})
					}
					
				} catch (error) {
					console.error(error)
					
					uni.showToast({
						title: error.msg || '作废失败，请重试',
						icon: 'none'
					})
				} finally {
					this.cancelLoading = false
				}
			},

			// 修改耗卡
			async handleReopen() {
				uni.navigateTo({
					url: '/pages/member-consume/member-consume?id=' + this.consumeId
				})
			},

			// 显示确认对话框
			showConfirmDialog(title, content) {
				return new Promise((resolve) => {
					uni.showModal({
						title: title,
						content: content,
						success: (res) => {
							resolve(res.confirm)
						},
						fail: () => {
							resolve(false)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
		padding: 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;
	}

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

	.card-header {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		padding: 32rpx 40rpx;
		color: #fff;
		font-weight: 600;
		letter-spacing: 2rpx;
		font-size: 32rpx;
	}

	.detail-content {
		padding: 40rpx;
	}

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

	.error-state {
		text-align: center;
		padding: 80rpx 40rpx;
		color: #c62828;
	}

	.retry-btn {
		margin-top: 24rpx;
		background: #43a047;
		color: #fff;
		border-radius: 16rpx;
		padding: 16rpx 32rpx;
		font-size: 28rpx;
	}

	.info-sections {
		/* 详情内容样式 */
		display: flex;
		flex-direction: column;
	}

	.info-section {
		margin-bottom: 48rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #2e7d32;
		margin-bottom: 32rpx;
		padding-bottom: 16rpx;
		border-bottom: 4rpx solid #e8f5e9;
	}

	.info-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32rpx;
	}

	.info-item {
		display: flex;
		flex-direction: column;
	}

	.info-item.full-width {
		grid-column: 1 / -1;
	}

	.info-label {
		font-size: 24rpx;
		color: #6a9c6a;
		margin-bottom: 8rpx;
		font-weight: 500;
	}

	.info-value {
		font-size: 28rpx;
		color: #2e7d32;
		font-weight: 500;
		padding: 16rpx 24rpx;
		background: #f8fff8;
		border-radius: 16rpx;
		border: 2rpx solid #e8f5e9;
	}

	.info-value.amount {
		color: #43a047;
		font-weight: 600;
	}

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

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

	.status-badge.no {
		background: #ffebee;
		color: #c62828;
		border: 2rpx solid #ffcdd2;
	}

	/* 品项明细样式 */
	.px-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.px-item {
		background: #f8fff8;
		border: 2rpx solid #e8f5e9;
		border-radius: 20rpx;
		padding: 24rpx;
	}

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

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

	.px-type {
		font-size: 24rpx;
		color: #6a9c6a;
		background: #e8f5e9;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
	}

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

	.px-detail-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.px-label {
		font-size: 22rpx;
		color: #6a9c6a;
		margin-bottom: 4rpx;
	}

	.px-value {
		font-size: 26rpx;
		color: #2e7d32;
		font-weight: 500;
	}

	.px-value.amount {
		color: #43a047;
		font-weight: 600;
	}

	/* 员工业绩样式 */
	.staff-section {
		margin-top: 16rpx;
		padding-top: 16rpx;
		border-top: 2rpx solid #e8f5e9;
	}

	.staff-title {
		font-size: 24rpx;
		color: #6a9c6a;
		margin-bottom: 12rpx;
		font-weight: 500;
	}

	.staff-list {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.staff-item {
		background: #fff;
		padding: 16rpx;
		border-radius: 12rpx;
		border: 1rpx solid #e8f5e9;
	}

	.staff-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.staff-name {
		font-size: 26rpx;
		color: #2e7d32;
		font-weight: 500;
	}

	.staff-amount {
		font-size: 26rpx;
		color: #43a047;
		font-weight: 600;
	}

	.staff-details {
		display: flex;
		gap: 24rpx;
	}

	.staff-detail-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.staff-detail-label {
		font-size: 20rpx;
		color: #6a9c6a;
		margin-bottom: 4rpx;
	}

	.staff-detail-value {
		font-size: 24rpx;
		color: #2e7d32;
		font-weight: 500;
	}

	/* 文件信息样式 */
	.file-section {
		margin-bottom: 24rpx;
	}

	.file-list {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.file-item {
		display: flex;
		align-items: center;
		background: #f8fff8;
		padding: 16rpx 20rpx;
		border-radius: 12rpx;
		border: 2rpx solid #e8f5e9;
	}

	/* 操作按钮样式 */
	.action-buttons {
		display: flex;
		gap: 24rpx;
		margin-top: 40rpx;
		padding-top: 32rpx;
		border-top: 2rpx solid #e8f5e9;
	}

	.action-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 24rpx;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
		transition: all 0.3s ease;
	}

	.cancel-btn {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
		color: #fff;
		border: none;
		box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.3);
	}

	.cancel-btn:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 8rpx 25rpx rgba(255, 107, 107, 0.4);
	}

	.reopen-btn {
		background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
		color: #fff;
		border: none;
		box-shadow: 0 6rpx 20rpx rgba(67, 233, 123, 0.3);
	}

	.reopen-btn:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 8rpx 25rpx 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;
	}

	.cancel-dialog {
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		width: 600rpx;
		max-width: 90%;
	}

	.dialog-header {
		background: linear-gradient(120deg, #ff6b6b 0%, #ee5a52 100%);
		padding: 32rpx 40rpx;
		text-align: center;
	}

	.dialog-title {
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
	}

	.dialog-content {
		padding: 40rpx;
	}

	.dialog-tip {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 32rpx;
		display: block;
	}

	.remark-section {
		margin-top: 24rpx;
	}

	.remark-label {
		font-size: 28rpx;
		color: #2e7d32;
		font-weight: 500;
		margin-bottom: 16rpx;
		display: block;
	}

	.remark-input {
		width: 100%;
		min-height: 120rpx;
		padding: 20rpx;
		border: 2rpx solid #e8f5e9;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #2e7d32;
		background: #f8fff8;
		box-sizing: border-box;
		resize: none;
	}

	.remark-input:focus {
		border-color: #43a047;
		background: #fff;
	}

	.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:hover {
		background: #eeeeee;
	}

	.confirm-dialog-btn {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
		color: #fff;
		border: none;
		box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.3);
	}

	.confirm-dialog-btn:hover:not(:disabled) {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.4);
	}

	.confirm-dialog-btn:disabled {
		background: #ccc;
		color: #999;
		box-shadow: none;
		cursor: not-allowed;
	}

	// 响应式设计
	// @media (max-width: 750rpx) {
	// 	.info-grid {
	// 		grid-template-columns: 1fr;
	// 	}
		
	// 	.px-details {
	// 		grid-template-columns: 1fr;
	// 	}
		
	// 	.staff-details {
	// 		flex-direction: column;
	// 		gap: 12rpx;
	// 	}

	// 	.action-buttons {
	// 		flex-direction: column;
	// 		gap: 16rpx;
	// 	}

	// 	.action-btn {
	// 		height: 96rpx;
	// 	}

	// 	.dialog-buttons {
	// 		flex-direction: column;
	// 		gap: 16rpx;
	// 	}

	// 	.dialog-btn {
	// 		height: 88rpx;
	// 	}
	// }
</style>