beelink/src/views/mine/Transaction.vue

<template>
  <div class="transaction">
     
         <div class="mingxilist">
     <div class="mingxitop">
       <div><span class="tabtitle">{{lan.$t("mingxichaxun")}}</span>
</div>
        <a-range-picker @change="onChange" class="choosedate"  :placeholder="[lan.$t('kaishiriqi'), lan.$t('jieshuriqi')]"/>
      </div>
      <div>
        <table class="table">
          <thead>
            <tr class="head">
              <th>{{lan.$t('zhanghu')}}</th>
              <th>{{lan.$t('tijiaoriqi')}}</th>
              <th>{{lan.$t('zhuangtai')}}</th>
              <th>{{lan.$t('jine')}}</th>
              <th>{{lan.$t('caozuo')}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(i,j) in withdrawallist.data" :key="j">
              <td>{{i.typename}}    {{i.account}}</td>
              <td>{{i.created_at}}</td>
              <td class="moneyadd">{{i.statusname}}</td>
              <td>
                <span v-if="international==1">$</span>
                <span v-else>￥</span>
                {{i.money}}
              </td>
              <td @click="navto(3,i.withdrawalid)">{{lan.$t('chakanxiangqing')}}</td>
            </tr>
                
       
          </tbody>
        </table>
        <div class="pages">
          <a-pagination v-model:current="page" :total="withdrawallist.total" :showLessItems="true" @change="pagechange"/>
        </div>
      </div>
      <NavBottom class="navbottom"></NavBottom>
    </div>
    
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import NavBottom from "@/components/NavBottom.vue";
import { withdrawal } from '@/api';
import router from '@/router';
import { useI18n } from '@/utils/i18n';
export default defineComponent({
  name: "Transaction",
  components: {
      NavBottom
  },
  setup() {
    const lan: any = useI18n();
    const withdrawallist =ref<any>({})
    const dates=ref<Array<string>>(["",""])
    const page = ref(1);
    onMounted(async () => {
      withdrawallist.value=await withdrawal()
      console.log(withdrawallist.value)  
    })
    async function onChange(e: any,dateString: string){
      console.log(dateString)
      dates.value[0]=dateString[0]
      dates.value[1]=dateString[1]
      withdrawallist.value=await withdrawal({bdate:dates.value[0],edate:dates.value[1]})
    }
    function navto(index: number,id?: number) {
        let url = "";
        switch (index) {
          case 1:
            
            url = "/mine/addaccount"
            console.log(url)
            break;
          case 2:
            url = "/mine/cashout";
            break;
          case 3:
            url = "/mine/transactionxq"
        }
        if(id){
          router.push({
            path: url,
            query:{id:id,ifwithdrawal:1}
          });
        }else{
          router.push({
            path: url
          });
        }
  
  }

   async function pagechange(e: any) {
      console.log(e)
      page.value=e
      withdrawallist.value=await withdrawal({bdate:dates.value[0],edate:dates.value[1],page:e});
    }
    
    return {
      withdrawallist,
      onChange,
      navto,
      pagechange,
      lan
    };
  },
});
</script>
<style lang="scss" scoped>
.transaction ::v-deep(.ant-breadcrumb) > span:last-child {
  color: #08ae98;
}
.transaction{
  .mingxilist {
    width: 1150px;
    // height: 533px;
    background: white;
    border-radius: 18px;
    margin-top: 18px;
   .mingxitop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 18px;
      padding-right: 40px;
    .tabtitle {
      width: 60px;
      margin-right: 30px;
      margin-left: 40px;
      font-weight: bold;
    }
    .tabs {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      font-size: 13px;
      font-weight: bold;
      color: #111;
      padding: 11px 0;
 
    > div {
      margin-right: 38px;
      cursor: pointer;
      text-align: center;
      width: 40px;
      font-size:11px;
    }
    .on {
      color: #08ae98;
      position: relative;
      &::before {
        content: "";
        display: block;
        position: absolute;
        bottom: -6px;
        left: 8px;
        width: 25px;
        height: 1px;
        background-color: #08ae98;
      }
    }
  }
    }
  }
  .table {
    width: 1150px;
    max-height: 365px;
    text-align: center;
    color: #343434;
    font-size: 12px;
    margin-top: 13px;
    tr {
      width: 1150px;
      height: 40px;
      // border-bottom: 1px solid red;
    }
    tr:nth-child(even) {
      //偶数行
      background: #f7fcfc;
    }
    .head {
      width: 1150px;
      height: 43px;
      color: white;
      background: #08ae98;
    }
    .moneyadd {
      color: #08ae98;
    }
    .moneyreverse {
      color: #d22d2e;
    }
  }
  .navbottom{
      padding-top: 75px;
      padding-bottom: 30px;
  }
}
.pages {
        display: flex;
        justify-content: center;
        margin-top: 46px;
        padding-bottom: 28px;
        ::v-deep(.ant-pagination-next) > .ant-pagination-item-link,
        ::v-deep(.ant-pagination-prev) > .ant-pagination-item-link,
        ::v-deep(.ant-pagination-item),
        ::v-deep(.ant-pagination-jump-next-custom-icon),
        ::v-deep(.ant-pagination-jump-prev-custom-icon) {
        border: 1px solid #08ae98;
        }
        ::v-deep(.ant-pagination-item-active) a {
        color: #fff;
        }
        ::v-deep(.ant-pagination-item-active) {
        background-color: #08ae98;
        }
    }
</style>