<template>
|
<view class="box">
|
<!-- 有骑行中的订单 -->
|
<u-popup :show="d_show" :overlay="false" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10" @close="d_show = 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">取消</view>
|
<view class="deposit_footer_item c">结算还车</view>
|
</view>
|
</view>
|
</template>
|
</u-popup>
|
<!-- 扫码租车 -->
|
<u-popup :show="d_show1" :overlay="false" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10" @close="d_show1 = false">
|
<template>
|
<view class="info">
|
<view class="info_title">
|
<image src="@/static/icon/ic_riding@2x.png" mode="widthFix"></image>
|
<text>扫码租车</text>
|
</view>
|
<view class="info_des">
|
<view class="dianliang">
|
<view class="dianloiang_img">
|
<view :style="{ width: info.voltageStatus === 0 ? '80%' : '20%' }" :class="info.voltageStatus === 0 ? 'dianloiang_img_x success' : 'dianloiang_img_x error'"></view>
|
<image src="@/static/icon/ic_dianliang@2x.png" mode="widthFix"></image>
|
</view>
|
<text>{{info.voltageStatus === 0 ? '电量充足' : '电量低'}}</text>
|
</view>
|
<!-- 有套餐显示 -->
|
<view class="info_des_tc" v-if="info && info.discountMember">
|
<u-icon name="info-circle" color="#FF5A31" size="18"></u-icon>
|
<text v-if="info.discountMember.limitType === 0">您有骑行套餐,本次行程免费骑行</text>
|
<text v-if="info.discountMember.limitType === 1">您已购买骑行套餐,本次行程免费骑行{{convertMinutesToHours(info.discountMember.surplusTime)}}~</text>
|
</view>
|
<view class="info_des_list">
|
<text>车型:{{info.bikeType}}(编号:{{info.bikeCode}})</text>
|
<text>{{info.priceRole}}</text>
|
</view>
|
</view>
|
<!-- 有点 -->
|
<view class="info_button success" v-if="info.voltageStatus === 0" @click="unlock">确认开锁</view>
|
<!-- 电量低 -->
|
<view class="info_button error" v-if="info.voltageStatus === 1">电量低,请更换其它车辆</view>
|
</view>
|
</template>
|
</u-popup>
|
<!-- 开锁中 -->
|
<u-popup :show="d_show2" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10" @close="d_show2 = 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="d_show3" :overlay="false" overlayOpacity="0" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10" @close="d_show3 = 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">
|
<view class="dianliang">
|
<view class="dianliang_left">
|
<view class="dianloiang_img">
|
<view :style="{ width: info.voltageStatus === 0 ? '80%' : '20%' }" :class="info.voltageStatus === 0 ? 'dianloiang_img_x success' : 'dianloiang_img_x error'"></view>
|
<image src="@/static/icon/ic_dianliang@2x.png" mode="widthFix"></image>
|
</view>
|
<text>{{info.voltageStatus === 0 ? '电量充足' : '电量低'}}</text>
|
</view>
|
</view>
|
<!-- 有套餐显示 -->
|
<view class="info_des_tc" v-if="info.discountMember">
|
<u-icon name="info-circle" color="#FF5A31" size="18"></u-icon>
|
<text v-if="info.discountMember.limitType === 0">您有骑行套餐,本次行程免费骑行</text>
|
<text v-if="info.discountMember.limitType === 1">您已购买骑行套餐,本次行程免费骑行{{convertMinutesToHours(info.discountMember.surplusTime)}}~</text>
|
</view>
|
<view class="ride_content_a">
|
<text>开始时间:{{info.rideStartTimeStr ? info.rideStartTimeStr : this.getCurrentTime()}}</text>
|
<text>本次已骑行:{{info.rideTime ? info.rideTime : '1'}}分钟</text>
|
</view>
|
<view class="ride_content_b">
|
<text>车型:{{info.bikeType}}(编号:{{info.bikeCode}})</text>
|
<text>{{info.priceRole}}</text>
|
</view>
|
<view class="ride_content_info">
|
<image src="@/static/icon/ic_tip@2x.png" mode="widthFix"></image>
|
<text>支持中途临时停车,停车后持续计费</text>
|
</view>
|
</view>
|
<view class="ride_list">
|
<view class="ride_list_item" @click="temporary">
|
<image src="@/static/icon/ic_lock_close@2x.png" mode="widthFix"></image>
|
<text>临时锁车</text>
|
</view>
|
<view class="ride_list_item" @click="navigationReturn">
|
<image src="@/static/icon/ic_daohang@2x.png" mode="widthFix"></image>
|
<text>导航至站点</text>
|
</view>
|
</view>
|
<view class="ride_btn" @click="openReturnCar">站点还车</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="d_show5" :overlay="false" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10" @close="d_show5 = false">
|
<template>
|
<view class="deposit1">
|
<view class="deposit_text">
|
<text>临时锁车将持续计费</text>
|
<text class="red">最长可锁车<text style="color: #FC2525;">120分钟</text></text>
|
<text class="red">超时系统将自动关锁还车</text>
|
</view>
|
<view class="deposit_footer">
|
<view class="deposit_footer_item" @click="quxiaoLSSC">取消</view>
|
<view class="deposit_footer_item c" @click="linshisuoche">确认锁车</view>
|
</view>
|
</view>
|
</template>
|
</u-popup>
|
<!-- 临时锁车,持续计费中 -->
|
<u-popup :show="d_show4" :overlay="false" overlayOpacity="0" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10" @close="d_show4 = false">
|
<view class="ls">
|
<view class="ls_head">
|
<view class="ls_head_left">
|
<image src="@/static/icon/ic_park@2x.png" mode="widthFix"></image>
|
<text>临时锁车,持续计费中</text>
|
</view>
|
</view>
|
<view class="ls_content">
|
<view class="ride_content">
|
<view class="dianliang">
|
<view class="dianliang_left">
|
<view class="dianloiang_img">
|
<view :style="{ width: info.voltageStatus === 0 ? '80%' : '20%' }" :class="info.voltageStatus === 0 ? 'dianloiang_img_x success' : 'dianloiang_img_x error'"></view>
|
<image src="@/static/icon/ic_dianliang@2x.png" mode="widthFix"></image>
|
</view>
|
<text>{{info.voltageStatus === 0 ? '电量充足' : '电量低'}}</text>
|
</view>
|
<view class="dianliang_right" @click="toRidingDetails">
|
<text>骑行明细</text>
|
<image src="@/static/icon/ar_detail@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<!-- 有套餐显示 -->
|
<view class="info_des_tc" v-if="info.discountMember">
|
<u-icon name="info-circle" color="#FF5A31" size="18"></u-icon>
|
<text v-if="info.discountMember.limitType === 0">您有骑行套餐,本次行程免费骑行</text>
|
<text v-if="info.discountMember.limitType === 1">您已购买骑行套餐,本次行程免费骑行{{convertMinutesToHours(info.discountMember.surplusTime)}}~</text>
|
</view>
|
<view class="ride_content_a">
|
<text>开始时间:{{info.rideStartTimeStr ? info.rideStartTimeStr : this.getCurrentTime()}}</text>
|
<text>本次已骑行:{{info.rideTime ? info.rideTime : '1'}}分钟</text>
|
</view>
|
<view class="ride_content_b">
|
<text>车型:{{info.bikeType}}(编号:{{info.bikeCode}})</text>
|
<text>{{info.priceRole}}</text>
|
</view>
|
<view class="ride_content_info">
|
<image src="@/static/icon/ic_tip@2x.png" mode="widthFix"></image>
|
<text>支持中途临时停车,停车后持续计费</text>
|
</view>
|
</view>
|
<view class="ride_btns">
|
<view class="ride_btns_item blue" @click="ltks">
|
<image src="@/static/icon/ic_lock_open@2x.png" mode="widthFix"></image>
|
<text>开锁,继续骑行</text>
|
</view>
|
<view style="width: 20rpx; height: 100%;"></view>
|
<view class="ride_btns_item white" @click="navigationReturn">
|
<text>导航至站点</text>
|
</view>
|
</view>
|
<view class="ride_err" @click="toFaultReporting">
|
<image src="@/static/icon/ic_guzhang@2x.png" mode="widthFix"></image>
|
<text>车辆故障上报</text>
|
</view>
|
</view>
|
</view>
|
</u-popup>
|
<!-- 还车 -->
|
<u-popup :show="d_show6" :overlay="false" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10" @close="d_show6 = 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="quxiaohuanche">取消</view>
|
<view class="deposit_footer_item c" @click="returnCar">确认还车</view>
|
</view>
|
</view>
|
</template>
|
</u-popup>
|
<!-- 锁车中 -->
|
<u-popup :show="d_show7" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10" @close="d_show7 = 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="d_show8" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10" @close="d_show8 = 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="d_show9" :closeOnClickOverlay="false" mode="bottom" bgColor="#fff" :round="10" @close="d_show9 = false">
|
<view class="huan">
|
<view class="huan_icon">
|
<image src="@/static/icon/ic_fail@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="huan_info">还车失败</view>
|
<view class="huan_warning">系统检测车辆不在停车点,无法还车</view>
|
<view class="huan_btns">
|
<view class="huan_btns_item a" @click="navigationReturn">
|
<image src="@/static/icon/ic_da1ohang@2x.png" mode="widthFix"></image>
|
<text>导航至站点</text>
|
</view>
|
<view style="width: 20rpx; height: 100%;"></view>
|
<view class="huan_btns_item b" @click="returnCar">
|
<text>站点还车</text>
|
</view>
|
</view>
|
<view class="huan_footer" @click="toFaultReporting">
|
<image src="@/static/icon/ic_guzhang@2x.png" mode="widthFix"></image>
|
<text>车辆故障上报</text>
|
</view>
|
</view>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name:"tram",
|
data() {
|
return {
|
info: null,
|
d_show: false,
|
d_show1: false,
|
d_show2: false,
|
d_show3: false,
|
d_show4: false,
|
d_show5: false,
|
d_show6: false,
|
d_show7: false,
|
d_show8: false,
|
d_show9: false
|
};
|
},
|
methods: {
|
// 确认开锁
|
async unlock() {
|
this.d_show1 = false
|
this.d_show2 = true
|
let res = await this.$u.api.openElecBike({ code: this.info.bikeCode })
|
// 开锁成功
|
if (res.code === 200) {
|
this.d_show2 = false
|
this.d_show3 = true
|
this.$emit('unlockDoor')
|
} else {
|
this.d_show2 = false
|
this.d_show1 = true
|
}
|
},
|
getCurrentTime() {
|
const now = new Date(); // 获取当前时间
|
const hours = now.getHours(); // 获取小时
|
const minutes = now.getMinutes(); // 获取分钟
|
return `${hours}:${minutes}`;
|
},
|
// 打开还车弹窗
|
openReturnCar() {
|
this.d_show3 = false
|
this.d_show6 = true
|
},
|
// 取消还车
|
quxiaohuanche() {
|
this.d_show6 = false
|
this.d_show3 = true
|
},
|
// 分钟转换
|
convertMinutesToHours(minutes) {
|
const hours = Math.floor(minutes / 60); // 计算小时数
|
const remainingMinutes = minutes % 60; // 计算剩余的分钟数
|
if (hours > 0 && remainingMinutes > 0) {
|
return `${hours}小时${remainingMinutes}分钟`;
|
} else if (hours == 0) {
|
return `${remainingMinutes}分钟`;
|
} else if (remainingMinutes == 0) {
|
return `${hours}小时`;
|
}
|
},
|
// 还车
|
async returnCar() {
|
this.d_show6 = false
|
this.d_show7 = true
|
let res = await this.$u.api.backElecBike({})
|
if (res.code === 200) {
|
this.d_show7 = false
|
} else {
|
this.d_show7 = false
|
this.d_show6 = true
|
}
|
},
|
// 取消临时锁车
|
quxiaoLSSC() {
|
this.d_show5 = false
|
this.d_show3 = true
|
},
|
// 打开临时锁车弹窗
|
temporary() {
|
this.d_show3 = false
|
this.d_show5 = true
|
},
|
// 临时锁车
|
linshisuoche() {
|
var that = this
|
that.d_show5 = false
|
that.d_show7 = true
|
uni.requestSubscribeMessage({
|
tmplIds: ['S-iQ8gRTL_0jvIfJ1GnmNPXyThrIRtiMFrraoCiy3sk'],
|
async complete () {
|
let res = await that.$u.api.pauseElecBike({})
|
if (res.code === 200) {
|
that.d_show7 = false
|
that.d_show4 = true
|
} else {
|
that.d_show7 = false
|
that.d_show5 = true
|
}
|
}
|
})
|
},
|
// 临停开锁
|
async ltks() {
|
this.d_show4 = false
|
this.d_show2 = true
|
let res = await this.$u.api.pauseOpenElecBike({})
|
if (res.code === 200) {
|
this.d_show2 = false
|
this.d_show3 = true
|
} else {
|
this.d_show2 = false
|
this.d_show4 = true
|
}
|
},
|
// 骑行明细
|
toRidingDetails() {
|
uni.navigateTo({
|
url: `/pages/ridingDetails/ridingDetails?id=${this.info.goodsOrderId}&price=${this.info.deposit / 100}`
|
});
|
},
|
// 导航到还车点
|
navigationReturn() {
|
uni.navigateTo({
|
url: '/pages/maps/maps'
|
});
|
},
|
// 跳转故障上报
|
toFaultReporting() {
|
uni.navigateTo({
|
url: `/pages/problemReporting/problemReporting?code=${this.info.bikeCode}`
|
});
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.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: #333333 !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;
|
}
|
}
|
}
|
}
|
.info {
|
width: 100%;
|
padding: 40rpx;
|
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;
|
.info_title {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
image {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 16rpx;
|
}
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
}
|
.info_des {
|
width: 100%;
|
margin-top: 40rpx;
|
.dianliang {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 30rpx;
|
.dianloiang_img {
|
width: 66rpx;
|
height: 36rpx;
|
position: relative;
|
.success {
|
background: #01B6AD;
|
}
|
.error {
|
background: #FF5A31;
|
}
|
.dianloiang_img_x {
|
width: calc(50% - 10rpx);
|
height: 32rpx;
|
border-radius: 8rpx;
|
position: absolute;
|
top: 2rpx;
|
left: 2rpx;
|
}
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
margin-left: 20rpx;
|
}
|
}
|
.info_des_tc {
|
width: 100%;
|
height: 60rpx;
|
line-height: 60rpx;
|
background: #F4EFEA;
|
border-radius: 16rpx;
|
margin-bottom: 36rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #FF5A31;
|
margin-left: 10rpx;
|
}
|
}
|
.info_des_list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0;
|
}
|
}
|
}
|
}
|
.info_button {
|
width: 100%;
|
height: 96rpx;
|
text-align: center;
|
line-height: 96rpx;
|
border-radius: 46rpx;
|
font-weight: 500;
|
font-size: 32rpx;
|
margin-top: 226rpx;
|
}
|
.success {
|
background: #01B6AD;
|
color: #FFFFFF;
|
}
|
.error {
|
background: rgba(1,182,173,0.14);
|
color: #999999;
|
}
|
}
|
.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;
|
|
.dianliang {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 30rpx;
|
.dianliang_left {
|
display: flex;
|
align-items: center;
|
.dianloiang_img {
|
width: 66rpx;
|
height: 36rpx;
|
position: relative;
|
.dianloiang_img_x {
|
width: calc(50% - 10rpx);
|
height: 32rpx;
|
border-radius: 8rpx;
|
position: absolute;
|
top: 2rpx;
|
left: 2rpx;
|
}
|
.success {
|
background: #01B6AD;
|
}
|
.error {
|
background: #FF5A31;
|
}
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
margin-left: 20rpx;
|
}
|
}
|
.dianliang_right {
|
display: flex;
|
align-items: center;
|
text {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #666666;
|
margin-right: 8rpx;
|
}
|
image {
|
width: 10rpx;
|
height: 20rpx;
|
}
|
}
|
}
|
.info_des_tc {
|
width: 100%;
|
height: 60rpx;
|
line-height: 60rpx;
|
background: #F4EFEA;
|
border-radius: 16rpx;
|
margin-bottom: 36rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #FF5A31;
|
margin-left: 10rpx;
|
}
|
}
|
|
.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_btns {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-top: 40rpx;
|
.blue {
|
background: #01B6AD;
|
text {
|
color: #FFFFFF;
|
}
|
}
|
.white {
|
background: #ffffff;
|
border: 2rpx solid #01B6AD;
|
text {
|
color: #01B6AD;
|
}
|
}
|
.ride_btns_item {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
border-radius: 46rpx;
|
image {
|
width: 32rpx;
|
height: 32rpx;
|
margin-right: 12rpx;
|
}
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
}
|
}
|
}
|
|
.ride_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-top: 40rpx;
|
.ride_list_item {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: #FFFFFF;
|
image {
|
width: 32rpx;
|
height: 32rpx;
|
margin-right: 12rpx;
|
}
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #333333;
|
}
|
}
|
}
|
|
.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: 20rpx;
|
}
|
|
.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;
|
}
|
}
|
}
|
.ls {
|
width: 100%;
|
box-shadow: 0rpx -6rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
.ls_head {
|
width: 100%;
|
height: 100rpx;
|
padding: 0 40rpx;
|
box-sizing: border-box;
|
background: #FFFFE2;
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.ls_head_left {
|
display: flex;
|
align-items: center;
|
image {
|
width: 40rpx;
|
height: 60rpx;
|
margin-right: 20rpx;
|
}
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
}
|
}
|
.ls_content {
|
padding: 20rpx 40rpx;
|
box-sizing: border-box;
|
background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 58%, #D0FFFD 100%);
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
.ride_content {
|
width: 100%;
|
margin-top: 40rpx;
|
|
.dianliang {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 30rpx;
|
.dianliang_left {
|
display: flex;
|
align-items: center;
|
.dianloiang_img {
|
width: 66rpx;
|
height: 36rpx;
|
position: relative;
|
.dianloiang_img_x {
|
height: 32rpx;
|
border-radius: 8rpx;
|
position: absolute;
|
top: 2rpx;
|
left: 2rpx;
|
}
|
.success {
|
background: #01B6AD;
|
}
|
.error {
|
background: #FF5A31;
|
}
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
margin-left: 20rpx;
|
}
|
}
|
.dianliang_right {
|
display: flex;
|
align-items: center;
|
text {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #666666;
|
margin-right: 8rpx;
|
}
|
image {
|
width: 10rpx;
|
height: 20rpx;
|
}
|
}
|
}
|
.info_des_tc {
|
width: 100%;
|
height: 60rpx;
|
line-height: 60rpx;
|
background: #F4EFEA;
|
border-radius: 16rpx;
|
margin-bottom: 36rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #FF5A31;
|
margin-left: 10rpx;
|
}
|
}
|
|
.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_btns {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-top: 40rpx;
|
.blue {
|
background: #01B6AD;
|
text {
|
color: #FFFFFF;
|
}
|
}
|
.white {
|
background: #ffffff;
|
border: 2rpx solid #01B6AD;
|
text {
|
color: #01B6AD;
|
}
|
}
|
.ride_btns_item {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
border-radius: 46rpx;
|
image {
|
width: 32rpx;
|
height: 32rpx;
|
margin-right: 12rpx;
|
}
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
}
|
}
|
}
|
|
.ride_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-top: 40rpx;
|
.ride_list_item {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: #FFFFFF;
|
image {
|
width: 32rpx;
|
height: 32rpx;
|
margin-right: 12rpx;
|
}
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #333333;
|
}
|
}
|
}
|
|
.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: 20rpx;
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
.huan {
|
width: 100%;
|
padding: 40rpx;
|
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;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.huan_icon {
|
width: 100rpx;
|
height: 100rpx;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.huan_info {
|
font-weight: 500;
|
font-size: 34rpx;
|
color: #222222;
|
margin-top: 30rpx;
|
}
|
.huan_warning {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #FF5A31;
|
margin-top: 24rpx;
|
}
|
.huan_btns {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 60rpx;
|
.a {
|
border: 1rpx solid #01B6AD;
|
text {
|
color: #01B6AD;
|
}
|
}
|
.b {
|
background: #01B6AD;
|
text {
|
color: #FFFFFF;
|
}
|
}
|
.huan_btns_item {
|
flex: 1;
|
height: 96rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-radius: 46rpx;
|
image {
|
width: 32rpx;
|
height: 32rpx;
|
margin-right: 12rpx;
|
}
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
}
|
}
|
}
|
.huan_footer {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 20rpx;
|
image {
|
width: 30rpx;
|
height: 30rpx;
|
margin-right: 10rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #999999;
|
}
|
}
|
}
|
}
|
</style>
|