477 lines
9.6 KiB
Vue
477 lines
9.6 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
||
title-size='36' height='36' id="navbar">
|
||
</u-navbar>
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/ujC1gbZsDvts1LKnRAWA" class="bj" mode=""></image>
|
||
<!-- 租车使用中状态 -->
|
||
<view class="ztone">
|
||
<view class="name">
|
||
使用中
|
||
</view>
|
||
|
||
<!-- 已还车 -->
|
||
<view class="huanche">
|
||
<view class="anme">
|
||
已还车
|
||
</view>
|
||
<view class="wz">
|
||
押金将退还原支付账户
|
||
</view>
|
||
<view class="wz">
|
||
还车时间：09月05日（周四）16:00
|
||
</view>
|
||
</view>
|
||
|
||
<view class="zuche">
|
||
<view class="tops">
|
||
<view class="">租车门店</view> 云行租车（汇丰公寓）
|
||
</view>
|
||
<view class="dizhi">
|
||
天目山路148号
|
||
</view>
|
||
<view class="time">
|
||
营业时间：09:00-21:00
|
||
</view>
|
||
<view class="anniu">
|
||
<view class="lxmd" @click="btntel">
|
||
<u-icon name="phone" color="#3D3D3D" size="28"></u-icon> 联系门店
|
||
</view>
|
||
<view class="dhdd" @click="btndaohang">
|
||
<u-icon name="map" color="#3D3D3D" size="28"></u-icon> 导航到店
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="zcxx">
|
||
<view class="zctit">
|
||
全新车网红泡泡50KM续航
|
||
</view>
|
||
<view class="zcone">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/u9kLVwXX7Qj7Ju9dxG5U" mode=""></image>
|
||
<view class="zcrt">
|
||
<view class="wz">
|
||
套餐：日租 108/天
|
||
</view>
|
||
<view class="wz">
|
||
租赁周期：1天
|
||
</view>
|
||
<view class="wz">
|
||
车辆编号：213259123678
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="zctime">
|
||
<view class="zctimeone">
|
||
租车时间
|
||
</view>
|
||
<view class="zctimetwo">
|
||
共1天（09/04 16:00-09/05 16:00)
|
||
</view>
|
||
</view>
|
||
<view class="zczj">
|
||
<view class="zczjone">
|
||
租金
|
||
</view>
|
||
<view class="zczjtwo">
|
||
<text>￥108×1</text> ￥108
|
||
</view>
|
||
</view>
|
||
<view class="zczj">
|
||
<view class="zczjone">
|
||
预存
|
||
</view>
|
||
<view class="zczjtwo">
|
||
￥199
|
||
</view>
|
||
</view>
|
||
<view class="zcbot">
|
||
<view class=""></view>
|
||
<view class="zcsf">
|
||
<view class="">
|
||
实付款<text>￥188</text>
|
||
</view>
|
||
<view class="">
|
||
还车成功后剩余金额将退回原支付账户
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<!-- 底部取车and编号 -->
|
||
<view class="quche">
|
||
<u-tabs :list="list" :is-scroll="false" :current="current" inactive-color="#89bdef" @change="change"></u-tabs>
|
||
<view class="cont">
|
||
请在2024-09-04 16:00前取车，超出时间将无法保证 车辆库存。
|
||
</view>
|
||
</view>
|
||
<view class="biaohao">
|
||
<view class="tit">
|
||
订单编号
|
||
</view>
|
||
<view class="bh">
|
||
<view class="hm">
|
||
ZDVNJK24968791234168549864412
|
||
</view>
|
||
<view class="fz">
|
||
复制
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="annius">
|
||
<view class=""></view>
|
||
<view class="an">
|
||
<view class="hc">
|
||
还车
|
||
</view>
|
||
<view class="hc">
|
||
临时停车
|
||
</view>
|
||
<view class="xz">
|
||
续租
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "rgb(164,208,255)",
|
||
},
|
||
list: [{
|
||
name: '取车须知'
|
||
}, {
|
||
name: '取消规则'
|
||
}, {
|
||
name: '逾期规则',
|
||
}, {
|
||
name: '还车规则',
|
||
}],
|
||
current:0
|
||
}
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
// 点击规则须知tabs筛选
|
||
change(index) {
|
||
this.current = index
|
||
},
|
||
// 点击进行导航到门店
|
||
btndaohang(){
|
||
uni.openLocation({
|
||
latitude: 11, //纬度-目的地/坐标点
|
||
longitude: 11, //经度-目的地/坐标点
|
||
name: 11, //地点名称
|
||
address:11 //详细地点名称
|
||
})
|
||
},
|
||
// 点击拨打门店电话
|
||
btntel() {
|
||
uni.makePhoneCall({
|
||
phoneNumber: '18888888888',
|
||
success: function(res) {
|
||
console.log('拨打电话成功', res)
|
||
},
|
||
fail: function(err) {
|
||
console.error('拨打电话失败', err)
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: #F7F7F7;
|
||
padding-bottom: 200rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.annius{
|
||
width: 750rpx;
|
||
height: 150rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0,0,0,0.3);
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 42rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
.an{
|
||
width: 100%;
|
||
padding: 0 28rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.hc{
|
||
width: 218rpx;
|
||
height: 68rpx;
|
||
border-radius: 42rpx 42rpx 42rpx 42rpx;
|
||
border: 2rpx solid #4297F3;
|
||
text-align: center;
|
||
line-height: 68rpx;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #4297F3;
|
||
}
|
||
.xz{
|
||
width: 218rpx;
|
||
height: 68rpx;
|
||
background: #4297F3;
|
||
border-radius: 42rpx 42rpx 42rpx 42rpx;
|
||
text-align: center;
|
||
line-height: 68rpx;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
line-height: 68rpx;
|
||
}
|
||
}
|
||
}
|
||
.biaohao{
|
||
width: 696rpx;
|
||
height: 144rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
padding: 20rpx 28rpx;
|
||
box-sizing: border-box;
|
||
margin: auto;
|
||
margin-top: 16rpx;
|
||
.tit{
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.bh{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 16rpx;
|
||
.hm{
|
||
font-size: 28rpx;
|
||
color: #6F6F6F;
|
||
}
|
||
.fz{
|
||
font-size: 28rpx;
|
||
color: #4297F3;
|
||
}
|
||
}
|
||
}
|
||
.quche{
|
||
width: 696rpx;
|
||
max-height: 608rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
margin: auto;
|
||
margin-top: 16rpx;
|
||
overflow: hidden;
|
||
.cont{
|
||
padding: 22rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
.ztone{
|
||
.huanche{
|
||
width: 696rpx;
|
||
max-height: 202rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
margin: auto;
|
||
margin-top: 50rpx;
|
||
padding: 26rpx 32rpx;
|
||
box-sizing: border-box;
|
||
.anme{
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
.wz{
|
||
font-size: 24rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
margin-top: 74rpx;
|
||
.zcxx{
|
||
.zcbot{
|
||
border-top: 1rpx solid #D8D8D8;
|
||
margin-top: 22rpx;
|
||
padding-top: 16rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.zcsf{
|
||
text-align: right;
|
||
view{
|
||
font-size: 24rpx;
|
||
color: #6F6F6F;
|
||
margin-bottom: 16rpx;
|
||
text{
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #FF1C1C;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.zczj{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20rpx;
|
||
.zczjone{
|
||
font-size: 28rpx;
|
||
color: #6F6F6F;
|
||
}
|
||
.zczjtwo{
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #FF1C1C;
|
||
text{
|
||
font-size: 28rpx;
|
||
color: #808080;
|
||
font-weight: 400;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
.zcone{
|
||
display: flex;
|
||
margin-top: 24rpx;
|
||
.wz{
|
||
font-size: 28rpx;
|
||
color: #6F6F6F;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
image{
|
||
width: 156rpx;
|
||
height: 120rpx;
|
||
margin-right: 18rpx;
|
||
}
|
||
}
|
||
.zctit{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
width: 696rpx;
|
||
max-height: 642rpx;
|
||
background: #FFFFFF;
|
||
margin: auto;
|
||
margin-top: 16rpx;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx 32rpx;
|
||
box-sizing: border-box;
|
||
.zctime{
|
||
width: 100%;
|
||
height: 74rpx;
|
||
padding: 0 22rpx;
|
||
box-sizing: border-box;
|
||
line-height: 74rpx;
|
||
background: #EFEFEF;
|
||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 30rpx;
|
||
.zctimeone{
|
||
font-size: 28rpx;
|
||
color: #6F6F6F;
|
||
}
|
||
.zctimetwo{
|
||
font-size: 28rpx;
|
||
color: #4297F3;
|
||
}
|
||
}
|
||
}
|
||
.name{
|
||
font-weight: 600;
|
||
font-size: 48rpx;
|
||
color: #3D3D3D;
|
||
padding-left: 38rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.zuche{
|
||
width: 696rpx;
|
||
height: 342rpx;
|
||
background: #FFFFFF;
|
||
margin: auto;
|
||
margin-top: 34rpx;
|
||
padding: 30rpx 0;
|
||
box-sizing: border-box;
|
||
border-radius: 20rpx;
|
||
.anniu{
|
||
border-top: 1rpx solid #D8D8D8;
|
||
margin-top: 26rpx;
|
||
display: flex;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #3D3D3D;
|
||
.lxmd{
|
||
width: 50%;
|
||
height: 102rpx;
|
||
line-height: 102rpx;
|
||
text-align: center;
|
||
border-right: 1px solid #D8D8D8;
|
||
}
|
||
.dhdd{
|
||
width: 50%;
|
||
height: 102rpx;
|
||
line-height: 102rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.time{
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
padding: 0 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.dizhi{
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
margin-top: 48rpx;
|
||
padding: 0 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.tops{
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
color: #3D3D3D;
|
||
padding: 0 28rpx;
|
||
box-sizing: border-box;
|
||
view{
|
||
font-size: 24rpx;
|
||
color: #0D75E5;
|
||
margin-right: 10rpx;
|
||
width: 120rpx;
|
||
height: 42rpx;
|
||
background: #DCEDFF;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
text-align: center;
|
||
line-height: 42rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bj{
|
||
width: 750rpx;
|
||
height: 512rpx;
|
||
position: fixed;
|
||
top: 40rpx;
|
||
left: 0;
|
||
z-index: -1;
|
||
}
|
||
|
||
</style> |