ddcWechat/pages/index/newindex/index.vue

<template>
	<view class="pageBox">
		<view class="userOff" v-if="actionCartItem">
			<view class="navBox">
				<view class="flex topIconBox">
					<image @click="navTo('/pages/index/shopTab?type=1')" class="topIcon"
						src="../../../static/images/controller_witchShop.png" mode="widthFix"></image>
					<view v-if="actionCartItem" class="clamp padding-l-10 padding-r-10">
						{{actionCartItem.car_name||''}}
					</view>
					<image @click="navTo('/pages/index/notice')" class="topIcon"
						src="../../../static/images/controller_witchMessage.png" mode="widthFix">
					</image>
					<view class="topIconNum flex" v-if="notify>0">
						<text>
							{{notify}}
						</text>
					</view>
				</view>
			</view>
			<view class="actionBox">
				<image class="cartImg" :src="actionCartItem.image" mode="aspectFit"></image>
				<view class="timeBox" v-if="actionCartItem.day>0">
					<view style="border-radius: 20rpx;"
						class="rowContentBox flexCenter lineBorder padding-l-20 padding-r-20 padding-t-10 padding-b-10">
						<view class="tipMen"></view>
						<view class="dayBox" v-if="actionCartItem.car_operate">
							<view>
								{{actionCartItem.day}}
							</view>
							<view class="oldDay margin-t-10">
								剩余天数
							</view>
						</view>
						<view class="dayBox" v-else>
							<view class="oldDay margin-t-10 font-color-red">
								已欠费
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="contentButtom flexCenter">
					<view class="buttomBox flex">
						<view class="leftBox">
							<view class="buttom buttomLg ">
								<view @click="authSet" class="rowContentBox flexCenter lineBorder">
									<view class="tipMen"></view>
									<view class="centerTextBox">
										<view>
											<image class="tipIcon" src="../../../static/images/controller_shouquan.png"
												mode="aspectFit"></image>
										</view>
										<view class="margin-t-10">
											授权
										</view>
									</view>
								</view>
								<view class="rightPaddingBg">
								</view>
								<view class="buttomPaddingBg">
								</view>
							</view>
							<view class="leftCenterButtom buttom" @click="navTo('/pages/user/money/recharge')">
								<view class="rowContentBox flexCenter lineBorder">
									<view class="tipMen"></view>
									<view>
										<view>
											充
										</view>
										<view>
											值
										</view>
									</view>
								</view>
								<view class="topBageBg"></view>
								<view class="bottomBageBg"></view>
							</view>
							<view class="buttomLg buttom">
								<view @click="navTo('/pages/user/reportForRepair/Report?id='+actionCartItem.car_number)"
									class="rowContentBox flexCenter lineBorder">
									<view class="tipMen"></view>
									<view class="centerTextBox">
										<view>
											<image class="tipIcon" src="../../../static/images/controller_baoxiu.png"
												mode="aspectFit"></image>
										</view>
										<view class="margin-t-10">
											报修
										</view>
									</view>
								</view>
								<view class="topPaddingBg"></view>
								<view class="rightPaddingBg"></view>
							</view>
						</view>
						<view class="centerBgBox">
							<view class="centerBg lineBorder borderRadiusAll">
								<view class="borTopHide"></view>
								<view class="borBottomHide"></view>
							</view>
							<view class="bgGray borderRadiusAll"></view>
							<view class="contentOrg borderRadiusAll">
								<view class="contentOrgBg borderRadiusAll centerBox lineBorder2 flexCenter">
									<view class="centerBoxJb borderRadiusAll lineBorder2">
										<view class="boxBgJb borderRadiusAll flexCenter">
											<view class="flex-center">
												<view class="iconButtomBox borderRadiusAll flexCenter"
													:class="{greedBg:actionCartItem.status==1||actionCartItem.status==3||actionCartItem.status==4}"
													@click="tabCarStatus('tab',actionCartItem)">
													<view class="mr borderRadiusAll "></view>
													<view class="iconButtomJb">
														<view>
															<image class="img"
																src="../../../static/images/controller_qidong.png"
																mode="aspectFit"></image>
														</view>
														<view class="margin-t-10"
															v-if="actionCartItem.status==1||actionCartItem.status==3||actionCartItem.status==4">
															启动
														</view>
														<view class="margin-t-10" v-else>
															关闭
														</view>
													</view>
												</view>
											</view>
										</view>
									</view>
									<view class="line left"></view>
									<view class="line right"></view>
									<view @click="alertCartList" class="topButtomTipBox posbuttom flexCenter">
										<view class="centerTextBox">
											<view>
												<image class="tipIcon"
													src="../../../static/images/controller_huanche.png"
													mode="aspectFit"></image>
											</view>
											<view class="margin-t-10">
												换车
											</view>
										</view>
									</view>
									<view class="rightButtomTipBox posbuttom flexCenter"
										@click="tabCarStatus('seek',actionCartItem)">
										<view class="centerTextBox">
											<view>
												<image class="tipIcon"
													src="../../../static/images/controller_xunche.png" mode="aspectFit">
												</image>
											</view>
											<view class="margin-t-10">
												寻车
											</view>
										</view>
									</view>
									<view
										@click="openMap(actionCartItem.cartInfo.latitude,actionCartItem.cartInfo.longitude)"
										class="bottomButtomTipBox posbuttom flexCenter">
										<view class="centerTextBox">
											<view>
												<image class="tipIcon"
													src="../../../static/images/controller_dingwei.png"
													mode="aspectFit"></image>
											</view>
											<view class="margin-t-10">
												定位
											</view>
										</view>
									</view>
									<view class="leftButtomTipBox posbuttom flexCenter"
										@click="tabCarStatus('unlock',actionCartItem)">
										<view class="centerTextBox">
											<view>
												<image class="tipIcon"
													src="../../../static/images/controller_kaisuo.png" mode="aspectFit">
												</image>
											</view>
											<view class="margin-t-10">
												开座垫
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="rightBox">
							<view class="rightButtom buttom flex">

								<view class="centerTextBox">
									<view>
										{{actionCartItem.bfb||0}}%
									</view>
									<view>
										<image class="tipIcon" src="../../../static/images/controller_dianchi.png"
											mode="aspectFit"></image>
									</view>
								</view>
								<view class="rightElectric flexCenter">
									<view class="electric" :class="{greedBg:actionCartItem.bfb>91}"></view>
									<view class="electric" :class="{greedBg:actionCartItem.bfb>83}"></view>
									<view class="electric" :class="{greedBg:actionCartItem.bfb>75}"></view>
									<view class="electric" :class="{greedBg:actionCartItem.bfb>66}"></view>
									<view class="electric" :class="{yellowBg:actionCartItem.bfb>58}"></view>
									<view class="electric" :class="{yellowBg:actionCartItem.bfb>50}"></view>
									<view class="electric" :class="{yellowBg:actionCartItem.bfb>41}"></view>
									<view class="electric" :class="{yellowBg:actionCartItem.bfb>33}"></view>
									<view class="electric" :class="{redGb:actionCartItem.bfb>24}"></view>
									<view class="electric" :class="{redGb:actionCartItem.bfb>16}"></view>
									<view class="electric" :class="{redGb:actionCartItem.bfb>8}"></view>
									<view class="electric" :class="{redGb:actionCartItem.bfb>0}"></view>
								</view>
							</view>
							<view class=" buttomLg buttom"
								@click="navTo('/pages/index/route?id='+actionCartItem.car_number)">
								<view class="topBageBg"></view>
								<view class="rowContentBox flexCenter lineBorder">
									<view class="tipMen"></view>
									<view class="centerTextBox margin-l-40 padding-l-30">
										<view>
											<image class="tipIcon" src="../../../static/images/controller_xincheng.png"
												mode="aspectFit"></image>
										</view>
										<view class="margin-t-10">
											行程
										</view>
									</view>
								</view>
								<view class="topPaddingBg"></view>
								<view class="leftPaddingBg"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" v-if="actionCartItem">
			<view class="cartListAlertButtom">
				<view class="cartTitle flex">
					<view>
						请选择更换的车辆
					</view>
					<image @click="popupClose" class="exit" src="../../../static/images/goodsExit.png"
						mode="scaleToFill">
					</image>
				</view>
				<view class="actionCartBox">
					<view class="itemCart flex" :class="{action:item.id==actionCartItem.id}"
						v-for="(item,index) in myCartList" @click="changeCart(index)" :key='index'>
						<image class="cartImg" :src="item.image" mode="scaleToFill"></image>
						<view class="content">
							<view class="title clamp2" :class="{action:item.id==actionCartItem.id}">
								{{item.car_name||''}}
							</view>
							<view class="address margin-t-20" :class="{action:item.id==actionCartItem.id}">
								{{item.address||"暂无定位信息"}}
							</view>
						</view>
					</view>
				</view>
				<view style="height: 1px;"></view>
			</view>
		</uni-popup>
		<pageFoot></pageFoot>
	</view>
</template>
<script>
	import {
		mycar,
		getCarInfo,
		getcar_status,
		car_switch,
		getUserInfo
	} from '@/api/user.js';
	import {
		mapGetters
	} from 'vuex';
	import pageFoot from '@/components/pageFooter/index.vue';
	export default {
		props: {
			notify: {
				type: Number,
				default: 0
			},
		},
		components: {
			pageFoot
		},
		data() {
			return {
				chickedMyCart: 0, //默认选中的车辆
				// 我的车辆
				myCartList: [],
				ladingCart: false, //判断是否已经加载过我的车辆
				// #ifdef H5
				iconPath: '../../static/image/location.png', //定位图标地址
				// #endif
				// #ifndef H5
				iconPath: '../../../static/image/location.png', //定位图标地址
				// #endif
				timeOut: '', //用于存放调用定时获取对象数据
				reachangeAlert: false, //判断是否已经提示过充值
			};
		},
		watch: {
			reachange(newValue, oldValue) {
				if (newValue && (this.actionCartItem.auth_num != -1)) {
					uni.showModal({
						title: '错误',
						content: '您的余额已不足三天支付是否马上充值',
						cancelText: '关闭',
						confirmText: '马上充值',
						success: res => {
							if (res.confirm) {
								this.navTo('/pages/user/money/recharge');
							}
						},
					});
				}

			}
		},
		computed: {
			...mapGetters(['userInfo']),
			actionCartItem() {
				if (this.myCartList[this.chickedMyCart]) {
					return this.myCartList[this.chickedMyCart]
				} else {
					return false
				}
			},
			reachange() {
				// 余额
				const a1 = +this.userInfo.now_money;
				if (!this.actionCartItem) {
					return false
				}
				// 三天内应该付的金额
				const a2 = this.actionCartItem.day_deducted * 3;
				if (a1 < a2 && !this.reachangeAlert && this.actionCartItem.day > 0) {
					// 处理已加载提示用户充值信息
					this.reachangeAlert = true;
					return (new Date()).getTime()
				} else {
					return false
				}
			}
		},
		created() {
			// this.getUserInfo();
		},
	};
</script>

<style lang="scss">
	$paddingJg:40rpx;
	// 按钮黑色背景
	$bgBlack:#161727;
	// 底色
	$contentBg:#373c5a;
	// 按钮包裹框背景颜色
	$maxBoxBg:#1f2136;

	.pageBox {
		height: 0;
		min-height: 100%;
	}

	.flexCenter {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.navBox {
		/* #ifdef APP */
		padding-top: var(--status-bar-height);
		padding-bottom: 30rpx;
		/* #endif */
		/* #ifdef H5 || MP */
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		/* #endif */
		background-color: $contentBg;
		flex-shrink: 0;
	}

	.topIconBox {
		padding: 0 $paddingJg;
		position: relative;
		color: #FFFFFF;
		font-size: $uni-font-size-base + 2rpx;

		.topIconNum {
			position: absolute;
			top: -10rpx;
			right: 20rpx;
			font-size: $uni-font-size-sm;
			min-width: 30rpx;
			min-height: 30rpx;
			border-radius: 100rpx;
			background-color: $uni-color-error;
			padding: 5rpx;
			justify-content: center;
		}

		.topIcon {
			transform: rotateZ(-90deg);
			width: 45rpx;
			height: 45rpx;
			flex-shrink: 0;
		}
	}

	.userOff {
		display: flex;
		flex-direction: column;
		height: 100%;

		.actionBox {
			background-color: #0f1025;
			flex-shrink: 1;
			flex-grow: 1;
			text-align: center;
			height: 400rpx;
			position: relative;

			.cartImg {
				height: 100%;
				width: 100%;
			}

			.timeBox {
				position: absolute;
				color: #FFFFFF;
				right: 30rpx;
				top: 30rpx;
				font-size: $uni-font-size-base;
				font-weight: bold;

				.dayBox {
					z-index: 1;
					line-height: 1;
				}

				.oldDay {
					font-size: $uni-font-size-sm - 2rpx;
					color: $uni-border-color;
				}

				.tipMen {
					transform-origin: top left;
					margin-left: 0;
				}
			}
		}

		.content {
			flex-shrink: 0;
			flex-grow: 1;
		}

		.lineBorder {
			border: 1px solid #aaaec7;
		}

		.lineBorder2 {
			border: 1px solid #b7cbf2;
		}

		.rowContentBox {
			overflow: hidden;
			background-color: $contentBg;

			.tipMen {
				position: absolute;
				top: 0;
				left: 0;
				transform-origin: top left;
				margin-left: -40rpx;
				transform: rotateZ(-45deg);
				height: 100%;
				width: 100%;
				background-image: linear-gradient(to bottom, rgba(69, 75, 113, 1) 0%, transparent 100%);
			}
		}

		.rowContentBox,
		.centerBox {
			height: 100%;
			width: 100%;
			position: relative;
		}

		.contentButtom {

			width: 750rpx;
			height: 100%;
			background-color: $maxBoxBg;
			font-size: $uni-font-size-base;
			line-height: 1;

			.centerTextBox {
				text-align: center;
				margin-left: -70rpx;
			}

			.tipIcon {
				width: 46rpx;
				height: 46rpx;
			}

			.buttomBox {
				width: 750rpx;
				padding: 40rpx;
				color: #B2B9D3;

				.buttom {
					padding: 10rpx;
					background-color: $bgBlack;
					position: relative;

					.rightPaddingBg,
					.topPaddingBg,
					.leftPaddingBg,
					.buttomPaddingBg {
						position: absolute;
						background-color: $bgBlack;
						z-index: 11;
					}

					.topPaddingBg,
					.buttomPaddingBg {
						height: 12rpx;
						width: 180rpx;
						left: 0;
					}

					.rightPaddingBg,
					.leftPaddingBg {
						height: 180rpx;
						width: 10rpx;
						top: 0rpx;
					}

					.topPaddingBg {
						top: -1px;
					}

					.buttomPaddingBg {
						button: 0rpx;
					}

					.rightPaddingBg {
						right: 0rpx;
					}

					.leftPaddingBg {
						left: 0;
					}

					.topBageBg,
					.bottomBageBg {
						height: 30rpx;
						width: 180rpx;
						background-color: $maxBoxBg;
						position: absolute;
						z-index: 10;
					}

					.topBageBg {
						top: -30rpx;
					}

					.bottomBageBg {
						bottom: -30rpx;
					}
				}

				.centerBox {
					// background-image: linear-gradient(to bottom, #49548d 0%, transparent 100%);
					background-color: rgba($color: #49548d, $alpha: 0.5);
					box-shadow: 0px 0px 30rpx rgba($color: #5a6fdb, $alpha: 0.5) inset;
				}


				.buttomLg {
					width: 180rpx;
					height: 180rpx;
				}


				.leftBox {
					.leftCenterButtom {
						margin: 30rpx 0;
						width: 80rpx;
						height: 120rpx;
						background-size: 80rpx 120rpx;
						z-index: 99;

						.tipMen {
							margin-left: 0rpx;
						}
					}
				}

				.centerBgBox {
					flex-shrink: 1;
					position: relative;

					.borderRadiusAll {
						border-radius: 1000rpx;
					}

					.bgGray {
						position: absolute;
						top: 0;
						left: 0;
						background-color: $maxBoxBg;
						width: 530rpx;
						height: 530rpx;
						z-index: 20;
						left: -265rpx;
						top: -265rpx;
					}

					.contentOrg {
						position: absolute;
						background-color: $bgBlack;
						width: 480rpx;
						height: 480rpx;
						left: -240rpx;
						top: -240rpx;
						z-index: 99;
						padding: 20rpx;

						.contentOrgBg {
							width: 100%;
							height: 100%;
							position: relative;
							background-color: $contentBg;
							background-image: linear-gradient(to bottom, rgba($color: #454b71, $alpha: 1) 0%, transparent 25%, transparent 75%, rgba($color: #454b71, $alpha: 1) 100%);

							.posbuttom {
								position: absolute;

								.centerTextBox {
									margin: 0;
								}
							}

							.topButtomTipBox {
								top: 0;
								padding-bottom: 20rpx;
							}

							.bottomButtomTipBox {
								bottom: 0;
								padding-top: 20rpx;
							}

							.bottomButtomTipBox,
							.topButtomTipBox {
								width: 200rpx;
								height: 140rpx;
								margin: 0 auto;
							}

							.rightButtomTipBox,
							.leftButtomTipBox {
								width: 140rpx;
								height: 200rpx;
							}

							.rightButtomTipBox {
								padding-left: 20rpx;
								right: 0;
							}

							.leftButtomTipBox {
								padding-right: 20rpx;
								left: 0;
							}

							.line {
								position: absolute;
								width: calc(440rpx + 2px);
								height: 20rpx;
								border-top: 1px solid #b7cbf2;
								border-bottom: 1px solid #b7cbf2;
								border-left: 1px solid $bgBlack;
								border-right: 1px solid $bgBlack;
								background-color: $bgBlack;
								box-shadow: 0px 0px 30rpx rgba($color: #5a6fdb, $alpha: 0.5);

								&.left {
									transform: rotateZ(45deg);
								}

								&.right {
									transform: rotateZ(-45deg);

								}
							}

							.centerBoxJb {
								width: 200rpx;
								height: 200rpx;
								background-color: $bgBlack;
								box-shadow: 0px 0px 30rpx rgba($color: #5a6fdb, $alpha: 0.5);
								position: relative;

								.boxBgJb {
									background-color: $bgBlack;
									width: 100%;
									height: 100%;
									position: absolute;
									z-index: 1;

									.iconButtomBox {
										font-size: $uni-font-size-base;
										color: #FFFFFF;
										font-weight: bold;
										width: 160rpx;
										height: 160rpx;
										background-color: #DEDEDE;
										text-align: center;
										background-color: #F6C531;
										position: relative;

										&.greedBg {
											background-color: $uni-color-success;
										}

										.mr {
											position: absolute;
											height: 100%;
											width: 100%;
											background-image: linear-gradient(to bottom, rgba($color: #FFFFFF, $alpha: 0.2) 0%, rgba($color: #FFFFFF, $alpha: 0) 50%, rgba($color: #FFFFFF, $alpha: 0) 100%);
											box-shadow: 0px 0px 20rpx rgba($color: #FFFFFF, $alpha: 0.5) inset;
										}

										.iconButtomJb {
											.img {
												width: 75rpx;
												height: 75rpx;

											}
										}
									}
								}
							}
						}
					}

					.centerBg {
						position: absolute;
						left: -280rpx;
						top: -280rpx;
						background-color: $bgBlack;
						width: 560rpx;
						height: 560rpx;
						z-index: 10;

						.borTopHide {
							top: -10rpx;
							left: 120rpx;
						}

						.borBottomHide,
						.borTopHide {
							position: absolute;
							height: 100rpx;
							width: 316rpx;
							background-color: $maxBoxBg;
						}


						.borBottomHide {
							left: 120rpx;
							bottom: -10rpx;
						}
					}
				}

				.rightBox {
					flex-shrink: 0;

					.rightElectric {
						flex-direction: column;
						padding-right: 6rpx;

						.electric {
							width: 40rpx;
							height: 10rpx;
							// border-radius: 10rpx;
							background-color: $maxBoxBg;
							margin-bottom: 16rpx;

							// &:last-child{
							// 	border-bottom-left-radius: 10rpx;
							// 	border-bottom-right-radius: 10rpx;
							// }
							// &:first-child{
							// 	border-top-left-radius: 10rpx;
							// 	border-top-right-radius: 10rpx;
							// }
							&.greedBg {
								background-color: $uni-color-success;
							}

							&.yellowBg {
								background-color: #F6C531;
							}

							&.redGb {
								background-color: #DE2C2C;
							}
						}
					}

					.rightButtom {
						position: relative;
						z-index: 11;
						margin-bottom: 30rpx;
						width: 180rpx;
						height: 330rpx;
						padding-left: 30rpx;
						padding-top: 16rpx;
						align-items: flex-start;

						.centerTextBox {
							text-align: right;
							margin-left: 16rpx;

						}
					}
				}

			}
		}
	}

	.cartListAlertButtom {
		position: relative;
		padding-top: 20rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		background-color: #FFFFFF;
		z-index: 999;
		/* #ifdef H5 */
		padding-bottom: var(--window-bottom);

		/* #endif */
		.actionCartBox {
			padding-bottom: 40rpx;

			.itemCart {
				background-color: #F3F6F8;
				margin: 0 30rpx 30rpx;
				padding: 0 30rpx;
				border-radius: 20rpx;
				height: 200rpx;
				text-align: left;

				&.action {
					background-color: $uni-color-success;
				}

				.cartImg {
					width: 120rpx;
					height: 120rpx;
				}

				.content {
					flex-grow: 1;
					padding-left: 20rpx;
				}

				.title {
					font-size: $uni-font-size-base;
					font-weight: bold;
					color: $uni-color-title;

					&.action {
						color: #FFFFFF;
					}
				}

				.address {
					line-height: 1;
					font-size: $uni-font-size-sm - 2rpx;
					color: $uni-border-color;

					&.action {
						color: #FFFFFF;
					}
				}
			}
		}

		.cartTitle {
			margin: 0 30rpx;
			margin-bottom: 30rpx;
			font-size: $uni-font-size-lg;
			font-weight: bold;

			.exit {
				width: 50rpx;
				height: 50rpx;
			}
		}

	}
</style>