MrShi
2025-02-17 3b5dc77ee03b5df1b49fffafc71a9c9aa56678cf
bicycle/pages/index/index.vue
@@ -13,7 +13,11 @@
         </view>
         <view class="index_box">
            <view class="index_box_map">
               <map class="map" :show-location="true" :markers="markers" :latitude="latitude" :longitude="longitude" />
               <map class="map" scale="15" :show-location="true" :markers="markers" :latitude="latitude" :longitude="longitude" />
               <view class="index_box_map_type">
                  <view class="index_box_map_type_row active">自行车</view>
                  <view class="index_box_map_type_row">电动车</view>
               </view>
               <view class="index_box_icon" @click="jumpMap">
                  <image src="@/static/icon/ic_fullscreen@2x.png" mode="widthFix"></image>
               </view>
@@ -32,6 +36,28 @@
                  <image class="img80" :src="item.icon" mode="widthFix"></image>
                  <text class="f26 c3 mt10">{{item.name}}</text>
               </view>
            </view>
            <view class="index_box_vip">
               <view class="index_box_vip_head">
                  <text>热销套餐</text>
                  <text @click="jumpTC">更多优惠 ></text>
               </view>
               <scroll-view scroll-x class="scrollView">
                  <view class="index_box_vip_row" v-for="(item, index) in 3" :key="index">
                     <view class="vip1">
                        <text>电单车年卡</text>
                        <text>365</text>
                     </view>
                     <view class="vip2">
                        <text>365天畅骑,享受骑车乐趣</text>
                        <u>¥699</u>
                     </view>
                     <view class="vip3">
                        <view class="vip3_info">低至1元/天</view>
                        <view class="vip3_button">购买</view>
                     </view>
                  </view>
               </scroll-view>
            </view>
            <view class="index_box_poster" @click="jumpX">
               <image class="imgfull" :src="info.leaseNoticeUrl" mode="widthFix"></image>
@@ -60,7 +86,7 @@
         <view class="index_scancode_bottom" @click="carRental" v-else>扫码租车</view>
         <view class="index_scancode_zw"></view>
      </view>
      <!-- 缴纳押金 -->
      <!-- 自行车-缴纳押金 -->
      <u-popup :show="show1" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10"
         @close="show1 = false">
         <view class="deposit">
@@ -82,7 +108,7 @@
            </view>
         </view>
      </u-popup>
      <!-- 开锁 -->
      <!-- 自行车-开锁 -->
      <u-popup :show="show5" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10"
         @close="show5 = false">
         <view class="loading">
@@ -99,7 +125,7 @@
            </view> -->
         </view>
      </u-popup>
      <!-- 骑行中 -->
      <!-- 自行车-骑行中 -->
      <u-popup :show="show2" :overlay="false" overlayOpacity="0" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10"
         @close="show2 = false">
         <view class="ride">
@@ -138,7 +164,7 @@
            </view>
         </view>
      </u-popup>
      <!-- 已还车 -->
      <!-- 自行车-已还车 -->
      <u-popup :show="show6" :overlay="false" overlayOpacity="0" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10"
         @close="show6 = false">
         <view class="ride">
@@ -175,7 +201,7 @@
            </view>
         </view>
      </u-popup>
      <!-- 确认结算 -->
      <!-- 自行车-确认结算 -->
      <u-popup :show="show3" :overlay="false" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10" @close="show3 = false">
         <template>
            <view class="deposit1">
@@ -193,7 +219,7 @@
      </u-popup>
      <!-- 提示 -->
      <u-modal :show="show4" :title="title" :content='content' confirmColor="#01B6AD" @confirm="show4 = false"></u-modal>
      <!-- 确认结算弹框 -->
      <!-- 自行车-确认结算弹框 -->
      <u-modal :show="show7" title="提示" content='确认结算吗?' :showCancelButton="true" cancelText="取消" @confirm="settlement1" @cancel="show7 = false"></u-modal>
      <!-- 广告 -->
      <u-popup :show="show" mode="center" :closeOnClickOverlay="false" overlayStyle="z-index: 10075;" bgColor="transparent" :round="10" @close="show = false">
@@ -277,15 +303,20 @@
         await this.getAddress()
         await this.getHomeInfo()
         await this.getSite()
         if (decodeURIComponent(options.scene) !== 'undefined') {
            console.log(decodeURIComponent(options.scene))
            this.carRentalCopy(decodeURIComponent(options.scene))
         }
         // if (decodeURIComponent(options.scene) !== 'undefined') {
         //    console.log(decodeURIComponent(options.scene))
         //    this.carRentalCopy(decodeURIComponent(options.scene))
         // }
      },
      onPageScroll(e) {
         this.top = e.scrollTop
      },
      methods: {
         jumpTC() {
            uni.navigateTo({
               url: '/pages/setMenu/setMenu'
            });
         },
         // 微信打开小程序开锁方法
         async carRentalCopy(code) {
            await this.refresh()
@@ -931,7 +962,36 @@
               padding: 6rpx;
               box-sizing: border-box;
               position: relative;
               .index_box_map_type {
                  position: absolute;
                  bottom: 20rpx;
                  left: 50%;
                  width: 244rpx;
                  height: 56rpx;
                  transform: translate(-50%, 0);
                  background: #FFFFFF;
                  box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.08);
                  border-radius: 16rpx;
                  padding: 6rpx;
                  box-sizing: border-box;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  .index_box_map_type_row {
                     width: 116rpx;
                     height: 44rpx;
                     line-height: 44rpx;
                     text-align: center;
                     border-radius: 12rpx;
                     font-weight: 400;
                     font-size: 28rpx;
                     color: #666666;
                  }
                  .active {
                     background: rgba(1,182,173,0.08) !important;
                     color: #01B6AD;
                  }
               }
               .map {
                  width: 100%;
                  height: 100%;
@@ -1027,6 +1087,120 @@
                  }
               }
            }
            .index_box_vip {
               width: 100%;
               padding: 24rpx 30rpx;
               box-sizing: border-box;
               background: linear-gradient(#FFFFFF 0%, #FCEADC 100%);
               border-radius: 20rpx;
               .index_box_vip_head {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  text {
                     &:nth-child(1) {
                        font-weight: 600;
                        font-size: 34rpx;
                        color: #303030;
                     }
                     &:nth-child(2) {
                        font-weight: 400;
                        font-size: 26rpx;
                        color: #666666;
                     }
                  }
               }
               .scrollView {
                  width: 100%;
                  margin-top: 20rpx;
                  white-space: nowrap;
                  .index_box_vip_row {
                     display: inline-block;
                     width: 580rpx;
                     height: 216rpx;
                     background: #FFFFFF;
                     box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.06);
                     border-radius: 12rpx;
                     margin-right: 16rpx;
                     padding: 24rpx;
                     box-sizing: border-box;
                     &:last-child {
                        margin: 0 !important;
                     }
                     .vip1 {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        text {
                           &:nth-child(1) {
                              font-weight: 500;
                              font-size: 32rpx;
                              color: #303030;
                           }
                           &:nth-child(2) {
                              font-weight: 400;
                              font-size: 40rpx;
                              color: #FF5A31;
                              &:before {
                                 content: '¥';
                                 font-weight: 400;
                                 font-size: 26rpx;
                                 color: #FF5A31;
                              }
                           }
                        }
                     }
                     .vip2 {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-top: 10rpx;
                        margin-bottom: 16rpx;
                        text {
                           font-weight: 400;
                           font-size: 26rpx;
                           color: #777777;
                        }
                        u {
                           font-weight: 400;
                           font-size: 24rpx;
                           color: #999999;
                        }
                     }
                     .vip3 {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .vip3_info {
                           padding: 6rpx 12rpx;
                           box-sizing: border-box;
                           background: rgba(255,90,49,0.1);
                           border-radius: 8rpx;
                           font-weight: 400;
                           font-size: 24rpx;
                           color: #FF5A31;
                        }
                        .vip3_button {
                           width: 120rpx;
                           height: 60rpx;
                           line-height: 60rpx;
                           text-align: center;
                           background: #01B6AD;
                           box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(1,182,173,0.24);
                           border-radius: 30rpx;
                           font-weight: 500;
                           font-size: 28rpx;
                           color: #FFFFFF;
                        }
                     }
                  }
               }
            }
            .index_box_poster {
               width: 100%;