订单开发

api/shop.js

@@ -88,3 +88,15 @@ export function orderCheck(data = {}) {
 		timeout: 20000
 	})
 }
+
+export function orderList(data = {}) {
+	return request({
+		url: "/app/order/list",
+		headers: {
+			isToken: true
+		},
+		method: 'post',
+		data,
+		timeout: 20000
+	})
+}

common/styles/global/pages.scss

@@ -986,4 +986,32 @@
 		min-height: 260rpx;text-align: justify;border-bottom: 1px dashed #70cbf4;
 		margin-bottom: 30rpx;color: #666;font-size: 32rpx;padding-bottom: 32rpx;
 		border-bottom: 1px dashed #70cbf4;line-height: 1.8;}
-} */
+} */
+
+// 订单
+.ezy-order-page{
+	width: 100%;height: 100vh;display: flex;flex-direction: column;
+	.order-scroll-view{overflow-y: auto;}
+	.order-body{padding: 0;}
+	.order-card-box{
+		border-radius: 16rpx;margin: 32rpx 24rpx 0;padding: 24rpx;
+		box-shadow: 0 0rpx 6rpx rgba(100, 159, 241, 0.3);
+		.card-head-box{
+			display: flex;align-items: center;justify-content: space-between;line-height: 1.6;
+			.head-name{font-size: 30rpx;color: #333;font-weight: bold;}
+			.head-status{font-size: 28rpx;color: #666;}
+		}
+		.card-body-box{
+			display: flex;margin-top: 16rpx;
+			.order-img{width: 200rpx;height: 280rpx;flex-shrink: 0;border-radius: 16rpx;}
+			.body-right-box{
+				margin-left: 24rpx;flex: 1;
+				.body-title{font-size: 34rpx;color: #333;font-weight: bold;margin-bottom: 32rpx;}
+				.taocan-text{font-size: 26rpx;color: #666;margin-bottom: 24rpx; @include multi-line-ellipsis(2);}
+				.tip-text{font-size: 26rpx;color: #16a245;margin-bottom: 24rpx;}
+				.money-text{font-size: 42rpx;color: #333;text-align: right;font-weight: normal;}
+			}
+		}
+		.order-card-box::last-child{margin-bottom: 0;}
+	}
+}

pages/chanpinMy/order.vue

@@ -4,36 +4,136 @@
 			<view @click="handleBack" class="nav-bar-icon"></view>
 			<text class="nav-bar-title">订单</text>
 		</view>
-		<view class="ezy-page-body">
-			<view @click="bangdingPhone">绑定手机号</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="onLoginSuccess"></bindPhone>
 </template>
 
 <script setup>
-	import {
-		reactive,
-		ref
-	} from "vue";
-	import {
-		onLoad,
-		onShow
-	} from "@dcloudio/uni-app"
+	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 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(() => {})
+	onLoad(() => {
+		getMore();
+	})
 </script>
 
 <style>
-</style>
+</style>