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 v-if="item.order_status === 1" @click.stop="orderPay(item)"
							class="item-but but-class-one fs-28">
							立即支付
						</view>
						<view v-else @click.stop="goToUrl(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 cartStore from '@/utils/cartStore';
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import {
		commonRefundReason
	} from "@/api/common.js"
	import {
		orderList,
		orderCancel,
		orderPay
	} from "@/api/order.js"
	import {
		expressOrderCancel
	} from "@/api/expressOrder.js"
	import {
		errandsOrderCancel
	} from "@/api/errandsOrder.js"
	import {
		laundryOrderCancel,
		laundryPay
	} from "@/api/laundryOrder.js"
	export default {
		components: {
			EnBlank
		},
		data() {
			return {
				type: 1,
				page: 1,
				list: [],
				total: 0,
				isAjax: false,
				refundReason: [],
				order_id: 0,
				orderData: {}
			};
		},
		onShow() {},
		onLoad() {
			this.orderList()
		},
		onHide() {},
		onUnload() {},
		mounted() {},
		methods: {
			goToUrl(item) {
				// 再来一单
				tools.showLoading()
				this.orderData = item.shopping_cart
				const success = cartStore.reorderFromOrderData(
					uni.getStorageSync('shop_id'),
					this.orderData
				);
				if (success) {
					// 延迟跳转，让用户看到成功提示
					setTimeout(() => {
						// 跳转到店铺页面
						tools.hideLoading()
						uni.redirectTo({
							url: '/pages-takeout/new-shop'
						})
					}, 1500);
				} else {
					tools.error('再来一单失败');
				}
			},
			goToInfo(item) {
				uni.navigateTo({
					url: `/pages-order/takeout-info?orderId=` + item.id
				})
			},
			orderPay(item) {
				// 立即支付
				this.takeawayPay(item.id)
			},
			scrolltolower() {
				++this.page
				this.orderList()
				// console.log('触底');
			},
			orderList() {
				// 订单列表
				orderList({
					page: this.page
				}).then((res) => {
					if (res.code == 1) {
						this.total = res.data.total
						this.list = [...this.list, ...res.data.items]
					}
				})
			},
			takeawayPay(id) {
				// 外卖支付
				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("支付失败");
					}
				})
			},
		},
	}
</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>