first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/orderList/index.vue

@@ -3,24 +3,40 @@
    <div class="nav flex items-center">
      <van-icon name="arrow-left" />
      <div class="top-nav flex">
        <div :class="active ? 'active' : ''" @click="active = true">{{ $t('进行中') }}</div>
        <div :class="active ? 'active' : ''" @click="active = true">
          {{ $t("进行中") }}
        </div>
        <div :class="!active ? 'active' : ''" @click="active = false">
          {{ $t('已完成') }}
          {{ $t("已完成") }}
        </div>
      </div>
    </div>
    <van-tabs @change="handleChange" v-model="activeName">
      <van-tab v-for="(item, index) in tabList" :key="index" :title="item.label">
      <van-tab
        v-for="(item, index) in tabList"
        :key="index"
        :title="item.label"
      >
      </van-tab>
    </van-tabs>
    <div class="btp flex-1 bg-white">
      <van-pull-refresh :pulling-text="$t('下拉即可刷新')" :loosing-text="$t('释放即可刷新')" :loading-text="$t('加载中')"
        v-model="isLoading" @refresh="onRefresh">
        <van-list :immediate-check="false" v-model="loading" :finishedArr="finishedArr" :finishedArr-text="$t('没有更多了')"
          @load="onLoad">
      <van-pull-refresh
        :pulling-text="$t('下拉即可刷新')"
        :loosing-text="$t('释放即可刷新')"
        :loading-text="$t('加载中')"
        v-model="isLoading"
        @refresh="onRefresh"
      >
        <van-list
          :immediate-check="false"
          v-model="loading"
          :finishedArr="finishedArr"
          :finishedArr-text="$t('没有更多了')"
          @load="onLoad"
        >
          <div v-if="list.length === 0" class="zanwu">
            <img src="@/assets/image/zanwu.png" alt="" />
            <p>{{ $t('暂无订单') }}</p>
            <p>{{ $t("暂无订单") }}</p>
          </div>
          <div v-else>
            <Items v-for="(el, eIndex) in list" :key="eIndex" :items="el" />
@@ -32,10 +48,10 @@
</template>

<script>
import { Icon, Tab, Tabs, Toast, List, PullRefresh } from 'vant'
import listLoadMixins from '@/utils/list-load-mixins'
import Items from './items.vue'
import { getMerchantOrdersList } from '@/API/otc'
import { Icon, Tab, Tabs, Toast, List, PullRefresh } from "vant";
import listLoadMixins from "@/utils/list-load-mixins";
import Items from "./items.vue";
import { getMerchantOrdersList } from "@/API/otc";
export default {
  mixins: [listLoadMixins],
  components: {
@@ -48,78 +64,79 @@
    [PullRefresh.name]: PullRefresh,
  },
  created() {
    this.get()
    this.get();
  },
  methods: {
    get() { // 获取数据的方法需要自定义
      Toast.loading()
      getMerchantOrdersList(this.form).then(res => {
        Toast.clear()
    get() {
      // 获取数据的方法需要自定义
      Toast.loading();
      getMerchantOrdersList(this.form).then((res) => {
        Toast.clear();
        // console.log('承兑商订单列表', res)
        this.handleData(res)
      })
        this.handleData(res);
      });
    },
    handleChange() {
      this.form.state = this.tabList[this.activeName].value
      this.onRefresh()
    }
      this.form.state = this.tabList[this.activeName].value;
      this.onRefresh();
    },
  },
  data() {
    return {
      form: {
        direction: '', // buy sell
        state: '' // 0未付款/1已付款/2申诉中/3已完成/4已取消/5已超时
        direction: "", // buy sell
        state: "", // 0未付款/1已付款/2申诉中/3已完成/4已取消/5已超时
      },
      active: true,
      activeName: 0,
      finishedArr: [
        {
          label: this.$t('已完成'),
          value: 3
          label: this.$t("已完成"),
          value: 3,
        },
        {
          label: this.$t('已取消'),
          value: 4
          label: this.$t("已取消"),
          value: 4,
        },
        {
          label: this.$t('已超时'),
          value: 5
          label: this.$t("已超时"),
          value: 5,
        },
      ],
      runningArr: [
        {
          label: this.$t('全部'),
          value: ''
          label: this.$t("全部"),
          value: "",
        },
        {
          label: this.$t('已付款'),
          value: 1
          label: this.$t("已付款"),
          value: 1,
        },
        {
          label: this.$t('申诉中'),
          value: 2
          label: this.$t("申诉中"),
          value: 2,
        },
      ],
    }
    };
  },

  watch: {
    active(val) {
      this.activeName = 0
      this.activeName = 0;
      if (val === true) {
        this.form.state = ''
        this.form.state = "";
      } else {
        this.form.state = 3
        this.form.state = 3;
      }
      this.onRefresh()
    }
      this.onRefresh();
    },
  },
  computed: {
    tabList() {
      return this.active ? this.runningArr : this.finishedArr
      return this.active ? this.runningArr : this.finishedArr;
    },
  },
}
};
</script>

<style lang="scss" scoped>