davy/zdtap-uniapp-main
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化：1. 认证流程页面 2. 优化写酒评页面

Browse Source
This commit is contained in:
davy 2025-04-03 11:30:20 +08:00
parent 4466afd8a1
commit e912e413f1
2 changed files with 1075 additions and 551 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

477
pages/index/registration.vue
View File

@ -19,7 +19,7 @@
<!-- 咨询入口 --> <!-- 咨询入口 -->
<view class="consult-box flex align-center justify-between"> <view class="consult-box flex align-center justify-between">
<text class="consult-text">认证门店助手，帮你解决认证问题，快速上手赢取品牌返利。</text> <text class="consult-text">入驻助手，帮你解决入驻问题，快速上手赢取品牌返利。</text>
<button class="consult-btn" @click="handleConsult">咨询</button> <button class="consult-btn" @click="handleConsult">咨询</button>
</view> </view>
@ -91,43 +91,45 @@
<!-- 营业执照上传 --> <!-- 营业执照上传 -->
<view class="form-item"> <view class="form-item">
<view class="upload-box"> <view class="upload-container">
<text class="upload-label">营业执照</text> <view class="upload-title">营业执照</view>
<view class="upload-right"> <view class="upload-box" @click="handleUpload('business_license')">
<text v-if="uploadStatus.business_license === 'uploading'" class="upload-progress">上传中...</text> <image v-if="previewImages.business_license"
<text v-else-if="uploadStatus.business_license === 'success'" class="upload-success">✓</text> :src="previewImages.business_license"
<text mode="aspectFill"
class="upload-btn" class="preview-image">
:class="{'is-success': form.business_license}" </image>
@click="handleUpload('business_license')" <view v-else class="upload-placeholder">
> <text class="cuIcon-camerafill"></text>
{{ form.business_license ? '重新上传' : '点击上传' }} <text class="upload-text">上传营业执照</text>
</text> <text class="upload-hint">需提供有效期内的营业执照</text>
</view>
<view v-if="uploadStatus.business_license === 'uploading'" class="upload-mask">
<view class="upload-loading">上传中...</view>
</view> </view>
</view> </view>
<view v-if="previewImages.business_license" class="image-preview">
<image :src="previewImages.business_license" mode="aspectFit"></image>
</view> </view>
</view> </view>
<!-- 门头照片上传 --> <!-- 门店照片上传 -->
<view class="form-item"> <view class="form-item">
<view class="upload-box"> <view class="upload-container">
<text class="upload-label">门头照片</text> <view class="upload-title">门店照片</view>
<view class="upload-right"> <view class="upload-box" @click="handleUpload('storefront_photo')">
<text v-if="uploadStatus.storefront_photo === 'uploading'" class="upload-progress">上传中...</text> <image v-if="previewImages.storefront_photo"
<text v-else-if="uploadStatus.storefront_photo === 'success'" class="upload-success">✓</text> :src="previewImages.storefront_photo"
<text mode="aspectFill"
class="upload-btn" class="preview-image">
:class="{'is-success': form.storefront_photo}" </image>
@click="handleUpload('storefront_photo')" <view v-else class="upload-placeholder">
> <text class="cuIcon-camerafill"></text>
{{ form.storefront_photo ? '重新上传' : '点击上传' }} <text class="upload-text">上传门店照片</text>
</text> <text class="upload-hint">需提供清晰的门头照片</text>
</view>
<view v-if="uploadStatus.storefront_photo === 'uploading'" class="upload-mask">
<view class="upload-loading">上传中...</view>
</view> </view>
</view> </view>
<view v-if="previewImages.storefront_photo" class="image-preview">
<image :src="previewImages.storefront_photo" mode="aspectFit"></image>
</view> </view>
</view> </view>
</view> </view>
@ -166,7 +168,7 @@
:disabled="!isFormValid" :disabled="!isFormValid"
@click="submitForm" @click="submitForm"
> >
提交认证门店 提交入驻
</button> </button>
</view> </view>
</view> </view>
@ -210,7 +212,7 @@ export default {
}, },
// 上传状态 // 上传状态
uploadStatus: { uploadStatus: {
business_license: '', // '', 'uploading', 'success', 'error' business_license: '',
storefront_photo: '' storefront_photo: ''
}, },
// 地区选择 // 地区选择
@ -223,7 +225,22 @@ export default {
computed: { computed: {
// 表单验证 // 表单验证
isFormValid() { 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_name && // 酒吧名称
this.form.bar_contact_phone && // 联系电话 this.form.bar_contact_phone && // 联系电话
this.checkPhoneFormat() && // 手机号格式 this.checkPhoneFormat() && // 手机号格式
@ -235,16 +252,20 @@ export default {
this.form.longitude && // 经度 this.form.longitude && // 经度
this.form.business_license && // 营业执照 this.form.business_license && // 营业执照
this.form.storefront_photo // 门头照片 this.form.storefront_photo // 门头照片
) );
} }
}, },
watch: { watch: {
showPopup(newVal) { showPopup(newVal) {
if (!newVal && !this.form.bar) { if (!newVal) {
this.form.province = '' // 检查是否已有省市区数据
this.form.city = '' if (!this.form.province || !this.form.city || !this.form.district) {
this.form.district = '' this.form.province = '';
this.form.city = '';
this.form.district = '';
this.displayArea = '';
}
} }
} }
}, },
@ -279,22 +300,34 @@ export default {
// 地区选择回调 // 地区选择回调
onAreaSelected(province, city, area) { onAreaSelected(province, city, area) {
try { try {
console.log('地区选择数据:', { province, city, area });
if (province?.label && city?.label && area?.label) { if (province?.label && city?.label && area?.label) {
// 分别存储省市区 // 分别存储省市区
this.form.province = province.label this.form.province = province.label;
this.form.city = city.label this.form.city = city.label;
this.form.district = area.label this.form.district = area.label;
// 更新显示文本 // 更新显示文本
this.displayArea = `${province.label} ${city.label} ${area.label}`.trim() this.displayArea = `${province.label} ${city.label} ${area.label}`.trim();
this.showPopup = false
console.log('更新后的地区数据:', {
province: this.form.province,
city: this.form.city,
district: this.form.district,
displayArea: this.displayArea
});
this.showPopup = false;
} else { } else {
throw new Error('地区信息不完整') throw new Error('地区信息不完整');
} }
} catch (error) { } catch (error) {
console.error('地区选择错误:', error);
uni.showToast({ uni.showToast({
title: error.message || '请选择完整的地区信息', title: error.message || '请选择完整的地区信息',
icon: 'none' icon: 'none'
}) });
} }
}, },
@ -333,36 +366,48 @@ export default {
handleChooseLocation() { handleChooseLocation() {
uni.chooseLocation({ uni.chooseLocation({
success: (res) => { success: (res) => {
console.log('位置选择结果:', res);
if (res.address && res.latitude && res.longitude) { if (res.address && res.latitude && res.longitude) {
// 更新地址和经纬度 // 更新地址和经纬度
this.form.address = res.address this.form.address = res.address;
this.form.latitude = res.latitude this.form.latitude = res.latitude;
this.form.longitude = res.longitude this.form.longitude = res.longitude;
// 尝试从地址中解析省市区（如果后端没有提供） // 尝试从地址中解析省市区
const addressParts = res.address.split(' ') const addressParts = res.address.split(' ');
if (addressParts.length >= 3) { if (addressParts.length >= 3) {
// 通常第一部分是省，第二部分是市，第三部分是区 this.form.province = addressParts[0];
if (!this.form.province) this.form.province = addressParts[0] this.form.city = addressParts[1];
if (!this.form.city) this.form.city = addressParts[1] this.form.district = addressParts[2];
if (!this.form.district) 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 { } else {
uni.showToast({ uni.showToast({
title: '请选择具体的位置信息', title: '请选择具体的位置信息',
icon: 'none' icon: 'none'
}) });
} }
}, },
fail: (err) => { fail: (err) => {
console.error('位置选择失败:', err);
if (err.errMsg !== 'chooseLocation:fail cancel') { if (err.errMsg !== 'chooseLocation:fail cancel') {
uni.showToast({ uni.showToast({
title: '获取位置失败', title: '获取位置失败',
icon: 'none' icon: 'none'
}) });
} }
} }
}) });
}, },
// 手机号验证相关方法 // 手机号验证相关方法
@ -374,179 +419,179 @@ export default {
}, },
checkPhoneFormat() { 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) { async handleUpload(key) {
try { try {
// 1. 选择图片 // 1. 选择图片
const [chooseError, chooseRes] = await uni.chooseImage({ const [error, res] = await uni.chooseImage({
count: 1, count: 1,
sizeType: ['compressed'], sizeType: ['compressed'],
sourceType: ['album', 'camera'], sourceType: ['album', 'camera']
// 限制图片大小 }).then(res => [null, res]).catch(err => [err, null]);
maxSize: 5 * 1024 * 1024 // 5MB
}).then(res => [null, res]).catch(err => [err, null])
if (chooseError) { if (error) {
console.error('选择图片错误:', chooseError) throw new Error('选择图片失败');
throw new Error('选择图片失败')
} }
const tempFilePath = chooseRes.tempFilePaths[0] const tempFilePath = res.tempFilePaths[0];
// 更新预览和状态 // 2. 获取图片信息
this.previewImages[key] = tempFilePath const [infoError, imageInfo] = await uni.getImageInfo({
this.uploadStatus[key] = 'uploading' 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';
// 2. 上传图片
const [uploadError, uploadRes] = await new Promise((resolve) => {
console.log('开始上传图片:', { console.log('开始上传图片:', {
key, url: uploadUrl,
tempFilePath, filePath: tempFilePath
formData: { });
type: 'image',
module: key, const [uploadError, uploadRes] = await new Promise((resolve) => {
fileType: 'image/jpeg', uni.uploadFile({
businessType: 'bar_registration' url: uploadUrl,
}
})
const uploadTask = uni.uploadFile({
url: base_url + '/bar/uploadImg',
filePath: tempFilePath, filePath: tempFilePath,
name: 'file', name: 'file',
header: {
'content-type': 'multipart/form-data',
'Authorization': uni.getStorageSync('token') || ''
},
formData: { formData: {
type: 'image', type: 'image'
module: key,
fileType: 'image/jpeg',
businessType: 'bar_registration'
}, },
success: (res) => { success: (res) => {
console.log('上传成功响应:', { try {
statusCode: res.statusCode, console.log('上传响应数据:', res.data);
data: res.data, const result = JSON.parse(res.data);
key: key, if (result.code === 200) {
url: res.data?.url, if (result.url) {
headers: res.header resolve([null, result]);
}) } else {
resolve([null, res]) resolve([new Error('上传成功但未返回图片地址'), null]);
}
} else {
resolve([new Error(result.msg || '上传失败'), null]);
}
} catch (error) {
console.error('解析响应失败:', error, '原始数据:', res.data);
resolve([new Error('解析响应失败'), null]);
}
}, },
fail: (err) => { fail: (err) => {
console.error('上传失败:', { console.error('上传请求失败:', err);
error: err, resolve([err, null]);
key: key,
tempFilePath: tempFilePath
})
resolve([err, null])
} }
}) });
});
// 监听上传进度
uploadTask.onProgressUpdate((res) => {
console.log('上传进度:', res.progress)
if (res.progress === 100) {
console.log('上传完成')
}
})
})
// 3. 处理上传结果
if (uploadError) { if (uploadError) {
console.error('上传错误:', uploadError) console.error('上传错误:', uploadError);
throw new Error(uploadError.errMsg || '上传失败，请重试') throw uploadError;
} }
if (uploadRes.statusCode !== 200) { // 6. 更新表单数据
console.error('服务器响应错误:', { if (uploadRes.url) {
statusCode: uploadRes.statusCode, this.form[key] = uploadRes.url; // 确保更新到form对象中
data: uploadRes.data, this.previewImages[key] = uploadRes.url; // 更新预览图
headers: uploadRes.header this.uploadStatus[key] = 'success';
})
throw new Error(`服务器响应错误: ${uploadRes.statusCode}，请检查服务器日志`)
}
// 4. 解析响应数据 console.log('图片上传成功，更新表单数据:', {
let result key,
try { url: uploadRes.url,
result = typeof uploadRes.data === 'string' ? form: this.form[key]
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({ uni.showToast({
title: '上传成功', title: '上传成功',
icon: 'success' icon: 'success'
}) });
} else { } else {
console.error('业务处理失败:', result) throw new Error('未获取到图片地址');
throw new Error(result.msg || '上传失败')
} }
} catch (error) { } catch (error) {
console.error('完整上传错误:', error) console.error('图片上传失败:', error);
this.previewImages[key] = '' this.previewImages[key] = '';
this.uploadStatus[key] = 'error' this.uploadStatus[key] = 'error';
uni.showToast({ uni.showToast({
title: error.message || '上传失败', title: error.message || '上传失败',
icon: 'none', icon: 'none'
duration: 2000 });
})
} }
}, },
// 表单提交相关方法 // 表单提交相关方法
async submitForm() { async submitForm() {
if (!this.isFormValid || !this.validateForm()) { if (!this.isFormValid || !this.validateForm()) {
return return;
} }
try { // 显示加载提示
uni.showLoading({ uni.showLoading({
title: '提交中', title: '提交中',
mask: true mask: true
}) });
try {
// 构建提交数据 // 构建提交数据
const submitData = { const submitData = {
...this.form, ...this.form,
auth_state: 0 // 设置默认认证状态 auth_state: 0 // 设置默认认证状态
} };
const res = await barRegister(submitData) const res = await barRegister(submitData);
if (res.code === 200) { if (res.code === 200) {
this.userInfo = res.data.register this.userInfo = res.data.register;
uni.setStorageSync('token', res.data.token) uni.setStorageSync('token', res.data.token);
uni.setStorageSync('userInfo', this.userInfo) uni.setStorageSync('userInfo', this.userInfo);
// 隐藏加载提示
uni.hideLoading();
// 显示成功提示
uni.showToast({
title: '提交成功',
icon: 'success',
duration: 1500
});
// 延迟跳转，让用户看到成功提示
setTimeout(() => {
uni.reLaunch({ uni.reLaunch({
url: '/pages/index/index' url: '/pages/index/index'
}) });
}, 1500);
} else { } else {
throw new Error(res.msg || '注册失败') throw new Error(res.msg || '注册失败');
} }
} catch (error) { } catch (error) {
// 隐藏加载提示
uni.hideLoading();
// 显示错误提示
uni.showToast({ uni.showToast({
title: error.message || '提交失败', title: error.message || '提交失败',
icon: 'none' icon: 'none',
}) duration: 2000
} finally { });
uni.hideLoading()
} }
}, },
@ -771,61 +816,71 @@ export default {
} }
// 上传组件样式 // 上传组件样式
.upload-box { .upload-container {
display: flex; margin-bottom: 32rpx;
align-items: center;
justify-content: space-between;
height: 96rpx;
padding: 0 30rpx;
background: #FFF;
border: 1px solid #E5E5E5;
border-radius: 16rpx;
.upload-label { .upload-title {
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
margin-bottom: 16rpx;
} }
.upload-right { .upload-box {
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%; width: 100%;
height: 300rpx; height: 300rpx;
background: #F5F5F5; background: #F7F7F7;
border-radius: 12rpx; border-radius: 16rpx;
overflow: hidden; overflow: hidden;
position: relative;
image { .preview-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain; object-fit: cover;
}
.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;
}
}
} }
} }

1065
pages/index/writeReview.vue
View File

File diff suppressed because it is too large Load Diff