zh_order_food_xcx/pages/order/index.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box bgc-F5F4F9">
		<newNav textName="订单" navBackgroundColor='#fff' titleColor='#333' leftIconColor="#333"></newNav>

		<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 p-20 box-border-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 class="shops-img mr-4" src="@/static/img/order-food/shop-icon.png" mode=""></image>
							<view class="fs-30 fc-3 fw-600 shops-name text-overflow-ellipsis-one">
								{{item.shop_name}}
							</view>
						</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">
							<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="aspectFill">
									</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="aspectFill">
									</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="goods-num fc-6 fs-24 text-align-center">
							共 {{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="align-items-center">
							<view class="fs-28 fc-9">
								实付
							</view>
							<view class="fs-32 fc-3 fw-600">
								￥{{item.pay_money}}
							</view>
						</view>
					</view>
					<view class="align-items-center flex-justify-end">
						<view @click.stop="goToUrl('takeOut', item)" class="item-but but-class-one fs-28">
							再来一单
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</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,
				page: 1,
				list: [{
						shop_name: '古茗(回兴店)古茗(回兴店)古茗1...',
						order_status_str: '商家已接单',
						goods_number: 1,
						created_at: '2024.12.05 12:30:09',
						pay_money: '20',
						item: [{
							goods_img: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg',
							goods_name: '茉莉花茶茉莉花茶茉莉1111花 茉莉花茶茉莉花茶茉1111...'
						}]
					},
					{
						shop_name: '古茗(回兴店)古茗(回兴店)古茗1...',
						order_status_str: '商家已接单',
						goods_number: 1,
						created_at: '2024.12.05 12:30:09',
						pay_money: '20',
						item: [{
							goods_img: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg',
							goods_name: '茉莉花茶茉莉花茶茉莉1111花 茉莉花茶茉莉花茶茉1111...'
						}, {
							goods_img: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg',
							goods_name: '茉莉花茶茉莉花茶茉莉1111花 茉莉花茶茉莉花茶茉1111...'
						}, {
							goods_img: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg',
							goods_name: '茉莉花茶茉莉花茶茉莉1111花 茉莉花茶茉莉花茶茉1111...'
						}, {
							goods_img: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg',
							goods_name: '茉莉花茶茉莉花茶茉莉1111花 茉莉花茶茉莉花茶茉1111...'
						}]
					}
				],
				total: 0,
				navTypeData: [],
				navTypeKey: 0,
				isAjax: false,
				qrcodeData: '',
				options2: {},
				onlyCode: '',
				refundReason: [],
				order_id: 0,
				refund_msg: '', // 退款理由
				sureType: 0
			};
		},
		onShow() {},
		onLoad() {},
		onHide() {},
		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) {
				uni.navigateTo({
					url: `/pages-order/takeout-info?orderId=` + item.id
				})
			},
			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.refund_msg = this.refundReason[0].refund_msg
					}
				})
				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.refund_msg = this.refundReason[0].refund_msg
					}
				})
				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.refund_msg = this.refundReason[0].refund_msg
					}
				})
				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;
	}

	.shops-img {
		width: 48rpx;
		height: 48rpx;
	}

	.shops-name {
		max-width: 422rpx;
		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(270deg, #FF3333 0%, #FE6122 100%);
		color: #fff;
	}

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