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" hidden="{{!frame}}">
    <view class="frame-content">
      <view class="frame-title">
        <text class="iconfont icon-cha 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" a:if="{{ steps==3 || !notice.id && ads.length==0}}">
    <image src="../../img/mess.png" alt="" class="mess" />
    <swiper class="swiper" autoplay='true' vertical='true' interval='10000'>
      <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="ad-swiper" a:if="{{ads.length>0 && steps!=3}}">
    <swiper class="ad-swiper-list" indicator-dots='{{ads.length > 1 ? true : false}}' indicator-color='var(--globleColor)' 
      autoplay='true' interval="5000" current="{{currentSwiper}}" onTap="swiperChange">
      <swiper-item a:for="{{ads}}" a:key="key" class="ad-swiper-item">
        <image mode="widthFix" src="{{item.surface}}" style="width:100%;height:200rpx;" onTap="swiper" data-index="{{index}}" data-type="{{item.type}}" 
          data-name="{{item.name}}" data-detail="{{item.detail}}" data-id="{{item.id}}" a:if="{{item.type!='wxTencentAdvertisement'}}"></image>
      </swiper-item>
    </swiper>
  </view>
  
  <view class="inform" style="top:{{ads.length>0 && steps!==3 ? '220rpx' : steps==3 ? '60px' : '30rpx'}}" onTap="tap_notice" 
    a:if="{{notice.id}}" data-id="{{notice.id}}">
    <view class="inform-img">
      <image src="../../img/notice.png" class="inform-image" style="width:48rpx;height:48rpx;padding-left:20rpx;">
      </image>
    </view>
    <view class='marquee' style='width:{{marqueeWidth}}rpx;'>
      <view class='marqueeTitle' style="width:{{length}}rpx;transform:translateX( {{marqueeDistance}}rpx);">
        {{notice.description}}
      </view>
    </view>
    <image src="../../img/more.png" style="width:48rpx;height:48rpx;"></image>
  </view>
  <view class="use-bike-bottom" catchtouchmove='ture' a:if="{{frame == false}}">
    
    
    
    
    <view class="use-bike-bottom" catchtouchmove='ture'>
      <!-- 骑行第一步 -->
      <view class="step1" a:if="{{steps==1}}">
        <image src="../../img/home.png" class="back-home" onTap="backHome"></image>
        <view class="bottom-title1">{{bikeMessage.riding_bike_mileage||'--'}}公里</view>
        <view class="bottom-title2">剩余电量可行驶</view>
        
        <view class="open_bike" onTap="openBikeClick">点击开锁</view>
        <view class="bike_no">NO：{{bikeMessage.bike_no}}</view>
        <view class="lanya">打开蓝牙，体验快速开锁</view>
      </view>
      <!-- 骑行第二步 -->
      <view class="step2" a:if="{{steps==2}}">
        <image src="../../img/home.png" class="back-home" onTap="backHome"></image>
        <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>