486 lines
13 KiB
Vue
486 lines
13 KiB
Vue
<template>
|
||
<view class="location-display" :class="{ 'scroll ': isScrolled }" @click="handleLocationClick">
|
||
<text v-show="!positioningType" class="iconfont icon-ic_location1"></text>
|
||
<view class="location-text">
|
||
<!-- 小程序使用CSS动画类 -->
|
||
<!-- #ifdef MP -->
|
||
<text class="text-content mp-text" :class="animationClass" :style="{transform: `translateX(${textOffset}px)`}">{{ displayText }}</text>
|
||
<!-- #endif -->
|
||
<!-- 其他平台使用JS动画 -->
|
||
<!-- #ifndef MP -->
|
||
<text class="text-content" :style="{transform: `translateX(${textOffset}px)`}">{{ displayText }}</text>
|
||
<!-- #endif -->
|
||
</view>
|
||
<text v-show="positioningType" class="iconfont icon-ic_downarrow ml-4"></text>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'LocationDisplay',
|
||
props: {
|
||
// 显示的位置文字
|
||
text: {
|
||
type: String,
|
||
default: '定位中...'
|
||
},
|
||
// 最大显示宽度
|
||
maxWidth: {
|
||
type: String,
|
||
default: '118rpx'
|
||
},
|
||
// 最大高度
|
||
maxHeight: {
|
||
type: String,
|
||
default: '42rpx'
|
||
},
|
||
// 是否处于滚动状态 外界用于时候更换颜色
|
||
isScrolled: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 是否启用文字滚动功能
|
||
enableScroll: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
positioningType:{
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
|
||
},
|
||
data() {
|
||
return {
|
||
textOffset: 0, // 文字偏移量
|
||
scrollTimer: null, // 滚动定时器
|
||
isScrolling: false, // 是否正在滚动
|
||
// 小程序CSS动画状态
|
||
animationClass: '', // 动画类名
|
||
maxDistance: 0, // 最大滚动距离
|
||
currentLocationName: '', // 当前位置名称
|
||
storageTimer: null, // 位置监听定时器
|
||
isDestroyed: false // 组件销毁标记
|
||
}
|
||
},
|
||
computed: {
|
||
displayText() {
|
||
// 如果外部传入了text，优先使用外部text
|
||
if (this.text && this.text !== '定位中...') {
|
||
return this.text;
|
||
}
|
||
if(this.currentLocationName){
|
||
return this.currentLocationName
|
||
} else {
|
||
// 否则使用内部管理的位置数据
|
||
return this.positioningType ? '选择圈层' : '选择位置';
|
||
}
|
||
|
||
}
|
||
},
|
||
mounted() {
|
||
// 只有在没有外部传入text时，才启用内部位置管理
|
||
if (!this.text || this.text === '定位中...') {
|
||
this.initLocationData();
|
||
this.setupStorageListener();
|
||
}
|
||
|
||
// 启动滚动
|
||
this.resetAndStartScroll();
|
||
},
|
||
created() {
|
||
// LocationDisplay 组件初始化
|
||
},
|
||
watch: {
|
||
text() {
|
||
this.resetAndStartScroll();
|
||
},
|
||
displayText() {
|
||
this.resetAndStartScroll();
|
||
},
|
||
enableScroll() {
|
||
if (!this.enableScroll) {
|
||
this.stopScroll();
|
||
this.textOffset = 0;
|
||
} else {
|
||
this.resetAndStartScroll();
|
||
}
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
this.isDestroyed = true;
|
||
this.stopScroll();
|
||
this.stopLocationListener();
|
||
},
|
||
methods: {
|
||
// 重置并开始滚动 - 临时停用
|
||
resetAndStartScroll() {
|
||
this.stopScroll();
|
||
this.textOffset = 0;
|
||
this.isScrolling = false;
|
||
|
||
// 临时停用滚动功能
|
||
return;
|
||
|
||
if (!this.enableScroll) return;
|
||
|
||
this.$nextTick(() => {
|
||
this.startSimpleScroll();
|
||
});
|
||
},
|
||
|
||
// 完整的双向滚动逻辑
|
||
startSimpleScroll() {
|
||
if (this.isScrolling) return;
|
||
|
||
// 先计算需要滚动的距离
|
||
this.$nextTick(() => {
|
||
this.calculateScrollDistance();
|
||
});
|
||
},
|
||
|
||
// 计算滚动距离
|
||
calculateScrollDistance() {
|
||
const query = uni.createSelectorQuery().in(this);
|
||
query.select('.text-content').boundingClientRect();
|
||
query.select('.location-text').boundingClientRect();
|
||
query.exec((res) => {
|
||
if (res[0] && res[1]) {
|
||
const textWidth = res[0].width; // 文字总宽度
|
||
const containerWidth = res[1].width; // 容器宽度
|
||
let overflowWidth = textWidth - containerWidth; // 溢出宽度
|
||
|
||
// 重新计算正确的滚动距离
|
||
// 目标：让文字末尾刚好显示在容器右边缘，而不是让文字滚动消失
|
||
// 正确公式：滚动距离 = 文字宽度 - 容器宽度 (这样文字末尾刚好到达容器右边)
|
||
// 但实际上我们不需要滚动这么远，只需要让末尾文字可见即可
|
||
|
||
// 小程序保守策略：确保文字末尾能显示，但保留开头部分
|
||
// #ifdef MP
|
||
// 策略：滚动距离 = 溢出宽度 - 10px，这样文字末尾显示，开头也保留10px可见
|
||
overflowWidth = Math.max(0, overflowWidth - 10);
|
||
// #endif
|
||
|
||
if (overflowWidth > 0) {
|
||
// 需要滚动，开始双向滚动
|
||
this.startTwoWayScroll(overflowWidth);
|
||
} else {
|
||
// console.log('LocationDisplay无需滚动');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// 双向滚动：先向左显示末尾，再向右回到开头
|
||
startTwoWayScroll(maxDistance) {
|
||
// 延迟1秒开始第一阶段滚动
|
||
setTimeout(() => {
|
||
if (this.isDestroyed || !this.enableScroll) return;
|
||
|
||
this.isScrolling = true;
|
||
this.textOffset = 0;
|
||
|
||
// 第一阶段：向左滚动显示文字末尾
|
||
this.scrollToEnd(maxDistance);
|
||
}, 1000);
|
||
},
|
||
|
||
// 第一阶段：向左滚动到末尾
|
||
scrollToEnd(maxDistance) {
|
||
// 小程序优化：降低频率，增加步进
|
||
// #ifdef MP
|
||
const scrollStep = 1; // 小程序用更大步进
|
||
const scrollInterval = 30; // 小程序用更长间隔
|
||
// #endif
|
||
|
||
// H5保持丝滑
|
||
// #ifdef H5
|
||
const scrollStep = 0.5;
|
||
const scrollInterval = 20;
|
||
// #endif
|
||
|
||
// APP采用中等参数
|
||
// #ifdef APP-PLUS
|
||
const scrollStep = 0.8;
|
||
const scrollInterval = 25;
|
||
// #endif
|
||
this.scrollTimer = setInterval(() => {
|
||
// 小程序模式：每次更新前检查是否会超出边界
|
||
// #ifdef MP
|
||
const nextOffset = this.textOffset - scrollStep;
|
||
if (nextOffset < -maxDistance) {
|
||
// 直接定位到目标位置，不再继续滚动
|
||
this.textOffset = -maxDistance;
|
||
clearInterval(this.scrollTimer);
|
||
|
||
setTimeout(() => {
|
||
this.scrollToStart();
|
||
}, 2000);
|
||
return;
|
||
}
|
||
this.textOffset = nextOffset;
|
||
// #endif
|
||
|
||
// H5和APP正常滚动
|
||
// #ifndef MP
|
||
this.textOffset -= scrollStep;
|
||
|
||
// 滚动到末尾位置（文字末尾刚好显示完整）
|
||
if (this.textOffset <= -maxDistance) {
|
||
this.textOffset = -maxDistance; // 精确定位
|
||
clearInterval(this.scrollTimer);
|
||
|
||
// 停留2秒后开始第二阶段
|
||
setTimeout(() => {
|
||
this.scrollToStart();
|
||
}, 2000);
|
||
}
|
||
// #endif
|
||
}, scrollInterval);
|
||
},
|
||
|
||
// 第二阶段：向右滚动回到开头
|
||
scrollToStart() {
|
||
// 小程序优化：使用相同的平台参数
|
||
// #ifdef MP
|
||
const scrollStep = 1;
|
||
const scrollInterval = 30;
|
||
// #endif
|
||
|
||
// H5保持丝滑
|
||
// #ifdef H5
|
||
const scrollStep = 0.5;
|
||
const scrollInterval = 20;
|
||
// #endif
|
||
|
||
// APP采用中等参数
|
||
// #ifdef APP-PLUS
|
||
const scrollStep = 0.8;
|
||
const scrollInterval = 25;
|
||
// #endif
|
||
this.scrollTimer = setInterval(() => {
|
||
// 小程序模式：每次更新前检查是否会超出边界
|
||
// #ifdef MP
|
||
const nextOffset = this.textOffset + scrollStep;
|
||
if (nextOffset > 0) {
|
||
// 直接定位到起始位置，不再继续滚动
|
||
this.textOffset = 0;
|
||
this.stopScroll();
|
||
return;
|
||
}
|
||
this.textOffset = nextOffset;
|
||
// #endif
|
||
|
||
// H5和APP正常滚动
|
||
// #ifndef MP
|
||
this.textOffset += scrollStep;
|
||
|
||
// 回到初始位置
|
||
if (this.textOffset >= 0) {
|
||
this.textOffset = 0; // 精确定位到起始位置
|
||
this.stopScroll();
|
||
}
|
||
// #endif
|
||
}, scrollInterval);
|
||
},
|
||
|
||
|
||
// 停止滚动
|
||
stopScroll() {
|
||
if (this.scrollTimer) {
|
||
clearInterval(this.scrollTimer);
|
||
this.scrollTimer = null;
|
||
}
|
||
this.isScrolling = false;
|
||
},
|
||
|
||
// 点击组件圈层
|
||
handleLocationClick() {
|
||
this.$emit('click');
|
||
},
|
||
|
||
// ============ 位置管理相关方法 ============
|
||
|
||
// 从缓存获取位置数据 - 以location_info为准
|
||
initLocationData() {
|
||
if (this.isDestroyed) return;
|
||
|
||
try {
|
||
// 优先使用location_info（用户最新的主动定位选择）
|
||
const locationInfo = uni.getStorageSync('location_info');
|
||
if (locationInfo && (locationInfo.name || locationInfo.address) && !this.positioningType) {
|
||
this.currentLocationName = locationInfo.name || locationInfo.address;
|
||
return;
|
||
}
|
||
|
||
// 备选：使用areas_info（圈层选择的位置）
|
||
const areasInfo = uni.getStorageSync('areas_info');
|
||
if (areasInfo && Array.isArray(areasInfo) && areasInfo.length > 0 && this.positioningType) {
|
||
// 显示最新选择的圈层
|
||
const latestArea = areasInfo[0];
|
||
this.currentLocationName = latestArea.name || latestArea.address || '选择圈层';
|
||
return;
|
||
}
|
||
|
||
// 默认显示
|
||
this.currentLocationName = this.positioningType ? '选择圈层' : '选择位置';
|
||
} catch (error) {
|
||
this.currentLocationName = this.positioningType ? '选择圈层' : '选择位置';
|
||
}
|
||
},
|
||
|
||
// 设置存储监听
|
||
setupStorageListener() {
|
||
if (this.isDestroyed) return;
|
||
|
||
// 使用定时器定期检查缓存变化
|
||
this.storageTimer = setInterval(() => {
|
||
if (!this.isDestroyed) {
|
||
this.checkLocationUpdate();
|
||
}
|
||
}, 1000); // 每秒检查一次
|
||
},
|
||
|
||
// 检查位置更新 - 以location_info为准
|
||
checkLocationUpdate() {
|
||
if (this.isDestroyed) return;
|
||
|
||
try {
|
||
let newLocationName = this.positioningType ? '选择圈层' : '选择位置';
|
||
|
||
// 优先使用location_info（用户最新的主动定位选择）
|
||
const locationInfo = uni.getStorageSync('location_info');
|
||
if (locationInfo && (locationInfo.name || locationInfo.address)&& !this.positioningType) {
|
||
newLocationName = locationInfo.name || locationInfo.address;
|
||
} else {
|
||
// 备选：使用areas_info（圈层选择的位置）
|
||
const areasInfo = uni.getStorageSync('areas_info');
|
||
if (areasInfo && Array.isArray(areasInfo) && areasInfo.length > 0 && this.positioningType) {
|
||
const latestArea = areasInfo[0];
|
||
newLocationName = latestArea.name || latestArea.address || '选择圈层';
|
||
}
|
||
}
|
||
|
||
// 如果地址发生变化，更新显示
|
||
if (newLocationName !== this.currentLocationName) {
|
||
this.currentLocationName = newLocationName;
|
||
// displayText计算属性会自动更新，触发watch重新计算滚动
|
||
}
|
||
} catch (error) {
|
||
// 位置更新失败，忽略
|
||
}
|
||
},
|
||
|
||
// 停止位置监听
|
||
stopLocationListener() {
|
||
if (this.storageTimer) {
|
||
clearInterval(this.storageTimer);
|
||
this.storageTimer = null;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.scroll{
|
||
.iconfont {
|
||
color: #000 !important;
|
||
}
|
||
|
||
.text-content {
|
||
color: #000 !important;
|
||
}
|
||
}
|
||
.location-display {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
height: 42rpx;
|
||
max-height: 42rpx;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
margin-right: 8rpx;
|
||
width: 154rpx;
|
||
|
||
.iconfont {
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
margin-right: 2rpx;
|
||
flex-shrink: 0;
|
||
height: 24rpx;
|
||
line-height: 24rpx;
|
||
margin-right: 4rpx;
|
||
/* #ifdef H5 */
|
||
font-size: 24rpx;
|
||
/* #endif */
|
||
}
|
||
|
||
.location-text {
|
||
line-height: 32px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.text-content {
|
||
/* 基础样式 */
|
||
height: 18px;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 13px;
|
||
color: #FFFFFF;
|
||
line-height: 18px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
display: inline-block;
|
||
|
||
/* H5平台特殊处理 */
|
||
/* #ifdef H5 */
|
||
min-width: 100%;
|
||
font-size: 12px;
|
||
line-height: 42rpx;
|
||
height: 42rpx;
|
||
display: flex;
|
||
/* 禁用CSS transition，让JS动画完全控制 */
|
||
transition: none !important;
|
||
transform: translateZ(0); /* 启用硬件加速 */
|
||
will-change: transform; /* 优化渲染性能 */
|
||
/* #endif */
|
||
|
||
/* 小程序/APP平台 */
|
||
/* #ifdef MP || APP-PLUS */
|
||
width: auto;
|
||
min-width: 500rpx;
|
||
/* 禁用transition，避免小程序抖动 */
|
||
transition: none !important;
|
||
/* 小程序强制GPU渲染优化 */
|
||
transform: translateZ(0) translate3d(0,0,0);
|
||
will-change: transform;
|
||
backface-visibility: hidden;
|
||
/* #endif */
|
||
|
||
/* 小程序专用CSS动画 */
|
||
/* #ifdef MP */
|
||
&.mp-text {
|
||
/* 基础优化 */
|
||
transform: translateZ(0);
|
||
will-change: transform;
|
||
|
||
/* 动画效果暂时禁用，继续使用JS控制 */
|
||
/* transition: transform 3s ease-in-out; */
|
||
}
|
||
|
||
&.mp-scroll-to-end {
|
||
/* 滚动到末尾的动画 - 暂时不用 */
|
||
}
|
||
|
||
&.mp-scroll-to-start {
|
||
/* 滚动回起始位置的动画 - 暂时不用 */
|
||
}
|
||
/* #endif */
|
||
}
|
||
}
|
||
</style> |