jikeH5/pages/rescue/rescueOrderDetail.vue

<template>
	<view class="box">
	
		<!-- 自定义导航 -->
		<view class="zdyNavBox">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view class="zdyNav">
				<view class="zdyNavLeft">
					<image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback"></image>
				</view>
				<view class="zdyNavTitle">订单详情</view>
				<view style="width: 50px;"></view>
			</view>
		</view>
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view>
		
		
		<view class="top">
			<view class="orderState">
				<image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
                <view class="SheetState" v-if="orderData.openShopHelpSheet.sheetState == 0">待确认</view>
				<view class="SheetState" v-if="orderData.openShopHelpSheet.sheetState == 1">已接单</view>
				<view class="SheetState" v-if="orderData.openShopHelpSheet.sheetState == 2">已出发</view>
				<view class="SheetState" v-if="orderData.openShopHelpSheet.sheetState == 3">已完成</view>
                <view class="SheetState" v-if="orderData.openShopHelpSheet.sheetState == 4">已取消</view>
				<view class="SheetState" v-if="orderData.openShopHelpSheet.sheetState == 5">已评价</view>
			</view>

		</view>

		<!-- 救援信息 -->
		<!-- 救援信息 -->
		<view class="information">
			<view class="detailedTitle">救援信息</view>
			<view class="informationLine">
				<view class="informationTxt">救援单号：</view>
				<view class="informationNum">{{orderData.openShopHelpSheet.code}}<span class="codeCopy"
						@click="copy(orderData.openShopHelpSheet.code)">复制</span></view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">救援类型：</view>
				<view class="informationNum" v-if="orderData.openShopHelpSheet.helpType==1">搭电</view>
				<view class="informationNum" v-if="orderData.openShopHelpSheet.helpType==2">拖车</view>
				<view class="informationNum" v-if="orderData.openShopHelpSheet.helpType==3">换胎</view>
				<view class="informationNum" v-if="orderData.openShopHelpSheet.helpType==4">未知原因</view>
			</view>
			<view class="informationLine" v-if="orderData.openShopHelpSheet.plateNumber">
				<view class="informationTxt">车牌号：</view>
				<view class="informationNum">{{orderData.openShopHelpSheet.plateNumber}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">车型：</view>
				<view class="informationNum">{{orderData.openShopHelpSheet.carModel}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">救援联系人：</view>
				<view class="informationNum">{{orderData.openShopHelpSheet.customerName}}</view>
			</view>
			<view class="informationLine" v-if="orderData.openShopHelpSheet.mobilePhone">
				<view class="informationTxt">手机号：</view>
				<view class="informationNum">{{orderData.openShopHelpSheet.mobilePhone}}</view>
			</view>
			<view class="informationLine" >
				<view class="informationTxt">救援门店：</view>
				<view class="informationNum">{{orderData.shopInfo.shopName}}</view>
			</view>
			<view class="informationLine" >
				<view class="informationTxt">起点：</view>
				<view class="informationNum">{{orderData.openShopHelpSheet.hStartAddress}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">终点：</view>
				<view class="informationNum">{{orderData.openShopHelpSheet.hEndAddress}}</view>
			</view>
			
		
		</view>
		<view class="information">
			<view class="detailedTitle">订单信息</view>
			<view class="informationLine">
				<view class="informationTxt">下单时间：</view>
				<view class="informationNum" >{{orderData.openShopHelpSheet.createTime}}</view>
			</view>
			<view class="informationLine">
				<view class="informationTxt">下单人：</view>
				<view class="informationNum" >{{orderData.openUser.nickName|| '未知'}}</view>
			</view>
			<view class="informationLine" v-if="orderData.openShopHelpSheet.confirmTime">
				<view class="informationTxt">确认时间：</view>
				<view class="informationNum" >{{orderData.openShopHelpSheet.confirmTime}}</view>
			</view>
			<view class="informationLine" v-if="orderData.openShopHelpSheet.confirmOperator">
				<view class="informationTxt">确认人：</view>
				<view class="informationNum" >{{orderData.openShopHelpSheet.confirmOperator}}</view>
			</view>
			<view class="informationLine" v-if="orderData.openShopHelpSheet.goingTime">
				<view class="informationTxt">出发时间：</view>
				<view class="informationNum" >{{orderData.openShopHelpSheet.goingTime}}</view>
			</view>
			<view class="informationLine" v-if="orderData.openShopHelpSheet.goingOperator">
				<view class="informationTxt">出发人：</view>
				<view class="informationNum" >{{orderData.openShopHelpSheet.goingOperator}}</view>
			</view>
			<view class="informationLine" v-if="orderData.openShopHelpSheet.finishTime">
				<view class="informationTxt">完成时间：</view>
				<view class="informationNum" >{{orderData.openShopHelpSheet.finishTime}}</view>
			</view>
			<view class="informationLine" v-if="orderData.openShopHelpSheet.finishOperator">
				<view class="informationTxt">完成人：</view>
				<view class="informationNum" >{{orderData.openShopHelpSheet.finishOperator}}</view>
			</view>
			<view class="informationLine" v-if="orderData.openShopHelpSheet.finishComment">
				<view class="informationTxt">完成备注：</view>
				<view class="informationNum" >{{orderData.openShopHelpSheet.finishComment}}</view>
			</view>
			<view class="informationLine" v-if="orderData.openShopHelpSheet.cancelTime">
				<view class="informationTxt">取消时间：</view>
				<view class="informationNum">{{orderData.openShopHelpSheet.cancelTime}}</view>
			</view>
			<view class="informationLine" v-if="orderData.openShopHelpSheet.cancelOperator">
				<view class="informationTxt">取消人：</view>
				<view class="informationNum" >{{orderData.openShopHelpSheet.cancelOperator}}</view>
			</view>
			<view class="informationLine" v-if="orderData.openShopHelpSheet.cancelComment">
				<view class="informationTxt">取消备注：</view>
				<view class="informationNum" >{{orderData.openShopHelpSheet.cancelComment}}</view>
			</view>
		
		</view>

		<view style="height: 50rpx;background-color: #F4F5F7;"></view>

		<!-- 待付款 -->
		<!-- <view class="bottom" v-if="orderData.openShopHelpSheet.sheetState == 0">
			<view  class="cancel" @click="cancelBespeak">取消订单</view>
			
		</view> -->
		<!-- 待服务 -->
		<view class="bottom">
			<view  class="cancel" v-if="orderData.openShopHelpSheet.sheetState == 0||orderData.openShopHelpSheet.sheetState == 1||orderData.openShopHelpSheet.sheetState == 2" @click="cancelBespeak">取消订单</view>
			<view  class="defer" v-if="orderData.openShopHelpSheet.sheetState == 0||orderData.openShopHelpSheet.sheetState == 1" @click="updateShop">更换门店</view>
			<view  class="defer" v-if="orderData.openShopHelpSheet.sheetState == 0" @click="confirmOrder">确认</view>
		    <view  class="defer" v-if="orderData.openShopHelpSheet.sheetState == 1||orderData.openShopHelpSheet.sheetState == 2" @click="completeOrder">完成</view>
			<view  class="defer" v-if="orderData.openShopHelpSheet.sheetState == 1" @click="goingOrder">出发</view>
		</view>



		
		<!-- 完成-->
		<view class="tuikuanBox" v-if="completeShow">
			<view class="tuikuan">
				<view class="tuiTop">
					<view class="tuiTitle">完成</view>
					<image @click="completeShow=false" src="../../static/img/icon_close.png" mode="" style="width: 26rpx; height: 26rpx;"></image>
					
				</view>
				
				<view class="contLine">
					<view class="contlineRight">
						<textarea placeholder-style="color:#999999" placeholder="备注" v-model="finishComment"
								class="contlineRightInput" maxlength="-1" auto-height="true"  />
					</view>
				</view>
				
				<view class="tuiBtns">
					<view class="btn" @click="completeShow=false">取消</view>
					<view class="btn2" @click="complete">确认完成</view>
				</view>
				
			</view>
		</view>
		<!-- 更换门店 -->
		<view class="tuikuanBox" v-if="updateShopShow">
			<view class="shopGhBox">
				<view class="shopGhTitle">更换门店</view>
				<view class="">
					   <picker @change="bindPickerChange" :value="pickerindex" :range-key="'shopName'" :range="pickerarray">
					 		<view class="uniPicker"> 
								<view class="uniPickerName">
								  {{shopName}}
								</view>
								<image src="../../static/img/arrow_down.png" mode=" " class="jtShopImg"></image>
							</view>
					   </picker>
				</view>
				<view class="tuiBtns">
					<view class="btn" @click="updateShopShow=false">取消</view>
					<view class="btn2" @click="completeupdateShop">更换门店</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {

				id: '',
				iStatusBarHeight:'',
				
				orderData: '',

				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				size: 500,
				qrcodeShow: false,
				qrcodeTop: '-100vh',
				qrcodeTopVal: '',
				ifShow: false,
				val: '二维码', // 要生成的二维码值
				unit: 'upx', // 单位
				background: '#b4e9e2', // 背景色
				foreground: '#309286', // 前景色
				pdground: '#262637', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				src: '', // 二维码生成后的图片地址或base64
				isShowMa: false,
				quanMaList:[],
				completeShow: false,
				tuicauseList:[],
				tuikuanContent:'',
				index: 0,
				iOSInfo:'',
				swiperIndex:0,
				back:'',
				finishComment:'',
				shopName:'',
				shopId:'',
				pickerarray:'',
				pickerindex:'',
				changeOldShopID:'',
				updateShopShow:false,
			}
		},
		onLoad(opt) {
			 this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.id = opt.id
			 this.back=opt.back;

			if (this.id) {
				this.getData()
			}
			//this.getTuiKuanData()
			this.getShopinfo();
			var qxnum = uni.getStorageSync("quanxian");
			if (qxnum == 1) {
				this.iOSInfo = JSON.parse(JSON.stringify(window.iOSInfo));
			}else if(qxnum==2){
				 window.getAndroid=this.getAndroid;
			 }
		},
		

		methods: {
			goingOrder(){
				var that = this
				uni.showModal({
				    title: '提示',
				    content: '是否出发',
					cancelText:'否',
					confirmText:'是',
				    success: function (res) {
				        if (res.confirm) {
								uni.showLoading({
									title: '加载中'
								})
								that.$http('openH5ShopHelpSheetOrder/goingOrder', {
									id: that.id,
								}, 'POST').then(res => {
									uni.hideLoading();
									if(res.code==0){
										uni.showToast({
											title: '操作成功',
											icon: 'none',
											duration: 2000
										});
									}else{
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										});
									}
									setTimeout(function() {
										that.getData();
									}, 1000);
								})
							
				          
				        } else if (res.cancel) {
				         
				        }
				    }
				});
			},
			completeOrder(){
				var that = this
				uni.showModal({
				    title: '提示',
				    content: '是否完成该订单',
					cancelText:'否',
					confirmText:'是',
				    success: function (res) {
				        if (res.confirm) {
								uni.showLoading({
									title: '加载中'
								})
								that.$http('openH5ShopHelpSheetOrder/completeOrder', {
									id: that.id,
								}, 'POST').then(res => {
									uni.hideLoading();
									if(res.code==0){
										uni.showToast({
											title: '完成成功',
											icon: 'none',
											duration: 2000
										});
									}else{
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										});
									}
									setTimeout(function() {
										that.getData();
									}, 1000);
								})
							
				          
				        } else if (res.cancel) {
				         
				        }
				    }
				});
			},
			bindPickerChange(e){
				console.log(e)
				this.shopName=this.pickerarray[e.detail.value].shopName
				this.shopId=this.pickerarray[e.detail.value].id
			},
			completeupdateShop(){
				uni.showLoading({
					title: '加载中'
				})
				this.$http('openH5ShopHelpSheetOrder/updateShop', {
					id: this.id,shopID:this.shopId,changeOldShopID:this.changeOldShopID,
				}, 'POST').then(res => {
					uni.hideLoading();
					this.updateShopShow=false;
					if(res.code==0){
						uni.showToast({
							title: '更换成功',
							icon: 'none',
							duration: 2000
						});
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
					
					setTimeout(function() {
						this.getData();
					}, 1000);
				})
			},
			confirmOrder(){
				var that = this
				uni.showModal({
				    title: '提示',
				    content: '是否确定该订单',
					cancelText:'否',
					confirmText:'是',
				    success: function (res) {
				        if (res.confirm) {
								uni.showLoading({
									title: '加载中'
								})
								that.$http('openH5ShopHelpSheetOrder/confirmOrder', {
									id: that.id,
								}, 'POST').then(res => {
									uni.hideLoading();
									// var list = res.data.Items
									uni.showToast({
										title: '确定成功',
										icon: 'none',
										duration: 2000
									});
									setTimeout(function() {
										that.getData();
									}, 1000);
								})
							
				          
				        } else if (res.cancel) {
				           this.updateShopShow=false;
				        }
				    }
				});
			},
			getShopinfo(){
				this.$http('openH5SetTheGuest/getShopInfo',{},'GET').then(res => {
						this.shopName=res.data.shopName;
						this.shopId=res.data.id
						this.getShopList();
				 })
			},
			getShopList(){
				   this.$http('openH5SetTheGuest/getShopList', {
					 
					},'GET').then(res => {
						this.pickerarray=res.data;
					})
			},
			complete(){
				this.completeShow=false;
			},
			updateShop(){
				this.updateShopShow=true;
			},
			isShowMaSHow(index){
				this.swiperIndex=index
				 this.isShowMa=true
			},
			getAndroid(e){
				this.iOSInfo=e		
			},
			payDone(){
				var that = this
				uni.showModal({
				    title: '提示',
				    content: '确认已支付完成吗',
					
				    success: function (res) {
				        if (res.confirm) {
							
								uni.showLoading({
									title: '加载中'
								})
								
								that.$http('openH5Indent/complete', {
							
									id: that.id,
							
								}, 'POST').then(res => {
									uni.hideLoading();
									// var list = res.data.Items
									
									
									setTimeout(function() {
										that.getData();
									}, 1000);
								})
							
				          
				        } else if (res.cancel) {
				           
				        }
				    }
				});
			},
			goTui(){
				
				let yuanyin = this.tuicauseList[this.index].contents
				if (!yuanyin) {
					uni.showToast({
						title: '请选择退款原因',
						icon: 'none',
						duration: 3000
					});
					return false;
				}
				
					uni.showLoading({
						title: '加载中'
					})
					var that = this
					this.$http('openH5Indent/reimburse', {
				
						id: this.id,
						refundReason: yuanyin,
						refundComment: this.tuikuanContent,
						realMoney:this.orderData.data.realMoney
					}, 'GET').then(res => {
						uni.hideLoading();
						// var list = res.data.Items
						// var list = res.data
						console.log("result+=", res);
						if (res.code == 1) {
							that.isShowTui = false
							uni.showToast({
								title: '退款成功',
								icon: 'none',
								duration: 2000
							});
							setTimeout(function() {
								that.getData();
							}, 1000);
						}
						
				
					})
				
			},
			bindChange(e) {
				console.log(e);
				this.index = e.detail.value
				
			},
			feedDone(e) {
				this.tuikuanContent = e.target.value
			
			},
			
			// 核销
			goHeXiao(){
				
					//app交互
					var standalone = window.navigator.standalone
					var userAgent = window.navigator.userAgent.toLowerCase()
					var safari = /safari/.test(userAgent)
					var ios = /iphone|ipod|ipad|mac/.test(userAgent)
					var android = /android/.test(userAgent)
					if (ios) {
									 if ( true) {//!standalone&& !safari
									   window.webkit.messageHandlers.goHeXiao.postMessage({"id":this.id?this.id:''})
									 }
					} else if (android) {
									 window.android.writeoff(this.id)
					}
				
			},
			getTuiKuanData() {
				uni.showLoading({
					title: '加载中'
				});
			
				this.$http('openH5Indent/getOpenReason', {
			
					// id: this.id,
				}, 'GET').then(res => {
					uni.hideLoading();
					this.tuicauseList = res.data;
					
				})
			},
			
			copy(txt) {
				uni.setClipboardData({
					data: txt,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			upTime() {
				uni.showLoading({
					title: '加载中'
				})
				var that = this
				this.$http('openH5Indent/carOwner/updateTimeOfAppointment', {

					id: this.id,
					shopId: this.orderData.shopInfo.id,
					billDate: this.billDate
				}, 'POST').then(res => {
					uni.hideLoading();
					// var list = res.data.Items
					var list = res.data
					console.log("result+=", res.data);
					uni.showToast({
						title: '延期成功',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						that.getData();
					}, 1000);


				})
			},
			cancelBespeak(){
				var that = this
				uni.showModal({
				    title: '提示',
				    content: '是否取消该订单',
					cancelText:'否',
					confirmText:'是',
				    success: function (res) {
				        if (res.confirm) {
								uni.showLoading({
									title: '加载中'
								})
								that.$http('openH5ShopHelpSheetOrder/cancelOrder', {
									id: that.id,
								}, 'POST').then(res => {
									uni.hideLoading();
									// var list = res.data.Items
									uni.showToast({
										title: '取消成功',
										icon: 'none',
										duration: 2000
									});
									setTimeout(function() {
										that.getData();
									}, 1000);
								})
							
				          
				        } else if (res.cancel) {
				           
				        }
				    }
				});
			},
			
			map() {
				console.log("打开地图")
				var that = this;
				if (!that.orderData.shopInfo.lat || !that.orderData.shopInfo.lng) {
					uni.showToast({
						title: '该店铺未设置定位',
						icon: 'none',
						duration: 3000
					});
				} else {
					uni.openLocation({
						latitude: Number(that.orderData.shopInfo.lat),
						longitude: Number(that.orderData.shopInfo.lng),
						name: that.orderData.shopInfo.shopName,
						address: that.orderData.shopInfo.provinceName + that.orderData.shopInfo.cityName + that
							.orderData.shopInfo.areaName + that.orderData.shopInfo.address,
						success: function() {
							console.log('success');
						},
						fail(err) {
							console.log(err)
						}
					});
				}

			},

			call() {
				uni.makePhoneCall({
					phoneNumber: this.orderData.shopInfo.mobilePhone
				});
			},


			getData() {
				uni.showLoading({
					title: '加载中'
				});

				this.$http('openH5ShopHelpSheetOrder/getOpenShopHelpSheetOrderInfo', {

					id: this.id,
				}, 'GET').then(res => {
					uni.hideLoading();
					this.orderData = res.data;
					this.changeOldShopID=res.data.shopInfo.id;
					if (this.quanMaList) {
						this.quanMaList = [];
					}
					let maList = this.orderData.OpenSheetQRCode;
					if (maList) {
						maList.forEach(item =>{
							if (item.writeoffState==1) {
								this.quanMaList.push(item.qrCode);
							}
						})
					}
					
					console.log('可用券码--',this.quanMaList);
					
				})
			},
			
			goback() {
				if(this.back==1){
					uni.navigateBack({
						delta: 1
					}) 
				}else{
					var standalone = window.navigator.standalone
					var userAgent = window.navigator.userAgent.toLowerCase()
					var safari = /safari/.test(userAgent)
					var ios = /iphone|ipod|ipad|mac/.test(userAgent)
					var android = /android/.test(userAgent)
					if (ios) {
						 if ( true) {//!standalone&& !safari
						   window.webkit.messageHandlers.goMyNav.postMessage(null)
						 }
					} else if (android) {
					   window.android.postMessage()
					}
				}
			},
			gohome(){
				uni.switchTab({
					url:'../../index/index'
				})
			},

		},
		onPullDownRefresh() {

			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

	}
</script>

<style scoped>
	.shopGhTitle{
		font-size: 30rpx;color: #333333;padding: 24rpx;
	}
	.jtShopImg{
		width: 24rpx;height: 24rpx;margin-top: 26rpx;margin-right: 26rpx;
	}
	.uniPicker{
		display: flex;
	}
	.uniPickerName{
		padding: 16rpx;font-size: 28rpx;color: #666666;
	}
	.box {
		min-height: 100vh;
		background: #F4F5F7;
		padding-bottom: 135rpx;
	}
	.zdyNavBox{
		width: 100vw;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999999;
	}
	.zdyNav{
		height: 44px;
		display: flex;
		justify-content: space-between;
		
		align-items: center;
	}
	
	.backImg{
		width: 44rpx;
		height: 44rpx;
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
	.homeImg{
		width: 44rpx;
		height: 44rpx;
		
	}
	.zdyNavLeft{
		display: flex;
		align-items: center;
	}
	.zdyNavTitle{
		
		height: 44px;
		background: #FFFFFF;
		text-align: center;
		font-size: 34rpx;
		line-height: 44px;
	}
	

	.top {
		height: 190rpx;
		background-color: #FF0000;

	}

	.orderState {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 40rpx;
	}

	.SheetState {
		display: flex;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-left: 15rpx;

	}



	.timeEditImg {
		width: 25rpx;
		height: 25rpx;
		padding-left: 20rpx;
	}



	.shopBoximg {
		width: 40rpx;
		height: 40rpx;
	}

	.shopRightImg {
		width: 44rpx;
		height: 45rpx;
	}

	.shopsx {
		width: 1px;
		height: 50rpx;
		background: #EEEEEE;
		margin-top: 30rpx;
		margin-left: 28rpx;
	}

	.shopBox {

		display: flex;
		padding: 30rpx 20rpx;
		margin: 0rpx 24rpx;
		margin-top: -60rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

	}

	.shopCont {
		width: 405rpx;
		padding-left: 20rpx;

	}

	.shopName {
		font-size: 30rpx;
		font-weight: bold;
		color: #3C3C3C;
		line-height: 42rpx;
	}

	.Address {
		color: #999999;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.shopRihgtTxt {
		color: #999999;
		font-size: 24rpx;

	}

	.shopRightBox {

		padding-left: 28rpx;
	}





	.detailedTitle {
		padding: 23rpx 20rpx;
		display: flex;
		text-align: center;
		align-content: flex-start;
		border-bottom: 1rpx solid #EEEEEE;

		font-size: 30rpx;
		font-weight: bold;
		color: #3C3C3C;
	}


	.detailedLine {
		display: flex;
		padding: 16rpx 20rpx;
		justify-content: space-between;
		align-items: center;
	}

	.detailedImg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}



	.detailedName {
		display: flex;
		align-items: center;


	}

	.code {
		font-size: 26rpx;
		color: #333333;
		font-weight: bold;
		width: 180rpx
	}

	.old {
		color: #999999;

		font-weight: 400;
		text-decoration: line-through;
	}

	.redPoint {
		width: 10rpx;
		height: 10rpx;
		background: #FF0000;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.quanState {
		font-size: 22rpx;
		color: #F19D01;
		padding: 0 10rpx;

		border: 1rpx solid #F19D01;

		border-radius: 4rpx;
		margin-left: 20rpx;
	}
	.quanState2{
		font-size: 22rpx;
		color: #999999;
		padding: 0 10rpx;
		
		border: 1rpx solid #DDDDDD;
		
		border-radius: 4rpx;
		margin-left: 20rpx;
	}



	.information {

		background: #FFFFFF;
		border-radius: 10rpx;

		margin: 20rpx 24rpx;
		padding-bottom: 15rpx;
	}

	.informationLine {
		display: flex;

		padding: 15rpx 20rpx;
	}

	.informationLine2 {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 20rpx;
		align-items: center;
		padding-bottom: 0;
	}

	.salePrice {

		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		line-height: 45rpx;
	}

	.money {
		background: #FFFFFF;
		border-radius: 10rpx;

		margin: 20rpx 24rpx;

		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 30rpx 20rpx;
	}

	.informationTxt {
		width: 190rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.line {
		height: 20rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.goodsName {
		width: 80%;
		color: #333333;
		font-size: 26rpx;
	}
	.goodsName2{
		padding: 20rpx 20rpx 15rpx;
		
		color: #333333;
		font-size: 26rpx;
	}

	.informationNum {
		color: #333333;
		font-size: 26rpx;
		width: 500rpx;
	}

	.codeCopy {
		width: 77rpx;
		height: 36rpx;
		background: #F4F5F7;
		border-radius: 22rpx;
		font-size: 24rpx;
		color: #333333;
		text-align: center;
		line-height: 33rpx;
		padding: 0 15rpx;
		margin-left: 20rpx;
	}

	



	.bottom {
		display: flex;
		justify-content: flex-end;
		padding: 20rpx;
		background-color: #FFFFFF;
		align-items: center;
		height: 98rpx;
		width: 100vw;
		position: fixed;
		bottom: 0rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.cancel {
		color: #3C3C3C;
		font-size: 28rpx;
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 1rpx solid #DDDDDD;
		text-align: center;
		line-height: 56rpx;
		margin-right: 40rpx;
	}

	.defer {
		color: #D53533;
		font-size: 28rpx;
		width: 150rpx;
		height: 56rpx;
		border-radius: 36rpx;
		border: 1rpx solid #D53533;
		text-align: center;
		line-height: 56rpx;
		margin-right: 40rpx;
	}

	.itemBox {
		margin: 20rpx;
		border-radius: 10rpx;
		border: 2rpx solid #EEEEEE;
	}

	.itemTop {
		padding: 18rpx 20rpx;
		padding-right: 0;
		background-color: #FFEFD5;

		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.topTitle {
		width: 104rpx;
		font-size: 26rpx;
		color: #333333;
		margin-right: 20rpx;
		text-align: right;
	}
	

	.leftItem {
		font-size: 26rpx;
		color: #333333;
		margin-right: 20rpx;
		flex-grow: 1;
		/* 隐藏文字显示 ...不换行 */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.itemContent {
		padding: 20rpx;
		padding-right: 0;
		background-color: #FFFFFF;

		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.maBox {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
	}

	.querenMa {
		width: 578;
		height: 640rpx;
		background: #ffffff;
		margin: 0 86rpx;
		margin-top: 50%;
		border-radius: 24rpx;
	}

	.maTop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx 15rpx;
	}


	.maTitle {
		color: #666666;
		font-size: 26rpx;
		text-align: center;
		padding-left: 100rpx;
	}
	.swiper{
		width: 100%;
		height: 85%;
		background: #FFFFFF;
		
	}
	.swiper-item{
		width: 100%;
		height: 100%;
	}
	
	
	.maCode {

		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
		margin-bottom: 40rpx;
		text-align: center;
	}

	.maBoximg {
		width: 400rpx;
		height: 400rpx;
		margin-left: 86rpx;
	}
	.tuikuanBox {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
	}
	.shopGhBox{
		width: 638rpx;
		height: 300rpx;
		background: #ffffff;
		margin: 0 36rpx;
		margin-top: 50%;
		border-radius: 24rpx;
		padding: 30rpx 20rpx;
	}
	.tuikuan {
		width: 638rpx;
		height: 500rpx;
		background: #ffffff;
		margin: 0 36rpx;
		margin-top: 50%;
		border-radius: 24rpx;
		padding: 30rpx 20rpx;
	}
	
	.tuiTop {
		display: flex;
		justify-content: space-between;
		margin-bottom: 36rpx;
	}
	
	.tuiTitle {
		width: 56rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #3C3C3C;
		line-height: 40rpx;
	
	}
	
	.contLine {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		padding: 30rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}
	
	.contlineLeft {
		color: #666666;
		line-height: 40rpx;
		align-items: center;
	}
	
	.star {
		width: 14rpx;
		height: 14rpx;
		padding-bottom: 5rpx;
	}
	
	.carModel {
		width: 350rpx;
		text-align: left;
	}
	
	.noColor {
		color: #CCCCCC;
	}
	
	.carModelRight {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.contlineRight {
		color: #333333;
		line-height: 40rpx;
	
		width: 400rpx;
		text-align: right;
	}
	
	.contlineRightInput {
		color: #333333;
		text-align: left;
		font-size: 28rpx;
		min-height: 182rpx;
		width: 600rpx;
	}
	
	.contlineRightJt {
		width: 30rpx;
		height: 30rpx;
	
	}
	
	.tuiBtns {
		display: flex;
		padding: 40rpx 20rpx 10rpx;
	
	}
	
	.btn {
		width: 288rpx;
		height: 98rpx;
		background: #F4F5F7;
		border-radius: 10rpx;
		margin-right: 22rpx;
	
	
		font-size: 30rpx;
		font-weight: 500;
		color: #3C3C3C;
		line-height: 98rpx;
		text-align: center;
	}
	
	.btn2 {
		width: 288rpx;
		height: 98rpx;
		background: #3F90F7;
		border-radius: 10rpx;
	
	
	
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 98rpx;
		text-align: center;
	}
	.writeoffLine{
		display: flex;justify-content: space-between;
		color: #999999;font-size: 24rpx;
		line-height: 33rpx;padding-top: 8rpx;
	}
	.writeoffLineBox{
		padding: 0 20rpx;
	}
	
	.detailedLineBox .detailedLine{
		padding-bottom: 0rpx;
	}
	.writeoffXx .informationNum{
		width: 500rpx;
	}
	.detailedLineBox{
		padding-bottom: 10rpx;
	}
</style>