lilishop-ui/manager/src/views/distribution/distributionOrder.vue

<template>
  <div>
    <t-card style="margin-bottom: 12px">
      <t-form :data="searchForm" layout="inline" :labelWidth="70" class="search-form" @submit="handleSearch">
        <t-form-item label="订单编号" name="orderSn">
          <t-input v-model="searchForm.orderSn" placeholder="请输入订单编号" clearable style="width: 240px" />
        </t-form-item>
        <t-form-item label="分销商" name="distributionName">
          <t-input v-model="searchForm.distributionName" placeholder="请输入分销商名称" clearable style="width: 240px" />
        </t-form-item>
        <t-form-item label="店铺名称">
          <t-select v-model="searchForm.storeId" placeholder="请选择" :filterable="true" clearable style="width: 240px" @input-change="searchChange">
            <t-option v-for="item in shopList" :value="item.id" :key="item.id" :label="item.storeName" />
          </t-select>
        </t-form-item>
        <t-form-item label="订单时间">
          <t-date-picker v-model="timeRange" mode="date" range format="YYYY-MM-DD" valueType="time-stamp" placeholder="选择时间" style="width: 240px" />
        </t-form-item>
        <t-form-item>
          <t-button theme="primary" class="search-btn" @click="handleSearch">搜索</t-button>
        </t-form-item>
      </t-form>
    </t-card>
    <t-card>
      <t-table :loading="loading" :columns="columns" :data="data" ref="table" class="mt_10" rowKey="id">
        <template #goodsMsg="{ row }">
          <div class="goods-msg">
            <img :src="row.image" width="60" height="60" alt="" />
            <div>
              <div class="div-zoom">
                <a @click="linkTo(row.goodsId,row.skuId)">{{ row.goodsName }}</a>
              </div>
              <div style="color:#999;font-size:10px">数量：x{{ row.num }}</div>
              <t-popup trigger="hover" placement="top" :showArrow="true">
                <template #content>
                  <vue-qr :text="wapLinkTo(row.goodsId,row.skuId)" :margin="0" colorDark="#000" colorLight="#fff" :size="150" />
                </template>
                <img src="../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" />
              </t-popup>
            </div>
          </div>
        </template>
        <template #distributionOrderStatus="{ row }">
          <t-tag :theme="filterStatusColor(row.distributionOrderStatus) === 'green' ? 'success' : (filterStatusColor(row.distributionOrderStatus) === 'orange' ? 'warning' : 'danger')" size="small" variant="light">{{ filterStatus(row.distributionOrderStatus) }}</t-tag>
        </template>
      </t-table>
      <div class="mt_10" style="display: flex; justify-content: flex-end">
        <t-pagination :current="searchForm.pageNumber" :total="Number(total)" :pageSize="searchForm.pageSize" :pageSizeOptions="[20, 50, 100]" size="small" :showJumper="true" @change="onPaginationChange" />
      </div>
    </t-card>
  </div>
</template>

<script>
  import { getDistributionOrder } from "@/api/distribution";
  import { orderStatusList } from "./dataJson";
  import { getShopListData } from "@/api/shops";
  import vueQr from "vue-qr";
  import { MessagePlugin } from "tdesign-vue";

  export default {
    name: "distributionOrder",
    components: {
         "vue-qr":vueQr
    },
    data() {
      return {
        timeRange: undefined, // 范围时间
        orderStatusList, // 订单状态列表
        shopList: [], // 店铺列表
        distributionId: this.$route.query.id, // 分销id
        loading: true, // 表单加载状态
        searchForm: { // 搜索框初始化对象
          pageNumber: 1, // 当前页数
          pageSize: 20, // 页面大小
          sort:"create_time",
          order:"desc"
        },
        columns: [
          { title: "订单编号", colKey: "orderSn", minWidth: 180, fixed: "left", tooltip: true },
          { title: "商品信息", colKey: "goodsMsg", minWidth: 180 },
          { title: "分销商", colKey: "distributionName", tooltip: true, minWidth: 120 },
          { title: "店铺名称", colKey: "storeName", minWidth: 120, tooltip: true },
          { title: "状态", colKey: "distributionOrderStatus", minWidth: 120 },
          { title: "佣金金额", colKey: "rebate", minWidth: 120, cell: (h, p) => h("priceColorScheme", { props: { value: p.row.rebate, color: this.$mainColor } }) },
          { fixed: "right", title: "创建时间", colKey: "createTime", minWidth: 150 },
        ],
        data: [], // 表单数据
        total: 0 // 表单数据总数
      };
    },
    methods: {
      // 初始化数据
      init() {
        this.getDataList();
        this.getShopList()
      },
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getDataList();
      },
      changePageSize(v) {
        this.searchForm.pageSize = v;
        this.getDataList();
      },
      onPaginationChange(info) {
        if (info && typeof info.pageSize !== "undefined" && info.pageSize !== this.searchForm.pageSize) {
          this.changePageSize(info.pageSize);
        }
        if (info && typeof info.current !== "undefined") {
          this.changePage(info.current);
        }
      },
      // 搜索
      handleSearch() {
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = 20;
        this.getDataList();
      },
      // 获取列表数据
      getDataList() {
        this.searchForm.distributionId = this.distributionId;
        this.loading = true;
        if (Array.isArray(this.timeRange) && this.timeRange.length === 2) {
          const startTime = this.timeRange[0]
          const endTime = this.timeRange[1]
          this.searchForm.startTime = this.$options.filters.unixToDate(startTime / 1000)
          this.searchForm.endTime = this.$options.filters.unixToDate(endTime / 1000)
        } else {
          this.searchForm.startTime = null
          this.searchForm.endTime = null
        }
        // 带多条件搜索参数获取表单数据 请自行修改接口
        getDistributionOrder(this.searchForm)
          .then((res) => {
            this.loading = false;
            if (res.success) {
              this.data = res.result.records;
              this.total = res.result.total;
            }
          })
          .catch(() => {
            this.loading = false;
          });
      },
      getShopList(val) { // 获取店铺列表 搜索用
        const params = {
          pageNumber: 1,
          pageSize: 20,
          storeName: ''
        }
        if (val) {
          params.storeName = val;
        } else {
          params.storeName = ''
        }

        getShopListData(params).then(res => {
          this.shopList = res.result.records
        })
      },
      searchChange(val) { // 店铺搜索，键盘点击回调
        this.getShopList(val)
      },
      filterStatus (status) { // 过滤订单状态
        const arr = [
          {status: 'NO_COMPLETED', title: '未完成'},
          {status: 'COMPLETE', title: '完成'},
          {status: 'REFUND', title: '退款'},
        ]
        for (let i=0;i<arr.length;i++) {
          if (arr[i].status === status) {
            return arr[i].title;
          }
        }
        return '未完成'; // 默认返回未完成
      },
      filterStatusColor (status) { // 状态tag标签颜色
        const arr = [
          {status: 'NO_COMPLETED', color: 'orange'},
          {status: 'COMPLETE', color: 'green'},
          {status: 'REFUND', color: 'red'},
        ]
        for (let i=0;i<arr.length;i++) {
          if (arr[i].status === status) {
            return arr[i].color;
          }
        }
        return 'orange'; // 默认返回橙色
      }
    },
    mounted() {
      this.init();
    },
    watch: {
      $route(e) { // 监听路由，参数变化调取接口
        this.distributionId = e.query.id ? e.query.id : undefined;
        this.getDataList();
      }
    }
  };
</script>
<style lang="scss">
  .goods-msg {
    display: flex;
    align-items: center;
    >div{
      margin-left: 10px;
    }
  }
</style>