uniProject/pages/pay/order.vue

<template>
	<view class="ezy-order-page">
		<view class="icon-title-navBar-box">
			<view @click="goBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">我的订单</text>
		</view>
		<view class="ezy-tab-border">

			<uni-segmented-control :current="dingdanData.current" :values="dingdanData.items" active-color="#3A7FE9"
				@clickItem="onChangeTab" class="ezy-tab-box" />
			<view>
				<view v-if="dingdanData.current === 0">
					<scroll-view scroll-y="true" refresher-enabled="true"
						:refresher-triggered="dingdanData.quanbu.loading" :refresher-threshold="50"
						refresher-background="transparent" @refresherrefresh="onRefresh" class="order-scroll-view">
						<!--数学-->
						<uni-list>
							<uni-list-item v-for="item in dingdanData.quanbu.list" class="order-list-item">
								<template v-slot:body>
									<view class="order-item-head">
										<view class="order-name-box">
											<icon></icon><text>鹅状元自营</text>
										</view>
										<view>
											<text>不支持退订</text>
											<text v-if="item.status ==2" class="pay-status">已付款</text>
											<text v-if="item.status ==3" class="pay-status">已关闭</text>
											<text v-if="item.status ==1" class="pay-status">待付款</text>
										</view>
									</view>
									<view class="order-content-box">
										<!-- 需要改成从接口获取的 wgy-->
										<img class="content-img" src="https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFile02dcefaa15894a99afa5cb95a1f02e89.png">
										<view class="content-body-box">
											<view class="content-name">数学暑假进阶L1</view>
											<view class="content-text">适用于L1和学前，介绍介绍，适用于L1和学前，介绍介绍适用于L1和学前，介绍介绍</view>
											<!-- 未付款数据对一下  是否有课程包明细 wgy-->
											<view class="content-money-box" v-if="item.status ==1">
												<view class="order-kcb-btn" @click="detailBtn">课程包明细<icon></icon></view>
												<text class="content-yuanjia">¥{{item.money}}</text>
											</view>
											<!-- 已付款数据对一下  是否有课程包明细 wgy-->
											<view class="content-money-box" v-if="item.status ==2">
												<view class="order-kcb-btn" @click="detailBtn">课程包明细<icon></icon></view>
												<text class="content-yuanjia">¥{{item.money}}</text>
											</view>
										</view>
									</view>
									<view class="content-heji">合计：￥0.03</view>
									<!-- 未付款显示付款按钮 wgy-->
									<view class="order-bottom-box">
										<!-- 微信 -->
										<view class="pay-status-box" v-if="showPayWay" @click="switchPayWay"><icon class="wx-icon"></icon>微信</view>
										<!-- 支付宝 -->
										<view class="pay-status-box" v-if="!showPayWay" @click="switchPayWay"><icon class="zfb-icon"></icon>支付宝</view>
										<!-- 苹果 -->
										<view class="pay-status-box apple-status-box" v-if="false"><icon class="apple-icon"></icon>apple</view>
										<view class="pay-btn" @click="handlePay(item)">立即支付</view>
									</view>
								</template>
							</uni-list-item>
							<uni-load-more :status="dingdanData.quanbu.state" @click="getMore(0)"
								:contentText="dingdanData.quanbu.contentText">
							</uni-load-more>
						</uni-list>
					</scroll-view>
				</view>
				<view v-if="dingdanData.current === 1">
					<scroll-view scroll-y="true" refresher-enabled="true"
						:refresher-triggered="dingdanData.daiFukuan.loading" :refresher-threshold="50" class="order-scroll-view"
						refresher-background="transparent" @refresherrefresh="onRefresh">
							<uni-list>
								<uni-list-item v-for="item in dingdanData.daiFukuan.list" class="order-list-item">
									<template v-slot:body>
										<view class="order-item-head">
											<view class="order-name-box">
												<icon></icon><text>鹅状元自营</text>
											</view>
											<view>
												<text>不支持退订</text>
											<text v-if="item.status ==2" class="pay-status">已付款</text>
											<text v-if="item.status ==3" class="pay-status">已关闭</text>
											<text v-if="item.status ==1" class="pay-status">待付款</text>
											</view>
										</view>
										<view class="order-content-box">
											<!-- 需要改成从接口获取的 -->
											<img class="content-img" src="https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFile02dcefaa15894a99afa5cb95a1f02e89.png">
											<view class="content-body-box">
												<view class="content-name">数学暑假进阶L1</view>
												<view class="content-text">适用于L1和学前，介绍介绍，适用于L1和学前，介绍介绍适用于L1和学前，介绍介绍</view>
												<view class="content-money-box">
													<view class="order-kcb-btn">课程包明细<icon></icon></view>
													<text class="content-yuanjia">¥{{item.money}}</text>
												</view>
											</view>
										</view>
										<view class="order-bottom-box" v-if="item.status ==1">
											<!-- 微信 -->
											<view class="pay-status-box" v-if="showPayWay" @click="switchPayWay"><icon class="wx-icon"></icon>微信</view>
											<!-- 支付宝 -->
											<view class="pay-status-box" v-if="!showPayWay" @click="switchPayWay"><icon class="zfb-icon"></icon>支付宝</view>
											<!-- 苹果 -->
											<view class="pay-status-box apple-status-box" v-if="false"><icon class="apple-icon"></icon>apple</view>
											<view class="pay-btn" @click="handlePay(item)">立即支付</view>
										</view>
									</template>
								</uni-list-item>
								<uni-load-more :status="dingdanData.daiFukuan.state" @click="getMore(1)"
									:contentText="dingdanData.daiFukuan.contentText">
								</uni-load-more>
							</uni-list>
					</scroll-view>
				</view>
				<view v-if="dingdanData.current === 2">
					<scroll-view scroll-y="true" refresher-enabled="true"
						:refresher-triggered="dingdanData.yiFukuan.loading" :refresher-threshold="50" class="order-scroll-view"
						refresher-background="transparent" @refresherrefresh="onRefresh">
							<uni-list>
								<uni-list-item v-for="item in dingdanData.yiFukuan.list" class="order-list-item">
									<template v-slot:body>
										<view class="order-item-head">
											<view class="order-name-box">
												<icon></icon><text>鹅状元自营</text>
											</view>
											<view>
												<text>不支持退订</text>
										<text v-if="item.status ==2" class="pay-status">已付款</text>
										<text v-if="item.status ==3" class="pay-status">已关闭</text>
										<text v-if="item.status ==1" class="pay-status">待付款</text>
											</view>
										</view>
										<view class="order-content-box">
											<!-- 需要改成从接口获取的 -->
											<img class="content-img" src="https://ezy-app.oss-cn-beijing.aliyuncs.com/test/resource/uploadFile02dcefaa15894a99afa5cb95a1f02e89.png">
											<view class="content-body-box">
												<view class="content-name">数学暑假进阶L1</view>
												<view class="content-text">适用于L1和学前，介绍介绍，适用于L1和学前，介绍介绍适用于L1和学前，介绍介绍</view>
												<view class="content-money-box">
													<text class="content-yuanjia">¥{{item.money}}</text>
													<view class="order-kcb-btn">课程包明细<icon></icon></view>
												</view>
											</view>
										</view>
									</template>
								</uni-list-item>
								<uni-load-more :status="dingdanData.yiFukuan.state" @click="getMore(2)"
									:contentText="dingdanData.yiFukuan.contentText">
								</uni-load-more>
							</uni-list>

					</scroll-view>
				</view>
			</view>
		</view>
		<product-dialog ref="mallProductPopup" @payBtn="payBtn"></product-dialog>
		<CustomTabBar></CustomTabBar>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		getOrderList,
		orderAdd
	} from "@/api/order";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		toast,
		getUserIdentity
	} from "@/utils/common";
	import cacheManager from '@/utils/cacheManager.js';
	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
	import productDialog from '../mall/productDialog.vue'
	const mallProductPopup = ref(null);
	const showPayWay = ref(true)
	function switchPayWay(){
		showPayWay.value = !showPayWay.value
	}
	function detailBtn(){
		mallProductPopup.value.detailShow();
	}
	const dingdanData = reactive({
		items: ['全部', '待付款', '已付款'],
		current: 0,
		quanbu: {
			page: 0,
			list: [],
			loading: false,
			state: 'more',
			contentText: {
				contentdown: '查看更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多'
			}

		},
		daiFukuan: {
			page: 0,
			list: [],
			loading: false,
			state: 'more',
			contentText: {
				contentdown: '查看更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多'
			}
		},
		yiFukuan: {
			page: 0,
			list: [],
			loading: false,
			state: 'more',
			contentText: {
				contentdown: '查看更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多'
			}
		},
	})


	function handlePay(item) {
		uni.redirectTo({
			url: `/pages/pay/svip?cardId=${item.cardId}&formPage=my&orderId=${item.id}`
		})
		// uni.redirectTo({
		// 	url: `/pages/pay/orderPay?id=${item.id}`
		// })
	}

	function onChangeTab(e) {
		if (dingdanData.current !== e.currentIndex) {
			dingdanData.current = e.currentIndex;
			if (dingdanData.current == 0) {
				dingdanData.quanbu.page = 0
			} else if (dingdanData.current == 1) {
				dingdanData.daiFukuan.page = 0
			} else if (dingdanData.current == 2) {
				dingdanData.yiFukuan.page = 0
			}
			refreshData(dingdanData.current);
		}
	}

	function refreshData(code) {
		const opt = {
			page: 1,
			size: 10, // 固定查询10条
			status: code
		}

		if (code == 0) {
			dingdanData.quanbu.list = [];
			// 数学
			dingdanData.quanbu.state = 'loading';
			dingdanData.quanbu.page++;
			opt.page = dingdanData.quanbu.page;
		} else if (code == 1) {
			dingdanData.daiFukuan.list = [];
			// 英语
			dingdanData.daiFukuan.state = 'loading';
			dingdanData.daiFukuan.page++;
			opt.page = dingdanData.daiFukuan.page;
		} else if (code == 2) {
			dingdanData.yiFukuan.list = [];
			// 英语
			dingdanData.yiFukuan.state = 'loading';
			dingdanData.yiFukuan.page++;
			opt.page = dingdanData.yiFukuan.page;
		}
		getOrderList(opt).then(res => {
			if (code == 0) {
				dingdanData.quanbu.list = dingdanData.quanbu.list.concat(res.data.data);
				dingdanData.quanbu.loading = false;
			} else if (code == 1) {
				dingdanData.daiFukuan.list = dingdanData.daiFukuan.list.concat(res.data.data);
				dingdanData.daiFukuan.loading = false;
			} else if (code == 2) {
				dingdanData.yiFukuan.list = dingdanData.yiFukuan.list.concat(res.data.data);
				dingdanData.yiFukuan.loading = false;
			}
			if (code == 0) {
				if (res.data.total > dingdanData.quanbu.list.length) {
					// 数学
					dingdanData.quanbu.state = 'more';
					dingdanData.quanbu.loading = false;
				} else {
					// 数学
					dingdanData.quanbu.state = 'no-more';
					dingdanData.quanbu.loading = false;
				}
			} else if (code == 1) {
				if (res.data.total > dingdanData.daiFukuan.list.length) {
					// 英语
					dingdanData.daiFukuan.state = 'more';
					dingdanData.daiFukuan.loading = false;
				} else {
					// 英语
					dingdanData.daiFukuan.state = 'no-more';
					dingdanData.daiFukuan.loading = false;
				}
			} else if (code == 2) {
				if (res.data.total > dingdanData.yiFukuan.list.length) {
					// 英语
					dingdanData.yiFukuan.state = 'more';
					dingdanData.yiFukuan.loading = false;
				} else {
					// 英语
					dingdanData.yiFukuan.state = 'no-more';
					dingdanData.yiFukuan.loading = false;
				}
			}
		}).catch(err => {
			if (code == 0) {
				// 数学
				dingdanData.quanbu.state = 'more';
				dingdanData.quanbu.loading = false;
			} else if (code == 1) {
				// 英语
				dingdanData.daiFukuan.state = 'more';
				dingdanData.daiFukuan.loading = false;
			} else if (code == 2) {
				// 英语
				dingdanData.yiFukuan.state = 'more';
				dingdanData.yiFukuan.loading = false;
			}
		})
	}

	function onRefresh() {
		if (dingdanData.current == 0) {
			dingdanData.quanbu.page = 0;
			dingdanData.quanbu.list = [];
			dingdanData.quanbu.loading = true;
		} else if (dingdanData.current == 1) {
			dingdanData.daiFukuan.page = 0;
			dingdanData.daiFukuan.list = [];
			dingdanData.daiFukuan.loading = true;
		} else if (dingdanData.current == 2) {
			dingdanData.yiFukuan.page = 0;
			dingdanData.yiFukuan.list = [];
			dingdanData.yiFukuan.loading = true;
		}
		refreshData(dingdanData.current);
	}

	function getMore(code) {
		const opt = {
			page: 1,
			size: 10, // 固定查询10条
			status: code // 前台索引加1为学科cardId
		}

		if (code == 0) {
			if (dingdanData.quanbu.state == 'no-more') {
				return;
			}
			// 数学
			dingdanData.quanbu.state = 'loading';
			dingdanData.quanbu.page++;
			opt.page = dingdanData.quanbu.page;
		} else if (code == 1) {
			if (dingdanData.daiFukuan.state == 'no-more') {
				return;
			}
			dingdanData.daiFukuan.state = 'loading';
			dingdanData.daiFukuan.page++;
			opt.page = dingdanData.daiFukuan.page;
		} else if (code == 2) {
			if (dingdanData.yiFukuan.state == 'no-more') {
				return;
			}
			dingdanData.yiFukuan.state = 'loading';
			dingdanData.yiFukuan.page++;
			opt.page = dingdanData.yiFukuan.page;
		}
		getOrderList(opt).then(res => {
			if (code == 0) {
				dingdanData.quanbu.list = dingdanData.quanbu.list.concat(res.data.data);
				dingdanData.quanbu.loading = false;
			} else if (code == 1) {
				dingdanData.daiFukuan.list = dingdanData.daiFukuan.list.concat(res.data.data);
				dingdanData.daiFukuan.loading = false;
			} else if (code == 2) {
				dingdanData.yiFukuan.list = dingdanData.yiFukuan.list.concat(res.data.data);
				dingdanData.yiFukuan.loading = false;
			}
			if (code == 0) {
				if (res.data.total > dingdanData.quanbu.list.length) {
					// 数学
					dingdanData.quanbu.state = 'more';
					dingdanData.quanbu.state_text = '加载更多';
					dingdanData.quanbu.loading = false;
				} else {
					// 数学
					dingdanData.quanbu.state = 'no-more';
					dingdanData.quanbu.state_text = '没有更多啦';
					
					dingdanData.quanbu.loading = false;
				}
			} else if (code == 1) {
				if (res.data.total > dingdanData.daiFukuan.list.length) {
					// 英语
					dingdanData.daiFukuan.state = 'more';
					dingdanData.daiFukuan.state_text = '加载更多';
					
					dingdanData.daiFukuan.loading = false;
				} else {
					// 英语
					dingdanData.daiFukuan.state = 'no-more';
					dingdanData.daiFukuan.state_text = '没有更多啦';
					dingdanData.daiFukuan.loading = false;
				}
			} else if (code == 2) {
				if (res.data.total > dingdanData.yiFukuan.list.length) {
					// 英语
					dingdanData.yiFukuan.state = 'more';
					dingdanData.yiFukuan.state_text = '加载更多';
					dingdanData.yiFukuan.loading = false;
				} else {
					// 英语
					dingdanData.yiFukuan.state = 'no-more';
					dingdanData.yiFukuan.state_text = '没有更多啦';
				
					dingdanData.yiFukuan.loading = false;
				}
			}
		}).catch(err => {
			if (code == 0) {
				// 数学
				dingdanData.quanbu.state = 'more';
				dingdanData.quanbu.state_text = '加载更多';
				dingdanData.quanbu.loading = false;
			} else if (code == 1) {
				// 英语
				dingdanData.daiFukuan.state = 'more';
				dingdanData.daiFukuan.state_text = '加载更多';
				dingdanData.daiFukuan.loading = false;
			} else if (code == 2) {
				// 英语
				dingdanData.yiFukuan.state = 'more';
				dingdanData.yiFukuan.state_text = '加载更多';
				dingdanData.yiFukuan.loading = false;
			}
		})
	}

	function goBack() {
		uni.redirectTo({
			url: '/pages/my/index'
		})
	}

	onLoad(() => {
		getMore(dingdanData.current);
	})
</script>

<style>

</style>