boss/pages/main/index/orders_detail.vue

<template>
  <div id="order_detailbox">
    <!-- <section> -->
    <h3 style="font-size:24px">{{inforDetail.product_title}}</h3>
    <span class="lines"></span>
    <div class="order-infos">
      <span style="display:block;padding:30px 0;font-size:18px">{{inforDetail.order_state_name}}</span>

      <div class="pays-info">
        <p>
          <span class="pays-title">实际金额：</span>
          <span
            v-if="inforDetail.real_amount>=0"
            class="detail-pays green font20"
          >+{{(inforDetail.real_amount/100).toFixed(2)}}</span>
          <span
            v-else
            class="detail-pays orange font20"
          >{{(inforDetail.real_amount/100).toFixed(2)}}</span>
        </p>
        <p>
          <span class="pays-title">原始金额：</span>
          <span v-if="inforDetail.amount>=0" class>+{{inforDetail.amount}}</span>
          <span v-else class>{{inforDetail.amount}}</span>
        </p>
        <p>
          <span class="pays-title">支付方式：</span>
          <span>{{inforDetail.channel_name}}</span>
        </p>
      </div>
      <div class="pays-others">
        <p>
          <span>创建时间：</span>
          <span>{{inforDetail.created_at?(formatDate(inforDetail.created_at)):""}}</span>
        </p>
        <!-- <p>
          <span>提交时间：</span>
          <span>{{inforDetail.updated_at?(formatDate(inforDetail.updated_at)):""}}</span>
        </p>-->
        <p>
          <span>到账时间：</span>
          <span>{{inforDetail.pay_time?(formatDate(inforDetail.pay_time)):""}}</span>
        </p>
        <p>
          <span>订单编号：</span>
          <span>{{inforDetail.order_no}}</span>
        </p>
        <p>
          <span>支付编号：</span>
          <span>{{inforDetail.out_order_id}}</span>
        </p>
        <!-- <p>
          <span>创建时间：</span>
          <span>2019-08-20 13:30</span>
        </p>
        <p>
          <span>到账时间：</span>
          <span>2019-08-20 13:30</span>
        </p>-->
        <p>
          <span>备注说明：</span>
          <span>{{inforDetail.public_comment}}</span>
        </p>
      </div>
      <span class="lines"></span>
      <!-- <h3 style="padding:20px 0 10px 0">整包协作开发者认证</h3> -->
      <div class="pays-others" style="padding:10px 0 40px 0">
        <p>
          <span>订单类型：</span>
          <span>{{inforDetail.product_type_name}}</span>
        </p>
        <p>
          <span>交易类型：</span>
          <span>{{inforDetail.order_type_name}}</span>
        </p>
        <p>
          <span>关联项目：</span>
          <a :href="inforDetail.related_project.url?inforDetail.related_project.url:'#'">
            <span
              class="lblue"
            >{{inforDetail.related_project.name?inforDetail.related_project.name:"--"}}</span>
          </a>
        </p>
        <p>
          <span>关联订单：</span>
          <span class="lblue">{{inforDetail.origin_order_no?inforDetail.origin_order_no:"--"}}</span>
        </p>
        <p>
          <span>人工财务：</span>
          <span>{{inforDetail.artificial_mark==1?"是":"否"}}</span>
        </p>
        <p>
          <span>支付账号：</span>
          <span>{{inforDetail.channel_account}}</span>
        </p>
        <!-- <p>
          <span>出账账号：</span>
          <span>2334443423233</span>
        </p>
        <p>
          <span>入账账号：</span>
          <span>2334443423233</span>
        </p>-->
        <!-- <p class="clear">
          <span class="floatl">数据备注：</span>
          <span
            class="mark-width floatl"
          >接口的咖啡饿的发呆发呆发呆发呆发呆发呆地方地方机看对方空间对方看当看到反馈的风景看对方空间发的快点放假放的看对方空间对方</span>
          <span class="blue point floatl" @click="centerDialogVisible=true">查看详情</span>
        </p>-->
        <p>
          <span>内部备注：</span>
          <span style="display:inline-block" v-html="inforDetail.private_comment"></span>
        </p>
      </div>
    </div>
    <a :href="inforDetail.user_url" target="blank" class="person-img floatr">
      <img :src="iconUrl" alt />
      <p class="textc">{{nikeName}}</p>
    </a>

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

<script>
export default {
  data() {
    return {
      ids: 0,
      successTF: true,
      statusTF: true,
      centerDialogVisible: false,
      currentPage: 1,
      currentPageSize: 1,
      inforDetail: { related_project: "" },
      status: 1,
      iconUrl: "",
      nikeName: ""
    };
  },

  computed: {
    // clickDev(uid) {},
    // isTest() {
    //   return this.localData.env === "test";
    // },
    // whole() {
    //   return this.totalData.whole || {};
    // },
    // totalDeposit() {
    //   return this.whole.total_deposit;
    // },
    // totalFee() {
    //   return this.whole.total_fee;
    // }
  },
  mounted() {
    this.getFinanceList();
    // this.getEnum();
  },
  methods: {
    jumpUser() {
      window.location.href(
        "https://dev.test.proginn.com/rooter/user/" + this.ids
      );
    },
    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; //返回参数值
    },
    formatDate(time) {
      if (time === '0') {
        return '--'
      }
      var now = new Date(time * 1000);
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      var hour = now.getHours();
      var minute = now.getMinutes();
      var second = now.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize;
      // this.getTableData();
    },
    async getFinanceList() {
      let body = {
        order_no: this.ids
      };
      const res = await this.$post("/api/admin/order/get", body);
      var data = res.data;
      this.inforDetail = data;
      (this.iconUrl = data.user_info.icon_url),
        (this.nikeName = data.user_info.nickname),
        (this.status = res.status);
    }
  },
  created() {
    this.ids = this.getUrlParam("id");
    // var url = window.location.href;
    // var index = url.lastIndexOf("/");
    // var str = url.substring(index + 1, url.length);
    // this.ids = str;
  }
};
</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;
}
.orange {
  color: rgba(255, 152, 0, 1);
}
.green {
  color: rgba(37, 155, 36, 1);
}
.blue {
  color: #005fef;
}
.font20 {
  font-size: 20px;
}
.pays-info > p,
.pays-others > p {
  padding-bottom: 6px;
}
.pays-others {
  font-size: 13px;
  color: #666666;
}
.pays-others h3 {
  padding-top: 20px;
  color: black;
  font-size: 16px;
}

.point {
  cursor: pointer;
}
.mark-width {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  width: 350px;
}
.floatl {
  float: left;
}
.clear::after {
  clear: both;
  display: block;
  content: "";
}
.person-img {
  padding: 20px 30px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: absolute;
  top: 120px;
  left: 600px;
}
.person-img p {
  padding-top: 10px;
}
.person-img > img {
  width: 80px;
  border-radius: 50%;
}
</style>