ydd_front/mer_uniapp/pages/rider_index/order/index.vue

<template>
	<view class="pos-order-list" ref="container">
		<!-- #ifdef MP || APP-PLUS -->
		<NavBar titleText="订单管理" bagColor="#f5f5f5" :iconColor="iconColor" :textColor="iconColor"
			:isScrolling="isScrolling" showBack></NavBar>
		<!-- #endif -->
		<view class="searchCon acea-row">
			<view class="search acea-row row-middle">
				<text class="iconfont icon-ic_search"></text>
				<input class="inputs" placeholder='请输入订单号' placeholder-style="font-size:28rpx" placeholder-class='placeholder' confirm-type='search'
					name="search" v-model="searchListData.orderNo" @confirm="searchSubmit"></input>
			</view>
			<view class="btn" @click="filterShow = true">
				<text class="iconfont icon-a-icon_filter1x"></text>
			</view>
		</view>
		<view :style="{ height: navHeight + 'px' }" v-if="isFixed"></view>
		<!-- #ifdef MP -->
		<view class="nav acea-row row-around row-middle" :style="{
			top:getHeight.barTop+getHeight.barHeight+'px'
		}" id="nav">
		<!-- #endif -->
			<!-- #ifndef MP -->
			<view class="nav acea-row row-around row-middle" id="nav">
			<!-- #endif -->
				<scroll-view scroll-x="true" class="scroll_view">
					<view class="item" :class="state == 'all' ? 'on' : ''" @click="changeStatus('all')"  v-if="searchListData.type ==-1">
						全部({{headerArr['all']!=undefined?headerArr['all']:0}})
						<image src="../static/adorn.png" v-if="state == 'all'"></image>
					</view>
					<view class="item" :class="state == 'await' ? 'on' : ''" @click="changeStatus('await')"  v-if="searchListData.type != -1">
						待接单
						<image src="../static/adorn.png" v-if="state == 'await'"></image>
					</view>
					<!--view class="item" :class="state == 'notShipped' ? 'on' : ''" @click="changeStatus('notShipped')">
						待接单({{headerArr['notShipped']!=undefined?headerArr['notShipped']:0}})
						<image src="../static/adorn.png" v-if="state == 'notShipped'"></image>
					</view-->
					<view class="item" :class="state == 'pickUp' ? 'on' : ''" @click="changeStatus('pickUp')">
						待取货({{headerArr['pickUp']!=undefined?headerArr['pickUp']:0}})
						<image src="../static/adorn.png" v-if="state == 'pickUp'"></image>
					</view>
					<view class="item" :class="state == 'delivery' ? 'on' : ''"
						@click="changeStatus('delivery')">
						配送中({{headerArr['delivery']!=undefined?headerArr['delivery']:0}})
						<image src="../static/adorn.png" v-if="state == 'delivery'"></image>
					</view>
					<view class="item" :class="state == 'complete' ? 'on' : ''" @click="changeStatus('complete')">
						已完成({{headerArr['complete']!=undefined?headerArr['complete']:0}})
						<image src="../static/adorn.png" v-if="state == 'complete'"></image>
					</view>
					<!--view class="item" :class="state == 'complete' ? 'on' : ''" @click="changeStatus('complete')">
						已完成({{headerArr['complete']!=undefined?headerArr['complete']:0}})
						<image src="../static/adorn.png" v-if="state == 'complete'"></image>
					</view>
					<view class="item" :class="state == 'refunded' ? 'on' : ''" @click="changeStatus('refunded')">
						已退款({{headerArr['refunded']!=undefined?headerArr['refunded']:0}})
						<image src="../static/adorn.png" v-if="state == 'refunded'"></image>
					</view>
					<view class="item" :class="state == 'deleted' ? 'on' : ''" @click="changeStatus('deleted')">
						已删除({{headerArr['deleted']!=undefined?headerArr['deleted']:0}})
						<image src="../static/adorn.png" v-if="state == 'deleted'"></image>
					</view-->
				</scroll-view>
			</view>
			<view class="list" v-if="list.length">
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="order-num acea-row row-between-wrapper" @click="toDetail(item)">
						<view>
							<view class="title">
								<view class="type">{{orderType[item.orderType]}}</view>{{item.orderNo}}
							</view>
						</view>
						<view class="state">
							{{orderStatus[item.status]}}
						</view>
					</view>
					<view class="pos-order-goods">
						<view class="goods acea-row">
							<!-- <scroll-view class="picTxt scroll-view" scroll-x="true"
								v-if="item.infoResponseList.length > 1">
								<view class="pictrue" v-for="(val, key) in item.infoResponseList" :key="key">
									<image :src="val.image" />
								</view>
							</scroll-view> -->
							<view class="picTxt"  @click="toDetail(item)">
								<view class="acea-row" >
									 <view class="order-content">
									 	<view class="bold-size flex-y-center" style="padding: 10rpx 0;">
									 		<view class="icon-info"></view>
									 		<text>配送详情</text>
									 	</view>
									 	<view style="padding-bottom: 10rpx;position: relative;" id="myLineRef">
									     <view class="line"></view>
									 		<view class="box-item">
									 			<view class="bold-size">
									 				<text class="order-icon">取</text>{{item.merName}}
									 			</view>
									 		</view>
									 		<text class="onBold-size"><text class="order-icon" style="opacity: 0">取</text>{{item.merAddress}}</text>
									 	</view>
									 	<view>
									 		<view class="box-item">
									 			<view class="bold-size">
									 				<text class="order-icon">送</text>{{item.userAddress}}
									 			</view>
									 		</view>
									 		<!--text class="onBold-size"><text class="order-icon" style="opacity: 0">送</text>{{remark}}</text-->
									 	</view>
									 </view>
								</view>
							</view>
							<view class="money">
								配送费 <baseMoney :money="item.deliveCharge" symbolSize="20" integerSize="32" decimalSize="20">
								</baseMoney>
								<view class="num">距离{{ item.distance }}km</view>
								<view class="map" @click="goMap(item)">
									<text class="iconfont icon-chakanditu"></text>
									<view class="map_text">查看地图</view>
								</view>
							</view>
							
						</view>
					</view>
					<view class="operation acea-row row-between-wrapper">
						<view class="more">
						</view>
						<view class="acea-row row-middle">
							<view v-if="item.status==1 || item.status==2"  @click="cancel(item)" class="bnt on acea-row row-center-wrapper">取消订单</view>
							<view v-if="item.status==1 && item.merPhone !=null" @click="makePhoneCall(item.merPhone )"  class="bnt on acea-row row-center-wrapper">联系驿站</view>
							<view v-if="item.status==2 && item.userPhone!=null"  @click="makePhoneCall(item.userPhone )" class="bnt on acea-row row-center-wrapper">联系客户</view>
							<view class="bnt primary" v-if="item.status==0" 
								@click="receiving(item)">接单
							</view>
							<view class="bnt primary" v-if="item.status==1"
								@click="pickUp(item)">取件配送
							</view>
							<view class="bnt primary" v-if="item.status==2"
								@click="complete(item)">送达完成
							</view>
						</view>
					</view>
				</view>
			</view>
			<emptyPage v-else title="暂无订单～" :imgSrc="urlDomain+'crmebimage/presets/noShopper.png'"></emptyPage>
			<Loading :loaded="loaded" :loading="loading"></Loading>
			<PriceChange :change="change" :orderInfo="orderInfo" :isRefund="isRefund"
				v-on:statusChange="statusChange($event)" v-on:closechange="changeclose($event)"
				v-on:savePrice="savePrice" :status="status"></PriceChange>
			<view class="mask" v-if="filterShow" @click="filterShow=!filterShow"></view>
			<!-- #ifdef H5 -->
			<view class="filter-popup" :class="{ on: filterShow }">
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="filter-popup" :class="{ on: filterShow }" :style="{
			top:getHeight.barTop+getHeight.barHeight+'px'}">
			<!-- #endif -->
				<view class="search-box">
					<view class="search acea-row row-middle">
						<text class="iconfont icon-ic_search"></text>
						<input class="input" placeholder='请输入要查询的订单' placeholder-style="font-size:28rpx" placeholder-class='placeholder'
							confirm-type='search' name="search" v-model="searchListData.orderNo"
							@confirm="searchSubmit"></input>
					</view>
				</view>
				<view class="content">
					<view class="item">
						<view class="title">按下单时间</view>
						<view class="acea-row list">
							<view class="cell" v-for="(item, index) in dateList" :key="index"
								:class="{ on: item.val == dateSelected }" @click="dateChange(item.val)">{{ item.label }}
							</view>
						</view>
					</view>
					<view class="item">
						<view class="title">按订单类型</view>
						<view class="acea-row list">
							<view class="cell" v-for="(item, index) in payList" :key="index"
								:class="{ on: item.val === searchListData.type }" @click="payChange(item.val)">
								{{ item.label }}
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="no_view" @click="resetBtn">重置</view>
						<view class="yes_view" @click="submitBtn">确定</view>
					</view>
				</view>
			</view>
			<view v-if="confirmShow" class="mask"></view>
			<view v-if="confirmShow" class="confirm-popup">
				<view class="title">确认付款</view>
				<view class="info">确认该订单用户已付款</view>
				<view class="acea-row btn-box">
					<view class="btn" @click="confirmShow = false">取消</view>
					<view class="btn primary" @click="offlinePay">确认</view>
				</view>
			</view>
			<view class="footerH"></view>
			<footerPage></footerPage>
		</view>
</template>

<script>
	// import UniDatetime from '../components/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import Loading from '../components/Loading/index'
	import PriceChange from '../components/PriceChange/index.vue'
	import footerPage from '../components/footerPage/index.vue'
	
	import emptyPage from '@/components/emptyPage.vue'
	import baseMoney from '../components/BaseMoney.vue'
	// #ifdef MP || APP-PLUS
	import NavBar from '../components/NavBar.vue';
	// #endif
	import {
		isMoney
	} from '@/utils/validate.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		riderOrderAllList,riderOrderList,riderExpressOrderList,riderOrderReceiving,orderStatusNum,orderPickUp,orderComplete,orderCancel
	} from '@/api/rider.js';
	export default {
		name: "AdminOrderList",
		components: {
			Loading,
			PriceChange,
			footerPage,
			emptyPage,
			baseMoney,
			// #ifdef MP || APP-PLUS
			NavBar,
			// #endif
		},
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				datetimerange: [],
				orderType: ['外卖','快递'],
				orderStatus: ['待接单', '待取货', '配送中', '已完成'],
				getHeight: this.$util.getWXStatusHeight(),
				iconColor: '#333333',
				isScrolling: false,
				top: 0,
				navHeight: 0,
				isFixed: false,
				filterShow: false,
				current: "",
				change: false,
				types: 0,
				list: [],
				loaded: false,
				loading: false,
				orderInfo: {},
				status: "",
				state: 'all',
				isRefund: 0, //1是仅退款;0是退货退款
				//imgHost: HTTP_REQUEST_URL,
				dateSelected: '1',
				dateList: [{
						label: '全部',
						val: '1',
					},
					{
						label: '今天',
						val: '2',
					},
					{
						label: '最近7天',
						val: '3',
					},
					{
						label: '本周',
						val: '4',
					},
				],
				payList: [
					{
						label: '全部订单',
						val: '',
					},
					{
						label: '外卖订单',
						val: 0,
					},
					{
						label: '待取快递订单',
						val: 1,
					}
					// {
					// 	label: '拼团订单',
					// 	val: 2,
					// }
				],
				confirmOrder: {},
				confirmShow: false,
				searchListData: {
					dateLimit: '',
					limit: 10,
					merId: '',
					orderNo: '',
					page: 1,
					status: 'await',
					type: 1,
					latitude: uni.getStorageSync('user_latitude'),
					longitude: uni.getStorageSync('user_longitude'),
				},
				headerArr: {},
				totalPage: '',
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			//await
			this.state = options.type ? options.type : 'all';
			this.searchListData.status = options.type ? options.type : 'all';
			this.searchListData.type = options.orderType ? options.orderType : -1;
		},
		// created() {
		// 	this.getInitList()
		// 	this.statusHeader()
		// },
		onShow() {
			if (this.isLogin) {
				this.searchListData.page=1
				this.getInitList()
				this.statusHeader()
			} else {
				toLogin();
			}
		},
		methods: {
			// 拨打电话
			makePhoneCall(phone) {
				const phoneNumber = phone; // 替换为的电话号码
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					success() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('拨打电话失败');
					}
				});
			},
			//订单表头数量
			statusHeader() {
				orderStatusNum(this.searchListData).then(res => {
					this.headerArr = res.data
				})
			},
			// 订单搜索
			searchSubmit() {
				this.searchListData.page=1
				this.getInitList()
				this.statusHeader()
			},
			//订单列表
			getInitList(type) {
				this.loading=true;
				//let api=riderOrderList;
				let api=this.searchListData.type==0?riderOrderList:(this.searchListData.type==1?riderExpressOrderList:riderOrderAllList);
				api(this.searchListData).then(res => {
					//下拉触底
					if (type == 'bottom') {
						this.list = this.list.concat(res.data.list)
					} else {
						this.list = res.data.list
					}
					this.totalPage = res.data.totalPage
				}).catch(err=>{
					this.$util.Tips({
						title: err
					})
				})
				this.loading=false;
			},
			toDetail(item) {
				uni.navigateTo({
					url: (this.searchListData.type==1 || item.orderType==1)?`/pages/rider_index/express/detail?orderInfo=${JSON.stringify(item)}`:`/pages/rider_index/order/detail?orderInfo=${JSON.stringify(item)}`
				})
				
				
			},
			//查看内置地图
			goMap(item) {
				let that = this;
				let latitude=item.status==1 || item.status==0?item.merLatitude:item.userLatitude;
				let longitude=item.status==1 || item.status==0?item.merLongitude:item.userLongitude;
				let merName=item.status==1 || item.status==0?item.merName:item.userName;
				let address=item.status==1 || item.status==0?item.merAddress:item.userAddress;
				//#ifdef H5
				if (that.$wechat.isWeixin() === true) {
					that.$wechat.seeLocation({
						latitude: parseFloat(latitude),
						longitude: parseFloat(longitude),
						name: merName,
						address: address,
					}).then(res => {
						console.log('success');
					})
				} else {
					//#endif
					uni.openLocation({
						latitude: parseFloat(latitude),
						longitude: parseFloat(longitude),
						scale: 8,
						name: merName,
						address: address,
						success: function(res) {
							that.go_map = true
						},
					});
					// #ifdef H5
				}
				//#endif
			},
			//发送货
			goDelivery(item) {
				if (item.refundStatus == 1) return this.$util.Tips({
					title: '请处理售后，再操作',
				});
				uni.navigateTo({
					url: `/pages/admin/order/send?orderNo=${item.orderNo}`
				})
			},
			// 商品操作
			modify: function(item, status, type) {
				this.change = true;
				this.status = status.toString();
				this.orderInfo = item;
				if (status == 2) {
					this.isRefund = type
				}
			},
			//接单
			receiving(item) {
				riderOrderReceiving(item).then(res => {
					 if (res.code == 200) {
						 setTimeout(() => {
						 	this.statusHeader();
						 	this.getInitList();
						 }, 50)
						 return this.$util.Tips({
						 	title: '接单成功'
						 })
					 } else {
					 	self.$util.Tips({
					 		title: res.message
					 	});
					 }
				})
			},
			//取消
			cancel(item) {
				orderCancel(item.orderNo).then(res => {
					 if (res.code == 200) {
						 setTimeout(() => {
						 	this.statusHeader();
						 	this.getInitList();
						 }, 50)
						 return this.$util.Tips({
						 	title: '取消成功'
						 })
					 } else {
					 	self.$util.Tips({
					 		title: res.message
					 	});
					 }
				})
			},
			//取货
			pickUp(item) {
				orderPickUp(item.orderNo).then(res => {
					 if (res.code == 200) {
						 setTimeout(() => {
						 	this.statusHeader();
						 	this.getInitList();
						 }, 50)
						 return this.$util.Tips({
						 	title: '取件完成，请尽快安排配送'
						 })
					 } else {
					 	self.$util.Tips({
					 		title: res.message
					 	});
					 }
				})
			},
			//收货完成
			complete(item) {
				orderComplete(item.orderNo).then(res => {
					 if (res.code == 200) {
						 setTimeout(() => {
						 	this.statusHeader();
						 	this.getInitList();
						 }, 50)
						 return this.$util.Tips({
						 	title: '配送完成'
						 })
					 } else {
					 	self.$util.Tips({
					 		title: res.message
					 	});
					 }
				})
			},
			changeclose: function(msg) {
				this.change = msg;
			},
			async savePrice(opt) {
				if (!opt.remark) {
					return this.$util.Tips({
						title: '请输入备注'
					})
				} else {
					this.toMark(this.orderInfo.orderNo, opt.remark)
				}
			},
			//备注
			toMark(orderNo, remark) {
				employeeOrderMark({
					orderNo,
					remark
				}).then(res => {
					res.code == 200 && (this.change = false);
					return this.$util.Tips({
						title: '备注成功'
					})
				})
			},
			// 导航切换
			changeStatus(val) {
				if (this.state != val) {
					this.state = val;
					// this.where.status = val == -1 ? '' : val;
					this.searchListData.status = val
					this.searchListData.page = 1
					this.searchListData={...this.searchListData}
					this.getInitList()
				}
			},
			dateChange(value) {
				if (value == 1) {
					this.searchListData.dateLimit = ''
					this.dateSelected = value;
					return
				} else if (value == 2) {
					this.searchListData.dateLimit = 'today'
				} else if (value == 3) {
					this.searchListData.dateLimit = 'lately7'
				} else if (value == 4) {
					this.searchListData.dateLimit = 'week'
				}
				this.dateSelected = value;
			},
			payChange(val) {
				this.searchListData.type = val;
			},
			// 点击确认按钮
			submitBtn() {
				this.filterShow = false;
				this.searchListData.page=1
				this.getInitList()
				this.statusHeader()
			},
			//点击重置按钮
			resetBtn() {
				this.searchListData.orderNo=''
				this.searchListData.dateLimit = ''
				this.searchListData.type = '';
				this.dateSelected = '1'
			}
		},
		onReachBottom() {
			this.searchListData.page += 1
			this.totalPage >= this.searchListData.page && this.getInitList('bottom')
		}
	}
</script>

<style lang="scss" scoped>
	@import '../style/admin_order.scss';
</style>
<style scoped lang="scss">
	// .map {
	// 	text-align: center;
	// 	padding-left: 36rpx;
	// 	position: relative;
	// 	@include main_color(theme);
	
	// 	&::before {
	// 		content: '';
	// 		display: inline-block;
	// 		width: 2rpx;
	// 		height: 42rpx;
	// 		background-color: #DDDDDD;
	// 		position: absolute;
	// 		left: 0;
	// 		top: 18rpx;
	// 	}
	
	// 	.iconfont {
	// 		color: var(--view-theme);
	// 	}
	
	// 	.map_text {
	// 		color: var(--view-theme);
	// 	}
	// }
	// .order-item {
	// 	background-color: #fff;
	// 	border-radius: 23rpx;
	// 	padding: 19rpx 38rpx;
	// }

	// .order-top {
	// 	display: flex;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	padding: 17rpx;
	// 	border-bottom: 2rpx dashed #D6D7DC;
	// }

	// .bold-size {
	// 	white-space: nowrap;
	// 	overflow: hidden;
	// 	text-overflow: ellipsis;
	// 	font-weight: 500;
	// 	font-size: 27rpx;
	// 	color: #141414;
	// 	z-index: 9999;
	// }

	// .onBold-size {
	// 	font-weight: 400;
	// 	font-size: 23rpx;
	// 	color: #999999;
	// }

	// .order-content {
	// 	padding: 10rpx 0 15rpx 0;

	// 	.box-item {
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: space-between;
	// 		margin-bottom: 10rpx;
	// 	}

	// 	.order-info {
	// 		width: 100%;
	// 		background: #F8F9FB;
	// 		padding: 19rpx 38rpx 45rpx 19rpx;

	// 		.store-name {
	// 			font-weight: 600;
	// 			font-size: 27rpx;
	// 			color: #141414;
	// 		}

	// 		.scroll-container {
	// 			display: flex;
	// 			flex-wrap: nowrap;
	// 			margin: 20rpx 0;
	// 			overflow-x: auto;
	// 			/* 允许水平滚动 */
	// 			white-space: nowrap;
	// 			/* 防止项目换行 */
	// 			-webkit-overflow-scrolling: touch;
	// 			/* 在iOS上平滑滚动 */

	// 			.item {
	// 				display: flex;
	// 				flex-direction: column;
	// 				align-items: center;
	// 				justify-content: center;
	// 				margin-right: 19rpx;

	// 				image {
	// 					width: 115rpx;
	// 					height: 115rpx;
	// 				}

	// 				text {
	// 					font-weight: 400;
	// 					font-size: 21rpx;
	// 					color: #141414;
	// 					margin-top: 9rpx;
	// 				}
	// 			}
	// 		}

	// 		.container2 {
	// 			display: flex;
	// 			justify-content: space-between;
	// 			align-items: center;
	// 			font-weight: 500;
	// 			font-size: 21rpx;
	// 			color: #141414;

	// 			view {
	// 				display: flex;
	// 				align-items: center;
	// 			}

	// 			.image2 {
	// 				width: 42rpx;
	// 				height: 42rpx;
	// 			}
	// 		}
	// 	}
	// }

	// .order-dis {
	// 	font-weight: 400;
	// 	font-size: 23rpx;
	// 	color: #141414;
	// }

	// .order-icon {
	// 	display: inline-block;
	// 	margin-left: 10rpx;
	// 	margin-right: 20rpx;
	// 	padding: 5rpx 10rpx;
	// 	font-weight: 400;
	// 	font-size: 23rpx;
	// 	color: #FFFFFF;
	// 	border-radius: 50%;
	// 	background-color: $bg-color-primary;
	// }

	// .order-bottom {
	// 	border-top: 2rpx dashed #D6D7DC;

	// 	.bottom-but {
	// 		padding: 39rpx 67rpx;

	// 		.sub {
	// 			width: 100%;
	// 			background-color: $bg-color-primary;
	// 			font-weight: 500;
	// 			font-size: 31rpx;
	// 			color: #FFFFFF;
	// 			padding: 17rpx 0;
	// 		}
	// 	}
	// }

	// .icon-info {
	// 	width: 8rpx;
	// 	height: 31rpx;
	// 	background: $bg-color-primary;
	// 	margin-right: 15rpx;
	// }

	// .line {
	// 	z-index: 1;
	// 	position: absolute;
	// 	left: 28rpx;
	// 	width: 1rpx;
	// 	height: 100%;
	// 	border-left: 1rpx dashed $bg-color-primary;
	// }
</style>