<!--
* @ Author: zhaowei
* @ Create Time: 2022-08-11 11:02:17
* @ Modified by: zhaowei
* @ Modified time: 2022-09-02 10:01:41
* @ Description:
-->
<template>
<div class="body">
<div class="rarle">
<tatle-bar :tatle="tatleName"></tatle-bar>
</div>
<div>
<scroller-view pullup="true" pulldown="true" v-calculate-height>
<div class="card" v-for="(item, index) in productParam" :key="index">
<div @click="onClickDetails()">
<van-row>
<van-col span="16">
<van-col span="24" class="contractNo"><span>合同编号：</span>{{ item.contractNo }}</van-col>
<van-col style=" width: 100%; margin-left: 8%; line-height: 2;">
<van-row gutter="20">
<van-col span="14" class="lable"><span>合同类型：</span></van-col>
<van-col span="10" class="contractType">{{ item.contractType }}</van-col>
</van-row>
<van-row gutter="20">
<van-col span="14" class="lable"><span>合同金额(元)：</span></van-col>
<van-col span="10" class="contractAmount" style="color:rgb(255, 204, 0);">{{ item.contractAmount }}
</van-col>
</van-row>
<van-row gutter="20">
<van-col span="14" class="lable"><span>合同利率：</span></van-col>
<van-col span="10" class="contractRate">{{ item.contractRate }}</van-col>
</van-row>
<van-row gutter="20">
<van-col span="14" class="lable"><span>还款方式：</span></van-col>
<van-col span="10" class="paymentMethod">{{ item.paymentMethod }}</van-col>
</van-row>
</van-col>
</van-col>
<van-col span="8">
<svg class="icon" aria-hidden="true" v-if="item.status === 1">
<use xlink:href="#icon-yiqianding"></use>
</svg>
<svg class="icon" aria-hidden="true" v-if="item.status === 2">
<use xlink:href="#icon-weiqianding"></use>
</svg>
</van-col>
</van-row>
<div style="background-color: #00c6ff; text-align: center; color: #FFFFFF; margin-top: 4px"><span>查看借据</span></div>
</div>
<!-- <van-row type="flex" class="bottom" @click="onClickPicket()">
<van-col span="24" class="lablel"><span>查看合同</span>
<svg class="iconl" aria-hidden="true">
<use xlink:href="#icon-a-xiayiye24x24px"></use>
</svg>
</van-col>
</van-row> -->
</div>
<div class="card" v-for="(item, index) in productParam" :key="index">
<div @click="onClickDetails()">
<van-row>
<van-col span="16">
<van-col span="24" class="contractNo"><span>产品意向申请：</span>{{ item.contractNo }}</van-col>
<van-col style=" width: 100%; margin-left: 8%; line-height: 2;">
<van-row gutter="20">
<van-col span="14" class="lable"><span>产品名称：</span></van-col>
<van-col span="10" class="contractType">{{ item.contractType }}</van-col>
</van-row>
<van-row gutter="20">
<van-col span="14" class="lable"><span>申请金额(元)：</span></van-col>
<van-col span="10" class="contractAmount" style="color:rgb(255, 204, 0);">{{ item.contractAmount }}
</van-col>
</van-row>
<van-row gutter="20">
<van-col span="14" class="lable"><span>申请利率：</span></van-col>
<van-col span="10" class="contractRate">{{ item.contractRate }}</van-col>
</van-row>
<van-row gutter="20">
<van-col span="14" class="lable"><span>申请日期：</span></van-col>
<van-col span="10" class="paymentMethod">{{ item.paymentMethod }}</van-col>
</van-row>
</van-col>
</van-col>
<van-col span="8">
<svg class="icon" aria-hidden="true" v-if="item.status === 1">
<use xlink:href="#icon-yiqianding"></use>
</svg>
<svg class="icon" aria-hidden="true" v-if="item.status === 2">
<use xlink:href="#icon-weiqianding"></use>
</svg>
</van-col>
</van-row>
<div style="background-color: #00c6ff; text-align: center; color: #FFFFFF; margin-top: 4px"><span>查看进度</span></div>
</div>
<!-- <van-row type="flex" class="bottom" @click="onClickPicket()">
<van-col span="24" class="lablel"><span>查看合同</span>
<svg class="iconl" aria-hidden="true">
<use xlink:href="#icon-a-xiayiye24x24px"></use>
</svg>
</van-col>
</van-row> -->
</div>
</scroller-view>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
* title
*/
@Component({
name: "AccommodMain"
})
export default class AccommodMain extends Vue {
tatleName = "我的贷款"
//结清贷款计划
productParam = [{
contractNo: "117647289092",
contractType: "一般借款合同",
contractAmount: "30,000.00",
contractRate: "4.13%",
paymentMethod: "等额本金",
status: 2
},
{
contractNo: "117647289092",
contractType: "一般借款合同",
contractAmount: "30,000.00",
contractRate: "1.13%",
paymentMethod: "等额本金",
status: 2
},
{
contractNo: "117647289092",
contractType: "一般借款合同",
contractAmount: "30,000.00",
contractRate: "1.13%",
paymentMethod: "等额本金",
status: 1
}]
//点击还款计划事件
onClickDetails() {
this.$router.push({
name: "Accommodation"
})
}
//点击body事件
onClickPicket() {
this.$router.push({
name: "Accommodation"
})
}
}
</script>
<style scoped lang="scss">
.body {
height: 100%;
width: 100%;
background-color: rgba(241, 241, 241, 1);
}
.acced {
width: 100%;
height: 20%;
}
.icon {
width: 80px;
height: 80px;
margin-top: 10%;
}
.card {
border-radius: 2%;
height: 28vh;
margin: 3% 3% 3% 3%;
background: #ffffff;
}
.contractNo {
margin: 5% 7%;
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
font-weight: 700;
font-style: normal;
font-size: 16px;
color: #333333;
}
.lable {
text-align: left;
color: #7F7F7F;
font-size: 14px;
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
font-weight: 400;
font-style: normal;
}
.iconl {
width: 20px;
height: 20px;
}
.bottom[data-v-d306f034] {
background-color: #3672f1;
border: none;
border-radius: 5px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
text-align: center;
margin-top: 15px;
}
.lablel {
text-align: center;
font-size: 12px;
color: #FFFFFF;
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
font-weight: 400;
font-style: normal;
}
</style>