628 lines
13 KiB
Vue
628 lines
13 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 页面内容 -->
|
||
<view class="page-content">
|
||
<!-- 个人资料部分 -->
|
||
<view class="section">
|
||
<view class="section-title">个人资料</view>
|
||
<view class="info-list">
|
||
<view class="info-item">
|
||
<text>头像</text>
|
||
<view class="right-content">
|
||
<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
||
<image v-if="form.barLogo" :src="form.barLogo" class="avatar"></image>
|
||
<view v-else class="avatar-placeholder">
|
||
<text class="cuIcon-camerafill"></text>
|
||
</view>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<text>用户名</text>
|
||
<view class="right-content">
|
||
<input class="input-field" type="text" v-model="form.nickName" placeholder="请输入用户名" />
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<text>关联手机</text>
|
||
<view class="right-content">
|
||
<text class="info-text">{{maskedPhone}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选项卡 -->
|
||
<view class="tab-box">
|
||
<view class="tab-item" :class="{'active': currentTab === 1}" @click="changeTab(1)">
|
||
门店信息
|
||
</view>
|
||
<view class="tab-item" :class="{'active': currentTab === 2}" @click="changeTab(2)">
|
||
认证信息
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 门店资料部分 -->
|
||
<view v-if="currentTab === 1" class="section">
|
||
<view class="info-list">
|
||
<view class="info-item">
|
||
<text>所在地区</text>
|
||
<view class="right-content">
|
||
<text class="info-text">{{form.city || '--'}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-item" @click="toAddress">
|
||
<text>门店地址</text>
|
||
<view class="right-content">
|
||
<text class="info-text">{{form.address}}</text>
|
||
<text class="cuIcon-right"></text>
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<text>门店名称</text>
|
||
<view class="right-content">
|
||
<text class="info-text">{{form.barName}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<text>门店ID</text>
|
||
<view class="right-content">
|
||
<text class="info-text">{{ barInfo.barNumber || '--' }}</text>
|
||
<text class="cuIcon-copy text-gray" @click="copyId"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 认证信息部分 -->
|
||
<view v-if="currentTab === 2" class="section">
|
||
<view class="info-list">
|
||
<view class="info-item">
|
||
<text>门店认证期限时间</text>
|
||
<view class="right-content">
|
||
<text class="text-gray">2026-07-31</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<text>营业执照</text>
|
||
<view class="right-content" @click="handleUpload('businessLicense')">
|
||
<text class="text-blue">点击查看</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<text>门头照片</text>
|
||
<view class="right-content" @click="handleUpload('storefrontPhoto')">
|
||
<text class="text-blue">点击查看</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 保存按钮 -->
|
||
<view class="save-btn" @click="handleSub">
|
||
保存
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #F7F7F7;
|
||
|
||
.page-content {
|
||
padding: 24rpx 32rpx;
|
||
}
|
||
|
||
.section {
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
padding: 32rpx;
|
||
color: #333333;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 32rpx;
|
||
bottom: 0;
|
||
width: 48rpx;
|
||
height: 4rpx;
|
||
background: #19367A;
|
||
border-radius: 2rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-list {
|
||
.info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 32rpx;
|
||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
background: rgba(25, 54, 122, 0.05);
|
||
}
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.right-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
|
||
.input-field {
|
||
text-align: right;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.avatar {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #19367A;
|
||
box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.1);
|
||
}
|
||
|
||
.avatar-placeholder {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
background: #F5F5F5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #19367A;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.text-gray {
|
||
color: #999999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.text-blue {
|
||
color: #19367A;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.info-text {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
text-align: right;
|
||
}
|
||
|
||
.cuIcon-right {
|
||
color: #CCCCCC;
|
||
font-size: 24rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.cuIcon-copy {
|
||
padding: 8rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab-box {
|
||
display: flex;
|
||
background: #FFFFFF;
|
||
margin-bottom: 24rpx;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
padding: 24rpx 0;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
|
||
&.active {
|
||
color: #19367A;
|
||
font-weight: 600;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 48rpx;
|
||
height: 4rpx;
|
||
background: #19367A;
|
||
border-radius: 2rpx;
|
||
transition: all 0.3s ease;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.save-btn {
|
||
width: 686rpx;
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, #19367A, #2C4C99);
|
||
border-radius: 44rpx;
|
||
color: #FFFFFF;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
letter-spacing: 2rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 48rpx auto;
|
||
box-shadow: 0 4rpx 16rpx rgba(25, 54, 122, 0.2);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.1);
|
||
}
|
||
}
|
||
|
||
.avatar-btn {
|
||
padding: 0;
|
||
width: 88rpx !important;
|
||
height: 88rpx !important;
|
||
background: none;
|
||
border: none;
|
||
line-height: 1;
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
|
||
.avatar {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
border: 2rpx solid #19367A;
|
||
box-shadow: 0 2rpx 8rpx rgba(25, 54, 122, 0.1);
|
||
}
|
||
|
||
.avatar-placeholder {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
background: #F5F5F5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #19367A;
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// import QQMapSdk from '@/common/qqmap-wx-jssdk.js'
|
||
import {
|
||
barRegister
|
||
} from '@/api/login.js'
|
||
import {
|
||
base_url
|
||
} from '@/api/config.js'
|
||
import {
|
||
getBarInfo,
|
||
editBarInfo,
|
||
reAuth
|
||
} from '@/api/bar.js'
|
||
import { getToken } from '@/utils/auth.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
barLogo: '',
|
||
nickName: '',
|
||
barContactPhone: '',
|
||
barName: '',
|
||
address: '',
|
||
businessLicense: '', // 营业执照
|
||
storefrontPhoto: '', // 门头照
|
||
position: '', // 职务
|
||
openId: '',
|
||
city: ''
|
||
},
|
||
userInfo: {},
|
||
currentTab: 1,
|
||
QQMap: null,
|
||
barInfo: {},
|
||
};
|
||
},
|
||
computed: {
|
||
maskedPhone() {
|
||
if (!this.form.barContactPhone) return '';
|
||
return this.form.barContactPhone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
// this.QQMap = new QQMapSdk({
|
||
// key: "YQCBZ-SQZ6A-P6EKD-CAUGZ-L7IWO-JMFMJ"//密钥
|
||
// });
|
||
this.getBarInfoFun()
|
||
},
|
||
onShow() {
|
||
// 获取最新的门店信息
|
||
const barInfo = uni.getStorageSync('barInfo');
|
||
if (barInfo) {
|
||
this.barInfo = barInfo;
|
||
}
|
||
},
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack();
|
||
},
|
||
copyId() {
|
||
uni.setClipboardData({
|
||
data: this.barInfo.barNumber || '',
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '复制成功',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
},
|
||
changeTab(key) {
|
||
this.currentTab = key
|
||
},
|
||
// 获取酒吧信息
|
||
getBarInfoFun() {
|
||
getBarInfo().then(res => {
|
||
this.barInfo = res.data
|
||
this.form = JSON.parse(JSON.stringify(res.data))
|
||
})
|
||
},
|
||
handleSub() {
|
||
if(this.currentTab == 1) {
|
||
this.submitForm()
|
||
}else if(this.currentTab == 2) {
|
||
this.reAuthFun()
|
||
}
|
||
},
|
||
// 重新认证
|
||
reAuthFun() {
|
||
if (!this.form.businessLicense) {
|
||
uni.showToast({
|
||
title: '请上传营业执照',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.storefrontPhoto) {
|
||
uni.showToast({
|
||
title: '请上传门头照',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
let data = {
|
||
businessLicense: this.form.businessLicense,
|
||
storefrontPhoto: this.form.storefrontPhoto,
|
||
}
|
||
reAuth(data).then(res => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: '提交成功，等待审核',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
uni.hideLoading()
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: '/pages/index/my'
|
||
})
|
||
}, 500)
|
||
}
|
||
})
|
||
|
||
},
|
||
// 提交
|
||
submitForm() {
|
||
if (!this.form.barLogo) {
|
||
uni.showToast({
|
||
title: '请上传头像',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.nickName) {
|
||
uni.showToast({
|
||
title: '请输入用户名',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.barContactPhone) {
|
||
uni.showToast({
|
||
title: '请输入手机号',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.barName) {
|
||
uni.showToast({
|
||
title: '请输入门店名称',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.address) {
|
||
uni.showToast({
|
||
title: '请输入门店地址',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.form.position) {
|
||
uni.showToast({
|
||
title: '请输入店内职务',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if(!this.form.latitude || !this.form.longitude) {
|
||
uni.showToast({
|
||
title: '请通过定位获取位置',
|
||
icon: 'none',
|
||
mask: true,
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '提交中',
|
||
mask: true
|
||
})
|
||
editBarInfo(this.form).then(res => {
|
||
if (res.code == 200) {
|
||
// this.userInfo = res.data // 暂存用户信息
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
uni.hideLoading()
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: '/pages/index/my'
|
||
})
|
||
}, 500)
|
||
|
||
}
|
||
}).catch(() => {
|
||
// uni.hideLoading()
|
||
})
|
||
|
||
},
|
||
toHome() {
|
||
uni.setStorageSync('userInfo', this.userInfo)
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
},
|
||
// 选择头像
|
||
async onChooseAvatar(e) {
|
||
try {
|
||
// 获取头像临时路径
|
||
const avatarUrl = e.detail.avatarUrl;
|
||
|
||
if (!avatarUrl) {
|
||
throw new Error('未获取到头像');
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: '上传中...'
|
||
});
|
||
|
||
// 上传头像
|
||
const uploadRes = await uni.uploadFile({
|
||
url: base_url + '/bar/common/upload', // 使用正确的API路径
|
||
filePath: avatarUrl,
|
||
name: 'file', // 使用正确的参数名
|
||
header: {
|
||
'Authorization': getToken()
|
||
},
|
||
formData: {
|
||
type: 'image' // 指定上传类型为图片
|
||
}
|
||
});
|
||
|
||
// 解析响应数据
|
||
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);
|
||
uni.showToast({
|
||
title: error.message || '选择头像失败',
|
||
icon: 'none'
|
||
});
|
||
} finally {
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
// 跳转到地址页面
|
||
toAddress() {
|
||
uni.navigateTo({
|
||
url: '/pagesMy/myAddress'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|