uniProject/pages/chanpinMy/order.vue

<template>
	<view class="ezy-order-page">
		<view class="icon-title-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">订单</text>
		</view>
		<view class="ezy-page-body order-body">
			<scroll-view v-if="data.list.length >0" scroll-y="true" refresher-enabled="true" @scrolltolower="onScrolltolower" 
				class="order-scroll-view" :refresher-triggered="data.loading" :refresher-threshold="50"
				refresher-background="transparent" @refresherrefresh="onRefresh">
				<view class="order-card-box" v-for="(item,index) in data.list" :key="index">
					<view class="card-head-box">
						<view class="head-name">鹅状元自营课程</view>
						<view class="head-status">{{item.status}}</view>
					</view>
					<view class="card-body-box">
						<!-- 封面 -->
						<image :src="item.chanpinCover" class="order-img"></image>
						<view class="body-right-box">
							<!-- 名称 -->
							<view class="body-title">{{item.chanpinName}}</view>
							<!-- 简介 -->
							<view class="taocan-text">{{item.taocanName}}</view>
							<view class="tip-text">不支持7天无理由</view>
							<!-- 共计 -->
							<view class="money-text">￥{{item.money}}</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="data.state" @click="getMore" :contentText="data.contentText">
				</uni-load-more>
			</scroll-view>
			<view class="ezy-no-sj" v-else>
				<icon></icon>
				<text>暂无数据</text>
			</view>
			<tip-small-dialog ref="goBindDialogRef" @confirm-btn="goBindPhone" :content="tipContent"></tip-small-dialog>
			<!-- <view @click="bangdingPhone">绑定手机号</view> -->
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from "vue";

	import {
		orderList
	} from '@/api/shop.js'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		getUserIsYouke
	} from "@/utils/common.js"
	import tipSmallDialog from '@/components/dialog/tipSmallDialog.vue';
	const data = reactive({
		page: 0,
		list: [],
		loading: false,
		state: 'more',
		contentText: {
			contentdown: '查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		}
	})
	let pageOptions = {};
	const tipContent = '请绑定手机号';
	const goBindDialogRef = ref(null);

	function goBindPhone() {
		uni.navigateTo({
			url: '/pages/bindPhone/bindPhone?from=order'
		})
	}

	function handleBack() {
		uni.switchTab({
			url: '/pages/chanpinMy/my'
		})
	}

	function onScrolltolower() {
		getMore()
	}

	function getMore(code) {
		const opt = {
			page: 1,
			size: 10,
		}

		if (data.state == 'no-more') return;
		// 数学
		data.state = 'loading';
		data.page++;
		opt.page = data.page;

		orderList(opt).then(res => {
			data.list = data.list.concat(res.data.data);
			data.loading = false;
			if (res.data.total > data.list.length) {
				data.state = 'more';
				data.loading = false;
			} else {
				data.state = 'no-more';
				data.loading = false;
			}
		}).catch(err => {
			data.state = 'more';
			data.loading = false;
		})
	}

	function onRefresh() {
		data.page = 0;
		data.list = [];
		data.loading = true;
		refreshData(data.current);
	}

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

		data.list = [];
		data.state = 'loading';
		data.page++;
		opt.page = data.page;

		orderList(opt).then(res => {
			data.list = data.list.concat(res.data.data);
			data.loading = false;
			if (res.data.total > data.list.length) {
				data.state = 'more';
				data.loading = false;
			} else {
				data.state = 'no-more';
				data.loading = false;
			}
		}).catch(err => {
			data.state = 'more';
			data.loading = false;
		})
	}


	onLoad((options) => {
		getMore();
		pageOptions = options
		// 判断游客 如果是弹出弹窗，忽略和绑定， 忽略删除缓存，绑定更新用户userName 删除缓存
		// 此时支付成功+游客模式支付进来的情况

	})
	onMounted(() => {
		// 组件已挂载，ref可正常使用
		if (pageOptions.zhifu === 'success' && getUserIsYouke()) {
			goBindDialogRef.value.handleShow();
		}
	})
</script>

<style>
</style>