<template>
|
<view class="index">
|
<view class="index_nav"
|
:style="{ height: 'calc(' + (statusbarHeight + navHeight) + 'px' + ' + ' + '224rpx' + ')' }">
|
<view class="index_nav_a" :style="{ height: statusbarHeight + 'px' }"></view>
|
<view :style="{ height: navHeight + 'px' }"></view>
|
<view class="index_nav_box" :style="{ background: top > 0 ? '#9AE2DF' : 'rgba(0,0,0,0)' }">
|
<view class="index_nav_a" :style="{ height: statusbarHeight + 'px' }"></view>
|
<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>
|
<view class="index_box">
|
<view class="index_box_map">
|
<map
|
id="mapId"
|
class="map"
|
scale="15"
|
:show-location="true"
|
:polygons="eleBusinessArea"
|
:markers="markers"
|
:latitude="latitude"
|
:longitude="longitude" />
|
<view class="index_box_map_type">
|
<view :class="type === item.id ? 'index_box_map_type_row active' : 'index_box_map_type_row'" v-for="(item, index) in types" :key="index" @click="clickType(item.id)">{{item.name}}</view>
|
</view>
|
<view class="index_box_icon" @click="jumpMap">
|
<image src="@/static/icon/ic_fullscreen@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="index_box_title">
|
<view class="index_box_title_left">
|
<text>{{info.parkName}}</text>
|
<text>服务电话:{{info.serverPhone}}</text>
|
</view>
|
<image src="@/static/icon/ic_call@2x.png" mode="widthFix" @click="calling(info.serverPhone)">
|
</image>
|
</view>
|
<view class="index_box_function">
|
<view class="cXYC" v-for="(item, index) in functionList" :key="index" @click.stop="jump(item)">
|
<button open-type="getPhoneNumber" @getphonenumber="getPhone" v-if="!userInfo.mobile"></button>
|
<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 tcList" :key="index">
|
<view class="vip1">
|
<view class="vip1_left">
|
{{item.name || ''}}
|
</view>
|
<view class="vip1_right">
|
{{item.price || ''}}
|
</view>
|
</view>
|
<view class="vip2">
|
<text>{{item.descs || ''}}</text>
|
<u>¥{{item.linePrice || ''}}</u>
|
</view>
|
<view class="vip3">
|
<view class="vip3_info">低至{{item.dayPrice}}元/天</view>
|
<view class="vip3_button" @click="purchase(item.id)">购买</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
<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">
|
<video class="img100b" :src="info.leaseVideoUrl" enable-danmu danmu-btn controls></video>
|
</view>
|
<view style="width: 100%; height: calc(env(safe-area-inset-bottom) + 600rpx);" v-if="show5"></view>
|
<view style="width: 100%; height: calc(env(safe-area-inset-bottom) + 660rpx);" v-if="show6"></view>
|
<view style="width: 100%; height: calc(env(safe-area-inset-bottom) + 660rpx);" v-else-if="show2"></view>
|
<view style="width: 100%; height: calc(env(safe-area-inset-bottom) + 580rpx);" v-else-if="show1"></view>
|
<view style="width: 100%; height: calc(env(safe-area-inset-bottom) + 500rpx);" v-else-if="show3"></view>
|
<view class="index_zw1" v-else></view>
|
</view>
|
</view>
|
<view class="index_scancode">
|
<view class="index_scancode_top">
|
<view class="index_scancode_top_left">
|
<text>遵守交规,安全骑行</text>
|
<text>骑行时请遵守交通规则,安全骑行</text>
|
</view>
|
<image src="@/static/images/ic_safe@2x.png" mode="widthFix"></image>
|
</view>
|
<button class="index_scancode_bottom" open-type="getPhoneNumber" @getphonenumber="getPhone"
|
v-if="!userInfo.mobile">扫码租车</button>
|
<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 class="deposit_text">
|
<text>温馨提示</text>
|
<text>骑行需要缴纳{{(info.deposit / 100).toFixed(2)}}元自行车押金</text>
|
<text>(押金随时可退)</text>
|
</view>
|
<view class="deposit_read" @click="active = !active">
|
<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 @click.stop="jumpX">《租赁须知》</text>和<text @click.stop="jumpgz">《计价规则》</text>
|
</view>
|
</view>
|
<view class="deposit_footer">
|
<view class="deposit_footer_item" @click="show1 = false">返回</view>
|
<view class="deposit_footer_item c" @click="depositPayment">充值</view>
|
</view>
|
</view>
|
</u-popup>
|
<!-- 自行车-开锁 -->
|
<u-popup :show="show5" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10"
|
@close="show5 = false">
|
<view class="loading">
|
<view class="loading_box">
|
<view class="loading_box_top">
|
<image src="@/static/icon/ic_loading.png" mode="widthFix"></image>
|
<text>开锁中</text>
|
</view>
|
<view class="loading_box_info">请按照交规行驶</view>
|
</view>
|
<!-- <view class="loading_box_err" @click="toFaultReporting">
|
<image src="@/static/icon/ic_guzhang@2x.png" mode="widthFix"></image>
|
<text>车辆故障上报</text>
|
</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 class="ride_head">
|
<view class="ride_head_item option">
|
<text>骑行明细</text>
|
<image src="@/static/icon/ar_detail@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="ride_head_center">
|
<image src="@/static/icon/ic_riding@2x.png" mode="widthFix"></image>
|
<text>骑行中</text>
|
</view>
|
<view class="ride_head_item" @click="toRidingDetails()">
|
<text>骑行明细</text>
|
<image src="@/static/icon/ar_detail@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="ride_content" v-if="info.memberRidesResponse">
|
<view class="ride_content_a">
|
<text>开始时间:{{info.memberRidesResponse.rideStartTimeStr}}</text>
|
<text>本次已骑行:{{info.memberRidesResponse.rideTime}}分钟</text>
|
</view>
|
<view class="ride_content_b">
|
<text>车型:{{info.memberRidesResponse.bikeType}}(编号:{{info.memberRidesResponse.bikeCode}})</text>
|
<text>{{info.memberRidesResponse.priceRole}}</text>
|
</view>
|
<view class="ride_content_info">
|
<image src="@/static/icon/ic_tip@2x.png" mode="widthFix"></image>
|
<text v-if="info.tips">{{info.tips}}</text>
|
</view>
|
</view>
|
<view class="ride_btn" @click="navigationReturn">导航至园区站还车点</view>
|
<view class="ride_err" @click="toFaultReporting">
|
<image src="@/static/icon/ic_guzhang@2x.png" mode="widthFix"></image>
|
<text>车辆故障上报</text>
|
</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 class="ride_head">
|
<view class="ride_head_item option">
|
<text>骑行明细</text>
|
<image src="@/static/icon/ar_detail@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="ride_head_center">
|
<image src="@/static/icon/ic_riding@2x.png" mode="widthFix"></image>
|
<text>已还车</text>
|
</view>
|
<view class="ride_head_item" @click="toRidingDetails()">
|
<text>骑行明细</text>
|
<image src="@/static/icon/ar_detail@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="ride_content" v-if="info.memberRidesResponse">
|
<view class="ride_content_a">
|
<text>最后骑行:{{info.memberRidesResponse.rideStartTimeStr}}~{{info.memberRidesResponse.rideEndTimeStr}}({{info.memberRidesResponse.rideTime}}分钟)</text>
|
</view>
|
<view class="ride_content_b">
|
<text>车型:{{info.memberRidesResponse.bikeType}}(编号:{{info.memberRidesResponse.bikeCode}})</text>
|
<text>{{info.memberRidesResponse.priceRole}}</text>
|
</view>
|
<view class="ride_content_info">
|
<image src="@/static/icon/ic_tip@2x.png" mode="widthFix"></image>
|
<text v-if="info.tips">{{info.tips}}</text>
|
</view>
|
</view>
|
<view class="ride_btn" @click="carRental">扫码继续骑行</view>
|
<view class="ride_settlement" @click="settlement">
|
结束骑行,结算退押金
|
</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">
|
<view class="deposit_text">
|
<text>温馨提示</text>
|
<text class="red">结算后,如果继续骑行会重新开始计费</text>
|
<text class="red">确认结算么?</text>
|
</view>
|
<view class="deposit_footer">
|
<view class="deposit_footer_item" @click="minute">再等等</view>
|
<view class="deposit_footer_item c" @click="settlement1">立即结算</view>
|
</view>
|
</view>
|
</template>
|
</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" zIndex="99999" 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>
|
|
<!-- 电车 -->
|
<tram ref="d_tram" @unlockDoor="refresh" />
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from 'vuex'
|
import tram from '@/components/tram/tram.vue'
|
export default {
|
data() {
|
return {
|
disable: false,
|
|
top: 0,
|
|
title: '',
|
latitude: null,
|
longitude: null,
|
bgImg: require('@/static/images/bg_service@2x.png'),
|
|
show: false, // 广告
|
show1: false, // 缴纳押金
|
show2: false, // 骑行中
|
show3: false, // 确认结算
|
show4: false, // 提示
|
show5: false, // 开锁
|
show6: false, // 已还车
|
show7: false, // 确认结算弹框
|
|
active: false,
|
|
markers: [],
|
|
functionList: [{
|
id: 1,
|
name: '押金充值',
|
icon: require('@/static/images/home_ic_yajing@2x.png')
|
},
|
{
|
id: 2,
|
name: '结算退押金',
|
icon: require('@/static/images/home_ic_jiesuan@2x.png')
|
},
|
{
|
id: 3,
|
name: '计价规则',
|
icon: require('@/static/images/home_ic_guize@2x.png')
|
},
|
{
|
id: 4,
|
name: '消费明细',
|
icon: require('@/static/images/home_ic_mingxi@2x.png')
|
},
|
],
|
|
info: {},
|
content: '',
|
|
timer: null,
|
isDisabled: true,
|
|
tcList: [],
|
type: 1,
|
types: [
|
{ name: '自行车', id: 1 },
|
{ name: '电动车', id: 2 }
|
],
|
eleBusinessArea: [
|
{
|
points: [],
|
fillColor: "#0077FF12",
|
strokeColor: "#0077FF",
|
strokeWidth: 3,
|
zIndex: 7
|
}
|
],
|
onPullDownRefresh: false
|
}
|
},
|
components: { tram },
|
computed: {
|
...mapState(['navHeight', 'statusbarHeight', 'userInfo'])
|
},
|
async onLoad(options) {
|
if (JSON.stringify(this.userInfo) == '{}') {
|
await this.$onLaunched;
|
}
|
await this.getAddress()
|
await this.getHomeInfo()
|
await this.getSite()
|
// if (decodeURIComponent(options.scene) !== 'undefined') {
|
// console.log(decodeURIComponent(options.scene))
|
// this.carRentalCopy(decodeURIComponent(options.scene))
|
// }
|
},
|
onPullDownRefresh() {
|
this.onPullDownRefresh = true
|
this.refresh()
|
},
|
onShow() {
|
this.refresh()
|
},
|
onPageScroll(e) {
|
this.top = e.scrollTop
|
},
|
methods: {
|
clickcontrol(){
|
let mapObjs = uni.createMapContext('mapId', this)
|
mapObjs.moveToLocation({
|
complete: res => {
|
console.log('移动完成:', res)
|
}
|
})
|
},
|
async getEleBikeList() {
|
let res = await this.$u.api.eleBikeList({})
|
if (res.code === 200) {
|
this.markers = []
|
res.data.forEach((item, index) => {
|
this.markers.push({
|
id: index,
|
width: 40,
|
height: 40,
|
latitude: item.latitude,
|
longitude: item.longitude,
|
title: item.name,
|
iconPath: '/static/icon/ic_bike@2x.png'
|
})
|
})
|
this.clickcontrol()
|
}
|
},
|
clickType(id) {
|
this.type = id
|
if (id === 1) {
|
this.getSite()
|
} else {
|
this.getEleBikeList()
|
}
|
},
|
purchase(id) {
|
uni.navigateTo({
|
url: `/pages/packageDetails/packageDetails?id=${id}`
|
});
|
},
|
jumpTC() {
|
uni.navigateTo({
|
url: '/pages/setMenu/setMenu'
|
});
|
},
|
// 微信打开小程序开锁方法
|
async carRentalCopy(code) {
|
await this.refresh()
|
// 判断有没有交押金
|
if (this.info.depositStatus === 0) {
|
this.show1 = true
|
return;
|
} else if (this.info.depositStatus === 2) {
|
uni.showToast({ title: '结算申请提交成功,请耐心等待退款!', icon: 'none', duration: 2000 });
|
return;
|
}
|
var that = this;
|
if (!that.disable) {
|
that.disable = true
|
// 打开开锁弹框
|
that.show5 = true
|
// 调用开锁接口
|
let res = await that.$u.api.openLock({
|
code: code
|
})
|
if (res.code === 200) {
|
that.disable = false
|
that.show6 = false
|
that.show5 = true
|
// 循环次数
|
var num = 1
|
// 循环查看解锁结果
|
let timer = setInterval(async () => {
|
num += 1
|
let res1 = await that.$u.api.refreshLock({
|
id: res.data.id
|
})
|
// 开锁成功
|
if (res1.data.status === 1) {
|
that.refresh()
|
clearInterval(timer)
|
that.show5 = false
|
setTimeout(() => {
|
that.show2 = true
|
}, 500)
|
}
|
// 开锁失败
|
if (res1.data.status === 3) {
|
that.refresh()
|
clearInterval(timer)
|
that.show5 = false
|
uni.showToast({ title: '开锁失败', icon: 'error', duration: 2000 });
|
}
|
// 开锁超时
|
if (num === 180) {
|
that.refresh()
|
clearInterval(timer)
|
that.show5 = false
|
uni.showToast({ title: '开锁超时', icon: 'error', duration: 2000 });
|
}
|
}, 1000)
|
} else {
|
that.show5 = false
|
that.disable = false
|
}
|
}
|
},
|
jumpX() {
|
uni.navigateTo({
|
url: '/pages/leaseNotice/leaseNotice'
|
});
|
},
|
jumpMap() {
|
uni.navigateTo({
|
url: `/pages/maps/maps?type=${this.type}`
|
});
|
},
|
// 计价规则
|
jumpgz() {
|
uni.navigateTo({
|
url: '/pages/pricingRules/pricingRules'
|
});
|
},
|
getSite() {
|
this.$u.api.rentSiteList()
|
.then(res => {
|
if (res.code === 200) {
|
this.markers = []
|
res.data.forEach((item, index) => {
|
this.markers.push({
|
id: index,
|
width: 40,
|
height: 40,
|
latitude: item.latitude,
|
longitude: item.longitude,
|
title: item.name,
|
iconPath: '/static/icon/ic_bike@2x.png',
|
addr: item.addr
|
})
|
})
|
this.clickcontrol()
|
}
|
})
|
},
|
// 结算
|
settlement1() {
|
if (this.isDisabled) {
|
this.isDisabled = false
|
this.$u.api.goodsOrderSettlement({}).then(res => {
|
if (res.code === 200) {
|
this.show3 = false
|
this.show6 = false
|
this.show7 = false
|
uni.showToast({ title: '结算申请提交成功,请耐心等待退款!', icon: 'none', duration: 2000 });
|
// this.refresh()
|
}
|
}).finally(() => {
|
this.refresh()
|
this.show3 = false
|
this.isDisabled = true
|
})
|
}
|
},
|
minute() {
|
this.show3 = false
|
if (this.info.rideStatus != -1) {
|
this.show6 = true
|
}
|
},
|
settlement() {
|
if (this.info.depositStatus === 2) {
|
uni.showToast({ title: '结算申请提交成功,请耐心等待退款!', icon: 'none', duration: 2000 });
|
return
|
}
|
this.show6 = false
|
this.show3 = true
|
},
|
// 导航到还车点
|
navigationReturn() {
|
uni.navigateTo({
|
url: '/pages/maps/maps'
|
});
|
},
|
// 跳转
|
async jump(item) {
|
await this.refresh()
|
if (item.id === 3) {
|
uni.navigateTo({
|
url: '/pages/pricingRules/pricingRules'
|
});
|
} else if (item.id === 4) {
|
uni.navigateTo({
|
url: '/pages/consumptionDetails/consumptionDetails'
|
});
|
} else if (item.id === 2) {
|
if (!this.userInfo.mobile) return
|
if (this.info.rideStatus === 1) {
|
uni.showToast({ title: '骑行中不能结算押金', icon: 'none', duration: 2000 })
|
return
|
}
|
if (this.info.depositStatus === 1) {
|
this.show3 = true
|
} else if (this.info.depositStatus === 2) {
|
uni.showToast({ title: '结算申请提交成功,请耐心等待退款!', icon: 'none', duration: 2000 });
|
} else {
|
uni.showToast({ title: '您暂无押金,无需结算!', icon: 'none', duration: 2000 });
|
}
|
} else if (item.id === 1) {
|
if (!this.userInfo.mobile) return
|
if (this.info.depositStatus === 1) {
|
uni.showToast({ title: '押金已充值', icon: 'none', duration: 2000 });
|
return
|
} else if (this.info.depositStatus === 2) {
|
uni.showToast({ title: '结算申请提交成功,请耐心等待退款!', icon: 'none', duration: 2000 });
|
return
|
}
|
this.show1 = true
|
}
|
},
|
// 骑行明细
|
toRidingDetails() {
|
uni.navigateTo({
|
url: `/pages/ridingDetails/ridingDetails?id=${this.info.goodsOrderId}&price=${this.info.deposit / 100}`
|
});
|
},
|
// 跳转故障上报
|
toFaultReporting() {
|
uni.navigateTo({
|
url: `/pages/problemReporting/problemReporting?code=${this.info.memberRidesResponse.bikeCode}`
|
});
|
},
|
// 押金支付
|
depositPayment() {
|
var that = this;
|
if (this.active) {
|
if (!this.disable) {
|
that.disable = true
|
that.$u.api.createGoodsOrderPay()
|
.then(res => {
|
if (res.code === 200) {
|
wx.requestPayment({
|
timeStamp: res.data.timeStamp,
|
nonceStr: res.data.nonceStr,
|
package: res.data.packageVal,
|
signType: 'MD5',
|
paySign: res.data.paySign,
|
success (res) {
|
that.disable = false
|
if (res.errMsg = 'requestPayment:ok') {
|
that.show1 = false
|
that.info.depositStatus = 1
|
that.carRental()
|
that.refresh()
|
uni.showToast({ title: '充值成功', icon: 'success', duration: 2000 });
|
}
|
},
|
fail(err) {
|
that.disable = false
|
}
|
})
|
}
|
}).catch((err) => {
|
that.disable = false
|
console.log(err)
|
})
|
}
|
} else {
|
uni.showToast({
|
title: '请先勾选协议',
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
},
|
// 获取手机号
|
getPhone(e) {
|
var that = this;
|
if (e.detail.errMsg === 'getPhoneNumber:ok') {
|
uni.login({
|
provider: 'weixin',
|
success: function(loginRes) {
|
let {
|
code
|
} = loginRes;
|
that.$u.api.wxLogin({
|
code
|
})
|
.then(res => {
|
that.$u.api.wxPhone({
|
encryptedData: e.detail.encryptedData,
|
iv: e.detail.iv,
|
sessionKey: res.data.sessionKey
|
}).then(result => {
|
if (result.code === 200) {
|
that.$store.commit('setUserInfo', result.data
|
.userResponse)
|
}
|
})
|
})
|
}
|
});
|
}
|
},
|
// 扫码租车
|
async carRental() {
|
var that = this;
|
// 刷新首页信息
|
await this.refresh()
|
// 判断有没有交押金
|
if (this.info.depositStatus === 0) {
|
this.show1 = true
|
return;
|
} else if (this.info.depositStatus === 2) {
|
uni.showToast({ title: '结算申请提交成功,请耐心等待退款!', icon: 'none', duration: 2000 });
|
return;
|
}
|
// 自行车
|
if (this.type === 1) {
|
if (!that.disable) {
|
that.disable = true
|
// 扫码解锁骑行
|
uni.scanCode({
|
success: async function(result) {
|
let text = decodeURIComponent(result.path)
|
text = text.substring(text.lastIndexOf('?') + 7, text.length)
|
// 打开开锁弹框
|
that.show5 = true
|
// 调用开锁接口
|
let res = await that.$u.api.openLock({
|
code: text
|
})
|
if (res.code === 200) {
|
that.disable = false
|
that.show6 = false
|
that.show5 = true
|
// 循环次数
|
var num = 1
|
// 循环查看解锁结果
|
let timer = setInterval(async () => {
|
num += 1
|
let res1 = await that.$u.api.refreshLock({
|
id: res.data.id
|
})
|
// 开锁成功
|
if (res1.data.status === 1) {
|
that.refresh()
|
clearInterval(timer)
|
that.show5 = false
|
setTimeout(() => {
|
that.show2 = true
|
}, 500)
|
}
|
// 开锁失败
|
if (res1.data.status === 3) {
|
that.refresh()
|
clearInterval(timer)
|
that.show5 = false
|
uni.showToast({ title: '开锁失败', icon: 'error', duration: 2000 });
|
}
|
// 开锁超时
|
if (num === 180) {
|
that.refresh()
|
clearInterval(timer)
|
that.show5 = false
|
uni.showToast({ title: '开锁超时', icon: 'error', duration: 2000 });
|
}
|
}, 1000)
|
} else {
|
that.show5 = false
|
that.disable = false
|
}
|
},
|
fail() {
|
that.disable = false
|
}
|
});
|
}
|
} else {
|
uni.scanCode({
|
success: async function(result) {
|
let res = await that.$u.api.getBikeChargingRule({
|
code: result.result
|
})
|
if (res.code === 200) {
|
that.$refs.d_tram.info = res.data
|
that.$refs.d_tram.d_show1 = true
|
}
|
}
|
})
|
}
|
},
|
// 获取经纬度
|
getAddress() {
|
let that = this;
|
// 1、判断手机定位服务【GPS】 是否授权
|
uni.getSystemInfo({
|
success(res) {
|
let locationEnabled = res.locationEnabled; // 判断手机定位服务是否开启
|
let locationAuthorized = res.locationAuthorized; // 判断定位服务是否允许微信授权
|
if (locationEnabled == false || locationAuthorized == false) {
|
//手机定位服务(GPS)未授权
|
uni.showToast({ title: "请打开手机GPS", icon: "none" });
|
} else {
|
// 2、判断微信小程序是否授权位置信息
|
uni.authorize({
|
//授权请求窗口
|
scope: "scope.userLocation",
|
success: (res) => {
|
that.fnGetlocation();
|
},
|
fail: (err) => {
|
err = err["errMsg"];
|
uni.showModal({ content: "需要授权位置信息", confirmText: "确认授权" })
|
.then((res) => {
|
if (res.confirm) {
|
uni.openSetting({
|
success: (res) => {
|
if (res.authSetting["scope.userLocation"]) {
|
// 授权成功
|
uni.showToast({ title: "授权成功", icon: "none" });
|
that.fnGetlocation();
|
} else {
|
// 未授权
|
uni.showToast({ title: "授权失败,请重新授权", icon: "none" });
|
uni.showModal({
|
title: "授权",
|
content: "获取授权" + authouName + "失败,是否前往授权设置?",
|
success: function(result) {
|
if (result.confirm) {
|
uni.openSetting();
|
}
|
},
|
fail: function() {
|
uni.showToast({ title: "系统错误!", icon: "none" });
|
}
|
});
|
}
|
}
|
});
|
}
|
if (res.cancel) {
|
// 取消授权
|
uni.showToast({ title: "你拒绝了授权,无法获得周边信息", icon: "none" });
|
}
|
});
|
},
|
complete(res) {
|
if (res.errMsg == "authorize:ok") {
|
that.fnGetlocation();
|
} else {
|
uni.showModal({
|
title: "授权",
|
content: "获取授权" + authouName + "失败,是否前往授权设置?",
|
success: function(result) {
|
if (result.confirm) {
|
uni.openSetting();
|
}
|
},
|
fail: function() {
|
uni.showToast({ title: "系统错误!", icon: "none" });
|
},
|
});
|
}
|
},
|
});
|
}
|
},
|
});
|
},
|
// 定位获取
|
fnGetlocation() {
|
let that = this;
|
uni.getLocation({
|
type: "gcj02",
|
altitude: true,
|
isHighAccuracy: true,
|
success: function(res) {
|
that.latitude = res.latitude
|
that.longitude = res.longitude
|
},
|
fail(err) {
|
if (err.errMsg === "getLocation:fail 频繁调用会增加电量损耗,可考虑使用 wx.onLocationChange 监听地理位置变化") {
|
uni.showToast({ title: "请勿频繁定位", icon: "none" });
|
}
|
if (err.errMsg === "getLocation:fail auth deny") {
|
// 未授权
|
uni.showToast({ title: "无法定位,请重新获取位置信息", icon: "none" });
|
}
|
if (err.errMsg === "getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF") {
|
uni.showModal({ content: "请开启手机定位服务", showCancel: false });
|
}
|
},
|
});
|
},
|
// 刷新骑行状态
|
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
|
return
|
}
|
if (res.data.rideStatus === -1) {
|
this.show6 = false
|
}
|
clearInterval(this.timer)
|
}
|
}, 10000)
|
},
|
// 获取首页信息
|
getHomeInfo() {
|
var that = this
|
this.$u.api.home()
|
.then(async res => {
|
if (res.code === 200) {
|
this.info = res.data
|
// 是否弹出广告图
|
if (res.data.adList.length > 0 && !res.data.memberRidesResponse) {
|
this.show = true
|
}
|
// 自行车
|
if (res.data.memberRidesResponse && res.data.memberRidesResponse.ridesType === 0) {
|
this.type = 1
|
// 解锁中
|
if (res.data.rideStatus === 0) {
|
this.show5 = true
|
// 循环次数
|
var num = 1
|
// 循环查看解锁结果
|
let timer = setInterval(async () => {
|
num += 1
|
let res1 = await this.$u.api.refreshLock({
|
id: res.data.memberRidesResponse.rideId
|
})
|
// 开锁成功
|
if (res1.data.status === 1) {
|
clearInterval(timer)
|
this.show5 = false
|
setTimeout(() => {
|
this.show2 = true
|
}, 500)
|
}
|
// 开锁失败
|
if (res1.data.status === 3) {
|
clearInterval(timer)
|
this.show5 = false
|
uni.showToast({ title: '开锁失败', icon: 'error', duration: 2000 });
|
}
|
// 开锁超时
|
if (num === 180) {
|
clearInterval(timer)
|
this.show5 = false
|
uni.showToast({ title: '开锁超时', icon: 'error', duration: 2000 });
|
}
|
}, 1000)
|
}
|
// 骑行中
|
if (res.data.rideStatus === 1) {
|
this.show2 = true
|
this.refreshStatus()
|
}
|
if (res.data.rideStatus === 5) {
|
this.show5 = true
|
}
|
if (res.data.rideStatus === 2) {
|
this.show6 = true
|
this.refreshStatus()
|
}
|
} else if (res.data.memberRidesResponse && res.data.memberRidesResponse.ridesType === 1) {
|
this.type = 2
|
that.$refs.d_tram.info = {
|
...res.data.memberRidesResponse.discountMember,
|
...res.data.memberRidesResponse,
|
deposit: res.data.deposit,
|
goodsOrderId: res.data.goodsOrderId
|
}
|
// 骑行中
|
if (res.data.rideStatus === 1) {
|
that.$refs.d_tram.d_show3 = true
|
}
|
// 临时锁车
|
if (res.data.rideStatus === 4) {
|
that.$refs.d_tram.d_show4 = true
|
}
|
}
|
// 是否营业
|
if (res.data.isBusiness === 0) {
|
this.title = '暂停营业提醒'
|
this.content = res.data.unBusinessTips
|
this.show4 = true
|
return
|
}
|
// 是否停止服务
|
if (res.data.isStopServe === 1) {
|
this.title = '暂停服务提醒'
|
this.content = res.data.stopServeTips
|
this.show4 = true
|
}
|
this.tcList = res.data.discountList
|
let arr = JSON.parse(res.data.eleBusinessArea)
|
this.eleBusinessArea[0].points = arr.map(item => {
|
return {
|
latitude: item.lat,
|
longitude: item.lng
|
}
|
})
|
}
|
})
|
},
|
// 刷新首页信息
|
refresh() {
|
this.$u.api.home()
|
.then(res => {
|
uni.stopPullDownRefresh()
|
if (res.code === 200) {
|
this.info = res.data
|
// 未查到骑行订单
|
if (!res.data.memberRidesResponse && this.onPullDownRefresh) {
|
this.show1 = false
|
this.show2 = false
|
this.show3 = false
|
this.show4 = false
|
this.show5 = false
|
this.show6 = false
|
this.show7 = false
|
|
that.$refs.d_tram.d_show = false
|
that.$refs.d_tram.d_show1 = false
|
that.$refs.d_tram.d_show2 = false
|
that.$refs.d_tram.d_show3 = false
|
that.$refs.d_tram.d_show4 = false
|
that.$refs.d_tram.d_show5 = false
|
that.$refs.d_tram.d_show6 = false
|
that.$refs.d_tram.d_show7 = false
|
that.$refs.d_tram.d_show8 = false
|
that.$refs.d_tram.d_show9 = false
|
this.onPullDownRefresh = false
|
return
|
}
|
// 自行车
|
if (res.data.memberRidesResponse.ridesType === 0) {
|
// 解锁中
|
if (res.data.rideStatus === 0) {
|
this.show5 = true
|
// 循环次数
|
var num = 1
|
// 循环查看解锁结果
|
let timer = setInterval(async () => {
|
num += 1
|
let res1 = await this.$u.api.refreshLock({
|
id: res.data.memberRidesResponse.rideId
|
})
|
// 开锁成功
|
if (res1.data.status === 1) {
|
clearInterval(timer)
|
this.show5 = false
|
setTimeout(() => {
|
this.show2 = true
|
}, 500)
|
}
|
// 开锁失败
|
if (res1.data.status === 3) {
|
clearInterval(timer)
|
this.show5 = false
|
uni.showToast({ title: '开锁失败', icon: 'error', duration: 2000 });
|
}
|
// 开锁超时
|
if (num === 180) {
|
clearInterval(timer)
|
this.show5 = false
|
uni.showToast({ title: '开锁超时', icon: 'error', duration: 2000 });
|
}
|
}, 1000)
|
}
|
if (res.data.rideStatus === 1) {
|
this.show2 = true
|
this.refreshStatus()
|
}
|
if (res.data.rideStatus === 5) {
|
this.show5 = true
|
}
|
if (res.data.rideStatus === 2) {
|
this.show6 = true
|
}
|
} else if (res.data.memberRidesResponse.ridesType === 1) {
|
this.type = 2
|
this.$refs.d_tram.info = {
|
...res.data.memberRidesResponse.discountMember,
|
...res.data.memberRidesResponse,
|
deposit: res.data.deposit,
|
goodsOrderId: res.data.goodsOrderId
|
}
|
// 骑行中
|
if (res.data.rideStatus === 1) {
|
this.$refs.d_tram.d_show3 = true
|
}
|
// 临时锁车
|
if (res.data.rideStatus === 4) {
|
this.$refs.d_tram.d_show4 = true
|
}
|
}
|
}
|
})
|
},
|
// 拨打电话
|
calling(mobile) {
|
uni.makePhoneCall({
|
phoneNumber: mobile
|
});
|
}
|
},
|
destroyed() {
|
clearInterval(this.timer)
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #F7F7F7;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.index {
|
width: 100%;
|
height: auto;
|
|
.index_nav {
|
width: 100%;
|
height: auto;
|
background: repeating-linear-gradient(to bottom, #9AE2DF, #ffffff);
|
|
.index_nav_box {
|
width: 100%;
|
height: auto;
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 999;
|
|
.index_nav_b {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
position: fixed;
|
z-index: 9;
|
|
text {
|
font-size: 38rpx;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #222222;
|
}
|
}
|
|
}
|
|
.index_box {
|
width: 100%;
|
margin-top: 20rpx;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
|
.index_box_map {
|
width: 100%;
|
height: 360rpx;
|
background: #FFFFFF;
|
border-radius: 20rpx;
|
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%;
|
border-radius: 20rpx;
|
}
|
|
.index_box_icon {
|
position: absolute;
|
width: 80rpx;
|
height: 80rpx;
|
right: 10rpx;
|
bottom: 20rpx;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
}
|
|
.index_box_title {
|
width: 100%;
|
padding: 20rpx 30rpx;
|
box-sizing: border-box;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
position: relative;
|
top: -16rpx;
|
// filter: blur(3px);
|
// -webkit-filter: blur(3px);
|
background: linear-gradient(270deg, #C5FAF7 0%, rgba(10,201,192,0.63) 65%, rgba(214,251,249,0.81) 100%);
|
box-shadow: inset 0rpx 1rpx 0rpx 0rpx #E3FFFE;
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
backdrop-filter: blur(3px);
|
|
.index_box_title_left {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
text {
|
&:first-child {
|
font-size: 32rpx;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #303030;
|
}
|
|
&:last-child {
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #00958E;
|
margin-top: 10rpx;
|
}
|
}
|
}
|
|
image {
|
flex-shrink: 0;
|
width: 92rpx;
|
height: 92rpx;
|
}
|
}
|
|
.index_box_function {
|
width: 100%;
|
padding: 24rpx 44rpx;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
border-radius: 20rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
position: relative;
|
top: -24rpx;
|
text {
|
font-weight: 400;
|
}
|
.cXYC {
|
position: relative;
|
button {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
background-color: rgba(0,0,0,0);
|
border: none;
|
opacity: 0;
|
}
|
}
|
}
|
|
.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;
|
.vip1_left {
|
flex: 1;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #303030;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.vip1_right {
|
flex-shrink: 0;
|
margin-left: 30rpx;
|
font-weight: 400;
|
font-size: 40rpx;
|
color: #FF5A31;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
&: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 {
|
flex: 1;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
}
|
u {
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999999;
|
text-decoration: line-through;
|
}
|
}
|
.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%;
|
height: 182rpx;
|
}
|
|
.index_box_video {
|
width: 100%;
|
height: 346rpx;
|
background: rgba(0, 0, 0, 0.08);
|
border-radius: 20rpx;
|
overflow: hidden;
|
margin-top: 20rpx;
|
}
|
|
.index_zw1 {
|
width: 100%;
|
height: calc(env(safe-area-inset-bottom) + 310rpx);
|
}
|
|
.index_zw {
|
width: 100%;
|
// height: 336rpx;
|
height: 680rpx;
|
}
|
}
|
}
|
|
.index_scancode {
|
width: 100%;
|
height: 306rpx;
|
background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 58%, #D0FFFD 100%);
|
box-shadow: 0rpx -6rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
padding: 30rpx 20rpx;
|
box-sizing: border-box;
|
|
.index_scancode_top {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
|
.index_scancode_top_left {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
|
text {
|
&:first-child {
|
font-size: 30rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #222222;
|
}
|
|
&:last-child {
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
margin-top: 10rpx;
|
}
|
}
|
}
|
|
image {
|
width: 74rpx;
|
height: 84rpx;
|
flex-shrink: 0;
|
}
|
}
|
|
.index_scancode_bottom {
|
width: 100%;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
background: #01B6AD;
|
box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(1, 182, 173, 0.24);
|
border-radius: 46rpx;
|
font-size: 32rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #FFFFFF;
|
margin-top: 30rpx;
|
}
|
}
|
|
.popupbox {
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
|
.advertisement {
|
width: 606rpx;
|
height: 1000rpx;
|
border-radius: 20rpx;
|
background-color: #FFFFFF;
|
overflow: hidden;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.close {
|
width: 60rpx;
|
height: 60rpx;
|
margin-top: 40rpx;
|
}
|
}
|
|
.deposit1 {
|
width: 100%;
|
min-height: 470rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding: 40rpx 20rpx;
|
box-sizing: border-box;
|
background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 58%, #D0FFFD 100%);
|
box-shadow: 0rpx -6rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
.deposit_text {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.red {
|
color: #FC2525 !important;
|
font-size: 30rpx !important;
|
}
|
|
text {
|
&:nth-child(1) {
|
font-size: 32rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #222222;
|
}
|
|
&:nth-child(2) {
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
margin-top: 40rpx;
|
}
|
|
&:nth-child(3) {
|
font-size: 26rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #01B6AD;
|
margin-top: 20rpx;
|
}
|
}
|
}
|
|
.deposit_footer {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 30rpx;
|
|
.c {
|
background-color: #01B6AD !important;
|
color: #ffffff !important;
|
}
|
|
.deposit_footer_item {
|
flex: 1;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
border-radius: 46rpx;
|
border: 1rpx solid #01B6AD;
|
font-size: 32rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #01B6AD;
|
|
&:first-child {
|
margin-right: 22rpx;
|
}
|
}
|
}
|
}
|
|
.deposit {
|
width: 100%;
|
min-height: 552rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
padding: 40rpx 20rpx;
|
box-sizing: border-box;
|
background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 58%, #D0FFFD 100%);
|
box-shadow: 0rpx -6rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
.deposit_text {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.red {
|
color: #FC2525 !important;
|
}
|
|
text {
|
&:nth-child(1) {
|
font-size: 32rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #222222;
|
}
|
|
&:nth-child(2) {
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
margin-top: 40rpx;
|
}
|
|
&:nth-child(3) {
|
font-size: 26rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #01B6AD;
|
margin-top: 20rpx;
|
}
|
}
|
}
|
|
.deposit_read {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-top: 100rpx;
|
|
image {
|
width: 32rpx;
|
height: 32rpx;
|
margin-right: 14rpx;
|
}
|
|
.deposit_read_z {
|
display: flex;
|
align-items: center;
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #757A81;
|
|
text {
|
color: #01B6AD !important;
|
}
|
}
|
}
|
|
.deposit_footer {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 30rpx;
|
|
.c {
|
background-color: #01B6AD !important;
|
color: #ffffff !important;
|
}
|
|
.deposit_footer_item {
|
flex: 1;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
border-radius: 46rpx;
|
border: 1rpx solid #01B6AD;
|
font-size: 32rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #01B6AD;
|
|
&:first-child {
|
margin-right: 22rpx;
|
}
|
}
|
}
|
}
|
|
.loading {
|
width: 100%;
|
min-height: 552rpx;
|
background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 58%, #D0FFFD 100%);
|
box-shadow: 0rpx -6rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
|
.loading_box {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.loading_box_top {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
image {
|
width: 40rpx;
|
height: 40rpx;
|
margin-right: 20rpx;
|
animation: rotation 3s linear infinite;
|
}
|
|
text {
|
font-size: 40rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #222222;
|
}
|
|
@keyframes rotation {
|
0% {
|
transform: rotate(0deg);
|
}
|
|
100% {
|
transform: rotate(360deg);
|
}
|
}
|
}
|
|
.loading_box_info {
|
width: 100%;
|
text-align: center;
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
margin-top: 24rpx;
|
}
|
}
|
|
.loading_box_err {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: absolute;
|
bottom: 30rpx;
|
left: 0;
|
right: 0;
|
|
image {
|
width: 30rpx;
|
height: 30rpx;
|
margin-right: 10rpx;
|
}
|
|
text {
|
font-size: 26rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
}
|
|
.ride {
|
width: 100%;
|
padding: 40rpx 20rpx;
|
box-sizing: border-box;
|
background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 58%, #D0FFFD 100%);
|
box-shadow: 0rpx -6rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
.ride_head {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.ride_head_center {
|
display: flex;
|
align-items: center;
|
|
image {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 16rpx;
|
}
|
|
text {
|
font-size: 32rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #222222;
|
}
|
}
|
|
.option {
|
opacity: 0;
|
}
|
|
.ride_head_item {
|
display: flex;
|
align-items: center;
|
|
image {
|
width: 14rpx;
|
height: 24rpx;
|
margin-left: 6rpx;
|
}
|
|
text {
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
}
|
}
|
}
|
|
.ride_content {
|
width: 100%;
|
margin-top: 40rpx;
|
|
.ride_content_a {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
text {
|
font-size: 30rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
}
|
}
|
|
.ride_content_b {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-top: 30rpx;
|
|
text {
|
font-size: 26rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
|
&:first-child {
|
margin-bottom: 20rpx;
|
}
|
}
|
}
|
|
.ride_content_info {
|
width: 100%;
|
margin-top: 40rpx;
|
display: flex;
|
align-items: flex-start;
|
|
image {
|
width: 24rpx;
|
height: 24rpx;
|
flex-shrink: 0;
|
margin-right: 6rpx;
|
margin-top: 6rpx;
|
}
|
|
text {
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #01B6AD;
|
}
|
}
|
}
|
|
.ride_btn {
|
width: 100%;
|
height: 96rpx;
|
line-height: 96rpx;
|
text-align: center;
|
background: #01B6AD;
|
border-radius: 46rpx;
|
font-size: 32rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #FFFFFF;
|
margin-top: 40rpx;
|
}
|
|
.ride_settlement {
|
width: 100%;
|
text-align: center;
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
margin-top: 30rpx;
|
}
|
|
.ride_err {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 20rpx;
|
|
image {
|
width: 30rpx;
|
height: 30rpx;
|
margin-right: 10rpx;
|
}
|
|
text {
|
font-size: 26rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
}
|
}
|
</style>
|