beelink/src/views/mine/Transactiondetail.vue

<template>
  <div class="transaction">
      
      <div class="mingxilist" v-if="query.ifwithdrawal!=1">
        <div class="tabs">
          <div class="beforetab">{{lan.$t('jiaoyimingxixiangqing')}}</div>
        </div>
        <div class="detail">
        <div class="infoitem">
          <div class="left">{{lan.$t('jine')}}</div>
          <div class="right">{{accountinfo.money}}</div>
        </div>

          <div class="infoitem">
            <div class="left">{{lan.$t('leixing')}}</div>
            <div class="right" v-if="accountinfo.type==1">{{lan.$t('zhiboshouru')}}</div>
            <div class="right" v-if="accountinfo.type==2">{{lan.$t('tixian')}}</div>
            <div class="right" v-if="accountinfo.type==3">{{lan.$t('houtaichongzhi')}}</div>

          </div>

          <div class="infoitem">
            <div class="left">{{lan.$t('liushuihao')}}</div>
            <div class="right">{{accountinfo.sn}}</div>
          </div>

          <div class="infoitem">
            <div class="left">{{lan.$t('riqi')}}</div>
            <div class="right">{{accountinfo.created_at}}</div>
          </div>

          <div class="infoitem" v-if="accountinfo.type != 2">
            <div class="left">{{lan.$t('laiyuan')}}</div>
            <div class="right" style="cursor:pointer" @click="toinfo(accountinfo.source)">{{accountinfo.sourcetitle}}</div>
          </div>
          <div class="infoitem" v-if="accountinfo.type != 2">
            <div class="left">{{lan.$t('shijishichang')}}</div>
            <div class="right">{{accountinfo.livetime}}</div>
          </div>
          <div class="infoitem" v-if="accountinfo.type != 2">
            <div class="left">{{lan.$t('shijirenshu')}}</div>
            <div class="right">{{accountinfo.count}}</div>
          </div>
          <div class="back" @click="navto(1,2)">{{lan.$t('fanhui')}}</div>
         
        </div>
      <NavBottom class="navbottom"></NavBottom>
    </div>
   
      <div class="mingxilist" v-if="query.ifwithdrawal==1">
        <div class="tabs">
          <div class="beforetab">{{lan.$t('tixianjiluxiangqing')}}</div>
        </div>
        <div class="detail">
        <div class="infoitem">
          <div class="left">{{lan.$t('tixianjine')}}</div>
          <div class="right">{{accountinfo.amount}}</div>
        </div>
         <div class="infoitem">
          <div class="left">{{lan.$t('daozhangjine')}}</div>
          <div class="right">{{accountinfo.money}}</div>
        </div>
         <div class="infoitem">
          <div class="left">{{lan.$t('shouxufei')}}</div>
          <div class="right">{{accountinfo.sxf}}</div>
        </div>
          <div class="infoitem">
            <div class="left">{{lan.$t('tixianzhuangtai')}}</div>
             <div class="right" style="color: red;" >{{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">{{lan.$t('yuanyinmiaoshu')}}</div>
            <div class="right">{{accountinfo.remark}}</div>
          </div>
          <div class="infoitem">
            <div class="left">{{lan.$t('liushuihao')}}</div>
            <div class="right">{{accountinfo.sn}}</div>
          </div>
          <div class="infoitem">
            <div class="left">{{lan.$t('mingcheng')}}</div>
            <div class="right">{{accountinfo.typename}}</div>
          </div>
          <div class="infoitem">
            <div class="left">{{lan.$t('riqi')}}</div>
            <div class="right">{{accountinfo.created_at}}</div>
          </div>

          <div class="infoitem">
            <div class="left">{{lan.$t('shoukuanzhanghu')}}</div>
            <div class="right">{{accountinfo.typename}}&nbsp;&nbsp;&nbsp;&nbsp;{{accountinfo.account}}</div>
          </div>
        
        <div style="display:flex">
           <div class="back" @click="navto(2)">{{lan.$t('fanhui')}}</div>
          <div class="back fail" @click="navto(3)">{{lan.$t('shensu')}}</div>
        </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';
import { useI18n } from '@/utils/i18n';
export default defineComponent({
  name: "Transactiondetail",
  components: {
      NavBottom
  },
  setup() {
    const lan: any = useI18n();
    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 if(index==3){
         router.push({ path: "/mine/aboutus", query: { selected: 3 } });
      }else{
        router.push({
          path: url
        });
      }
  
    }

    function toinfo(id: string){
      router.push({path: '/regime/livedetail', query: {id: id}})
    }

    return {
      accountinfo,
      query,
      navto,
      lan,
      toinfo
    };
  },
});
</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;
    }
    .fail{
    background: #D12C2E;
  }
  }
  .navbottom{
      padding-top: 75px;
      padding-bottom: 30px;
  }
  
}
</style>