boss/pages/main/index/user_credit_item.vue

<template>
  <div id="order_detailbox">
    <div class="order-infos">
      <div class="pays-info">
        <p>
          <span class="pays-title">当前状态：</span>
          <span>{{info.status_name}}</span>
        </p>
        <p>
          <span class="pays-title">购买时间：</span>
          <span>{{info.pay_time}}</span>
        </p>
        <p style="max-width: 400px">
          <span class="pays-title">技术信用报告项：</span>
          <span >{{info.items_name}}</span>
        </p>

        <p>
          <span class="pays-title">技术信用报告：</span>
          <span v-if="info.status==2"><a :href="info.report_url" style="color: #3c95ff">查看技术信用报告</a></span>
          <span v-else>暂未授权</span>
        </p>
        <p>
          <span class="pays-title">实际支付费用：</span>
          <span>{{(info.real_price/100).toFixed(2)}}元</span>
        </p>
        <p>
          <span class="pays-title">退款时间：</span>
          <span v-if="info.status==3">{{info.updated_at}}</span>
          <span v-else>--</span>
        </p>
      </div>
    </div>
    <a :href="info.user_url" target="blank" class="person-img">
      <img :src="info.icon_url" alt/>
      <p class="textc">{{info.nickname}}</p>
    </a>
    <div class="person-text">查看</div>
    <a :href="info.user_url" target="blank" class="person-img visited_user_avatar">
      <img :src="info.visited_icon_url" alt/>
      <p class="textc">{{info.visited_nickname}}</p>
      <el-button v-if="info.status==1" style="margin-top: 15px" @click="remind">提醒授权</el-button>
    </a>

    <!-- </section> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        id: 0,
        info: []
      };
    },

    computed: {},
    mounted() {
      this.getFinanceList();
    },
    methods: {
      remind() {
        let body = {
          visited_uid: this.info.visited_uid
        };
        this.$post("/api/admin/user_credit/remind", body).then((res)=>{
          if (res.status==1){
            this.$message({
              message: '提醒成功',
              type: 'success'
            })
          }

        });

      },
      getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return decodeURI(r[2]);
        return null; //返回参数值
      },
      changePageSize(pageSize) {
        this.currentPageSize = pageSize;
      },
      async getFinanceList() {
        let body = {
          id: this.id
        };
        const res = await this.$post("/api/admin/user_credit/getOrderDetail", body);
        this.info = res.data;
      }
    },
    created() {
      this.id = this.getUrlParam("id");
    }
  };
</script>

<style scoped>
  #order_detailbox {
    padding: 30px;
    font-size: 14px;
  }

  #order_detailbox h3 {
    /* font-size: 24px; */
  }

  #order_detailbox .lines {
    padding-top: 30px;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  #order_detailbox .icons-s {
    color: #5dc945;
    font-size: 34px;
    padding: 25px 0;
    vertical-align: middle;
  }

  #order_detailbox .icons-f {
    color: red;
    font-size: 34px;
    padding: 30px 0;
    vertical-align: middle;
  }

  .pays-info .pays-title {
    color: #1d2a3a;
    font-weight: bold;
    font-size: 15px;
  }

  .orange {
    color: rgba(255, 152, 0, 1);
  }

  .green {
    color: rgba(37, 155, 36, 1);
  }


  .font20 {
    font-size: 20px;
  }

  .pays-info > p,
  .pays-others > p {
    padding-bottom: 6px;
  }

  .pays-others h3 {
    padding-top: 20px;
    color: black;
    font-size: 16px;
  }

  .person-img {
    padding: 20px 30px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    position: absolute;
    top: 50px;
    left: 600px;
  }

  .person-text {
    position: absolute;
    top: 120px;
    left: 746px;
  }

  .visited_user_avatar {
    left: 780px;
  }

  .person-img p {
    padding-top: 10px;
  }

  .person-img > img {
    width: 80px;
    border-radius: 50%;
  }

</style>