first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/pledgeLoan/pledgeLoanOrder.vue

@@ -1,139 +1,184 @@
<template>
    <div class="pledgeLoanOrder">
        <assets-head :title="$t('质押借币订单')" :backFunc="() => $router.push('/pledgeLoan')"></assets-head>
        <template v-if="noticeList.length">
            <div class="h-100 flex items-center justify-between pl-32 pr-28 mb-40" style="color:#F5C425;background:#56481B;" v-for="(item,index) in noticeList" :key="index" @click="toOrderDetail(item)">
                <div class="flex font-28">
                    <img src="../../assets/image/waring.png" alt="" class="w-36 h-36" />
                    <span class="ml-22">{{$t('有笔订单质押率高于60%有平仓风险')}}</span>
                </div>
                <img src="@/assets/image/warningTo.png" alt="" class="w-32 h-32" />
            </div>
        </template>
        <div class="content px-32">
            <van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
                :finished-text="orderList.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130" >
                <div class="item mb-40 contBackground rounded-lg pl-24 pr-22 pb-30" v-for="(item,index) in orderList" :key="index"
                    @click="toOrderDetail(item.id)">
                    <div class="flex justify-between border-b-color h-101 box-border text items-center mb-30">
                        <div class="textColor"><span
                                class="skyColor mr-10">{{fixStr(item.orderType)}}</span>{{item.loanAmount}}&nbsp;USDT</div>
                        <div
                            :class="{'redColor':item.state==3,'red': item.state == 4,'text-grey':item.state==2,'skyColor':item.state==1}">
                            {{fixStatus(item.state)}}</div>
                    </div>
                    <div class="flex">
                        <div class="mr-100">
                            <div class="text-grey">{{$t('贷款币种')}}</div>
                            <div class="textColor mt-20">{{item.loanCurrency.toUpperCase()}}</div>
                        </div>
                        <div class="mr-100">
                            <div class="text-grey">{{$t('质押率')}}</div>
                            <div class="textColor mt-20">{{item.pledgeRate!==''?(item.pledgeRate*10000/100).toFixed(2):'--'}}%</div>
                        </div>
                        <div>
                            <div class="text-grey">{{$t('总负债')}}</div>
                            <div class="textColor mt-20">{{item.debtAmount}}&nbsp;{{ item.loanCurrency.toUpperCase() }}</div>
                        </div>
                    </div>
                </div>
                <div class="flex flex-col justify-center pt-50 pb-20 items-center" v-if="!orderList.length && !loading">
                    <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
                    <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
                </div>
            </van-list>
  <div class="pledgeLoanOrder">
    <assets-head
      :title="$t('质押借币订单')"
      :backFunc="() => $router.push('/pledgeLoan')"
    ></assets-head>
    <template v-if="noticeList.length">
      <div
        class="h-100 flex items-center justify-between pl-32 pr-28 mb-40"
        style="color: #f5c425; background: #56481b"
        v-for="(item, index) in noticeList"
        :key="index"
        @click="toOrderDetail(item)"
      >
        <div class="flex font-28">
          <img src="../../assets/image/waring.png" alt="" class="w-36 h-36" />
          <span class="ml-22">{{ $t("有笔订单质押率高于60%有平仓风险") }}</span>
        </div>
        <img src="@/assets/image/warningTo.png" alt="" class="w-32 h-32" />
      </div>
    </template>
    <div class="content px-32">
      <van-list
        v-model="loading"
        :loading-text="$t('加载中...')"
        :finished="finished"
        :finished-text="orderList.length ? $t('已经全部加载完毕') : ''"
        @load="onLoad"
        :offset="130"
      >
        <div
          class="item mb-40 contBackground rounded-lg pl-24 pr-22 pb-30"
          v-for="(item, index) in orderList"
          :key="index"
          @click="toOrderDetail(item.id)"
        >
          <div
            class="flex justify-between border-b-color h-101 box-border text items-center mb-30"
          >
            <div class="textColor">
              <span class="skyColor mr-10">{{ fixStr(item.orderType) }}</span
              >{{ item.loanAmount }}&nbsp;USDT
            </div>
            <div
              :class="{
                redColor: item.state == 3,
                red: item.state == 4,
                'text-grey': item.state == 2,
                skyColor: item.state == 1,
              }"
            >
              {{ fixStatus(item.state) }}
            </div>
          </div>
          <div class="flex">
            <div class="mr-100">
              <div class="text-grey">{{ $t("贷款币种") }}</div>
              <div class="textColor mt-20">
                {{ item.loanCurrency.toUpperCase() }}
              </div>
            </div>
            <div class="mr-100">
              <div class="text-grey">{{ $t("质押率") }}</div>
              <div class="textColor mt-20">
                {{
                  item.pledgeRate !== ""
                    ? ((item.pledgeRate * 10000) / 100).toFixed(2)
                    : "--"
                }}%
              </div>
            </div>
            <div>
              <div class="text-grey">{{ $t("总负债") }}</div>
              <div class="textColor mt-20">
                {{ item.debtAmount }}&nbsp;{{ item.loanCurrency.toUpperCase() }}
              </div>
            </div>
          </div>
        </div>
        <div
          class="flex flex-col justify-center pt-50 pb-20 items-center"
          v-if="!orderList.length && !loading"
        >
          <img
            src="@/assets/image/assets-center/no-data.png"
            alt=""
            class="w-180 h-180"
          />
          <p class="text-grey mt-10">{{ $t("暂无记录") }}</p>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import Axios from "@/API/pledgeLoan.js";
import { List } from 'vant'
    export default {
        props: {
import { List } from "vant";
export default {
  props: {},
  components: {
    assetsHead,
    [List.name]: List,
  },
  data() {
    return {
      page: 1,
      orderList: [],
      noticeList: [],
      loading: false,
      finished: false,
    };
  },

        },
        components: {
            assetsHead,
            [List.name]: List,
        },
        data(){
            return {
                page:1,
                orderList:[],
                noticeList:[],
                loading: false,
                finished:false,
            }
        },
        
        methods: {
            onLoad() {
                this.getOrderList()
            },
            toOrderDetail(id){
                this.$router.push({ path: '/pledgeLoanOrderDetail', query: { id }})
            },
            fixStr(orderType){
                let str = ''
                if (orderType ==1){
                    str = this.$t('借款')
                } else if (orderType == 2){
                    str = this.$t('新增质押')
                } else if (orderType == 3) {
                    str = this.$t('续借')
                } else if (orderType == 4) {
                    str = this.$t('还款')
                } else if (orderType == 5) {
                    str = this.$t('强平结清')
                }
                return str;
            },
            fixStatus(state){
                let string = ''
                if (state == 1) {
                    string = this.$t('计息中')
                } else if (state == 2) {
                    string = this.$t('已结清')
                } else if (state == 3) {
                    string = this.$t('强平结清')
                } else if (state == 4) {
                    string = this.$t('已逾期')
                } 
                return string
            },
            getOrderList(){
                Axios.orderList({
                    page_no:this.page
                }).then(res=>{
                    this.orderList = [...this.orderList, ...res.data.list]
                    // console.log(logs)
                    this.loading = false
                    if (res.data.list.length < 10) {
                        this.finished = true
                    } else {
                        this.page++
                    }
                    this.noticeList = res.data.noticeList
                })
            }
  methods: {
    onLoad() {
      this.getOrderList();
    },
    toOrderDetail(id) {
      this.$router.push({ path: "/pledgeLoanOrderDetail", query: { id } });
    },
    fixStr(orderType) {
      let str = "";
      if (orderType == 1) {
        str = this.$t("借款");
      } else if (orderType == 2) {
        str = this.$t("新增质押");
      } else if (orderType == 3) {
        str = this.$t("续借");
      } else if (orderType == 4) {
        str = this.$t("还款");
      } else if (orderType == 5) {
        str = this.$t("强平结清");
      }
      return str;
    },
    fixStatus(state) {
      let string = "";
      if (state == 1) {
        string = this.$t("计息中");
      } else if (state == 2) {
        string = this.$t("已结清");
      } else if (state == 3) {
        string = this.$t("强平结清");
      } else if (state == 4) {
        string = this.$t("已逾期");
      }
      return string;
    },
    getOrderList() {
      Axios.orderList({
        page_no: this.page,
      }).then((res) => {
        this.orderList = [...this.orderList, ...res.data.list];
        // console.log(logs)
        this.loading = false;
        if (res.data.list.length < 10) {
          this.finished = true;
        } else {
          this.page++;
        }
    }
        this.noticeList = res.data.noticeList;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.pledgeLoanOrder{
    width: 100%;
    box-sizing: border-box;
.pledgeLoanOrder {
  width: 100%;
  box-sizing: border-box;
}
.skyColor{
    color: #13D3EB;
.skyColor {
  color: #13d3eb;
}
.redColor{
    color: #E35461;
.redColor {
  color: #e35461;
}
.red{
    color: #FF0000;
.red {
  color: #ff0000;
}
</style>