bnyer-cloud-hub/pages/profit/profitEndOrder.vue

<template>
  <view>
    <view class="back-top"></view>

    <uni-group mode="card" class="card">
      <view class="box">
        <text class="title">结算单号:</text>
        <text>{{ orderDetail.orderNo }}</text>
      </view>
      <view class="box">
        <text class="title">结算平台:</text>
        <text>{{ orderDetail.platform }}</text>
      </view>
      <view class="box">
        <text class="title">应用:</text>
        <text>{{ orderDetail.appType }}</text>
      </view>
      <view class="box">
        <text class="title">收益类型:</text>
        <text>{{ orderDetail.type }}</text>
      </view>
      <view class="box">
        <text class="title">结算收入:</text>
        <text style="color: red">¥{{ orderDetail.profit }}</text> 元
      </view>
      <view class="box">
        <text class="title">转入时间:</text>
        <text>{{ orderDetail.walletTime }}</text>
      </view>

      <!-- <uni-title type="h1" title="结算单号" align="left" />
			<text>{{orderDetail.orderNo}}</text>
			<uni-title type="h1" title="结算平台" align="left" />
			<text>{{orderDetail.platform}}</text>
			<uni-title type="h1" title="应用" align="left" />
			<text>{{orderDetail.appType}}</text>
			<uni-title type="h1" title="收益类型" align="left" />
			<text>{{orderDetail.type}}</text>
			<uni-title type="h1" title="结算收入" align="left" />
			<text>{{orderDetail.profit}}</text>
			<uni-title type="h1" title="转入时间" align="left" />
			<text>{{orderDetail.walletTime}}</text> -->
    </uni-group>
  </view>
</template>

<script>
import { queryFrontEndAmtDetails } from "@/api/profit.js";
export default {
  data() {
    return {
      orderDetail: {
        id: 0,
        orderNo: "",
        platform: "",
        appType: "",
        type: "",
        profit: 0,
        walletTime: "",
      },
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.orderDetail.id = option.id;
    //console.log('this.id',this.id)
    this.queryFrontEndAmtDetails();
  },
  methods: {
    // 查询指定艺术家转入钱包收益详情
    async queryFrontEndAmtDetails() {
      const res = await queryFrontEndAmtDetails(this.orderDetail.id);
      //console.log('res', res)
      if (res.data.code === 200) {
        this.orderDetail = res.data.data;
      } else {
        uni.showModal({
          content: "转入钱包收益详情数据加载失败！",
          showCancel: false,
        });
      }
    },
  },
};
</script>

<style>
.back-top {
  width: 100%;
  position: absolute;
  height: 120px;
  background: #416bdc;
}
.card {
  width: 100%;
  position: absolute;
}
.uni-group--card {
  margin-top: 20px !important;
}
.title {
  display: block;
  width: 70px;
  margin-right: 10px;
  font-weight: bold;
}
.box {
  display: flex;
  margin-bottom: 20px;
}
.card view:first-child {
  margin-top: 10px;
}
</style>