564 lines
11 KiB
Vue
564 lines
11 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.region}}</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>N080202</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'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
form: {
|
||
|
|
barLogo: '',
|
||
|
|
nickName: '',
|
||
|
|
barContactPhone: '',
|
||
|
|
barName: '',
|
||
|
|
address: '',
|
||
|
|
businessLicense: '', // 营业执照
|
||
|
|
storefrontPhoto: '', // 门头照
|
||
|
|
position: '', // 职务
|
||
|
|
openId: '',
|
||
|
|
region: ''
|
||
|
|
},
|
||
|
|
userInfo: {},
|
||
|
|
currentTab: 1,
|
||
|
|
QQMap: null,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
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()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
goBack() {
|
||
|
|
uni.navigateBack();
|
||
|
|
},
|
||
|
|
copyId() {
|
||
|
|
uni.setClipboardData({
|
||
|
|
data: 'N080202',
|
||
|
|
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'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 只保留微信头像选择方法
|
||
|
|
onChooseAvatar(e) {
|
||
|
|
const avatarUrl = e.detail.avatarUrl;
|
||
|
|
// 上传头像到服务器
|
||
|
|
uni.uploadFile({
|
||
|
|
url: base_url + '/bar/common/upload',
|
||
|
|
filePath: avatarUrl,
|
||
|
|
name: 'file',
|
||
|
|
formData: {
|
||
|
|
type: 'image'
|
||
|
|
},
|
||
|
|
success: (uploadFileRes) => {
|
||
|
|
this.form.barLogo = JSON.parse(uploadFileRes.data).url;
|
||
|
|
},
|
||
|
|
fail: (err) => {
|
||
|
|
uni.showToast({
|
||
|
|
title: '头像上传失败',
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
// 跳转到地址页面
|
||
|
|
toAddress() {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pagesMy/myAddress'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|