zh_order_food_xcx/pages/order/index.vue

<template>
	<view class="flex-common-css iPhone-bottom 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" :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 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 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="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">
							共 {{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 == 5 && 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 == 3 || type == 5 && item.order_status == 4">
							二维码
						</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('ticket', 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 b-rad-20">
				<!-- <UniQrcode :text="qrcodeData"></UniQrcode> -->
				<!-- <uv-qrcode class="b-rad-20" ref="qrcode" :value="qrcodeData" :options="options2"></uv-qrcode> -->
			</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 {
		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 {
		groupOrderStatus,
		groupOrderList
	} from "@/api/groupOrder.js"
	import {
		ticketPay
	} from '@/api/ticket.js';
	import {
		ticketOrderStatus,
		ticketOrderList
	} from "@/api/ticketOrder.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
					},
					{
						name: '干洗',
						id: 5
					},
				],
				page: 1,
				list: [],
				total: 0,
				navTypeData: [],
				navTypeKey: 0,
				isAjax: false,
				qrcodeData: '',
				options2: {}
			};
		},
		onShow() {
			this.resetList();
		},
		methods: {
			openCode(item) {
				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'
					})
				} else if (type == 'ticket') {
					uni.navigateTo({
						url: '/pages-buy/ticket'
					})
				} 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/ticket-info?orderId=` + item.id
					})
				} else if (this.type === 5) {
					uni.navigateTo({
						url: `/pages-order/laundry-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.ticketPay(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.ticketOrderList()
					} else if (this.type === 5) {
						this.laundryOrderList()
					}
				}
			},
			resetList() {
				this.page = 1;
				this.list = [];
				this.getList();
			},
			selectType(type) {
				if (type != this.type) {
					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
				})
			},
			tackOut(item) {
				// 外卖取消订单
				orderCancel({
					order_id: item.id
				}).then((res) => {
					if (res.code == 1) {
						tools.success(res.msg)
						this.page = 1;
						this.list = [];
						this.orderList()
					} else {
						tools.error(res.msg)
					}
				})
			},
			expressCancel(item) {
				// 代取取消订单
				expressOrderCancel({
					order_id: item.id
				}).then((res) => {
					if (res.code == 1) {
						tools.success(res.msg)
						this.page = 1;
						this.list = [];
						this.expressOrderList()
					} else {
						tools.error(res.msg)
					}
				})
			},
			cancel(item) {
				// 干洗取消订单
				laundryOrderCancel({
					order_id: item.id
				}).then((res) => {
					if (res.code == 1) {
						tools.success(res.msg)
						this.page = 1;
						this.list = [];
						this.laundryOrderList()
					} else {
						tools.error(res.msg)
					}
				})
			},
			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.ticketOrderList()
				} 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.ticketOrderStatus()
					this.ticketOrderList()
				} 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
					}
				})
			},
			ticketOrderStatus() {
				// 票务订单状态
				ticketOrderStatus().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)
						}
					}
				})
			},
			ticketOrderList() {
				// 票务订单列表
				ticketOrderList({
					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) {
				// 外卖支付
				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) {
				// 代取支付
				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) {
				// 团购支付
				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("支付失败");
					}
				})
			},
			ticketPay(id) {
				// 票务支付
				ticketPay({
					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.ticketOrderList()
							},
							fail: (err) => {
								this.isAJAX = false;
								tools.error("支付失败");
							},
						});
					} else {
						this.isAJAX = false;
						tools.error("支付失败");
					}
				})
			},
			laundryPay(id) {
				// 干洗支付
				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>
	.nav-b{
		position: relative;
		z-index: -1 !important;
	}
	.nav-box {
		padding: 26rpx 44rpx;
		overflow-x: scroll;

		.nav-item {
			margin-right: 76rpx;
			white-space: nowrap;
			position: relative;

			.nav-item-x {
				position: absolute;
				width: 48rpx;
				height: 6rpx;
				border-radius: 20rpx;
				background-color: #41ABF5;
				left: 12rpx;
				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>