zdtap-uniapp-main/pagesMy/setting.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'
	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'
				})
			},
			// 只保留微信头像选择方法
			onChooseAvatar(e) {
				const avatarUrl = e.detail.avatarUrl;
				uni.showLoading({
					title: '上传中'
				});
				// 上传头像到服务器
				uni.uploadFile({
					url: base_url + '/bar/common/upload',
					filePath: avatarUrl,
					name: 'file',
					formData: {
						type: 'image'
					},
					success: (uploadFileRes) => {
						try {
							let result;
							if (typeof uploadFileRes.data === 'string') {
								result = JSON.parse(uploadFileRes.data);
							} else {
								result = uploadFileRes.data;
							}
							
							if (result && result.code === 200) {
								this.form.barLogo = result.data;  // 使用data字段获取URL
								uni.hideLoading();
								uni.showToast({
									title: '上传成功',
									icon: 'success'
								});
							} else {
								throw new Error(result?.msg || '上传失败');
							}
						} catch (error) {
							console.error('Upload response parsing error:', error);
							uni.hideLoading();
							uni.showToast({
								title: error.message || '上传失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('Upload failed:', err);
						uni.hideLoading();
						uni.showToast({
							title: '头像上传失败',
							icon: 'none'
						});
					}
				});
			},
			// 跳转到地址页面
			toAddress() {
				uni.navigateTo({
					url: '/pagesMy/myAddress'
				})
			}
		}
	}
</script>