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">
        <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">
          <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">￥1 x 1</view>
          </view>
          <view class="all-price">总价￥{{ item.price }}，优惠￥99.99，实付￥100</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.getOrderList()
    },
    //  获取订单列表
    async getOrderList() {
      this.$loading.show("加载中!");
      try {
        let { data } = await orderGetAll(this.serachParams);
        console.log(data);
        this.orderList = data.list
      } catch (error) {
      } finally {
        this.$loading.hide();
      }
    },
  }
}
</script>

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