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 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 @click="bangdingPhone">绑定手机号</view> -->
		</view>
	</view>
	<bindPhone ref="bindPhoneRef" @success="bindSuccess"></bindPhone>
</template>

<script setup>
	import { reactive, ref } from "vue";
	import {orderList} from '@/api/shop.js'
	import { onLoad, onShow } from "@dcloudio/uni-app"
	import bindPhone from "@/components/bindPhone/bindPhone.vue"
	const bindPhoneRef = ref(null);
    const data = reactive({
        page: 0,
        list: [],
        loading: false,
        state: 'more',
        contentText: {
            contentdown: '查看更多',
            contentrefresh: '加载中',
            contentnomore: '没有更多'
        }
    })

	function handleBack() {
		uni.switchTab({
			url: '/pages/chanpinMy/my'
		})
	}
	function  bindSuccess(){
		
	}
    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;
		})
	}
	
	function bangdingPhone() {
		bindPhoneRef.value.showDl();
	}
	onLoad(() => {
		getMore();
	})
</script>

<style>
</style>