<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 hover-class="app-tap-hover" class="lxmd" @click="btntel">
        				<u-icon name="phone" color="#3D3D3D" size="28"></u-icon> 联系门店
        			</view>
        			<view hover-class="app-tap-hover" 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>