uniapp-shunfengche/pages/order/order.vue

<template>
	<view class="order">
		<!-- #ifdef H5 -->
		<view style="position: fixed;top:0rpx;width: 100%;z-index: 999;">
		<!-- #endif -->
			<!-- #ifndef H5 -->
			<view style="position: fixed;top: 0;width: 100%;z-index: 999;">
			<!-- #endif -->
				<u-tabs :list="list" :is-scroll="true" active-color="#fe6b01" inactive-color=" #666666" :bold="bold"
					:current="current" @change="change" :show-bar="true"></u-tabs>
			</view>

			<view class="ifbox">

				<view class="order_box" v-for="(item,index) in order" :key="index"
					@click="bindorderDetail(item.ordersId)">
					<view class="order_success">
						<view class="text-bold text_bolds1" v-if="item.status==1"><!-- 等待支付车费 -->待支付</view>
						<view class="text-bold text_bolds2" v-if="item.status==2"><!-- 等待车主接单 -->待接单</view>
						<view class="text-bold text_bolds3" v-if="item.status==3"><!-- 等待车主前来 -->已接单</view>
						<view class="text-bold text_bolds4" v-if="item.status==4"><!-- 车主正在前往 -->进行中</view>
						<view class="text-bold text_bolds5" v-if="item.status==5"><!-- 已经到达地址 -->已抵达</view>
						<view class="text-bold text_bolds6" v-if="item.status==6"><!-- 订单已取消 -->已取消</view>
						<!-- 状态 1待支付 2待接单 3已接单 4进行中 5已抵达 6已取消 -->
						<view class="order_name"><!-- 待支付 --><view class="order_money">¥{{item.payMoney}}</view></view>
					<!-- 	<view class="order_name" v-if="item.status==2">待接单</view>
						<view class="order_name" v-if="item.status==3">已接单</view>
						<view class="order_name" v-if="item.status==4">进行中</view>
						<view class="order_name" v-if="item.status==5">已抵达</view>
						<view class="order_name" v-if="item.status==6">已取消</view> -->
					</view>
					<u-line color="#E6E6E6" />
					<view class="order_city">
						<view class="flex align-center">
							<image v-if="globalImages" :src="globalImages + 'images/static/upload/time.png'" style="width: 28rpx;height: 28rpx;"></image>
							<view style="margin-left: 16rpx;" class="add_name">{{item.appointmentStartTime}}</view>
						</view>

						<view class="margin-tb flex align-center">
							<image v-if="globalImages" :src="globalImages + 'images/static/upload/person.png'" style="width: 30rpx;height: 31rpx;"></image>
							<view style="margin-left: 16rpx;" class="add_name">
								{{item.appointmentNum}}人乘坐·{{item.appointmentType == 1 ? '独享' : '拼车'}}
							</view>
						</view>

						<view class="flex align-center add_name" style="margin: 30rpx 0rpx 4rpx;">
							<view class="green"></view>出发地点：{{item.shipAddress}}
						</view>
						<image v-if="globalImages" :src="globalImages + 'images/static/upload/up.png'" class="order_up"></image>
						<view class="flex align-center add_name">
							<view class="orgin"></view>到达地点：{{item.deliveryAddress}}
						</view>
					</view>
					<u-line color="#E6E6E6" />
					<view class="flex align-center justify-between">
						<view class="order_money"</view>

						<view class="order_btn padding">
							<view class="btn3" v-if="item.status==2 || item.status==1 || item.status==3" @tap.stop="bindorderOff(item)">
								取消订单</view>
							
							<view class="btn2 margin-left" v-if="item.status==3&&item.payUser==0"
								@click.stop="bindorderDetail(item.indentNumber)">立即支付</view>
							<view class="btn3 margin-left" v-if="item.status == 5 &&!item.evaluateMessage"
								@tap.stop="bindcomment(item)">
								去评价
							</view>
							<view class="btn2 margin-left" v-if="item.status!=3 && item.status!=4 " @click.stop="backindex()">再来一单</view>
							<view class="btn2 margin-left" v-if="item.status==4" @click="goNav('/my/setting/jinji')">安全求助</view>
							<!-- <view class="btn2 margin-left" v-if="item.status==4" @click="bindorderDetail(item.ordersId)">详情</view> -->
							<!-- <view class="btn2 margin-left" v-if="item.status == 5 " @tap.stop="bindtousu(item)">
								去投诉
							</view> -->
						</view>
					</view>
				</view>
				<view class="empty" v-if="order.length == 0">
					<view
						style="width: 90%; margin: 0 auto; position: fixed;top: 30%;left: 0rpx;right: 0rpx;text-align: center;">
						<image v-if="globalImages" :src="globalImages + 'images/static/image/emety.png'" style="width: 300rpx;height: 300rpx;"></image>
						<view style="color: #CCCCCC;">暂无内容</view>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	export default {
		data() {
			return {
				list: [{
					name: '全部',
					id: ''
				}, {
					name: '待支付',
					id: 1
				}, {
					name: '待接单',
					id: 2
				}, {
					name: '已接单',
					id: 3
				}, {
					name: '进行中',
					id: 4
				}, {
					name: '已抵达',
					id: 5
				}, {
					name: '已取消',
					id: 6
				}],
				current: 0,
				bold: false,
				page: 1,
				limit: 10,
				order: [],
				totalPage: 0,
				arr: [],
				showModal: true,
				userId: '',
				time: '',

				creditScore: 0,
				AllcreditScore: 0,
				globalImages: '',
			}
		},
		onLoad() {
			waitForGlobalImages().then((path) => {
				console.log('✅ 全局图片路径:', path)
				this.globalImages = path
			  })
			let that = this;
			that.$Request.getT('/app/common/type/427').then(res => { //订单状态通知 427
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
			// that.$Request.getT('/app/common/type/269').then(res => { //订单完成通知
			// 	if (res.code == 0) {
			// 		if (res.data && res.data.value) {
			// 			that.arr.push(res.data.value)
			// 		}
			// 	}
			// })

			that.$Request.getT('/app/common/type/364').then(res => { // 每次取消扣除的信用分数量 364
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.creditScore = res.data.value
					}
				}
			})
			that.$Request.getT('/app/common/type/365').then(res => { // 低于多少不能接单和下单 365
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.AllcreditScore = res.data.value
					}
				}
			})
		},
		onShow() {
			// this.order = []
			let token = this.$queue.getData('token')
			this.userId = this.$queue.getData('userId')
			if (token) {
				let index = uni.getStorageSync('current')
				if (index) {
					this.current = index
					this.page = 1;
					this.orderList()
					uni.removeStorageSync('current')
				} else {
					this.current = 0
					this.page = 1;
					this.orderList()
				}
				if (this.showModal) {
					// #ifdef MP-WEIXIN
					this.openMsg()
					// #endif
				}
				let that = this
				that.time = setInterval(function() {
					that.orderList()
				}, 30000)
			} else {
				uni.stopPullDownRefresh();
				uni.showModal({
					title: '提示',
					content: '请先去登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/my/register'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}

		},
		onHide() {
			uni.removeStorageSync('current')
			clearInterval(this.time)
		},
		onUnload() {
			uni.$off('send')
			uni.$off('current')

		},
		methods: {
			// 紧急求助
			goNav(url) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				let token = this.$queue.getData("token");
				if (token) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.bindlogin();
				}
			},
			backindex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			change(index) {
				console.log(index)
				this.current = index;
				this.page = 1;
				this.orderList()
			},
			// 订单获取
			orderList() {
				uni.showLoading({
					title: '加载中...',
					mask: false
				});
				let indentState = this.list[this.current].id
				this.$Request.getT('/app/orders/selectMyOrdersList?page=' + this.page + '&limit=' + this.limit +
					'&status=' + indentState).then(res => {
					if (res.code === 0) {
						if (this.page == 1) {
							this.order = res.data.list
						}
						if (this.page > 1) {
							if (res.data.list.length > 0) {
								this.order = this.order.concat(res.data.list)

							}
						}
						this.totalPage = res.data.pages
					}
					uni.hideLoading()
					uni.stopPullDownRefresh();

				});
			},
			// 订单详情
			bindorderDetail(indentNumber) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				console.log(indentNumber)
				// uni.navigateTo({
				// 	url: '/pages/order/orderDetail/detail?indentNumber=' + indentNumber
				// })
				uni.navigateTo({
					url: '/my/order/pay?indentNumber=' + indentNumber
				})
			},
			// 再来一单
			bindorder(e) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				console.log(e)
				let index = e.indentType
				let current = e.buyType
				if (e.indentType == 1 || e.indentType == 2) {
					uni.navigateTo({
						url: '/pages/Helpsend/Helpsend?indentNumber=' + e.indentNumber + '&index=' + index
					})
				} else if (e.indentType == 3) {
					uni.navigateTo({
						url: '/pages/Helppay/Helppay?indentNumber=' + e.indentNumber + '&index=' + index +
							'&current=' + current
					})
				} else if (e.indentType == 4) {
					uni.navigateTo({
						url: '/pages/Cityservice/Cityservice?indentNumber=' + e.indentNumber + '&index=' + index
					})
				}
			},
			// 去评价
			bindcomment(e) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				// uni.navigateTo({
				// 	url: '/my/order/comments?indentNumber=' + e.indentNumber + '&riderUserId=' + e
				// 		.riderUserId + '&userId=' + e.userId + '&ordersNo=' + e.ordersNo + '&ordersId=' + e.ordersId
				// })
				uni.navigateTo({
				  url: '/my/order/comments?data=' + encodeURIComponent(JSON.stringify(e))
				})
			},
			bindtousu(e) { //投诉
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				uni.navigateTo({
					url: '/my/order/complaint?indentNumber=' + e.indentNumber + '&riderUserId=' + e
						.riderUserId
				})
			},
			// 取消订单
			bindorderOff(e) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				let indentNumber = e.ordersId
				uni.showModal({
					title: '温馨提示',
					content: '确定取消订单？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$Request.postT('/app/orders/cancelOrders?ordersId=' + indentNumber + '&isDriver=0')
								.then(res => {
									if (res.code == 0) {
										uni.showToast({
											title: '订单取消成功'
										});
										this.page = 1;
										this.orderList()
									} else {
										uni.hideLoading();
										uni.showModal({
											showCancel: false,
											title: '订单失败',
											content: res.msg
										});
									}
								});
						}
					}
				});
			},
			//确认订单
			bindconfirm(e) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				// console.log(e)
				let indentNumber = e.indentNumber
				console.log(indentNumber)
				this.$Request.postT('/app/indent/userDelivery?indentNumber=' + indentNumber).then(res => {
					console.log(res)
					if (res.code == 0) {
						uni.showToast({
							title: '订单确认成功'
						});
						this.page = 1;
						this.orderList()
					} else {
						uni.hideLoading();
						uni.showModal({
							showCancel: false,
							title: '订单确认失败',
							content: res.msg
						});
					}
				});
			},
			// 立即付款
			bindorderpay(e) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				uni.navigateTo({
					url: '/pages/order/pay/pay?indentNumber=' + e.indentNumber
				})
			},
			// 开启订阅消息
			openMsg() {
				var that = this
				wx.getSetting({
					withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
					success(ret) {
						if (ret.subscriptionsSetting.itemSettings) {
							uni.setStorageSync('sendorderMsg', true)
							uni.openSetting({ // 打开设置页 
								success(rea) {
									console.log(rea.authSetting)
								}
							});
						} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
							uni.setStorageSync('sendorderMsg', false)
							uni.showModal({
								title: '提示',
								content: '为了更好的体验,请绑定消息推送',
								confirmText: '确定',
								cancelText: '取消',
								success: function(res) {
									if (res.confirm) {
										uni.requestSubscribeMessage({
											tmplIds: that.arr,
											success(re) {
												var datas = JSON.stringify(re);
												if (datas.indexOf("accept") != -1) {
													console.log(re)
												}
											},
											fail: (res) => {
												console.log(res)
											}
										})
										that.showModal = false
									} else if (res.cancel) {
										that.showModal = true
									}
								}
							})
						}
					}
				})
			}
		},
		onReachBottom: function() {
			if (this.userId) {
				if (this.page < this.totalPage) {
					this.page = this.page + 1;
					this.orderList();
				}
			}
		},
		onPullDownRefresh: function() {
			if (this.userId) {
				this.page = 1;
				this.orderList();
			}

		},
	}
</script>

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

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

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

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

	.empty {
		width: 100%;
		background: #ffffff;
		height: 100vh;
	}

	.ifbox {
		/* #ifdef H5 */
		padding-top: 85rpx;
		/* #endif */
		/* #ifndef H5 */
		padding-top: 86rpx;
		/* #endif */
	}

	.order_box {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx;

		.order_success {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;

			.order_name {
				color: #346EF6;
				font-weight: bold;
			}
		}
		
		.text_bolds1 {
			font-weight: 500;
			border: 1rpx #fe6b01 solid;
			padding: 8rpx 20rpx;
			border-radius: 13rpx;
			background: #fcf6ec;
			color: #fe6b01;
		}
		
		.text_bolds2 {
			font-weight: 500;
			border: 1rpx #fe6b01 solid;
			padding: 8rpx 20rpx;
			border-radius: 13rpx;
			background: #fcf6ec;
			color: #fe6b01;
		}
		
		.text_bolds3 {
			font-weight: 500;
			border: 1rpx #00c18a solid;
			padding: 8rpx 20rpx;
			border-radius: 13rpx;
			background: #e8fbf6;
			color: #00c18a;
		}
		
		.text_bolds4 {
			font-weight: 500;
			border: 1rpx #409eff solid;
			padding: 8rpx 20rpx;
			border-radius: 13rpx;
			background: #ecf5ff;
			color: #409eff;
		}
		
		.text_bolds5 {
			font-weight: 500;
			border: 1rpx #00c18a solid;
			padding: 8rpx 20rpx;
			border-radius: 13rpx;
			background: #e8fbf6;
			color: #00c18a;
		}
		
		.text_bolds6 {
			font-weight: 500;
			border: 1rpx #f56c6c solid;
			padding: 8rpx 20rpx;
			border-radius: 13rpx;
			background: #ffe9e9;
			color: #f56c6c;
		}

		.order_city {
			padding: 30rpx;
			color: #666666;
		}

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

		.order_money {
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 34rpx;
			color: #FF4B36;
		}

		.order_btn {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.btn3 {
				width: 150rpx;
				height: 60rpx;
				border: 1px solid #fe6b01;
				border-radius: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fe6b01;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn2 {
				width: 150rpx;
				height: 60rpx;
				background: #fe6b01;
				border-radius: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn1 {
				width: 150rpx;
				height: 60rpx;
				border: 1px solid #999999;
				border-radius: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: center;

			}
		}
	}
</style>