shunfengche-sfd/pages/placeOrder/placeOrders.vue

<template>
	<view style="padding-bottom: 100rpx;">
		<!-- #ifdef H5 -->
		<u-sticky :h5-nav-height="0" @fixed="xdCheck" @unfixed="noXDCheck">
		<!-- #endif -->
			<!-- #ifndef H5 -->
			<u-sticky @fixed="xdCheck" @unfixed="noXDCheck">
			<!-- #endif -->

				<view style="background: #FFFFFF;">
					<u-dropdown :menu-icon='menuicon' ref="uDropdown" @open="open" @close="close" menu-icon-size="18">
						<u-dropdown-item v-model="value1" :title="mrtitle">
							<view class="slot-content padding" style="background: #FFFFFF;">
								<view class="addbox bg" @click="goCFAddress(2)">
									<view class="add_cont">
										<view class="orgin"></view>
										<view class="add_tit" v-if="addlists.city === ''">选择出发地城市</view>
										<view class="add_tit" v-else>{{addlists.city}}</view>
									</view>
									<view>
										<image src="../../static/image/go.png" style="width: 16rpx;height: 25rpx;">
										</image>
									</view>
								</view>
								<view class="addbox bg" @click="goCFAddress(2)">
									<view class="add_cont">
										<u-input v-model="addlists.address" type="text" placeholder="请输入出发地地址"
											:border="true" :clearable="true"
											style="border: none;width: 610rpx;height: 100%;" />
									</view>
								</view>
								<view class="flex justify-between">
									<view class="qc_btn" @tap="goQC(2)">清除</view>
									<view class="sx_btn" @tap="goCX">查询</view>
								</view>
							</view>
						</u-dropdown-item>
						<u-dropdown-item v-model="value2" :title="carname">
							<view class="slot-content padding" style="background: #FFFFFF;">
								<view class="addbox bg" @click="goCFAddress(1)">
									<view class="add_cont">
										<view class="orgin"></view>
										<view class="add_tit" v-if="addlist.city === ''">选择目的地城市</view>
										<view class="add_tit" v-else>{{addlist.city}}</view>
									</view>
									<view>
										<image src="../../static/image/go.png" style="width: 16rpx;height: 25rpx;">
										</image>
									</view>
								</view>
								<view class="addbox bg" @click="goCFAddress(1)">
									<view class="add_cont">
										<u-input v-model="addlist.address" type="text" placeholder="请输入目的地地址"
											:border="true" :clearable="true"
											style="border: none;width: 610rpx;height: 100%;" />
									</view>
								</view>
								<view class="flex justify-between">
									<view class="qc_btn" @tap="goQC(1)">清除</view>
									<view class="sx_btn" @tap="goCX">查询</view>
								</view>
							</view>
						</u-dropdown-item>
					</u-dropdown>
				</view>
			</u-sticky>
			<view class="myOrder_itemView" v-for="(item,index) in orderList" @tap="goDetail(item)">
				<view style="padding: 30rpx 40rpx 30rpx;">
					<view class="flex justify-between align-center">
						<view class="item_title">{{item.appointmentStartTime}}</view>
						<view style="color: #346EF6;font-weight: bold;">等待接单中...</view>
					</view>
					<view class="flex align-center add_name" style="margin: 30rpx 6rpx 10rpx;">
						<view class="green"></view>出发地点：{{item.shipCity}} {{item.shipAddress}}
					</view>
					<image src="/static/upload/up.png" class="order_up"></image>
					<view class="flex align-center add_name" style="margin-left: 6rpx;margin-top: 6rpx;">
						<view class="orgin"></view>到达地点：{{item.deliveryCity}} {{item.deliveryAddress}}
					</view>
					<view class="margin-top flex align-center justify-between">
						<view class="flex align-center">
							<image src="/static/upload/person.png" style="width: 30rpx;height: 31rpx;"></image>
							<view style="margin-left: 16rpx;width: fit-content;" class="item_addName">
								{{item.appointmentNum}}人乘坐
							</view>
						</view>
						<!-- <view class="item_juli">订单里程{{item.kmDistance}}km</view> -->
					</view>
				</view>
				<u-line color="#E6E6E6" />
				<view style="padding: 30rpx 40rpx 0rpx;display: flex;justify-content: space-between;">
					<view class="item_money">一口价：<text style="font-size: 32rpx;">￥</text><text>{{item.driveMoney}}</text>
					</view>
					<view class="item_btn" @tap="save(item)">立即接单</view>
				</view>
			</view>
			<empty v-if="orderList.length == 0"></empty>

	</view>
</template>

<script>
	import empty from '@/components/empty'
	export default {
		components: {
			empty
		},
		data() {
			return {
				addlists: {
					city: '',
					address: ''
				},
				addlist: {
					city: '',
					address: ''
				},
				itemDetail: {},
				mrtitle: '筛选出发地',
				carname: '筛选目的地',
				menuicon: 'arrow-down-fill',
				value1: 1,
				value2: 2,
				page: 1,
				limit: 10,
				orderList: [],
				indentNumber: '',
				openLists: [],
				showpay: false,
				isDrop: false, //是否打开下拉筛选
				openWay: 1
			}
		},
		onLoad(d) {
			this.page = 1;
			this.getMyOrderList();
			this.getCityList();
		},
		onShow() {
			let userId = uni.getStorageSync('userId')
			if (!userId) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			open(index) {
				this.$refs.uDropdown.highlight();
				this.isDrop = true
			},
			close(index) {
				console.log('close', index)
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
				this.isDrop = false
			},
			goQC(index) {
				if (index == 1) {
					let addlist = {
						city: '',
						address: ''
					}
					this.addlist = addlist
				}

				if (index == 2) {
					let addlists = {
						city: '',
						address: ''
					}
					this.addlists = addlists
				}
				if (this.isDrop) {
					this.$refs.uDropdown.close();
				}
				this.page = 1;
				this.getMyOrderList();
			},
			goCX() {
				if (this.isDrop) {
					this.$refs.uDropdown.close();
				}
				this.page = 1;
				this.getMyOrderList();
			},
			goCFAddress(index) {
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						if (index == 1) {
							that.addlist.address = res.name
							that.addlist.lng = res.longitude
							that.addlist.lat = res.latitude
							let data = {
								lat: res.latitude,
								lng: res.longitude
							}
							that.$Request.getT('/app/Login/selectCity', data).then(res => {
								if (res.code === 0) {
									that.addlist.province = res.data.province
									that.addlist.city = res.data.city
									that.addlist.district = res.data.district
								}
							});
						} else if (index == 2) {
							that.addlists.address = res.name
							that.addlists.lng = res.longitude
							that.addlists.lat = res.latitude
							let data = {
								lat: res.latitude,
								lng: res.longitude
							}
							that.$Request.getT('/app/Login/selectCity', data).then(res => {
								if (res.code === 0) {
									that.addlists.province = res.data.province
									that.addlists.city = res.data.city
									that.addlists.district = res.data.district
								}
							});
						}
					}
				});
			},
			getCityList() {
				this.$Request.getT('/app/fixedStroke/selectShipCityList').then(res => {
					if (res.code == 0) {

					}
				});


				this.$Request.getT('/app/fixedStroke/selectDeliveryCityList').then(res => {
					if (res.code == 0) {

					}
				});
			},
			save(item) {
				let userId = this.$queue.getData('userId');
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定抢单吗？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							that.$Request.postT(
									'/app/orders/takingOrders?ordersId=' +
									item.ordersId + '&userId=' + userId)
								.then(res => {
									if (res.code == 0) {
										uni.showToast({
											title: '接单成功',
											icon: 'none'
										})
										that.page = 1;
										that.getMyOrderList();
										setTimeout(function() {
											uni.switchTab({
												url: '/pages/order/order'
											})
										}, 1000)
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 1500
										})
									}
								});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			getMyOrderList() {
				this.$queue.showLoading('加载中...')
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/app/orders/selectOrdersList?isFixedStroke=1&page=' + this.page + '&limit=' + this
					.limit + '&shipCity=' + this.addlists.city + '&shipAddress=' + this.addlists.address +
					'&deliveryCity=' + this.addlist.city + '&deliveryAddress=' + this.addlist.address + '&driverUserId=' + userId + '&status=2').then(res => {
					if (res.code == 0 && res.data) {
						if (this.page == 1) {
							this.orderList = res.data.list
						} else {
							this.orderList = [...this.orderList, ...res.data.list]
						}
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				});
			}
		},
		// 上拉加载
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getMyOrderList();
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getMyOrderList();
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.qc_btn {
		margin: 0 10rpx 10rpx;
		width: 320rpx;
		padding: 0 30rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		background: #346EF6;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.sx_btn {
		margin: 0 10rpx 10rpx;
		width: 320rpx;
		padding: 0 30rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		background: #346EF6;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	.addbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 10rpx 30rpx;
		padding: 0 30rpx;
		height: 110rpx;
		border-radius: 16rpx;
	}

	.add_cont {
		display: flex;
		align-items: center;
	}

	.add_tit {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 10rpx;

	}

	.bg {
		background: #F5F5F5;
	}

	.box_money {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #030303;
		margin-bottom: 30rpx;
		margin-top: 10rpx;

		text {
			font-size: 40rpx;
			color: #FF2020;
			font-weight: bold;
		}
	}

	.box_item {
		padding: 0 20rpx;
		display: flex;
		align-items: center;
		width: 520rpx;
		height: 100rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		justify-content: space-between;
	}

	.add_tit {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 10rpx;
	}

	.myOrder_itemView {
		width: 686rpx;
		// height: 549rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding-bottom: 40rpx;
	}

	.item_title {
		font-family: Source Han Sans CN;
		font-weight: 600;
		font-size: 32rpx;
		color: #242424;
	}

	.order_up {
		width: 6rpx;
		height: 24rpx;
		margin-left: 12rpx;
	}

	.add_name {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #101010;
	}


	.green {
		width: 16rpx;
		height: 16rpx;
		background: #1FC657;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.item_money {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #101010;

		text {
			font-size: 42rpx;
			color: #FF2020;
			font-weight: bold;
		}
	}

	.item_btn {
		width: 150rpx;
		height: 58rpx;
		background: #346EF6;
		border-radius: 30rpx;
		text-align: center;
		line-height: 58rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.orgin {
		width: 16rpx;
		height: 16rpx;
		background: #FBAC04;
		border-radius: 50%;
		margin-right: 20rpx;
	}
</style>