<template> <view class="box"> <view class="tab"> <view class="tabLine" :class="{tabActive:tabIndex==0}" @click="tabClick(0)">全部</view> <view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">待付款</view> <view class="tabLine" :class="{tabActive:tabIndex==2}" @click="tabClick(2)">待服务</view> <view class="tabLine" :class="{tabActive:tabIndex==3}" @click="tabClick(3)">已完成</view> </view> <view class="main"> <view class="itemBg" v-for="(item,index) in items" @click="goDetail(item)"> <view class="itemTop"> <view class="itemType" v-if="item.SheetType==1">商城-商品订单</view> <view class="itemType" v-if="item.SheetType==2">商城-项目订单</view> <view class="itemType" v-if="item.SheetType==3">商城-套餐订单</view> <view class="itemType" v-if="item.SheetType==4">救援订单</view> <view class="itemType" v-if="item.SheetType==5">钣喷订单</view> <view class="itemType" v-if="item.SheetType==6">集客订单</view> <view class="itemSheetState redColor" v-if="item.SheetState==1">待付款</view> <view class="itemSheetState orangeColor" v-if="item.SheetState==2">待服务</view> <view class="itemSheetState greenColor" v-if="item.SheetState==3">已完成</view> <view class="itemSheetState" v-if="item.SheetState==4">已取消</view> </view> <view class="itemShopBg"> <view class="shopName">{{item.SheetContent}}</view> <view style="color: #333333;font-size: 22rpx;">¥<span class="price">{{item.RealMoney}}</span></view> </view> <view class="itemName">{{item.CreateTime}}</view> </view> <nodata v-show="items==''&&isload"></nodata> </view> </view> </template> <script> import nodata from '@/components/nodata/nodata.vue' export default { components: { nodata }, data() { return { page: 1, tabIndex: '', items: [], isload: false, } }, onLoad(opt) { this.tabIndex = opt.num; this.getData() }, onShow() { console.log(this.tabIndex) this.getData() }, methods: { tabClick(num) { this.tabIndex = num; this.page = 1; this.getData() }, goDetail(item) { //SheetType 1 商品2项目3套餐4救援5钣喷6集客 if((item.SheetType==1)||(item.SheetType==2)||(item.SheetType==3)){ uni.navigateTo({ url: "mallOrderDetail?id=" + item.ID +"&SheetType=" + item.SheetType }) } }, getData() { uni.showLoading({ title: '加载中' }); this.isload = false; var padata = { page: this.page, limit: 10, sheetState: this.tabIndex > 0 ? this.tabIndex : '' } this.$http('openOrderManagement/getOpenSheetList', padata, 'GET').then(res => { uni.hideLoading(); this.isload = true; var list = res.data.Items; if (this.page == 1) { this.items = list } else { this.items = this.items.concat(list) } }) }, }, onReachBottom() { this.page++; this.getData() }, onPullDownRefresh() { this.page = 1; this.getData() setTimeout(function() { uni.stopPullDownRefresh(); }, 1000); } } </script> <style scoped> .box { min-height: 100vh; background: #F4F5F7; } .tab { background: #FFFFFF; display: flex; justify-content: space-between; line-height: 92rpx; position: fixed; width: calc(100vw - 100rpx); padding-left: 50rpx; padding-right: 50rpx; height: 92rpx; z-index: 11; } .tabLine { font-size: 28rpx; text-align: center; } .tabActive { color: #FF0000; font-weight: bold; border-bottom: 4rpx solid #FF0000; } .main { padding-top: 92rpx; padding-bottom: 20rpx; background-color: #F4F5F7; } .itemBg { margin: 20rpx 24rpx; background-color: #FFFFFF; border-radius: 10rpx; padding: 20rpx; } .itemTop { display: flex; justify-content: space-between; } .itemType { color: #999999; font-size: 24rpx; } .itemSheetState { font-size: 24rpx; color: #999999 } .redColor { color: #FF0000; } .orangeColor { color: #F19D01; } .greenColor { color: #00A040; } .itemShopBg { display: flex; justify-content: space-between; margin-top: 20rpx; } .shopName { color: #333333; font-size: 30rpx; font-weight: bold; /* 隐藏文字显示 ...不换行 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .price { color: #333333; font-weight: bold; font-size: 32rpx; } .itemName { color: #666666; font-size: 24rpx; padding: 16rpx 0; height: 30rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plateBg { display: flex; justify-content: space-between; align-items: center; } .plateNumber { color: #666666; font-size: 24rpx; margin-bottom: 20rpx; display: flex; } .itemLineBottom { display: flex; justify-content: flex-end; } .itemBtn1 { width: 150rpx; height: 56rpx; border-radius: 36rpx; border: 2rpx solid #DDDDDD; text-align: center; line-height: 56rpx; font-size: 28rpx; color: #3C3C3C; margin-left: 40rpx; } .itemBtn2 { width: 150rpx; height: 56rpx; border-radius: 36rpx; border: 2rpx solid #FF4F00; text-align: center; line-height: 56rpx; font-size: 28rpx; color: #FF4F00; margin-left: 40rpx; } .orderState { color: #F19D01; font-size: 24rpx; padding-left: 20rpx; } </style>