feat: 完善个人设置页面功能 1. 优化头像上传功能和错误处理 2. 移除店内职务验证 3. 完善手机号更换功能
This commit is contained in:
davy
parent
d539541702
commit
66b36b0207
@ -23,10 +23,11 @@
|
||||
<input class="input-field" type="text" v-model="form.nickName" placeholder="请输入用户名" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item" @click="showChangePhone">
|
||||
<text>关联手机</text>
|
||||
<view class="right-content">
|
||||
<text class="info-text">{{maskedPhone}}</text>
|
||||
<text class="cuIcon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -78,20 +79,20 @@
|
||||
<view v-if="currentTab === 2" class="section">
|
||||
<view class="info-list">
|
||||
<view class="info-item">
|
||||
<text>门店认证期限时间</text>
|
||||
<text>认证到期时间</text>
|
||||
<view class="right-content">
|
||||
<text class="text-gray">2026-07-31</text>
|
||||
<text class="text-gray">{{barInfo.authEndTime || '--'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text>营业执照</text>
|
||||
<view class="right-content" @click="handleUpload('businessLicense')">
|
||||
<view class="right-content" @click="previewImage('businessLicense')">
|
||||
<text class="text-blue">点击查看</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text>门头照片</text>
|
||||
<view class="right-content" @click="handleUpload('storefrontPhoto')">
|
||||
<view class="right-content" @click="previewImage('storefrontPhoto')">
|
||||
<text class="text-blue">点击查看</text>
|
||||
</view>
|
||||
</view>
|
||||
@ -103,6 +104,65 @@
|
||||
保存
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 更换手机号弹窗 -->
|
||||
<view class="change-phone-modal" v-if="showPhoneModal" @click.stop>
|
||||
<view class="modal-content">
|
||||
<view class="modal-title">确认更换手机号？</view>
|
||||
<view class="modal-desc">更换后现手机号{{maskedPhone}}将不能用于登录，180天内只可更换一次</view>
|
||||
<view class="modal-buttons">
|
||||
<view class="btn cancel-btn" @click="closePhoneModal">我再想想</view>
|
||||
<view class="btn confirm-btn" @click="confirmChangePhone">确认更换</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 更换手机号输入弹窗 -->
|
||||
<view class="phone-input-modal" v-if="showPhoneInputModal" @click.stop>
|
||||
<view class="modal-content">
|
||||
<view class="modal-title">更换手机号</view>
|
||||
<view class="input-section">
|
||||
<view class="input-box">
|
||||
<text class="prefix">+86</text>
|
||||
<input
|
||||
type="number"
|
||||
v-model="newPhone"
|
||||
maxlength="11"
|
||||
placeholder="请输入新的手机号"
|
||||
class="phone-input"
|
||||
/>
|
||||
</view>
|
||||
<view class="verify-box" v-if="showVerifyCode">
|
||||
<input
|
||||
type="number"
|
||||
v-model="verifyCode"
|
||||
maxlength="6"
|
||||
placeholder="请输入验证码"
|
||||
class="verify-input"
|
||||
/>
|
||||
<view
|
||||
class="verify-btn"
|
||||
:class="{'disabled': counting}"
|
||||
@click="getVerifyCode"
|
||||
>
|
||||
{{counting ? `${countdown}s后重新获取` : '获取验证码'}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-buttons">
|
||||
<view class="btn cancel-btn" @click="closePhoneInputModal">取消</view>
|
||||
<view class="btn confirm-btn" @click="saveNewPhone">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图片预览弹窗 -->
|
||||
<view class="preview-modal" v-if="showPreview" @click.stop>
|
||||
<view class="preview-content">
|
||||
<image :src="previewUrl" mode="aspectFit" class="preview-image"></image>
|
||||
<view class="close-btn" @click="closePreview">关闭</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -321,6 +381,262 @@
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
|
||||
.preview-content {
|
||||
width: 600rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
position: relative;
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 160rpx;
|
||||
height: 72rpx;
|
||||
background: #19367A;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
border-radius: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 32rpx auto 0;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
background: #142c62;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.change-phone-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
|
||||
.modal-content {
|
||||
width: 600rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
|
||||
.modal-title {
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.modal-desc {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
padding: 0 32rpx;
|
||||
margin-bottom: 48rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24rpx;
|
||||
padding: 0 32rpx;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #F5F5F5;
|
||||
color: #666666;
|
||||
|
||||
&:active {
|
||||
background: #EBEBEB;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: #19367A;
|
||||
color: #FFFFFF;
|
||||
|
||||
&:active {
|
||||
background: #142c62;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.phone-input-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 999;
|
||||
|
||||
.modal-content {
|
||||
width: 600rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx;
|
||||
padding: 48rpx 32rpx;
|
||||
|
||||
.modal-title {
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.input-section {
|
||||
margin-bottom: 48rpx;
|
||||
|
||||
.input-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #F5F5F5;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.prefix {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
margin-right: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.phone-input {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.verify-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
|
||||
.verify-input {
|
||||
flex: 1;
|
||||
background: #F5F5F5;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.verify-btn {
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
background: #19367A;
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
border-radius: 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
background: #142c62;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: #CCCCCC;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 24rpx;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #F5F5F5;
|
||||
color: #666666;
|
||||
|
||||
&:active {
|
||||
background: #EBEBEB;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: #19367A;
|
||||
color: #FFFFFF;
|
||||
|
||||
&:active {
|
||||
background: #142c62;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -338,6 +654,7 @@
|
||||
reAuth
|
||||
} from '@/api/bar.js'
|
||||
import { getToken } from '@/utils/auth.js'
|
||||
import { updatePhone } from '@/api/user.js' // 请确保添加相关API
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@ -357,6 +674,15 @@
|
||||
currentTab: 1,
|
||||
QQMap: null,
|
||||
barInfo: {},
|
||||
showPreview: false,
|
||||
previewUrl: '',
|
||||
showPhoneModal: false,
|
||||
showPhoneInputModal: false,
|
||||
newPhone: '',
|
||||
verifyCode: '',
|
||||
showVerifyCode: false,
|
||||
counting: false,
|
||||
countdown: 60,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -492,14 +818,6 @@
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.form.position) {
|
||||
uni.showToast({
|
||||
title: '请输入店内职务',
|
||||
icon: 'none',
|
||||
mask: true
|
||||
})
|
||||
return
|
||||
}
|
||||
if(!this.form.latitude || !this.form.longitude) {
|
||||
uni.showToast({
|
||||
title: '请通过定位获取位置',
|
||||
@ -542,8 +860,10 @@
|
||||
// 选择头像
|
||||
async onChooseAvatar(e) {
|
||||
try {
|
||||
console.log('开始选择头像:', e);
|
||||
// 获取头像临时路径
|
||||
const avatarUrl = e.detail.avatarUrl;
|
||||
console.log('获取到的头像临时路径:', avatarUrl);
|
||||
|
||||
if (!avatarUrl) {
|
||||
throw new Error('未获取到头像');
|
||||
@ -553,66 +873,80 @@
|
||||
title: '上传中...'
|
||||
});
|
||||
|
||||
const token = getToken();
|
||||
console.log('当前token:', token);
|
||||
|
||||
// 上传头像
|
||||
const uploadRes = await uni.uploadFile({
|
||||
url: base_url + '/bar/common/upload', // 使用正确的API路径
|
||||
uni.uploadFile({
|
||||
url: base_url + '/api/bar/common/upload',
|
||||
filePath: avatarUrl,
|
||||
name: 'file', // 使用正确的参数名
|
||||
name: 'file',
|
||||
header: {
|
||||
'Authorization': getToken()
|
||||
'Authorization': token,
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
formData: {
|
||||
type: 'image' // 指定上传类型为图片
|
||||
type: 'image'
|
||||
},
|
||||
success: (uploadFileRes) => {
|
||||
console.log('上传响应原始数据:', uploadFileRes);
|
||||
|
||||
try {
|
||||
// 检查状态码
|
||||
if (uploadFileRes.statusCode !== 200) {
|
||||
throw new Error(`服务器响应错误: ${uploadFileRes.statusCode}`);
|
||||
}
|
||||
|
||||
let result;
|
||||
try {
|
||||
result = JSON.parse(uploadFileRes.data);
|
||||
} catch (parseError) {
|
||||
console.error('解析响应数据失败，原始数据:', uploadFileRes.data);
|
||||
throw new Error('服务器响应格式错误');
|
||||
}
|
||||
|
||||
console.log('解析后的响应数据:', result);
|
||||
|
||||
if (result.code === 200) {
|
||||
const imageUrl = result.data || result.url;
|
||||
if (!imageUrl) {
|
||||
throw new Error('未获取到图片地址');
|
||||
}
|
||||
|
||||
// 更新表单数据
|
||||
this.form.barLogo = imageUrl;
|
||||
|
||||
// 更新本地存储的门店信息
|
||||
const barInfo = uni.getStorageSync('barInfo') || {};
|
||||
barInfo.barLogo = imageUrl;
|
||||
uni.setStorageSync('barInfo', barInfo);
|
||||
|
||||
uni.showToast({
|
||||
title: '更新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
} else {
|
||||
throw new Error(result.msg || '上传失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('处理响应数据时出错:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('上传请求失败:', err);
|
||||
throw new Error(err.errMsg || '上传失败');
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
|
||||
// 解析响应数据
|
||||
let result;
|
||||
try {
|
||||
// 检查响应数据是否为JSON字符串
|
||||
if (typeof uploadRes.data === 'string' && uploadRes.data.trim().startsWith('{')) {
|
||||
result = JSON.parse(uploadRes.data);
|
||||
} else {
|
||||
// 如果不是JSON，尝试直接使用响应数据
|
||||
result = {
|
||||
code: uploadRes.statusCode === 200 ? 200 : 500,
|
||||
data: uploadRes.data,
|
||||
msg: uploadRes.statusCode === 200 ? '上传成功' : '上传失败'
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('解析响应数据失败:', e);
|
||||
// 如果解析失败，使用默认响应
|
||||
result = {
|
||||
code: uploadRes.statusCode === 200 ? 200 : 500,
|
||||
data: uploadRes.data,
|
||||
msg: '解析响应失败'
|
||||
};
|
||||
}
|
||||
|
||||
if (result.code === 200) {
|
||||
// 更新表单数据
|
||||
this.form.barLogo = result.data;
|
||||
|
||||
// 更新本地存储的门店信息
|
||||
const barInfo = uni.getStorageSync('barInfo') || {};
|
||||
barInfo.barLogo = result.data;
|
||||
uni.setStorageSync('barInfo', barInfo);
|
||||
|
||||
uni.showToast({
|
||||
title: '更新成功',
|
||||
icon: 'success'
|
||||
});
|
||||
} else {
|
||||
throw new Error(result.msg || '上传失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('选择头像失败:', error);
|
||||
console.error('选择头像完整错误信息:', error);
|
||||
uni.showToast({
|
||||
title: error.message || '选择头像失败',
|
||||
icon: 'none'
|
||||
});
|
||||
} finally {
|
||||
uni.hideLoading();
|
||||
}
|
||||
},
|
||||
@ -621,7 +955,134 @@
|
||||
uni.navigateTo({
|
||||
url: '/pagesMy/myAddress'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 预览图片
|
||||
previewImage(type) {
|
||||
const imageUrl = type === 'businessLicense' ? this.barInfo.businessLicense : this.barInfo.storefrontPhoto;
|
||||
if (!imageUrl) {
|
||||
uni.showToast({
|
||||
title: '暂无图片',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.previewUrl = imageUrl;
|
||||
this.showPreview = true;
|
||||
},
|
||||
// 关闭预览
|
||||
closePreview() {
|
||||
this.showPreview = false;
|
||||
this.previewUrl = '';
|
||||
},
|
||||
// 显示更换手机号弹窗
|
||||
showChangePhone() {
|
||||
this.showPhoneModal = true;
|
||||
},
|
||||
|
||||
// 关闭更换手机号弹窗
|
||||
closePhoneModal() {
|
||||
this.showPhoneModal = false;
|
||||
},
|
||||
|
||||
// 确认更换手机号
|
||||
confirmChangePhone() {
|
||||
this.closePhoneModal();
|
||||
this.showPhoneInputModal = true;
|
||||
this.newPhone = '';
|
||||
this.verifyCode = '';
|
||||
this.showVerifyCode = false;
|
||||
},
|
||||
|
||||
// 关闭手机号输入弹窗
|
||||
closePhoneInputModal() {
|
||||
this.showPhoneInputModal = false;
|
||||
this.newPhone = '';
|
||||
this.verifyCode = '';
|
||||
this.showVerifyCode = false;
|
||||
this.counting = false;
|
||||
},
|
||||
|
||||
// 获取验证码
|
||||
getVerifyCode() {
|
||||
if (this.counting) return;
|
||||
|
||||
if (!this.newPhone) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^1[3-9]\d{9}$/.test(this.newPhone)) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO: 调用发送验证码接口
|
||||
this.showVerifyCode = true;
|
||||
this.counting = true;
|
||||
this.countdown = 60;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
if (this.countdown > 0) {
|
||||
this.countdown--;
|
||||
} else {
|
||||
this.counting = false;
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
// 保存新手机号
|
||||
saveNewPhone() {
|
||||
if (!this.newPhone) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^1[3-9]\d{9}$/.test(this.newPhone)) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: '保存中...'
|
||||
});
|
||||
|
||||
editBarInfo({ barContactPhone: this.newPhone }).then(res => {
|
||||
if (res.code === 200) {
|
||||
uni.showToast({
|
||||
title: '更换成功',
|
||||
icon: 'success'
|
||||
});
|
||||
this.closePhoneInputModal();
|
||||
this.getBarInfoFun(); // 刷新页面信息
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg || '更换失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.msg || '更换失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}).finally(() => {
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user