|
@@ -0,0 +1,262 @@
|
|
|
+<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.ID)">
|
|
|
+ <view class="itemTop">
|
|
|
+ <view style="color: #999999; font-size: 24rpx;">保养订单</view>
|
|
|
+ <view class="itemSheetState" v-if="item.SheetState==1">待付款</view>
|
|
|
+ <view class="itemSheetState" v-if="item.SheetState==2">待确认</view>
|
|
|
+ <view class="itemSheetState" v-if="item.SheetState==3">待收货</view>
|
|
|
+ <view class="itemSheetState" v-if="item.SheetState==4">待服务</view>
|
|
|
+ <view class="itemSheetState" v-if="item.SheetState==5">已完成</view>
|
|
|
+ <view class="itemSheetState" v-if="item.SheetState==0">已取消</view>
|
|
|
+ </view>
|
|
|
+ <view class="itemShopBg">
|
|
|
+ <view class="shopName">{{item.ShopName}}</view>
|
|
|
+ <view class="price">¥{{item.raleMoney}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="itemName">{{item.itemNameList?item.itemNameList:''}},{{item.goodNameList?item.goodNameList:''}}</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(id) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'orderDetail?id=' + id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ this.isload = false;
|
|
|
+ if (this.tabIndex == 6) {
|
|
|
+ var padata = {
|
|
|
+ page: this.page,
|
|
|
+ limit: 10,
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.tabIndex == 5) {
|
|
|
+ var padata = {
|
|
|
+ page: this.page,
|
|
|
+ limit: 10,
|
|
|
+ evaluateState: '待评价'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ var padata = {
|
|
|
+ page: this.page,
|
|
|
+ limit: 10,
|
|
|
+ state: this.tabIndex
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$http('worldKeepCar/keepCarMy/listMiNiTMSheetPage', 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 - 48rpx);
|
|
|
+ padding-left: 24rpx;
|
|
|
+ padding-right: 24rpx;
|
|
|
+ height: 92rpx;
|
|
|
+ z-index: 11;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabLine {
|
|
|
+
|
|
|
+ font-size: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabActive {
|
|
|
+ color: #FF4F00;
|
|
|
+ border-bottom: 4rpx solid #FF4F00;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemSheetState {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FF2400
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemShopBg {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopName {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ color: #333333;
|
|
|
+ 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>
|