<template>
|
<div class="assessment-result-page">
|
<x-header :left-options="{showBack: true, backText: '', preventGoBack:true}" @on-click-back="goBackPage" class="gradient-color">额度评估</x-header>
|
<div class="result-box">
|
<!--表盘开始-->
|
<div class="dash-board">
|
<div class="circle" :style="{ transform: dashRotate }">
|
<div class="square"></div>
|
</div>
|
<div class="result">
|
<p>您的额度评估如下</p>
|
<p>￥<span>{{ quota }}</span></p>
|
</div>
|
</div>
|
<!--表盘结束-->
|
<!--波浪开始-->
|
<div class="waveWrapper gradient-color waveAnimation">
|
<div class="waveWrapperInner bgTop">
|
<div class="wave waveTop"></div>
|
</div>
|
<div class="waveWrapperInner bgMiddle">
|
<div class="wave waveMiddle"></div>
|
</div>
|
<div class="waveWrapperInner bgBottom">
|
<div class="wave waveBottom"></div>
|
</div>
|
</div>
|
<!--波浪结束-->
|
</div>
|
<FBlockTitle title="为你推荐" v-if="prodList.length"></FBlockTitle>
|
<FProdList :lists="prodList" @on-click-prodItem="handleProductJump" v-if="prodList.length"></FProdList>
|
</div>
|
</template>
|
|
<script>
|
/**
|
* Created by c.y on 2018/3/16.
|
* 额度评估的结果页
|
*/
|
import FBlockTitle from '../../components/common/FBlockTitle.vue';
|
import FProdList from '../../components/common/FProdList.vue';
|
import systemApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
import {XHeader} from 'vux';
|
|
export default {
|
name: 'f-assessment-result',
|
data() {
|
return {
|
dashRotate: 'rotate(0deg)',
|
quota: 0, // 额度结果
|
prodList: [] // 产品列表
|
}
|
},
|
components: {
|
FBlockTitle,
|
FProdList,
|
XHeader
|
},
|
methods: {
|
goBackPage(){
|
this.$router.push({path:'f-main'});
|
},
|
// 处理产品跳转
|
handleProductJump (item) {
|
// 极速贷款或者银行卡
|
if (item.productType === 40000005 || item.productType === 40000006) {
|
this.$router.push({
|
path: '/f-loan-detail',
|
query: {
|
id: item.prodId,
|
}
|
});
|
// 信用卡
|
} else if (item.productType === 40000007) {
|
this.$router.push({
|
path: '/credit-detail',
|
query: {
|
id: item.prodId,
|
}
|
});
|
}
|
},
|
// 获取Attr的列表, prodElements产品组件的元素列表
|
getAttrList (prodElements) {
|
// 获取用户修改的数据
|
let attrList = [];
|
if (prodElements instanceof Array) {
|
prodElements.map(function (listItem) {
|
listItem.attrs.forEach(function (item) {
|
attrList.push(item.value);
|
});
|
});
|
}
|
return attrList;
|
},
|
init () {
|
let _this = this;
|
systemApi.fetchPushProd().then((res) => {
|
res.body.forEach(function (item) {
|
_this.prodList.push({
|
prodId: item.unit.prodId,
|
content: _this.getAttrList(item.showEles),
|
productType: item.unit.prodType,
|
applyNumber: item.unit.showNumPrefix + item.unit.showNum
|
});
|
});
|
}, (error) => {
|
statusCodeManage.showTipOfStatusCode(error,_this);
|
});
|
}
|
},
|
activated: function () {
|
let _this = this;
|
this.quota = 0;
|
if (this.$route.query.quota) {
|
this.quota = this.$route.query.quota;
|
}
|
this.prodList=[];
|
this.init();
|
setTimeout(function () {
|
_this.dashRotate = 'rotate(200deg)';
|
}, 500);
|
}
|
}
|
</script>
|
|
<style lang="less">
|
@import "../../style/mixin";
|
.assessment-result-page {
|
.result-box {
|
padding-top: 38px;
|
.color-linear-gradient(@color-gradient-darkBlue-left, @color-gradient-darkBlue-right);
|
}
|
.vux-header {
|
.color-linear-gradient(@color-primary-light, @color-primary, 90deg);
|
.vux-header-title {
|
font-size: 18px;
|
}
|
.vux-header-left {
|
.left-arrow:before {
|
border: solid 1px @color-white;
|
border-width: 2px 0 0 2px;
|
}
|
}
|
.vux-header-right{
|
color: @color-white !important;
|
}
|
}
|
}
|
@keyframes move_wave {
|
0% {
|
transform: translateX(0) translateZ(0) scaleY(1)
|
}
|
50% {
|
transform: translateX(-25%) translateZ(0) scaleY(1)
|
}
|
100% {
|
transform: translateX(0) translateZ(0) scaleY(1)
|
}
|
}
|
|
.waveWrapper {
|
height: 68px;
|
overflow: hidden;
|
position: relative;
|
}
|
|
.waveWrapperInner {
|
position: absolute;
|
width: 100%;
|
overflow: hidden;
|
height: 100%;
|
bottom: -1px;
|
}
|
|
.bgTop {
|
z-index: 15;
|
opacity: 0.5;
|
}
|
|
.bgMiddle {
|
z-index: 10;
|
opacity: 0.75;
|
}
|
|
.bgBottom {
|
z-index: 5;
|
}
|
|
.wave {
|
position: absolute;
|
left: 0;
|
width: 200%;
|
height: 100%;
|
background-repeat: repeat no-repeat;
|
background-position: 0 bottom;
|
transform-origin: center bottom;
|
}
|
|
.waveTop {
|
background-size: 60% 60px;
|
background-image: url(../../assets/img/wave-top.png);
|
}
|
|
.waveAnimation .waveTop {
|
animation: move-wave 3s infinite;
|
-webkit-animation: move-wave 3s;
|
-webkit-animation-delay: 1s;
|
animation-delay: 1s;
|
}
|
|
.waveMiddle {
|
background-size: 60% 60px;
|
background-image: url(../../assets/img/wave-mid.png);
|
}
|
|
.waveAnimation .waveMiddle {
|
animation: move_wave 10s linear infinite;
|
}
|
|
.waveBottom {
|
background-size: 60% 60px;
|
background-image: url(../../assets/img/wave-bot.png);
|
}
|
|
.waveAnimation .waveBottom {
|
animation: move_wave 15s linear infinite;
|
}
|
|
.dash-board {
|
position: relative;
|
width: 100%;
|
height: 200px;
|
text-align: center;
|
color: @color-white;
|
font-size: @font-size-medium;
|
&:before {
|
content: '';
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 200px;
|
height: 200px;
|
border-radius: 50%;
|
border: 2px solid #68c1f8;
|
border-bottom-color: transparent;
|
}
|
&:after {
|
content: '';
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 140px;
|
height: 140px;
|
border-radius: 50%;
|
border: 6px solid #a1e1fe;
|
border-bottom-color: transparent;
|
}
|
.result {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 100%;
|
p {
|
&:first-child {
|
font-size: @font-size-medium;
|
}
|
&:last-child {
|
font-size: 20PX;
|
span {
|
font-size: 30PX;
|
}
|
|
}
|
}
|
}
|
.circle {
|
width: 200px;
|
height: 200px;
|
margin: 0 auto;
|
border-radius: 50%;
|
border: 1px solid transparent;
|
position: relative;
|
transform: rotate(0deg);
|
transition: all 1s;
|
.square {
|
position: absolute;
|
left: 25px;
|
bottom: 30px;
|
width: 6px;
|
height: 6px;
|
margin-left: -6px;
|
border-radius: 50%;
|
border: 2px solid #9ddcfc;
|
background-color: @color-white;
|
}
|
}
|
}
|
</style>
|
