aerospace-app.git

<template>
  <div class="flex flex-col w-full h-full c2c-order-list">
    <div>
      <order-nav class="w-full" :title="$t('订单列表')" ref="nav">
        <template #right>
          <img class="w-24 h-27" :src="require('@/assets/image/c2c/Vector27.png')" alt="" @click="selectShow = true">
        </template>
      </order-nav>
    </div>
    <div class="flex-1 w-full overflow-auto">
      <div v-if="isEmpty === 'true'" class="flex justify-center mt-176">
        <div>
          <img class="w-157 h-152" :src="require('@/assets/image/c2c/Group323.png')" alt="">
          <p class="mt-36 font-28 text-center text-grey">{{ $t('暂无订单') }}</p>
        </div>
      </div>
      <div v-else>
        <van-pull-refresh :pulling-text="$t('下拉即可刷新')" :loosing-text="$t('释放即可刷新')" :loading-text="$t('加载中')"
          v-model="isLoading" @refresh="onRefresh">
          <van-list v-model="loading" :finished="finished" :immediate-check="false" :finished-text="$t('没有更多了')"
            @load="onLoad">
            <template v-if="list.length > 0">
              <items v-for="(item, index) in list" :items="item" :key="index" />
            </template>
            <div v-else class="w-full h-full">
              <van-empty class="custom-image" :image="require('@/assets/image/otc/nodatas.png')"
                :description="$t('暂无数据')">
              </van-empty>
            </div>
          </van-list>
        </van-pull-refresh>
        <!--        <div class="w-full mt-76 mb-52 font-28 text-grey text-center">已经全部加载完毕</div>-->
      </div>
    </div>
    <!--  显示筛选  -->
    <div class="select">
      <van-popup class="relative" v-model="selectShow" position="bottom" :style="fulHeight">
        <order-nav>
          <template #left><i></i></template>
          <template #title>
            <span class="font-35 font-700">{{ $t('订单历史筛选') }}</span>
          </template>
          <template #right>
            <van-icon @click.native="selectShow = false" name="cross" color="#9399A4" />
          </template>
        </order-nav>
        <div class=" px-37">
          <div class="">
            <p class="mb-38 font-28 text-grey">{{ $t('交易类型') }}</p>
            <div>
              <select-item :list="selectList.title" :value="currentDirection" @select='handleSelect' />
            </div>
          </div>
          <div class="mt-59">
            <p class="mb-38 font-28 text-grey">{{ $t('订单状态') }}</p>
            <div>
              <select-item :list="selectList.items" :value="currentState" @select='handleSelect2' />
            </div>
          </div>
          <div class="absolute right-37 left-37 bottom-70 flex">
            <van-button @click.native="reset" class="flex-1 mr-38 font-31 rounded-lg" type="info" color="#EAEBEE">
              <span style="color: #21262F">{{ $t('重置') }}</span>
            </van-button>
            <van-button @click.native="selectEnter" class="flex-1 font-31 rounded-lg" type="info" color="#1D91FF">
              {{ $t('确认') }}
            </van-button>
          </div>
        </div>
      </van-popup>
    </div>
 
    <!--  未读消息  -->
    <!--    <van-popup class="w-full h-full" v-model="showUnread" position="right">-->
    <!--      <unread @back="hiddenUnread" :data="unreadData"/>-->
    <!--    </van-popup>-->
  </div>
</template>
 
<script>
import {
  Popup,
  Icon,
  PullRefresh,
  Empty,
  Button,
  List, Toast,
} from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import Items from "@/page/orderList/items";
import SelectItem from "@/page/c2c-order-list/SelectItem";
import Unread from "@/page/c2c-order-list/Unread";
import listLoadMixins from '@/utils/list-load-mixins'
import { ctcOrderList } from "@/API/otc";
export default {
  name: "c2cOrderList",
  props: ['isEmpty'],
  mixins: [listLoadMixins],
  data() {
    return {
      currentDirection: '全部',
      currentState: '全部',
      form: {
        direction: '',
        state: '', // 0未付款/1已付款/2申诉中/3已完成/4已取消/5已超时
      },
      navHeight: 0,
      showUnread: false,
      selectShow: false,
      titleActive: '全部',
      itemActive: '全部',
      selectList: {
        title: [{
          title: this.$t('全部'),
          value: '',
        }, {
          title: this.$t('购买'),
          value: 'buy',
        }, {
          title: this.$t('出售'),
          value: 'sell',
        }],
        items: [
          {
            title: this.$t('全部'),
            value: '',
          },
          {
            title: this.$t('未付款'),
            value: 0,
          },
          {
            title: this.$t('已付款'),
            value: 1,
          },
          {
            title: this.$t('申诉中'),
            value: 2,
          },
          {
            title: this.$t('已完成'),
            value: 3,
          },
          {
            title: this.$t('已取消'),
            value: 4,
          },
          {
            title: this.$t('已超时'),
            value: 5,
          },
        ],
      },
    }
  },
  created() {
    this.get()
  },
  mounted() {
    // let obj =  this.selectList.title.find((item) => {
    //   return item.value === 'buy'
    // })
    this.navHeight = this.$refs.nav.$el.getBoundingClientRect().height;
  },
  methods: {
    get() { // 获取数据的方法需要自定义
      Toast.loading()
      ctcOrderList({ ...this.form }).then(res => {
        Toast.clear()
        res.data.forEach((item) => {
          // item.time = '01-03 17：20：20'
        })
        // console.log(res.data);
        this.handleData(res.data)
      })
    },
    handleSelect(data) {
      this.form.direction = data.value
      this.currentDirection = data.title
      // this.get()
    },
    handleSelect2(data) {
      this.form.state = data.value
      this.currentState = data.title
 
    },
    hiddenUnread() {
      this.showUnread = false;
    },
    // 筛选确定
    selectEnter() {
      this.selectShow = false
      this.onRefresh()
    },
    // 重置选择
    reset() {
      this.currentDirection = '全部'
      this.currentState = '全部'
      this.form.direction = ''
      this.form.state = ''
    },
  },
  computed: {
    fulHeight() {
      return {
        height: `calc(100vh - ${this.navHeight}px)`
      }
    },
    // unreadData() {
    //   const arr = this.formatData([...this.sell, ...this.buy])
    //   return arr.filter(v => v.msg !== undefined)
    // }
  },
  components: {
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
    [Empty.name]: Empty,
    OrderNav,
    Items,
    SelectItem,
    Unread,
  }
}
</script>
 
<style lang="scss" scoped>
.select {
  ::v-deep .van-popup {
    border-radius: 20px 20px 0 0;
  }
}
</style>