MrShi
2023-10-31 e9af167156ca9d1b404a76ab0fc8c82c26fe6a11
bicycle/pages/index/index.vue
@@ -3,16 +3,16 @@
      <view class="index_nav"
         :style="{ height: 'calc(' + (statusbarHeight + navHeight) + 'px' + ' + ' + '224rpx' + ')' }">
         <view class="index_nav_a" :style="{ height: statusbarHeight + 'px' }"></view>
         <view class="index_nav_b" :style="{ height: navHeight + 'px', lineHeight: navHeight + 'px', top: navHeight + 'px' }">
         <view :style="{ height: navHeight + 'px' }"></view>
         <view class="index_nav_b" :style="{ height: navHeight + 'px', lineHeight: navHeight + 'px', top: statusbarHeight + 'px' }">
            <text>印象滨湖自行车</text>
         </view>
         <view class="index_box">
            <view class="index_box_map">
               <map class="map" :show-location="true" :markers="markers" :latitude="latitude" :longitude="longitude" />
               <cover-view class="index_box_icon" @click="jumpMap">
               <view class="index_box_icon" @click="jumpMap">
                  <image src="@/static/icon/ic_fullscreen@2x.png" mode="widthFix"></image>
               </cover-view>
               </view>
            </view>
            <view class="index_box_title" :style="{ backgroundImage: 'url(' + bgImg + ')' }">
               <view class="index_box_title_left">
@@ -23,12 +23,12 @@
               </image>
            </view>
            <view class="index_box_function">
               <view class="fx1 cXYC" v-for="(item, index) in functionList" :key="index" @click="jump(item)">
               <view class="cXYC" v-for="(item, index) in functionList" :key="index" @click="jump(item)">
                  <image class="img80" :src="item.icon" mode="widthFix"></image>
                  <text class="f26 b c3 mt10">{{item.name}}</text>
                  <text class="f26 c3 mt10">{{item.name}}</text>
               </view>
            </view>
            <view class="index_box_poster">
            <view class="index_box_poster" @click="jumpX">
               <image class="imgfull" :src="info.leaseNoticeUrl" mode="widthFix"></image>
            </view>
            <view class="index_box_video" v-if="info.leaseVideoUrl">
@@ -50,16 +50,6 @@
         <view class="index_scancode_bottom" @click="carRental" v-else>扫码租车</view>
         <view class="index_scancode_zw"></view>
      </view>
      <!-- 广告 -->
      <u-popup :show="show" mode="center" bgColor="transparent" :round="10" @close="show = false">
         <view class="popupbox">
            <view class="advertisement">
               <image :src="info.adList[0].imgurl" mode="widthFix"></image>
            </view>
            <image class="close" @click="show = false" src="@/static/images/ic_close@2x.png" mode="widthFix">
            </image>
         </view>
      </u-popup>
      <!-- 缴纳押金 -->
      <u-popup :show="show1" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10"
         @close="show1 = false">
@@ -73,7 +63,7 @@
               <image src="@/static/icon/ic_select@2x.png" mode="widthFix" v-if="!active"></image>
               <image src="@/static/icon/ic_selected@2x.png" mode="widthFix" v-else></image>
               <view class="deposit_read_z">
                  我已阅读<text>《租赁须知》</text>和<text @click.stop="jumpgz">《计价规则》</text>
                  我已阅读<text @click.stop="jumpX">《租赁须知》</text>和<text @click.stop="jumpgz">《计价规则》</text>
               </view>
            </view>
            <view class="deposit_footer">
@@ -100,7 +90,7 @@
         </view>
      </u-popup>
      <!-- 骑行中 -->
      <u-popup :show="show2" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10"
      <u-popup :show="show2" overlayOpacity="0" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10"
         @close="show2 = false">
         <view class="ride">
            <view class="ride_head">
@@ -128,7 +118,7 @@
               </view>
               <view class="ride_content_info">
                  <image src="@/static/icon/ic_tip@2x.png" mode="widthFix"></image>
                  <text>支持中途还车,骑行时间自动累计,如更换车型,按所取车辆中最高车型计费</text>
                  <text v-if="info.tips">{{info.tips}}</text>
               </view>
            </view>
            <view class="ride_btn" @click="navigationReturn">导航至园区站还车点</view>
@@ -139,7 +129,7 @@
         </view>
      </u-popup>
      <!-- 已还车 -->
      <u-popup :show="show6" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10"
      <u-popup :show="show6" overlayOpacity="0" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10"
         @close="show6 = false">
         <view class="ride">
            <view class="ride_head">
@@ -195,6 +185,16 @@
      <u-modal :show="show4" :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" bgColor="transparent" :round="10" @close="show = false">
         <view class="popupbox">
            <view class="advertisement">
               <image :src="info.adList[0].imgfullurl" mode="widthFix"></image>
            </view>
            <image class="close" @click="show = false" src="@/static/images/ic_close@2x.png" mode="widthFix">
            </image>
         </view>
      </u-popup>
   </view>
</template>
@@ -246,7 +246,10 @@
            ],
            info: {},
            content: ''
            content: '',
            timer: null,
            isDisabled: true
         }
      },
      computed: {
@@ -261,6 +264,11 @@
         this.getSite()
      },
      methods: {
         jumpX() {
            uni.navigateTo({
               url: '/pages/leaseNotice/leaseNotice'
            });
         },
         jumpMap() {
            uni.navigateTo({
               url: '/pages/maps/maps'
@@ -286,9 +294,7 @@
                           longitude: item.longitude,
                           title: item.name,
                           iconPath: '/static/icon/ic_bike@2x.png',
                           addr: item.addr,
                           clusterId: 1,
                           joinCluster: true
                           addr: item.addr
                        })
                     })
                  }
@@ -296,18 +302,18 @@
         },
         // 结算
         settlement1() {
            this.$u.api.goodsOrderSettlement({
               orderId: this.info.goodsOrderId
            }).then(res => {
               if (res.code === 200) {
                  this.refresh()
                  uni.showToast({ title: '结算成功!', icon: 'success', duration: 2000 });
                  // this.info.rideStatus = -1
                  // this.info.depositStatus = 0
                  this.show3 = false
                  this.show7 = false
               }
            })
            if (this.isDisabled) {
               this.isDisabled = false
               this.$u.api.goodsOrderSettlement({}).then(res => {
                  if (res.code === 200) {
                     this.refresh()
                     uni.showToast({ title: '结算成功!', icon: 'success', duration: 2000 });
                     this.show3 = false
                     this.show7 = false
                     this.isDisabled = true
                  }
               })
            }
         },
         minute() {
            this.show3 = false
@@ -337,8 +343,6 @@
               });
            } else if (item.id === 2) {
               if (this.info.depositStatus === 1) {
                  // this.settlement1()
                  // this.show7 = true
                  this.show3 = true
               } else {
                  uni.showToast({ title: '您暂无押金,无需结算!', icon: 'none', duration: 2000 });
@@ -590,6 +594,25 @@
               },
            });
         },
         // 刷新骑行状态
         refreshStatus() {
            this.timer = setInterval(async () => {
               let res = await this.$u.api.home()
               if (res.code === 200) {
                  this.info = res.data
                  // 骑行中
                  if (res.data.rideStatus === 1) {
                     return
                  }
                  this.show2 = false
                  // 已换车
                  if (res.data.rideStatus === 2) {
                     this.show6 = true
                  }
                  clearInterval(this.timer)
               }
            }, 10000)
         },
         // 获取首页信息
         getHomeInfo() {
            this.$u.api.home()
@@ -633,8 +656,10 @@
                           }
                        }, 1000)
                     }
                     // 骑行中
                     if (res.data.rideStatus === 1) {
                        this.show2 = true
                        this.refreshStatus()
                     }
                     if (res.data.rideStatus === 5) {
                        this.show5 = true
@@ -697,6 +722,7 @@
                     }
                     if (res.data.rideStatus === 1) {
                        this.show2 = true
                        this.refreshStatus()
                     }
                     if (res.data.rideStatus === 5) {
                        this.show5 = true
@@ -713,6 +739,9 @@
               phoneNumber: mobile
            });
         }
      },
      destroyed() {
         clearInterval(this.timer)
      }
   }
</script>
@@ -733,7 +762,7 @@
            width: 100%;
            padding: 0 30rpx;
            box-sizing: border-box;
            position: sticky;
            position: fixed;
            z-index: 9;
            text {
@@ -828,8 +857,12 @@
               border-radius: 20rpx;
               display: flex;
               align-items: center;
               justify-content: space-between;
               position: relative;
               top: -24rpx;
               text {
                  font-weight: 400;
               }
            }
            .index_box_poster {