chuangte/CarRental
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
c5e0df3081
CarRental/pages/index/index.vue
Sliverber c5e0df3081 11
2024-06-23 17:17:51 +08:00

4810 lines
116 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page">
<view class="tab_top">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uVcMTydm81zCMhHomXl1" mode="" @click="topage(6)">
</image>
<view class="txts">
创享出行
</view>
<!-- <view class="txts">
嵛你出行
</view> -->
</view>
<!-- <u-navbar :is-back="false" title="共享电动车" :border-bottom="false" :background="bgc" title-color='#2E4975'
title-size='36' height='36'></u-navbar> -->
<map class="map" id="map" ref="map" :scale="zoomSize" show-location v-if="showmap" :latitude="latitude"
:longitude="longitude" :show-location="true" :markers="markers" :polygons="polyline"
@markertap="onMarkerTap" @tap="onMapTap">
</map>
<view class="my-location" @click="setMapScale">
<image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/uBgKFW3JgiBfjM4ea3uV"></image>
</view>
<view class="park" @click="toggleIconAndCallout">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uRiYQZQEb3l2LsltEsyW" mode=""></image>
</view>
<view class="botmbox2" v-if="showdevice">
<!-- <view class="close" @click="close()">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uBeBBKwQu2K2ZBdT7iN7" mode=""></image>
</view> -->
<view class="page1" v-if="deviceIndex==0">
<view class="top">
<view class="left">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uD9pXetaMb5dmw8aSvoM" mode=""></image>
</view>
<view class="top_center">
<view class="cent_top">
车辆编号：{{deviceInfos.sn}}
</view>
<view class="cent_bot">
骑行前请检查车辆状态
</view>
</view>
<view class="top_right" @click="findBike()">
响铃寻车
</view>
</view>
<view class="center">
<view class="center_left">
<view class="center_left_top">
剩余骑行
</view>
<view class="center_left_bot" v-if="deviceInfos.remainingMileage">
{{deviceInfos.remainingMileage}}公里
</view>
<view class="center_left_bot" v-else>
--公里
</view>
</view>
<view class="center_right">
<view class="center_right_top">
预约费（10分钟）
</view>
<view class="center_right_bot">
{{areaInfo.appointmentServiceFee}} <span>元</span>
</view>
</view>
</view>
<view class="bot">
<view class=" left_btn" @click="Reserve()">
预约用车
</view>
<view class="right_btn" @click="lockDevice() ">
解锁用车
</view>
</view>
<view class="tips" @click="topage(7)">
发现坏车 >
</view>
</view>
<view class="page2" v-if="deviceIndex==1">
<view class="top">
<!-- <view class="left">
<view class="text">
可行驶53公里
</view>
<view class="ele">
<image src="https://api.ccttiot.com/smartmeter/img/static/upbpFLv4dkl88Syk2VKW" mode=""></image>
电量充足
</view>
</view> -->
<view class="right">
<view class="text">
剩余骑行
</view>
<!-- <view class="txt">
{{deviceInfos.remainingMileage}}<span style="font-size: 40rpx;">公里</span>
</view> -->
<view class="txt" v-if="deviceInfos.remainingMileage">
{{deviceInfos.remainingMileage}}<span style="font-size: 40rpx;">公里</span>
</view>
<view class="txt" v-else>
--<span style="font-size: 40rpx;">公里</span>
</view>
</view>
<view class="right">
<view class="text">
剩余电量
</view>
<view class="txt" style="font-size: 36rpx;" v-if="deviceInfos.remainingPower">
{{ deviceInfos.remainingPower}}%
<!-- {{startingPrice}}<span style="font-size: 40rpx;">元</span> -->
</view>
<view class="txt" style="font-size: 36rpx;" v-else>
--
<!-- {{startingPrice}}<span style="font-size: 40rpx;">元</span> -->
</view>
<view class="speed">
<view class="speeds" :style="{ width: deviceInfos.remainingPower + '%' }">
</view>
</view>
</view>
</view>
<view class="center">
<!-- <view class="card" :class="freeListIndex==0?'act1':''" @click="freeListIndex=0" v-if="orderinfo.ruleId==null">
<image src="https://api.ccttiot.com/smartmeter/img/static/uYg1WNJJH1VK7RdldKE1" mode=""
v-if="freeListIndex==0"></image>
<view class="tit">
计时收费
</view>
<view class="nmtxt">
<view class="left">
起步价
</view>
<view class="right">
{{startingPrice}}元（含{{startingHowManyMinutes}}分钟）
</view>
</view>
<view class="nmtxt">
<view class="left">
时长费
</view>
<view class="right">
{{timeFee}}元/{{ timeMinutes}}分钟
</view>
</view>
<view class="tip">
超出起步价包含时长后收取
</view>
</view> -->
<view class="card" v-for="(item,index ) in freList" :key="index"
@click.stop="changefree(item,index+1)" :class="freeListIndex==index+1?'act1':''">
<image src="https://api.ccttiot.com/smartmeter/img/static/uYg1WNJJH1VK7RdldKE1" mode=""
v-if="freeListIndex==index+1"></image>
<view v-if="item.ridingRule==1">
<view class="tit">
{{item.name}}
</view>
<view style="padding: 18rpx;">
<view class="nmtxt">
<view class="left">
起步价
</view>
<view class="right">
{{item.ridingRuleJson.startingPrice}}元(含{{item.ridingRuleJson.startingTime}}<span
v-if="item.rentalUnit=='minutes'">分钟</span><span
v-if="item.rentalUnit=='hours'">小时</span><span
v-if="item.rentalUnit=='day'">天</span>)
</view>
</view>
<view class="nmtxt">
<view class="left">
超出费
</view>
<view class="right">
{{item.ridingRuleJson.timeoutPrice}}元/{{ item.ridingRuleJson.timeoutTime}}<span
v-if="item.rentalUnit=='minutes'">分钟</span><span
v-if="item.rentalUnit=='hours'">小时</span><span
v-if="item.rentalUnit=='day'">天</span>
</view>
</view>
</view>
<!-- <view class="tips" @click.stop='feedetail(item,index+1)'>
查看详情 <view class="iconfont icon-chakanxiangqing"></view>
</view> -->
</view>
<view v-if="item.ridingRule==2">
<view class="tit">
{{item.name}}
</view>
<view style="padding: 18rpx;">
<view class="nmtxt text-ellipsis" v-for="(items, indexs) in item.ridingRuleJson.rule"
:key="indexs" style="margin-top: 10rpx;" v-if="indexs<2">
<view class="left " style="font-size: 28rpx;">
{{items.start}}-{{items.end}}<span v-if="item.rentalUnit=='minutes'">分钟</span>
<span v-if="item.rentalUnit=='hours'">小时</span>
<span v-if="item.rentalUnit=='day'">天</span>,
每{{items.eachUnit}}<span v-if="item.rentalUnit=='minutes'">分钟</span>
<span v-if="item.rentalUnit=='hours'">小时</span>
<span v-if="item.rentalUnit=='day'">天</span>/{{items.fee}}元
<span v-if="indexs==1">...</span>
</view>
<view class="right"></view>
</view>
</view>
<!-- <view class="nmtxt">
<view class="left">
</view>
<view class="right">
原价 <span style=" text-decoration: line-through;">{{item.originalFee}}元</span>
</view>
</view>
<view class="tip">
超出起步价包含时长后收取
</view> -->
</view>
<view class="tips_btn" @click.stop='feedetail(item,index+1)'>
查看详情
</view>
</view>
</view>
<view class="bot" style="margin-top: 20rpx;">
<view class="xy" @click="showxy=!showxy">
<view class="yuans">
<image src="https://lxnapi.ccttiot.com/bike/img/static/u7F851ikY9rkASzNSNkO" v-if='showxy'
mode=""></image>
</view>
<view class="txt">
我已同意并阅读 <span @click.stop="toxy()">《电动车租赁协议》</span>
</view>
</view>
<view class="btn" @click="sub1()" v-if="type==1">
确认开锁
</view>
<!-- <view class="btn" @click="sub6()" v-if="type==1&&orderinfo.ruleId!=null">
确认开锁
</view>
<view class="btn" @click="sub2()" v-if="type==1&&freeListIndex!=0">
确认套餐
</view> -->
<!-- <view class="btn" @click="sub3()" v-if="type==2&&freeListIndex==0&&orderinfo.ruleId==null">
确认预约
</view> -->
<!-- <view class="btn" @click="sub5()" v-if="type==2&&orderinfo.ruleId!=null">
确认预约
</view> -->
<view class="btn" @click="sub3()" v-if="type==2">
确认预约
</view>
</view>
</view>
<view class="page3" v-if="deviceIndex==2">
<view class="bot_btn">
<view class="info">
<view class="left">
预估金额：{{money}}<span>元</span>
</view>
<!-- <view style="width: 10rpx;" v-if="orderinfo.ruleId!=null">
</view> -->
<view class="right">
{{timeString}}
</view>
</view>
<view class="cardss">
<view class="tit">
电单车
</view>
<view class="cont">
<view class="left">
<view class="text">
可继续行驶{{OrderdeviceInfos.remainingMileage}}公里
</view>
<view class="speed">
<view class="speeds" :style="{ width: OrderdeviceInfos.remainingPower + '%' }">
</view>
</view>
<view class="mac">
NO.{{orderinfo.sn}}
</view>
</view>
<view class="right">
<image src="https://api.ccttiot.com/smartmeter/img/static/uHTCZOVUbmBkKW4G0wuF" mode="">
</image>
</view>
</view>
</view>
<view class="bot" style="margin-top: 20rpx;" v-if="orderinfo.status==0">
<view class="btn" style=" margin-right: 16rpx;" @click="unlockdevice()">
解锁骑行
</view>
<view class="btn1" @click="cancel()" v-if="orderinfo.ruleId==null">
取消预约
</view>
<view class="btn1" @click="cancel1()" v-if="orderinfo.ruleId!=null">
取消预约
</view>
</view>
<view class="bot" style="margin-top: 20rpx;" v-if="orderinfo.status==2">
<view class="btn" style=" margin-right: 16rpx;" v-if="OrderdeviceInfos.status==3"
@click="loackdevice()">
临时锁车
</view>
<view class="btn" style=" margin-right: 16rpx;" v-if="OrderdeviceInfos.status==4"
@click="unloackdevices()">
解锁用车
</view>
<view class="btn1" @click="backDevice()">
还车
</view>
</view>
<!-- <view class="bot" style="margin-top: 20rpx;">
<view class="btn1" >
临时锁车
</view>
<view class="btn" >
还车
</view>
</view> -->
</view>
</view>
<view class="page4" v-if="deviceIndex==3">
<view class="bot_btn">
<view class="time">
使用时间：{{timeString}}
</view>
<view class="price">
{{orderinfo.totalFee}}<span>元</span>
</view>
<view class="toinfo" @click="tofeeDetail()">
查看骑行费明细 >
</view>
<view class="btn" @click="topay()" v-if="orderinfo.status==1">
去支付
</view>
<view class="btn" @click="topay1()" v-if="orderinfo.status==3">
去支付
</view>
</view>
</view>
</view>
<view class="botmbox" v-if="showindex==0&&showdevice==false">
<view class="top_btn" @tap="qecodelock()">
<image src="https://api.ccttiot.com/smartmeter/img/static/un6Wi8CefEjy04qzvn67" mode=""></image>
扫码开锁
</view>
<view class="bot_btn">
<view class="cont" @click="topage(1)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uGDkCwxDNH9oFORX2XNU" mode=""></image>
<view class="text">
押金充值
</view>
</view>
<!-- <view class="cont" @click="topage(2)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uFHC2R6R3pgUOTShLxoQ" mode=""
style="width: 28rpx;height: 28rpx;"></image>
<view class="text">
计费规则
</view>
</view> -->
<view class="cont" @click="topage(3)">
<image src="https://api.ccttiot.com/smartmeter/img/static/utP4rdOzXLlQPx6Ug8cO" mode=""></image>
<view class="text">
用车指南
</view>
</view>
<view class="cont" @click="topage(4)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uFaJV6NJGhmmodpEuWMy" mode=""></image>
<view class="text">
编号开锁
</view>
</view>
<view class="cont" @click="topage(5)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uucc9g8b2MM6G9vp8HWa" mode=""></image>
<view class="text">
故障上报
</view>
</view>
<view class="cont" @click="topage(9)">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uk7i80QWz02cAfbbC518" mode=""></image>
<view class="text">
客户服务
</view>
</view>
</view>
<view class="guangggao">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uvHYQhuouHZQQL3qfLzP" mode=""></image>
</view>
</view>
<view class="tipss_box">
<view class="tipss" v-if="orderinfo.status" @click="starTime">
您有正在进行中的订单 <view class="iconfont icon-xiangyou1" style="margin-left: 20rpx;">
</view>
</view>
<view class="" v-if="!orderinfo.status" style="background: none;width: 350rpx;
height: 64rpx;">
</view>
<swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item>
<view class="tipss">
点击车辆可以预约用车
</view>
</swiper-item>
<swiper-item>
<view class="tipss" @click="changetips">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uJnO5qX8ggJvL1Nf7PQt" mode=""></image>
文明骑行,须知
<view class="iconfont icon-xiangyou1">
</view>
</view>
</swiper-item>
</swiper>
</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>
</view>
<div class="tit">
更多用车服务
</div>
<div class="contbox" style="width: 100%;">
<view class="cont_li" @click="topage(1)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uGDkCwxDNH9oFORX2XNU" mode=""></image>
<view class="txt">
押金充值
</view>
</view>
<view class="cont_li" @click="topage(3)">
<image src="https://api.ccttiot.com/smartmeter/img/static/utP4rdOzXLlQPx6Ug8cO" mode=""></image>
<view class="txt">
用车指南
</view>
</view>
<view class="cont_li" @click="topage(4)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uFaJV6NJGhmmodpEuWMy" mode=""></image>
<view class="txt">
编号开锁
</view>
</view>
<view class="cont_li" @click="topage(5)">
<image src="https://api.ccttiot.com/smartmeter/img/static/uucc9g8b2MM6G9vp8HWa" mode=""></image>
<view class="txt">
故障上报
</view>
</view>
<view class="cont_li" @click="topage(6)">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uW1XRPQfJTD6sLimkln5" mode=""></image>
<view class="txt">
个人中心
</view>
</view>
</div>
</view>
<u-mask :show="showtcs" @click="showtc = false" :z-index='100' duration='0' />
<u-mask :show="showTips" :z-index='100' duration='0' />
<u-mask :show="showYjTip" @click="showYjTip = false" :z-index='100' duration='0' />
<view class="pops" v-if="showYjTip">
<view class="tit" style="font-weight: 600;">
您未充值押金
</view>
<view class="cont_box" style="text-align: center;color: #808080;justify-content: center;font-size: 36rpx;">
请在充值押金后使用共享电动车
</view>
<view class="btn_box">
<view class="btn1" @click="showYjTip = false">
取消
</view>
<view class="btn2" @click="topage(1)">
前往充值
</view>
</view>
</view>
<view class="pops" v-if="showtcs">
<view class="tit" style="font-weight: 600;">
您有正在进行的订单
</view>
<view class="cont_box">
<view class="left">
电单车
</view>
<view class="right">
</view>
</view>
<view class="cont_box">
<view class="left">
<view class="km">
可继续行驶{{OrderdeviceInfos.remainingMileage}}公里
</view>
<view class="speed">
<view class="speeds" :style="{ width: OrderdeviceInfos.remainingPower + '%' }">
</view>
</view>
<view class="NO">
NO.{{OrderdeviceInfos.sn}}
</view>
</view>
<view class="right">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uqKmFMF9YHTX8lAQARSd" mode=""></image>
</view>
</view>
<view class="cont_box">
<view class="left">
已骑行
</view>
<view class="right">
{{timeString}}
</view>
</view>
<view class="cont_box">
<view class="left">
预估金额
</view>
<view class="right">
{{money}}元
</view>
</view>
<view class="btn" @click=" starTime" style="margin-bottom: 50rpx;">
点击查看
</view>
<view class="close" @click="showtcs = false">
<image src="https://lxnapi.ccttiot.com/bike/img/static/uyPRLCHBTUeN7UHzDEGR" mode=""></image>
</view>
</view>
<view class="pops" v-if="showTips">
<view class="tit" style="font-weight: 700;">
安全骑行 禁止超载
</view>
<view class="cont" v-html="areaInfo.agreement" style="padding: 0 20rpx;line-height: 48rpx;">
</view>
<view class="btn" @click="changetips()" :class="countdown>0? 'act1':''">
我已阅读同意 <span v-if='countdown>0' style="margin-left: 10rpx;">({{countdown}})</span>
</view>
</view>
<!-- 蓝牙 -->
<u-mask :show="isnoline" :z-index='100' duration='0' />
<view class="pops" v-if="isnoline">
<view class="tit" style="font-weight: 600;">
设备离线 请使用蓝牙连接辅助操作
</view>
<view class="cont_box" style="text-align: center;color: #808080;justify-content: center;font-size: 36rpx;">
请确保手机蓝牙权限已授权
</view>
<view class="btn_box">
<view class="btn1" @click="isnoline = false">
取消
</view>
<view class="btn2" @click="Binddevice()">
蓝牙连接
</view>
</view>
</view>
<!-- 是否在运营区 -->
<u-mask :show="isbackdevice" :z-index='100' duration='0' />
<view class="pops" v-if="isbackdevice">
<view class="tit" style="font-weight: 600;">
停车点外还车
</view>
<view class="cont_box" style="text-align: center;color: #808080;justify-content: center;font-size: 36rpx;">
未在停车点内还车,任要还车会产生额外费用，是否继续还车？
</view>
<view class="btn_box">
<view class="btn1" @click="isbackdevice = false">
取消
</view>
<view class="btn2" @click="keepback()">
确定
</view>
</view>
</view>
</view>
</template>
<script>
const app = getApp();
var xBlufi = require("@/utils/blufi/xBlufi.js");
let _this = null;
export default {
data() {
return {
bgc: {
backgroundColor: "#F7FAFE",
},
showIconAndCallout: false, // 控制是否显示iconPath和callout
showindex: 0,
show: false,
latitude: '',
longitude: '',
isMap: false,
zoomSize: 16,
markers: [],
polyline: [],
areas: [],
gps: {
deptId: 100
},
deviceInfos: {},
OrderdeviceInfos: {},
showdevice: false,
deviceIndex: 0,
type: 0,
freList: [],
freeListIndex: 0,
freeInfo: {},
socket: null,
sn: 0,
eventKey: 0,
orderinfo: {},
timer: null,
timeString: '',
money: 0,
showtc: false,
showtcs: false,
areaInfo: {},
// feeInfo:{},
showfeeDetail: false,
seeDetail: false,
showmap: true,
userinfo: {},
parkingList: [],
timers: null,
listData: [],
oldMarkers: [],
curtitidx: 0,
swiperHeight: 50,
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
showTips: false,
showYjTip: false,
showxy: false,
countdown: 5, // 五秒倒计时
// userId:this.$store.getters.userId,
qParam: null,
// 蓝牙
devicesList: [
// {name:'110000',
// mac:'11111'}
],
searching: false,
texts: '正在扫描蓝牙设备...',
btnflag: true,
tishiflag: false,
option: '',
bluthlist: [], //蓝牙数组
// status: 'loading',
statusflag: false,
Bluetoothmac: '',
mac: '',
ishave: false,
ver_data: null,
deviceInfoss: {},
deviceIds: '',
name: '',
orderinfo: {},
dl: 0,
czmoney: true,
iscz: true,
isnoline: false,
carstause: false,
isbackdevice: false
}
},
watch: {
userId(newValue, oldValue) {
// 处理userId变化的逻辑
// console.log('userId 发生变化', newValue, oldValue);
this.getisInOrder()
},
},
onLoad(e) {
if(this.showagre){
uni.redirectTo({
url:'/page_user/agreement?needback=true'
})
}
console.log(e, 'eeeeeeeeeeeeeeeeeee');
if (e.q) {
this.qParam = e
}
if (e.sn) {
this.sn = e.sn
if (this.sn != '') {
setTimeout(() => {
if (!this.orderinfo.status) {
this.deviceInfo(1)
// this.showdevice = true
// this.deviceIndex = 1
// this.type = 1
}
}, 500)
}
}
setTimeout(() => {
this.$store.commit('SET_SHOWTIPS', true);
}, 500)
},
onShow() {
this.timers = setInterval(() => {
// console.log('定时器运行中...');
this.getmarks()
// 在这里执行你的逻辑
}, 3000); // 每秒执行一次
if (this.seeDetail == false) {
let that = this
uni.getLocation({
type: 'wgs84',
success: function(lb) {
that.gps.latitude = lb.latitude;
that.gps.longitude = lb.longitude;
// that.gps.latitude = '26.940805',
// that.gps.longitude = '120.356157';
that.latitude = Number(lb.latitude.toFixed(5)) - 0.005
that.longitude = Number(lb.longitude.toFixed(5)) + 0.005
console.log(that.areaInfo, 'that.areaInfo');
that.getArea()
if (that.qParam) {
let qParam = that.qParam.q;
// 第2步: URL解码q参数
let decodedUrl = decodeURIComponent(qParam);
// 第3步: 使用正则表达式解析解码后的URL并提取查询参数
let sn = null;
let queryParams = decodedUrl.split('?')[1];
if (queryParams) {
let params = queryParams.split('&');
params.forEach(param => {
let [key, value] = param.split('=');
if (key === 'sn') {
sn = value;
}
});
}
that.sn = sn
if (that.sn != '') {
setTimeout(() => {
if (!that.orderinfo.status) {
that.deviceInfo(1)
that.qParam = null
// this.showdevice = true
// this.deviceIndex = 1
// this.type = 1
} else {
// this.showtcs=true
}
}, 500)
}
}
// that.getmarks()
//
},
fail: function(error) {
uni.showToast({
title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
icon: 'none',
duration: 2000
});
// that.getmarks()
// 在这里处理获取位置信息失败的情况
}
})
} else {
this.getinfo()
}
},
onHide() {
// 页面隐藏时清除定时器
if (this.timers) {
clearInterval(this.timers);
this.timers = null;
console.log('定时器已清除');
}
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
},
onUnload() {
// 页面卸载时清除定时器
if (this.timers) {
clearInterval(this.timers);
this.timers = null;
console.log('定时器已清除');
}
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
},
onBeforeUnmount() {
xBlufi.listenDeviceMsgEvent(false, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
},
computed: {
appointmentServiceFee() {
return this.$store.getters.appointmentServiceFee;
},
dispatchFee() {
return this.$store.getters.dispatchFee;
},
vehicleManagementFee() {
return this.$store.getters.vehicleManagementFee;
},
startingPrice() {
return this.$store.getters.startingPrice;
},
timeFee() {
return this.$store.getters.timeFee;
},
timeMinutes() {
return this.$store.getters.timeMinutes;
},
startingHowManyMinutes() {
return this.$store.getters.startingHowManyMinutes;
},
userId() {
return this.$store.getters.userId;
},
isMeal() {
return this.$store.getters.isMeal;
},
showagre() {
return this.$store.getters.showagre;
},
},
methods: {
keepback() {
let that = this
uni.getLocation({
type: 'wgs84',
success: function(lb) {
let data = {
latitude: lb.latitude,
longitude: lb.longitude,
areaId: that.areaInfo.areaId
}
if (that.carstause) {
that.reboot()
that.$u.post('/appVerify/device/return?returnType=1&orderNo=' + that.orderinfo
.orderNo + '&isBluetooth=true' + '&lon=' + lb.longitude + '&lat=' + lb
.latitude).then((
res) => {
uni.hideLoading()
if (res.code === 200) {
that.isbackdevice = false
that.close()
that.getisInOrder()
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
} else {
uni.showToast({
title: '蓝牙状态异常，请重新链接',
icon: 'none',
duration: 1000
});
setTimeout(() => {
that.isbackdevice=false
that.isnoline = true
}, 1300)
}
},
fail: function(error) {
uni.showToast({
title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
icon: 'none',
duration: 2000
});
// that.getmarks()
// 在这里处理获取位置信息失败的情况
}
})
},
onlinebackDevice() {
let that = this
uni.getLocation({
type: 'wgs84',
success: function(lb) {
let data = {
latitude: lb.latitude,
longitude: lb.longitude,
areaId: that.areaInfo.areaId
}
that.$u.get('/appVerify/isInParkingArea?', data).then((res) => {
if (res.code == 200) {
let parkingReturn = res.data.parkingReturn
let isInParkingArea = res.data.isInParkingArea
if (parkingReturn) {
if (isInParkingArea) {
if (that.carstause) {
that.reboot()
that.$u.post(
'/appVerify/device/return?returnType=1&orderNo=' +
that.orderinfo
.orderNo + '&isBluetooth=true' + '&lon=' + lb
.longitude + '&lat=' + lb.latitude).then((
res) => {
uni.hideLoading()
if (res.code === 200) {
that.close()
that.getisInOrder()
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
} else {
uni.showToast({
title: '蓝牙状态异常，请重新链接',
icon: 'none',
duration: 1000
});
setTimeout(() => {
that.isnoline = true
}, 1300)
}
} else {
uni.showToast({
title: '停车点外禁止还车，请行驶至停车区内',
icon: 'none',
duration: 2000
});
}
} else {
if (isInParkingArea) {
if (that.carstause) {
that.reboot()
that.$u.post(
'/appVerify/device/return?returnType=1&orderNo=' +
that.orderinfo
.orderNo + '&isBluetooth=true' + '&lon=' + lb
.longitude + '&lat=' + lb.latitude).then((
res) => {
uni.hideLoading()
if (res.code === 200) {
that.close()
that.getisInOrder()
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
} else {
uni.showToast({
title: '蓝牙状态异常，请重新链接',
icon: 'none',
duration: 1000
});
setTimeout(() => {
that.isnoline = true
}, 1300)
}
} else {
that.isbackdevice = true
}
}
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
},
fail: function(error) {
uni.showToast({
title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
icon: 'none',
duration: 2000
});
// that.getmarks()
// 在这里处理获取位置信息失败的情况
}
})
},
// 蓝牙
Binddevice() {
this.isnoline = false
uni.showLoading({
title: '连接中..'
})
xBlufi.initXBlufi(1);
console.log("xBlufi", xBlufi.XMQTT_SYSTEM);
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
xBlufi.notifyStartDiscoverBle({
'isStart': true
});
// 两秒后停止蓝牙搜索
setTimeout(() => {
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
setTimeout(() => {
if (this.devicesList.length == 0) {
uni.showToast({
title: '暂无发现对应设备,请靠近设备',
icon: 'none'
});
} else {
let uniqueDevicesList = Array.from(new Set(this.devicesList));
// 将去重后的数组重新赋值给 this.devicesList
this.devicesList = uniqueDevicesList;
console.log(this.devicesList, 'this.devicesListthis.devicesList');
this.devicesList.forEach(device => {
// 从设备名称中提取 MAC 地址（假设 MAC 地址是设备名称的后6个字符）
let macFromName = device.name.substring(device.name.length - 12);
console.log(macFromName, 'macFromNamemacFromName');
// 与 this.mac 进行比较
if (macFromName == this.mac) {
// 如果相同，则将 this.ishave 设置为 true
console.log(device);
this.deviceInfoss = device
// this.ishave = true;
this.createBLEConnection(device)
console.log('对比正确1111111111');
} else {
console.log('对比错误');
}
});
}
}, 200)
// 判断是否存在浇花器设备
// this.status = true
}, 2000)
},
reboot() {
let vm = this; // 将外部的 this 绑定到 vm 上
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
console.log('已连接的蓝牙设备信息：', res);
// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
xBlufi.notifySendCustomData({
customData: "11reboot"
});
// uni.hideLoading()
// vm.remakr()
},
fail(err) {
uni.hideLoading()
console.error('获取已连接蓝牙设备信息失败：', err);
}
});
} else {
console.log('手机未连接网络');
}
}
});
},
opencar() {
let vm = this; // 将外部的 this 绑定到 vm 上
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
console.log('已连接的蓝牙设备信息：', res);
// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
xBlufi.notifySendCustomData({
customData: "11open"
});
// uni.hideLoading()
// vm.remakr()
},
fail(err) {
uni.hideLoading()
console.error('获取已连接蓝牙设备信息失败：', err);
}
});
} else {
console.log('手机未连接网络');
}
}
});
},
closecar() {
let vm = this; // 将外部的 this 绑定到 vm 上
uni.getNetworkType({
success(res) {
if (res.networkType !== 'none') {
uni.getConnectedBluetoothDevices({
success(res) {
console.log('已连接的蓝牙设备信息：', res);
// vm.dl = (vm.orderinfo.deviceAmount / vm.orderinfo.unitPrice).toFixed(2); // 使用 vm 访问 Vue 实例的属性
xBlufi.notifySendCustomData({
customData: "11llose"
});
// uni.hideLoading()
// vm.remakr()
},
fail(err) {
uni.hideLoading()
console.error('获取已连接蓝牙设备信息失败：', err);
}
});
} else {
console.log('手机未连接网络');
}
}
});
},
unloackdevices() {
if (this.OrderdeviceInfos.onlineStatus == 1) {
uni.showLoading({
title: '加载中...'
})
this.$u.post('/appVerify/device/unlock?sn=' + this.OrderdeviceInfos.sn + '&orderNo=' + this.orderinfo
.orderNo).then((res) => {
if (res.code === 200) {
this.getisInOrder()
} else {
if (res.msg == '10500-----') {
uni.showToast({
title: '系统异常，请重新尝试',
icon: 'none',
duration: 2000
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}
})
} else {
if (this.carstause) {
this.opencar()
setTimeout(() => {
let that = this
uni.getLocation({
type: 'wgs84',
success: function(lb) {
let data = {
latitude: lb.latitude,
longitude: lb.longitude,
areaId: that.areaInfo.areaId
}
that.$u.post('/appVerify/device/unlock?sn=' + that.OrderdeviceInfos
.sn + '&orderNo=' +
that
.orderinfo
.orderNo + '&isBluetooth=true' + '&lon=' + lb.longitude +
'&lat=' + lb.latitude).then((res) => {
if (res.code === 200) {
that.getisInOrder()
} else {
if (res.msg == '10500-----') {
uni.showToast({
title: '系统异常，请重新尝试',
icon: 'none',
duration: 2000
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}
})
},
fail: function(error) {
uni.showToast({
title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
icon: 'none',
duration: 2000
});
// that.getmarks()
// 在这里处理获取位置信息失败的情况
}
})
}, 300)
} else {
uni.showToast({
title: '蓝牙状态异常，请重新链接',
icon: 'none',
duration: 1000
});
setTimeout(() => {
this.isnoline = true
}, 1300)
}
}
},
// ；临时锁车
loackdevice() {
if (this.OrderdeviceInfos.onlineStatus == 1) {
uni.showLoading({
title: '加载中...'
})
this.$u.post('/appVerify/device/lock?sn=' + this.OrderdeviceInfos.sn + '&orderNo=' + this.orderinfo
.orderNo).then((res) => {
if (res.code === 200) {
this.getisInOrder()
} else {
if (res.msg == '10500-----') {
uni.showToast({
title: '系统异常，请重新尝试',
icon: 'none',
duration: 2000
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}
})
} else {
if (this.carstause) {
this.closecar()
setTimeout(() => {
let that = this
uni.getLocation({
type: 'wgs84',
success: function(lb) {
let data = {
latitude: lb.latitude,
longitude: lb.longitude,
areaId: that.areaInfo.areaId
}
that.$u.post('/appVerify/device/lock?sn=' + that.OrderdeviceInfos.sn + '&orderNo=' +
that
.orderinfo
.orderNo + '&isBluetooth=true'+ '&lon=' + lb.longitude + '&lat='+lb.latitude).then((res) => {
if (res.code === 200) {
that.getisInOrder()
} else {
if (res.msg == '10500-----') {
uni.showToast({
title: '系统异常，请重新尝试',
icon: 'none',
duration: 2000
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}
})
},
fail: function(error) {
uni.showToast({
title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
icon: 'none',
duration: 2000
});
// that.getmarks()
// 在这里处理获取位置信息失败的情况
}
})
}, 300)
} else {
uni.showToast({
title: '蓝牙状态异常，请重新链接',
icon: 'none',
duration: 1000
});
setTimeout(() => {
this.isnoline = true
}, 1300)
}
}
},
btnyc() {
this.titleflag = false
},
// 解析自定义数据
funListenDeviceMsgEvent: function(options) {
switch (options.type) {
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
if (options.result) {
let devicesarr = options.data
// this.devicesList = options.data
devicesarr.forEach(device => {
// this.$u.get(`/app/device/${mac}/isBind`, data).then((res) => {
// if (res.data == false) {
this.devicesList.push(device);
let uniqueDevicesList = Array.from(new Set(this.devicesList));
// 将去重后的数组重新赋值给 this.devicesList
this.devicesList = uniqueDevicesList;
});
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
console.log("连接回调：" + JSON.stringify(options));
if (options.result) {
// uni.hideLoading();
uni.showToast({
title: '连接成功',
icon: 'none'
});
{
xBlufi.notifyInitBleEsp32({
deviceId: options.data.deviceId
});
xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvents);
this.deviceIds = options.data.deviceId
this.name = options.data.name
// 连接成功绑定设备
// let params = {
// mac: this.Bluetoothmac,
// userId: this.$store.state.user.userId
// }
let systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'android') {
// 当前设备是 Android
} else if (systemInfo.platform === 'ios') {
// 当前设备是 iOS
// uni.navigateTo({
// url: '/pages/wifilist/index?deviceId=' + options
// .data.deviceId + '&name=' + options.data.name
// })
}
}
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
// this.ver_data = this.parseCustomData(options.data)
if (options.data) {
this.carstause = true
}
// console.log("1收到设备发来的自定义数据结果：", this.ver_data);
break;
case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
if (options.result) {
let uniqueDevicesList = Array.from(new Set(this.devicesList));
// 过滤出名称字段的前五个字母为 "CTPOW" 的项
let filteredDevices = uniqueDevicesList.filter(device => device.name.substring(0, 4) ===
"BBLE");
// 将过滤后的数组重新赋值给 this.devicesList
this.devicesList = filteredDevices;
// console.log('蓝牙停止搜索ok',this.devicesList);
} else {
//蓝牙停止搜索失败
// console.log('蓝牙停止搜索失败');
}
this.searching = false
// _this.setData({
// searching: false
// });
break;
}
},
//4、建立连接
createBLEConnection(e) {
uni.showLoading({
title: '绑定中..'
})
console.log('调用了');
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
// console.log(e, '蓝牙信息')
const deviceId = e.deviceId
this.Bluetoothmac = e.localName.substring(5) //从第七位开始截取 只取后面的mac号
console.log(this.Bluetoothmac, '11111');
let name = e.name;
// console.log('点击了，蓝牙准备连接的deviceId:' + e.deviceId);
xBlufi.notifyConnectBle({
isStart: true,
deviceId: e.deviceId,
name
});
setTimeout(()=>{
uni.hideLoading()
},3000)
// for (var i = 0; i < this.devicesList.length; i++) {
// if (e.deviceId === this.devicesList[i].deviceId) {
// uni.showLoading({
// title: '连接蓝牙设备中...'
// });
// }
// }
},
// 点击重新搜索
Search() {
if (this.status) {
xBlufi.notifyStartDiscoverBle({
'isStart': true
});
// 重新搜索清空蓝牙数组
this.bluthlist = []
this.devicesList = []
// 重新搜索
// this.startBluetoothDevicesDiscovery()
this.statusflag = true
this.status = false
this.texts = '正在扫描蓝牙设备...'
setTimeout(() => {
this.statusflag = false
this.status = true
if (this.searching) {
xBlufi.notifyStartDiscoverBle({
'isStart': false
});
// 判断是否存在浇花器设备
if (this.devicesList.length == 0) {
uni.showToast({
title: '暂无发现对应设备,请靠近设备',
icon: 'none'
});
} else {
this.texts = '扫描到以下设备，请点击连接！'
}
} else {
xBlufi.notifyStartDiscoverBle({
'isStart': true
});
}
}, 2000)
}
},
funListenDeviceMsgEvents: function(options) {
let that = this;
switch (options.type) {
case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED: {
console.log('状态', options.result)
if (options.result == false) {
this.carstause = false
uni.showToast({
title: '设备断开链接，请重新点击蓝牙链接',
icon: 'none'
});
// uni.showModal({
// title: '很抱歉提醒你！',
// content: '小程序与设备异常断开',
// showCancel: false,
// success: function(res) {
// // uni.navigateBack({
// // url: '../search/search'
// // });
// }
// });
// this.statusflag = false
// uni.hideLoading();
}
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_MY_DATA:
this.loadPercent = options.data;
this.loadText = '文件读取中'
console.log("文件读取中", options.data);
break;
case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
// this.isband = true
// this.ver_data = this.parseCustomData(options.data)
console.log("1收到设备发来的自定义数据结果：", options.data);
if (options.data) {
this.carstause = true
}
break;
case xBlufi.XBLUFI_TYPE.TYPE_INIT_ESP32_RESULT:
// uni.hideLoading();
if (options.result) {
console.log('初始化成功');
} else {
console.log('初始化失败');
}
break;
}
},
// 点击隐藏没有设备提示
btnhd() {
this.tishiflag = false
},
starTime() {
uni.hideLoading()
this.showtcs = false
this.seeDetail = false
clearInterval(this.timer)
this.timer = null
this.$u.get('/app/device/info?sn=' + this.orderinfo.sn).then((res) => {
if (res.code === 200) {
this.OrderdeviceInfos = res.data
// this.OrderdeviceInfos.onlineStatus ='0'
if (this.OrderdeviceInfos.onlineStatus == 0&&this.orderinfo.status != 3) {
this.mac = this.OrderdeviceInfos.mac
if (this.carstause == false) {
this.isnoline = true
}
}
// 直接从OrderdeviceInfos对象创建一个新的标记，并标记为设备特定标记
const newMarker = {
id: parseFloat(this.OrderdeviceInfos.sn),
latitude: parseFloat(this.OrderdeviceInfos.latitude),
longitude: parseFloat(this.OrderdeviceInfos.longitude),
width: 40,
height: 28,
isDeviceMarker: true, // 添加标识属性
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7',
};
// 保留显示气泡的标记和设备特定标记
const preservedMarkers = this.markers.filter(marker => marker.isCalloutVisible || marker
.isDeviceMarker);
// 使用单个新标记更新markers数组，如果需要保留之前的标记也可以加入
this.markers = [newMarker, ...preservedMarkers];
this.oldMarkers = [...this.markers];
} else {
// 处理接口返回错误的情况
}
}).catch(error => {
// 处理接口请求失败的情况
});
// 预约中
if (this.orderinfo.status == 0) {
this.showdevice = true
this.deviceIndex = 2
const createTimeTimestamp = new Date(this.orderinfo.createTime).getTime();
// 定义定时器
this.timer = setInterval(() => {
const currentTime = Date.now();
const timePassed = currentTime - createTimeTimestamp;
const secondsPassed = Math.floor(timePassed / 1000);
// 转换为时分秒格式
const hours = Math.floor(secondsPassed / 3600);
const minutes = Math.floor((secondsPassed % 3600) / 60);
const seconds = secondsPassed % 60;
const timeString =
`${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
const totalMinutes = hours * 60 + minutes;
const tenMinuteIntervals = Math.floor(totalMinutes / 10) + 1;
this.money = tenMinuteIntervals * parseFloat(this.areaInfo.appointmentServiceFee)
// 每隔十分钟增加费用
if (minutes % 10 === 0 && seconds === 0) {
}
this.timeString = timeString
// console.log("已经过去了：" + timeString);
}, 1000);
} else if (this.orderinfo.status == 1) {
// 取消预约
// this.topay()
const createTimeTimestamp = new Date(this.orderinfo.appointmentStartTime).getTime();
// 定义定时器
const currentTime = new Date(this.orderinfo.appointmentEndTime).getTime();;
const timePassed = currentTime - createTimeTimestamp;
const secondsPassed = Math.floor(timePassed / 1000);
// 转换为时分秒格式
const hours = Math.floor(secondsPassed / 3600);
const minutes = Math.floor((secondsPassed % 3600) / 60);
const seconds = secondsPassed % 60;
const timeString =
`${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
const totalMinutes = hours * 60 + minutes;
const tenMinuteIntervals = Math.floor(totalMinutes / 10) + 1;
this.timeString = timeString
// console.log("已经过去了：" + timeString);
this.showdevice = true
this.deviceIndex = 3
} else if (this.orderinfo.status == 2) {
// 开始骑行
// this.topay()
this.showdevice = true
this.deviceIndex = 2
const createTimeTimestamp = new Date(this.orderinfo.unlockTime).getTime();
// 定义定时器
this.timer = setInterval(() => {
const currentTime = Date.now();
const timePassed = currentTime - createTimeTimestamp;
const secondsPassed = Math.floor(timePassed / 1000);
// 转换为时分秒格式
const hours = Math.floor(secondsPassed / 3600);
const minutes = Math.floor((secondsPassed % 3600) / 60);
const seconds = secondsPassed % 60;
const timeString =
`${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
let totalMinutes = hours * 60 + minutes;
let totalTime;
if (this.orderinfo.rule.rentalUnit === 'minutes') {
totalTime = totalMinutes;
} else if (this.orderinfo.rule.rentalUnit === 'hours') {
totalTime = hours + minutes / 60;
} else if (this.orderinfo.rule.rentalUnit === 'day') {
totalTime = hours / 24 + minutes / 1440;
}
// 计费规则计算
if (this.orderinfo.rule.ridingRule == 1) {
const ridingRuleJson = JSON.parse(this.orderinfo.rule.ridingRuleJson);
const timeoutTime = parseFloat(ridingRuleJson.timeoutTime);
const startingPrice = parseFloat(ridingRuleJson.startingPrice);
const startingTime = parseFloat(ridingRuleJson.startingTime);
const timeoutPrice = parseFloat(ridingRuleJson.timeoutPrice);
let totalCharge;
if (totalTime <= startingTime) {
totalCharge = startingPrice;
} else {
const extraTime = totalTime - startingTime;
const extraCharge = Math.ceil(extraTime / timeoutTime) * timeoutPrice;
totalCharge = startingPrice + extraCharge;
}
// 更新money值
this.money = totalCharge + this.orderinfo.appointmentFee
} else if (this.orderinfo.rule.ridingRule == 2) {
const ridingRuleJson = JSON.parse(this.orderinfo.rule.ridingRuleJson);
const rules = ridingRuleJson.rule;
let totalCharge = 0;
for (let rule of rules) {
const start = parseFloat(rule.start);
const end = parseFloat(rule.end);
const eachUnit = parseFloat(rule.eachUnit);
const fee = parseFloat(rule.fee);
if (totalTime > start && (end === 9999 || totalTime <= end)) {
// 所有时间都按照该区间的费率来计算
totalCharge = Math.ceil(totalTime / eachUnit) * fee;
break;
}
}
// 更新money值
this.money = totalCharge + this.orderinfo.appointmentFee
}
// 更新时间字符串
this.timeString = timeString;
}, 1000);
} else if (this.orderinfo.status == 3) {
// 骑行结束
// this.topay()
const createTimeTimestamp = new Date(this.orderinfo.createTime).getTime();
// 定义定时器
const currentTime = Date.now();
const timePassed = currentTime - createTimeTimestamp;
const secondsPassed = Math.floor(timePassed / 1000);
// 转换为时分秒格式
const hours = Math.floor(secondsPassed / 3600);
const minutes = Math.floor((secondsPassed % 3600) / 60);
const seconds = secondsPassed % 60;
const timeString =
`${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
const tenMinuteIntervals = Math.floor((hours * 60 + minutes) / 10) + 1; // 加1是因为不满十分钟也算一个十分钟
this.timeString = timeString
// console.log("已经过去了：" + timeString);
this.showdevice = true
this.deviceIndex = 3
}
// 将 createTime 转换为时间戳
},
startCountdown() {
console.log('调用了');
const interval = setInterval(() => {
if (this.countdown > 0) {
this.countdown--;
} else {
clearInterval(interval);
}
}, 1000);
},
toxy() {
this.seeDetail = true
uni.navigateTo({
url: '/page_user/agreement'
})
},
onMapTap(event) {
this.showdevice = false
this.deviceIndex = 0
// this.sn = ''
this.type = 0
this.freeInfo = {}
this.freeListIndex = 0
// const {
// latitude,
// longitude
// } = event.detail;
// console.log('Map tapped at:', latitude, longitude);
// this.close()
// 在这里添加你的回调逻辑
},
lockDevice() {
if (this.orderinfo.status) {
this.showtcs = true
} else {
if (this.deviceInfos.status != 1) {
uni.showToast({
title: '车辆正在使用中,请使用其他车辆',
icon: 'none',
duration: 2000
});
} else {
this.showdevice = true;
this.type = 1;
this.deviceIndex = 1;
}
}
},
changetips() {
if (this.countdown <= 0) {
if (this.showTips) {
uni.setStorageSync('hasShownPopup', false);
this.showTips = uni.getStorageSync('hasShownPopup')
} else {
uni.setStorageSync('hasShownPopup', true);
this.showTips = uni.getStorageSync('hasShownPopup')
}
}
},
getMyLocation() {
uni.createMapContext("map", this).moveToLocation({
longitude: this.longitude,
latitude: this.latitude,
});
},
async setMapScale(e, val) {
let mapContext = uni.createMapContext('map', this);
let setScale = () => {
return new Promise((resolve, reject) => {
mapContext.getScale({
success: r => {
resolve()
}
})
})
};
await setScale();
mapContext.moveToLocation({
success: (res) => {
const timer = setTimeout(() => {
clearTimeout(timer);
}, 500);
},
})
},
// 查看费用详情
tofeeDetail() {
uni.navigateTo({
url: '/page_user/ckmx?orderId=' + this.orderinfo.orderNo
})
},
// 扫码开锁
qecodelock() {
if (this.orderinfo.status) {
this.showtcs = true
} else {
this.seeDetail = true
uni.scanCode({
onlyFromCamera: true,
scanType: ['qrCode'],
success: res => {
let sn = null;
let queryParams = res.result.split('?')[1];
if (queryParams) {
let params = queryParams.split('&');
params.forEach(param => {
let [key, value] = param.split('=');
if (key === 'sn') {
sn = value;
}
});
}
this.sn = sn
if (this.sn != '') {
setTimeout(() => {
if (!this.orderinfo.status) {
this.deviceInfo(1)
}
}, 200)
}
},
fail: err => {
// console.error('扫描失败：', err);
// uni.showToast({
// title: '扫描失败',
// icon: 'none'
// });
}
});
}
},
feedetail(item, index) {
this.freeInfo = item
this.seeDetail = true
try {
const itemStr = encodeURIComponent(JSON.stringify(item));
uni.navigateTo({
url: `/page_user/jfgz?item=${itemStr}`
});
} catch (error) {
console.error('Error serializing item:', error);
}
// this.showfeeDetail = true
this.freeListIndex = index
},
// 无套餐取消预约
cancel() {
this.$u.post('/appVerify/device/cancelAppointment?userId=' + this.userId + '&orderNo=' + this.orderinfo
.orderNo).then((res) => {
if (res.code === 200) {
this.getisInOrder()
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
},
// 套餐取消预约
cancel1() {
this.$u.post('/appVerify/device/cancelAppointment?userId=' + this.userId + '&orderNo=' + this.orderinfo
.orderNo + '&ruleId=' + this.orderinfo.ruleId).then((res) => {
if (res.code === 200) {
this.getisInOrder()
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
},
backDevice() {
if (this.OrderdeviceInfos.onlineStatus == 1) {
uni.showLoading({
title: '加载中...'
})
this.$u.post('/appVerify/device/return?returnType=1&orderNo=' + this.orderinfo.orderNo).then((res) => {
uni.hideLoading()
if (res.code === 200) {
this.close()
this.getisInOrder()
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
} else {
this.onlinebackDevice()
}
},
// 套餐直接开锁
sub6() {
if (this.orderinfo.ruleId) {
let data = {
userId: this.userId,
sn: this.sn,
// ruleId: this.freeInfo.ruleId,
// money: this.freeInfo.fee,
mark: "套餐直接开锁",
// type: '1',
ruleId: this.orderinfo.ruleId,
orderNo: this.orderinfo.orderNo
}
this.$u.post('/appVerify/device/snSwitch', data).then((res) => {
if (res.code === 200) {
this.getisInOrder()
} else {
}
})
} else {
uni.showToast({
title: '请选择套餐',
icon: 'none',
duration: 2000
});
}
},
// 预约解锁骑行
unlockdevice() {
uni.showLoading({
title: '加载中...'
})
if (this.orderinfo.ruleId == null) {
let data = {
userId: this.userId,
sn: this.orderinfo.sn,
// ruleId: this.freeInfo.ruleId,
// money: this.freeInfo.fee,
mark: "预约开锁",
// type: '1',
orderNo: this.orderinfo.orderNo
}
this.$u.post('/appVerify/device/snSwitch', data).then((res) => {
uni.hideLoading()
if (res.code == 200) {
this.getisInOrder()
} else {
this.getisInOrder()
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
} else {
let data = {
userId: this.userId,
sn: this.orderinfo.sn,
// ruleId: this.freeInfo.ruleId,
// money: this.freeInfo.fee,
mark: "套餐预约开锁",
// type: '1',
ruleId: this.orderinfo.ruleId,
orderNo: this.orderinfo.orderNo
}
this.$u.post('/appVerify/device/snSwitch', data).then((res) => {
uni.hideLoading()
if (res.code === 200) {
this.getisInOrder()
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
}
},
// 取消预约支付
topay() {
let data = {
userId: this.userId,
sn: this.orderinfo.sn,
orderNo: this.orderinfo.orderNo,
// money: this.freeInfo.fee,
mark: "订单支付",
type: '2'
}
uni.showLoading({
})
console.log('点击了');
let that = this
this.$u.post('/appVerify/pre/order', data).then((res) => {
if (res.code === 200) {
uni.hideLoading()
// this.freList=res.rows
uni.requestPayment({
provider: 'wxpay',
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.packageVal,
signType: res.data.signType,
paySign: res.data.paySign,
success(res) {
// 支付成功逻辑
that.getisInOrder()
},
fail(err) {
// 支付失败逻辑
uni.showToast({
title: '支付失败',
icon: 'none',
duration: 2000
});
}
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
},
// 骑行结束支付
topay1() {
let data = {
userId: this.userId,
sn: this.orderinfo.sn,
orderNo: this.orderinfo.orderNo,
// money: this.freeInfo.fee,
mark: "订单支付",
type: '1'
}
uni.showLoading({
})
console.log('点击了');
let that = this
this.$u.post('/appVerify/pre/order', data).then((res) => {
if (res.code === 200) {
uni.hideLoading()
// this.freList=res.rows
uni.requestPayment({
provider: 'wxpay',
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.packageVal,
signType: res.data.signType,
paySign: res.data.paySign,
success(res) {
console.log('支付成功');
// 支付成功逻辑
that.getisInOrder()
},
fail(err) {
// 支付失败逻辑
uni.showToast({
title: '支付失败',
icon: 'none',
duration: 2000
});
}
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
},
topage(num) {
if (num == 0) {
// uni.navigateTo({
// url:''
// })
} else if (num == 1) {
uni.showLoading({
})
if (uni.getStorageSync('token')) {
if (this.areaInfo.authentication == 1) {
this.$u.get("/getAppInfo").then(res => {
if (res.code == 200) {
this.userinfo = res.user;
this.$store.commit('SET_USERID', res.user.userId);
if (res.user.isAuthentication == 0) {
uni.hideLoading()
this.seeDetail = true;
uni.navigateTo({
url: "/page_user/idcard_test"
});
} else {
this.seeDetail = true;
uni.hideLoading()
console.log('跳转1');
uni.navigateTo({
url: '/page_user/yj?isback=' + this.showYjTip
});
this.showYjTip = false
}
} else {
uni.hideLoading()
uni.showToast({
title: '未登录，请登录后尝试',
icon: 'none',
duration: 2000
});
}
});
} else {
this.seeDetail = true;
uni.hideLoading()
console.log('跳转2');
uni.navigateTo({
url: '/page_user/yj?isback=' + this.showYjTip
});
this.showYjTip = false
}
} else {
let that = this;
wx.login({
success(res) {
if (res.code) {
console.log('登录成功！', res);
let areaId = uni.getStorageSync('areaId');
uni.showLoading({
title: '登录中...'
});
that.$u.post('/loginByopenid?jsCode=' + res.code + '&areaId=' + areaId)
.then(res => {
uni.hideLoading();
if (res.code == 200) {
uni.setStorageSync('token', res.token);
if (that.areaInfo.authentication == 1) {
that.$u.get("/getAppInfo").then(res => {
if (res.code == 200) {
that.userinfo = res.user;
that.$store.commit('SET_USERID', res
.user.userId);
if (res.user.isAuthentication == 0) {
uni.hideLoading()
that.seeDetail = true;
uni.navigateTo({
url: "/page_user/idcard_test"
});
} else {
that.seeDetail = true;
uni.hideLoading()
console.log('跳转3');
uni.navigateTo({
url: '/page_user/yj?isback=' +
that.showYjTip
});
that.showYjTip = false
}
} else {
uni.hideLoading()
uni.showToast({
title: '未登录，请登录后尝试',
icon: 'none',
duration: 2000
});
}
});
} else {
that.seeDetail = true;
uni.hideLoading()
console.log('跳转4');
uni.navigateTo({
url: '/page_user/yj?isback=' + that.showYjTip
});
that.showYjTip = false
}
} else if (res.code == 501) {
uni.hideLoading()
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
} else {
uni.hideLoading()
uni.redirectTo({
url: '/pages/login/login'
});
}
}).catch(err => {
uni.hideLoading();
uni.showToast({
title: '请求失败，请稍后重试',
icon: 'none',
duration: 2000
});
console.error('请求失败：', err);
});
} else {
uni.hideLoading()
uni.showToast({
title: '登录失败，请重试',
icon: 'none',
duration: 2000
});
console.error('微信登录失败：', res);
}
},
fail(err) {
uni.hideLoading()
uni.showToast({
title: '微信登录接口调用失败',
icon: 'none',
duration: 2000
});
console.error('微信登录接口调用失败：', err);
}
});
this.showYjTip = false
}
} else if (num == 2) {
uni.navigateTo({
url: '/page_user/jfgz'
})
} else if (num == 3) {
uni.navigateTo({
url: '/page_user/yczn'
})
} else if (num == 4) {
if (this.orderinfo.status) {
this.showtcs = true
} else {
uni.navigateTo({
url: '/page_user/bhks'
})
}
} else if (num == 5) {
uni.navigateTo({
url: '/page_user/gzsb'
})
} else if (num == 6) {
uni.navigateTo({
url: '/pages/my'
})
} else if (num == 7) {
uni.navigateTo({
url: '/page_user/gzsb?sn=' + this.sn
})
} else if (num == 8) {
uni.navigateTo({
url: '/page_user/gzsb?sn=' + this.sn
})
} else if (num == 9) {
uni.navigateTo({
url: '/page_user/khfw/khfw'
})
}
},
sub5() {
if (this.orderinfo.ruleId) {
this.$u.post('/appVerify/device/appointment?userId=' + this.userId + '&sn=' + this.sn + '&ruleId=' +
this
.orderinfo.ruleId + '&type=2' + '&orderNo=' + this.orderinfo.orderNo).then((res) => {
if (res.code === 200) {
uni.showLoading({
title: '预约中...'
})
setTimeout(() => {
this.getisInOrder()
uni.hideLoading()
}, 1000)
// this.freList=res.rows
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
} else {
uni.showToast({
title: '请选择套餐',
icon: 'none',
duration: 2000
});
}
},
// 确认开锁
sub1() {
if (this.showxy) {
uni.showLoading({
})
if (this.areaInfo.authentication == 1) {
if (this.userinfo.isAuthentication == 0) {
uni.hideLoading()
this.seeDetail = true
uni.navigateTo({
url: "/page_user/idcard_test"
})
} else {
if (this.freeInfo.ruleId) {
let data = {
userId: this.userId,
sn: this.sn,
ruleId: this.freeInfo.ruleId,
// money: this.freeInfo.fee,
mark: "确认开锁",
type: '1'
}
this.$u.post('/appVerify/device/snSwitch', data).then((res) => {
uni.hideLoading()
this.seeDetail = false
if (res.code === 200) {
this.getisInOrder()
} else {
if (res.msg == '您还未充值押金，请先充值押金') {
// this.close()
this.showYjTip = true
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}
})
} else {
uni.hideLoading()
uni.showToast({
title: '请选择套餐',
icon: 'none',
duration: 2000
});
}
}
} else {
if (this.freeInfo.ruleId) {
let data = {
userId: this.userId,
sn: this.sn,
ruleId: this.freeInfo.ruleId,
// money: this.freeInfo.fee,
mark: "确认开锁",
type: '1'
}
this.$u.post('/appVerify/device/snSwitch', data).then((res) => {
uni.hideLoading()
this.seeDetail = false
if (res.code === 200) {
this.getisInOrder()
} else {
if (res.msg == '您还未充值押金，请先充值押金') {
this.close()
this.showYjTip = true
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}
})
} else {
uni.hideLoading()
uni.showToast({
title: '请选择套餐',
icon: 'none',
duration: 2000
});
}
}
} else {
uni.showToast({
title: '请勾选协议',
icon: 'none',
duration: 2000
});
}
},
// 开锁购买套餐
sub2() {
if (this.freeInfo.ruleId) {
let data = {
userId: this.userId,
sn: this.sn,
ruleId: this.freeInfo.ruleId,
// money: this.freeInfo.fee,
isAppointment: false,
mark: "套餐开锁",
type: '3'
}
this.$u.post('/appVerify/pre/order', data).then((res) => {
if (res.code === 200) {
// this.freList=res.rows
uni.requestPayment({
provider: 'wxpay',
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.packageVal,
signType: res.data.signType,
paySign: res.data.paySign,
success(res) {
// 支付成功逻辑
this.showdevice = false
this.deviceIndex = 0
this.mac = ''
this.type = 0
this.freeInfo = {}
this.freeListIndex = 0
this.getisInOrder()
},
fail(err) {
// 支付失败逻辑
uni.showToast({
title: '支付失败',
icon: 'none',
duration: 2000
});
}
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
} else {
uni.showToast({
title: '请选择套餐',
icon: 'none',
duration: 2000
});
}
},
// 确认预约
sub3() {
if (this.showxy) {
if (this.areaInfo.authentication == 1) {
if (this.userinfo.isAuthentication == 0) {
this.seeDetail = true
uni.navigateTo({
url: "/page_user/idcard_test"
})
} else {
if (this.freeInfo.ruleId) {
let data = {
userId: this.userId,
sn: this.sn,
ruleId: this.freeInfo.ruleId,
// isAppointment: true,
// money: this.freeInfo.fee,
mark: "预约购买套餐",
type: '2'
}
this.$u.post('/appVerify/device/appointment?userId=' + this.userId + '&sn=' + this.sn +
'&ruleId=' +
this
.freeInfo.ruleId).then((res) => {
this.seeDetail = false
if (res.code === 200) {
uni.showLoading({
title: '预约中...'
})
setTimeout(() => {
this.getisInOrder()
uni.hideLoading()
}, 1000)
// this.freList=res.rows
} else {
if (res.msg == '您还未充值押金，请先充值押金') {
this.close()
this.showYjTip = true
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}
})
} else {
uni.showToast({
title: '请选择套餐',
icon: 'none',
duration: 2000
});
}
}
} else {
if (this.freeInfo.ruleId) {
let data = {
userId: this.userId,
sn: this.sn,
ruleId: this.freeInfo.ruleId,
// isAppointment: true,
// money: this.freeInfo.fee,
mark: "预约购买套餐",
type: '2'
}
this.$u.post('/appVerify/device/appointment?userId=' + this.userId + '&sn=' + this.sn +
'&ruleId=' +
this
.freeInfo.ruleId).then((res) => {
this.seeDetail = false
if (res.code === 200) {
uni.showLoading({
title: '预约中...'
})
setTimeout(() => {
this.getisInOrder()
uni.hideLoading()
}, 1000)
// this.freList=res.rows
} else {
if (res.msg == '您还未充值押金，请先充值押金') {
this.close()
this.showYjTip = true
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}
})
} else {
uni.showToast({
title: '请选择套餐',
icon: 'none',
duration: 2000
});
}
}
} else {
uni.showToast({
title: '请勾选协议',
icon: 'none',
duration: 2000
});
}
},
// 预约购买套餐
sub4() {
if (this.freeInfo.ruleId) {
let data = {
userId: this.userId,
sn: this.sn,
ruleId: this.freeInfo.ruleId,
isAppointment: true,
// money: this.freeInfo.fee,
mark: "预约购买套餐",
type: '3'
}
console.log('点击了');
this.$u.post('/appVerify/pre/order', data).then((res) => {
if (res.code === 200) {
// this.freList=res.rows
uni.requestPayment({
provider: 'wxpay',
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.packageVal,
signType: res.data.signType,
paySign: res.data.paySign,
success(res) {
// 支付成功逻辑
this.showdevice = false
this.deviceIndex = 0
this.mac = ''
this.type = 0
this.freeInfo = {}
this.freeListIndex = 0
this.getisInOrder()
},
fail(err) {
// 支付失败逻辑
uni.showToast({
title: '支付失败',
icon: 'none',
duration: 2000
});
}
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
})
} else {
uni.showToast({
title: '请选择套餐',
icon: 'none',
duration: 2000
});
}
},
getisInOrder() {
uni.showLoading({
})
this.orderinfo = {}
if (this.userId) {
this.$u.post('/app/user/isInOrder?userId=' + this.userId, ).then((res) => {
uni.hideLoading()
if (res.code === 200) {
// this.freList=res.rows
if (res.data != '') {
this.orderinfo = res.data[0]
if (this.orderinfo.status == 4) {
this.getisInOrder()
} else {
clearInterval(this.timer)
this.starTime()
}
} else {
clearInterval(this.timer)
this.orderinfo = {}
this.showdevice = false
this.deviceIndex = 0
}
} else {
}
})
}
},
changefree(item, index) {
this.freeInfo = item
this.freeListIndex = index
},
getlist() {
this.freList = []
let data = {
areaId: this.areaInfo.areaId
}
this.$u.get('/app/fee/list?', data).then((res) => {
if (res.code === 200) {
this.freList = res.data.map(item => {
try {
item.ridingRuleJson = JSON.parse(item.ridingRuleJson);
} catch (e) {
console.error('Invalid JSON in ridingRuleJson:', item.ridingRuleJson);
}
return item;
});
console.log(this.freList, ' this.freList this.freList');
} else {
uni.showToast({
title: '未登录，请登录后尝试',
icon: 'none',
duration: 1000
});
}
})
},
// 发现坏车
// 预约车辆
Reserve() {
if (this.orderinfo.status) {
this.showtcs = true
} else {
if (this.$store.getters.userId == undefined) {
// this.$u.get("/getAppInfo").then((res) => {
// console.log('进入跳转');
// if(res.code==200){
// this.$store.commit('SET_USERID', res.user.userId);
// }
// });
this.$store.dispatch('userInfo', this.$u).then(() => {
this.deviceIndex = 1
this.type = 2
console.log(this.$store.getters.userId,
'this.$store.getters.userIdthis.$store.getters.userId');
// 执行其他操作...
});
} else {
this.deviceIndex = 1
this.type = 2
}
}
},
// 关闭弹出
close() {
this.showdevice = false
this.deviceIndex = 0
// this.sn = ''
this.type = 0
this.freeInfo = {}
this.freeListIndex = 0
},
// 扫码的方法
scanQRCode() {
uni.scanCode({
onlyFromCamera: true,
scanType: ['qrCode'],
success: res => {
console.log('扫描结果：', res);
this.sn = res.sn
this.type = 1
},
fail: err => {
console.error('扫描失败：', err);
uni.showToast({
title: '扫描失败',
icon: 'none'
});
}
});
},
findBike() {
uni.showToast({
title: '响铃请求发送成功',
icon: 'none',
duration: 2000
});
this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
if (res.code === 200) {
}
})
},
onMarkerTap(e) {
this.showdevice = false
this.deviceIndex = 0
// this.sn = ''
this.type = 0
this.freeInfo = {}
this.freeListIndex = 0
if (e.type === 'markertap') {
console.log('点击了标记：', e.markerId);
// 这里可以根据需要处理点击标记的逻辑
// 阻止事件冒泡\
this.sn = e.markerId;
this.deviceInfo(0);
const markerExists = this.listData.some(item => item.sn == e.markerId);
if (markerExists) {
// 处理点击标记的逻辑
} else {
console.log('标记ID不存在于列表数据中');
}
// 阻止事件冒泡
e.stopPropagation();
}
},
deviceInfo(num) {
if (uni.getStorageSync('token')) {
this.$u.get('/app/device/info?sn=' + this.sn).then((res) => {
if (res.code === 200) {
this.deviceInfos = res.data;
if (num == 0) {
this.showdevice = true;
this.type = 0;
} else {
if (this.deviceInfos.onlineStatus == 0) {
uni.showToast({
title: '车辆离线中,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status == 0) {
uni.showToast({
title: '车辆未上架,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status == 2) {
uni.showToast({
title: '车辆预约中,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status == 3) {
uni.showToast({
title: '车辆骑行中,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status == 4) {
uni.showToast({
title: '车辆临时锁车中,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status == 8) {
uni.showToast({
title: '车辆下线中,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status == 9) {
uni.showToast({
title: '车辆已废弃,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status == 7) {
uni.showToast({
title: '车辆未上线,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status == 1) {
this.showdevice = true;
this.type = 1;
this.deviceIndex = 1;
}
}
} else {
this.showdevice = false;
this.deviceIndex = 0;
this.type = 0;
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
});
} else {
console.log('判断2');
wx.login({
success: (res) => {
if (res.code) {
console.log('登录！', res);
let data = {
wxOpenId: res.code,
};
let areaId = uni.getStorageSync('areaId');
if (areaId) {
this.$u.post('/loginByopenid?jsCode=' + res.code + '&areaId=' + areaId)
.then((
res) => {
uni.hideLoading();
if (res.code == 200) {
uni.setStorageSync('token', res.token);
this.$u.get('/app/device/info?sn=' + this.sn).then((
res) => {
if (res.code === 200) {
this.deviceInfos = res.data;
if (num == 0) {
this.showdevice = true;
this.type = 0;
} else {
if (this.deviceInfos.onlineStatus ==
0) {
uni.showToast({
title: '车辆离线中,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status ==
0) {
uni.showToast({
title: '车辆未上架,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status ==
2) {
uni.showToast({
title: '车辆预约中,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status ==
3) {
uni.showToast({
title: '车辆骑行中,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status ==
4) {
uni.showToast({
title: '车辆临时锁车中,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status ==
8) {
uni.showToast({
title: '车辆下线中,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status ==
9) {
uni.showToast({
title: '车辆已废弃,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status ==
7) {
uni.showToast({
title: '车辆未上线,请使用其他车辆',
icon: 'none',
duration: 4000
});
} else if (this.deviceInfos.status ==
1) {
this.showdevice = true;
this.type = 1;
this.deviceIndex = 1;
}
}
} else {
this.showdevice = false;
this.deviceIndex = 0;
this.type = 0;
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
});
} else if (res.code == 501) {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
} else {
uni.redirectTo({
url: '/pages/login/login'
});
}
});
}
}
},
});
}
},
toggleIconAndCallout() {
this.showIconAndCallout = !this.showIconAndCallout;
if (this.showIconAndCallout) {
const newMarkers = [];
this.parkingList.forEach(item => {
newMarkers.push({
id: parseFloat(item.parkingId),
latitude: parseFloat(item.latitude),
longitude: parseFloat(item.longitude),
width: 20,
height: 40,
iconPath: 'https://lxnapi.ccttiot.com/bike/img/static/u9yz0bKCWKyev0JYpTne',
callout: {
content: item.parkingName,
color: '#ffffff',
fontSize: 14,
borderRadius: 10,
bgColor: item.type == 1 ? '#3A7EDB' : item.type == 2 ? '#FFC107' :
'#FF473E',
padding: 6,
display: 'ALWAYS'
},
isCalloutVisible: true // 添加标记
});
});
this.$set(this, 'markers', [...this.markers, ...newMarkers]);
} else {
// 过滤掉所有气泡显示的标记
this.$set(this, 'markers', this.markers.filter(marker => !marker.isCalloutVisible));
}
},
getmarks() {
let data = {
areaId: this.areaInfo.areaId
};
if (this.areaInfo.areaId) {
this.$u.get(`/app/allVehicleByArea`, data).then((res) => {
if (res.code === 200 && res.data != '') {
this.listData = res.data;
const newMarkers = this.listData.map(item => ({
id: parseFloat(item.sn),
latitude: parseFloat(item.latitude),
longitude: parseFloat(item.longitude),
width: 40,
height: 28,
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7',
}));
// 保留显示气泡的标记
const preservedMarkers = this.markers.filter(marker => marker.isCalloutVisible ||
marker.isDeviceMarker);
// 假设newMarkers是从新数据生成的标记数组
// 更新markers数组，避免删除已标识的重要标记
this.markers = [...newMarkers.filter(newMarker =>
!preservedMarkers.some(preservedMarker => preservedMarker.id === newMarker
.id)
), ...preservedMarkers];
this.oldMarkers = [...this.markers];
}
}).catch(error => {
// 处理接口请求失败的情况
});
}
},
isMarkersChanged(newMarkers) {
if (this.oldMarkers.length !== newMarkers.length) {
return true;
}
for (let i = 0; i < newMarkers.length; i++) {
if (this.oldMarkers[i].id !== newMarkers[i].id ||
this.oldMarkers[i].latitude !== newMarkers[i].latitude ||
this.oldMarkers[i].longitude !== newMarkers[i].longitude) {
return true;
}
}
return false;
},
getinfo() {
if (uni.getStorageSync('token')) {
this.$u.get("/getAppInfo").then((res) => {
if (res.code == 200) {
this.$store.commit('SET_USERID', res.user.userId);
this.userinfo = res.user
} else {
setTimeout(() => {
this.getinfo()
}, )
// let that =this
// wx.login({
// success(res) {
// if (res.code) {
// console.log('登录！', res);
// let data = {
// wxOpenId: res.code,
// };
// let areaId = uni.getStorageSync('areaId');
// that.$u.post('/loginByopenid?jsCode=' + res.code + '&areaId=' + areaId).then(
// res => {
// uni.hideLoading();
// if (res.code == 200) {
// uni.setStorageSync('token', res.token);
// that.$u.get('/app/device/info?sn=' + that.sn).then((res) => {
// if (res.code === 200) {
// } else {
// }
// })
// } else if (res.code == 501) {
// uni.showToast({
// title: res.msg,
// icon: 'none',
// duration: 2000
// });
// } else {
// // console.log("老用户登录",res.data)
// uni.redirectTo({
// url: '/pages/login/login'
// })
// }
// });
// }
// },
// });
}
});
}
},
getArea() {
this.showmap = false
// 发送请求获取数据
this.areaInfo = {}
this.polyline = []
if (this.sn != 0 && this.sn != '' && this.sn != null) {
this.gps.sn = this.sn
}
this.$u.get('/app/area/info?', this.gps).then((res) => {
this.showmap = true
if (res.code === 200) {
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
const polylines = this.convertBoundaryToPolyline(res.data.boundaryStr)
// console.log(polylines,'polylinespolylinespolylines');
// .filter(area => area.boundaryStr) // 过滤掉boundary为空的数据
// .map(area => this.convertBoundaryToPolyline(area.boundaryStr));
// 更新折线数据
this.areaInfo = res.data
this.polyline.push(polylines)
console.log();
// console.log(this.areaInfo, 'areaInfoareaInfo');
uni.setStorageSync('areaId', res.data.areaId);
this.getinfo()
this.getmarks()
this.getlist()
this.getParking()
if (uni.getStorageSync('token')) {
this.getisInOrder()
}
const hasShownPopup = uni.getStorageSync('hasShownPopup');
console.log(hasShownPopup, 'hasShownPopup');
if (hasShownPopup === '' || hasShownPopup === null) {
console.log('1111111111');
this.showTips = true;
this.startCountdown();
uni.setStorageSync('hasShownPopup', true);
} else {
console.log('222');
this.showTips = uni.getStorageSync('hasShownPopup');
console.log(this.showTips, 'this.showTips');
this.startCountdown();
}
this.setMapScale()
// if(!hasShownPopup){
// console.log(typeof(hasShownPopup),'hasShownPopuphasShownPopup');
// this.showTips=uni.getStorageSync('hasShownPopup')
// }else{
// this.showTips=true
// uni.setStorageSync('hasShownPopup', true);
// }
// this.$store.commit('SET_SHOWTIPS', true);
// console.log(this.polyline);
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}).catch(error => {
console.error("Error fetching area data:", error);
});
},
getParking() {
// 发送请求获取数据
// this.polyline=[]
let data = {
areaId: this.areaInfo.areaId
}
this.$u.get('/app/parking/list?', data).then((res) => {
if (res.code === 200) {
// 处理接口返回的数据
const type1Data = [];
const type2Data = [];
const type3Data = [];
res.rows.forEach(row => {
if (row.type == 1) {
type1Data.push(row);
} else if (row.type == 2) {
type2Data.push(row);
} else if (row.type == 3) {
type3Data.push(row);
}
});
const validBoundaries = type1Data.map(row => row.boundaryStr).filter(boundary =>
typeof boundary === 'string' && boundary.trim() !== '');
const polylines = this.convertBoundaryToPolylines(validBoundaries, 1);
const validBoundaries1 = type2Data.map(row => row.boundaryStr).filter(boundary =>
typeof boundary === 'string' && boundary.trim() !== '');
const polylines1 = this.convertBoundaryToPolylines(validBoundaries1, 2);
const validBoundaries2 = type3Data.map(row => row.boundaryStr).filter(boundary =>
typeof boundary === 'string' && boundary.trim() !== '');
const polylines2 = this.convertBoundaryToPolylines(validBoundaries2, 3);
// 将处理后的数据添加到 this.polyline 中
this.polyline = this.polyline.concat(polylines2);
this.polyline = this.polyline.concat(polylines1);
this.polyline = this.polyline.concat(polylines);
this.parkingList = res.rows
// console.log(this.polyline);
}
}).catch(error => {
console.error("Error fetching parking data:", error);
});
},
convertBoundaryToPolyline(boundary) {
if (!boundary) return null;
const points = JSON.parse(boundary).map(coord => ({
latitude: coord[1],
longitude: coord[0]
}));
const polyline = {
points: points,
fillColor: "#55888840", //填充颜色
strokeColor: "#22FF00", //描边颜色
strokeWidth: 2, //描边宽度
zIndex: 1, //层级
};
return polyline;
},
convertBoundaryToPolylines(boundaries, num) {
if (num == 1) {
console.log('判断1');
return boundaries.map(boundary => {
if (!boundary) return null;
let coords;
try {
coords = JSON.parse(boundary);
} catch (error) {
console.error("Error parsing boundary JSON:", error);
return null;
}
if (!Array.isArray(coords)) {
console.error("Parsed boundary is not an array:", coords);
return null;
}
const points = coords.map(coord => ({
latitude: coord[1],
longitude: coord[0]
}));
return {
points: points,
fillColor: "#3A7EDB40", //填充颜色
strokeColor: "#3A7EDB", //描边颜色
strokeWidth: 2, //描边宽度
zIndex: 1, //层级
};
}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
} else if (num == 2) {
return boundaries.map(boundary => {
if (!boundary) return null;
let coords;
try {
coords = JSON.parse(boundary);
} catch (error) {
console.error("Error parsing boundary JSON:", error);
return null;
}
if (!Array.isArray(coords)) {
console.error("Parsed boundary is not an array:", coords);
return null;
}
const points = coords.map(coord => ({
latitude: coord[1],
longitude: coord[0]
}));
return {
points: points,
fillColor: "#FFF5D640", //填充颜色
strokeColor: "#FFC107", //描边颜色
strokeWidth: 2, //描边宽度
zIndex: 1, //层级
};
}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
} else if (num == 3) {
return boundaries.map(boundary => {
if (!boundary) return null;
let coords;
try {
coords = JSON.parse(boundary);
} catch (error) {
console.error("Error parsing boundary JSON:", error);
return null;
}
if (!Array.isArray(coords)) {
console.error("Parsed boundary is not an array:", coords);
return null;
}
const points = coords.map(coord => ({
latitude: coord[1],
longitude: coord[0]
}));
return {
points: points,
fillColor: "#FFD1CF40", //填充颜色
strokeColor: "#FF473E", //描边颜色
strokeWidth: 2, //描边宽度
zIndex: 1, //层级
};
}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
}
},
},
}
</script>
<style>
.uni-margin-wrap {
width: 690rpx;
width: 100%;
}
.swiper {
height: 300rpx;
}
.swiper-item {
display: block;
height: 300rpx;
line-height: 300rpx;
text-align: center;
}
.swiper-list {
margin-top: 40rpx;
margin-bottom: 0;
}
.uni-common-mt {
margin-top: 60rpx;
position: relative;
}
.info {
position: absolute;
right: 20rpx;
}
.uni-padding-wrap {
width: 550rpx;
padding: 0 100rpx;
}
</style>
<style lang="scss">
page {
// background-color: ;
}
.page {
width: 750rpx;
.tab_top {
position: fixed;
top: 0rpx;
left: 0;
width: 750rpx;
height: 250rpx;
z-index: 1;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
image {
position: absolute;
left: 30rpx;
bottom: 90rpx;
width: 60rpx;
height: 60rpx;
}
.txts {
position: absolute;
left: 300rpx;
bottom: 90rpx;
font-weight: 500;
font-size: 36rpx;
color: #3D3D3D;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
}
}
.my-location {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
right: 30rpx;
bottom: 520rpx;
// background-color: #fff;
border-radius: 50%;
width: 82rpx;
height: 82rpx;
z-index: 10;
.img {
width: 82rpx;
height: 82rpx;
}
}
.park {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
right: 30rpx;
bottom: 600rpx;
// background-color: #fff;
border-radius: 50%;
width: 82rpx;
height: 82rpx;
z-index: 10;
.img {
width: 82rpx;
height: 82rpx;
}
}
.feeDetail {
padding: 36rpx 22rpx;
position: fixed;
display: flex;
flex-wrap: wrap;
bottom: 0;
left: 0;
width: 750rpx;
height: 900rpx;
background: #F7F7F7;
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
border-radius: 53rpx 53rpx 0 0;
z-index: 200;
overflow-y: auto;
/* Enable vertical scrolling */
.close {
position: absolute;
top: 20rpx;
right: 40rpx;
width: 30rpx;
height: 30rpx;
}
.feeCard {
margin-top: 20rpx;
padding: 38rpx;
width: 708rpx;
// height: 710rpx;
background: #FFFFFF;
border-radius: 32rpx 32rpx 32rpx 32rpx;
.tit1 {
font-weight: 500;
font-size: 32rpx;
color: #3D3D3D;
}
.cont {
width: 100%;
margin-top: 26rpx;
display: flex;
flex-wrap: nowrap;
.left {
width: 40%;
font-weight: 600;
font-size: 28rpx;
color: #3D3D3D;
}
.right {
width: 60%;
display: flex;
flex-wrap: wrap;
font-weight: 500;
font-size: 28rpx;
color: #FF4444;
.li {
width: 100%;
}
}
}
}
}
.tipss_box {
width: 370rpx;
height: 73rpx;
position: fixed;
bottom: 600rpx;
left: 38rpx;
.tipss {
// position: fixed;
margin-top: 15rpx;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
image {
margin-right: 15rpx;
width: 24rpx;
height: 24rpx;
}
width: 350rpx;
height: 64rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
border-radius: 53rpx 53rpx 53rpx 53rpx;
}
.swiper {
height: 80rpx;
.tipss {
// position: fixed;
margin-top: 15rpx;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
image {
margin-right: 15rpx;
width: 24rpx;
height: 24rpx;
}
width: 350rpx;
height: 64rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.3);
border-radius: 53rpx 53rpx 53rpx 53rpx;
}
}
}
.map {
width: 750rpx;
height: 76vh;
}
.botmbox2 {
position: fixed;
bottom: 0;
padding: 30rpx 20rpx 40rpx;
width: 750rpx;
// height: 272rpx;
background: #F7F7F7;
border-radius: 50rpx 50rpx 0 0;
z-index: 100;
.close {
position: absolute;
top: 20rpx;
right: 40rpx;
width: 35rpx;
height: 35rpx;
}
.page1 {
.top {
// margin-top: 20rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
padding-bottom: 28rpx;
border-bottom: 2rpx solid #D8D8D8;
.left {
width: 56rpx;
height: 56rpx;
image {
width: 56rpx;
height: 56rpx;
}
}
.top_center {
width: 50%;
display: flex;
flex-wrap: wrap;
margin-left: 28rpx;
.cent_top {
width: 100%;
font-weight: 500;
font-size: 28rpx;
color: #3D3D3D;
}
.cent_bot {
font-weight: 500;
font-size: 24rpx;
color: #ccc;
}
}
.top_right {
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: 35rpx;
width: 160rpx;
height: 60rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 2rpx solid #4C97E7;
font-weight: 500;
font-size: 28rpx;
color: #4C97E7;
}
}
.center {
margin-top: 42rpx;
display: flex;
flex-wrap: nowrap;
// justify-content: space-around;
padding-bottom: 28rpx;
border-bottom: 2rpx solid #D8D8D8;
.center_left {
width: 50%;
display: flex;
flex-wrap: wrap;
justify-content: center;
.center_left_top {
width: 100%;
text-align: center;
font-weight: 400;
font-size: 24rpx;
color: #808080;
}
.center_left_bot {
margin-top: 32rpx;
width: 100%;
text-align: center;
font-weight: 500;
font-size: 60rpx;
color: #3D3D3D;
}
}
.center_right {
width: 50%;
display: flex;
flex-wrap: wrap;
justify-content: center;
.center_right_top {
width: 100%;
text-align: center;
font-weight: 400;
font-size: 24rpx;
color: #808080;
}
.center_right_bot {
margin-top: 32rpx;
width: 100%;
text-align: center;
font-weight: 500;
font-size: 60rpx;
color: #3D3D3D;
}
}
}
.bot {
margin-top: 42rpx;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
.left_btn {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 2rpx;
width: 338rpx;
height: 90rpx;
border-radius: 45rpx 45rpx 45rpx 45rpx;
border: 2rpx solid #808080;
font-weight: 500;
font-size: 40rpx;
color: #808080;
}
.right_btn {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 2rpx;
width: 338rpx;
height: 90rpx;
background: #4C97E7;
border-radius: 45rpx 45rpx 45rpx 45rpx;
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
}
}
.tips {
margin-top: 42rpx;
width: 100%;
text-align: center;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
}
.page2 {
.top {
display: flex;
flex-wrap: nowrap;
width: 100%;
// height: 284rpx;
padding-bottom: 30rpx;
.left {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 50%;
padding-top: 10rpx;
.text {
font-weight: 400;
font-size: 24rpx;
color: #808080;
}
.ele {
width: 100%;
display: flex;
flex-wrap: nowrap;
// align-items: center;
justify-content: center;
font-weight: 400;
font-size: 40rpx;
color: #4C97E7;
image {
margin-right: 18rpx;
width: 22rpx;
height: 48rpx;
}
}
}
.right {
width: 50%;
padding-top: 10rpx;
display: flex;
flex-wrap: wrap;
justify-content: center;
.text {
text-align: center;
width: 100%;
font-weight: 400;
font-size: 24rpx;
color: #808080;
}
.speed {
margin-top: 18rpx;
width: 226rpx;
height: 22rpx;
background: #ccc;
border-radius: 16rpx 16rpx 16rpx 16rpx;
.speeds {
// width: 90%;
height: 100%;
background: #77B8FD;
border-radius: 16rpx 16rpx 16rpx 16rpx;
}
}
.txt {
width: 100%;
display: flex;
flex-wrap: nowrap;
// align-items: center;
// align-items: center;
justify-content: center;
font-weight: 500;
font-size: 72rpx;
color: #3D3D3D;
span {
font-weight: 700;
margin-top: 30rpx;
}
}
}
}
.center::-webkit-scrollbar {
display: none;
}
.center {
width: 100%;
display: flex;
flex-wrap: nowrap;
overflow-x: auto; // 添加水平滚动条
margin-bottom: 200rpx;
white-space: nowrap; // 确保子元素不换行
padding: 20rpx 0;
background: #F7F7F7;
.card {
width: 500rpx !important; // 确保宽度被应用
height: 288rpx;
margin-right: 20rpx;
position: relative;
background: #FFFFFF;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
border-radius: 16rpx;
border: 2rpx solid #fff;
image {
position: absolute;
top: 0;
right: 0;
width: 82rpx;
height: 50rpx;
}
.tips_btn {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0;
width: 350rpx;
height: 70rpx;
background: #4C97E7;
border-radius: 0rpx 0rpx 16rpx 16rpx;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
}
.tit {
padding: 18rpx 0 0 18rpx;
/* Adds padding to the top and left sides */
width: 300rpx;
/* Sets a fixed width for the element */
display: flex;
/* Uses flexbox for layout */
align-items: center;
/* Vertically centers the content */
font-weight: 500;
/* Sets the font weight to medium */
font-size: 36rpx;
/* Sets the font size */
color: #3D3D3D;
/* Sets the text color */
white-space: nowrap;
/* Prevents the text from wrapping to the next line */
overflow: hidden;
/* Hides any content that overflows the element's box */
text-overflow: ellipsis;
/* 显示省略号 */
}
.nmtxt {
width: 100%;
margin-top: 22rpx;
display: flex;
justify-content: space-between;
align-items: center;
.left {
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
.right {
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
.red {
font-weight: 400;
font-size: 36rpx;
color: #FF4444;
}
}
.tip {
margin-top: 14rpx;
font-weight: 400;
font-size: 20rpx;
color: #808080;
}
.tips {
display: flex;
align-items: center;
margin-left: auto;
font-size: 30rpx;
color: #3D3D3D;
.icon-chakanxiangqing {
font-size: 30rpx;
color: #3D3D3D;
font-weight: 600;
}
}
}
.act1 {
border: 2rpx solid #4C97E7;
}
}
.bot {
display: flex;
flex-wrap: wrap;
// align-items: center;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
width: 750rpx;
height: 210rpx;
background: #FFFFFF;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08), 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
border-radius: 0rpx 0rpx 0rpx 0rpx;
.xy {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
.yuans {
margin-top: 2rpx;
display: flex;
align-items: center;
justify-content: center;
width: 27rpx;
height: 27rpx;
border-radius: 50%;
border: #808080 solid 2rpx;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.txt {
margin-left: 10rpx;
font-weight: 400;
font-size: 20rpx;
color: #979797;
span {
color: #3D3D3D;
}
}
}
.btn {
margin-top: 10rpx;
display: flex;
justify-content: center;
align-items: center;
width: 680rpx;
height: 90rpx;
background: #4C97E7;
border-radius: 54rpx 54rpx 54rpx 54rpx;
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
}
}
}
.page3 {
.bot_btn {
width: 750rpx;
height: 618rpx;
// background: #fff;
// box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
border-radius: 50rpx 50rpx 0 0;
.info {
// margin-top: 20rpx;
padding: 0 60rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
width: 708rpx;
height: 100rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
}
.cardss {
position: absolute;
bottom: 220rpx;
// margin-top: 20rpx;
padding: 20rpx 30rpx;
width: 695rpx;
// height: 288rpx;
background: #fff;
border-radius: 20rpx 20rpx 20rpx 20rpx;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
.tit {
font-weight: 500;
font-size: 36rpx;
color: #3D3D3D;
}
.cont {
margin-top: 30rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.left {
.text {
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
.speed {
margin-top: 18rpx;
width: 226rpx;
height: 22rpx;
background: #ccc;
border-radius: 16rpx 16rpx 16rpx 16rpx;
.speeds {
// width: 90%;
height: 100%;
background: #77B8FD;
border-radius: 16rpx 0rpx 0rpx 16rpx;
}
}
.mac {
margin-top: 18rpx;
}
}
.right {
image {
width: 244rpx;
height: 196rpx;
font-weight: 400;
font-size: 24rpx;
color: #3D3D3D;
}
}
}
}
.bot {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
width: 750rpx;
height: 184rpx;
background: #FFFFFF;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08), 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
border-radius: 0rpx 0rpx 0rpx 0rpx;
.btn {
display: flex;
justify-content: center;
align-items: center;
width: 338rpx;
height: 90rpx;
background: #4C97E7;
border-radius: 54rpx 54rpx 54rpx 54rpx;
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
}
.btn1 {
display: flex;
justify-content: center;
align-items: center;
width: 338rpx;
height: 90rpx;
border-radius: 45rpx 45rpx 45rpx 45rpx;
border: 2rpx solid #808080;
font-weight: 500;
font-size: 40rpx;
color: #808080;
}
}
}
}
.page4 {
.bot_btn {
padding-top: 20rpx;
// margin-top: 20rpx;
// padding: 26rpx 34rpx 48rpx 34rpx;
// position: fixed;
// display: flex;
// flex-wrap: wrap;
// justify-content: center;
// bottom: 0;
// width: 750rpx;
height: 400rpx;
background: #FFFFFF;
// box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
border-radius: 30rpx;
.time {
// height: 88rpx;
width: 100%;
text-align: center;
padding-bottom: 24rpx;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
border-bottom: 2rpx solid #EFEFEF;
}
.price {
margin-top: 22rpx;
width: 100%;
text-align: center;
font-weight: 500;
font-size: 72rpx;
color: #3D3D3D;
span {
font-size: 28rpx;
font-weight: 500;
}
}
.toinfo {
// margin-top: 12rpx;
width: 100%;
text-align: center;
font-weight: 400;
font-size: 24rpx;
color: #3D3D3D;
}
.btn {
margin-top: 34rpx;
margin-left: 40rpx;
display: flex;
align-items: center;
justify-content: center;
width: 600rpx;
height: 90rpx;
background: #4C97E7;
border-radius: 54rpx 54rpx 54rpx 54rpx;
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
}
}
}
}
.botmbox {
position: fixed;
bottom: 0;
padding: 40rpx 32rpx;
width: 750rpx;
// height: 272rpx;
background: #fff;
border-radius: 50rpx 50rpx 0 0;
.guangggao {
margin-top: 34rpx;
image {
width: 686rpx;
height: 160rpx;
border-radius: 10rpx 10rpx 10rpx 10rpx;
}
}
.top_btn {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
width: 686rpx;
height: 90rpx;
background: #4C97E7;
border-radius: 54rpx 54rpx 54rpx 54rpx;
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
image {
width: 56rpx;
height: 56rpx;
margin-right: 4rpx;
}
}
.bot_btn {
margin-top: 34rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.cont {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 112rpx;
image {
width: 44rpx;
height: 44rpx;
}
.text {
margin-top: 12rpx;
width: 112rpx;
text-align: center;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
}
}
}
.pops {
padding: 46rpx 36rpx;
position: fixed;
top: 400rpx;
left: 74rpx;
width: 604rpx;
// height: 606rpx;
background: #fff;
border-radius: 20rpx 20rpx 20rpx 20rpx;
z-index: 110;
.close {
position: absolute;
left: 266rpx;
bottom: -100rpx;
image {
width: 80rpx;
height: 80rpx;
}
}
.btn_box {
margin-top: 80rpx;
display: flex;
align-items: center;
justify-content: space-between;
.btn1 {
display: flex;
align-items: center;
justify-content: center;
width: 216rpx;
height: 90rpx;
background: #989898;
border-radius: 54rpx 54rpx 54rpx 54rpx;
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
}
.btn2 {
display: flex;
align-items: center;
justify-content: center;
width: 268rpx;
height: 90rpx;
background: #4C97E7;
border-radius: 54rpx 54rpx 54rpx 54rpx;
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
}
}
.time {
margin-top: 20rpx;
text-align: center;
font-weight: 500;
font-size: 48rpx;
color: #4C97E7;
}
.cont {
height: 500rpx;
overflow-x: hidden;
overflow-y: auto;
}
.tit {
// width: 604rpx;
text-align: center;
font-weight: 500;
font-size: 36rpx;
color: #3D3D3D;
margin-bottom: 54rpx;
}
.cont_box {
margin-top: 36rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.left {
display: flex;
flex-wrap: wrap;
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
.km {
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
.speed {
margin-top: 18rpx;
width: 226rpx;
height: 22rpx;
background: #ccc;
border-radius: 16rpx 16rpx 16rpx 16rpx;
.speeds {
// width: 90%;
height: 100%;
background: #77B8FD;
border-radius: 16rpx 16rpx 16rpx 16rpx;
}
}
.NO {
font-weight: 400;
font-size: 24rpx;
color: #3D3D3D;
}
}
.right {
font-weight: 600;
font-size: 36rpx;
color: #3D3D3D;
image {
width: 244rpx;
height: 196rpx;
}
}
}
.text {
margin-top: 36rpx;
display: flex;
flex-wrap: wrap;
// align-items: center;
.yuan {
margin-top: 10rpx;
margin-right: 12rpx;
width: 20rpx;
height: 20rpx;
background: #000;
border-radius: 50%;
}
span {
width: 90%;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
}
.btn {
margin-left: 40rpx;
margin-top: 50rpx;
display: flex;
align-items: center;
justify-content: center;
width: 470rpx;
height: 90rpx;
background: #4C97E7;
border-radius: 54rpx 54rpx 54rpx 54rpx;
font-weight: 500;
font-size: 40rpx;
color: #FFFFFF;
}
.act1 {
background-color: #ccc;
}
}
.bottom_more {
position: fixed;
bottom: 0;
width: 750rpx;
height: 530rpx;
background: linear-gradient(180deg, #EEF5FD 20%, rgba(255, 255, 255, 0)30%), #FFFFFF;
border-radius: 30rpx;
padding: 48rpx 36rpx;
z-index: 30;
.close {
position: absolute;
right: 32rpx;
top: 32rpx;
width: 32rpx;
height: 32rpx;
image {
width: 32rpx;
height: 32rpx;
}
}
.tit {
font-weight: 500;
font-size: 44rpx;
color: #3D3D3D;
}
.contbox {
margin-top: 44rpx;
width: 100%;
display: flex;
flex-wrap: wrap;
.cont_li {
margin-top: 22rpx;
display: flex;
flex-wrap: wrap;
// align-items: center;
justify-content: center;
width: 158rpx;
height: 124rpx;
background: #FFFFFF;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
border-radius: 16rpx 16rpx 16rpx 16rpx;
margin-right: 10rpx;
image {
margin-top: 18rpx;
width: 46rpx;
height: 46rpx;
}
.txt {
width: 100%;
margin-top: 10rpx;
text-align: center;
font-weight: 400;
font-size: 24rpx;
color: #3D3D3D;
}
}
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink