car-wash-front/src/pages-order/list/index.vue

<template>
  <view class="container">
      <uv-list>
        <uv-list-item
            clickable show-arrow v-for="(item,index) in state.orderList" :key="index" @click="handleClickDetail(item)">
          <template #default>
            <view class="wallet-item">
              <view class="wallet-item_header">
                <view class="flex-inline">
                  <text class="wallet-item_header-type">洗车消费</text>
                  <uv-text class="ml10" style="margin-left: 10px;" plain :size="12"
                           :type="item.payStatus==0?'primary':(item.payStatus==1?'success':'error')"
                           :text="fmtDictName('Order.pay', item.payStatus)"></uv-text>

<!--                  <uv-tags class="ml10" style="margin-left: 10px;" size="mini" plain
                           :type="item.orderStatus==0?'primary':(item.orderStatus==1?'success':'error')"
                           :text="fmtDictName('Order.status', item.orderStatus)"></uv-tags>-->
                </view>
                <text class="wallet-item_header-amt">{{ (item.amount / 100).toFixed(2) }}元</text>
              </view>
              <view class="wallet-item_body">
                <text class="wallet-item_body-order">{{ item.orderId }}</text>
                <text class="wallet-item_body-time">{{ fmtDateTime(item.startTime) }}</text>
              </view>
            </view>
          </template>
        </uv-list-item>
      </uv-list>

      <uv-load-more :status="computedLoadMoreStatus"
                    bgColor="#fff"
                    @loadmore="loadMore" dashed :height="30"/>
    <!--    <login-bar class="w100 text-center"></login-bar>-->
    <!--    <tab-bar :index="3"/>-->
  </view>
</template>

<script lang="ts" setup>
import {computed, reactive} from 'vue'
import {onHide, onShow, onPullDownRefresh, onReachBottom,} from "@dcloudio/uni-app";
import {get} from "@/utils/https";
import {fmtDictName, fmtDateTime} from "@/utils/common";

const initState = () => ({
  orderList: [],
  query: {
    pageNum: 1,
    pageSize: 10
  },
  hasNext: false
})

const state = reactive(initState())

onShow(() => {
  uni.setNavigationBarTitle({title: '洗车订单'})
  let gd = getApp<any>().globalData;
  if (!gd.token) {
    console.error(gd)
    return;
  }
  loadOrderList();
});

onHide(() => {
  Object.assign(state, initState());
})

const computedLoadMoreStatus =computed(()=>{
  return state.hasNext?'loadmore':'nomore'
})

onPullDownRefresh(() => {
  console.log("onPullDownRefresh")
  setTimeout(function () {
    state.query.pageNum = 1;
    loadOrderList()
  }, 100);
})

onReachBottom(() => {
  console.log("onReachBottom")
  loadMore()
})

const loadMore = () => {
  if (state.hasNext) {
    state.query.pageNum++
    loadOrderList()
  }
}

const loadOrderList = () => {
  //load order list
  get(`/wash-order/listMyWashOrder`, state.query).then((res: any) => {
    if(res.list){
      state.orderList = state.orderList.concat(res.list);
      state.hasNext = res.pages>state.query.pageNum;
    }

    uni.stopPullDownRefresh();
  }).catch(e => {
    uni.stopPullDownRefresh();
  })
}

const handleClickDetail = (orderDetail: any) => {
  uni.navigateTo({
    url: `/pages-order/detail/index?id=${orderDetail.id}&type=3&orderNo=${orderDetail.orderId}`,
  });
};

</script>

<style lang="scss" scoped>
.container {
  background-color: #f6f6f6;
}

.wallet-item {
  display: flex;
  flex-direction: column;
  padding: 14rpx;
  border-radius: 8rpx;
  margin: 10rpx 16 prx 10rpx 10rpx;


  &_header {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: space-between;

    &-type {
      font-weight: 500;
      font-size: 16px;
      margin-right: 15rpx;
    }


    &-status {
      font-size: 12px;
      margin-left: 6px;
      border: 1px solid $uni-color-primary;
      border-radius: 2rpx;
    }

    &-amt {
      font-weight: 500;
      font-size: 17px;
    }
  }

  &_body {
    padding: 10rpx 0;
    display: inline-flex;
    justify-content: space-between;

    &-order, &-time {
      font-size: 12px;
      color: $uni-color-subtitle
    }
  }
}

.font-size-lg {
  border: none;
  background-color: var(--theme_color);
}

.navbar {
  height: calc(44px + var(--status-bar-height));
  display: flex;
  background-color: #ffffff;
}

.talk-btn {
  height: 32px;
  margin-left: 10px;
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
  padding: 0 20rpx;
  border-radius: 50rem !important;

  image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10px;
  }
}

.tabbar {
  /* #ifdef MP-WEIXIN */
  // margin-top: 60px;
  /* #endif */

  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  // margin-top: 100rpx;

  .item {
    height: 100%;
    font-size: 32rpx;
    color: #999;
    font-weight: 400 !important;
    display: flex;
    align-items: center;

    &.active {
      color: #343434;
      border-bottom: 4rpx solid #343434;
    }
  }
}

.swiper {
  width: 100%;
  height: calc(100vh - 44px);
}


.history-order {
  width: 100%;
  height: 100%;
  position: relative;

  .menu {
    padding: 18rpx 30rpx;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;

    .item {
      padding: 14rpx 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }

      &.active {
        color: var(--theme_color);
        background-color: #ffffff;
      }
    }
  }

  .history-order-swiper {
    width: 100%;
    height: 100%;
  }
}

.store-order-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  line-height: 1.3rem !important;

  image {
    width: 400rpx;
    height: 333rpx;
    margin-bottom: 40rpx;
  }
}

.orders-scroll {
  width: 100%;
  height: 100%;
  padding-top: 104rpx;
}

.orders-scroll1 {
  width: 100%;
  height: 100%;
  padding-top: 20rpx;
}

.good_name {
  padding-left: 30rpx;
  padding-top: 15rpx;
  color: #555;
  font-weight: 600;
  font-size: 14px;
}

.order-list {
  display: flex;
  width: 100%;
  flex-direction: column;

  .order {
    background-color: #ffffff;
    padding: 30rpx 40rpx;
    margin-bottom: 18rpx;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .status {
        font-size: 14px;
        color: #595959;
        display: flex;
        align-items: center;

        image {
          width: 30rpx;
          height: 30rpx;
          margin-left: 10px;
        }
      }
    }

    .images {
      display: flex;
      padding: 30rpx 0;

      image {
        flex-shrink: 0;
        width: 150rpx;
        height: 112.5rpx;
      }
    }

    .info {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .left {
        flex: 1;
        display: flex;
        flex-direction: column;
        font-size: 12px;
        color: #7a7a7a;

        // view {
        // 	margin-bottom: 10rpx;
        // 	font-size: 12px;

        // 	&:last-child {
        // 		margin-bottom: 0;
        // 	}
        // }
      }

      .right {
        font-size: 32rpx;
        color: #343434;
      }
    }

    .action {
      display: flex;
      justify-content: flex-end;
      align-items: center;


      button {
        margin-left: 30rpx;
        font-size: 16px;
      }
    }
  }

  .button {
    margin-left: 30rpx;
    padding: 15rpx 20rpx;
    font-size: 16px;
    border-radius: 70rpx;
    background-color: #eee;

    &_pay {
      background-color: var(--theme_color);
      color: white;
      border: none;
      border-radius: 70rpx;
    }

    &_del {
      color: white;
      background-color: #F56C6C;
    }

    &_re {
      color: white;
      background-color: #5CB87A;
    }
  }
}
</style>