Dining_Hall/pages/work/index.vue

<template>
  <div class="content">
    <div class="top-wrapper">
      <div class="top-cont">
        <div class="top-title">订单</div>
        <u-input
          v-model="searchValue"
          class="top-ipt"
          placeholder="请输入食堂、档口、菜品/商品名"
          shape="circle"
          suffixIcon="search"
          suffixIconStyle="color: #909399; font-size: 18px;"
          placeholderStyle="font-weight: 400;font-size: 10px;color: rgba(15,39,75,0.4);"
          @blur="handleSearch"
        ></u-input>
        <div class="top-filter">
          <span style="font-size: 12px; color: #0f274b">筛选</span>
          <u-icon name="../../static/images/pull.png" />
        </div>
      </div>
  
      <div style="padding: 0 16px;">
        <Tabs :tabList="tabList" @changeTab="changeTab" />
      </div>
    </div>

    <div style="margin-top: 91px; padding: 0 16px;">
      <div class="order-list" v-for="(item, index) in tableList" :key="index">
        <div class="flex justify-between">
          <div class="order-source">订单来源：{{ item.sourceType }}</div>
          <div style="color: rgba(15, 39, 75, 0.8)">{{ handleOrderState(item.ordState) }}</div>
        </div>
        <div class="flex justify-between">
          <div>
            <span style="color: #0f274b">{{ item.canteenName }}</span>
            <span class="intervalName">{{ item.intervalName }}</span>
          </div>
          <div style="color: rgba(15, 39, 75, 0.8)">就餐时间：{{ item.orderTime }}</div>
        </div>
        <div class="img-cont">
          <div class="img" v-for="(goods, index) in item.detailList" :key="index">
            <u-image :src="goods.goodsDishesImgUrl" width="80px" height="80px" />
            <div>{{ goods.goodsDishesName }}</div>
          </div>
          <div class="price">
            <div>
              <span>￥</span>
              <span style="font-size: 18px">{{ item.realAmount }}</span>
            </div>
            <div style="color: rgba(15, 39, 75, 0.6)">共{{ item.detailList.length }}件</div>
          </div>
        </div>
        <div class="btn-cont">
          <div v-if="item.ordState != 10">
            <u-button size="small">评价</u-button>
          </div>
          <div v-if="item.ordState == 10">
            <u-button size="small">删除订单</u-button>
          </div>
        </div>
      </div>
    </div>

    <div style="margin: 20px 0" v-if="tableList.length > 0">
      <u-loadmore :status="status" nomoreText="没有更多数据了" />
    </div>
    <div v-else class="flex justify-center align-center" style="height: 50vh">
      <u-empty icon="../../static/images/not_order.png" text="暂无相关订单" textColor="#000" />
    </div>
  </div>
</template>

<script>
import { getOrderList } from '@/api/dining-hall'
import Tabs from '@/pages/components/Tabs.vue'

export default {
  components: { Tabs },
  data() {
    return {
      tabIndex: 0,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      searchValue: '',
      status: 'loadmore',
      tabList: ['全部订单', '待评价', '退款'],
      tableList: [
        {
          sourceType: 'hygyy双屏消费机', // 订单来源
          canteenName: '宏源工业园/本周菜谱', // 订单来源
          intervalName: '午餐', // 餐次
          ordState: 11, // 订单状态 1 已下单 9 已取消 10 已退款 11 已完成
          orderTime: '2024-08-12', // 下单时间
          realAmount: 30.2, // 实付金额
          detailList: [
            {
              goodsDishesName: '苹果', // 商品名称
              goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg' // 商品图片
            },
            {
              goodsDishesName: '苹果', // 商品名称
              goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' // 商品图片
            },
            {
              goodsDishesName: '苹果', // 商品名称
              goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' // 商品图片
            }
          ] // 订单详情
        },
        {
          sourceType: 'hygyy双屏消费机', // 订单来源
          canteenName: '宏源工业园/本周菜谱', // 订单来源
          intervalName: '午餐', // 餐次
          ordState: 10, // 订单状态 1 已下单 9 已取消 10 已退款 11 已完成
          orderTime: '2024-08-12', // 下单时间
          realAmount: 30.2, // 实付金额
          detailList: [
            {
              goodsDishesName: '苹果', // 商品名称
              goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-1.jpg' // 商品图片
            },
            {
              goodsDishesName: '苹果', // 商品名称
              goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' // 商品图片
            },
            {
              goodsDishesName: '苹果', // 商品名称
              goodsDishesImgUrl: 'https://img.yzcdn.cn/vant/apple-2.jpg' // 商品图片
            }
          ] // 订单详情
        }
      ]
    }
  },
  methods: {
    handleSearch() {
      console.log('搜索', this.searchValue)
      this.getList()
    },
    async getList() {
      console.log('获取列表')
      const params = {
        custId: 0,
        custThridId: 0,
        custNum: 0,
        endDateTime: '',
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        rechargeState: '',
        startDateTime: '',
        tradeType: '',
        searchValue: this.searchValue
      }

      try {
        const res = await getOrderList(params)
        console.log('🚀 ~ getList ~ res:', res)
        this.tableList = res.data.orderInfoList
        this.total = res.data.count
        this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
      } catch (error) {
        console.log(error)
      }
    },
    onReachBottom() {
      console.log('🚀 ~ onReachBottom ~ ')
      if (this.total < 10 || this.total == this.tableList.length) {
        this.status = 'nomore'
        return
      }
      this.status = 'loading'
      setTimeout(() => {
        this.pageSize += 10
        this.getList()
        if (this.tableList.length != this.total) this.status = 'loadmore'
        else this.status = 'nomore'
      }, 500)
      console.log('加载..', this.pageSize)
    },
    changeTab(index) {
      console.log('🚀 ~ changeTab ~ index:', index)
      this.tabIndex = index
    },
    // 处理订单状态展示
    handleOrderState(state) {
      switch (state) {
        case 1:
          return '已下单'
        case 9:
          return '已取消'
        case 10:
          return '已退款'
        case 11:
          return '已完成'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  /* padding: 0 16px; */
  background: #f9fbff;
  min-height: 100vh;
  /* position: relative; */

  .top-wrapper {
    position: fixed;
    top: 44px;
    width: 100vw;
    background: #f9fbff;
    z-index: 999;
  }

  .top-cont {
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .top-title {
      font-weight: 500;
      font-size: 20px;
      color: #0f274b;
    }
    .top-ipt {
      height: 31px;
      background: #fff;
      margin-left: 26px;
      margin-right: 12px;
    }
    .top-filter {
      display: flex;
      align-items: center;
    }
  }

  .order-list {
    padding: 8px;
    background: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 12px;

    .order-source {
      margin-bottom: 12px;
      font-weight: 500;
      color: #0f274b;
    }

    .intervalName {
      margin-left: 10px;
      color: #ff6816;
      border-radius: 1px 1px 1px 1px;
      border: 1px solid #ff6816;
      padding: 0 4px;
    }

    .img-cont {
      margin: 10px;
      display: flex;
      justify-content: space-between;

      .img {
        display: flex;
        flex-direction: column;
        align-items: center;
        div {
          margin-top: 8px;
          color: #0f274b;
        }
      }
    }

    .price {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #0f274b;
      font-weight: 400;
      font-size: 12px;
    }

    .btn-cont {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }
  }
}
</style>