xinyi/chuangte_bike_newxcx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
0eaacca95a
chuangte_bike_newxcx/page_fenbao/orderxq.vue

477 lines
9.6 KiB
Vue
Raw Normal View History

新电动车
2025-04-01 21:35:30 +08:00
<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>
Reference in New Issue Copy Permalink