订单

pages/order/index.vue

@@ -6,7 +6,8 @@
 			<view class="fixed">
 				<view class='title flex flex-center'>
 					<view>订单</view>
-					<image class="search" style='width:18px;height:18px;' src="../../static/images/search_icon.png" @click="search" mode=""></image>
+					<image class="search" style='width:18px;height:18px;' src="../../static/images/search_icon.png"
+						@click="search" mode=""></image>
 					<!-- <u-icon class="search" name="search" color="" size="28" @click="search"></u-icon> -->
 				</view>
 				<view class="tab-content">
@@ -19,13 +20,19 @@
 						<view class="">
 							全部类型
 						</view>
-						<image style='width:8px;height:8px;' :src="!showMenu?'../../static/images/order/xiala.png':'../../static/images/order/shangla.png'" mode=""></image>
+						<image style='width:8px;height:8px;'
+							:src="!showMenu?'../../static/images/order/xiala.png':'../../static/images/order/shangla.png'"
+							mode=""></image>
 						<!-- <u-icon :name="!showMenu?'arrow-down-fill':'arrow-up-fill'" color="#333333" size="12"></u-icon> -->
 					</view>
 				</view>
 			</view>
 			<view class="all-menu">
+
 				<u-transition :show="showMenu" mode="fade">
+					<view class="" style="background: white;padding:71rpx 0 23rpx 20rpx;font-weight: 700;">
+						类型
+					</view>
 					<view class="transition">
 						<view v-for="(item,index) in tabList" class="transition-item-style"
 							:class="tabIndex==index?'menu-active':''" @click="clickTab({index:index})">
@@ -33,7 +40,7 @@
 						</view>
 					</view>
 				</u-transition>
-				<view @touchmove.stop.prevent="moveHandle" class="modal-black" v-show="showMenu" ></view>
+				<view @touchmove.stop.prevent="moveHandle" class="modal-black" v-show="showMenu"></view>
 			</view>
 
 			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
@@ -41,15 +48,16 @@
 				<view class="evaluatePage flex flex-space-between" v-show="tabIndex == 6" @click="evaluateClick">
 					<view class="left flex flex-space-between" @click="evaluateClick">
 						<!-- <u-icon size="20" name="edit-pen"></u-icon> -->
-						<image style='width:14px;height:14px;margin-right:7px;' src="../../static/images/order/pingjiabianji.png" mode=""></image>
+						<image style='width:14px;height:14px;margin-right:7px;'
+							src="../../static/images/order/pingjiabianji.png" mode=""></image>
 						<view style="margin-left: 20prx;">我的评价</view>
 					</view>
 					<view class="right">
-						<image style='width:12px;height:12px;' src="../../static/images/order/right.png" mode=""></image>
+						<image style='width:12px;height:12px;' src="../../static/images/order/right.png" mode="">
+						</image>
 					</view>
 				</view>
-				<view :id="'good'+good.id" class="good-list" v-for="good in goods" 
-					@click="toDetail(good)">
+				<view :id="'good'+good.id" class="good-list" v-for="good in goods" @click="toDetail(good)">
 					<view style="padding: 0 35rpx 20rpx 35rpx;">
 						<view class="flex flex-space-between row1">
 							<view class="item1">
@@ -61,7 +69,9 @@
 						</view>
 						<view class="flex row2">
 							<view class="left flex flex-space-between">
-								<view class="ssx">{{$helper.getProvinceAbbreviation(good.sendPrivate?good.sendPrivate:good.sendCity)}}</view>
+								<view class="ssx">
+									{{$helper.getProvinceAbbreviation(good.sendPrivate?good.sendPrivate:good.sendCity)}}
+								</view>
 								<view class="level2-title">{{$helper.filterUrban(good.sendCity)}}
 									{{$helper.filterArea(good.sendArea)}}
 								</view>
@@ -83,7 +93,7 @@
 							</view>
 							<view class="right">
 								<view class="flex row">
-									<view >{{good.compName}}</view>
+									<view>{{good.compName}}</view>
 									<view class="sline"></view>
 									<view style="min-width: 100rpx;">{{good.cargoOwner}}</view>
 								</view>
@@ -113,7 +123,7 @@
 								<!-- {{good.totalFreight}}{{good.illingMethod==0?'元/吨':'元/车'}} -->
 								{{good.freight}}{{good.billingMethod==0?'元/吨':'元/车'}}
 							</view>
-							
+
 							<!-- <view class='pay flex'
 								v-if="good.orderStatus=='运输中'||good.orderStatus=='待货主确认卸车'||good.orderStatus=='待平台确认卸车'||good.orderStatus=='货主驳回卸车信息'||good.orderStatus=='平台驳回卸车信息'||good.orderStatus=='结算中'||good.orderStatus=='待结算'">
 								<div>已付</div>
@@ -141,11 +151,15 @@
 								确认卸车</view>
 							<view class="start normal" @click.stop="closed(good)" v-if="good.orderStatus=='结算中'">完结
 							</view>
-							<view class="start normal" @click.stop="toDetail(good)" v-if="good.orderStatus=='待确认运费'">确认运费
+							<view class="start normal" @click.stop="toDetail(good)" v-if="good.orderStatus=='待确认运费'">
+								确认运费
 							</view>
 							<!-- <view class="start normal" @click.stop="addevaluation(good)" v-if="good.orderStatus=='已完结'">评价</view> -->
-							<view class="start normal" @click.stop="addevaluation(good)" v-if="good.orderStatus=='已完结' && good.driverEvaluated != 1"><!-- driverEvaluated 为1是已评价过-->
-								评价</view>
+							<view class="start normal" @click.stop="addevaluation(good)"
+								v-if="good.orderStatus=='已完结' && good.driverEvaluated != 1">
+								<!-- driverEvaluated 为1是已评价过-->
+								评价
+							</view>
 						</view>
 					</view>
 				</view>
@@ -164,7 +178,8 @@
 					<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" @click="getSearch(item)">
+					<view v-for="(item,index) in useSearchList" :key="index" class="item-style inline-block"
+						@click="getSearch(item)">
 						{{item}}
 					</view>
 				</view>
@@ -172,48 +187,51 @@
 			</view>
 		</view>
 		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :closeOnClickOverlay='true'
-			:showCancelButton='showCancelButton' confirmColor='#2772FB' @confirm="$u.throttle(confirmClick, 1000)" @close="cancelClick"
-			@cancel="cancelClick">
-			
+			:showCancelButton='showCancelButton' confirmColor='#2772FB' @confirm="$u.throttle(confirmClick, 1000)"
+			@close="cancelClick" @cancel="cancelClick">
+
 			<view style="margin: 0 auto;">
-				<u-radio-group v-model="radiovalue1" placement="" v-if='isShowTerminationReason' >
-				<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>
+				<u-radio-group v-model="radiovalue1" placement="" v-if='isShowTerminationReason'>
+					<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>
-			
+
 			<u--textarea class="row" v-model="value2" placeholder="终止原因描述" count maxlength='50'
 				v-if='isShowTerminationReason'>
 			</u--textarea>
 		</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="" v-if='isShowTerminationReason' >
-			           	<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'
-			           	v-if='isShowTerminationReason'>
-			           </u--textarea>
-					   <view class='termination' :class="{'active':value2.length>0}" @click='$u.throttle(confirmClick, 1000)'>终止</view>
+		<!-- 普通弹窗 -->
+		<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>
-			           
-			</u-popup>
+
+				<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=""
+						v-if='isShowTerminationReason'>
+						<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'
+					v-if='isShowTerminationReason'>
+				</u--textarea>
+				<view class='termination' :class="{'active':value2.length>0}" @click='$u.throttle(confirmClick, 1000)'>
+					终止</view>
+			</view>
+
+		</u-popup>
 		<u-toast ref="uToast"></u-toast>
-	<!-- 	<view class="modal-black" v-show="showMenu" @click="closeMenu"></view> -->
+		<!-- 	<view class="modal-black" v-show="showMenu" @click="closeMenu"></view> -->
 	</view>
 </template>
 
@@ -228,7 +246,7 @@
 	} from "@/api/mock.js"
 	import uniPopup from '@/components/uni-popup/uni-popup.vue'
 	export default {
-		components:{
+		components: {
 			uniPopup
 		},
 		mixins: [MescrollMixin], // 使用mixin
@@ -237,8 +255,8 @@
 				confirmText: '确定',
 				showCancelButton: true,
 				showMenu: false,
-				show:false,
-				type:'bottom',
+				show: false,
+				type: 'bottom',
 				searchStyle: {
 					background: "#317AFE",
 					color: 'white',
@@ -285,7 +303,7 @@
 				isSearch: false,
 				startPlace: '齐齐哈尔齐齐哈尔',
 				endPlace: '全国',
-				isdblclick:0,
+				isdblclick: 0,
 				goods: [], // 数据列表
 				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
 				height: "", // 需要固定swiper的高度
@@ -317,14 +335,14 @@
 		onTabItemTap(e) {
 			this.isdblclick++
 			// tab 点击时执行，此处直接接收单击事件
-			if(this.scrollTop>1200){
-				if(this.isdblclick>1){
+			if (this.scrollTop > 1200) {
+				if (this.isdblclick > 1) {
 					uni.pageScrollTo({
 						scrollTop: 0,
 						duration: 300
 					});
 				}
-				
+
 			}
 		},
 		created() {
@@ -352,7 +370,7 @@
 
 		// },
 		onHide() {
-			this.isdblclick=0
+			this.isdblclick = 0
 		},
 		onShow() {
 			if (this.scrollTop > 1200) {
@@ -369,11 +387,11 @@
 				iconPath: 'static/images/common/huoyuan@2x(1).png',
 				selectedIconPath: 'static/images/common/huoyuan@2x.png'
 			})
-			var that=this
+			var that = this
 			that.$request.baseRequest('get', '/newsInfo/unreadMessage', {
 				reCommonId: this.userInfo.id,
 			}).then(res3 => {
-				if (res3.data||res3.data==0) {
+				if (res3.data || res3.data == 0) {
 					let name = 'myTip';
 					let value = res3.data
 					if (value == 0) {
@@ -398,7 +416,7 @@
 				num: 1
 			})
 		},
-		
+
 		onPageScroll(res) {
 			this.scrollTop = res.scrollTop
 			// console.log("页面滚动了", res.scrollTop)
@@ -420,35 +438,35 @@
 
 		},
 		methods: {
-			moveHandle(){
+			moveHandle() {
 				// this.closeMenu()
 				// console.log(1111)
 			},
-			closepopup(){
-				this.show=false
+			closepopup() {
+				this.show = false
 			},
-			toggle(item){
+			toggle(item) {
 				this.id = item.id
 				if (item.orderStatusKey == 1) {
-						this.isShowTerminationReason = false
-					} else {
-						this.isShowTerminationReason = true
-					}
-				if(item.orderStatus=='未装车'){
-					
-					
+					this.isShowTerminationReason = false
+				} else {
+					this.isShowTerminationReason = true
+				}
+				if (item.orderStatus == '未装车') {
+
+
 					this.show = true
-				}else{
-					this.isShowAlert=true
+				} else {
+					this.isShowAlert = true
 				}
-				
+
 			},
 			open() {
-			          // console.log('open');
+				// console.log('open');
 			},
 			close() {
 				this.show = false
-			          // console.log('close');
+				// console.log('close');
 			},
 			addevaluation(good) {
 				uni.$u.route('/pages/order/addEvaluation', {
@@ -531,7 +549,7 @@
 					return
 				}
 				// #endif
-				var that =this
+				var that = this
 				if (this.alertTitle == '确定删除全部历史记录?') {
 					uni.removeStorageSync('useSearchList');
 					this.useSearchList = [];
@@ -568,7 +586,7 @@
 									type: 'success',
 									message: "终止订单成功",
 									complete() {
-										
+
 										that.mescroll.resetUpScroll()
 									}
 								})
@@ -577,7 +595,7 @@
 							} else {
 								uni.$u.toast("终止订单失败！");
 							}
-							this.show=false
+							this.show = false
 							this.isShowAlert = false
 
 						})
@@ -592,7 +610,7 @@
 			},
 			getSearch(e) {
 				console.log(e)
-				if(!e){
+				if (!e) {
 					this.$refs.uToast.show({
 						type: 'error',
 						message: "搜索内容不能为空！",
@@ -615,12 +633,12 @@
 				this.isSearch = false
 			},
 			toDetail(item) {
-				if(item.orderStatus!='待货主确认'){
+				if (item.orderStatus != '待货主确认') {
 					uni.$u.route('/pages/order/orderDetails', {
 						id: item.id,
 					});
 				}
-				
+
 			},
 			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
 			upCallback(page) {
@@ -658,7 +676,7 @@
 						if (page.num == 1) this.goods = []; //如果是第一页需手动制空列表
 						this.goods = this.goods.concat(res.data.records); //追加新数据
 						this.mescroll.endBySize(res.data.records.length, res.data.total);
-						this.searchKeyWord = ""//搜索完成之后清空筛选内容
+						this.searchKeyWord = "" //搜索完成之后清空筛选内容
 					})
 					.catch(res => {
 						uni.$u.toast(res.message);
@@ -704,10 +722,12 @@
 		z-index: 999;
 		width: 100%;
 	}
-	/deep/.u-popup__content{
+
+	/deep/.u-popup__content {
 		border-radius: 10px;
 		// padding:20px;
 	}
+
 	.fixed {
 		.title {
 			background: white;
@@ -976,7 +996,8 @@
 			background: #F7F8FA;
 			border-radius: 6px;
 			margin: 20rpx 20rpx 0 20rpx;
-			padding: 16rpx 0;
+			padding: 22rpx 0;
+			font-size: 26rpx;
 
 		}
 
@@ -994,11 +1015,11 @@
 		z-index: 999;
 		opacity: 0.3;
 	}
-	
+
 	.all-menu {
 		position: fixed;
 		z-index: 99;
-		top: 200rpx;
+		top: 136rpx;
 	}
 
 	.menu-active {
@@ -1012,27 +1033,32 @@
 		padding: 20rpx;
 		border-radius: 20rpx;
 	}
-	/deep/.u-radio{
-		margin:40rpx 0;
+
+	/deep/.u-radio {
+		margin: 40rpx 0;
 	}
-	.close{
-		position:absolute;
-		right:20px;
-		top:26px;
+
+	.close {
+		position: absolute;
+		right: 20px;
+		top: 26px;
 	}
-	.termination{
-		background:#F1F3F6;
-		color:#C5CAD4;
-		padding:10px;
-		border-radius:30px;
+
+	.termination {
+		background: #F1F3F6;
+		color: #C5CAD4;
+		padding: 10px;
+		border-radius: 30px;
 		text-align: center;
-		margin-top:30rpx;
+		margin-top: 30rpx;
 	}
-	.termination.active{
+
+	.termination.active {
 		background: #2772FB;
 		color: white;
 	}
-	.u-popup-wrap{
-		padding:20px;
+
+	.u-popup-wrap {
+		padding: 20px;
 	}
 </style>