id作用，及js获取标签属性

包含样式

屏幕快照 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>