优化：1. 认证流程页面 2. 优化写酒评页面
This commit is contained in:
davy
parent
4466afd8a1
commit
e912e413f1
@ -19,7 +19,7 @@
|
||||
|
||||
<!-- 咨询入口 -->
|
||||
<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>
|
||||
</view>
|
||||
|
||||
@ -91,43 +91,45 @@
|
||||
|
||||
<!-- 营业执照上传 -->
|
||||
<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 class="upload-container">
|
||||
<view class="upload-title">营业执照</view>
|
||||
<view class="upload-box" @click="handleUpload('business_license')">
|
||||
<image v-if="previewImages.business_license"
|
||||
:src="previewImages.business_license"
|
||||
mode="aspectFill"
|
||||
class="preview-image">
|
||||
</image>
|
||||
<view v-else class="upload-placeholder">
|
||||
<text class="cuIcon-camerafill"></text>
|
||||
<text class="upload-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 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 class="upload-container">
|
||||
<view class="upload-title">门店照片</view>
|
||||
<view class="upload-box" @click="handleUpload('storefront_photo')">
|
||||
<image v-if="previewImages.storefront_photo"
|
||||
:src="previewImages.storefront_photo"
|
||||
mode="aspectFill"
|
||||
class="preview-image">
|
||||
</image>
|
||||
<view v-else class="upload-placeholder">
|
||||
<text class="cuIcon-camerafill"></text>
|
||||
<text class="upload-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 v-if="previewImages.storefront_photo" class="image-preview">
|
||||
<image :src="previewImages.storefront_photo" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -166,7 +168,7 @@
|
||||
:disabled="!isFormValid"
|
||||
@click="submitForm"
|
||||
>
|
||||
提交认证门店
|
||||
提交入驻
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
@ -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])
|
||||
sourceType: ['album', 'camera']
|
||||
}).then(res => [null, res]).catch(err => [err, null]);
|
||||
|
||||
if (chooseError) {
|
||||
console.error('选择图片错误:', chooseError)
|
||||
throw new Error('选择图片失败')
|
||||
if (error) {
|
||||
throw new Error('选择图片失败');
|
||||
}
|
||||
|
||||
const tempFilePath = chooseRes.tempFilePaths[0]
|
||||
const tempFilePath = res.tempFilePaths[0];
|
||||
|
||||
// 更新预览和状态
|
||||
this.previewImages[key] = tempFilePath
|
||||
this.uploadStatus[key] = 'uploading'
|
||||
// 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';
|
||||
|
||||
// 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',
|
||||
url: uploadUrl,
|
||||
filePath: tempFilePath
|
||||
});
|
||||
|
||||
const [uploadError, uploadRes] = await new Promise((resolve) => {
|
||||
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}，请检查服务器日志`)
|
||||
}
|
||||
// 6. 更新表单数据
|
||||
if (uploadRes.url) {
|
||||
this.form[key] = uploadRes.url; // 确保更新到form对象中
|
||||
this.previewImages[key] = uploadRes.url; // 更新预览图
|
||||
this.uploadStatus[key] = 'success';
|
||||
|
||||
// 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('服务器响应格式错误')
|
||||
}
|
||||
console.log('图片上传成功，更新表单数据:', {
|
||||
key,
|
||||
url: uploadRes.url,
|
||||
form: this.form[key]
|
||||
});
|
||||
|
||||
// 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 || '上传失败')
|
||||
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
|
||||
})
|
||||
});
|
||||
|
||||
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)
|
||||
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-container {
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
.upload-label {
|
||||
.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-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;
|
||||
.upload-box {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 12rpx;
|
||||
background: #F7F7F7;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
image {
|
||||
.preview-image {
|
||||
width: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user