From e912e413f1364c9433c2f87f89a629f3f9ad3749 Mon Sep 17 00:00:00 2001 From: davy Date: Thu, 3 Apr 2025 11:30:20 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A1.=20=E8=AE=A4?= =?UTF-8?q?=E8=AF=81=E6=B5=81=E7=A8=8B=E9=A1=B5=E9=9D=A2=202.=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E5=86=99=E9=85=92=E8=AF=84=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/index/registration.vue | 515 +++++++++------- pages/index/writeReview.vue | 1111 ++++++++++++++++++++++++---------- 2 files changed, 1075 insertions(+), 551 deletions(-) diff --git a/pages/index/registration.vue b/pages/index/registration.vue index b555b5f..33a3119 100644 --- a/pages/index/registration.vue +++ b/pages/index/registration.vue @@ -19,7 +19,7 @@ - 认证门店助手，帮你解决认证问题，快速上手赢取品牌返利。 + 入驻助手，帮你解决入驻问题，快速上手赢取品牌返利。 @@ -91,44 +91,46 @@ - - 营业执照 - - 上传中... - ✓ - - {{ form.business_license ? '重新上传' : '点击上传' }} - + + 营业执照 + + + + + + 上传营业执照 + 需提供有效期内的营业执照 + + + 上传中... + - - - - + - - 门头照片 - - 上传中... - ✓ - - {{ form.storefront_photo ? '重新上传' : '点击上传' }} - + + 门店照片 + + + + + + 上传门店照片 + 需提供清晰的门头照片 + + + 上传中... + - - - @@ -166,7 +168,7 @@ :disabled="!isFormValid" @click="submitForm" > - 提交认证门店 + 提交入驻 @@ -210,7 +212,7 @@ export default { }, // 上传状态 uploadStatus: { - business_license: '', // '', 'uploading', 'success', 'error' + business_license: '', storefront_photo: '' }, // 地区选择 @@ -223,7 +225,22 @@ export default { computed: { // 表单验证 isFormValid() { - return ( + // 添加日志输出，方便调试 + console.log('表单验证状态:', { + bar_name: !!this.form.bar_name, + bar_contact_phone: !!this.form.bar_contact_phone, + phone_format: this.checkPhoneFormat(), + province: !!this.form.province, + city: !!this.form.city, + district: !!this.form.district, + address: !!this.form.address, + latitude: !!this.form.latitude, + longitude: !!this.form.longitude, + business_license: !!this.form.business_license, + storefront_photo: !!this.form.storefront_photo + }); + + return Boolean( this.form.bar_name && // 酒吧名称 this.form.bar_contact_phone && // 联系电话 this.checkPhoneFormat() && // 手机号格式 @@ -235,16 +252,20 @@ export default { 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 = '' + if (!newVal) { + // 检查是否已有省市区数据 + if (!this.form.province || !this.form.city || !this.form.district) { + this.form.province = ''; + this.form.city = ''; + this.form.district = ''; + this.displayArea = ''; + } } } }, @@ -279,22 +300,34 @@ export default { // 地区选择回调 onAreaSelected(province, city, area) { try { + console.log('地区选择数据:', { province, city, area }); + if (province?.label && city?.label && area?.label) { // 分别存储省市区 - this.form.province = province.label - this.form.city = city.label - this.form.district = 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 + this.displayArea = `${province.label} ${city.label} ${area.label}`.trim(); + + console.log('更新后的地区数据:', { + province: this.form.province, + city: this.form.city, + district: this.form.district, + displayArea: this.displayArea + }); + + this.showPopup = false; } else { - throw new Error('地区信息不完整') + throw new Error('地区信息不完整'); } } catch (error) { + console.error('地区选择错误:', error); uni.showToast({ title: error.message || '请选择完整的地区信息', icon: 'none' - }) + }); } }, @@ -333,36 +366,48 @@ export default { handleChooseLocation() { uni.chooseLocation({ success: (res) => { + console.log('位置选择结果:', res); + if (res.address && res.latitude && res.longitude) { // 更新地址和经纬度 - this.form.address = res.address - this.form.latitude = res.latitude - this.form.longitude = res.longitude + this.form.address = res.address; + this.form.latitude = res.latitude; + this.form.longitude = res.longitude; - // 尝试从地址中解析省市区（如果后端没有提供） - const addressParts = res.address.split(' ') + // 尝试从地址中解析省市区 + 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] + this.form.province = addressParts[0]; + this.form.city = addressParts[1]; + this.form.district = addressParts[2]; + + // 更新显示文本 + this.displayArea = `${this.form.province} ${this.form.city} ${this.form.district}`.trim(); + + console.log('解析后的地区数据:', { + province: this.form.province, + city: this.form.city, + district: this.form.district, + displayArea: this.displayArea + }); } } else { uni.showToast({ title: '请选择具体的位置信息', icon: 'none' - }) + }); } }, fail: (err) => { + console.error('位置选择失败:', err); if (err.errMsg !== 'chooseLocation:fail cancel') { uni.showToast({ title: '获取位置失败', icon: 'none' - }) + }); } } - }) + }); }, // 手机号验证相关方法 @@ -374,179 +419,179 @@ export default { }, checkPhoneFormat() { - return /^1[3-9]\d{9}$/.test(this.form.bar_contact_phone) + const phone = this.form.bar_contact_phone; + const isValid = /^1[3-9]\d{9}$/.test(phone); + console.log('手机号验证:', { phone, isValid }); + return isValid; }, // 图片上传相关方法 async handleUpload(key) { try { // 1. 选择图片 - const [chooseError, chooseRes] = await uni.chooseImage({ + const [error, res] = 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('选择图片失败') + sourceType: ['album', 'camera'] + }).then(res => [null, res]).catch(err => [err, null]); + + if (error) { + throw new Error('选择图片失败'); } - const tempFilePath = chooseRes.tempFilePaths[0] - - // 更新预览和状态 - this.previewImages[key] = tempFilePath - this.uploadStatus[key] = 'uploading' + const tempFilePath = res.tempFilePaths[0]; - // 2. 上传图片 + // 2. 获取图片信息 + const [infoError, imageInfo] = await uni.getImageInfo({ + src: tempFilePath + }).then(res => [null, res]).catch(err => [err, null]); + + if (infoError) { + throw new Error('获取图片信息失败'); + } + + // 3. 验证图片大小（限制5MB） + if (imageInfo.size > 5 * 1024 * 1024) { + throw new Error('图片大小不能超过5MB'); + } + + // 4. 更新预览和状态 + this.previewImages[key] = tempFilePath; + this.uploadStatus[key] = 'uploading'; + + // 5. 上传图片 + const uploadUrl = base_url.endsWith('/') ? base_url + 'api/bar/common/upload' : base_url + '/api/bar/common/upload'; + + console.log('开始上传图片:', { + url: uploadUrl, + filePath: tempFilePath + }); + 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', + uni.uploadFile({ + url: uploadUrl, 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' + type: 'image' }, success: (res) => { - console.log('上传成功响应:', { - statusCode: res.statusCode, - data: res.data, - key: key, - url: res.data?.url, - headers: res.header - }) - resolve([null, res]) + try { + console.log('上传响应数据:', res.data); + const result = JSON.parse(res.data); + if (result.code === 200) { + if (result.url) { + resolve([null, result]); + } else { + resolve([new Error('上传成功但未返回图片地址'), null]); + } + } else { + resolve([new Error(result.msg || '上传失败'), null]); + } + } catch (error) { + console.error('解析响应失败:', error, '原始数据:', res.data); + resolve([new Error('解析响应失败'), null]); + } }, fail: (err) => { - console.error('上传失败:', { - error: err, - key: key, - tempFilePath: tempFilePath - }) - resolve([err, null]) + console.error('上传请求失败:', err); + 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 || '上传失败，请重试') + console.error('上传错误:', uploadError); + throw uploadError; } - - 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' + + // 6. 更新表单数据 + if (uploadRes.url) { + this.form[key] = uploadRes.url; // 确保更新到form对象中 + this.previewImages[key] = uploadRes.url; // 更新预览图 + this.uploadStatus[key] = 'success'; + + console.log('图片上传成功，更新表单数据:', { + key, + url: uploadRes.url, + form: this.form[key] + }); + uni.showToast({ title: '上传成功', icon: 'success' - }) + }); } else { - console.error('业务处理失败:', result) - throw new Error(result.msg || '上传失败') + throw new Error('未获取到图片地址'); } - + } catch (error) { - console.error('完整上传错误:', error) - this.previewImages[key] = '' - this.uploadStatus[key] = 'error' + console.error('图片上传失败:', error); + this.previewImages[key] = ''; + this.uploadStatus[key] = 'error'; + uni.showToast({ title: error.message || '上传失败', - icon: 'none', - duration: 2000 - }) + icon: 'none' + }); } }, // 表单提交相关方法 async submitForm() { if (!this.isFormValid || !this.validateForm()) { - return + return; } - try { - uni.showLoading({ - title: '提交中', - mask: true - }) + // 显示加载提示 + uni.showLoading({ + title: '提交中', + mask: true + }); + try { // 构建提交数据 const submitData = { ...this.form, auth_state: 0 // 设置默认认证状态 - } + }; - const res = await barRegister(submitData) + 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' - }) + this.userInfo = res.data.register; + uni.setStorageSync('token', res.data.token); + uni.setStorageSync('userInfo', this.userInfo); + + // 隐藏加载提示 + uni.hideLoading(); + + // 显示成功提示 + uni.showToast({ + title: '提交成功', + icon: 'success', + duration: 1500 + }); + + // 延迟跳转，让用户看到成功提示 + setTimeout(() => { + uni.reLaunch({ + url: '/pages/index/index' + }); + }, 1500); } else { - throw new Error(res.msg || '注册失败') + throw new Error(res.msg || '注册失败'); } } catch (error) { + // 隐藏加载提示 + uni.hideLoading(); + + // 显示错误提示 uni.showToast({ title: error.message || '提交失败', - icon: 'none' - }) - } finally { - uni.hideLoading() + icon: 'none', + duration: 2000 + }); } }, @@ -771,61 +816,71 @@ export default { } // 上传组件样式 -.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 { +.upload-container { + margin-bottom: 32rpx; + + .upload-title { font-size: 28rpx; color: #333; + margin-bottom: 16rpx; } - - .upload-right { - display: flex; - align-items: center; - - .upload-progress { - font-size: 28rpx; - color: #4E63E0; - margin-right: 16rpx; + + .upload-box { + width: 100%; + height: 300rpx; + background: #F7F7F7; + border-radius: 16rpx; + overflow: hidden; + position: relative; + + .preview-image { + width: 100%; + height: 100%; + object-fit: cover; } - - .upload-success { - color: #67C23A; - margin-right: 16rpx; - font-size: 32rpx; - } - - .upload-btn { - font-size: 28rpx; - color: #FEE034; - padding: 16rpx 0; - - &.is-success { - color: #67C23A; + + .upload-placeholder { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + .cuIcon-camerafill { + font-size: 48rpx; + color: #999; + margin-bottom: 16rpx; + } + + .upload-text { + font-size: 28rpx; + color: #666; + margin-bottom: 8rpx; + } + + .upload-hint { + font-size: 24rpx; + color: #999; + } + } + + .upload-mask { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.6); + display: flex; + align-items: center; + justify-content: center; + + .upload-loading { + color: #FFFFFF; + font-size: 28rpx; } } - } -} - -.image-preview { - margin: 16rpx 0; - width: 100%; - height: 300rpx; - background: #F5F5F5; - border-radius: 12rpx; - overflow: hidden; - - image { - width: 100%; - height: 100%; - object-fit: contain; } } diff --git a/pages/index/writeReview.vue b/pages/index/writeReview.vue index 3827fdc..c9dc2e8 100644 --- a/pages/index/writeReview.vue +++ b/pages/index/writeReview.vue @@ -1,81 +1,659 @@ + + - - \ No newline at end of file