wwbsr/pages/otc/order.vue

<template>
  <v-page>
    <v-header :title="$t('otc.a3')">
      <template #right>
        <v-picker :list="list" v-model="status" @input="changeStatus">
          <template #default="{label}">
            <view class="color-light">
              {{label||$t('otc.c1')}}
              <van-icon name="arrow-down" />
            </view>
          </template>
        </v-picker>
      </template>
    </v-header>
    <van-tabs
      :ellipsis="false"
      :border="false"
      class="border-b"
      :active="tab"
      @change="tabChange($event.detail.name)"
    >
      <van-tab :title="$t('otc.h2')" :name="1"></van-tab>
      <van-tab :title="$t('otc.h3')" :name="2"></van-tab>
      <van-tab :title="$t('otc.h4')" :name="3"></van-tab>
      <van-tab :title="$t('otc.h5')" :name="4"></van-tab>
    </van-tabs>
    <v-paging :ajax="myOrders" ref="scroll" :data="{type:tab,status}" class="layout-main">
      <template #box="list">
		<van-empty v-if="!$list(list).length" description="" />
        <view class="list">
          <view
            class="item bg-panel-3 box-shadow rounded-sm p-md m-md"
            v-for="item in $list(list)"
            :key="item.id"
          >
            <view class="row m-t-sm d-flex align-center">
              <view class="label"> {{$t('otc.f5')}} </view>
              <view class="flex-fill fn-right color-light">{{ item.order_sn }}</view>
            </view>
            <view class="row m-t-sm d-flex align-center">
              <view class="label"> {{$t('otc.c1')}} </view>
              <view class="flex-fill fn-right color-light"> {{ item.status_text }} </view>
            </view>
            <view class="row m-t-sm d-flex align-center">
              <view class="label"> {{$t('otc.c3')}} </view>
              <view class="flex-fill fn-right color-light"> {{ item.money }} </view>
            </view>
          
            <view class="row m-t-sm d-flex align-center">
              <view class="label"> {{$t('otc.b0')}} </view>
              <view class="flex-fill fn-right color-light"> {{ item.price }} CNY </view>
            </view>
            <view class="row m-t-sm d-flex align-center">
              <view class="label"> {{$t('otc.c4')}} </view>
              <view class="flex-fill fn-right color-light"> {{ item.amount }} </view>
            </view>
            <view class="row m-t-sm d-flex align-center">
              <view class="label"> {{$t('otc.b1')}} </view>
              <view class="flex-fill fn-right color-light"> {{ item.seller_payments.pay_type_text }} </view>
            </view>
            <view class="row m-t-sm d-flex align-center">
              <view class="label"> {{$t('otc.h6')}} </view>
              <view class="flex-fill fn-right color-light"> {{ item.created_at }} </view>
            </view>
            <view class="row m-t-sm d-flex align-center">
              <view class="label"> {{$t('otc.b2')}} </view>
              <view class="flex-fill fn-right color-light">
                <v-button type="blue" @click="toDetail(item)" size="mini" class="rounded-xs">
                  {{$t('otc.h7')}}
                </v-button>
              </view>
            </view>
          </view>
        </view>
      </template>
    </v-paging>
  </v-page>
</template>
<script>
import Otc from "@/api/otc";
export default {
  name: "order",
  data() {
    return {
      tab: 1,
      status:99
    };
  },
  computed:{
    list(){
      return [
        {
          value:99,
          label:this.$t('otc.h8')
        },
        {
          value:0,
          label:this.$t('otc.h9')
        },
        {
          value:1,
          label:this.$t('otc.i0')
        },
        {
          value:2,
          label:this.$t('otc.i1')
        },
        {
          value:3,
          label:this.$t('otc.c9')
        },
        {
          value:4,
          label:this.$t('otc.i2')
        },
      ]
    }
  },
  methods: {
    myOrders:Otc.myOrders,
    tabChange(idx){
      this.tab = idx
      this.$nextTick(()=>{
        this.$refs.scroll.ref()
      })
    },
    changeStatus(){
      this.$nextTick(()=>{
        this.$refs.scroll.ref()
      })
    },
    toDetail(item){
      this._router.push({path:'/pages/otc/detail',query:{id:item.id}})
    }
  },
};
</script>