zh_order_food_xcx/pages/order/index.vue

<template>
	<view class="flex-common-css box-border-box">
		<Nav class="nav-b" :leftShow='false' :customNav='true' bgckgroundBox='#fff'>
			<template>
				<view slot="custom" class="text-align-center fw-600 fs-36">
					我的订单
				</view>
			</template>
		</Nav>
		<view class="nav-box box-border-box bgc-f display-flex">
			<view class="nav-item flex-1 text-align-center" :class="type == item.id?'fs-36 fw-600':'fs-34 fw-400'"
				v-for="(item,i) in navList" :key="i" @click="selectType(item.id)">
				{{item.name}}
				<view v-if="type == item.id" class="nav-item-x"></view>
			</view>
		</view>
		<scroll-view class="nav-type-box bgc-f p-12-24 box-border-box" :scroll-x="true">
			<view class="nav-type-item text-align-center fs-28" v-for="(item,index) in navTypeData"
				@click="navTypeClick(item.key)"
				:class="navTypeKey== item.key?'bgc-E4F3FD fw-600 fc-41ABF5':'bgc-F4F5F7 fw-400 fc-3'">
				{{item.name}}
			</view>
		</scroll-view>

		<view v-if="list.length == 0" class="scroll-view-css">
			<EnBlank :customSrc='true'>
				<template v-slot:blankImg>
					<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
				</template>
			</EnBlank>
		</view>

		<scroll-view v-else :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
			<view class="list-box">
				<view class="list-item bgc-f b-rad-20 mb-32 p-24 box-border-box" v-for="(item,index) in list"
					@click="goToInfo(item)">
					<view class="align-items-center flex-justify-space mb-24">
						<view class="align-items-center">
							<image v-if="item.site_logo" class="shops-img" :src="item.site_logo" mode="aspectFit">
							</image>
							<image v-else-if="item.shop_logo" class="shops-img" :src="item.shop_logo" mode="aspectFit">
							</image>
							<image v-else-if="item.errands.img" class="shops-img" :src="item.errands.img"
								mode="aspectFit">
							</image>
							<image v-else class="shops-img" src="@/static/img/logo/logo.png" mode=""></image>
							<view v-if="item.site_name" class="fs-32 fc-3 fw-600 shops-name text-overflow-ellipsis-one">
								{{item.site_name}}
							</view>
							<view @click="goToShop(item)" v-else-if="item.shop_name"
								class="fs-32 fc-3 fw-600 shops-name text-overflow-ellipsis-one">
								{{item.shop_name}}
							</view>
							<view v-else-if="item.errands.name"
								class="fs-32 fc-3 fw-600 shops-name text-overflow-ellipsis-one">
								{{item.errands.name}}
							</view>
							<view v-else class="fs-32 fc-3 fw-600 shops-name text-overflow-ellipsis-one">
								君子校园
							</view>
							<!-- <image class="icons" src="@/static/img/toRight.png" mode=""></image> -->
						</view>
						<view class="fc-41ABF5 fs-28">
							{{item.order_status_str}}
						</view>
					</view>
					<view class="align-items-center flex-justify-space mb-24">
						<view class="goods-box" v-if="type == 1 || type == 2 || type == 5">
							<view class="" v-if="item.item.length == 1">
								<view class="align-items-center" v-for="(itemGoods,indexGoods) in item.item">
									<image class="goods-img flex-shrink0" :src="itemGoods.goods_img" mode="aspectFit">
									</image>
									<view class="fs-28 fc-6 text-overflow-ellipsis">
										{{itemGoods.goods_name}}
									</view>
								</view>
							</view>
							<view class="align-items-center goods-two" v-else>
								<view class="flex-direction" v-for="(itemGoods,indexGoods) in item.item">
									<image class="goods-img flex-shrink0" :src="itemGoods.goods_img" mode="aspectFit">
									</image>
									<view
										class="fs-28 fc-6 text-overflow-ellipsis-one goods-two-name text-align-center">
										{{itemGoods.goods_name}}
									</view>
								</view>
							</view>
						</view>
						<view class="" v-else-if='type == 3'>
							<view class="align-items-center">
								<image class="goods-img flex-shrink0" :src="item.goods_img" mode="aspectFit">
								</image>
								<view class="fs-28 fc-6 text-overflow-ellipsis">
									{{item.goods_name}}
								</view>
							</view>
						</view>
						<view class="" v-else='type === 4'>
							{{item.serve_desc}}
						</view>
						<view class="goods-box" v-else>
							<view class="align-items-center">
								<image class="goods-img flex-shrink0" :src="item.goods_img" mode="aspectFit">
								</image>
								<view class="fs-28 fc-6 text-overflow-ellipsis">
									{{item.goods_name}}
								</view>
							</view>
						</view>
						<view class="goods-num text-align-center" v-if="type != 4">
							共 {{item.goods_number}} 件
						</view>
					</view>
					<view class="align-items-center flex-justify-space mb-24">
						<view class="fs-24 fc-9">
							下单时间：{{item.created_at}}
						</view>
						<view class="fs-28 fc-9">
							{{item.order_status == 1?'需付':'实付'}} <text
								class="fs-32 fc-3 fw-600">￥{{item.pay_money}}</text>
						</view>
					</view>
					<view class="align-items-center flex-justify-end">
						<view class="item-but but-class-two fs-28 mr-18" @click="assess(item)"
							v-if="type == 1 && item.order_status == 7 && item.is_comment == 0">
							评价
						</view>
						<view class="item-but but-class-two fs-28 mr-18" @click.stop="tackOut(item)"
							v-if="type == 1 && item.order_status == 2 || type == 1 && item.order_status == 4">
							<!-- 外卖 -->
							取消订单
						</view>
						<view class="item-but but-class-two fs-28 mr-18" @click.stop="cancel(item)"
							v-if="type == 4 && item.order_status == 2">
							<!-- 跑腿 -->
							取消订单
						</view>
						<view class="item-but but-class-two fs-28 mr-18" @click.stop="expressCancel(item)"
							v-if="type == 2 && item.order_status == 2">
							<!-- 代取 -->
							取消订单
						</view>
						<view class="item-but but-class-one fs-28 mr-18" @click.stop="orderPay(item)"
							v-if="item.order_status == 1">
							立即支付
						</view>
						<view class="item-but but-class-one fs-28" @click.stop="openCode(item)"
							v-if="type == 5 && item.order_status == 2 || type == 5 && item.order_status == 4">
							二维码
						</view>
						<view class="item-but but-class-two fs-28 mr-18" @click.stop="goCode(item)"
							v-if="type == 3 && item.order_status == 2">
							<!-- 代取 -->
							查看券码
						</view>
						<view @click.stop="goToUrl('takeOut', item)" class="item-but but-class-one fs-28 mr-18"
							v-if="type == 1 && item.order_status == 3 || type == 1 && item.order_status == 7 || type == 1 && item.order_status == 8 || type == 1 && item.order_status == 9 || type == 1 && item.order_status == 10">
							<!-- 外卖 -->
							再来一单
						</view>
						<view @click.stop="goToUrl('express', item)" class="item-but but-class-one fs-28 mr-18"
							v-if="type == 2 && item.order_status == 4 || type == 2 && item.order_status == 5 || type == 2 && item.order_status == 6">
							<!-- 代取 -->
							再来一单
						</view>
						<view @click.stop="goToUrl('group', item)" class="item-but but-class-one fs-28 mr-18"
							v-if="type == 3 && item.order_status == 2 || type == 3 && item.order_status == 4">
							<!-- 团购 -->
							再来一单
						</view>
						<view @click.stop="goToUrl('errands', item)" class="item-but but-class-one fs-28 mr-18"
							v-if="type == 4 && item.order_status == 2 || type == 4 && item.order_status == 4">
							<!-- 跑腿 -->
							再来一单
						</view>
						<view @click.stop="goToUrl('laundry', item)" class="item-but but-class-one fs-28 mr-18"
							v-if="type == 5 && item.order_status == 5 || type == 5 && item.order_status == 6 || type == 5 && item.order_status == 7">
							<!-- 干洗 -->
							再来一单
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="popup" border-radius="10px 10px 10px 10px" @maskClick='maskClick'>
			<view class="bgc-f p-16 box-border-box b-rad-20" v-if="qrcodeData">
				<!-- <UniQrcode :text="qrcodeData"></UniQrcode> -->
				<uv-qrcode class="b-rad-20" ref="qrcode" :value="qrcodeData" :options="options2"></uv-qrcode>
				<view class="text-align-center fs-38">
					{{onlyCode}}
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupReason" type="bottom" :is-mask-click="false" background-color="#fff" border-radius="10px 10px 0 0">
			<view class="popup-reason-box flex-direction">
				<view class="text-align-center fs-38 fw-600 fc-3 mb-18">
					选择取消原因
				</view>
				<picker-view @change="bindChange" class="picker-view flex-1" :immediate-change='true'>
					<picker-view-column>
						<view class="picker-view-item" v-for="(item,index) in refundReason" :key="index">
							{{item.refund_msg}}
						</view>
					</picker-view-column>
				</picker-view>
				<view class="align-items-center flex-justify-space">
					<view class="flex-1 mr-20 pop-b text-align-center fs-36 b-r-ccc" @click="popCancel">
						取消
					</view>
					<view class="flex-1 pop-b text-align-center bgc-41ABF5 fc-f fs-36" @click="popSure">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// import UniQrcode from 'uniapp-qrcode'
	import tools from '@/service/tools';
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import {
		commonRefundReason
	} from "@/api/common.js"
	import {
		orderStatus,
		orderList,
		orderCancel,
		orderPay
	} from "@/api/order.js"
	import {
		getExpressPay
	} from "@/api/express.js"
	import {
		expressOrderStatus,
		expressOrderList,
		expressOrderCancel
	} from "@/api/expressOrder.js"
	import {
		groupPay
	} from '@/api/groupOrder.js';
	import {
		errandsOrderStatus,
		errandsOrderPay,
		errandsOrderList,
		errandsOrderCancel
	} from "@/api/errandsOrder.js"
	import {
		groupOrderStatus,
		groupOrderList
	} from "@/api/groupOrder.js"
	import {
		laundryOrderStatus,
		laundryOrderList,
		laundryOrderCancel,
		laundryPay
	} from "@/api/laundryOrder.js"
	export default {
		components: {
			EnBlank
		},
		data() {
			return {
				type: 1,
				navList: [{
						name: '外卖',
						id: 1
					},
					{
						name: '代取',
						id: 2
					},
					{
						name: '团购',
						id: 3
					},
					{
						name: '跑腿',
						id: 4
					}
				],
				page: 1,
				list: [],
				total: 0,
				navTypeData: [],
				navTypeKey: 0,
				isAjax: false,
				qrcodeData: '',
				options2: {},
				onlyCode: '',
				refundReason: [],
				order_id: 0,
				refund_msg: '', // 退款理由
				sureType: 0
			};
		},
		onShow() {
			setTimeout(() => {
				uni.showTabBar()
			}, 400)
			let orderPayType = uni.getStorageSync('orderPayType')
			let orderInfoType = uni.getStorageSync('orderInfoType')
			console.log(orderPayType, 'orderPayType');
			console.log(orderInfoType, 'orderInfoType');
			if (orderPayType) {
				this.selectType(orderPayType)
				console.log('固定type');
			} else if (orderInfoType) {

			} else {
				this.resetList();
			}
			uni.$on('takeOutData', (data) => {
				console.log(data, '^^^^^^^^^^^^^^^^^^^^^^^^^');
				this.list.forEach((v, k) => {
					if (v.id == data.id) {
						v.order_status = data.order_status
						v.order_status_str = data.order_status_str
					}
				})
				this.$forceUpdate()
				uni.removeStorageSync('orderInfoType')
				console.log(this.list, 'this.list');
			})
		},
		onLoad() {},
		onHide() {
			console.log("onHide");
			uni.removeStorageSync('orderPayType')
		},
		onUnload() {
			console.log("onUnload");
		},
		mounted() {},
		methods: {
			goCode(item) {
				uni.navigateTo({
					url: '/pages-buy/group-code?order_id=' + item.id
				})
			},
			openCode(item) {
				this.onlyCode = item.only_code
				let m_id = uni.getStorageSync('m_id');
				this.qrcodeData = m_id + "_" + item.order_sn
				this.options2 = {
					size: 300,
					margin: 10
				}
				uni.hideTabBar()
				this.$refs.popup.open('center')
			},
			maskClick() {
				this.$refs.popup.close()
				this.qrcodeData = ''
				uni.showTabBar()
			},
			goToShop(item) {
				// 进入店铺
				uni.navigateTo({
					url: '/pages-takeout/shop?shop_id=' + item.shop_id
				})
			},
			goToUrl(type, item) {
				// 再来一单
				if (type == 'takeOut') {
					// uni.navigateTo({
					// 	url: '/pages-takeout/takeout'
					// })
					uni.navigateTo({
						url: '/pages-takeout/shop?shop_id=' + item.shop_id
					})
				} else if (type == 'express') {
					uni.navigateTo({
						url: '/pages-takeout/replace-take'
					})
				} else if (type == 'group') {
					uni.navigateTo({
						url: '/pages-buy/group-shop?shop_id=' + item.shop_id
					})
				} else if (type == 'errands') {
					uni.navigateTo({
						url: '/pages-takeout/run-errands'
					})
				} else if (type == 'laundry') {
					uni.navigateTo({
						url: '/pages-buy/dry-clean'
					})
				}
			},
			goToInfo(item) {
				if (this.type === 1) {
					uni.navigateTo({
						url: `/pages-order/takeout-info?orderId=` + item.id
					})
				} else if (this.type === 2) {
					uni.navigateTo({
						url: `/pages-order/express-info?orderId=` + item.id
					})
				} else if (this.type === 3) {
					uni.navigateTo({
						url: `/pages-order/group-info?orderId=` + item.id
					})
				} else if (this.type === 4) {
					uni.navigateTo({
						url: `/pages-order/run-errands-info?orderId=` + item.id
					})
				} else if (this.type === 5) {
					uni.navigateTo({
						url: `/pages-order/laundry-info?orderId=` + item.id
					})
				}
				uni.setStorageSync('orderInfoType', this.type)
			},
			orderPay(item) {
				// 立即支付
				if (this.type === 1) {
					this.takeawayPay(item.id)
				} else if (this.type === 2) {
					this.getExpressPay(item.id)
				} else if (this.type === 3) {
					this.groupPay(item.id)
				} else if (this.type === 4) {
					this.errandsOrderPay(item.id)
				} else if (this.type === 5) {
					this.laundryPay(item.id)
				}
			},
			navTypeClick(key) {
				if (this.navTypeKey != key) {
					this.navTypeKey = key
					this.page = 1
					this.list = []
					if (this.type === 1) {
						this.orderList()
					} else if (this.type === 2) {
						this.expressOrderList()
					} else if (this.type === 3) {
						this.groupOrderList()
					} else if (this.type === 4) {
						this.errandsOrderList()
					} else if (this.type === 5) {
						this.laundryOrderList()
					}
				}
			},
			resetList() {
				this.page = 1;
				this.list = [];
				this.getList();
				uni.removeStorageSync('orderPayType')
			},
			selectType(type) {
				let orderPayType = uni.getStorageSync('orderPayType')
				if (type != this.type || orderPayType) {
					this.type = type;
					this.navTypeKey = 0
					this.resetList();
				}
			},
			assess(item) {
				// 外卖评价
				uni.navigateTo({
					url: `/pages-my/appraise?orderId=` + item.id + '&shopName=' + item.shop_name + '&shopLogo=' +
						item.shop_logo
				})
			},
			popCancel() {
				// 退款取消
				this.$refs.popupReason.close()
				uni.showTabBar()
			},
			popSure() {
				// 退款确认
				if (this.sureType === 1) {
					// 外卖退款
					if (this.isAJAX) {
						return
					}
					this.isAJAX = true;
					orderCancel({
						order_id: this.order_id,
						refund_msg: this.refund_msg
					}).then((res) => {
						if (res.code == 1) {
							tools.success(res.msg)
							this.$refs.popupReason.close()
							uni.showTabBar()
							setTimeout(() => {
								this.page = 1;
								this.list = [];
								this.orderList()
							}, 1500)
							this.isAJAX = false;
						} else {
							tools.error(res.msg)
							this.isAJAX = false;
						}
					})
				} else if (this.sureType === 2) {
					// 代取退款
					if (this.isAJAX) {
						return
					}
					this.isAJAX = true;
					expressOrderCancel({
						order_id: this.order_id,
						refund_msg: this.refund_msg
					}).then((res) => {
						if (res.code == 1) {
							tools.success(res.msg)
							this.$refs.popupReason.close()
							uni.showTabBar()
							setTimeout(() => {
								this.page = 1;
								this.list = [];
								this.expressOrderList()
							}, 1500)
							this.isAJAX = false;
						} else {
							tools.error(res.msg)
							this.isAJAX = false;
						}
					})
				} else if (this.sureType === 3) {
					//跑腿退款
					if (this.isAJAX) {
						return
					}
					this.isAJAX = true;
					errandsOrderCancel({
						order_id: this.order_id,
						refund_msg: this.refund_msg
					}).then((res) => {
						if (res.code == 1) {
							tools.success(res.msg)
							this.$refs.popupReason.close()
							uni.showTabBar()
							setTimeout(() => {
								this.page = 1;
								this.list = [];
								this.errandsOrderList()
							}, 1500)
							this.isAJAX = false;
						} else {
							tools.error(res.msg)
							this.isAJAX = false;
						}
					})
				}
			},
			bindChange(e) {
				let num = e.detail.value[0]
				this.refund_msg = this.refundReason[num].refund_msg
			},
			tackOut(item) {
				// 外卖取消订单
				uni.hideTabBar()
				this.sureType = 1
				this.order_id = item.id
				commonRefundReason().then((res) => {
					if (res.code === 1) {
						this.refundReason = res.data
					}
				})
				this.$refs.popupReason.open()
				// uni.showModal({
				// 	title: '提示',
				// 	content: '是否取消订单？',
				// 	confirmText: '确定',
				// 	confirmColor: '#FB3D03',
				// 	success: (res) => {
				// 		if (res.confirm === true) {
				// 			if (this.isAJAX) {
				// 				return
				// 			}
				// 			this.isAJAX = true;
				// 			orderCancel({
				// 				order_id: item.id
				// 			}).then((res) => {
				// 				if (res.code == 1) {
				// 					tools.success(res.msg)
				// 					setTimeout(() => {
				// 						this.page = 1;
				// 						this.list = [];
				// 						this.orderList()
				// 					}, 1500)
				// 					this.isAJAX = false;
				// 				} else {
				// 					tools.error(res.msg)
				// 					this.isAJAX = false;
				// 				}
				// 			})
				// 		}
				// 	}
				// });
			},
			expressCancel(item) {
				// 代取取消订单
				uni.hideTabBar()
				this.sureType = 2
				this.order_id = item.id
				commonRefundReason().then((res) => {
					if (res.code === 1) {
						this.refundReason = res.data
					}
				})
				this.$refs.popupReason.open()
				// uni.showModal({
				// 	title: '提示',
				// 	content: '是否取消订单？',
				// 	confirmText: '确定',
				// 	confirmColor: '#FB3D03',
				// 	success: (res) => {
				// 		if (res.confirm === true) {
				// 			if (this.isAJAX) {
				// 				return
				// 			}
				// 			this.isAJAX = true;
				// 			expressOrderCancel({
				// 				order_id: item.id
				// 			}).then((res) => {
				// 				if (res.code == 1) {
				// 					tools.success(res.msg)
				// 					setTimeout(() => {
				// 						this.page = 1;
				// 						this.list = [];
				// 						this.expressOrderList()
				// 					}, 1500)
				// 					this.isAJAX = false;
				// 				} else {
				// 					tools.error(res.msg)
				// 					this.isAJAX = false;
				// 				}
				// 			})
				// 		}
				// 	}
				// });
			},
			cancel(item) {
				// 跑腿取消订单
				uni.hideTabBar()
				this.sureType = 3
				this.order_id = item.id
				commonRefundReason().then((res) => {
					if (res.code === 1) {
						this.refundReason = res.data
					}
				})
				this.$refs.popupReason.open()
				// uni.showModal({
				// 	title: '提示',
				// 	content: '是否取消订单？',
				// 	confirmText: '确定',
				// 	confirmColor: '#FB3D03',
				// 	success: (res) => {
				// 		if (res.confirm === true) {
				// 			if (this.isAJAX) {
				// 				return
				// 			}
				// 			this.isAJAX = true;
				// 			laundryOrderCancel({
				// 				order_id: item.id
				// 			}).then((res) => {
				// 				if (res.code == 1) {
				// 					tools.success(res.msg)
				// 					setTimeout(() => {
				// 						this.page = 1;
				// 						this.list = [];
				// 						this.laundryOrderList()
				// 					}, 1500)
				// 					this.isAJAX = false;
				// 				} else {
				// 					tools.error(res.msg)
				// 					this.isAJAX = false;
				// 				}
				// 			})
				// 		}
				// 	}
				// });
			},
			scrolltolower() {
				++this.page
				if (this.type === 1) {
					this.orderList()
				} else if (this.type === 2) {
					this.expressOrderList()
				} else if (this.type === 3) {
					this.groupOrderList()
				} else if (this.type === 4) {
					this.errandsOrderList()
				} else if (this.type === 5) {
					this.laundryOrderList()
				}
				// console.log('触底');
			},
			getList() {
				if (this.type === 1) {
					this.orderStatus()
					this.orderList()
				} else if (this.type === 2) {
					this.expressOrderStatus()
					this.expressOrderList()
				} else if (this.type === 3) {
					this.groupOrderStatus()
					this.groupOrderList()
				} else if (this.type === 4) {
					this.errandsOrderStatus()
					this.errandsOrderList()
				} else if (this.type === 5) {
					this.laundryOrderStatus()
					this.laundryOrderList()
				}
			},
			expressOrderStatus() {
				// 代取订单状态
				expressOrderStatus().then((res) => {
					if (res.code == 1) {
						this.navTypeData = res.data
					}
				})
			},
			orderStatus() {
				// 外卖订单状态
				orderStatus().then((res) => {
					if (res.code == 1) {
						this.navTypeData = res.data
					}
				})
			},
			groupOrderStatus() {
				// 团购订单状态
				groupOrderStatus().then((res) => {
					if (res.code == 1) {
						this.navTypeData = res.data
					}
				})
			},
			errandsOrderStatus() {
				// 跑腿订单状态
				errandsOrderStatus().then((res) => {
					if (res.code == 1) {
						this.navTypeData = res.data
					}
				})
			},
			laundryOrderStatus() {
				// 干洗订单状态
				laundryOrderStatus().then((res) => {
					if (res.code == 1) {
						this.navTypeData = res.data
					}
				})
			},
			orderList() {
				// 外卖订单列表
				orderList({
					status: this.navTypeKey,
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.list.push(...res.data.items)
						}
					}
				})
			},
			expressOrderList() {
				// 代取订单列表
				expressOrderList({
					status: this.navTypeKey,
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.list.push(...res.data.items)
						}
					}
				})
			},
			groupOrderList() {
				// 团购订单列表
				groupOrderList({
					status: this.navTypeKey,
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.list.push(...res.data.items)
						}
					}
				})
			},
			errandsOrderList() {
				// 票务订单列表
				errandsOrderList({
					status: this.navTypeKey,
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.list.push(...res.data.items)
						}
					}
				})
			},
			laundryOrderList() {
				// 干洗订单列表
				laundryOrderList({
					status: this.navTypeKey,
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						if (res.data.items.length > 0) {
							this.list.push(...res.data.items)
						}
					}
				})
			},
			takeawayPay(id) {
				// 外卖支付
				uni.redirectTo({
					url: `/pages-takeout/pay-page?orderId=${id}`
				});
				return
				// if (this.isAJAX) {
				// 	return
				// }
				// this.isAJAX = true;
				// orderPay({
				// 	order_id: id
				// }).then((ret) => {
				// 	if (ret.code === 1) {
				// 		uni.requestPayment({
				// 			provider: "wxpay", //支付类型-固定值
				// 			timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
				// 			nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
				// 			package: ret.data.wx_pay.package, // 固定值
				// 			signType: ret.data.wx_pay.signType, //固定值
				// 			paySign: ret.data.wx_pay.paySign, //签名
				// 			success: (ren) => {
				// 				tools.success("支付成功");
				// 				this.isAJAX = false;
				// 				this.page = 1;
				// 				this.list = [];
				// 				this.orderList()
				// 			},
				// 			fail: (err) => {
				// 				this.isAJAX = false;
				// 				tools.error("支付失败");
				// 			},
				// 		});
				// 	} else {
				// 		this.isAJAX = false;
				// 		tools.error("支付失败");
				// 	}
				// })
			},
			getExpressPay(id) {
				// 代取支付
				uni.redirectTo({
					url: `/pages-takeout/pick-up-pay?orderId=${id}`
				});
				return
				// if (this.isAJAX) {
				// 	return
				// }
				// this.isAJAX = true;
				// getExpressPay({
				// 	order_id: id
				// }).then((ret) => {
				// 	if (ret.code === 1) {
				// 		uni.requestPayment({
				// 			provider: "wxpay", //支付类型-固定值
				// 			timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
				// 			nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
				// 			package: ret.data.wx_pay.package, // 固定值
				// 			signType: ret.data.wx_pay.signType, //固定值
				// 			paySign: ret.data.wx_pay.paySign, //签名
				// 			success: (ren) => {
				// 				tools.success("支付成功");
				// 				this.isAJAX = false;
				// 				this.page = 1;
				// 				this.list = [];
				// 				this.expressOrderList()
				// 			},
				// 			fail: (err) => {
				// 				this.isAJAX = false;
				// 				tools.error("支付失败");
				// 			},
				// 		});
				// 	} else {
				// 		this.isAJAX = false;
				// 		tools.error("支付失败");
				// 	}
				// })
			},
			groupPay(id) {
				// 团购支付
				uni.redirectTo({
					url: `/pages-buy/group-pay-page?orderId=${id}`
				});
				return
				// if (this.isAJAX) {
				// 	return
				// }
				// this.isAJAX = true;
				// groupPay({
				// 	order_id: id
				// }).then((ret) => {
				// 	if (ret.code === 1) {
				// 		uni.requestPayment({
				// 			provider: "wxpay", //支付类型-固定值
				// 			timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
				// 			nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
				// 			package: ret.data.wx_pay.package, // 固定值
				// 			signType: ret.data.wx_pay.signType, //固定值
				// 			paySign: ret.data.wx_pay.paySign, //签名
				// 			success: (ren) => {
				// 				tools.success("支付成功");
				// 				this.isAJAX = false;
				// 				this.page = 1;
				// 				this.list = [];
				// 				this.groupOrderList()
				// 			},
				// 			fail: (err) => {
				// 				this.isAJAX = false;
				// 				tools.error("支付失败");
				// 			},
				// 		});
				// 	} else {
				// 		this.isAJAX = false;
				// 		tools.error("支付失败");
				// 	}
				// })
			},
			errandsOrderPay(id) {
				// 跑腿支付
				uni.redirectTo({
					url: `/pages-takeout/run-errands-mod/pay-page?orderId=${id}`
				});
				return
				// if (this.isAJAX) {
				// 	return
				// }
				// this.isAJAX = true;
				// errandsOrderPay({
				// 	order_id: id
				// }).then((ret) => {
				// 	if (ret.code === 1) {
				// 		uni.requestPayment({
				// 			provider: "wxpay", //支付类型-固定值
				// 			timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
				// 			nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
				// 			package: ret.data.wx_pay.package, // 固定值
				// 			signType: ret.data.wx_pay.signType, //固定值
				// 			paySign: ret.data.wx_pay.paySign, //签名
				// 			success: (ren) => {
				// 				tools.success("支付成功");
				// 				this.isAJAX = false;
				// 				this.page = 1;
				// 				this.list = [];
				// 				this.errandsOrderList()
				// 			},
				// 			fail: (err) => {
				// 				this.isAJAX = false;
				// 				tools.error("支付失败");
				// 			},
				// 		});
				// 	} else {
				// 		this.isAJAX = false;
				// 		tools.error("支付失败");
				// 	}
				// })
			},
			laundryPay(id) {
				// 干洗支付
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				laundryPay({
					order_id: id
				}).then((ret) => {
					if (ret.code === 1) {
						uni.requestPayment({
							provider: "wxpay", //支付类型-固定值
							timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
							nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
							package: ret.data.wx_pay.package, // 固定值
							signType: ret.data.wx_pay.signType, //固定值
							paySign: ret.data.wx_pay.paySign, //签名
							success: (ren) => {
								tools.success("支付成功");
								this.isAJAX = false;
								this.page = 1;
								this.list = [];
								this.laundryOrderList()
							},
							fail: (err) => {
								this.isAJAX = false;
								tools.error("支付失败");
							},
						});
					} else {
						this.isAJAX = false;
						tools.error("支付失败");
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.pop-b {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20rpx;
		// border: 1rpx solid #F9F9F9;
	}

	.popup-reason-box {
		width: 100%;
		height: 45vh;
		overflow: auto;
		border-radius: 20rpx 20rpx 0 0;
		background: #fff;
		padding: 24rpx 0 0;
		box-sizing: border-box;
	}

	.picker-view {
		width: 100%;
		// height: 70%;
	}

	.picker-view-item {
		// height: 90rpx;
		line-height: 68rpx;
		text-align: center;
		background: #F5F5F5;
	}

	.nav-b {
		position: relative;
		z-index: -1 !important;
	}

	.nav-box {
		padding: 26rpx 44rpx;
		overflow-x: scroll;

		.nav-item {
			white-space: nowrap;
			position: relative;

			.nav-item-x {
				position: absolute;
				width: 48rpx;
				height: 6rpx;
				border-radius: 20rpx;
				background-color: #41ABF5;
				left: calc(50% - 24rpx);
				bottom: -10rpx;
			}
		}
	}

	.nav-type-box {
		width: 100%;
		white-space: nowrap;
	}

	.nav-type-item {
		width: 144rpx;
		height: 64rpx;
		line-height: 64rpx;
		margin: 0 24rpx 0 0;
		border-radius: 200rpx;
		display: inline-block;
	}

	.nav-type-item:last-child {
		margin: 0;
	}

	.list-box {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.shops-img {
		width: 48rpx;
		height: 48rpx;
		margin: 0 8rpx 0 0;
		border-radius: 50%;
	}

	.shops-name {
		max-width: 452rpx;
		margin: 0 8rpx 0 0;
	}

	.icons {
		width: 32rpx;
		height: 32rpx;
	}

	.goods-box {
		max-width: 506rpx;
		height: auto;
	}

	.goods-num {
		width: 24rpx;
		height: auto;
	}

	.goods-img {
		width: 144rpx;
		height: 144rpx;
		border-radius: 12rpx;
		margin: 0 16rpx 0 0;
	}

	.goods-two {
		overflow-x: scroll;
		overflow: auto;
	}

	.goods-two-name {
		width: 144rpx;
	}

	.item-but {
		width: 160rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border-radius: 200rpx;
	}

	.but-class-one {
		background: linear-gradient(225deg, #41ABF5 0%, #5BD8FB 100%);
		color: #fff;
	}

	.but-class-two {
		background: #fff;
		border: 2rpx solid #CCCCCC;
		color: #333;
	}
</style>