3093 lines
77 KiB
Vue
3093 lines
77 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- <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">
|
||
|
||
</map>
|
||
<view class="my-location">
|
||
<image class="img" src="https://lxnapi.ccttiot.com/bike/img/static/u0Kyr2HWPvHq7CMHIv5r"
|
||
@click="getMyLocation"></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">
|
||
{{deviceInfos.remainingMileage}}公里
|
||
</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="qecodelock()">
|
||
扫码用车
|
||
</view>
|
||
<view class="right_btn" @click="Reserve()">
|
||
预约用车
|
||
</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>
|
||
<view class="right">
|
||
<view class="text">
|
||
剩余电量
|
||
</view>
|
||
<view class="txt" style="font-size: 36rpx;">
|
||
{{ deviceInfos.remainingPower}}%
|
||
<!-- {{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"></view>
|
||
<view class="right " 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>
|
||
</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="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="card">
|
||
<view class="tit">
|
||
电单车
|
||
</view>
|
||
<view class="cont">
|
||
<view class="left">
|
||
<view class="text">
|
||
可继续行驶53公里
|
||
</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">
|
||
<view class="top_btn" @click="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=""
|
||
style="width: 32rpx;height: 32rpx;"></image>
|
||
<view class="text">
|
||
用车指南
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="topage(4)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uFaJV6NJGhmmodpEuWMy" mode=""
|
||
style="width: 32rpx;height: 32rpx;"></image>
|
||
<view class="text">
|
||
编号开锁
|
||
</view>
|
||
</view>
|
||
<view class="cont" @click="showindex=1">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/udQjw62ubIRDIUQqlsTT" mode=""
|
||
style="width: 32rpx;height: 32rpx;"></image>
|
||
<view class="text">
|
||
更多
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tipss" v-if="orderinfo.status" @click="starTime">
|
||
您有正在进行中的订单 <view class="iconfont icon-xiangyou1">
|
||
|
||
</view>
|
||
</view>
|
||
<u-mask :show="showtcs" @click="showtc = false" :z-index='100' />
|
||
<u-mask :show="show" @click="show = false" :z-index='100' />
|
||
<view class="pops" v-if="showtcs">
|
||
<view class="tit">
|
||
{{orderinfo.rule.name}}
|
||
</view>
|
||
<view class="text">
|
||
<view class="yuan">
|
||
|
||
</view>
|
||
<span>在套餐时间为结束是可随意进行车辆预约和解锁</span>
|
||
|
||
</view>
|
||
<view class="text">
|
||
<view class="yuan">
|
||
|
||
</view>
|
||
<span>车辆二维码模糊可使用下方编号开锁</span>
|
||
<view class="time">
|
||
|
||
</view>
|
||
</view>
|
||
<view class="time">
|
||
{{timeString}}后
|
||
</view>
|
||
<view class="time" style="color:#3D3D3D ;font-size: 28rpx;">
|
||
您将失去该套餐
|
||
</view>
|
||
<view class="btn" @click="showtcs=false">
|
||
我已知晓
|
||
</view>
|
||
</view>
|
||
<view class="pops" v-if="show">
|
||
<view class="tit">
|
||
安全骑行 禁止超载
|
||
</view>
|
||
<view class="text">
|
||
<view class="yuan">
|
||
|
||
</view>
|
||
<span>临时锁车：相当于拔钥匙，还在租借中</span>
|
||
|
||
</view>
|
||
<view class="text">
|
||
<view class="yuan">
|
||
|
||
</view>
|
||
<span>结束订单：在还车点结束订单，押金可在【个人中心-押金】申请押金退还</span>
|
||
|
||
</view>
|
||
<view class="text">
|
||
<view class="yuan">
|
||
|
||
</view>
|
||
<span>严禁超载：一辆车最多坐两个人</span>
|
||
|
||
</view>
|
||
<view class="text">
|
||
<view class="yuan">
|
||
|
||
</view>
|
||
<span>请爱护车辆，且注意查看车辆剩余电量</span>
|
||
|
||
</view>
|
||
<view class="btn">
|
||
我已阅读同意
|
||
</view>
|
||
</view>
|
||
<view class="feeDetail" v-if="showfeeDetail">
|
||
<view class="close" @click="showfeeDetail=false">
|
||
<image src="https://lxnapi.ccttiot.com/bike/img/static/uBeBBKwQu2K2ZBdT7iN7" mode=""></image>
|
||
</view>
|
||
<view class="feeCard">
|
||
<view class="tit1">
|
||
收费价格说明
|
||
</view>
|
||
<view class="cont">
|
||
<view class="left">
|
||
免费时长
|
||
</view>
|
||
<view class="right" style="color:#3D3D3D ;">
|
||
{{freeInfo.freeRideTime}}分钟
|
||
</view>
|
||
</view>
|
||
<view class="cont" v-if="freeInfo.ridingRule==1">
|
||
<view class="left">
|
||
起步价
|
||
</view>
|
||
<view class="right">
|
||
{{freeInfo.ridingRuleJson.startingPrice}}元（含{{freeInfo.ridingRuleJson.startingTime}}<span
|
||
v-if="freeInfo.rentalUnit=='minutes'">分钟</span><span
|
||
v-if="freeInfo.rentalUnit=='hours'">小时</span><span
|
||
v-if="freeInfo.rentalUnit=='day'">天</span>）
|
||
</view>
|
||
</view>
|
||
<view class="cont" v-if="freeInfo.ridingRule==1">
|
||
<view class="left">
|
||
超起步价后
|
||
</view>
|
||
<view class="right">
|
||
{{freeInfo.ridingRuleJson.timeoutPrice}}元/{{ freeInfo.ridingRuleJson.timeoutTime}}<span
|
||
v-if="freeInfo.rentalUnit=='minutes'">分钟</span><span
|
||
v-if="freeInfo.rentalUnit=='hours'">小时</span><span
|
||
v-if="freeInfo.rentalUnit=='day'">天</span>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="cont" v-if="freeInfo.ridingRule==2">
|
||
<view class="left">
|
||
计费规则
|
||
</view>
|
||
<view class="right">
|
||
<view class="li" v-for="(items,index) in freeInfo.ridingRuleJson.rule"
|
||
v-if="index!=freeInfo.ridingRuleJson.rule.length-1">
|
||
{{items.start}}-{{items.end}}<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
|
||
<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
|
||
<span v-if="freeInfo.rentalUnit=='day'">天</span>,
|
||
每{{items.eachUnit}}<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
|
||
<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
|
||
<span v-if="freeInfo.rentalUnit=='day'">天</span>/{{items.fee}}元
|
||
</view>
|
||
<view class="li" v-for="(items,index) in freeInfo.ridingRuleJson.rule"
|
||
v-if="index==freeInfo.ridingRuleJson.rule.length-1">
|
||
>{{items.start}}<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
|
||
<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
|
||
<span v-if="freeInfo.rentalUnit=='day'">天</span>,
|
||
每{{items.eachUnit}}<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
|
||
<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
|
||
<span v-if="freeInfo.rentalUnit=='day'">天</span>/{{items.fee}}元
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="cont">
|
||
<view class="left">
|
||
|
||
</view>
|
||
<view class="right" style="font-size: 24rpx;color: #808080;">
|
||
不足1<span v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
|
||
<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
|
||
<span v-if="freeInfo.rentalUnit=='day'">天</span>，按1<span
|
||
v-if="freeInfo.rentalUnit=='minutes'">分钟</span>
|
||
<span v-if="freeInfo.rentalUnit=='hours'">小时</span>
|
||
<span v-if="freeInfo.rentalUnit=='day'">天</span>算
|
||
</view>
|
||
</view>
|
||
<view class="cont">
|
||
<view class="left">
|
||
调度费
|
||
</view>
|
||
<view class="right" style="color:#3D3D3D ;">
|
||
{{areaInfo.vehicleManagementFee}}元（停车点外还车）
|
||
</view>
|
||
</view>
|
||
<view class="cont">
|
||
<view class="left">
|
||
|
||
</view>
|
||
<view class="right" style="color:#3D3D3D ;">
|
||
{{areaInfo.dispatchFee}}元（运营区域外还车）
|
||
</view>
|
||
</view>
|
||
<view class="cont">
|
||
<view class="left">
|
||
|
||
</view>
|
||
<view class="right">
|
||
P点外归还设备将收取调度费
|
||
</view>
|
||
</view>
|
||
<!-- <view class="cont">
|
||
<view class="left">
|
||
支付订单后
|
||
</view>
|
||
<view class="right" style="color:#3D3D3D ;">
|
||
自动退押金
|
||
</view>
|
||
</view> -->
|
||
|
||
</view>
|
||
<view class="feeCard" v-html='freeInfo.instructions'>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="bottom_more" v-if="showindex==1">
|
||
<view class="close" @click="showindex=0">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uM76uO46a5cZOkFlffnX" mode=""></image>
|
||
</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(2)">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uFHC2R6R3pgUOTShLxoQ" 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">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ulQHy1cQ28kiMLI0T0Uh" 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>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#F7FAFE",
|
||
},
|
||
showindex: 0,
|
||
show: false,
|
||
latitude: '',
|
||
longitude: '',
|
||
isMap: false,
|
||
zoomSize: 16,
|
||
markers: [],
|
||
polyline: [],
|
||
areas: [],
|
||
gps: {},
|
||
deviceInfos: {},
|
||
OrderdeviceInfos: {},
|
||
showdevice: false,
|
||
deviceIndex: 0,
|
||
type: 0,
|
||
freList: [],
|
||
freeListIndex: 0,
|
||
freeInfo: {},
|
||
socket: null,
|
||
sn: '',
|
||
eventKey: 0,
|
||
orderinfo: {},
|
||
timer: null,
|
||
timeString: '',
|
||
money: 0,
|
||
showtc: false,
|
||
showtcs: false,
|
||
areaInfo: {},
|
||
// feeInfo:{},
|
||
showfeeDetail: false,
|
||
seeDetail: false,
|
||
showmap:true
|
||
|
||
// userId:this.$store.getters.userId,
|
||
}
|
||
},
|
||
watch: {
|
||
userId(newValue, oldValue) {
|
||
// 处理userId变化的逻辑
|
||
console.log('userId 发生变化', newValue, oldValue);
|
||
this.getisInOrder()
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
console.log(e, 'eeeeeeeeeeeeeeeeeee');
|
||
if (e.q) {
|
||
let qParam = e.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;
|
||
}
|
||
});
|
||
}
|
||
this.sn = sn
|
||
if (this.sn != '') {
|
||
|
||
|
||
setTimeout(() => {
|
||
if (!this.orderinfo.status) {
|
||
this.deviceInfo()
|
||
this.showdevice = true
|
||
this.deviceIndex = 1
|
||
this.type = 1
|
||
}
|
||
}, 1000)
|
||
|
||
|
||
}
|
||
|
||
}
|
||
if (e.sn) {
|
||
this.sn = e.sn
|
||
if (this.sn != '') {
|
||
setTimeout(() => {
|
||
if (!this.orderinfo.status) {
|
||
this.deviceInfo()
|
||
this.showdevice = true
|
||
this.deviceIndex = 1
|
||
this.type = 1
|
||
}
|
||
}, 1000)
|
||
|
||
}
|
||
|
||
}
|
||
},
|
||
onShow() {
|
||
if (this.seeDetail == false) {
|
||
|
||
if (uni.getStorageSync('role')) {
|
||
let abb = uni.getStorageSync('role')
|
||
|
||
}
|
||
|
||
console.log(this.userId);
|
||
|
||
|
||
|
||
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');
|
||
if(!that.areaInfo.areaId){
|
||
that.getArea()
|
||
}
|
||
// that.getmarks()
|
||
|
||
|
||
//
|
||
},
|
||
fail: function(error) {
|
||
uni.showToast({
|
||
title: '未获取到定位信息，请点击设置勾选允许位置信息，即可使用全部功能',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
// that.getmarks()
|
||
// 在这里处理获取位置信息失败的情况
|
||
}
|
||
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
|
||
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;
|
||
},
|
||
},
|
||
methods: {
|
||
getMyLocation() {
|
||
uni.createMapContext("map", this).moveToLocation({
|
||
longitude: this.longitude,
|
||
latitude: this.latitude,
|
||
});
|
||
},
|
||
// 查看费用详情
|
||
tofeeDetail() {
|
||
uni.navigateTo({
|
||
url: '/page_user/ckmx?orderId=' + this.orderinfo.orderNo
|
||
})
|
||
},
|
||
// 扫码开锁
|
||
qecodelock() {
|
||
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()
|
||
|
||
}
|
||
}, 1000)
|
||
|
||
}
|
||
|
||
},
|
||
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() {
|
||
this.$u.post('/appVerify/device/return?returnType=1&orderNo=' + this.orderinfo.orderNo).then((res) => {
|
||
if (res.code === 200) {
|
||
this.getisInOrder()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
})
|
||
},
|
||
// 套餐直接开锁
|
||
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() {
|
||
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) => {
|
||
if (res.code == 200) {
|
||
this.getisInOrder()
|
||
} else {
|
||
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) => {
|
||
if (res.code === 200) {
|
||
this.getisInOrder()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
unloackdevices() {
|
||
this.$u.post('/appVerify/device/unlock?sn=' + this.OrderdeviceInfos.sn + '&orderNo=' + this.orderinfo
|
||
.orderNo).then((res) => {
|
||
if (res.code === 200) {
|
||
this.getisInOrder()
|
||
} else {
|
||
|
||
}
|
||
})
|
||
},
|
||
// ；临时锁车
|
||
loackdevice() {
|
||
this.$u.post('/appVerify/device/lock?sn=' + this.OrderdeviceInfos.sn + '&orderNo=' + this.orderinfo
|
||
.orderNo).then((res) => {
|
||
if (res.code === 200) {
|
||
this.getisInOrder()
|
||
} else {
|
||
|
||
}
|
||
})
|
||
},
|
||
starTime() {
|
||
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
|
||
}
|
||
})
|
||
|
||
// if (this.orderinfo.ruleId != null && this.orderinfo.sn == '') {
|
||
// this.showdevice = false;
|
||
// this.deviceIndex = 0;
|
||
// this.showtc = true
|
||
// const ruleEndTimeTimestamp = new Date(this.orderinfo.ruleEndTime).getTime();
|
||
|
||
// // 定义定时器
|
||
// this.timer = setInterval(() => {
|
||
// const currentTime = Date.now();
|
||
// // const timePassed = currentTime - createTimeTimestamp;
|
||
// const timeRemaining = ruleEndTimeTimestamp - currentTime;
|
||
|
||
// if (timeRemaining <= 0) {
|
||
// clearInterval(this.timer);
|
||
// this.timeString = "00:00:00";
|
||
// // 可以在这里添加时间结束后的逻辑
|
||
// return;
|
||
// }
|
||
|
||
// const secondsRemaining = Math.floor(timeRemaining / 1000);
|
||
|
||
// // 转换为时分秒格式
|
||
// const hours = Math.floor(secondsRemaining / 3600);
|
||
// const minutes = Math.floor((secondsRemaining % 3600) / 60);
|
||
// const seconds = secondsRemaining % 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);
|
||
// }, 1000);
|
||
// } else if (this.orderinfo.status == 0 && this.orderinfo.ruleId != null) {
|
||
// this.showdevice = true;
|
||
// this.deviceIndex = 2;
|
||
// // const createTimeTimestamp = new Date(this.orderinfo.payTime).getTime();
|
||
// const ruleEndTimeTimestamp = new Date(this.orderinfo.ruleEndTime).getTime();
|
||
|
||
// // 定义定时器
|
||
// this.timer = setInterval(() => {
|
||
// const currentTime = Date.now();
|
||
// // const timePassed = currentTime - createTimeTimestamp;
|
||
// const timeRemaining = ruleEndTimeTimestamp - currentTime;
|
||
// console.log(timeRemaining);
|
||
// if (timeRemaining <= 0) {
|
||
// clearInterval(this.timer);
|
||
// this.timeString = "00:00:00";
|
||
// // 可以在这里添加时间结束后的逻辑
|
||
// return;
|
||
// }
|
||
|
||
// const secondsRemaining = Math.floor(timeRemaining / 1000);
|
||
|
||
// // 转换为时分秒格式
|
||
// const hours = Math.floor(secondsRemaining / 3600);
|
||
// const minutes = Math.floor((secondsRemaining % 3600) / 60);
|
||
// const seconds = secondsRemaining % 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);
|
||
// }, 1000);
|
||
// } else if (this.orderinfo.status == 2 && this.orderinfo.ruleId != null) {
|
||
// this.showdevice = true;
|
||
// this.deviceIndex = 2;
|
||
// // const createTimeTimestamp = new Date(this.orderinfo.payTime).getTime();
|
||
// const ruleEndTimeTimestamp = new Date(this.orderinfo.ruleEndTime).getTime();
|
||
|
||
// // 定义定时器
|
||
// this.timer = setInterval(() => {
|
||
// const currentTime = Date.now();
|
||
// // const timePassed = currentTime - createTimeTimestamp;
|
||
// const timeRemaining = ruleEndTimeTimestamp - currentTime;
|
||
// console.log(timeRemaining);
|
||
// if (timeRemaining <= 0) {
|
||
// clearInterval(this.timer);
|
||
// this.timeString = "00:00:00";
|
||
// // 可以在这里添加时间结束后的逻辑
|
||
// return;
|
||
// }
|
||
|
||
// const secondsRemaining = Math.floor(timeRemaining / 1000);
|
||
|
||
// // 转换为时分秒格式
|
||
// const hours = Math.floor(secondsRemaining / 3600);
|
||
// const minutes = Math.floor((secondsRemaining % 3600) / 60);
|
||
// const seconds = secondsRemaining % 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);
|
||
// }, 1000);
|
||
// }
|
||
|
||
|
||
// 预约中
|
||
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)
|
||
// console.log(this.money,'this.areaInfo.appointmentServiceFeethis.areaInfo.appointmentServiceFee');
|
||
// if (totalMinutes <= this.startingHowManyMinutes) {
|
||
// this.money = this.startingPrice;
|
||
// } else {
|
||
// const extraTime = totalMinutes - this.startingHowManyMinutes;
|
||
// const extraIntervals = Math.floor(extraTime / parseFloat(this.timeMinutes)) + 1;
|
||
// console.log(extraIntervals * this.timeFee, 'extraIntervalsextraIntervals');
|
||
// this.money = parseFloat(this.startingPrice) + (extraIntervals * parseFloat(this
|
||
// .timeFee));
|
||
// }
|
||
// console.log("已经过去了：" + timeString);
|
||
// console.log("增加了" +money+ "元费用");
|
||
// 每隔十分钟增加费用
|
||
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;
|
||
|
||
// if (totalMinutes <= this.startingHowManyMinutes) {
|
||
// this.money = this.startingPrice;
|
||
// } else {
|
||
// const extraTime = totalMinutes - this.startingHowManyMinutes;
|
||
// const extraIntervals = Math.floor(extraTime / parseFloat(this.timeMinutes)) + 1;
|
||
// console.log(extraIntervals * this.timeFee, 'extraIntervalsextraIntervals');
|
||
// this.money = parseFloat(this.startingPrice) + (extraIntervals * parseFloat(this.timeFee));
|
||
// }
|
||
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 转换为时间戳
|
||
|
||
},
|
||
// 取消预约支付
|
||
topay() {
|
||
let data = {
|
||
userId: this.userId,
|
||
sn: this.orderinfo.sn,
|
||
orderNo: this.orderinfo.orderNo,
|
||
|
||
// money: this.freeInfo.fee,
|
||
mark: "订单支付",
|
||
type: '2'
|
||
|
||
|
||
}
|
||
console.log('点击了');
|
||
let that = this
|
||
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) {
|
||
// 支付成功逻辑
|
||
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'
|
||
|
||
|
||
}
|
||
console.log('点击了');
|
||
let that = this
|
||
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) {
|
||
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) {
|
||
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);
|
||
uni.navigateTo({
|
||
url: '/page_user/yj'
|
||
})
|
||
|
||
|
||
}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'
|
||
})
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
});
|
||
|
||
|
||
} else if (num == 2) {
|
||
uni.navigateTo({
|
||
url: '/page_user/jfgz'
|
||
})
|
||
} else if (num == 3) {
|
||
uni.navigateTo({
|
||
url: '/page_user/yczn'
|
||
})
|
||
} else if (num == 4) {
|
||
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
|
||
})
|
||
}
|
||
},
|
||
createWebSocket() {
|
||
// 创建 WebSocket 实例，传入 token
|
||
let token = uni.getStorageSync('token')
|
||
let that = this
|
||
this.socket = uni.connectSocket({
|
||
url: `ws://192.168.2.8:8080/appVerify/ws/${this.eventKey}`, // WebSocket 服务器地址
|
||
header: {
|
||
'Authorization': token // 设置 Authorization 请求头
|
||
},
|
||
success(res) {
|
||
|
||
console.log('WebSocket 连接成功', res);
|
||
},
|
||
fail(err) {
|
||
console.error('WebSocket 连接失败', err);
|
||
}
|
||
});
|
||
|
||
// 监听 WebSocket 接收到消息事件
|
||
this.socket.onMessage(res => {
|
||
console.log('收到消息：', res.data);
|
||
});
|
||
|
||
// 监听 WebSocket 错误事件
|
||
this.socket.onError(err => {
|
||
console.error('WebSocket 错误：', err);
|
||
});
|
||
|
||
// 监听 WebSocket 连接关闭事件
|
||
this.socket.onClose(() => {
|
||
console.log('WebSocket 连接已关闭');
|
||
});
|
||
},
|
||
sendMessage() {
|
||
// console.log('发送了消息');
|
||
// 发送消息给服务器
|
||
this.socket.send({
|
||
data: 'Hello, server!'
|
||
});
|
||
},
|
||
closeConnection() {
|
||
// 关闭 WebSocket 连接
|
||
this.socket.close({
|
||
code: 1000, // 关闭连接的代码
|
||
reason: 'Closing connection' // 关闭连接的原因
|
||
});
|
||
},
|
||
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.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) => {
|
||
this.seeDetail = false
|
||
if (res.code === 200) {
|
||
this.getisInOrder()
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
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.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 {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
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() {
|
||
if (this.userId) {
|
||
this.$u.post('/app/user/isInOrder?userId=' + this.userId, ).then((res) => {
|
||
if (res.code === 200) {
|
||
// this.freList=res.rows
|
||
if (res.data != '') {
|
||
this.orderinfo = res.data[0]
|
||
|
||
this.starTime()
|
||
} else {
|
||
this.showdevice = false
|
||
this.deviceIndex = 0
|
||
}
|
||
} else {
|
||
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
changefree(item, index) {
|
||
this.freeInfo = item
|
||
this.freeListIndex = index
|
||
},
|
||
getlist() {
|
||
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.$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
|
||
}
|
||
|
||
|
||
},
|
||
// 扫码用车
|
||
qrCode() {
|
||
if (this.$store.getters.userId == null) {
|
||
this.$u.get("/getAppInfo").then((res) => {
|
||
console.log('进入跳转');
|
||
if (res.code == 200) {
|
||
this.$store.commit('SET_USERID', res.user.userId);
|
||
this.scanQRCode()
|
||
} else {
|
||
uni.showToast({
|
||
title: '未登录，请登录后尝试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
},
|
||
// 关闭弹出
|
||
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() {
|
||
this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
|
||
if (res.code === 200) {
|
||
|
||
}
|
||
})
|
||
},
|
||
onMarkerTap(e) {
|
||
if (e.type === 'markertap') {
|
||
console.log('点击了标记：', e.markerId);
|
||
// 这里可以根据需要处理点击标记的逻辑
|
||
// 阻止事件冒泡\
|
||
this.sn = e.markerId
|
||
this.deviceInfo()
|
||
|
||
|
||
|
||
}
|
||
|
||
},
|
||
deviceInfo() {
|
||
let that = this
|
||
if(uni.getStorageSync('token')){
|
||
this.$u.get('/app/device/info?sn=' + this.sn).then((res) => {
|
||
if (res.code === 200) {
|
||
this.deviceInfos = res.data
|
||
this.showindex = 0
|
||
this.showdevice = true
|
||
}else{
|
||
this.showdevice = false
|
||
this.deviceIndex = 0
|
||
this.type = 0
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
})
|
||
}else{
|
||
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) {
|
||
that.deviceInfos = res.data
|
||
that.showindex = 0
|
||
that.showdevice = true
|
||
}else{
|
||
that.showdevice = false
|
||
that.deviceIndex = 0
|
||
that.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 {
|
||
// console.log("老用户登录",res.data)
|
||
uni.redirectTo({
|
||
url:'/pages/login/login'
|
||
})
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
});
|
||
}
|
||
|
||
|
||
|
||
},
|
||
// onMapTap(e) {
|
||
// console.log('点击了地图非标记区域：', e);
|
||
// // 这里可以根据需要处理点击地图非标记区域的逻辑
|
||
// },
|
||
getmarks() {
|
||
|
||
let data = {
|
||
areaId: this.areaInfo.areaId
|
||
}
|
||
this.$u.get(`/app/allVehicleByArea`, data).then((res) => {
|
||
if (res.code === 200) {
|
||
this.listData = res.data;
|
||
// const markers = data.map(item => {
|
||
// return {
|
||
// id: item.deviceId,
|
||
// latitude: parseFloat(item.latitude),
|
||
// longitude: parseFloat(item.longitude),
|
||
// title: item.deviceName,
|
||
// width : 25,
|
||
// height : 30,
|
||
// iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7',
|
||
// };
|
||
// });
|
||
this.listData.forEach(item => {
|
||
this.markers.push({
|
||
id: parseFloat(item.sn),
|
||
latitude: parseFloat(item.latitude),
|
||
longitude: parseFloat(item.longitude),
|
||
// title: item.deviceName,
|
||
width: 40,
|
||
height: 28,
|
||
iconPath: 'https://api.ccttiot.com/smartmeter/img/static/uF9qLejuAZErNTrRuHq7',
|
||
})
|
||
})
|
||
// this.markers = markers;
|
||
// console.log(this.markers, ' this.markers this.markers');
|
||
} else {
|
||
// 处理接口返回错误的情况
|
||
}
|
||
}).catch(error => {
|
||
// 处理接口请求失败的情况
|
||
});
|
||
},
|
||
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
|
||
// if (this.areaInfo.authentication == 1) {
|
||
// if (res.user.isAuthentication == 0) {
|
||
// uni.navigateTo({
|
||
// url: "/page_user/idcard_test"
|
||
// })
|
||
// }
|
||
// }
|
||
} else {
|
||
// setTimeout(()=>{
|
||
// this.getinfo()
|
||
// this.getlist()
|
||
// },1000)
|
||
}
|
||
});
|
||
|
||
|
||
}
|
||
},
|
||
getArea() {
|
||
this.showmap=false
|
||
// 发送请求获取数据
|
||
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(this.areaInfo, 'areaInfoareaInfo');
|
||
uni.setStorageSync('areaId', res.data.areaId);
|
||
this.getinfo()
|
||
this.getmarks()
|
||
this.getlist()
|
||
this.getParking()
|
||
if (uni.getStorageSync('token')) {
|
||
this.getisInOrder()
|
||
|
||
}
|
||
|
||
// console.log(this.polyline);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}).catch(error => {
|
||
console.error("Error fetching area data:", error);
|
||
});
|
||
},
|
||
// getArea() {
|
||
// // 发送请求获取数据
|
||
// this.$u.get('/app/area/list',this.gps).then((res) => {
|
||
// if (res.code === 200) {
|
||
// // 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||
// const polylines = res.rows
|
||
// .filter(area => area.boundaryStr) // 过滤掉boundary为空的数据
|
||
// .map(area => this.convertBoundaryToPolyline(area.boundaryStr));
|
||
// // 更新折线数据
|
||
// this.polyline = polylines;
|
||
// this.getlist()
|
||
// // console.log(this.polyline);
|
||
// }
|
||
// }).catch(error => {
|
||
// console.error("Error fetching area data:", error);
|
||
// });
|
||
// },
|
||
convertBoundaryToPolylines(boundaries) {
|
||
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: "#55888840", //填充颜色
|
||
strokeColor: "#558888", //描边颜色
|
||
strokeWidth: 2, //描边宽度
|
||
zIndex: 1, //层级
|
||
};
|
||
}).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
|
||
},
|
||
getParking() {
|
||
// 发送请求获取数据
|
||
let data = {
|
||
areaId: this.areaInfo.areaId
|
||
}
|
||
this.$u.get('/app/parking/list?', data).then((res) => {
|
||
if (res.code === 200) {
|
||
// 处理接口返回的数据
|
||
const validBoundaries = res.rows.map(row => row.boundaryStr).filter(boundary =>
|
||
typeof boundary === 'string' && boundary.trim() !== '');
|
||
const polylines = this.convertBoundaryToPolylines(validBoundaries);
|
||
|
||
// 将处理后的数据添加到 this.polyline 中
|
||
this.polyline = this.polyline.concat(polylines);
|
||
// 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) {
|
||
// // 确保 boundaries 是一个有效的数组
|
||
// if (!Array.isArray(boundaries)) {
|
||
// console.error("Boundaries is not an array:", boundaries);
|
||
// return [];
|
||
// }
|
||
|
||
// 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: "#55888840", //填充颜色
|
||
// strokeColor: "#22FF00", //描边颜色
|
||
// strokeWidth: 2, //描边宽度
|
||
// zIndex: 1, //层级
|
||
// };
|
||
// }).filter(polyline => polyline !== null); // 过滤掉无效的折线数据
|
||
// },
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
// background-color: ;
|
||
}
|
||
|
||
.page {
|
||
width: 750rpx;
|
||
|
||
.my-location {
|
||
|
||
position: fixed;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
right: 30rpx;
|
||
bottom: 300rpx;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
z-index: 10;
|
||
.img {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
position: fixed;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-wrap: nowrap;
|
||
bottom: 304rpx;
|
||
left: 38rpx;
|
||
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: 84vh;
|
||
}
|
||
|
||
.botmbox2 {
|
||
|
||
position: fixed;
|
||
bottom: 0;
|
||
padding: 40rpx 32rpx;
|
||
width: 750rpx;
|
||
// height: 272rpx;
|
||
background: #fff;
|
||
border-radius: 50rpx 50rpx 0 0;
|
||
z-index: 100;
|
||
|
||
.close {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
right: 30rpx;
|
||
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;
|
||
|
||
.left {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
width: 50%;
|
||
padding-top: 68rpx;
|
||
|
||
.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: 68rpx;
|
||
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; // 确保子元素不换行
|
||
|
||
.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;
|
||
width: 350rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.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;
|
||
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: 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: 648rpx;
|
||
background: #F7F7F7;
|
||
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
|
||
border-radius: 50rpx 50rpx 0 0;
|
||
|
||
.info {
|
||
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;
|
||
}
|
||
|
||
view {}
|
||
|
||
.card {
|
||
margin-top: 12rpx;
|
||
padding: 20rpx 30rpx;
|
||
width: 708rpx;
|
||
height: 288rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
|
||
.tit {
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.cont {
|
||
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: #EFEFEF;
|
||
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: 26rpx 34rpx 48rpx 34rpx;
|
||
// position: fixed;
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
// justify-content: center;
|
||
// bottom: 0;
|
||
width: 750rpx;
|
||
height: 420rpx;
|
||
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;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 680rpx;
|
||
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;
|
||
|
||
.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: 80rpx;
|
||
|
||
image {
|
||
width: 29.33rpx;
|
||
height: 31.97rpx;
|
||
}
|
||
|
||
.text {
|
||
margin-top: 12rpx;
|
||
width: 80px;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
font-size: 20rpx;
|
||
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;
|
||
|
||
.time {
|
||
margin-top: 20rpx;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 48rpx;
|
||
color: #4C97E7;
|
||
}
|
||
|
||
.tit {
|
||
// width: 604rpx;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
margin-bottom: 54rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.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> |