id作用，及js获取标签属性
2018-12-04 本文已影响17人
艾希_可可
包含样式
屏幕快照 2018-12-04 下午8.21.29.png
1、一个图标带文字和箭头样式
2、一个cell文字样式
3、收购价格旁边的打折图片
4、使用id，js获取标签修改属性值
2、一个cell文字样式
<p style="line-height: 65px;display: flex;align-items: center;width: 100%;">
<span style="font-size: 17px;color: #333333;margin-left: 15px;width: 50%;text-align: left;">转让清算</span>
<span style="font-size: 12px;color: #666666;margin-right: 8px;width: 50%;text-align: right;" @click="turnRule">清算规则
</span>
<img src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/rightarrow.png" style="height: 18px;margin-right: 15px;"/>
</p>
4、使用id，js获取标签修改属性值
document.getElementById('dddid').style.backgroundImage = 'url(' + this.discountbg + ')'
<template>
<div style="background:white;">
<div style="width: 100%;height:46px;background: white;" class="rec" v-if="topTabNav">
<van-nav-bar class="debtDetailminetop"
title= "债转详情"
left-arrow
@click-left="debtdetailBackm"
/>
</div>
<div style="background: #FAFAFA;width: 100%;height: 10px;"></div>
<div style="width: 100%; height: 9rem; display: flex; align-items:center;">
<div style="width: 23%;">
<img style="width: 5rem; height: 5rem;" :src="icon"/>
</div>
<div style="width: 53%">
<p style="color: #333333; font-size: 1.8rem; font-weight: 450; text-align: left;">{{platName}}</p>
<p style="display: flex; margin-top: 0.8rem;">
<span style="color: #2A2A2A; font-size: 14px; line-height: 1.5rem;">
<span style="color: #F74C4C;">¥100,000</span>
债权现有余额
</span>
</p>
</div>
<div style="width: 24%;height: 9rem;">
<p style="display: flex;align-items: center;line-height: 9rem;" @click="turnXieYi">
<span style="font-size: 12px;line-height: 9rem;margin-right: 8px;width: 85%;text-align: right;">查看协议
</span>
<img src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/rightarrow.png" style="height: 18px;margin-right: 15px;line-height: 9rem;"/>
</p>
</div>
</div>
<div style="background: #FAFAFA;width: 100%;height: 10px;"></div>
<p style="line-height: 65px;display: flex;align-items: center;width: 100%;">
<span style="font-size: 17px;color: #333333;margin-left: 15px;width: 50%;text-align: left;">转让清算</span>
<span style="font-size: 12px;color: #666666;margin-right: 8px;width: 50%;text-align: right;" @click="turnRule">清算规则
</span>
<img src="https://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/rightarrow.png" style="height: 18px;margin-right: 15px;"/>
</p>
<div class="debtdatilLists">
<p class="pstyle" style="font-size: 16px;color: black;">
<span style="margin-left: 15px;">到账价值（元）</span>
<span style="margin-right: 15px;">{{this.cash}}</span>
</p>
<div style="background: #FAFAFA;width: 90%;height: 1.5px;margin-left: 5%;"></div>
<p class="pstyle">
<!--<span style="margin-left: 15px;">收购价格 <img :src="discountbg" style="margin-top: 5px;width: 40px;"/></span>-->
<!--<span style="margin-left: 15px;">收购价格 <span id="debtcashdiscountbgid" class="debtcashdiscountbg" style="background-image: url(http://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/webapp/sixbg.png)">4折</span> </span>-->
<span style="margin-left: 15px;">收购价格 <span class="debtcashdiscountbg" id="dddid">{{this.calRate}}折</span> </span>
<span style="margin-right: 15px;">{{this.discountAmount}}元</span>
</p>
<p class="pstyle">
<span style="margin-left: 15px;">到账资产宝<span style="color: dodgerblue">{{this.zcbPercent}}%</span></span>
<span style="margin-right: 15px;color: red">{{this.zcbCount}}个</span>
</p>
<p class="pstyle">
<span style="margin-left: 15px;">到账现金<span style="color: dodgerblue">{{this.cashPercent}}%</span></span>
<span style="margin-right: 15px;color: red">{{this.cash}}元</span>
</p>
</div>
<div style="background: #FAFAFA;width: 100%;height: 10px;"></div>
<div class="debtdatilLists">
<p class="pstyle" style="font-size: 16px;color: black;">
<span style="margin-left: 15px;">合计回收</span>
<span style="margin-right: 15px;">{{this.discountAmountAndAlreadyCapital}}元</span>
</p>
<div style="background: #FAFAFA;width: 90%;height: 1.5px;margin-left: 5%;"></div>
<p class="pstyle">
<span style="margin-left: 15px;">原债权本金</span>
<span style="margin-right: 15px;">{{this.totalCapital}}元</span>
</p>
<p class="pstyle">
<span style="margin-left: 15px;">已回收本金</span>
<span style="margin-right: 15px;">{{this.alreadyCapital}}元</span>
</p>
<p class="pstyle">
<span style="margin-left: 15px;">债权现有余额</span>
<span style="margin-right: 15px;">{{this.currentBalance}}元</span>
</p>
<p class="pstyle">
<span style="margin-left: 15px;">拟收购价格</span>
<span style="margin-right: 15px;">{{this.discountAmount}}元</span>
</p>
</div>
</div>
</template>
<script>
import { Button, Tab, Tabs, NavBar, Dialog, Toast} from 'vant'
export default {
name: 'debtDetailmine',
components: {Button, Tab, Tabs, NavBar, Dialog},
data () {
return {
topTabNav: true,
hasLogin: false,
account: '',
cash: '',
cashPercent: '',
discountAmount: '',
icon: '',
rate: '',
totalAmount: '',
zcbCount: '',
zcbPercent: '',
zcmReturn: '',
discountbg: 'http://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/webapp/eightbg.png',
discountAmountAndAlreadyCapital: '',
totalCapital: '',
alreadyCapital: '',
currentBalance: '',
calRate: '',
platName: ''
}
},
methods: {
debtdetailBackm: function () {
history.back(-1)
},
requestdebttransfer: function () {
this.postRequest('/buyback/api/assetstar/my/transfer/detail', {
'applyId': this.$route.query.applyid
}).then(respond => {
if (respond.status === 200) {
if (respond.data.code === 1000) {
console.log('成功')
this.account = respond.data.result.account
this.cash = respond.data.result.cash
this.cashPercent = respond.data.result.cashPercent
this.discountAmount = respond.data.result.discountAmount
this.icon = respond.data.result.icon
this.rate = respond.data.result.rate
this.totalAmount = respond.data.result.totalAmount
this.zcbCount = respond.data.result.zcbCount
this.zcbPercent = respond.data.result.zcbPercent
this.zcmReturn = respond.data.result.zcmReturn
this.discountAmountAndAlreadyCapital = respond.data.result.discountAmountAndAlreadyCapital
this.totalCapital = respond.data.result.totalCapital
this.alreadyCapital = respond.data.result.alreadyCapital
this.currentBalance = respond.data.result.currentBalance
this.platName = respond.data.result.platformName
this.calRate = parseFloat(this.rate) / 100
if (parseInt(this.rate) / 100 < 5) {
this.discountbg = 'http://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/webapp/fivebg.png'
} else if (parseInt(this.rate) / 100 < 6) {
this.discountbg = 'http://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/webapp/sixbg.png'
} else if (parseInt(this.rate) / 100 < 7) {
this.discountbg = 'http://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/webapp/sevenbg.png'
} else if (parseInt(this.rate) / 100 < 8) {
this.discountbg = 'http://lsdk.oss-cn-hangzhou.aliyuncs.com/webapp/webapp/eight.png'
}
document.getElementById('dddid').style.backgroundImage = 'url(' + this.discountbg + ')'
console.log(respond.data.result)
} else {
console.log('失败1')
console.log(respond.data.message)
}
}
console.log(respond.code)
})
},
turnRule: function () {
this.$router.push({name: 'liquidationRule', query: {}})
},
turnXieYi: function () {
this.$router.push({name: 'creditorcontract', query: {}})
}
},
mounted () {
if (localStorage.getItem('device') != null && localStorage.getItem('device') != '') {
this.topTabNav = false
} else {
this.topTabNav = true
}
if (localStorage.getItem('token') != '' && localStorage.getItem('token') != undefined && localStorage.getItem('token') != null) {
} else {
this.$router.push({name: '', query: {}})
}
this.requestdebttransfer()
}
}
</script>
<style lang="scss">
.debtdatilLists{
.pstyle{
line-height: 40px;
display: flex;
justify-content: space-between;
font-size: 14px;
color: #999999;
}
}
.debtdatilListp{
display: flex;justify-content: space-around;width: 100%;font-size: 13px;line-height: 33px;text-align: center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
}
.debtdatilbottomleftBtn{
line-height: 55px;width: 72%;height: 55px;background-color: #FFFFFF;color: #333333;font-size: 15px;text-align: left;flex: 1;
}
.debtDetailminetop{
/*font-family: PingFangSC-Semibold;*/
font-size: 17px;
color: #030303;
width: 100%;
letter-spacing: -0.41px;
text-align: center;
position: fixed;top: 0;
z-index: 99 !important;
}
.rec .van-nav-bar .van-icon {
color: black;
width: 12px;
height: 28px;
line-height: 28px;
font-weight: bold;
}
.debtcashdiscountbg{
line-height: 26px;
display: inline-block;
align-items: center;
width: 55px;
height: 26px;
background-size: 100% 100%;
color: white;
font-size: 13px;
background-repeat: no-repeat;
}
</style>
