zd2.0/pages/index/indexComponents/onUser.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/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/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 class="leftNotify" v-if="fx">
					<navigator url="/pages/index/share">
						<image class="img" src="../../../static/image/redPage.png" mode="aspectFill"></image>
					</navigator>
				</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/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/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/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/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/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/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/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/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/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/icon/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>
	</view>
</template>

<script>
	import {
		mycar,
		getCarInfo,
		getcar_status,
		car_switch,
		getUserInfo
	} from '@/api/user.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	// #ifdef MP
	import {
		openGetAddress,
	} from '@/utils/rocessor.js';
	// #endif
	// #ifdef H5
	import weixinObj from "@/plugin/jweixin-module/index.js";
	import {
		weixindata
	} from "@/utils/wxAuthorized.js"
	// #endif
	export default {
		props: {
			notify: {
				type: Number,
				default: 0
			},
		},
		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: {
			...mapState('user', ['address', 'userInfo']),
			...mapState(['fx']),
			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();
		},
		beforeDestroy() {

		},
		methods: {
			...mapMutations('user', ['setAddress', 'setUserInfo']),
			// 加载初始数据
			getUserInfo() {
				getUserInfo({})
					.then(({
						data
					}) => {
						this.setUserInfo(data)
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 设置tabbar背景颜色
			setTabbar() {
				uni.setTabBarStyle({
					backgroundColor: '#25273E'
				})
			},
			// 父元素启动监听
			onStartGetCartInfo() {
				console.log('监听');
				if (this.timeOut) {
					this.outGetCartInfo();
				}
				this.onGetCartInfo()
			},
			// 关闭定时获取车辆信息
			outGetCartInfo() {
				clearInterval(this.timeOut)
			},
			onGetCartInfo() {
				this.getCarInfo(this.myCartList[this.chickedMyCart]);
				this.timeOut = setInterval((e) => {
					this.getCarInfo(this.myCartList[this.chickedMyCart]);
				}, 60000)
			},
			// tab改变事件
			changetab(tab) {
				this.myCartList[this.chickedMyCart].status = tab
			},
			// 关闭车辆选择弹窗
			popupClose() {
				this.$refs.popup.close();
			},
			// 显示车辆选择列表
			alertCartList() {
				// 打开选择弹窗
				this.$refs.popup.open();
			},
			// 打开地图导航
			openMap(lat, long) {
				uni.openLocation({
					latitude: +lat,
					longitude: +long,
					complete(e) {
						console.log(e, '地图打开');
					}
				})
			},
			// 切换更新车辆信息
			changeCart(index) {
				this.$refs.popup.close();
				this.chickedMyCart = index;
				// 判断是否已经加载过车辆信息未加载则更新信息
				// if(!this.myCartList[this.chickedMyCart].cartInfoLoading){
				const cart = this.myCartList[this.chickedMyCart];
				this.getCarInfo(cart);
				this.$emit("changeCart", cart)
				// }
			},
			// 载入我的车辆列表
			loadCard() {
				let that = this;
				mycar({}).then((e) => {
					// 判断数据是由有过更新
					if (that.myCartList.length != e.data.data.length) {
						that.myCartList = e.data.data.map((e) => {
							// 保存百分比
							e.bfb = 0;
							// 保存车辆消息
							e.cartInfo = {}
							// 判断是否已经加载数据
							e.cartInfoLoading = false
							return e
						});
						// 初始化选中的车辆
						that.chickedMyCart = 0;
						that.getCarInfo(that.myCartList[that.chickedMyCart])
					}
				}).catch((e) => {
					console.log();
				})
			},
			// 加载车辆信息
			getCarInfo(item) {
				getcar_status({
					car_number: item.car_number
				}).then((e) => {
					// console.log(e, '车辆');
					if (e.data.id) {
						// 保存车辆信息
						item.cartInfo = e.data;
						// 保存电量百分比
						item.bfb = +e.data.residue
						item.cartInfo.latitude = +item.cartInfo.latitude;
						item.cartInfo.longitude = +item.cartInfo.longitude;
						if (!item.cartInfoLoading) {
							this.onStartGetCartInfo()
						}
						// item.day = e.data.day;
						item.cartInfoLoading = true;
					}
				}).catch((e) => {
					console.log(e);
				})
			},
			// 调用切换
			tabCarStatus(type = 'tab', item) {
				uni.showLoading({
					title: '请求发送中',
					mask: true
				});
				let that = this;
				let data = {
					car_number: item.car_number,
				};
				// 是否开关锁
				if (type == 'tab') {
					data.status = (item.status == 1) ? 2 : 1;
				}
				// 是否解锁
				if (type == 'unlock') {
					data.status = 7;
				}
				// 是否寻车
				if (type == 'seek') {
					data.status = 5;
				}
				// #ifdef H5
				let bool = uni.getStorageSync('weichatBrowser') || '';
				uni.showLoading({
					title: '获取地址中',
					mask: true
				});
				// 判断是否公众号
				if (bool) {
					weixindata().then(() => {
						weixinObj.getLocation({
							type: 'gcj02',
							success: (e) => {
								uni.hideLoading()
								data.latitude = e.latitude;
								data.longitude = e.longitude;
								that.car_switch(data, type, item)
							},
							fail() {
								uni.hideLoading()
							}
						});
					})
				} else {
					uni.getLocation({
						type: 'gcj02',
						success(e) {
							uni.hideLoading()
							data.latitude = e.latitude;
							data.longitude = e.longitude;
							that.car_switch(data, type, item)
						},
						fail(e) {
							uni.hideLoading()
							console.log(e, 'cw');
						}
					})
				}

				// #endif

				// #ifdef MP
				// 判断是否已经有位置数据

				if (!that.address.latitude || !that.address.longitude) {
					// 判断是否已经获取授权
					openGetAddress().then((e) => {
						uni.showLoading({
							title: '获取地址中',
							mask: true
						});
						// 获取当前选中开锁的对象
						wx.startLocationUpdateBackground({
							type: 'gcj02',
							success: (e) => {
								uni.hideLoading()
								// 调用鉴定位置变化事件
								wx.onLocationChange((res) => {
									console.log(res, '位置数据');
									// 保存当前经纬度
									that.setAddress({
										latitude: res.latitude,
										longitude: res.longitude
									})
									// 判断是否已经加载过最近商家信息
									if (!that.loadShopData) {
										data.latitude = res.latitude;
										data.longitude = res.longitude;
										that.car_switch(data, type, item)
										that.loadShopData = true;
									}
								})
							},
							fail: () => {
								uni.hideLoading()
							}
						})

					})
				} else {
					data.latitude = that.address.latitude;
					data.longitude = that.address.longitude;
					that.car_switch(data, type, item)
				}
				// #endif
				// #ifdef APP
				uni.getLocation({
					type:'gcj02',
					success(res){
						data.latitude =res.latitude;
						data.longitude = res.longitude;
						that.car_switch(data, type, item);
					},fail(e) {
						uni.showModal({
							title: '授权失败',
							content: '未授权定位权限无法开启仪表盘功能',
							showCancel: false,
						});
						console.log(e);
					}
				})
				// #endif
			},
			// 保存地址
			car_switch(data, type, item) {
				uni.showLoading({
					title: '请求发送中',
					mask: true
				});
				car_switch(data).then((e) => {
					if (type == 'tab') {
						item.status = (item.status == 1) ? 2 : 1;
					}
					uni.hideLoading()
					uni.showToast({
						title: e.msg
					});
				}).catch((e) => {
					uni.hideLoading()
					uni.showModal({
						title: '错误',
						content: e.msg,
						showCancel: false,
					});
				})
			},
			// 判断是否有权限授权车辆
			authSet(){
				if(this.actionCartItem.auth_num!=-1){
					this.navTo('/pages/user/myCart/authorization?id='+this.actionCartItem.car_number)
				}else{
					uni.showModal({
						title: '提示',
						content: '该车辆是他人授权给您的车辆您无权二次授权',
						showCancel: false,
					});
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		},

	};
</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: $font-base + 2rpx;

		.topIconNum {
			position: absolute;
			top: -10rpx;
			right: 20rpx;
			font-size: $font-sm;
			min-width: 30rpx;
			min-height: 30rpx;
			border-radius: 100rpx;
			background-color: $color-red;
			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%;
			}

			.leftNotify {
				position: absolute;
				top: 20rpx;
				left: 30rpx;

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

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

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

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

				.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: $font-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: $font-base;
										color: #FFFFFF;
										font-weight: bold;
										width: 160rpx;
										height: 160rpx;
										background-color: #DEDEDE;
										text-align: center;
										background-color: #F6C531;
										position: relative;

										&.greedBg {
											background-color: $color-green;
										}

										.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: $color-green;
							}

							&.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: $color-green;
				}

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

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

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

					&.action {
						color: #FFFFFF;
					}
				}

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

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

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

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

	}
</style>