zdtap-uniapp-main/pages/index/registration.vue

<template>
	<view class="page-container">
		<view class="page-content">
			<!-- 步骤条 -->
			<view class="step-bar">
				<view class="step-icons flex align-center">
					<view><image src="@/static/one.png" class="step-icon" mode="aspectFit"></image></view>
					<view><image src="@/static/arrow-right.png" class="step-arrow" mode="aspectFit"></image></view>
					<view><image src="@/static/two.png" class="step-icon" mode="aspectFit"></image></view>
					<view><image src="@/static/arrow-right.png" class="step-arrow" mode="aspectFit"></image></view>
					<view><image src="@/static/three.png" class="step-icon" mode="aspectFit"></image></view>
				</view>
				<view class="step-labels flex align-center">
					<view>提交申请</view>
					<view>平台审核</view>
					<view>享受返利</view>
				</view>
			</view>

			<!-- 咨询入口 -->
			<view class="consult-box flex align-center justify-between">
				<text class="consult-text">认证门店助手，帮你解决认证问题，快速上手赢取品牌返利。</text>
				<button class="consult-btn" @click="handleConsult">咨询</button>
			</view>

			<!-- 所需材料说明 -->
			<view class="materials-box">
				<view class="section-title">所需材料</view>
				<view class="material-item">
					<view class="material-info">
						<text class="material-name">1.营业执照</text>
						<text class="material-desc">需提供有效期内商家本人的，与门头照片相符合的营业执照。</text>
					</view>
					<image src="@/static/bg/bgs.png" mode="aspectFit" class="material-image"></image>
				</view>
				<view class="material-item">
					<view class="material-info">
						<text class="material-name">2.门头照片</text>
						<text class="material-desc">需提供营业执照对应的门店，门头照片一张。</text>
					</view>
					<image src="@/static/bg/bgs.png" mode="aspectFit" class="material-image"></image>
				</view>
			</view>

			<!-- 门店资料表单 -->
			<view class="store-form">
				<view class="section-title">门店资料</view>
				
				<!-- 所在地区 -->
				<view class="form-item">
					<input 
						v-model="displayArea" 
						placeholder="所在地区" 
						readonly 
						disabled 
						@click.stop="handleShowAreaPicker" 
						class="form-input location-input"
					/>
				</view>

				<!-- 门店地址 -->
				<view class="form-item">
					<view class="location-picker" @click="getMyLocation">
						<text class="location-text" :class="{ 'is-placeholder': !form.address }">
							{{ form.address || '门店地址' }}
						</text>
						<text class="cuIcon-locationfill location-icon"></text>
					</view>
				</view>

				<!-- 门店名称 -->
				<view class="form-item">
					<input 
						v-model="form.bar_name" 
						placeholder="门店名称" 
						class="form-input"
					/>
				</view>

				<!-- 联系电话 -->
				<view class="form-item">
					<input 
						v-model="form.bar_contact_phone" 
						placeholder="联系电话" 
						type="number" 
						maxlength="11" 
						@input="validatePhone" 
						class="form-input"
					/>
				</view>

				<!-- 营业执照上传 -->
				<view class="form-item">
					<view class="upload-box">
						<text class="upload-label">营业执照</text>
						<view class="upload-right">
							<text v-if="uploadStatus.business_license === 'uploading'" class="upload-progress">上传中...</text>
							<text v-else-if="uploadStatus.business_license === 'success'" class="upload-success">✓</text>
							<text 
								class="upload-btn" 
								:class="{'is-success': form.business_license}" 
								@click="handleUpload('business_license')"
							>
								{{ form.business_license ? '重新上传' : '点击上传' }}
							</text>
						</view>
					</view>
					<view v-if="previewImages.business_license" class="image-preview">
						<image :src="previewImages.business_license" mode="aspectFit"></image>
					</view>
				</view>

				<!-- 门头照片上传 -->
				<view class="form-item">
					<view class="upload-box">
						<text class="upload-label">门头照片</text>
						<view class="upload-right">
							<text v-if="uploadStatus.storefront_photo === 'uploading'" class="upload-progress">上传中...</text>
							<text v-else-if="uploadStatus.storefront_photo === 'success'" class="upload-success">✓</text>
							<text 
								class="upload-btn" 
								:class="{'is-success': form.storefront_photo}" 
								@click="handleUpload('storefront_photo')"
							>
								{{ form.storefront_photo ? '重新上传' : '点击上传' }}
							</text>
						</view>
					</view>
					<view v-if="previewImages.storefront_photo" class="image-preview">
						<image :src="previewImages.storefront_photo" mode="aspectFit"></image>
					</view>
				</view>
			</view>

			<!-- 地区选择器组件 -->
			<regionPicker 
				:show.sync="showPopup" 
				@selected="onAreaSelected" 
				@close="handlePopupClose" 
			/>

			<!-- 咨询弹窗 -->
			<uni-popup ref="consultRefs" type="center" :is-mask-click="false">
				<view class="consult-popup">
					<view class="popup-close" @click="consultClick">
						<image src="@/static/icons/cencels.svg" mode="aspectFit" class="close-icon"></image>
					</view>
					<view class="popup-content"></view>
				</view>
			</uni-popup>

			<!-- 成功提示弹窗 -->
			<uni-popup ref="successRef" type="center" :is-mask-click="false">
				<view class="success-popup">
					<image src="@/static/cg.png" mode="aspectFit" class="success-icon"></image>
					<text class="success-text">提交成功，等待审核</text>
					<button class="success-btn" @click="toHome">进入首页</button>
				</view>
			</uni-popup>
		</view>

		<!-- 底部提交按钮 -->
		<view class="submit-bar">
			<button 
				class="submit-btn" 
				:disabled="!isFormValid" 
				@click="submitForm"
			>
				提交认证门店
			</button>
		</view>
	</view>
</template>

<script>
import regionPicker from '@/components/regionPicker.vue'
import { barRegister } from '@/api/login.js'
import { base_url } from '@/api/config.js'

export default {
	name: 'Registration',
	
	components: {
		regionPicker
	},

	data() {
		return {
			// 表单数据
			form: {
				bar_name: '', // 酒吧名称（必填，最大255）
				bar_contact_phone: '', // 联系电话（最大20）
				province: '', // 所在省（最大20）
				city: '', // 所在城市（最大20）
				district: '', // 所在区（最大50）
				address: '', // 详细地址（最大255）
				business_license: '', // 营业执照（最大255）
				storefront_photo: '', // 门头照片（最大255）
				latitude: '', // 纬度
				longitude: '', // 经度
				openId: '', // 用户openId
				auth_state: 0, // 认证状态（0：待审核）
			},
			// 用于显示的完整地区文本
			displayArea: '',
			// 图片预览
			previewImages: {
				business_license: '',
				storefront_photo: ''
			},
			// 上传状态
			uploadStatus: {
				business_license: '', // '', 'uploading', 'success', 'error'
				storefront_photo: ''
			},
			// 地区选择
			showPopup: false,
			// 用户信息
			userInfo: {},
		}
	},

	computed: {
		// 表单验证
		isFormValid() {
			return (
				this.form.bar_name && // 酒吧名称
				this.form.bar_contact_phone && // 联系电话
				this.checkPhoneFormat() && // 手机号格式
				this.form.province && // 省
				this.form.city && // 市
				this.form.district && // 区
				this.form.address && // 详细地址
				this.form.latitude && // 纬度
				this.form.longitude && // 经度
				this.form.business_license && // 营业执照
				this.form.storefront_photo // 门头照片
			)
		}
	},

	watch: {
		showPopup(newVal) {
			if (!newVal && !this.form.bar) {
				this.form.province = ''
				this.form.city = ''
				this.form.district = ''
			}
		}
	},

	onLoad({ openId }) {
		this.form.openId = openId
	},

	onHide() {
		uni.hideLoading()
	},

	methods: {
		// 防抖函数
		debounce(fn, delay = 500) {
			let timer = null
			return function(...args) {
				if (timer) clearTimeout(timer)
				timer = setTimeout(() => {
					fn.apply(this, args)
					timer = null
				}, delay)
			}
		},

		// 地区选择相关方法
		handleShowAreaPicker() {
			if (this.showPopup) return
			this.showPopup = true
		},

		// 地区选择回调
		onAreaSelected(province, city, area) {
			try {
				if (province?.label && city?.label && area?.label) {
					// 分别存储省市区
					this.form.province = province.label
					this.form.city = city.label
					this.form.district = area.label
					// 更新显示文本
					this.displayArea = `${province.label} ${city.label} ${area.label}`.trim()
					this.showPopup = false
				} else {
					throw new Error('地区信息不完整')
				}
			} catch (error) {
				uni.showToast({
					title: error.message || '请选择完整的地区信息',
					icon: 'none'
				})
			}
		},

		handlePopupClose() {
			this.showPopup = false
		},

		// 位置选择相关方法
		getMyLocation() {
			uni.authorize({
				scope: 'scope.userLocation',
				success: () => {
					this.handleChooseLocation()
				},
				fail: () => {
					uni.showModal({
						title: '位置权限',
						content: '需要获取您的地理位置，请确认授权',
						success: (res) => {
							if (res.confirm) {
								uni.openSetting({
									success: (settingRes) => {
										if (settingRes.authSetting['scope.userLocation']) {
											this.handleChooseLocation()
										}
									}
								})
							}
						}
					})
				}
			})
		},

		// 位置选择方法
		handleChooseLocation() {
			uni.chooseLocation({
				success: (res) => {
					if (res.address && res.latitude && res.longitude) {
						// 更新地址和经纬度
						this.form.address = res.address
						this.form.latitude = res.latitude
						this.form.longitude = res.longitude

						// 尝试从地址中解析省市区（如果后端没有提供）
						const addressParts = res.address.split(' ')
						if (addressParts.length >= 3) {
							// 通常第一部分是省，第二部分是市，第三部分是区
							if (!this.form.province) this.form.province = addressParts[0]
							if (!this.form.city) this.form.city = addressParts[1]
							if (!this.form.district) this.form.district = addressParts[2]
						}
					} else {
						uni.showToast({
							title: '请选择具体的位置信息',
							icon: 'none'
						})
					}
				},
				fail: (err) => {
					if (err.errMsg !== 'chooseLocation:fail cancel') {
						uni.showToast({
							title: '获取位置失败',
							icon: 'none'
						})
					}
				}
			})
		},

		// 手机号验证相关方法
		validatePhone(e) {
			const phone = e.target.value
			const formatted = phone.replace(/\D/g, '').slice(0, 11)
			// 确保不超过数据库字段长度
			this.form.bar_contact_phone = formatted.slice(0, 20)
		},

		checkPhoneFormat() {
			return /^1[3-9]\d{9}$/.test(this.form.bar_contact_phone)
		},

		// 图片上传相关方法
		async handleUpload(key) {
			try {
				// 1. 选择图片
				const [chooseError, chooseRes] = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					// 限制图片大小
					maxSize: 5 * 1024 * 1024 // 5MB
				}).then(res => [null, res]).catch(err => [err, null])

				if (chooseError) {
					console.error('选择图片错误:', chooseError)
					throw new Error('选择图片失败')
				}

				const tempFilePath = chooseRes.tempFilePaths[0]
				
				// 更新预览和状态
				this.previewImages[key] = tempFilePath
				this.uploadStatus[key] = 'uploading'

				// 2. 上传图片
				const [uploadError, uploadRes] = await new Promise((resolve) => {
					console.log('开始上传图片:', {
						key,
						tempFilePath,
						formData: {
							type: 'image',
							module: key,
							fileType: 'image/jpeg',
							businessType: 'bar_registration'
						}
					})
					const uploadTask = uni.uploadFile({
						url: base_url + '/bar/uploadImg',
						filePath: tempFilePath,
						name: 'file',
						header: {
							'content-type': 'multipart/form-data',
							'Authorization': uni.getStorageSync('token') || ''
						},
						formData: {
							type: 'image',
							module: key,
							fileType: 'image/jpeg',
							businessType: 'bar_registration'
						},
						success: (res) => {
							console.log('上传成功响应:', {
								statusCode: res.statusCode,
								data: res.data,
								key: key,
								url: res.data?.url,
								headers: res.header
							})
							resolve([null, res])
						},
						fail: (err) => {
							console.error('上传失败:', {
								error: err,
								key: key,
								tempFilePath: tempFilePath
							})
							resolve([err, null])
						}
					})

					// 监听上传进度
					uploadTask.onProgressUpdate((res) => {
						console.log('上传进度:', res.progress)
						if (res.progress === 100) {
							console.log('上传完成')
						}
					})
				})

				// 3. 处理上传结果
				if (uploadError) {
					console.error('上传错误:', uploadError)
					throw new Error(uploadError.errMsg || '上传失败，请重试')
				}

				if (uploadRes.statusCode !== 200) {
					console.error('服务器响应错误:', {
						statusCode: uploadRes.statusCode,
						data: uploadRes.data,
						headers: uploadRes.header
					})
					throw new Error(`服务器响应错误: ${uploadRes.statusCode}，请检查服务器日志`)
				}

				// 4. 解析响应数据
				let result
				try {
					result = typeof uploadRes.data === 'string' ? 
						JSON.parse(uploadRes.data) : uploadRes.data
					console.log('解析后的响应数据:', result)
				} catch (error) {
					console.error('响应数据解析错误:', error)
					throw new Error('服务器响应格式错误')
				}

				// 5. 处理业务结果
				if (result.code === 200 && result.data?.url) {
					// 验证URL长度
					if (result.data.url.length > 255) {
						throw new Error('图片URL超出长度限制')
					}
					this.form[key] = result.data.url
					this.uploadStatus[key] = 'success'
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					})
				} else {
					console.error('业务处理失败:', result)
					throw new Error(result.msg || '上传失败')
				}

			} catch (error) {
				console.error('完整上传错误:', error)
				this.previewImages[key] = ''
				this.uploadStatus[key] = 'error'
				uni.showToast({
					title: error.message || '上传失败',
					icon: 'none',
					duration: 2000
				})
			}
		},

		// 表单提交相关方法
		async submitForm() {
			if (!this.isFormValid || !this.validateForm()) {
				return
			}

			try {
				uni.showLoading({
					title: '提交中',
					mask: true
				})

				// 构建提交数据
				const submitData = {
					...this.form,
					auth_state: 0 // 设置默认认证状态
				}

				const res = await barRegister(submitData)
				
				if (res.code === 200) {
					this.userInfo = res.data.register
					uni.setStorageSync('token', res.data.token)
					uni.setStorageSync('userInfo', this.userInfo)
					uni.reLaunch({
						url: '/pages/index/index'
					})
				} else {
					throw new Error(res.msg || '注册失败')
				}
			} catch (error) {
				uni.showToast({
					title: error.message || '提交失败',
					icon: 'none'
				})
			} finally {
				uni.hideLoading()
			}
		},

		// 其他方法
		toHome() {
			uni.setStorageSync('userInfo', this.userInfo)
			uni.reLaunch({
				url: '/pages/index/index'
			})
		},

		handleConsult() {
			uni.navigateTo({
				url: '/pagesMy/addAiad'
			})
		},

		consultClick() {
			this.$refs.consultRefs.close()
		},

		// 字段验证方法
		validateField(value, maxLength) {
			if (!value) return false
			return String(value).length <= maxLength
		},

		// 表单验证方法
		validateForm() {
			// 字段长度验证
			const validations = {
				bar_name: { value: this.form.bar_name, maxLength: 255, label: '酒吧名称' },
				bar_contact_phone: { value: this.form.bar_contact_phone, maxLength: 20, label: '联系电话' },
				province: { value: this.form.province, maxLength: 20, label: '所在省' },
				city: { value: this.form.city, maxLength: 20, label: '所在城市' },
				district: { value: this.form.district, maxLength: 50, label: '所在区' },
				address: { value: this.form.address, maxLength: 255, label: '详细地址' },
				business_license: { value: this.form.business_license, maxLength: 255, label: '营业执照' },
				storefront_photo: { value: this.form.storefront_photo, maxLength: 255, label: '门头照片' }
			}

			for (const [field, config] of Object.entries(validations)) {
				if (!this.validateField(config.value, config.maxLength)) {
					uni.showToast({
						title: `${config.label}超出长度限制`,
						icon: 'none'
					})
					return false
				}
			}

			return true
		}
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	min-height: 100vh;
	background-color: #F7F8FA;
}

.page-content {
	padding: 24rpx 24rpx 200rpx;
	box-sizing: border-box;
}

// 步骤条样式
.step-bar {
	background: #FFFFFF;
	padding: 42rpx 66rpx;
	border-radius: 12rpx;
	box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);

	.step-icons {
		justify-content: space-between;
		margin-bottom: 18rpx;

		.step-icon {
			width: 94rpx;
			height: 72rpx;
		}

		.step-arrow {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.step-labels {
		justify-content: space-between;
		font-size: 24rpx;
		font-weight: 600;
		color: #333;
	}
}

// 咨询入口样式
.consult-box {
	margin-top: 32rpx;
	padding: 24rpx;
	background: #FFF;
	border-radius: 12rpx;
	box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);

	.consult-text {
		width: 52%;
		font-size: 24rpx;
		color: #333;
	}

	.consult-btn {
		width: 124rpx;
		height: 48rpx;
		margin-left: 180rpx;
		line-height: 48rpx;
		background: #D42E78;
		color: #FFF;
		font-size: 24rpx;
		border-radius: 12rpx;
	}
}

// 材料说明样式
.materials-box {
	margin-top: 32rpx;
	padding: 24rpx;
	background: #FFF;
	border-radius: 12rpx;
	box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);

	.material-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 28rpx;

		.material-info {
			width: 60%;

			.material-name {
				display: block;
				font-size: 28rpx;
				color: #3D3D3D;
				margin-bottom: 8rpx;
			}

			.material-desc {
				font-size: 24rpx;
				color: #666;
			}
		}

		.material-image {
			width: 166rpx;
			height: 112rpx;
		}
	}
}

// 表单样式
.store-form {
	margin-top: 32rpx;
	padding: 24rpx;
	background: #FFF;
	border-radius: 12rpx;
	box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.1);

	.form-item {
		margin-bottom: 16rpx;
	}

	.form-input {
		width: 100%;
		height: 96rpx;
		padding: 0 30rpx;
		background: #FFF;
		border: 1px solid #E5E5E5;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #333;
		transition: all 0.3s;

		&:focus {
			border-color: #4E63E0;
			box-shadow: 0 0 0 2px rgba(78, 99, 224, 0.1);
		}

		&[readonly] {
			background: #F5F5F5;
			cursor: not-allowed;
		}
	}
}

// 位置选择器样式
.location-picker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 96rpx;
	padding: 0 30rpx;
	background: #FFF;
	border: 1px solid #E5E5E5;
	border-radius: 16rpx;

	.location-text {
		flex: 1;
		font-size: 28rpx;
		color: #333;

		&.is-placeholder {
			color: #999;
		}
	}

	.location-icon {
		color: #4E63E0;
		font-size: 42rpx;
	}
}

// 上传组件样式
.upload-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 96rpx;
	padding: 0 30rpx;
	background: #FFF;
	border: 1px solid #E5E5E5;
	border-radius: 16rpx;

	.upload-label {
		font-size: 28rpx;
		color: #333;
	}

	.upload-right {
		display: flex;
		align-items: center;

		.upload-progress {
			font-size: 28rpx;
			color: #4E63E0;
			margin-right: 16rpx;
		}

		.upload-success {
			color: #67C23A;
			margin-right: 16rpx;
			font-size: 32rpx;
		}

		.upload-btn {
			font-size: 28rpx;
			color: #FEE034;
			padding: 16rpx 0;

			&.is-success {
				color: #67C23A;
			}
		}
	}
}

.image-preview {
	margin: 16rpx 0;
	width: 100%;
	height: 300rpx;
	background: #F5F5F5;
	border-radius: 12rpx;
	overflow: hidden;

	image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

// 底部提交按钮样式
.submit-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32rpx 48rpx 24rpx;
	background: #FFF;
	box-shadow: 0 -1rpx 3rpx rgba(0, 0, 0, 0.1);

	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(135deg, #19367A, #2C4C99);
		border-radius: 44rpx;
		color: #FFF;
		font-size: 32rpx;
		font-weight: 600;
		transition: all 0.3s;

		&:active {
			transform: scale(0.98);
		}

		&[disabled] {
			opacity: 0.6;
			background: #999;
		}
	}
}

// 弹窗样式
.consult-popup {
	position: relative;
	width: 676rpx;
	background: #FFF;
	border-radius: 12rpx;

	.popup-close {
		position: absolute;
		top: 10rpx;
		right: 20rpx;
		padding: 10rpx;

		.close-icon {
			width: 48rpx;
			height: 48rpx;
		}
	}
}

.success-popup {
	width: 676rpx;
	height: 596rpx;
	background: #FFF;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.success-icon {
		width: 376rpx;
		height: 262rpx;
		margin-bottom: 32rpx;
	}

	.success-text {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 32rpx;
	}

	.success-btn {
		width: 314rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: #4E63E0;
		color: #FFF;
		font-size: 28rpx;
		border-radius: 38rpx;
	}
}

// 通用样式
.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 28rpx;
}
</style>