zdtap-uniapp-main/pagesMy/myAddress.vue

<template>
	<view class="page">
		<view class="page-content">
			<!-- 地址信息区域 -->
			<view class="section">
				<view class="section-title">门店地址</view>
				<view class="address-content">
					<view class="address-input" @click="getMyLocation">
						<text class="cuIcon-locationfill location-icon"></text>
						<text class="address-text">{{form.address || '点击选择门店地址'}}</text>
						<text class="cuIcon-right arrow-icon"></text>
					</view>
				</view>
			</view>

			<!-- 提示信息区域 -->
			<view class="section">
				<view class="section-title">温馨提示</view>
				<view class="tips-content">
					<view class="tip-item">
						<text class="cuIcon-info"></text>
						<text>当前可变更次数：<text class="highlight">2</text>次</text>
					</view>
					<view class="tip-item">
						<text class="cuIcon-warn"></text>
						<text>地址变更将影响您的扫码核销准确性，请谨慎操作</text>
					</view>
					<view class="tip-item">
						<text class="cuIcon-notice"></text>
						<text>变更次数将在门店认证审核通过后重置为2次</text>
					</view>
				</view>
			</view>

			<!-- 保存按钮 -->
			<view class="save-btn" @click="saveAddress">
				保存地址
			</view>
		</view>
	</view>
</template>

<script>
	import { updateAddress } from "@/api/user.js"	
	import {
		getBarInfo
	} from '@/api/bar.js'
	export default {
		data() {
			return {
				form: {
					address: '',
					latitude: '',
					longitude: ''
				}
			};
		},
		onLoad(){
			this.getBarInfoFun()
		},
		methods: {
			// 获取酒吧信息
			getBarInfoFun() {
				getBarInfo().then(res => {
					console.log(res,'1111&&&&')
					this.form.address = res.data.address
					this.form.latitude = res.data.latitude
					this.form.longitude = res.data.longitude
				})
			},
			// 保存地址
			saveAddress() {
				if(!this.form.address) {
					uni.showToast({
						title: '请选择地址',
						icon: 'none',
					})
					return
				}
				updateAddress(this.form).then(res => {
					uni.showToast({
						title: '保存成功',
						icon: 'none',
					})
					setTimeout(()=>{
						uni.navigateBack()
						},500)
				})
			},
			// 获取位置
			getMyLocation() {
				uni.getSetting({
					success: (res) => {
						console.log(res)
						if (!res.authSetting['scope.userLocation']) {
							uni.authorize({
								scope: 'scope.userLocation',
								success: (res) => {},
								fail: (err) => {
									uni.showModal({
										title: '提示',
										content: '请先授权获取您的位置信息',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting({
													success: (res) => {
														if (res
															.authSetting[
																'scope.userLocation'
																]) {
															this.handleGetLocation()
														}
													}
												})
											} else if (res.cancel) {
												console.log('用户点击取消')
											}
										}
									})
								}
							})
						} else {
							this.handleGetLocation()
						}
					},
				})
			},
			handleGetLocation() {
				uni.getLocation({
					type: "gcj02",
					success: (res) => {
						console.log(res)
						uni.chooseLocation({
							complete: (res) => {
								console.log(res)
								if (res.errMsg == 'chooseLocation:ok') {
									this.form.address = res.address
									this.form.latitude = res.latitude
									this.form.longitude = res.longitude
								}
							}
						})
			
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<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;
			}
		}
	}

	.address-content {
		padding: 32rpx;

		.address-input {
			display: flex;
			align-items: center;
			padding: 32rpx;
			background: #F7F7F7;
			border-radius: 12rpx;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.99);
				background: #F0F0F0;
			}

			.location-icon {
				font-size: 40rpx;
				color: #19367A;
				margin-right: 16rpx;
			}

			.address-text {
				flex: 1;
				font-size: 28rpx;
				color: #333333;
				
				&:empty::before {
					content: '点击选择门店地址';
					color: #999999;
				}
			}

			.arrow-icon {
				font-size: 24rpx;
				color: #CCCCCC;
				margin-left: 16rpx;
			}
		}
	}

	.tips-content {
		padding: 32rpx;

		.tip-item {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			
			&:last-child {
				margin-bottom: 0;
			}

			.cuIcon-info, .cuIcon-warn, .cuIcon-notice {
				font-size: 32rpx;
				margin-right: 16rpx;
			}

			.cuIcon-info {
				color: #19367A;
			}

			.cuIcon-warn {
				color: #FF9900;
			}

			.cuIcon-notice {
				color: #19367A;
			}

			text {
				font-size: 26rpx;
				color: #666666;
				line-height: 1.6;

				.highlight {
					color: #19367A;
					font-weight: 600;
				}
			}
		}
	}

	.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);
		}
	}
}
</style>