<template>
|
<div class="credit-detail" v-if="needCreditInfo.length >=1 ">
|
<x-header :left-options="{backText: '', preventGoBack: true}"
|
@on-click-back="goBackPage"
|
class="gradient-color">{{ prodDetailInfo.unit.prodName }}</x-header>
|
<!--信用卡-->
|
<div class="credit-card-img">
|
<img :src="needCreditInfo[0].attrs[0]" alt="信用卡">
|
<h3>{{ needCreditInfo[0].attrs[1] }}</h3>
|
<p>{{ needCreditInfo[0].attrs[2] }}</p>
|
<div class="label" v-if="labelList">
|
<span v-for="(item,index) in labelList"
|
:key="item">{{ item }}</span>
|
</div>
|
</div>
|
<FSpace type="small"></FSpace>
|
<!--优惠信息-->
|
<div class="discount">
|
<h2 class="credit-section-title">{{ needCreditInfo[1].name}}</h2>
|
<div class="discount-box">
|
<div v-for="(item,index) in offerInfoList"
|
:key="index">
|
<i class="iconfont" :class="item.iconName"></i>
|
<span>{{ item.offerInfo }}</span>
|
</div>
|
</div>
|
</div>
|
<FSpace type="small"></FSpace>
|
<!--基本信息-->
|
<div class="basic">
|
<h2 class="credit-section-title">{{ needCreditInfo[2].name }}</h2>
|
<div class="basic-box">
|
<div class="basic-item"
|
:key="index"
|
v-for="(item,index) in basicInfoList">
|
<div>{{ item.title }}</div>
|
<div>{{ item.info }}</div>
|
</div>
|
</div>
|
</div>
|
<FSpace type="small"></FSpace>
|
<!--费用信息-->
|
<div class="cost">
|
<h2 class="credit-section-title">{{ needCreditInfo[3].name}}</h2>
|
<div class="cost-box">
|
<div class="cost-item"
|
v-for="(item, index) in costInfoList"
|
:key="index">
|
<div>{{ item.title }}</div>
|
<div v-html="item.info"></div>
|
</div>
|
</div>
|
</div>
|
<!--提示-->
|
<div class="tips">{{ needCreditInfo[4].attrs[0] }}</div>
|
<FSpace type="large"></FSpace>
|
<!--申请按钮-->
|
<FButton class="btn" @on-click-button="handleApplyJump" :text="buttonMsg" :isBorderRadius="false">
|
<div slot="sbIphoneX" class="sbIphoneX"></div>
|
</FButton>
|
</div>
|
</template>
|
|
<script>
|
/**
|
* Created by c.y on 2018/3/22.
|
* 信用卡的详情
|
*/
|
import {XHeader} from 'vux'
|
import FSpace from '../../components/common/FSpace.vue';
|
import FButton from '../../components/common/FButton.vue'
|
import systemApi from '../../api/api';
|
import statusCodeManage from '../../api/statusCodeManage';
|
import productJump from '../../tool/productRequestJump';
|
import goBackCont from '../common/goBackControl';
|
import pageBack from '../../tool/pageBackByAndroid';
|
|
export default {
|
name: 'f-credit-detail',
|
components: {
|
XHeader,
|
FSpace,
|
FButton
|
},
|
data(){
|
return {
|
buttonMsg: '', // 立即申请的字由后台返回
|
prodType:null,
|
prodDetailInfo: null, // 产品的初始化详情
|
needCreditInfo: [] // 信用卡详情
|
}
|
},
|
computed: {
|
// 优惠信息列表的组装
|
offerInfoList () {
|
return this.getCombList(this.needCreditInfo[1].attrs, 'iconName', 'offerInfo');
|
},
|
// 信用卡标签的组装
|
labelList () {
|
return this.needCreditInfo[0].attrs.splice(3);
|
},
|
// 基本信息的组装
|
basicInfoList () {
|
return this.getCombList(this.needCreditInfo[2].attrs, 'title', 'info');
|
},
|
// 费用信息的组装
|
costInfoList () {
|
return this.getCombList(this.needCreditInfo[3].attrs, 'title', 'info');
|
}
|
},
|
methods: {
|
goBackPage() {
|
goBackCont.goBackFun(this);
|
},
|
/**
|
* 标题与文字的组合，例如icon与文字，左边标题与文字的组合
|
* @param attrList 属性列表
|
* @param titleKey { String } 组合后的titleKey
|
* @param infoKey { String } 组合后的infoKey
|
* @return {Array}
|
*/
|
getCombList (attrList, titleKey, infoKey) {
|
let combList = [];
|
let titleList = [];
|
let infoList = [];
|
// index是奇数的话，那么就是标题，是偶数的话，那么就是文字的
|
attrList.forEach(function (item, index) {
|
// 如果是偶数的话
|
if (index % 2 === 0) {
|
titleList.push(item);
|
// 奇数的话
|
} else {
|
infoList.push(item);
|
}
|
});
|
titleList.forEach(function (item, index) {
|
combList.push({
|
[titleKey]: item,
|
[infoKey]: infoList[index]
|
});
|
});
|
return combList;
|
},
|
// 获取Attr的列表, prodElements产品组件的元素列表
|
getAttrList (prodElements) {
|
// 获取用户修改的数据
|
let attrList = [];
|
prodElements.map(function (listItem) {
|
listItem.attrs.forEach(function (item) {
|
attrList.push(item.value);
|
});
|
});
|
return attrList;
|
},
|
// 记录产品的点击次数
|
productClickNumber (productId) {
|
let submitInfo = {
|
prodId: productId
|
};
|
systemApi.fetchProdRec(submitInfo).then((res) => {
|
}, (error) => {
|
statusCodeManage.showTipOfStatusCode(error,this);
|
})
|
},
|
// 立即申请按钮事件
|
handleApplyJump () {
|
let sessionId = window.sessionStorage.getItem('newSid');
|
let isRealName = parseInt(window.sessionStorage.getItem('newClientState'));
|
|
let _this = this;
|
if (sessionId === null) {
|
window.sessionStorage.setItem('newGoBackPage',window.location.hash.split('#')[1]);
|
this.$router.push({name: 'f-login'});
|
} else if (isRealName === 0) {
|
window.sessionStorage.setItem('newGoBackPage',window.location.hash.split('#')[1]);
|
this.$router.push({name: 'f-auth'});
|
} else {
|
let _prodId = _this.$route.query.id;
|
let _url = window.location.href;
|
let infoPage = _this.$route.fullPath;
|
_url = encodeURI(_url);
|
systemApi.getVisitUrl({prodId: _prodId, redirectUrl: _url}).then(
|
response => {
|
productJump(response, _this, infoPage);
|
},
|
error => {
|
statusCodeManage.showTipOfStatusCode(error,_this);
|
}
|
);
|
}
|
},
|
// 初始化产品详情
|
init (productId) {
|
let _this = this;
|
let submitInfo = {
|
prodId: productId
|
};
|
systemApi.fetchProdDetail(submitInfo).then((res) => {
|
_this.prodDetailInfo = res.body.prodDetailInfo;
|
_this.buttonMsg = res.body.buttonMsg;
|
_this.prodType = res.body.prodDetailInfo.unit.prodType;
|
// 组装产品详情需要的数据格式
|
_this.prodDetailInfo.components.forEach(function (item) {
|
_this.needCreditInfo.push({
|
name: item.name,
|
attrs: _this.getAttrList(item.showEles)
|
});
|
});
|
}, (error) => {
|
statusCodeManage.showTipOfStatusCode(error,_this);
|
});
|
}
|
},
|
activated: function () {
|
let _this = this;
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'in'});
|
let productId = this.$route.query.id;
|
this.init(productId);
|
this.productClickNumber(productId);
|
window.backPageByAndroid =function (obj) {
|
// 如果是详情界面,就调用详情界面的返回方法
|
goBackCont.goBackFun(_this);
|
}
|
},
|
beforeRouteEnter(to, from, next) {
|
// 如果是从以下界面过来的,走逻辑返回，否则走正常返回
|
goBackCont.gotoNext(to, from, next);
|
},
|
deactivated(){
|
this.$store.commit('UPDATE_DIRECTION', {direction: 'none'});
|
this.needCreditInfo = [];
|
this.buttonMsg = '';
|
pageBack.androidBackBtn();
|
// window.backPageByAndroid =function (obj) {
|
// console.log('window->history');
|
// window.history.go(-1);
|
// }
|
}
|
}
|
</script>
|
|
<style lang="less">
|
@import "../../style/mixin";
|
|
.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;
|
}
|
}
|
|
.icon-gift, .icon-coffee {
|
color: #ff8657;
|
}
|
|
.icon-food, .icon-species, .icon-vip {
|
color: #ffb446;
|
}
|
|
.icon-hotel, .icon-supermarket {
|
color: #0092f1;
|
}
|
|
.icon-shopping, .icon-car {
|
color: #18bfff;
|
}
|
|
.icon-tour, .icon-coupon {
|
color: #4adfff;
|
}
|
|
.icon-ensure {
|
color: #00df9d;
|
}
|
|
.credit-detail {
|
.f-button {
|
margin: 0;
|
}
|
.gradient-color {
|
.color-linear-gradient();
|
}
|
.credit-card-img {
|
padding: 12px 15px;
|
img {
|
width: 100%;
|
height: 220px;
|
border-radius: @border-radius-normal-size;
|
}
|
h3 {
|
font-size: @font-size-primary;
|
color: @color-text-primary;
|
line-height: 25px;
|
font-weight: normal;
|
}
|
p {
|
font-size: @font-size-small;
|
color: @color-text-third;
|
line-height: 25px;
|
}
|
.label {
|
span {
|
display: inline-block;
|
height: 14px;
|
line-height: 14px;
|
font-size: 8px;
|
color: @color-primary-light;
|
padding: 1px;
|
margin-right: 10px;
|
margin-bottom: 5px;
|
border: 1px solid @color-primary-light;
|
}
|
}
|
}
|
.credit-section-title {
|
position: relative;
|
padding-left: 12px;
|
font-size: @font-size-primary;
|
line-height: 44px;
|
color: @color-text-primary;
|
font-weight: normal;
|
&:after {
|
.setBottomLine(@color-divider-regular);
|
}
|
}
|
.discount-box {
|
box-sizing: border-box;
|
padding: 4px 12px;
|
div {
|
width: 345px;
|
line-height: 24px;
|
display: flex;
|
i {
|
width: 18px;
|
}
|
span {
|
flex: 1;
|
padding-left: 6px;
|
padding-top: 1px;
|
font-size: @font-size-medium;
|
color: @color-text-primary;
|
}
|
}
|
}
|
.basic {
|
.basic-box {
|
box-sizing: border-box;
|
padding: 4px 12px;
|
.basic-item {
|
.flexLayout(flex-start, flex-start, row);
|
margin: 2px 0;
|
div {
|
&:first-child {
|
width: 60px;
|
margin-right: 12px;
|
font-size: @font-size-medium;
|
color: @color-text-third;
|
}
|
&:last-child {
|
flex: 1;
|
font-size: @font-size-medium;
|
color: @color-text-primary;
|
}
|
}
|
}
|
}
|
}
|
.cost {
|
.cost-box {
|
box-sizing: border-box;
|
padding: 4px 12px;
|
.cost-item {
|
.flexLayout(flex-start, flex-start, row);
|
margin: 2px 0;
|
div {
|
&:first-child {
|
width: 60px;
|
margin-right: 12px;
|
font-size: @font-size-medium;
|
color: @color-text-third;
|
}
|
&:last-child {
|
flex: 1;
|
font-size: @font-size-medium;
|
color: @color-text-primary;
|
}
|
}
|
}
|
}
|
}
|
.tips {
|
font-size: @font-size-small;
|
color: @color-text-third;
|
background-color: @color-background-default;
|
text-align: center;
|
padding: 5px 0 2px;
|
}
|
.f-space-large {
|
background: @color-background-default;
|
}
|
.btn {
|
position: fixed;
|
bottom: 0;
|
z-index: 9;
|
width: 100%;
|
}
|
}
|
|
@media only screen
|
and ( min-device-width: 320Px )
|
and ( max-device-width: 320Px )
|
and ( -webkit-min-device-pixel-ratio: 1 )
|
and ( orientation: portrait ) {
|
.credit-detail {
|
.discount-box {
|
box-sizing: border-box;
|
padding: 4px 12px;
|
div {
|
width: 304px;
|
line-height: 24px;
|
i {
|
margin-right: 6px;
|
}
|
span {
|
font-size: @font-size-medium;
|
color: @color-text-primary;
|
}
|
}
|
}
|
}
|
|
}
|
</style>
|
