tf-business/pages/tabbar/order/index.vue

<template>
  <view class="order">
    <capsule :showBorder="true" bgColor="#FFFFFF">
      <template v-slot:top>
        <view class="order-box">订单列表</view>
      </template>
    </capsule>
    <view class="order-top">
      <view class="search-box" @click="navigateTo('/order_module/searchOrder/index')">
        <view class="search-icon">
          <tui-icon name="search-2" :size="18" color="#999999"></tui-icon>
        </view>
        <text>请输入订单号/手机号</text>
      </view>
      <view class="order-state">
        <scroll-view scroll-x="true" class="scroll-X">
          <view
            class="scroll-item"
            v-for="(item, index) in orderState"
            :key="index"
            :class="item.state == orderIdx ? 'act' : ''"
            @click="changeState(item.state)"
            >{{ item.title }}</view
          >
        </scroll-view>
      </view>
    </view>
    <view class="order-container" v-if="orderList.length > 0">
      <view class="order-list">
        <view
          class="order-item"
          v-for="item in orderList"
          :key="item.orderId"
          @click="goOrderDetail(item)"
        >
          <view class="order-number">
            <view class="number">订单编号:{{ item.orderFormid }}</view>
            <view class="number-icon">
              <text>详情</text>
              <tui-icon
                name="arrowright"
                :size="20"
                color="#999999"
                style="padding: 0;"
              ></tui-icon>
            </view>
          </view>
          <view class="text-info">用户昵称：{{ item.customerName }}</view>
          <view class="text-info">用户手机号:{{ item.customerPhone }}</view>
          <view class="commodity-list">
            <view
              class="commodity-item"
              v-for="item2 in item.products"
              :key="item2.orderProductId"
            >
              <view class="item-left">
                <view class="left-image">
                  <image :src="item2.image" />
                </view>
                <view class="left-text">
                  <view class="text-title">{{ item2.productName }}</view>
                  <template v-if="item2.productName == '扫码付款商品'">
                    <view class="text-price">扫码付款商品</view>
                  </template>
                  <template v-else>
                    <view class="text-price">小份</view>
                    <view class="text-price">x1</view>
                  </template>
                </view>
              </view>
              <view class="item-right">￥{{ item2.productPrice }}</view>
            </view>
          </view>
          <view class="gifts">
            <view class="gifs-left">赠送代金券</view>
            <view class="gifs-right">￥{{ item.presenterVoucher }}</view>
          </view>
          <view class="all-price"
            >总价￥{{ item.price }}</view
          >
          <view class="border-box"></view>
          <view class="order-state">
            <text v-if="item.state == 1">待付款</text>
            <text v-if="item.state == 2">待发货</text>
            <text v-if="item.state == 3">待收货</text>
            <text v-if="item.state == 4">已完成</text>
            <text v-if="item.state == 5">交易关闭(已取消)</text>
            <text v-if="item.state == 6">待成团</text>
            <text v-if="item.state == 7">待售后</text>
            <text v-if="item.state == 8" :style="{ color: '#EA1717' }"
              >待核销(未付款)</text
            >
            <text v-if="item.state == 9">待核销(已付款)</text>
            <text v-if="item.state == 10">已核销</text>
          </view>
        </view>
      </view>
    </view>
    <view class="order-empty" v-else>
      <image src="@/static/image/order/empty.png" />
      <view class="empty-title">暂无订单信息</view>
      <view class="empty-info">有订单信息您会在这边看到的</view>
    </view>
  </view>
</template>

<script>
import { orderGetAll } from "@/config/index.js";
export default {
  created() {
    this.getOrderList();
  },
  data() {
    return {
      orderState: [
        {
          title: "全部",
          state: "",
        },
        {
          title: "未付款",
          state: 8,
        },
        {
          title: "已付款",
          state: 9,
        },
        {
          title: "已核销",
          state: 10,
        },
        {
          title: "已取消",
          state: 5,
        },
        {
          title: "售后订单",
        },
      ],
      orderIdx: 0,
      // 请求订单参数
      serachParams: {
        afterState: "",
        dates: [],
        page: 1,
        pageSize: 10,
        search: "",
        searchType: "1",
        state: "",
      },
      orderList: [],
    };
  },
  methods: {
    // 状态修改
    changeState(state) {
      this.orderIdx = state;
      this.serachParams.state = state;
      this.orderList = []
      //  请求新的数据
      this.getOrderList();
    },
    //  获取订单列表
    async getOrderList() {
      this.$loading.show("加载中!");
      try {
        let { data } = await orderGetAll(this.serachParams);
        this.orderList = [...this.orderList,...data.list];
      } catch (error) {
      } finally {
        this.$loading.hide();
      }
    },
    // 去到订单详情
    goOrderDetail(item) {
      this.navigateTo(
        `/order_module/orderDetail/index?orderId=${item.orderId}`
      );
    },
  },
  //  触底加载
  onReachBottom() {
    this.serachParams.page++;
    this.getOrderList();
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>