chuangte/bike
5
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11

Browse Source
This commit is contained in:
Sliverber 2024-07-10 13:37:46 +08:00
parent d51377ba03
commit cd5c468689
2 changed files with 189 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
pages/index/index.vue
View File

@ -17,18 +17,28 @@
</view> </view>
</view> </view>
<view class="" style="width: 100%;height: 50rpx;"> <view class="" style="width: 100%;height: 20rpx;">
</view> </view>
<view class="swiper_tips"> <view class="swiper_tips" @click="changetips">
<view class="cont"> <view class="cont">
<image src="https://lxnapi.ccttiot.com/bike/img/static/u1G7wy5BEuNOY8QVyZcF" mode=""></image> <image src="https://lxnapi.ccttiot.com/bike/img/static/u1G7wy5BEuNOY8QVyZcF" mode=""></image>
<view class="scroll-container" ref="scrollContainer"> <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="scrollText"
<text class="scroll-text" ref="scrollTextClone">{{ cleanedText() }}</text> <!-- Duplicate the text for seamless scrolling --> :style="{ animation: `scroll-text ${duration}s linear infinite` }">{{ cleanedText() }}</text>
</view> <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>
<view class="iconfont icon-xiangyou1"></view> <view class="iconfont icon-xiangyou1" @click="toggleOrderTips"></view>
</view> </view>
</view> </view>
@ -404,7 +414,7 @@
</view> </view>
</view> </view>
<view class="tipss_box"> <!-- <view class="tipss_box">
<view class="tipss" v-if="orderinfo.status" @click="starTime"> <view class="tipss" v-if="orderinfo.status" @click="starTime">
您有正在进行中的订单 <view class="iconfont icon-xiangyou1" style="margin-left: 20rpx;"> 您有正在进行中的订单 <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="bottom_more" v-if="showindex==1">
<view class="close" @click="showindex=0"> <view class="close" @click="showindex=0">
<image src="https://api.ccttiot.com/smartmeter/img/static/uM76uO46a5cZOkFlffnX" mode=""></image> <image src="https://api.ccttiot.com/smartmeter/img/static/uM76uO46a5cZOkFlffnX" mode=""></image>
@ -998,7 +1008,11 @@
specificDeviceMarkerId: null, specificDeviceMarkerId: null,
nearbyMarkers: [], nearbyMarkers: [],
duration:0 duration: 0,
showordertxt: true,
orderwidth: 688,
isCollapsed: false
} }
}, },
watch: { watch: {
@ -1007,11 +1021,11 @@
// console.log('userId 发生变化', newValue, oldValue); // console.log('userId 发生变化', newValue, oldValue);
this.getisInOrder() this.getisInOrder()
}, },
cleanedText() { cleanedText() {
this.$nextTick(() => { this.$nextTick(() => {
this.initScroll(); this.initScroll();
}); });
} }
}, },
@ -1251,7 +1265,41 @@
}, },
}, },
methods: { 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() { cleanedText() {
return this.areaInfo.agreement.replace(/<\/?[^>]+(>|$)/g, ""); return this.areaInfo.agreement.replace(/<\/?[^>]+(>|$)/g, "");
}, },
@ -1985,7 +2033,7 @@
.parkingReturn /** 强制停车点还车 true:开启，false:关闭*/ .parkingReturn /** 强制停车点还车 true:开启，false:关闭*/
let isInParkingArea = res.data.isInParkingArea /** 是否在停车区内*/ let isInParkingArea = res.data.isInParkingArea /** 是否在停车区内*/
that.isInParkingArea = res.data that.isInParkingArea = res.data
.parkingReturn .isInParkingArea
if (parkingReturn) { if (parkingReturn) {
// 不可以在停车点外还车 // 不可以在停车点外还车
if (isInParkingArea) { if (isInParkingArea) {
@ -4209,14 +4257,14 @@
// .map(area => this.convertBoundaryToPolyline(area.boundaryStr)); // .map(area => this.convertBoundaryToPolyline(area.boundaryStr));
// 更新折线数据 // 更新折线数据
this.areaInfo = res.data this.areaInfo = res.data
setTimeout(()=>{ setTimeout(() => {
let abb=this.cleanedText() let abb = this.cleanedText()
console.log(abb.length,'cleanedTextcleanedTextcleanedText'); console.log(abb.length, 'cleanedTextcleanedTextcleanedText');
// 计算滚动时间，基于文本宽度 // 计算滚动时间，基于文本宽度
this.duration =abb.length*0.3; // 50 px/s 的速度 this.duration = abb.length * 0.3; // 50 px/s 的速度
},200) }, 200)
this.polyline.push(polylines) this.polyline.push(polylines)
console.log(); console.log();
// console.log(this.areaInfo, 'areaInfoareaInfo'); // console.log(this.areaInfo, 'areaInfoareaInfo');
@ -5076,7 +5124,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; // justify-content: center;
align-items: center; align-items: center;
// align-items: center; // align-items: center;
// justify-content: 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 { .swiper_tips {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -6035,6 +6165,7 @@
width: 686rpx; width: 686rpx;
height: 90rpx; height: 90rpx;
background: #4C97E7; background: #4C97E7;
// background: #64B6A8;
border-radius: 54rpx 54rpx 54rpx 54rpx; border-radius: 54rpx 54rpx 54rpx 54rpx;
font-weight: 500; font-weight: 500;

51
pages_admin/admin_index.vue
View File

@ -34,14 +34,7 @@
</view> </view>
</view> </view>
<view class="decice_cont"> <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="cont" @click="changeidx(0)">
<view class="text" :class="statusidx==0?'act1':''"> <view class="text" :class="statusidx==0?'act1':''">
未上架 未上架
@ -50,7 +43,15 @@
1 1
</view> </view>
</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 class="text" :class="statusidx==1?'act1':''">
待租 待租
</view> </view>
@ -58,7 +59,7 @@
{{deviceNum.normalNum}} {{deviceNum.normalNum}}
</view> </view>
</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 class="text" :class="statusidx==2?'act1':''">
预约中 预约中
</view> </view>
@ -66,7 +67,7 @@
{{deviceNum.inAppointmentNum}} {{deviceNum.inAppointmentNum}}
</view> </view>
</view> </view>
<view class="cont" @click="changeidx(3)"> <view class="cont" @click="changeidx('3')">
<view class="text" :class="statusidx==3?'act1':''"> <view class="text" :class="statusidx==3?'act1':''">
骑行中 骑行中
</view> </view>
@ -74,7 +75,7 @@
{{deviceNum.ridingNum}} {{deviceNum.ridingNum}}
</view> </view>
</view> </view>
<view class="cont" @click="changeidx(4)"> <view class="cont" @click="changeidx('4')">
<view class="text" :class="statusidx==4?'act1':''"> <view class="text" :class="statusidx==4?'act1':''">
临时锁车 临时锁车
</view> </view>
@ -82,15 +83,15 @@
{{deviceNum.temporarilyLockNum}} {{deviceNum.temporarilyLockNum}}
</view> </view>
</view> </view>
<view class="cont" @click="changeidx(8)"> <view class="cont" @click="changeidx('8')">
<view class="text" :class="statusidx==8?'act1':''"> <view class="text" :class="statusidx==8?'act1':''">
下线 禁用中
</view> </view>
<view class="text" :class="statusidx==8?'act1':''"> <view class="text" :class="statusidx==8?'act1':''">
{{deviceNum.disabledNum}} {{deviceNum.disabledNum}}
</view> </view>
</view> </view>
<view class="cont" @click="changeidx(9)"> <view class="cont" @click="changeidx('9')">
<view class="text" :class="statusidx==9?'act1':''"> <view class="text" :class="statusidx==9?'act1':''">
离线 离线
</view> </view>
@ -98,12 +99,20 @@
{{deviceNum.offlineNum}} {{deviceNum.offlineNum}}
</view> </view>
</view> </view>
<view class="cont" @click="changeidx(0)"> <view class="cont" @click="changeidx('0')">
<view class="text" :class="statusidx==0?'act1':''"> <view class="text" :class="statusidx=='0'?'act1':''">
仓库中 仓库中
</view> </view>
<view class="text" :class="statusidx==0?'act1':''"> <view class="text" :class="statusidx=='0'?'act1':''">
{{deviceNum.offlineNum}} {{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> </view>
<!-- <view class="cont"> <!-- <view class="cont">
@ -154,7 +163,7 @@
markdata: { markdata: {
}, },
statusidx: 7, statusidx: '-0',
deviceNum: {}, deviceNum: {},
areaId: 0, areaId: 0,
showIconAndCallout: false showIconAndCallout: false
@ -698,7 +707,7 @@
// Handle request error // Handle request error
}); });
}else if ( this.statusidx == 9) { }else if ( this.statusidx == 9) {
data.status = '' data.status = '-0'
data.onlineStatus=0 data.onlineStatus=0
this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => { this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => {
if (res.code == 200) { if (res.code == 200) {