From 3ed2cb78a690b64c3b2646d35e1500081186dfa3 Mon Sep 17 00:00:00 2001
From: huzheng12 <52150713+huzheng12@users.noreply.github.com>
Date: Mon, 06 May 2024 00:21:32 +0800
Subject: [PATCH] first commit
---
src/page/pledgeLoan/pledgeLoanOrder.vue | 287 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 166 insertions(+), 121 deletions(-)
diff --git a/src/page/pledgeLoan/pledgeLoanOrder.vue b/src/page/pledgeLoan/pledgeLoanOrder.vue
index 632b149..d81d233 100644
--- a/src/page/pledgeLoan/pledgeLoanOrder.vue
+++ b/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}} 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}} {{ 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 }} 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 }} {{ 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>
\ No newline at end of file
--
Gitblit v1.9.3