bike-alipay/pages/use_bike/use_bike.axml

<view class="user-bike">
  <!-- 未开启位置 -->
  <view class="pay-frame" a:if="{{background==true}}">
    <view class="topay" a:if="{{location}}">
      <view class="text1">定位失败,请确认是否已开启</view>
      <view class="text2" style="margin-bottom:44rpx;">位置权限</view>
      <view class="view">
        <view class="view1"  style="border-right:1rpx solid #f4f4f4;color:#999999;" onTap="open">
          <view>已开启</view>
        </view>
        <view class="view1" style="color:#18D4B8;"  onTap="go_setting">
          <view>去设置</view>
        </view>
      </view>
    </view>
   
  </view>

  <!-- 车辆未开锁弹框 -->
  <view class="frame" a:if="{{frame==true}}">
    <view class="frame-content">
      <view class="frame-title">
        <text class="iconfont icon-cha" onTap="frameClose"></text>
        <text class="frame-kefu" onTap="keFu">联系客服</text>
      </view>

      <image src="../../img/suo.jpg" mode="widthFix" class="suo"></image>
      <view class="frame-con">
        <!-- <image src="../../img/lanya.jpg" mode="widthFix" class="lanya"></image> -->
        <view class="frame-bt">
          <view class="frame-left" onTap="guzhang">故障上报</view>
          <view class="frame-right" onTap="retryOpenBike">重新开锁</view>
        </view>
      </view>
    </view>
  </view>
  <!-- 地图显示停车区域-->
  <map name="" id="map" show-location="true" longitude='{{longitude}}' latitude='{{latitude}}' scale='{{zoom}}' enable-zoom='true'
    markers="{{markers}}" data-markers="{{markers}}" controls="{{controls}}" polygon="{{polygons}}" >
  </map>
  <view class="map-icon">
    <view class="kefu" onTap="findPark">
      <image src="../../img/park.png"></image>
    </view>
  </view>
  <!-- <view class="bike-tip" onTap="bikeKnow">
    <text class="tip-text">车辆静止30分钟将自动锁车</text> 

  </view> -->
  
  <!-- 公告栏 -->
  <view class="ad-list">
    <image src="../../img/mess.png" alt="" class="mess" />
    <swiper class="swiper" autoplay='true' vertical='true'>
      <swiper-item class="swiper-item">
        <view class="ad-item">不在还车点换车，将收取调度费</view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <view class="ad-item">车辆静止三十分钟后将自动还车~</view>
      </swiper-item>
      <swiper-item class="swiper-item" a:if="{{bikeMessage.activity}}">
        <view class="ad-item">{{bikeMessage.activity}}</view>
      </swiper-item>
    </swiper>
    <!-- <image src="../../img/change.png" class="change"></image> -->
  </view>
  <view class="use-bike-bottom" catchtouchmove='ture'>
    <!-- 骑行第一步 -->
    <view class="step1" a:if="{{steps==1}}">
      <view class="bottom-title1">{{bikeMessage.riding_bike_mileage||'--'}}公里</view>
      <view class="bottom-title2">剩余电量可行驶</view>
      
      <view class="open_bike" onTap="openBikeClick">点击开锁</view>
      <view class="lanya">打开蓝牙，体验快速开锁</view>
    </view>
    <!-- 骑行第二步 -->
    <view class="step2" a:if="{{steps==2}}">
      <view class="step2-title">温馨提示</view>
      <view class="step2-content" a:if="{{setting.is_whole_area_huanche!==1}}">
        <view class="step2-left">
          <image src="../../img/park2.png" mode="widthFix"></image>
        </view>
        <view class="step2-right">
          <view class="step2-text">还车点</view>
          <view class="step2-text1">请在还车点内还车，否则将收取调度费</view>
        </view>
      </view>
      <view class="step2-content">
        <view class="step2-left">
          <image src="../../img/park1.jpg" mode="widthFix"></image>
        </view>
        <view class="step2-right">
          <view class="step2-text">服务区</view>
          <view class="step2-text1">请勿骑出运营区，否则车辆将断电</view>
        </view>
      </view>
      <view class="open_bike" onTap="konwOpenBike">我知道了，立即开锁</view>
    </view>
    <!-- 骑行第三步 -->

    <view class="step3" a:if="{{steps==3}}">
      <view class="step3-title" style="font-size:30rpx;color:var(--orgFont)" a:if="{{dispatch_money!==0}}">
         <view class="step3-title-left">
         <text class="iconfont icon-guize"></text> 您当前不在还车区，还车将收取{{dispatch_money}}元调度费
        </view>
      </view>
      <view class="step3-title" a:else>
        <view class="step3-title-left">
          剩余电量可行驶<text class="title-left-num">{{bikeMessage.riding_bike_mileage||'--'}}</text>公里
        </view>
        <view class="step3-title-right" onTap="frameShow" a:if="{{parkStatus==0 || parkStatus==2}}">车辆未开锁</view>
        <view class="bell" onTap="clickBell" a:if="{{parkStatus==1}}"> <image class="bell-image" src="../../img/bell1.png"></image></view>
      </view>
     
      <!-- 骑行中 -->
      <view class="steps3-list" a:if="{{parkStatus==0}}">
        <view class="step3-list-item">
          <view class="step3-item-num">{{times}}</view>
          <view class="step3-item-text">骑行时长</view>
        </view>
        <view class="step3-list-item">
          <view class="step3-item-num">{{battery_power}}%</view>
          <view class="step3-item-text">剩余电量</view>
        </view>
        <view class="step3-list-item">
          <view class="step3-item-num">￥{{estimate_money}}</view>
          <view class="step3-item-text">预估费用</view>
        </view>
      </view>
      <!-- 临时停车 -->
      <view class="step3-parking" a:if="{{parkStatus==1}}">
        <view class="step3-park-title1">临时锁车</view>
        <view class="step3-park-text" a:if="{{stopmMinute!==0 && stopMiao!==0}}">可锁车{{stopmMinute || '--'}}分{{stopMiao || '--'}}秒</view>
      </view>
      <!-- 结束用车显示费用信息 -->
         <view class="steps3-list" a:if="{{parkStatus==2}}" style="width:70%;margin:0 auto">
        <!-- <view class="step3-list-item">
          <view class="step3-item-num" style="color:var(--globleColor)"><text style="font-size:26rpx">￥</text>{{money.total_money}}</view>
          <view class="step3-item-text">时长费用</view>
        </view> -->
        <view class="step3-list-item">
          <view class="step3-item-num" ><text style="font-size:26rpx">￥</text>{{money.time_money}}</view>
          <view class="step3-item-text">骑行费用</view>
        </view>
        <view class="step3-list-item">
          <view class="step3-item-num"><text style="font-size:26rpx">￥</text>{{dispatch_money}}</view>
          <view class="step3-item-text">调度费</view>
        </view>
      </view>
      <view class="step3-bottom">
        <view class="step3-bottom-left" onTap="parkBike" a:if="{{parkStatus==0 && chaButton==0}}">临时锁车</view>
        <view class="step3-bottom-left" a:if="{{parkStatus==1 && chaButton==0}}" onTap="openPark">解锁</view>
        <view class="step3-cha" onTap="cancelEndBike" a:if="{{chaButton==1}}"><text
            class="iconfont icon-cha"></text></view>
        <view class="step3-bottom-right" onTap="endUseBike" a:if="{{parkStatus!==2 && chaButton==0}}">结束用车</view>
        <view class="step3-bottom-right" onTap="sureEndUseBike" a:if="{{chaButton==1}}">确认结束</view>
      </view>
    </view>
    <view class="bottom-list">
      <view class="bottom-list-item" onTap="chargeRule"><text
          class="iconfont icon-bianmaguize buttom-icon"></text><text>计费规则</text></view>
      <view class="bottom-list-item" onTap="keFu"><text
          class="iconfont icon-kefu buttom-icon"></text><text>联系客服</text></view>
      <view class="bottom-list-item" onTap="bikeKnow"><text
          class="iconfont icon-guize buttom-icon"></text><text>骑行须知</text></view>
      <view class="bottom-list-item" onTap="bikeCoupon"><text
          class="iconfont icon-coupon buttom-icon"></text><text>特惠购卡</text></view>
    </view>
  </view>

</view>