antissoft / lvqianmeiye_ERP

<template>
	<view class="transfer-container">
		<view class="form-card">
			<view class="form-content">
				<form @submit="handleFormSubmit">
					<!-- 转出会员 -->
					<view class="form-group">
						<text class="form-label">转出会员</text>
						<view class="input-wrapper">
							<view class="custom-select" @tap="openSelectModal('fromMember')">
								<text class="select-text">{{ formData.fromMemberName || '请选择转出会员' }}</text>
								<text class="select-arrow">▼</text>
							</view>
						</view>
					</view>

					<!-- 转入会员 -->
					<view class="form-group">
						<text class="form-label">转入会员</text>
						<view class="input-wrapper">
							<view class="custom-select" @tap="openSelectModal('toMember')">
								<text class="select-text">{{ formData.toMemberName || '请选择转入会员' }}</text>
								<text class="select-arrow">▼</text>
							</view>
						</view>
					</view>

					<!-- 转卡品项明细 -->
					<view class="form-group">
						<text class="form-label">转卡品项明细</text>
						<view >
							<view v-for="(item, index) in transferItems" :key="index" class="transfer-row">
								<!-- 第一行：品项选择和删除按钮 -->
								<view class="transfer-row-first">
									<view class="transfer-select" @tap="selectTransferItem(index)">
										<text class="select-text">{{ item.itemName || '选择品项' }}</text>
										<text class="select-arrow">▼</text>
									</view>
									<button @click="deleteTransferRow(index)" class="transfer-delete">删除</button>
								</view>

								<!-- 第二行：数量和单价 -->
								<view class="transfer-row-second">
									<u-input v-model="item.transferQuantity" placeholder="数量" type="number" 
										class="transfer-count" @input="updateTransferQuantity(index, $event)" />
									<view class="transfer-unit-price" v-if="item.RemainingCount">
										<text class="price-value">剩余：{{ item.RemainingCount }}</text>
									</view>
									<view class="transfer-unit-price">
										<text class="price-value">总价：{{ item.itemPrice * item.transferQuantity || 0}}</text>
									</view>
								</view>
							</view>
						</view>
						<button type="primary" size="normal" @click="addTransferRow" class="btn-add-transfer">
							添加转卡品项
						</button>
					</view>

					<!-- 备注 -->
					<view class="form-group">
						<text class="form-label">备注</text>
						<view class="input-wrapper">
							<textarea v-model="formData.remarks" placeholder="请输入备注" :maxlength="500" :count="true"
								class="textarea-input" />
						</view>
					</view>

					<!-- 签字 -->
					<view class="form-group">
						<text class="form-label">签字</text>
						<view class="input-wrapper">
							<view v-if="!signatureFile" class="signature-placeholder">
								<button @click="openSignatureModal" class="btn-signature-placeholder">
									<text class="signature-placeholder-text">点击进行签字</text>
								</button>
							</view>
							<view v-if="signatureFile" class="signature-preview">
								<text class="preview-label">签字预览：</text>
								<image @tap="previewSignature(signatureFile)" :src="signatureFile"
									class="signature-image" mode="aspectFit" />
								<view class="signature-actions">
									<button @click="openSignatureModal" class="btn-re-signature">重新签字</button>
									<button @click="clearSignature" class="btn-clear-signature">清除签字</button>
								</view>
							</view>
						</view>
					</view>

					<!-- 提交按钮 -->
					<view class="btn-group">
						<button type="submit" class="btn btn-primary" :style="{opacity: isSubmitting?1:0.5}" 
							@tap="isSubmitting?submitTransfer():null">{{ isSubmitting?'确认转卡':'提交中...' }}</button>
					</view>
				</form>
			</view>
		</view>

		<!-- 选择弹窗 -->
		<SearchSelectModal :show="showModal" :title="modalTitle" :options="currentOptions" :loading="modalLoading"
			:has-more="hasMoreData" :search-param="searchParam" @confirm="handleModalConfirm" @close="closeModal"
			@load-more="handleLoadMore" @refresh="handleRefresh" @search="handleSearch" />

		<!-- 全屏签字弹窗 -->
		<view v-if="showSignatureModal" class="signature-modal-overlay" @tap="closeSignatureModal">
			<view class="signature-modal" @tap.stop>
				<view class="signature-modal-header">
					<text class="signature-modal-title">转卡签字</text>
					<button @click="closeSignatureModal" class="btn-close-modal">×</button>
				</view>
				<view class="signature-modal-content">
					<SignaturePad :width="800" :height="500" :line-width="4"
						stroke-color="#2e7d32" @confirm="handleSignatureConfirm" @clear="handleSignatureClear"
						ref="signaturePadModal" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import SearchSelectModal from '@/components/SearchSelectModal.vue'
	import SignaturePad from '@/components/SignaturePad.vue'
	import memberApi from '@/apis/modules/member.js'
	import lxApi from '@/apis/modules/lx.js'
	import config from '@/common/config.js'
	
	export default {
		components: {
			SearchSelectModal,
			SignaturePad
		},
		data() {
			return {
				isSubmitting: true,
				baseUrl: config.getApiBaseUrl(),
				
				// 表单数据
				formData: {
					fromMemberId: '',
					fromMemberName: '',
					toMemberId: '',
					toMemberName: '',
					remarks: ''
				},

				// 转卡品项列表
				transferItems: [],

				// 签字文件
				signatureFile: '',

				// 弹窗相关
				showModal: false,
				modalTitle: '',
				currentSelectField: '',
				currentOptions: [],
				modalLoading: false,
				hasMoreData: true,
				currentPage: 1,
				pageSize: 20,
				searchKeyword: '',
				searchParam: '',

				// 用户信息
				userInfo: null,

				// 选中的值
				selectedValues: {
					fromMember: null,
					toMember: null
				},

				// 当前操作的转卡品项索引
				currentTransferIndex: -1,

				// 签字弹窗
				showSignatureModal: false,
				scrollTop: 0
			}
		},
		onLoad(options) {
			this.initializePage();
		},
		onUnload() {
			this.enablePageScroll();
		},
		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;
					}
					
					// 添加默认的转卡品项行
					this.addTransferRow();
				} catch (error) {
					console.error('页面初始化失败:', error);
					uni.showToast({
						title: '页面初始化失败',
						icon: 'none'
					});
				}
			},

			// 添加转卡品项行
			addTransferRow() {
				this.transferItems.push({
					billingItemId: '',
					transferQuantity: 1,
					itemName: '',
					itemPrice: 0
				});
			},

			// 删除转卡品项行
			deleteTransferRow(index) {
				if (this.transferItems.length > 1) {
					this.transferItems.splice(index, 1);
				} else {
					uni.showToast({
						title: '至少需要保留一个转卡品项',
						icon: 'none'
					});
				}
			},

			// 选择转卡品项
			selectTransferItem(index) {
				this.currentTransferIndex = index;
				this.openSelectModal('transferItem');
			},

			// 更新转卡品项数量
			updateTransferQuantity(index, value) {
				const count = parseInt(value) || 1;
				this.transferItems[index].transferQuantity = count < 1 ? 1 : count;
			},

			// 打开选择弹窗
			async openSelectModal(fieldId) {
				this.currentSelectField = fieldId;
				this.showModal = true;
				this.modalTitle = '加载中...';
				this.modalLoading = true;
				this.currentPage = 1;
				this.hasMoreData = true;
				this.searchKeyword = '';
				this.currentOptions = [];

				try {
					// 设置搜索参数
					switch (fieldId) {
						case 'fromMember':
						case 'toMember':
							this.searchParam = 'khmc';
							this.modalTitle = fieldId === 'fromMember' ? '选择转出会员' : '选择转入会员';
							break;
						case 'transferItem':
							this.searchParam = 'itemName';
							this.modalTitle = '选择转卡品项';
							break;
					}

					await this.loadOptionsData(fieldId, 1);
				} catch (error) {
					console.error('获取选项数据失败:', error);
					this.modalTitle = '加载失败';
					this.currentOptions = [];
					uni.showToast({
						title: '数据加载失败，请检查网络连接',
						icon: 'none'
					});
				} finally {
					this.modalLoading = false;
				}
			},

			// 关闭弹窗
			closeModal() {
				this.showModal = false;
				this.currentSelectField = '';
				this.currentOptions = [];
				this.modalLoading = false;
				this.hasMoreData = true;
				this.currentPage = 1;
				this.searchKeyword = '';
			},

			// 加载选项数据
			async loadOptionsData(fieldId, page = 1, searchKeyword = '') {
				let options = [];

				switch (fieldId) {
					case 'fromMember':
					case 'toMember':
						options = await this.getMemberOptions(page, searchKeyword);
						break;
					case 'transferItem':
						this.hasMoreData = false;
						options = await this.getTransferItemOptions(page, searchKeyword);
						break;
				}

				// 为每个选项添加全局唯一的 key
				options = options.map((option, index) => ({
					...option,
					uniqueKey: `${fieldId}_${page}_${index}_${Date.now()}`
				}));

				if (page === 1) {
					this.currentOptions = options;
				} else {
					this.currentOptions = [...this.currentOptions, ...options];
				}

				// 检查是否还有更多数据
				if (options.length < this.pageSize) {
					this.hasMoreData = false;
				}
			},

			// 处理弹窗确认
			async handleModalConfirm(selectedOption) {
				if (this.currentSelectField && selectedOption) {
					console.log('selectedOption', selectedOption);
					switch (this.currentSelectField) {
						case 'fromMember':
							this.formData.fromMemberId = selectedOption.value;
							this.formData.fromMemberName = selectedOption.label;
							this.selectedValues.fromMember = selectedOption.value;
							break;
						case 'toMember':
							this.formData.toMemberId = selectedOption.value;
							this.formData.toMemberName = selectedOption.label;
							this.selectedValues.toMember = selectedOption.value;
							break;
					case 'transferItem':
						if (this.currentTransferIndex >= 0) {
							// 先校验已经选择的品项有没有这个
							const existingIndex = this.transferItems.findIndex((item, index) => 
								index !== this.currentTransferIndex && item.billingItemId === selectedOption.value
							);
							if (existingIndex !== -1) {
								uni.showToast({
									title: '该品项已存在，请勿重复添加',
									icon: 'none',
									duration: 2000
								});
								this.closeModal();
								return;
							}
							
							this.transferItems[this.currentTransferIndex].billingItemId = selectedOption.value;
							this.transferItems[this.currentTransferIndex].itemName = selectedOption.label;
							this.transferItems[this.currentTransferIndex].itemPrice = selectedOption.itemPrice || 0;
							this.transferItems[this.currentTransferIndex].RemainingCount = selectedOption.RemainingCount || 0;
						}
						break;
					}
				}
			},

			// 处理加载更多
			async handleLoadMore(page) {
				if (this.currentSelectField && this.hasMoreData && !this.modalLoading) {
					this.modalLoading = true;
					try {
						await this.loadOptionsData(this.currentSelectField, page, this.searchKeyword);
					} catch (error) {
						console.error('加载更多数据失败:', error);
						uni.showToast({
							title: '加载失败',
							icon: 'none'
						});
					} finally {
						this.modalLoading = false;
					}
				}
			},

			// 处理刷新
			async handleRefresh() {
				if (this.currentSelectField) {
					this.currentPage = 1;
					this.hasMoreData = true;
					this.searchKeyword = '';
					await this.loadOptionsData(this.currentSelectField, 1);
				}
			},

			// 处理搜索
			async handleSearch(searchKeyword) {
				if (this.currentSelectField) {
					this.searchKeyword = searchKeyword;
					this.currentPage = 1;
					this.hasMoreData = true;
					this.modalLoading = true;

					try {
						await this.loadOptionsData(this.currentSelectField, 1, searchKeyword);
					} catch (error) {
						console.error('搜索失败:', error);
						uni.showToast({
							title: '搜索失败',
							icon: 'none'
						});
					} finally {
						this.modalLoading = false;
					}
				}
			},

			// 获取会员选项
			async getMemberOptions(page = 1, searchKeyword = '') {
				try {
					const params = {
						currentPage: page,
						pageSize: this.pageSize
					};

					if (searchKeyword) {
						params.keyword = searchKeyword;
					}

					const result = await memberApi.getMemberList(params);
					if (result.code === 200 && result.data) {
						return result.data.list.map((item, index) => ({
							value: item.id,
							label: item.khmc,
							sjh: item.sjh,
							khlxName: item.khlxName,
							khlx: item.khlx,
							subtitle: '客户类型：' + (item.khlxName || '无') + '；手机号：' + (item.sjh || '无') +
								'；健康师：' + (item.mrsName || '无') + '；门店：' + (item.gsmdName || '无') + '；',
						}));
					}
					return [];
				} catch (error) {
					console.error('获取会员列表出错:', error);
					return [];
				}
			},

			// 获取转卡品项选项（转出会员的剩余品项）
			async getTransferItemOptions(page = 1, searchKeyword = '') {
				try {
					// 需要先选择转出会员才能获取剩余品项
					if (!this.selectedValues.fromMember) {
						uni.showToast({
							title: '请先选择转出会员',
							icon: 'none'
						});
						return [];
					}

					const params = {
						memberId: this.selectedValues.fromMember,
						currentPage: page,
						pageSize: this.pageSize
					};

					if (searchKeyword) {
						params.itemName = searchKeyword;
					}

					const result = await lxApi.getMemberRemainingItems(params);
					if (result.code === 200 && result.data) {
						return result.data.RemainingItems
							.filter(item => (item.RemainingCount || 0) > 0) // 只返回有剩余数量的品项
							.map((item, index) => ({
								value: item.BillingItemId,
								label: item.ItemName,
								itemPrice: item.ItemPrice || 0,
								RemainingCount: item.RemainingCount || 0,
								subtitle: '剩余: ' + (item.RemainingCount || 0) + '；类型：' + item.SourceType +
									';单价：' + item.ItemPrice +';备注：' + (item.Remark || '无')+ ';'
							}));
					}
					return [];
				} catch (error) {
					console.error('获取转出会员剩余品项出错:', error);
					return [];
				}
			},

			// 签字相关方法
			handleSignatureConfirm(signatureData) {
				this.signatureFile = signatureData.dataUrl;
				this.showSignatureModal = false;
				this.enablePageScroll();
				uni.showToast({
					title: '签字确认成功',
					icon: 'success'
				});
			},

			handleSignatureClear() {
				this.signatureFile = '';
			},

			clearSignature() {
				this.signatureFile = '';
				if (this.$refs.signaturePadModal) {
					this.$refs.signaturePadModal.clearSignature();
				}
				uni.showToast({
					title: '签字已清除',
					icon: 'success'
				});
			},

			// 全屏签字相关方法
			openSignatureModal() {
				this.showSignatureModal = true;
				this.disablePageScroll();
			},

			closeSignatureModal() {
				this.showSignatureModal = false;
				this.enablePageScroll();
			},

			previewSignature(e) {
				console.log('previewSignature', e);
				uni.previewImage({
					urls: [e]
				});
			},

			// 禁止页面滚动
			disablePageScroll() {
				this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
				document.body.style.overflow = 'hidden';
				document.body.style.position = 'fixed';
				document.body.style.width = '100%';
				document.body.style.top = `-${this.scrollTop}px`;
			},

			// 恢复页面滚动
			enablePageScroll() {
				document.body.style.overflow = '';
				document.body.style.position = '';
				document.body.style.width = '';
				document.body.style.top = '';
				if (this.scrollTop !== undefined) {
					window.scrollTo(0, this.scrollTop);
				}
			},

			// 表单提交
			handleFormSubmit(event) {
				event.preventDefault();
				this.submitTransfer();
			},

			// 表单验证
			validateForm() {
				// 验证转出会员
				if (!this.selectedValues.fromMember) {
					uni.showToast({
						title: '请选择转出会员',
						icon: 'none'
					});
					return false;
				}

				// 验证转入会员
				if (!this.selectedValues.toMember) {
					uni.showToast({
						title: '请选择转入会员',
						icon: 'none'
					});
					return false;
				}

				// 验证转出会员和转入会员不能相同
				if (this.selectedValues.fromMember === this.selectedValues.toMember) {
					uni.showToast({
						title: '转出会员和转入会员不能相同',
						icon: 'none'
					});
					return false;
				}

				// 验证转卡品项
				if (!this.transferItems || this.transferItems.length === 0) {
					uni.showToast({
						title: '请至少添加一个转卡品项',
						icon: 'none'
					});
					return false;
				}

				// 验证每个转卡品项
				for (let i = 0; i < this.transferItems.length; i++) {
					const item = this.transferItems[i];
					console.error(item)
					// 验证品项是否选择
					if (!item.billingItemId) {
						uni.showToast({
							title: `第${i + 1}个转卡品项请选择品项`,
							icon: 'none'
						});
						return false;
					}

					// 验证数量
					if (!item.transferQuantity || parseInt(item.transferQuantity) <= 0) {
						uni.showToast({
							title: `第${i + 1}个转卡品项数量必须大于0`,
							icon: 'none'
						});
						return false;
					}
					// 验证剩余数量不能超过剩余数量
					if (item.RemainingCount && parseInt(item.transferQuantity) > item.RemainingCount) {
						uni.showToast({
							title: `第${i + 1}个转卡品项剩余数量不能超过剩余数量`,
							icon: 'none'
						});
						return false;
					}
				}

				// 验证签字
				// if (!this.signatureFile) {
				// 	uni.showToast({
				// 		title: '请进行签字',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }

				return true;
			},

			// 上传签字文件
			async uploadSignatureFile() {
				try {
					const result = await lxApi.UploadBase64Image({
						"base64Data": this.signatureFile,
						"imageType": "png",
						"fileName": "transferSignature.png"
					});
					
					if (result.code == 200) {
						return result.data;
					}
					return null;
				} catch (error) {
					console.error('上传签字文件失败:', error);
					return null;
				}
			},

			// 提交转卡
			async submitTransfer() {
				try {
					// 验证表单
					if (!this.validateForm()) {
						return;
					}

					this.isSubmitting = false;
					uni.showLoading({
						title: '正在提交...'
					});
					let hyqz = []
					if(this.signatureFile) {
						let memberinfo = await this.uploadSignatureFile()
						console.error(memberinfo)
						if (memberinfo) {
							hyqz.push({
								name: memberinfo.name,
								fileId: memberinfo.name,
								url: memberinfo.url
							});
						}
					}
					

					// 准备提交数据
					const transferData = {
						fromMemberId: this.selectedValues.fromMember,
						toMemberId: this.selectedValues.toMember,
						signatureFile: JSON.stringify(hyqz),
						transferItems: this.transferItems.map(item => ({
							billingItemId: item.billingItemId,
							transferQuantity: parseInt(item.transferQuantity),
							itemName: item.itemName,
							itemPrice: parseFloat(item.itemPrice)
						})),
						remarks: this.formData.remarks,
						storeId: this.userInfo.mdid
					};

					console.log('transferData', transferData);
					// return;
					// 调用转卡接口
					const result = await lxApi.transferCard(transferData);
					uni.hideLoading();

					if (result.code == 200) {
						uni.showToast({
							title: '转卡成功！',
							icon: 'success'
						});
						this.clearForm();
						// 返回上一页
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					} else {
						uni.showToast({
							title: result.msg || '转卡失败！',
							icon: 'none'
						});
					}
					this.isSubmitting = true;

				} catch (error) {
					uni.hideLoading();
					console.error('转卡失败:', error);
					uni.showToast({
						title: '网络错误，请稍后重试',
						icon: 'none'
					});
					this.isSubmitting = true;
				}
			},

			// 清空表单
			clearForm() {
				this.formData = {
					fromMemberId: '',
					fromMemberName: '',
					toMemberId: '',
					toMemberName: '',
					remarks: ''
				};

				this.selectedValues = {
					fromMember: null,
					toMember: null
				};

				this.transferItems = [];
				this.signatureFile = '';
				if (this.$refs.signaturePadModal) {
					this.$refs.signaturePadModal.clearSignature();
				}

				// 重新添加默认转卡品项
				this.addTransferRow();
			}
		}
	}
</script>

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

	.form-card {
		background: #fff;
		border-radius: 36rpx;
		box-shadow: 0 8rpx 48rpx 0 rgba(76, 175, 80, 0.10);
		border: 3rpx solid #c8e6c9;
		overflow: hidden;
	}

	.form-content {
		padding: 48rpx;
	}

	.form-group {
		margin-bottom: 40rpx;
	}

	.form-group:last-child {
		margin-bottom: 0;
	}

	.form-label {
		display: block;
		margin-bottom: 16rpx;
		font-weight: bold;
		color: #388e3c;
		letter-spacing: 2rpx;
		font-size: 28rpx;
	}

	.input-wrapper {
		position: relative;
	}

	.custom-select {
		position: relative;
		background: #f9fff9;
		border: 3rpx solid #c8e6c9;
		border-radius: 20rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		z-index: 10;
		min-height: 80rpx;
		box-sizing: border-box;
	}

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

	.select-arrow {
		position: absolute;
		right: 24rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #6a9c6a;
		font-size: 24rpx;
		pointer-events: none;
	}

	.textarea-input {
		background: #f9fff9;
		border: 3rpx solid #c8e6c9;
		border-radius: 20rpx;
		padding: 24rpx;
		font-size: 28rpx;
		color: #2e7d32;
		min-height: 200rpx;
		box-sizing: border-box;
		width: 100%;
	}

	/* 转卡品项相关样式 */
	.transfer-container {
		margin-bottom: 32rpx;
	}

	.transfer-row {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		margin-bottom: 32rpx;
		padding: 32rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 20rpx;
		background: #fafafa;
	}

	.transfer-row-first {
		display: flex;
		gap: 24rpx;
		align-items: center;
	}

	.transfer-row-second {
		display: flex;
		gap: 16rpx;
		align-items: center;
		width: 100%;
	}

	.transfer-select {
		flex: 1;
		padding: 24rpx;
		border: 3rpx solid #c8e6c9;
		border-radius: 20rpx;
		font-size: 28rpx;
		background: #f9fff9;
		color: #2e7d32;
		cursor: pointer;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.transfer-count {
		min-width: 80rpx;
		padding: 20rpx;
		border: 3rpx solid #c8e6c9;
		border-radius: 20rpx;
		font-size: 26rpx;
		background: #f9fff9;
		color: #2e7d32;
		text-align: center;
	}

	.transfer-unit-price {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 16rpx 0;
		background: #e8f5e9;
		border-radius: 12rpx;
		border: 2rpx solid #c8e6c9;
		width: 30%;
		justify-content: center;
		text-align: center;
	}

	.price-value {
		font-size: 24rpx;
		color: #1b5e20;
		font-weight: bold;
	}

	.transfer-delete {
		width: 20%;
		padding: 16rpx 0;
		border-radius: 20rpx;
		background: #f5f5f5;
		color: #666;
		font-size: 22rpx;
	}

	.btn-add-transfer {
		width: 100%;
		padding: 10rpx 40rpx;
		border: 3rpx solid #43a047;
		border-radius: 20rpx;
		background: #e8f5e9;
		color: #2e7d32;
		font-size: 28rpx;
		font-weight: bold;
	}

	.btn-group {
		display: flex;
		gap: 24rpx;
		margin-top: 48rpx;
	}

	.btn {
		flex: 1;
		padding: 10rpx 40rpx;
		border: none;
		border-radius: 20rpx;
		font-size: 28rpx;
		font-weight: bold;
		cursor: pointer;
		transition: all 0.2s ease;
		letter-spacing: 2rpx;
	}

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

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

	/* 签字相关样式 */
	.signature-preview {
		margin-top: 24rpx;
		padding: 24rpx;
		background: #f9fff9;
		border: 2rpx solid #c8e6c9;
		border-radius: 16rpx;
	}

	.preview-label {
		display: block;
		font-size: 26rpx;
		color: #2e7d32;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.signature-image {
		width: 100%;
		max-width: 300rpx;
		height: 120rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		background: #fff;
		margin-bottom: 16rpx;
	}

	.signature-actions {
		display: flex;
		gap: 16rpx;
		margin-top: 16rpx;
	}

	.btn-re-signature {
		flex: 1;
		padding: 12rpx 24rpx;
		background: #2e7d32;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		font-size: 24rpx;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.btn-re-signature:hover {
		background: #1b5e20;
	}

	.btn-clear-signature {
		flex: 1;
		padding: 12rpx 24rpx;
		background: #f5f5f5;
		color: #666;
		border: 2rpx solid #ddd;
		border-radius: 12rpx;
		font-size: 24rpx;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.btn-clear-signature:hover {
		background: #e0e0e0;
	}

	/* 签字占位符样式 */
	.signature-placeholder {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 200rpx;
		border: 2rpx dashed #c8e6c9;
		border-radius: 16rpx;
		background: #f9fff9;
	}

	.btn-signature-placeholder {
		background: #2e7d32;
		color: #fff;
		border: none;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
		box-shadow: 0 4rpx 16rpx rgba(46, 125, 50, 0.3);
	}

	.btn-signature-placeholder:hover {
		background: #1b5e20;
		transform: translateY(-2rpx);
		box-shadow: 0 8rpx 32rpx rgba(46, 125, 50, 0.4);
	}

	.signature-placeholder-text {
		color: #fff;
	}

	/* 全屏签字弹窗样式 */
	.signature-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.signature-modal {
		width: 100%;
		background: #fff;
		overflow: hidden;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.signature-modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 40rpx;
		background: #f8f9fa;
		border-bottom: 2rpx solid #e9ecef;
	}

	.signature-modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #2e7d32;
	}

	.btn-close-modal {
		width: 60rpx;
		height: 60rpx;
		background: #f5f5f5;
		border: none;
		border-radius: 50%;
		font-size: 36rpx;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s ease;
		margin: 0;
	}

	.btn-close-modal:hover {
		background: #e0e0e0;
		color: #333;
	}

	.signature-modal-content {
		background: #fff;
		flex: 1;
		width: 100%;
	}

	/* 全屏模式下SignaturePad组件样式调整 */
	.signature-modal-content .signature-container {
		height: 100%;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}

	.signature-modal-content .signature-header {
		padding: 20rpx 30rpx;
		background: #f8f9fa;
		border-bottom: 2rpx solid #e9ecef;
	}

	.signature-modal-content .signature-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #2e7d32;
	}

	.signature-modal-content .btn-clear,
	.signature-modal-content .btn-confirm {
		padding: 16rpx 32rpx;
		font-size: 28rpx;
		font-weight: 500;
		border-radius: 12rpx;
	}

	.signature-modal-content .btn-clear {
		background: #f5f5f5;
		color: #666;
		border: 2rpx solid #ddd;
	}

	.signature-modal-content .btn-clear:hover {
		background: #e0e0e0;
		color: #333;
	}

	.signature-modal-content .btn-confirm {
		background: #2e7d32;
		color: #fff;
		border: none;
	}

	.signature-modal-content .btn-confirm:hover {
		background: #1b5e20;
		transform: translateY(-2rpx);
	}

	.signature-modal-content .signature-pad {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
	}

	.signature-modal-content .signature-tips {
		padding: 20rpx;
		text-align: center;
		background: #f8f9fa;
		border-top: 2rpx solid #e9ecef;
	}

	.signature-modal-content .tips-text {
		font-size: 24rpx;
		color: #666;
	}

	// @media (max-width: 750rpx) {
	// 	.form-content {
	// 		padding: 40rpx;
	// 	}

	// 	.transfer-row-second {
	// 		gap: 16rpx;
	// 	}

	// 	.signature-preview {
	// 		padding: 20rpx;
	// 	}

	// 	.preview-label {
	// 		font-size: 24rpx;
	// 	}

	// 	.signature-image {
	// 		max-width: 250rpx;
	// 		height: 100rpx;
	// 	}

	// 	.btn-clear-signature {
	// 		padding: 10rpx 20rpx;
	// 		font-size: 22rpx;
	// 	}
	// }
</style>