couponCenter_mpapp/src/pages-C/home/sendCancelWriteOff.vue

<script setup lang="ts">
import { ref } from "vue";
import { getImageUrl } from "@/utils/imageUtil";

import PopupLayer from "@/components/popupLayer/index.vue";
import FilterSelect from "@/components/filter/filter.vue";

const type = ref()
definePage({
  style: {
    navigationBarTitleText: "累计待核销",
    navigationStyle: "custom",
  },
});

// 生命周期
onLoad(async (options) => {
  type.value = options.type
})

// 当前选中的tab
const currentTab = ref("0");

// 点击tab事件
const handleTabClick = (value) => {
  currentTab.value = value;
  console.log("选中tab:", value);
};

const keyword = ref("");
async function search() {}
async function clear() {}

const isOpen = ref(false);
const popupRef = ref();
function clickSelect() {
  isOpen.value = !isOpen.value;
  isOpen.value ? popupRef.value?.show() : popupRef.value?.close();
}

const rewardTabs = ref([
  { label: "全部", type: "0" },
  { label: "折扣券", type: "1" },
  { label: "兑换券", type: "2" },
  { label: "满减券", type: "3" },
]);

const classIndex = ref(-1);
const classItem = ref({
  label: "",
  type: "",
});
function classClick(index, item) {
  classIndex.value = index;
  classItem.value = item;
  clickSelect();
}

const filter = ["type", "date", "dataFilter"];
function selectValue(item) {
  console.log(item);
}
</script>

<template>
  <view class="income-cumulative-container">
    <u-navbar :title="type==1?'累计待核销':'累计已核销'" :autoBack="true" :placeholder="true" :border-bottom="false"
      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor="#000"></u-navbar>
    <FilterSelect :filter='filter' @selectValue='selectValue'></FilterSelect>
    <view class="send-content">
      <view class="send-card">
        <view class="send-header">
          <view class="coupon-info">
            <text class="coupon-name">满100减50优惠券</text>
            <view class="coupon-tag">折扣券</view>
          </view>
          <!-- <text class="send-count send-red">免费兑换</text> -->
          <!-- <text class="send-number-box">
            <text class="send-number">9</text>
            <text class="send-unit">折</text>
          </text> -->
          <view class="send-number-box">
            <text class='add-title'>满100减</text>
            <text class="send-number-box">
              <text class="send-number">30</text>
              <text class="send-unit">元</text>
            </text>
          </view>

        </view>
        <view class="send-divider"></view>
        <view class="send-detail">
          <template v-if="type==2">
            <view class="detail-row">
              <text class="detail-label">核销门店</text>
              <text class="detail-value">微信朋友圈</text>
            </view>
            <view class="detail-row">
              <text class="detail-label">我的佣金</text>
              <text class="detail-value">预计<text class="highlight">20元</text></text>
            </view>
          </template>
          <view class="detail-row">
            <text class="detail-label">领取人</text>
            <view class="income-person">
              <u--image class='income-phone' :src="getImageUrl('@img/me/head.png')" width="42rpx" height="42rpx"
                shape="circle">
              </u--image>
              <view>林雨欣</view>
            </view>
          </view>
          <view class="detail-row">
            <text class="detail-label">联系方式</text>
            <text class="detail-value">微信朋友圈</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">领取日期</text>
            <text class="detail-value">微信朋友圈</text>
          </view>
        </view>
      </view>
    </view>
  </view>

</template>

<style lang="scss" scoped>
.income-cumulative-container {
  min-height: 100vh;
  background: #f8f8fa;

  ::v-deep.u-search__content {
    border-radius: 40rpx;
    background-color: #f7f8fa;
  }

  .invite-content-search {
    background: #fff;
    padding: 0 32rpx 16rpx 32rpx;
  }

  .send-content {
    padding: 32rpx;
    display: flex;
    flex-direction: column;
    gap: 32rpx;
  }

  .send-card {
    background: #ffffff;
    border-radius: 32rpx;
    padding: 32rpx;
    position: relative;
    .send-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 32rpx;

      .coupon-info {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .coupon-tag {
          padding: 4rpx 16rpx;
          background: #fff7e8;
          color: #ff7d00;
          font-size: 22rpx;
          border-radius: 4rpx;
        }

        .coupon-name {
          font-weight: 600;
          font-size: 32rpx;
          color: #2c2c2c;
        }
      }

      .send-count {
        font-size: 30rpx;
        color: #333333;
      }
      .send-red {
        font-size: 30rpx;
        color: #ff5365;
        font-weight: 600;
      }
      .send-number-box {
        display: flex;
        align-items: baseline;
      }
      .send-number {
        font-size: 42rpx;
        color: #ff5365;
      }
      .send-unit {
        font-size: 26rpx;
        color: #ff5365;
        margin-left: 2rpx;
      }
      .add-title {
        font-size: 26rpx;
        margin-right: 6rpx;
      }
    }

    .send-divider {
      width: 100%;
      height: 2rpx;
      background: #eaeaea;
      margin-bottom: 32rpx;
    }

    .send-detail {
      .detail-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .detail-label {
          font-weight: 400;
          font-size: 30rpx;
          color: #86909c;
        }

        .detail-value {
          font-weight: 400;
          font-size: 30rpx;
          color: #333333;
        }
      }
      .highlight {
        color: #ff5365;
      }
      .income-person {
        display: flex;
        align-items: center;
      }
      .income-phone {
        margin-right: 12rpx;
      }
    }
    .coupon1-icon {
      position: absolute;
      top: 0;
      left: 0;
    }
    .write-off-icon {
      position: absolute;
      right: 168rpx;
      bottom: 49rpx;
    }
  }
}
</style>