tf-business/order_module/searchOrder/index.vue

<template>
  <view class="searchOrder">
    <view class="serch-box">
      <view class="search-container">
        <view class="box-left">
          <view class="search-text" @click="changePicker">
            <view class="text">{{ searchText }}</view>
            <tui-icon name="arrowdown" color="#999999" :size="15"></tui-icon>
          </view>
          <view class="search-icon">
            <tui-icon name="search-2" color="#999999" :size="15"></tui-icon>
          </view>
        </view>
        <view class="box-ipt">
          <input
            type="text"
            v-model="queryData.search"
            confirm-type="search"
            placeholder="请搜索订单"
            @confirm="searchConfirm"
          />
        </view>
        <view class="box-delete" @click="deleteSearch">
          <tui-icon name="close-fill" color="#999999" :size="15"></tui-icon>
        </view>
      </view>
    </view>
    <!-- v-if="orderList.length > 0" -->
    <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>
    <!-- v-else -->
    <view class="empty" v-else>
      <view class="order-empty">
        <image src="@/static/image/order/search-empty.png" />
        <view class="empty-title">您还没有相关订单</view>
      </view>
    </view>

    <tui-picker
      :show="showPicker"
      :pickerData="array"
      title="请选择"
      confirmColor="#ea5c1e"
      @hide="hide"
      @change="pickerChange"
    >
    </tui-picker>
  </view>
</template>

<script>
import { orderGetAll } from "@/config/index";
export default {
  data() {
    return {
      array: [
        {
          text: "订单Id",
          value: "1",
        },
        {
          text: "买家账户",
          value: "2",
        },
        {
          text: "收件人姓名",
          value: "3",
        },
        {
          text: "收件人电话号码",
          value: "4",
        },
        {
          text: "下单号码",
          value: "6",
        },
      ],
      showPicker: false,
      searchText: "订单Id",
      queryData: {
        afterState: "",
        dates: [],
        page: 1,
        pageSize: 10,
        search: "",
        searchType: "1",
        state: "",
      },
      orderList: [],
      total: 0,
    };
  },
  methods: {
    async searchConfirm(e) {
      if (this.queryData.search == "") {
        this.$showToast("请输入你要搜索的内容");
        return;
      }
      let res = await orderGetAll(this.queryData);
      this.orderList = [...this.orderList, ...res.data.list];
      this.total = res.data.total;
    },
    pickerChange(val) {
      this.searchText = val.text;
      this.queryData.searchType = val.value;
    },
    // 清除查询参数
    deleteSearch() {
      this.queryData.search = "";
    },
    // 去到订单详情
    goOrderDetail(item) {
      this.navigateTo(
        `/order_module/orderDetail/index?orderId=${item.orderId}`
      );
    },
    hide(e) {
      this.showPicker = false;
    },
    changePicker() {
      this.showPicker = true;
    },
  },
  //  触底加载
  onReachBottom() {
    if (this.orderList.length >= this.total) {
      this.$showToast("暂无更多订单数据");
      return
    };
    this.queryData.page++;
    this.searchConfirm();
  },
};
</script>

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