saas_manager/pages/actdetail/index.vue

<template>
  <view class="actdetail-ward">
    <view class="actdetail-ward-tbg">
      <view class="actdetail-ward-top">
        <view class="info fl_b">
          <view class="title">{{ detailInfo.name }}</view>
          <view class="act-status" v-if="detailInfo.status == 1">进行中</view>
          <view class="act-status grey" v-else>已结束</view>
        </view>
        <view class="time"
          >{{ detailInfo.startTime | formate("yyyy-mm-dd hh:mm") }} 到
          {{ detailInfo.endTime | formate("yyyy-mm-dd hh:mm") }}</view
        >
      </view>
    </view>
    <view
      class="actdetail-ward-main"
      :style="{ 'padding-bottom': detailInfo.status == 1 ? '168rpx' : '24rpx' }"
    >
      <view class="actdetail-ward-goods detail-box">
        <view class="title">商品及佣金</view>
        <view class="goods-list">
          <view
            class="goods-list-item"
            v-for="item in detailInfo.goodsList"
            :key="item.id"
          >
            <view class="fl lebel">
              <view>商品名称:</view>
              <view>{{ item.goodsName }}</view>
            </view>
            <view class="fl lebel">
              <view>商品价格:</view>
              <view>{{ item.goodsPrice }}元</view>
            </view>
            <view class="fl lebel">
              <view>分佣方式:</view>
              <view>{{ ["百分比", "固定金额"][item.profitType - 1] }}</view>
            </view>
            <view class="fl lebel">
              <view>数值:</view>
              <view
                >{{ item.profitMax }}{{ item.profitType == 1 ? "%" : "" }}</view
              >
            </view>
            <view class="fl lebel">
              <view>一级佣金:</view>
              <view>{{ item.profitOne }}</view>
            </view>
            <view class="fl lebel">
              <view>二级佣金:</view>
              <view>{{ item.profitTwo }}</view>
            </view>
            <view class="fl lebel">
              <view>三级级佣金:</view>
              <view>{{ item.profitThree }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="actdetail-ward-bom detail-box">
        <view class="title">活动详情</view>
        <view class="fl_b time u-border-bottom">
          <text>佣金冻结期</text>
          <text>{{ detailInfo.freezingPeriod }}天</text>
        </view>
        <view class="desc">
          <view class="desc-title">描述</view>
          <text>{{ detailInfo.remark }}</text>
        </view>
      </view>
    </view>
    <view class="actdetail-btn" v-if="detailInfo.status == 1">
      <u-button
        class="c_btn"
        text="生成专属海报"
        @click="getLinkCode"
      ></u-button>
    </view>
  </view>
</template>

<script>
import { getActDetail, getLinkCode } from "@/utils/act";
export default {
  name: "SaasManagerIndex",

  data() {
    return {
      detailInfo: {},
    };
  },
  onLoad(options) {
    this.getActDetail(options.id);
  },
  methods: {
    getActDetail(id) {
      getActDetail(id).then((res) => {
        this.detailInfo = res;
      });
    },
    getLinkCode() {
      let { distributionId } = this.detailInfo;
      getLinkCode({ distributionId }).then(({ linkCode, shareCode }) => {
        uni.navigateTo({
          url:
            "/pages/bill/index?distributionId=" +
            distributionId +
            "&linkCode=" +
            linkCode +
            "&shareCode=" +
            shareCode,
        });
      });
    },
  },
};
</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: 44rpx 24rpx 0;
    box-sizing: border-box;

    .actdetail-ward-top {
      .info {
        align-items: flex-start;
        .title {
          width: 80%;
          font-weight: bold;
          color: #ffffff;
          font-size: 36rpx;
          line-height: 50rpx;
        }
        .act-status {
          background: #44ca7d;
          padding: 6rpx 12rpx;
          border-radius: 20rpx 20rpx 0 20rpx;
          font-weight: bold;
          color: #ffffff;
          font-size: 24rpx;
        }
        .grey {
          background: #c0cad9;
        }
      }
      .time {
        color: #ffffff;
        font-size: 28rpx;
        margin-top: 16rpx;
        opacity: 0.8;
      }
    }
  }
  .actdetail-ward-main {
    padding: 24rpx 24rpx 24rpx;
    position: absolute;
    top: 180rpx;
    width: 100%;
    box-sizing: border-box;
    .actdetail-ward-goods {
      margin-bottom: 24rpx;
      .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;
              }
            }
          }
        }
      }
    }
    .actdetail-ward-bom {
      .time {
        color: #484848;
        font-size: 32rpx;
        padding-bottom: 32rpx;
      }
    }
    .detail-box {
      background: #ffffff;
      border-radius: 16rpx;
      padding: 32rpx 24rpx 1rpx;
      .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;
        }
      }
    }
  }
  .actdetail-btn {
    width: 100%;
    background: #ffffff;
    height: 144rpx;
    padding: 24rpx;
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
  }
}
</style>