qzw_xcx/pages/myOrder/index.vue

<template>
	<view>
		<van-tabs v-model="active">
		  <van-tab v-for="(item, key) in menu"  :name="key" :title="item.name">
			 <scroll-view  style="height: 95vh;" class="floor-list"
			  :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
			  refresher-enabled="true">
			  <view @tap="goDetail()" class="cart-list">
			   <view class="topTip">
				   <view>
					  <image src="" style="width: 50upx;height: 50upx; vertical-align: middle;background-color: #007AFF;"></image>
					  <span style="padding-left: 16upx;">华南酒店</span>
				   </view>
				   <view style="color: #D9332E;font-size: 24upx;">已取消</view>
			   </view>
			   
			   <view class="shoplist" style="background-color: #fff;">
				  <view>
					  <van-card
						title-class="changewidth"
						price-class ="priceClass"
						price="10.00"
						desc="描述信息"
						title="商品标题"
						thumb="https://gd3.alicdn.com/imgextra/i3/0/O1CN01IiyFQI1UGShoFKt1O_!!0-item_pic.jpg_400x400.jpg"
					  >
					  </van-card>
				  </view>
			   </view>
				   <view class="topTip">
					  <view style="font-size: 28upx;">合计：50</view>
					  <view class="deleChange">删除</view>
				   </view>
			  </view>
			</scroll-view> 
		  </van-tab>
		</van-tabs>
	</view>
</template>

<script>
	export default{
		
		data() {
			return {
				menu:[
					{name:'全部'},
					{name:'待付款'},
					{name:'处理中'},
					{name:'待评价'},
					{name:'已取消'},
				],
				active: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods: {
			goDetail() {
				uni.navigateTo({
					url: './order'
				})
			},
			upper(e) {
				console.log(e)
				console.log("顶部")
			},
			
			// 滚到底部
			lower(e) {
				console.log("底部")
			},
			
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			}
		}
	}
</script>
  
<style>
	page {
		background-color: #F5F5F5;
	}
	.cart-list {
		background-color: #fff;
		border-top: 12upx solid #F5F5F5;
	}
		
	.topTip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20upx 36upx;
		border-bottom: 1px solid #F5F5F5;
	}
	.changewidth {
		color: #303133;
		font-size: 32upx;
		font-weight: 100!important;
	}
	.priceClass {
		color:#303133!important;
		font-weight: 100!important;
		font-size: 36upx;
	}
	.van-card {
		background-color: #fff!important;
	}
	.shoplist {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.deleChange {
		border: 1px solid #C0C4CC;
		padding: 8upx;
	}
</style>