saas_manager/pages/comdetail/index.vue

<template>
  <view class="actdetail-ward">
    <view class="actdetail-ward-tbg">
      <view class="actdetail-ward-top">
        <view class="money">{{ detailInfo.cash }}</view>
        <view class="u-border-right pd">佣金金额</view>
        <view class="op8">
          {{ ["冻结", "正常", "退款"][detailInfo.cashStatus - 1] }}
        </view>
      </view>
    </view>
    <view class="actdetail-ward-main">
      <view class="detail-box">
        <view class="title">活动详情</view>

        <view class="fl lebel">
          <view>所属订单</view>
          <view>{{ detailInfo.orderSn }}</view>
        </view>
        <view class="fl lebel">
          <view>所属活动</view>
          <view>{{ detailInfo.distributionName }}</view>
        </view>
        <view class="fl lebel">
          <view>下单人</view>
          <view>{{ detailInfo.orderUserName }}</view>
        </view>
        <view class="u-border-bottom" style="margin: 12rpx 0 32rpx"></view>
        <view class="fl lebel">
          <view>订单时间</view>
          <view>{{ detailInfo.orderTime | formate("yyyy-mm-dd hh:mm") }}</view>
        </view>
        <view class="fl lebel">
          <view>订单金额</view>
          <view>{{ detailInfo.orderPrice }}元</view>
        </view>
      </view>
      <view class="detail-box">
        <view class="title">佣金信息</view>

        <view class="fl lebel">
          <view>分成方式</view>
          <view>{{ ["百分比", "固定金额"][detailInfo.cashType - 1] }}</view>
        </view>
        <view class="fl lebel">
          <view>数值</view>
          <view>
            {{ detailInfo.cashRatio }}{{ detailInfo.cashType == 1 ? "%" : "" }}
          </view>
        </view>
        <view class="fl lebel">
          <view>佣金金额</view>
          <view>{{ detailInfo.cash }}元</view>
        </view>
        <view class="fl lebel">
          <view>结算时间</view>
          <view>{{ detailInfo.cashTime | formate("yyyy-mm-dd hh:mm") }}</view>
        </view>
        <view class="fl lebel">
          <view>佣金状态</view>
          <view>{{ ["冻结", "正常", "退款"][detailInfo.cashStatus - 1] }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getComDetail } from "@/utils/commission";
export default {
  data() {
    return {
      detailInfo: {},
    };
  },
  onLoad(options) {
    this.getComDetail(options.id);
  },
  methods: {
    getComDetail(id) {
      getComDetail(id).then((res) => {
        this.detailInfo = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f6f7fb;
}
.actdetail-ward {
  .actdetail-ward-tbg {
    width: 100%;
    height: 429rpx;
    top: 80rpx;
    background: linear-gradient(180deg, #3f8dfd 49%, rgba(0, 105, 255, 0) 100%);
    padding: 80rpx 24rpx 0;
    box-sizing: border-box;

    .actdetail-ward-top {
      color: #eee;
      font-size: 28rpx;
      view {
        display: inline-block;
        margin-right: 16rpx;
      }
      .money {
        font-size: 72rpx;
        color: #ffffff;
      }
      .pd {
        line-height: 28rpx;
        padding-right: 16rpx;
      }
    }
  }
  .actdetail-ward-main {
    padding: 24rpx;
    position: absolute;
    top: 180rpx;
    width: 100%;
    box-sizing: border-box;
    .actdetail-ward-goods {
      .goods-list {
        .goods-list-item {
          background: #fafafa;
          border-radius: 8rpx;
          padding: 32rpx 32rpx 0;
          color: #7e7d83;
          font-size: 26rpx;
          margin-bottom: 24rpx;
          .lebel {
            align-items: flex-start;
            view {
              margin-bottom: 20rpx;
              &:nth-of-type(1) {
                width: 170rpx;
              }
              &:nth-of-type(2) {
                flex: 1;
                line-height: 40rpx;
              }
            }
          }
        }
      }
    }
    .detail-box {
      background: #ffffff;
      border-radius: 16rpx;
      padding: 32rpx 24rpx 10rpx;
      margin-bottom: 24rpx;
      .title {
        font-weight: bold;
        color: #24263d;
        font-size: 32rpx;
        margin-bottom: 32rpx;
      }
      .desc {
        padding-bottom: 40rpx;
        .desc-title {
          padding: 32rpx 0 24rpx;
        }
        text {
          color: #484848;
          font-size: 28rpx;
          opacity: 0.7;
        }
      }
      .lebel {
        color: #484848;
        font-size: 28rpx;
        width: 100%;
        view {
          margin-bottom: 20rpx;
          &:nth-of-type(1) {
            width: 188rpx;
          }
          &:nth-of-type(2) {
            flex: 1;
            line-height: 40rpx;
          }
        }
      }
    }
  }
}
</style>