11
This commit is contained in:
parent
d51377ba03
commit
cd5c468689
|
|
@ -17,18 +17,28 @@
|
|||
|
||||
</view>
|
||||
</view>
|
||||
<view class="" style="width: 100%;height: 50rpx;">
|
||||
<view class="" style="width: 100%;height: 20rpx;">
|
||||
|
||||
</view>
|
||||
<view class="swiper_tips">
|
||||
<view class="cont">
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/u1G7wy5BEuNOY8QVyZcF" mode=""></image>
|
||||
<view class="scroll-container" ref="scrollContainer">
|
||||
<text class="scroll-text" ref="scrollText" :style="{ animation: `scroll-text ${duration}s linear ` }">{{ cleanedText() }}</text>
|
||||
<text class="scroll-text" ref="scrollTextClone">{{ cleanedText() }}</text> <!-- Duplicate the text for seamless scrolling -->
|
||||
</view>
|
||||
<view class="swiper_tips" @click="changetips">
|
||||
<view class="cont">
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/u1G7wy5BEuNOY8QVyZcF" mode=""></image>
|
||||
<view class="scroll-container" ref="scrollContainer">
|
||||
<text class="scroll-text" ref="scrollText"
|
||||
:style="{ animation: `scroll-text ${duration}s linear infinite` }">{{ cleanedText() }}</text>
|
||||
<text class="scroll-text" ref="scrollTextClone"
|
||||
:style="{ animation: `scroll-text ${duration}s linear infinite` }">{{ cleanedText() }}</text>
|
||||
<!-- Duplicate the text for seamless scrolling -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
</view>
|
||||
<view class="order_tips" :class="{ collapsed: isCollapsed }" v-if="orderinfo.status" @click="starTime">
|
||||
<image src="https://lxnapi.ccttiot.com/bike/img/static/ukbZbyKgdFhB84ZAidyf" mode=""></image>
|
||||
<view class="order_tips_txt" :class="{ collapsed: isCollapsed }">
|
||||
您有正在骑行中的订单.....
|
||||
</view>
|
||||
<view class="iconfont icon-xiangyou1"></view>
|
||||
<view class="iconfont icon-xiangyou1" @click="toggleOrderTips"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -404,7 +414,7 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tipss_box">
|
||||
<!-- <view class="tipss_box">
|
||||
<view class="tipss" v-if="orderinfo.status" @click="starTime">
|
||||
您有正在进行中的订单 <view class="iconfont icon-xiangyou1" style="margin-left: 20rpx;">
|
||||
|
||||
|
|
@ -435,7 +445,7 @@
|
|||
|
||||
|
||||
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="bottom_more" v-if="showindex==1">
|
||||
<view class="close" @click="showindex=0">
|
||||
<image src="https://api.ccttiot.com/smartmeter/img/static/uM76uO46a5cZOkFlffnX" mode=""></image>
|
||||
|
|
@ -998,7 +1008,11 @@
|
|||
specificDeviceMarkerId: null,
|
||||
|
||||
nearbyMarkers: [],
|
||||
duration:0
|
||||
duration: 0,
|
||||
showordertxt: true,
|
||||
orderwidth: 688,
|
||||
|
||||
isCollapsed: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -1007,11 +1021,11 @@
|
|||
// console.log('userId 发生变化', newValue, oldValue);
|
||||
this.getisInOrder()
|
||||
},
|
||||
cleanedText() {
|
||||
this.$nextTick(() => {
|
||||
this.initScroll();
|
||||
});
|
||||
}
|
||||
cleanedText() {
|
||||
this.$nextTick(() => {
|
||||
this.initScroll();
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
|
@ -1251,7 +1265,41 @@
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
toggleOrderTips() {
|
||||
this.isCollapsed = !this.isCollapsed;
|
||||
},
|
||||
toggleTips() {
|
||||
if (this.showordertxt) {
|
||||
// 当内容显示时，缩小动画
|
||||
this.animateWidth(192); // 缩小到 192
|
||||
} else {
|
||||
// 当内容隐藏时，扩展动画
|
||||
this.animateWidth(686); // 扩展到 686
|
||||
}
|
||||
this.showordertxt = !this.showordertxt; // 切换显示状态
|
||||
},
|
||||
animateWidth(targetWidth) {
|
||||
const startWidth = this.orderwidth;
|
||||
const startTime = Date.now();
|
||||
const duration = 1500; // 动画时长 1.5s
|
||||
|
||||
const animate = () => {
|
||||
const currentTime = Date.now();
|
||||
const elapsedTime = currentTime - startTime;
|
||||
|
||||
if (elapsedTime >= duration) {
|
||||
this.orderwidth = targetWidth; // 动画结束时设置最终宽度
|
||||
return;
|
||||
}
|
||||
|
||||
const progress = elapsedTime / duration;
|
||||
this.orderwidth = startWidth + (targetWidth - startWidth) * progress;
|
||||
|
||||
setTimeout(animate, 16); // 使用 setTimeout 实现平滑更新，约每16ms更新一次
|
||||
};
|
||||
|
||||
animate();
|
||||
},
|
||||
cleanedText() {
|
||||
return this.areaInfo.agreement.replace(/<\/?[^>]+(>|$)/g, "");
|
||||
},
|
||||
|
|
@ -1985,7 +2033,7 @@
|
|||
.parkingReturn /** 强制停车点还车 true:开启，false:关闭*/
|
||||
let isInParkingArea = res.data.isInParkingArea /** 是否在停车区内*/
|
||||
that.isInParkingArea = res.data
|
||||
.parkingReturn
|
||||
.isInParkingArea
|
||||
if (parkingReturn) {
|
||||
// 不可以在停车点外还车
|
||||
if (isInParkingArea) {
|
||||
|
|
@ -4209,14 +4257,14 @@
|
|||
// .map(area => this.convertBoundaryToPolyline(area.boundaryStr));
|
||||
// 更新折线数据
|
||||
this.areaInfo = res.data
|
||||
setTimeout(()=>{
|
||||
let abb=this.cleanedText()
|
||||
console.log(abb.length,'cleanedTextcleanedTextcleanedText');
|
||||
|
||||
// 计算滚动时间，基于文本宽度
|
||||
this.duration =abb.length*0.3; // 50 px/s 的速度
|
||||
},200)
|
||||
|
||||
setTimeout(() => {
|
||||
let abb = this.cleanedText()
|
||||
console.log(abb.length, 'cleanedTextcleanedTextcleanedText');
|
||||
|
||||
// 计算滚动时间，基于文本宽度
|
||||
this.duration = abb.length * 0.3; // 50 px/s 的速度
|
||||
}, 200)
|
||||
|
||||
this.polyline.push(polylines)
|
||||
console.log();
|
||||
// console.log(this.areaInfo, 'areaInfoareaInfo');
|
||||
|
|
@ -5076,7 +5124,7 @@
|
|||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
|
|
@ -5104,6 +5152,88 @@
|
|||
|
||||
}
|
||||
|
||||
// .order_tips {
|
||||
// display: flex;
|
||||
// flex-wrap: nowrap;
|
||||
// align-items: center;
|
||||
// margin-right: auto;
|
||||
// // margin: 0 auto;
|
||||
// margin-top: 38rpx;
|
||||
// padding: 28rpx 41rpx;
|
||||
// width: 688rpx;
|
||||
// height: 110rpx;
|
||||
// background: #3D3D3D;
|
||||
// box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
|
||||
// border-radius: 53rpx 53rpx 53rpx 53rpx;
|
||||
|
||||
// image {
|
||||
// margin-right: 34rpx;
|
||||
// width: 44rpx;
|
||||
// height: 51rpx;
|
||||
// }
|
||||
|
||||
// .order_tips_txt {
|
||||
// font-weight: 400;
|
||||
// font-size: 36rpx;
|
||||
// color: #FFFFFF;
|
||||
// }
|
||||
|
||||
// .icon-xiangyou1 {
|
||||
// margin-left: auto;
|
||||
// font-size: 36rpx;
|
||||
// color: #FFFFFF;
|
||||
// }
|
||||
// }
|
||||
.order_tips {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
margin-top: 38rpx;
|
||||
margin-left: 34rpx;
|
||||
padding: 28rpx 41rpx;
|
||||
width: 688rpx;
|
||||
height: 110rpx;
|
||||
background: #3D3D3D;
|
||||
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
|
||||
border-radius: 53rpx;
|
||||
transition: width 0.5s, padding 0.5s;
|
||||
|
||||
&.collapsed {
|
||||
width: 192rpx;
|
||||
padding: 28rpx 20rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
margin-right: 34rpx;
|
||||
width: 44rpx;
|
||||
height: 51rpx;
|
||||
transition: margin-right 0.5s;
|
||||
|
||||
.order_tips.collapsed & {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.order_tips_txt {
|
||||
font-weight: 400;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
transition: opacity 0.5s, max-width 0.5s;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
&.collapsed {
|
||||
opacity: 0;
|
||||
max-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-xiangyou1 {
|
||||
margin-left: auto;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
.swiper_tips {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
|
@ -6035,6 +6165,7 @@
|
|||
width: 686rpx;
|
||||
height: 90rpx;
|
||||
background: #4C97E7;
|
||||
// background: #64B6A8;
|
||||
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
||||
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -34,14 +34,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="decice_cont">
|
||||
<view class="cont" @click="changeidx(7)">
|
||||
<view class="text" :class="statusidx==7?'act1':''">
|
||||
全部设备
|
||||
</view>
|
||||
<view class="text" :class="statusidx==7?'act1':''">
|
||||
{{deviceNum.allNum}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="cont" @click="changeidx(0)">
|
||||
<view class="text" :class="statusidx==0?'act1':''">
|
||||
未上架
|
||||
|
|
@ -50,7 +43,15 @@
|
|||
1
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="cont" @click="changeidx(1)">
|
||||
<view class="cont" @click="changeidx('-0')">
|
||||
<view class="text" :class="statusidx=='-0'?'act1':''">
|
||||
投放中
|
||||
</view>
|
||||
<view class="text" :class="statusidx=='-0'?'act1':''">
|
||||
{{deviceNum.inOperation}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" @click="changeidx('1')">
|
||||
<view class="text" :class="statusidx==1?'act1':''">
|
||||
待租
|
||||
</view>
|
||||
|
|
@ -58,7 +59,7 @@
|
|||
{{deviceNum.normalNum}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" @click="changeidx(2)" style="width: 140rpx;">
|
||||
<view class="cont" @click="changeidx('2')" style="width: 140rpx;">
|
||||
<view class="text" :class="statusidx==2?'act1':''">
|
||||
预约中
|
||||
</view>
|
||||
|
|
@ -66,7 +67,7 @@
|
|||
{{deviceNum.inAppointmentNum}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" @click="changeidx(3)">
|
||||
<view class="cont" @click="changeidx('3')">
|
||||
<view class="text" :class="statusidx==3?'act1':''">
|
||||
骑行中
|
||||
</view>
|
||||
|
|
@ -74,7 +75,7 @@
|
|||
{{deviceNum.ridingNum}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" @click="changeidx(4)">
|
||||
<view class="cont" @click="changeidx('4')">
|
||||
<view class="text" :class="statusidx==4?'act1':''">
|
||||
临时锁车
|
||||
</view>
|
||||
|
|
@ -82,15 +83,15 @@
|
|||
{{deviceNum.temporarilyLockNum}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" @click="changeidx(8)">
|
||||
<view class="cont" @click="changeidx('8')">
|
||||
<view class="text" :class="statusidx==8?'act1':''">
|
||||
下线
|
||||
禁用中
|
||||
</view>
|
||||
<view class="text" :class="statusidx==8?'act1':''">
|
||||
{{deviceNum.disabledNum}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" @click="changeidx(9)">
|
||||
<view class="cont" @click="changeidx('9')">
|
||||
<view class="text" :class="statusidx==9?'act1':''">
|
||||
离线
|
||||
</view>
|
||||
|
|
@ -98,12 +99,20 @@
|
|||
{{deviceNum.offlineNum}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" @click="changeidx(0)">
|
||||
<view class="text" :class="statusidx==0?'act1':''">
|
||||
<view class="cont" @click="changeidx('0')">
|
||||
<view class="text" :class="statusidx=='0'?'act1':''">
|
||||
仓库中
|
||||
</view>
|
||||
<view class="text" :class="statusidx==0?'act1':''">
|
||||
{{deviceNum.offlineNum}}
|
||||
<view class="text" :class="statusidx=='0'?'act1':''">
|
||||
{{deviceNum.inStashNum}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="cont" @click="changeidx('7')">
|
||||
<view class="text" :class="statusidx==7?'act1':''">
|
||||
全部设备
|
||||
</view>
|
||||
<view class="text" :class="statusidx==7?'act1':''">
|
||||
{{deviceNum.allNum}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="cont">
|
||||
|
|
@ -154,7 +163,7 @@
|
|||
markdata: {
|
||||
|
||||
},
|
||||
statusidx: 7,
|
||||
statusidx: '-0',
|
||||
deviceNum: {},
|
||||
areaId: 0,
|
||||
showIconAndCallout: false
|
||||
|
|
@ -698,7 +707,7 @@
|
|||
// Handle request error
|
||||
});
|
||||
}else if ( this.statusidx == 9) {
|
||||
data.status = ''
|
||||
data.status = '-0'
|
||||
data.onlineStatus=0
|
||||
this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user