beelink/src/views/mine/Transactiondetail.vue

<template>
  <div class="transaction">
      <a-breadcrumb separator=">">
      <a-breadcrumb-item>Home</a-breadcrumb-item>
      <a-breadcrumb-item href=""> Application Center </a-breadcrumb-item>
      <a-breadcrumb-item href=""> Application List </a-breadcrumb-item>
      <a-breadcrumb-item>An Application</a-breadcrumb-item>
    </a-breadcrumb>
      <div class="mingxilist" v-if="query.ifwithdrawal!=1">
        <div class="tabs">
          <div class="beforetab">交易明细详情</div>
        </div>
        <div class="detail">
        <div class="infoitem">
          <div class="left">金额</div>
          <div class="right">{{accountinfo.money}}</div>
        </div>

          <div class="infoitem">
            <div class="left">类型</div>
            <div class="right" v-if="accountinfo.type==1">直播收入</div>
            <div class="right" v-if="accountinfo.type==2">提现</div>
            <div class="right" v-if="accountinfo.type==3">后台充值</div>

          </div>

          <div class="infoitem">
            <div class="left">流水号</div>
            <div class="right">{{accountinfo.sn}}</div>
          </div>

          <div class="infoitem">
            <div class="left">日期</div>
            <div class="right">{{accountinfo.created_at}}</div>
          </div>

          <div class="infoitem">
            <div class="left">来源</div>
            <div class="right">{{accountinfo.remark}}</div>
          </div>
          <div class="back" @click="navto(1,2)">返回</div>
         
        </div>
      <NavBottom class="navbottom"></NavBottom>
    </div>
   
      <div class="mingxilist" v-if="query.ifwithdrawal==1">
        <div class="tabs">
          <div class="beforetab">提现记录详情</div>
        </div>
        <div class="detail">
        <div class="infoitem">
          <div class="left">提现金额</div>
          <div class="right">{{accountinfo.amount}}</div>
        </div>
         <div class="infoitem">
          <div class="left">到帐金额</div>
          <div class="right">{{accountinfo.money}}</div>
        </div>
         <div class="infoitem">
          <div class="left">手续费</div>
          <div class="right">{{accountinfo.sxf}}</div>
        </div>
          <div class="infoitem">
            <div class="left">提现状态</div>
             <div class="right" >{{accountinfo.statusname}}</div>
            <!-- <div class="right" v-if="accountinfo.status==1">直播收入</div>
            <div class="right" v-if="accountinfo.status==2">提现</div>
            <div class="right" v-if="accountinfo.status==3">后台充值</div> -->

          </div>
          <div class="infoitem">
            <div class="left">原因描述</div>
            <div class="right">{{accountinfo.remark}}</div>
          </div>
          <div class="infoitem">
            <div class="left">流水号</div>
            <div class="right">{{accountinfo.sn}}</div>
          </div>
          <div class="infoitem">
            <div class="left">名称</div>
            <div class="right">{{accountinfo.typename}}</div>
          </div>
          <div class="infoitem">
            <div class="left">日期</div>
            <div class="right">{{accountinfo.created_at}}</div>
          </div>

          <div class="infoitem">
            <div class="left">收款账户</div>
            <div class="right">{{accountinfo.account}}</div>
          </div>
        
          <div class="back" @click="navto(2)">返回</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 { transactioninfo, withdrawlxq } from '@/api';
import { useRoute } from 'vue-router';
import router from '@/router';
export default defineComponent({
  name: "Transactiondetail",
  components: {
      NavBottom
  },
  setup() {
    const accountinfo=ref<any>({});
    const query=ref({})
    onMounted(async () => {
      query.value=useRoute().query
      if(useRoute().query.ifwithdrawal){
        accountinfo.value=await withdrawlxq(useRoute().query.id)
      }else{
        accountinfo.value=await transactioninfo(useRoute().query.id)
      }
      
    })
    function navto(index: number,id?:number) {
      let url = "";
      switch (index) {
        case 1:
          
          url = "/mine/wallet"
          console.log(url)
          break;
        case 2:
          url = "/mine/transaction";
          break;
      }
      if(id){
        router.push({
          path: url,
          query:{ifsale:id }
        });
      }else{
        router.push({
          path: url
        });
    }
  
  }
    return {
      accountinfo,
      query,
      navto
    };
  },
});
</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;
    .tabs {
      display: flex;
      flex-wrap: nowrap;
      padding-top: 35px;
      padding-left: 40px;
    }
    .beforetab {
      color: #121212;
      font-size: 13px;
      line-height: 35px;
      font-weight: bold;
      margin-right: 57px;
    }
  }
  .detail{
    margin-top: 34px;
    .infoitem{
      width: 310px;
      display: flex;
      justify-content: space-between;
      color: #404040;
      font-size: 12px;
      margin-bottom: 40px;
      margin-left: 63px;
      .left{
        color: #808080;
      }
      .right{
        width: 225px;
      }
    }
    .back{
      width: 63px;
      height:23px;
      background: #08AE98;
      font-size: 10px;
      color: white;
      text-align:center;
      line-height: 23px;
      border-radius: 3px;
      margin-top: 57px;
      margin-left: 63px;
    }
  }
  .navbottom{
      padding-top: 75px;
      padding-bottom: 30px;
  }
}
</style>