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="expansionData" 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">{{ expansionData.eventName || '未知' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">顾客姓名</text>
								<text class="info-value">{{ expansionData.customerName || expansionData.gkxm || '未知' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">电话号码</text>
								<text class="info-value">{{ expansionData.customerPhone || expansionData.dhhm || '未知' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">拓客时间</text>
								<text class="info-value">{{ utils.formatTime(expansionData.expansionTime || expansionData.tksj) }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">微信状态</text>
								<view class="status-badge" :class="expansionData.isAddWeChat == '是'?'yes':'no'">
									<!-- :class="getWechatStatusClass(expansionData)" -->
									{{ getWechatStatusText(expansionData) }}
								</view>
							</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">{{ expansionData.buyNumber || expansionData.gmzs || 0 }} 张</text>
							</view>
							<view class="info-item">
								<text class="info-label">支付方式</text>
								<text class="info-value">{{ expansionData.paymentMethod || expansionData.zffs || '无' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">拓客人员</text>
								<text class="info-value">{{ expansionData.expansionUserName || '未知' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">所属战队</text>
								<text class="info-value">{{ expansionData.teamName || '未知' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">门店</text>
								<text class="info-value">{{ expansionData.storeName || '未知' }}</text>
							</view>
						</view>
					</view>
					
					<!-- 备注信息 -->
					<view class="info-section">
						<view class="section-title">备注信息</view>
						<view class="info-item full-width">
							<text class="info-label">备注</text>
							<text class="info-value">{{ expansionData.remarks || expansionData.bz || '无备注信息' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 操作按钮区域 -->
		<view class="action-buttons" v-if="expansionData">
			<view 
				class="action-btn edit-btn" 
				@tap="showEditRemarkModal"
				@click="showEditRemarkModal"
			>
				修改备注
			</view>
		</view>
		
		<!-- 修改备注弹窗 -->
		<view v-if="showRemarkModal" class="dialog-overlay" @click="closeRemarkModal">
			<view class="remark-modal" @click.stop>
				<view class="modal-header">
					<text class="modal-title">修改备注</text>
					<text class="close-btn" @click="closeRemarkModal">×</text>
				</view>
				<view class="modal-content">
					<textarea 
						v-model="editRemarkText" 
						placeholder="请输入备注信息"
						:maxlength="200"
						class="remark-textarea"
					></textarea>
					<text class="char-count">{{ editRemarkText.length }}/200</text>
				</view>
				<view class="modal-footer">
					<button class="modal-btn cancel-btn" @click="closeRemarkModal">取消</button>
					<button class="modal-btn save-btn" @click="saveRemark" :disabled="savingRemark">
						{{ savingRemark ? '保存中...' : '保存' }}
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import expansionApi from '@/apis/modules/expansion.js'

	export default {
		data() {
			return {
				loading: false,
				error: '',
				expansionId: null,
				expansionData: null,
				// 备注编辑相关
				showRemarkModal: false,
				editRemarkText: '',
				savingRemark: false
			}
		},

		// API引用
		API: expansionApi,

		onLoad(options) {
			this.initializePage(options)
		},

		methods: {
			// 初始化页面
			async initializePage(options) {
				try {
					// 检查登录状态
					await this.checkLoginStatus()
					
					// 获取URL参数中的ID
					this.expansionId = options.id
					
					if (!this.expansionId) {
						this.error = '缺少拓客ID参数'
						return
					}
					
					// 加载拓客详情
					await this.loadExpansionDetail()
				} catch (error) {
					console.error('页面初始化失败:', error)
					this.error = '页面初始化失败，请刷新重试'
				}
			},

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

			// 加载拓客详情
			async loadExpansionDetail() {
				try {
					this.loading = true
					this.error = ''
					
					const res = await this.API.getExpansionDetail(this.expansionId)
					
					if (res.code === 200) {
						this.expansionData = res.data
					} else {
						throw new Error(res.message || '获取详情失败')
					}
					
				} catch (error) {
					console.error('加载拓客详情失败:', error)
					this.error = '加载详情失败，请重试'
				} finally {
					this.loading = false
				}
			},

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

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

			// 获取微信状态样式类
			getWechatStatusClass(data) {
				const isWechat = (data.isAddWeChat || data.sfjwx) === '是'
				return isWechat ? 'yes' : 'no'
			},

			// 获取微信状态文本
			getWechatStatusText(data) {
				const isWechat = (data.isAddWeChat || data.sfjwx) === '是'
				return isWechat ? '已加微信' : '未加微信'
			},

			// 显示修改备注弹窗
			showEditRemarkModal() {
				if (!this.expansionData) {
					uni.showToast({
						title: '数据未加载完成',
						icon: 'none'
					})
					return
				}
				
				this.editRemarkText = this.expansionData.remarks || this.expansionData.bz || ''
				this.showRemarkModal = true
			},

			// 关闭修改备注弹窗
			closeRemarkModal() {
				this.showRemarkModal = false
				this.editRemarkText = ''
			},

			// 保存备注
			async saveRemark() {
				try {
					this.savingRemark = true
					console.error({
						...this.expansionData,
						remarks: this.editRemarkText
					})
					// return
					// 调用API更新备注
					const res = await this.API.updateExpansionRemark({
						...this.expansionData,
						remarks: this.editRemarkText
					})
					
					if (res.code === 200) {
						// 更新本地数据
						this.expansionData.remarks = this.editRemarkText
						this.expansionData.bz = this.editRemarkText
						
						// 关闭弹窗
						this.closeRemarkModal()
						
						// 显示成功提示
						uni.showToast({
							title: '备注修改成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: res.msg || '修改失败',
							icon: 'success'
						})
					}
					
				}  finally {
					this.savingRemark = 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: block;
	}

	.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;
	}

	.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;
	}

	/* 操作按钮样式 */
	.action-buttons {
		display: flex;
		gap: 24rpx;
		margin-top: 32rpx;
		padding: 0;
		position: relative;
		z-index: 5;
	}

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

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

	.edit-btn:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 8rpx 25rpx rgba(67, 233, 123, 0.4);
	}

	.edit-btn:active {
		transform: translateY(0);
		background: linear-gradient(135deg, #38d96b 0%, #2ee5c7 100%);
	}

	/* 弹窗样式 */
	.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;
	}

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

	.modal-header {
		background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
		padding: 32rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

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

	.close-btn {
		color: #fff;
		font-size: 40rpx;
		font-weight: bold;
		line-height: 1;
		cursor: pointer;
	}

	.modal-content {
		padding: 40rpx;
	}

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

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

	.char-count {
		display: block;
		text-align: right;
		font-size: 24rpx;
		color: #999;
		margin-top: 16rpx;
	}

	.modal-footer {
		display: flex;
		gap: 24rpx;
		padding: 0 40rpx 40rpx;
	}

	.modal-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
		transition: all 0.3s ease;
	}

	.cancel-btn {
		background: #f5f5f5;
		color: #666;
		// border: 2rpx solid #e0e0e0;
	}

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

	.save-btn:disabled {
		background: #ccc;
		color: #999;
		box-shadow: none;
	}

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

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

	// 	.remark-modal {
	// 		width: 90%;
	// 		margin: 0 20rpx;
	// 	}

	// 	.modal-footer {
	// 		flex-direction: column;
	// 		gap: 16rpx;
	// 	}

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