city-gather/src/subPack-film/order/index.vue

<script setup lang="ts">
import Tabbar from '../components/tabbar.vue'
import { createGlobalLoadingMiddleware } from '@/api/core/middleware'
import filmOrderList from '@/subPack-smqjh/components/film-orderList/film-orderList.vue?async'

definePage({
  name: 'film-order',
  islogin: true,
  style: {
    navigationBarTitleText: '我的订单',
    backgroundColorBottom: '#fff',
  },

})

const orderStatus = ref('all')
const tabList = reactive([
  { title: '全部', value: 'all' },
  { title: '待支付', value: 'paddingPay' },
  { title: '已支付', value: 'ing' },
  { title: '已完成', value: 'completed' },
  { title: '已退款', value: 'cancel' },
])

const { data: orderList, refresh, isLastPage, page, error, reload } = usePagination((pageNum, pageSize) => Apis.xsb.orderList({
  data: {
    businessType: 'DYY',
    orderStatus: orderStatus.value,
    pageNum,
    pageSize,
  },
}), {
  immediate: false,
  pageNum: 1,
  pageSize: 10,
  initialData: [],
  data: res => res.data?.list,
  append: true,
  middleware: createGlobalLoadingMiddleware(),
})

const state = computed(() => {
  return error.value ? 'error' : !isLastPage.value ? 'loading' : 'finished'
})

function handleItem(value: string) {
  orderStatus.value = value
  reload()
}

onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
  }
})

onLoad(() => {
  refresh()
})
</script>

<template>
  <view class="film-order">
    <!-- 顶部切换 -->
    <view class="tabbar">
      <view v-for="(item, index) in tabList" :key="index" class="item" @click="handleItem(item.value)">
        <view class="title" :class="[orderStatus == item.value ? 'active' : '']">
          {{ item.title }}
        </view>
      </view>
    </view>

    <!-- 列表 -->
    <template v-for="(item, index) in orderList" :key="index">
      <filmOrderList :order="item" @refresh="refresh" />
    </template>

    <wd-loadmore :state="state" :loading-props="{ color: '#9ED605', size: 20 }" @reload="reload" />
  </view>
  <Tabbar :active="2" />
</template>

<style lang="scss" scoped>
.film-order{
  background: #F9F9F9;
  padding: 80rpx 24rpx 300rpx;
  .tabbar {
    display: flex;
    justify-content: space-between;
    padding-top: 10rpx;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60rpx;
    box-sizing: border-box;
    .item {
      flex: 1;
      text-align: center;
      .title {
        font-size: 32rpx;
        color: #222222;
        &.active {
          color: #9ED605;
        }
      }

    }
  }

  .block {
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
  }

  .order-list{
    .order-item{
      .top-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title{
          font-size: 32rpx;
          color: #222222;
          font-weight: bold;
        }
        .status{
          font-size: 28rpx;
          color: #222222;
        }
      }
      .status-box{
        margin-top: 24rpx;
        background: #F9F9F9;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 24rpx;
        .reason-box{
          display: flex;
          align-items: center;
          .icon{
            width: 30rpx;
            height: 30rpx;
          }
          .reason{
            font-size: 28rpx;
            color: #999999;
            margin-left: 10rpx;
          }
        }
        .info{
          font-size: 24rpx;
          color: #AAAAAA;
          margin-top: 20rpx;
          line-height: 44rpx;
        }
      }
      .info-box{
        margin-top: 20rpx;
        display: flex;
        .img{
          width: 160rpx;
          height: 160rpx;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          background: #999999;
          margin-right: 20rpx;
        }
        .info{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .info-item{
            font-size: 24rpx;
            color: #222222;
          }
        }
      }
      .btn-box{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 20rpx;
        .btn{
          width: 128rpx;
          height: 48rpx;
          line-height: 48rpx;
          text-align: center;
          background: #FFFFFF;
          border-radius: 24rpx 24rpx 24rpx 24rpx;
          border: 1rpx solid #222222;
          font-size: 24rpx;
          color: #222222;
        }
        .btn.cancel{
          color: #AAAAAA;
          border: 1rpx solid #AAAAAA;
          margin-right: 20rpx;
        }
      }
    }
  }

}
</style>