logistics.vue

<template>
  <div>
    <!-- 搜索工作栏 -->
    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true" style="margin-top: 20px;">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item :label="$t('controlorder.orderNo')" prop="orderNo" required :error="$t('postorder.orderNoRules')">
            <el-input v-model="queryParams.orderNo" style="width: 250px;" :placeholder="$t('postorder.orderNoRules')" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t('common.search') }}</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">{{ $t('common.reload') }}</el-button>
      </el-form-item>
    </el-form>
    <span>{{ $t('orderdetail.activeSecond') }}</span>
    <el-divider />
    <div style="margin-top: 50px;">
      <el-timeline v-if="data && data.length" :reverse="false">
        <el-timeline-item v-for="(activity, index) in data" :key="index" :timestamp="parseTime(activity.businessTime)">
          {{ $l(activity, 'title') }}
          <div :class="{red: !!activity.mark}">{{ $l(activity, 'remarks') }}</div>
        </el-timeline-item>
      </el-timeline>
      <el-result v-else icon="info " :title="$t('orderdetail.noData')" :sub-title="$t('orderdetail.notOrderData')" />
    </div>
  </div>
</template>

<script>
import { getLogistics } from '@/api/order'
import { parseTime } from '@/utils/ruoyi'
export default {
  data() {
    return {
      parseTime,
      reverse: true,
      queryParams: {
        page: 1,
        rows: 10,
        phone: null,
        name: null,
        company: null,
        pid: null
      },
      data: []
    }
  },
  methods: {
    handleQuery() {
      this.$refs['queryForm'].validate(v => {
        if (v) {
          getLogistics(this.queryParams).then(r => {
            this.data = r.data
          })
        }
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs['queryForm'].resetFields()
    }
  }
}
</script>

<style scoped>
.red{
  color:red !important;
}
</style>