| | |
| | | </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> |
| | |
| | | <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> |
| | |
| | | <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"> |
| | |
| | | </view> |
| | | </view> |
| | | </u-popup> |
| | | <!-- 开锁 --> |
| | | <!-- 自行车-开锁 --> |
| | | <u-popup :show="show5" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10" |
| | | @close="show5 = false"> |
| | | <view class="loading"> |
| | |
| | | </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"> |
| | |
| | | </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"> |
| | |
| | | </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"> |
| | |
| | | </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"> |
| | |
| | | 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() |
| | |
| | | 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%; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .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%; |