wangluohuoyun-huozhuapp/pages/order/index.vue

<!-- 货源 -->
<template>
	<view :style="{'overflow':showMenu?'hidden':'scroll'}" class="content">
		<!-- <view v-if="!isSearch"> -->
		<!-- 		<view class="fixed">
				<view class='title flex flex-center'>
					<view>订单</view>
					<u-icon class="search" name="search" color="" size="28" @click="search"></u-icon>
				</view>
				<u-tabs :list="tabList" @click="clickTab" lineColor='#2772FB' :current='tabIndex' :activeStyle="{
								color: '#2772FB',
								fontWeight: 'bold',
								transform: 'scale(1.05)'
							}"></u-tabs>
			</view> -->
		<view class="top-content">

			<view class="fixed1"></view>
			<view class="fix-content">
				<u-search placeholder="搜索订单" v-model="searchKeyWord" bgColor='white' :actionStyle='searchStyle'
					@custom="getSearch" @search="getSearch" :clearabled="true"></u-search>
				<view class="tab-content">
					<u-tabs :list="tabList" @click="clickTab" lineColor='transparent' :current='tabIndex'
						:inactiveStyle="{color:'white'}" :activeStyle="{
										color: '#2772FB',
										fontWeight: 'bold',
										transform: 'scale(1.05)',
										background:'white',
										padding:'10rpx 20rpx',
										'border-radius':'40rpx'
									}" class="tabs"></u-tabs>
					<view class="right-btn" @click="showMenu=true">
						<!-- <u-icon name="grid-fill" color="white" size="28"></u-icon> -->
						<image class="quanbu" src="@/static/images/order/quanbuyewu.png"></image>
						<view class="">
							全部
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="all-menu">
			<u-transition :show="showMenu" mode="fade">
				<view class="transition">
					<view v-for="(item,index) in tabList" :key='index' class="transition-item-style"
						:class="tabIndex==index?'menu-active':''" @click="clickTab({index:index})">
						{{item.name}}
					</view>
				</view>
			</u-transition>
			<view @touchmove.stop.prevent="moveHandle" class="modal-black" v-show="showMenu"></view>
		</view>
		<mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback"
			class="mescroll">
			<view class="evaluatePage flex flex-space-between" v-show="tabIndex == 10" @click="evaluationRecord">
				<view class="left flex flex-space-between">
					<!-- <u-icon size="20" name="edit-pen"></u-icon> -->
					<image class="pingjia" src="@/static/images/order/pingjia.png"></image>
					<view style="margin-left: 20prx;">我的评价</view>
				</view>
				<view class="right">
					<image style='width:12px;height:12px;' src="@/static/images/order/right.png"></image>
					<!-- <u-icon size="20" name="arrow-right"></u-icon> -->
				</view>
			</view>
			<view :id="'good'+good.id" class="good-list" v-for="good in goods" :key="good.id"
				@click="toDetail(good.id)">
				<view style="padding: 0 35rpx 20rpx 35rpx;">
					<view class="flex flex-space-between row1">
						<view class="item1">
							{{good.orderNo}}
							<!-- {{good.goodsName}} -->
						</view>
						<view class="item2">
							{{good.cargoOwnerStatus}}
						</view>
					</view>
					<view class="flex row2">
						<view class="left">
							<view class="top">
								<view class="ssx">
									{{$helper.getProvinceAbbreviation(good.sendPrivate?good.sendPrivate:good.sendCity)}}
								</view>
								<view class="level2-title">{{$helper.filterUrban(good.sendCity)}}</view>
							</view>
							<view class="bottom">{{$helper.filterArea(good.sendArea)}}</view>
						</view>
						<view class="jt-image">
							<image class="jt-icon" src="@/static/images/order/jt.png" mode='widthFix'>
							</image>
						</view>

						<view class="right">
							<view class="top">
								<view class="ssx">
									{{$helper.getProvinceAbbreviation(good.unloadPrivate?good.unloadPrivate:good.unloadCity)}}
								</view>
								<view class="level2-title">{{$helper.filterUrban(good.unloadCity)}}</view>
							</view>
							<view class="bottom">
								{{$helper.filterArea(good.unloadArea)}}
							</view>
						</view>
					</view>
					<view class="flex row3 s-row">
						<view class="flex align-center">
							<image class="hz" src="@/static/images/news/sj.png"></image>
							<view style="margin-right: 20rpx;" @click.stop="goTodriverDetail(good)">{{good.driverName}}
							</view>
							<!-- <view style="margin-right: 20rpx;">{{good.driverCall}}</view> -->
							<image class="hz-good" src="@/static/images/order/good-img.png"></image>
							<view>{{good.goodsName}}</view>
						</view>
						<view class="flex align-center">
							<view style="margin-right: 20rpx;">运距 {{good.distance}}km</view>
							<view v-if="good.cargoOwnerStatus!='已完结'" class="car">
								{{good.freight?good.freight:good.freightInfo.freight}}{{good.billingMethod==0?'元/吨':'元/车'}}
							</view>
							<view v-else class="car">
								{{good.freight?good.freight:good.freightInfo.freight}}{{good.billingMethod==0?'元/吨':'元/车'}}
							</view>
						</view>
						<!-- 		<view class="right">
								<view class="flex fontsize-26 row">
									<view>{{good.compName}}</view>
									<view class="sline"></view>
									<view>{{good.cargoOwner}}</view>
								</view>
								<view class="flex align-center">
									<view class="fontsize-26 ">运距 {{good.distance}}km</view>
								</view>
							</view> -->
					</view>
					<view class="row4 flex align-center">
						<view class="time">{{good.updateDate}}</view>

					</view>
					<view class="row5 flex flex-end">
						<!-- <image class="jt-icon" src="@/static/images/order/position.png" mode='widthFix'
								@click.stop="toMap(good)">
							</image> -->
						<view v-if="good.cargoOwnerStatus=='运输中'||good.cargoOwnerStatus=='已完结'"
							class="start normal look-map" @click.stop="toMap(good)">
							查看轨迹</view>
						<view class="stop" @click.stop="accept(good,1)" v-if="good.cargoOwnerStatus=='待接单'">接受
						</view>
						<!-- <view class="stop active" @click.stop="accept(good,1)">接受</view> -->
						<view class="normal" @click.stop="accept(good,2)" v-if="good.cargoOwnerStatus=='待接单'">拒绝
						</view>
						<view class="normal" @click.stop="stop(good)" v-if="good.cargoOwnerStatus=='未装车'">终止</view>
						<!-- <view class="stop active" @click.stop="stop(good)">终止</view> -->

						<!-- confirmLoading(good,3) -->
						<view v-if="good.cargoOwnerStatus=='待确认装车'" class="start normal"
							@click.stop="toDetail(good.id)">确认装车</view>
						<view v-if="good.cargoOwnerStatus=='司机驳回运费信息'" class="start normal"
							@click.stop="toDetail(good.id)">确认运费</view>
						<!-- <view class="start normal" @click.stop="confirmLoading(good,1)">确认装车</view> -->
						<view class="start normal" v-if="good.cargoOwnerStatus!='待接单'&&good.cargoOwnerStatus!='未装车'"
							@click.stop="$helper.contactCustomerService()">
							联系客服</view>
						<view class="start normal" @click.stop="toDetail(good.id)" v-if="good.cargoOwnerStatus=='待收货'">
							确认卸车</view>
						<!-- <view class="start normal" @click.stop="confirmLoading(good,4)"
								v-if="good.cargoOwnerStatus=='待收货'">确认卸车</view> -->
						<!-- <view class="start normal" @click.stop="confirmLoading(good,2)">确认卸车</view> -->
						<!-- <view class="normal" @click.stop="stop(good)" v-if="good.cargoOwnerStatus=='已结算'">付款</view> -->
						<!-- <view class="normal" @click.stop="stop(good)"
								v-if="good.cargoOwnerStatus=='待还款'||good.cargoOwnerStatus=='已还款'">还款</view> -->

						<!-- <view class="start normal" @click.stop="addevaluation(good)"  v-if="good.cargoOwnerStatus=='已完结'">评价</view> -->
						<!-- driverEvaluated 为1是已评价过-->
						<view class="start normal" @click.stop="addevaluation(good)"
							v-if="good.cargoOwnerStatus=='已完结' && good.ownerEvaluated != 1">评价</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- </view> -->
		<!-- 		<view v-else class="search-view">
			<view class="flex">
				<u-icon name="arrow-left" color="" size="20" class="back-icon" @click="back()"></u-icon>
				<u-search placeholder="可按编号、货主、收发地查找" placeholderColor="#AFB3BF" :actionStyle="textColor"
					bgColor="#F5F6FA" v-model="searchKeyWord" actionText='取消' @custom="cancel" @search="getSearch">
				</u-search>
			</view>
			<view class="near-search">
				<view class="flex flex-space-between">
					<view class="near-search-text">最近搜索</view>
					<u-icon name="trash-fill" color="#AFB3BF" size="20" class="back-icon" @click="del"></u-icon>
				</view>
				<view class="">
					<view v-for="(item,index) in useSearchList" :key="index" class="item-style inline-block">
						{{item}}
					</view>
				</view>

			</view>
		</view> -->
		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :confirmText='confirmText'
			:closeOnClickOverlay='true' :showCancelButton='showCancelButton' @confirm="$u.throttle(confirmClick, 5000)"
			@close="cancelClick" @cancel="cancelClick" class="modal">
		</u-modal>
		<u-popup :show="show" mode="bottom" @close="close" @open="open">
			<view class="u-popup-wrap">
				<view>
					<image style='width:12px;height:12px;' @click='closepopup' class='close'
						src="../../static/images/order/guanbi@3x.png" mode=""></image>
					<!-- <u-icon @click="closepopup" class='close' name="close" size="20"></u-icon> -->
				</view>

				<view style='fon-size:34rpx;margin-bottom:20px;text-align:center;font-weight: 600;'>确认终止订单</view>
				<view style="margin: 0 auto;">
					<u-radio-group iconPlacement="right" v-model="radiovalue1" placement="">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</view>
				<view style='border-top:10px solid #F2F4F7;position:absolute;left:0;height:0;width:100%;'></view>
				<view style='padding:40rpx 0 30rpx;'>终止原因描述</view>
				<u--textarea class="row" v-model="value2" placeholder="终止原因描述" count maxlength='50'>
				</u--textarea>
				<view class='termination' :class="{'active':value2.length>0}" @click='$u.throttle(termination, 5000)'>终止
				</view>
			</view>

		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	var that
	import {
		mapState
	} from 'vuex';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiGoods
	} from "@/api/mock.js"
	export default {
		components: {
			uniPopup
		},
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				confirmText: '',
				show: false,
				showCancelButton: true,
				type: null,
				objData: {},
				showMenu: false,
				searchStyle: {
					background: "#317AFE",
					color: 'white',
					position: "absolute",
					right: "30rpx",
					padding: "6rpx 20rpx",
					margin: '0 20rpx 0 0',
					"border-radius": '30rpx'
				},
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 0, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无记录！'
					}
				},
				searchKeyWord: '',
				useSearchList: [],
				mescroll: null,
				isShowTerminationReason: false,
				id: '',
				value2: '',
				radiolist1: [{
						name: '已与司机协商',
						disabled: false
					},
					{
						name: '司机原因终止',
						disabled: false
					},
					{
						name: '货主个人原因终止',
						disabled: false
					}, {
						name: '其他',
						disabled: false
					}
				],
				radiovalue1: '已与司机协商',
				confirmText: '终止',
				alertTitle: '确定终止订单？',
				alertContent: "",
				isShowAlert: false,
				textColor: {
					"color": "#AFB3BF"
				},
				isSearch: false,
				startPlace: '齐齐哈尔齐齐哈尔',
				endPlace: '全国',
				goods: [], // 数据列表
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				height: "", // 需要固定swiper的高度
				tabList: [{
						name: '全部'
					}, {
						name: '待接单'
					}, {
						name: '未发运'
					}, {
						name: '运输中'
					}, {
						name: '待收货'
					},
					{
						name: '待结算'
					},
					{
						name: '已结算'
					},
					{
						name: '待还款'
					},
					{
						name: '已还款'
					},
					{
						name: '已完结'
					},
					{
						name: '评价'
					},

				],
				tabIndex: 0,
				scrollTop: 0
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication'])
		},
		onTabItemTap(e) {
			// tab 点击时执行，此处直接接收单击事件
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},
		created() {
			//#ifdef APP-PLUS
			// this.getLngLat();
			//#endif
		},
		onLoad() {

			// that = this
			// // #ifdef APP-PLUS
			// let _status = await that.$request.baseRequest('get', '/cargoOwnerInfo/firstAuthentication', {
			// 	phone: this.userInfo.phone,
			// }).then(res => {
			// 	if(res.data){
			// 		return res.data.authenticationStatus
			// 	}

			// })
			// if (_status == '已禁用') {
			// 	this.isShowAlert = true
			// 	this.alertTitle = '账号审核中'
			// 	this.confirmText = '退出APP'
			// 	this.showCancelButton = false
			// } else {
			// 	console.log(1231233212332312312213)
			// }
			// // #endif

		},
		onShow() {
			this.upCallback({
				size: 10,
				num: 1
			})
			that.$request.baseRequest('get', '/newsInfo/unreadMessage', {
				reCommonId: this.userInfo.id,
			}).then(res3 => {
				if (res3.data || res3.data == 0) {
					let name = 'myTip';
					let value = res3.data
					if (value == 0) {
						uni.removeTabBarBadge({
							index: 2
						})
					}
					that.$store.commit('$uStore', {
						name,
						value
					});
					if (value != 0 && value) {
						uni.setTabBarBadge({
							index: 2,
							text: value + ""
						})
					}
				}
			})
		},
		// onPageScroll(res) {
		// 	this.scrollTop = res.scrollTop
		// 	console.log("页面滚动了", res.scrollTop)
		// 	if (this.scrollTop > 1200) {
		// 		uni.setTabBarItem({
		// 			index: 1,
		// 			text: '返回顶部',
		// 			iconPath: 'static/images/common/top@2x.png',
		// 			selectedIconPath: 'static/images/common/top@2x.png'
		// 		})
		// 	} else {
		// 		uni.setTabBarItem({
		// 			index: 1,
		// 			text: '订单',
		// 			iconPath: 'static/images/common/dingdan@2x(1).png',
		// 			selectedIconPath: 'static/images/common/dingdan@2x.png'
		// 		})
		// 	}

		// },
		methods: {
			closepopup() {
				this.show = false
			},
			moveHandle() {
				// console.log(1111)
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			goTodriverDetail(val) {
				uni.$u.route('/pages/order/driverDetail', {
					driver: JSON.stringify(val)
				});
			},
			addevaluation(val) {
				uni.$u.route('/pages/order/addEvaluation', {
					val: JSON.stringify(val)
				});
			},
			evaluationRecord() {
				uni.$u.route('/pages/order/evaluationRecord');
			},
			toMap(val) {
				uni.$u.route('/pages/order/map', val);
			},
			closeMenu() {
				this.showMenu = false
			},
			accept(item, type) {
				this.objData = item
				this.type = type
				if (type == 1) {
					this.alertTitle = '确定接受订单？'
					this.confirmText = '确定'
				} else if (type == 2) {
					this.alertTitle = '确定拒绝订单？'
					this.confirmText = '确定'
				} else {
					this.alertTitle = '确定终止订单？'
					this.confirmText = '终止'
				}
				this.isShowAlert = true
			},
			// 完结
			closed(item) {
				let that = this
				this.$request.baseRequest('post', '/orderInfo/api/editEnd', {
						id: item.id,
					}).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								type: 'success',
								message: "提交成功",
								complete() {
									that.upCallback({
										size: 10,
										num: 1
									})
								}
							})

						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			confirmLoading(item, type) {
				this.objData = item
				this.type = type
				if (type == 3) {
					this.alertTitle = '确认装车？'
					this.confirmText = '确定'
				} else if (type == 4) {
					this.alertTitle = '确认卸车？'
					this.confirmText = '确定'
				}
				this.isShowAlert = true
				// uni.$u.route('/pages/order/confirmLoading', item);
			},
			// confirmUnLoading(item) {
			// 	uni.$u.route('/pages/order/confirmUnloading', item);
			// },
			back() {
				uni.navigateBack(-1)
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			radioChange(n) {
				console.log('radioChange', n);

			},
			stop(item) {
				// // 货主接单
				// if (item.orderStatusKey == 1) {
				// 	this.isShowTerminationReason = false
				// } else {
				// 	this.isShowTerminationReason = true
				// }
				// this.alertTitle = '确定终止订单？'
				this.id = item.id
				this.show = true
			},
			init() {

			},
			del() {
				this.isShowAlert = true
			},
			termination() {
				var that = this
				let _terminationReason = ''
				if (this.radiovalue1 == '已与司机协商') {
					_terminationReason = 1
				} else if (this.radiovalue1 == '司机原因终止') {
					_terminationReason = 2
				} else if (this.radiovalue1 == '货主个人原因终止') {
					_terminationReason = 3
				} else if (this.radiovalue1 == '其他') {
					_terminationReason = 4
				}
				this.$request.baseRequest('post', '/orderInfo/api/end', {
						id: this.id,
						terminator: 2,
						terminationReason: _terminationReason,
						terminationReasonDescription: this.value2
					}).then(res => {
						if (res.code == 200) {
							this.show = false
							this.value2 = ''
							this.$refs.uToast.show({
								type: 'success',
								message: '终止订单成功',
							})
						} else {
							this.$refs.uToast.show({
								type: 'success',
								message: '终止订单失败',
							})
						}
						that.mescroll.resetUpScroll()
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			confirmClick() {
				var that = this
				// // #ifdef APP-PLUS
				// if (this.alertTitle == '账号审核中') {
				// 	if (uni.getSystemInfoSync().platform == 'ios') {
				// 		plus.ios.import("UIApplication").sharedApplication().performSelector("exit")
				// 	} else if (uni.getSystemInfoSync().platform == 'android') {
				// 		plus.runtime.quit();
				// 	}
				// 	return
				// }
				// // #endif
				that.isShowAlert = false
				if (this.type == 1 || this.type == 2) {
					let _title = ''
					this.$request.baseRequest('post', '/orderInfo/api/orderReceiving', {
							id: this.objData.id,
							flag: this.type
						}).then(res => {
							if (res.code == 200) {
								if (this.type == 1) {
									_title = '接单成功！'
								} else {
									_title = '拒绝订单成功！'
								}
								this.$refs.uToast.show({
									type: 'success',
									message: _title,
									complete() {
										that.upCallback({
											size: 10,
											num: 1
										})
										that.mescroll.resetUpScroll()
									}
								})
							} else {
								if (this.type == 1) {
									_title = '接单失败'
								} else {
									_title = '拒绝订单失败'
								}
								this.$refs.uToast.show({
									type: 'success',
									message: _title,
									complete() {
										that.upCallback({
											size: 10,
											num: 1
										})
										that.mescroll.resetUpScroll()
									}
								})
							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				} else if (this.type == 3 || this.type == 4) {
					let _flag = ''
					if (this.type == 3) _flag = 1
					if (this.type == 4) _flag = 2
					this.$request.baseRequest('post', '/carrierInfo/cargoOwnerLoadingAdd', {
							id: this.objData.id,
							loadingFlag: _flag,
							flag: 1
						}).then(res => {
							if (res.code == 200) {
								this.$refs.uToast.show({
									type: 'success',
									message: "提交成功",
									complete() {
										that.upCallback({
											size: 10,
											num: 1
										})
									}
								})

							}
						})
						.catch(res => {
							uni.$u.toast(res.message);
						});
				}
			},
			cancelClick() {
				this.isShowAlert = false
			},
			getSearch(e) {
				console.log("点击搜索", e)
				this.upCallback({
					size: 10,
					num: 1
				})
			},
			cancel() {
				this.isSearch = false
			},
			toDetail(id) {
				uni.$u.route('/pages/order/orderDetails', {
					id: id,
				});
			},
			upCallback(page) {
				if (!this.searchType) {
					this.searchType = 0
				}
				this.$request.baseRequest('get', '/orderInfo/selectCargoOwnerOrder', {
						cargoCommonId: this.userInfo.id,
						searchKeyWord: this.searchKeyWord,
						searchType: this.searchType,
						pageSize: page.size,
						currentPage: page.num
					}).then(res => {
						this.isSearch = false
						if (page.num == 1) this.goods = [];
						this.goods = this.goods.concat(res.data.records); //追加新数据
						this.mescroll.endBySize(res.data.records.length, res.data.total);
						uni.hideLoading()
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			clickTab(val) {
				uni.showLoading({
					mask: true
				})
				console.log(val)
				this.searchType = val.index
				this.tabIndex = val.index
				this.upCallback({
					size: 10,
					num: 1
				})
				this.showMenu = false
			},
			search() {
				this.isSearch = true
				//获取缓存搜索数据
				this.useSearchList = uni.getStorageSync('useSearchList')
				if (!this.useSearchList) this.useSearchList = [];
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding-bottom: 160px;
	}

	.ssx {
		position: relative;
		top: 3rpx;
	}

	.top-content {
		background: url(../../static/images/order/bg.png) no-repeat;
		background-size: cover;
		padding: 20rpx;
		position: fixed;
		z-index: 99;
		width: 100%;
		// margin-top: var(--status-bar-height);
		// padding-bottom: 320rpx;
	}

	.fix-content {
		// width: 96%;
		margin-right: 20rpx;
	}

	// .banner {
	// 	width: 100%;
	// 	position: relative;
	// }

	// .fixed,
	// .fixed1 {
	// 	background: #2772FB;
	// 	position: fixed;
	// 	top: var(--status-bar-height);
	// 	z-index: 999;
	// 	width: 100%;
	// }

	// .fixed {
	// 	.title {
	// 		background: white;
	// 		position: relative;
	// 		font-size: 36rpx;
	// 		font-weight: 500;
	// 		color: rgba(0, 0, 0, 0.85);

	// 		.search {
	// 			position: absolute;
	// 			right: 20rpx;
	// 		}
	// 	}
	// }

	.fixed1 {
		top: 0;
		height: var(--status-bar-height);
		background: #317AFE;
		// position: fixed;
		// z-index: 9999;
	}

	// .banner-img {
	// 	width: 100%;
	// }

	// .head {
	// 	position: absolute;
	// 	width: calc(100% - 108rpx);
	// 	bottom: 0;
	// 	background: white;
	// 	margin: 0 20rpx;
	// 	border-radius: 20rpx;

	// 	.item1,
	// 	.item3 {
	// 		width: 40%;

	// 		.text {
	// 			text-overflow: ellipsis;
	// 			overflow: hidden;
	// 			white-space: nowrap;
	// 		}

	// 	}

	// 	.item1 .text {
	// 		text-align: left;
	// 	}

	// 	.item3 .text {
	// 		text-align: right;
	// 	}
	// }

	.change-btn {
		width: 86rpx;
		height: 86rpx;
	}

	.good-list {
		background-color: white;
		margin: 20rpx;
		padding: 20rpx 0rpx 0 0;
		border-radius: 20rpx;

		.row1 {
			.item1 {

				color: #333333;
			}

			.item2 {
				color: #FE6300;
			}
		}

		.row2 {
			margin: 30rpx 0;
			display: flex;
			justify-content: center;

			.left {
				float: left;
				width: 40%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.top {
					display: flex;
					justify-content: flex-start;
				}

				.bottom {
					display: flex;
					justify-content: flex-start;
					font-size: 24rpx;
					color: #878787;
					margin-top: 10rpx;
				}
			}

			.right {
				float: right;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 40%;

				.top {
					display: flex;
					justify-content: flex-end;
				}

				.bottom {
					display: flex;
					justify-content: flex-end;
					font-size: 24rpx;
					color: #878787;
					margin-top: 10rpx;
				}
			}
		}

		.row3 {
			background: #F5F6FA;
			padding: 20rpx;
			border-radius: 10rpx;
			color: #333333;

			.hz {
				width: 74rpx;
				height: 74rpx;
				margin-right: 30rpx;
			}

			.hz-good {
				width: 44rpx;
				height: 44rpx;
				margin: 0 30rpx;
			}
		}

		.row4 {
			margin: 20rpx 0;

			.time {
				color: #999999;
				margin-right: 20rpx;
			}

			.car {
				font-size: 28rpx;
				color: #000000;
			}
		}

		.row5 {
			margin: 20rpx 0;
			font-size: 28rpx;

			.stop {
				border-radius: 33px;
				border: 1px solid #FE6300;
				padding: 13rpx 31rpx;
				margin-right: 20rpx;
				color: #FE6300;
			}

			.normal {
				border-radius: 33px;
				border: 1px solid #CDCDCD;
				padding: 6px 15px;
				margin-right: 10px;
			}
		}
	}

	.jt-icon {
		position: relative;
		top: 6rpx;
		width: 60rpx;
		margin: 0 20rpx;

	}

	.row {
		margin: 10rpx 0;
		align-items: center;
	}

	// .item-bottom {
	// 	background: #F0F5FF;
	// 	padding: 0 30rpx;

	// 	.name {
	// 		font-size: 26rpx;
	// 		font-weight: 700;
	// 		color: #000000;
	// 		margin-left: 30rpx;
	// 	}

	// 	.hp {
	// 		margin: 30rpx;
	// 	}

	// 	.number-color {
	// 		margin: 0 10rpx;
	// 	}

	// 	.qd {
	// 		background: linear-gradient(97deg, #4FABFD 0%, #2772FB 100%);
	// 		border-radius: 13px;
	// 		font-size: 29rpx;
	// 		font-weight: 400;
	// 		color: #FFFFFF;
	// 		padding: 10rpx 35rpx;
	// 	}
	// }

	.dw {
		align-items: center;
	}

	.mescroll {
		// margin-top: calc(var(--status-bar-height) + 140rpx);
		top: 280rpx;
	}

	.sline {
		height: 28rpx;
		width: 1px;
		background: black;
		margin: 0 20rpx;
	}

	.search-view {
		margin-top: var(--status-bar-height);
		background: white;
		padding: 0 20rpx;
	}

	.back-icon {
		margin-right: 20rpx;
	}

	.near-search-text {
		margin: 20rpx 0;
	}

	.item-style {

		background: #F5F6FA;
		padding: 11rpx 24rpx;
		margin-right: 20rpx;
		border-radius: 10px;
		font-size: 26rpx;
		color: #333333;
	}

	/deep/.u-modal__content {
		flex-direction: column;
	}

	.tab-content {
		position: relative;
		padding-right: 100rpx;
	}

	.right-btn {
		position: absolute;
		width: 88rpx;
		height: 88rpx;
		background: #317AFE;
		box-shadow: -14px 0px 8px -8px rgba(0, 53, 149, 0.21);
		display: flex;
		flex-direction: column;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		color: white;
		align-items: center;
		justify-content: center;
	}

	.tabs {
		// background: red;
		margin-top: 20rpx;
		overflow-x: scroll;
	}

	/deep/.u-transition {
		border-radius: 0 0 50rpx 50rpx;
	}

	.transition {
		background: white;
		padding-bottom: 40rpx;

		.transition-item-style {
			display: inline-block;
			width: calc(25% - 40rpx);
			text-align: center;
			box-sizing: border-box;
			background: #F7F8FA;
			border-radius: 40px;
			margin: 20rpx 20rpx 0 20rpx;
			padding: 16rpx 0;

		}

		.menu-active {
			background: #2772FB;
			color: white;
		}
	}

	.modal-black {
		background: black;
		height: 100vh;
		width: 100vw;
		position: fixed;
		z-index: 999;
		opacity: 0.3;
	}

	.all-menu {
		position: fixed;
		z-index: 99;
		top: 260rpx;
	}

	.look-map {
		background: #2772FB;
		border: 1px solid #2772FB;
		color: white;
	}

	.evaluatePage {
		background: white;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	/deep/.u-popup__content {
		border-radius: 10px;
		// padding:20px;
	}

	/deep/.u-radio {
		margin: 40rpx 0;
	}

	.close {
		position: absolute;
		right: 20px;
		top: 26px;
	}

	.termination {
		background: #F1F3F6;
		color: #C5CAD4;
		padding: 10px;
		border-radius: 30px;
		text-align: center;
		margin-top: 30rpx;
	}

	.termination.active {
		background: #2772FB;
		color: white;
	}

	.quanbu {
		width: 16px;
		height: 16px;
	}

	.pingjia {
		width: 14px;
		height: 14px;
	}

	.u-popup-wrap {
		padding: 20px;
	}
</style>