3862 lines
92 KiB
Vue
3862 lines
92 KiB
Vue
<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">
|
||
{{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="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>
|
||
<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 " 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="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">
|
||
<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>
|
||
<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>
|
||
<!-- <swiper class="swiper" :style="{ height: swiperHeight + 'rpx' }" :current='curtitidx' circular :autoplay="autoplay" interval='500'>
|
||
<swiper-item>
|
||
<view class="tipss" v-if="orderinfo.status" @click="starTime">
|
||
您有正在进行中的订单 <view class="iconfont icon-xiangyou1" style="margin-left: 20rpx;">
|
||
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
<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 class="tipss" v-if="orderinfo.status" @click="starTime"> -->
|
||
|
||
|
||
|
||
</view>
|
||
|
||
<u-mask :show="showtcs" @click="showtc = false" :z-index='100' duration='0'/>
|
||
<u-mask :show="showTips" @click="showTips = false" :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 class="btn" @click="showtcs=false" style="margin-bottom: 0rpx;">
|
||
点击查看
|
||
|
||
</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">
|
||
安全骑行 禁止超载
|
||
</view>
|
||
<view class="cont" v-html="areaInfo.agreement">
|
||
|
||
</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" @click="changetips()">
|
||
我已阅读同意
|
||
</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",
|
||
},
|
||
showIconAndCallout: false, // 控制是否显示iconPath和callout
|
||
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: 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
|
||
// userId:this.$store.getters.userId,
|
||
}
|
||
},
|
||
watch: {
|
||
userId(newValue, oldValue) {
|
||
// 处理userId变化的逻辑
|
||
// console.log('userId 发生变化', newValue, oldValue);
|
||
this.getisInOrder()
|
||
},
|
||
showYjTip(newValue, oldValue){
|
||
console.log('showYjTip 发生变化', newValue, oldValue);
|
||
}
|
||
},
|
||
|
||
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(1)
|
||
// this.showdevice = true
|
||
// this.deviceIndex = 1
|
||
// this.type = 1
|
||
} else {
|
||
// this.showtcs=true
|
||
}
|
||
}, 1000)
|
||
|
||
|
||
}
|
||
|
||
}
|
||
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
|
||
}
|
||
}, 1000)
|
||
|
||
}
|
||
|
||
}
|
||
setTimeout(() => {
|
||
this.$store.commit('SET_SHOWTIPS', true);
|
||
}, 500)
|
||
},
|
||
onShow() {
|
||
this.timers = setInterval(() => {
|
||
// console.log('定时器运行中...');
|
||
this.getmarks()
|
||
// 在这里执行你的逻辑
|
||
}, 3000); // 每秒执行一次
|
||
|
||
if (this.seeDetail == false) {
|
||
|
||
if (uni.getStorageSync('role')) {
|
||
let abb = uni.getStorageSync('role')
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
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()
|
||
// 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('定时器已清除');
|
||
}
|
||
},
|
||
onUnload() {
|
||
// 页面卸载时清除定时器
|
||
if (this.timers) {
|
||
clearInterval(this.timers);
|
||
this.timers = null;
|
||
console.log('定时器已清除');
|
||
}
|
||
},
|
||
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;
|
||
},
|
||
// showTips() {
|
||
// return this.$store.getters.showTips;
|
||
// },
|
||
isMeal() {
|
||
return this.$store.getters.isMeal;
|
||
},
|
||
},
|
||
methods: {
|
||
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.showTips) {
|
||
|
||
uni.setStorageSync('hasShownPopup', false);
|
||
this.showTips = uni.getStorageSync('hasShownPopup')
|
||
} else {
|
||
uni.setStorageSync('hasShownPopup', true);
|
||
this.showTips = uni.getStorageSync('hasShownPopup')
|
||
}
|
||
|
||
},
|
||
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: '#000000', // 修改为气泡背景颜色
|
||
padding: 6, // 修改为气泡内边距
|
||
display: 'ALWAYS' // 修改为气泡的显示策略
|
||
}
|
||
});
|
||
});
|
||
this.$set(this, 'markers', [...this.markers, ...newMarkers]);
|
||
} else {
|
||
const parkingIds = this.parkingList.map(item => parseFloat(item.parkingId));
|
||
this.$set(this, 'markers', this.markers.filter(marker => !parkingIds.includes(marker.id)));
|
||
}
|
||
|
||
|
||
},
|
||
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)
|
||
|
||
}
|
||
}, 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() {
|
||
uni.showLoading({
|
||
title:'加载中...'
|
||
})
|
||
this.$u.post('/appVerify/device/return?returnType=1&orderNo=' + this.orderinfo.orderNo).then((res) => {
|
||
uni.hideLoading()
|
||
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() {
|
||
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
|
||
});
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
unloackdevices() {
|
||
uni.showLoading({
|
||
title:'加载中...'
|
||
})
|
||
this.$u.post('/appVerify/device/unlock?sn=' + this.OrderdeviceInfos.sn + '&orderNo=' + this.orderinfo
|
||
.orderNo).then((res) => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
this.getisInOrder()
|
||
} else {
|
||
|
||
}
|
||
})
|
||
},
|
||
// ；临时锁车
|
||
loackdevice() {
|
||
uni.showLoading({
|
||
title:'加载中...'
|
||
})
|
||
this.$u.post('/appVerify/device/lock?sn=' + this.OrderdeviceInfos.sn + '&orderNo=' + this.orderinfo
|
||
.orderNo).then((res) => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
this.getisInOrder()
|
||
} else {
|
||
|
||
}
|
||
})
|
||
},
|
||
starTime() {
|
||
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
|
||
}
|
||
})
|
||
|
||
|
||
// 预约中
|
||
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 转换为时间戳
|
||
|
||
},
|
||
// 取消预约支付
|
||
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
|
||
})
|
||
}
|
||
},
|
||
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() {
|
||
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
|
||
});
|
||
}
|
||
}
|
||
|
||
|
||
},
|
||
// 开锁购买套餐
|
||
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.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
|
||
});
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
},
|
||
// 预约购买套餐
|
||
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{
|
||
this.starTime()
|
||
}
|
||
|
||
} else {
|
||
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() {
|
||
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.status != 1) {
|
||
uni.showToast({
|
||
title: '车辆正在使用中,请使用其他车辆',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
} else {
|
||
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');
|
||
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;
|
||
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 if (res.code == 501) {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
} else {
|
||
uni.redirectTo({
|
||
url: '/pages/login/login'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
// onMapTap(e) {
|
||
// console.log('点击了地图非标记区域：', e);
|
||
// // 这里可以根据需要处理点击地图非标记区域的逻辑
|
||
// },
|
||
getmarks() {
|
||
let data = {
|
||
areaId: this.areaInfo.areaId
|
||
};
|
||
if(this.areaInfo.areaId){
|
||
this.$u.get(`/app/allVehicleByArea`, data).then((res) => {
|
||
if (res.code === 200) {
|
||
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',
|
||
}));
|
||
|
||
// 检查新数据和旧数据是否有变化
|
||
if (this.oldMarkers.length === 0 || this.isMarkersChanged(newMarkers)) {
|
||
console.log('有变化');
|
||
this.markers = newMarkers;
|
||
this.oldMarkers = [...newMarkers];
|
||
}
|
||
|
||
} else {
|
||
// 处理接口返回错误的情况
|
||
}
|
||
}).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 = []
|
||
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;
|
||
uni.setStorageSync('hasShownPopup', true);
|
||
} else {
|
||
console.log('222');
|
||
this.showTips = uni.getStorageSync('hasShownPopup');
|
||
console.log(this.showTips, 'this.showTips');
|
||
}
|
||
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);
|
||
});
|
||
},
|
||
// 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() {
|
||
// 发送请求获取数据
|
||
// this.polyline=[]
|
||
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);
|
||
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) {
|
||
// // 确保 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>
|
||
.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: 40rpx 32rpx;
|
||
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;
|
||
.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: 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: #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-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;
|
||
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;
|
||
|
||
.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: 300rpx;
|
||
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;
|
||
}
|
||
}
|
||
|
||
.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> |