优惠券页面开发

.vscode/settings.json

@@ -27,8 +27,8 @@
 
   // 编辑器格式化设置
   "prettier.enable": false,
-  "editor.formatOnSave": true,
-  "editor.formatOnType": true,
+  "editor.formatOnSave": false,
+  "editor.formatOnType": false,
 
   // Auto fix
   "editor.codeActionsOnSave": {
@@ -54,32 +54,32 @@
   "[vue]": {
     "editor.tabSize": 4,
     "editor.insertSpaces": true,
-    "editor.formatOnSave": true
+    "editor.formatOnSave": false
   },
   "[html]": {
     "editor.tabSize": 4,
     "editor.insertSpaces": true,
-    "editor.formatOnSave": true
+    "editor.formatOnSave": false
   },
   "[scss]": {
     "editor.tabSize": 4,
     "editor.insertSpaces": true,
-    "editor.formatOnSave": true
+    "editor.formatOnSave": false
   },
   "[css]": {
     "editor.tabSize": 4,
     "editor.insertSpaces": true,
-    "editor.formatOnSave": true
+    "editor.formatOnSave": false
   },
   "[javascript]": {
     "editor.tabSize": 4,
     "editor.insertSpaces": true,
-    "editor.formatOnSave": true
+    "editor.formatOnSave": false
   },
   "[typescript]": {
     "editor.tabSize": 4,
     "editor.insertSpaces": true,
-    "editor.formatOnSave": true
+    "editor.formatOnSave": false
   },
 
   // Enable eslint for all supported languages

src/components/exchangeCoupon.vue

@@ -91,6 +91,13 @@ async function handleShareCoupon() {
 function handleCloseShareModal() {
     console.log('分享弹窗已关闭')
 }
+
+function goDetail(){
+    uni.navigateTo({
+    url: "/pages-C/share/shareInfo",
+  });
+}
+
 </script>
 
 <template>
@@ -99,7 +106,7 @@ function handleCloseShareModal() {
         <view class="discount-coupon-content">
             <view class="discount-coupon-info-container">
                 <view class="discount-coupon-info-content">
-                    <view class="discount-coupon-info-desc">
+                    <view class="discount-coupon-info-desc" @click='goDetail'>
                         <view class="desc-text">
                             {{ coupon.name }}
                         </view>

src/components/filter/filter.vue

@@ -0,0 +1,297 @@
+<template>
+  <view class="filter-cumulative-container" :class='className'>
+    <view class="filter-box">
+      <view class="filter-bar">
+        <view class="filter-tabs">
+          <view class='filter-list' v-for="(item, index) in matchedDataList" :key="index"
+            @click="handleTabClick(item,index)">
+            <view class='filter-name'>
+              <text class="filter-tab">{{ item.name }}</text>
+              <text class="caret" />
+            </view>
+            <view class="stat-divider" v-if="index < matchedDataList.length - 1"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <PopupLayer direction="bottom" ref='popupRef'>
+      <view class="classification-cont">
+        <view class='classification-list' v-for='(item, index) in filterData' :key='index'
+          @click='classClick(index, item)'>
+          <view class='classification-label' :class='{active:item.isSelected}'>{{ item.label }}</view>
+          <u--image class='selected-icon' v-show='item.isSelected' :src="getImageUrl('@img/income/selected.png')"
+            mode="aspectFit" width="32rpx" height="32rpx">
+          </u--image>
+        </view>
+      </view>
+    </PopupLayer>
+  </view>
+
+  <!-- 日期 -->
+  <DateRangePicker v-model:show="showPicker" :startDate="defaultStart" :endDate="defaultEnd" @confirm="handleConfirm"
+    @cancel="handleCancel" />
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick } from "vue";
+import { getImageUrl } from "@/utils/imageUtil";
+import PopupLayer from "@/components/popupLayer/index.vue";
+import DateRangePicker from "@/components/dateRangePicker/index.vue";
+const emit = defineEmits(["selectValue"]);
+const props = defineProps({
+  filter: {
+    type: Array,
+    default: () => [],
+  },
+  className: {
+    type: String,
+  },
+});
+
+// 日期
+const tabListDate = ref([
+  { label: "今天", value: "1", isSelected: false },
+  { label: "30天", value: "2", isSelected: false },
+]);
+
+// 类型
+const tabListType = ref([
+  { label: "全部分类", type: "0", isSelected: false },
+  { label: "美食", type: "1", isSelected: false },
+  { label: "车服务", type: "2", isSelected: false },
+]);
+
+// 排行
+const tabListRank = ref([
+  { label: "按领取数", type: "1", isSelected: false },
+  { label: "按核销数", type: "2", isSelected: false },
+  { label: "按核销转换率", type: "3", isSelected: false },
+]);
+
+// 日期自定义
+const tabListFilter = ref({
+  label: "日期筛选",
+  type: "1",
+  isFilter: true,
+  isSelected: false,
+});
+
+//结算状态
+const tabListSettlement = ref(
+  { label: "待结算", type: "1", isSelected: false },
+  { label: "已结算", type: "2", isSelected: false }
+);
+
+// 分组配置
+const groupConfig = ref([
+  {
+    key: "type",
+    data: tabListType,
+    name: "全部分类",
+    isOpen: false,
+  },
+  {
+    key: "date",
+    data: tabListDate,
+    name: "今天",
+    isOpen: false,
+  },
+  {
+    key: "dataFilter",
+    data: tabListFilter,
+    name: "日期筛选",
+    isOpen: false,
+  },
+  {
+    key: "rank",
+    data: tabListRank,
+    name: "按领取数",
+    isOpen: false,
+  },
+  {
+    key: "settlement",
+    data: tabListSettlement,
+    name: "结算状态",
+    isOpen: false,
+  },
+]);
+
+const matchedDataList = computed(() => {
+  const filterArray = props.filter;
+  if (!Array.isArray(filterArray) || filterArray.length === 0) {
+    return [];
+  }
+
+  const result = [];
+  for (const filterKey of filterArray) {
+    const matched = groupConfig.value.find((item) => item.key === filterKey);
+
+    if (matched) {
+      const rawData = matched.data;
+      let listData = [];
+
+      result.push({
+        key: matched.key,
+        name: matched.name,
+        data: matched.data,
+        isOpen: matched.isOpen,
+      });
+    }
+  }
+
+  return result;
+});
+
+const filterData = ref([]);
+const isOpen = ref(false);
+const popupRef = ref();
+
+// 当前选中的tab
+const currentTab = ref(0);
+const handleTabClick = (value, index) => {
+  if (value.key == "dataFilter") {
+    showPicker.value = true;
+  } else {
+    isOpen.value = !isOpen.value;
+    nextTick(() => {
+      isOpen.value ? popupRef.value?.show() : popupRef.value?.close();
+      filterData.value = value.data;
+    });
+  }
+  currentTab.value = index;
+};
+
+// 选中的值
+const selectedValues = ref({});
+
+// 点击选项
+function classClick(index, item) {
+  const currentGroup = matchedDataList.value[currentTab.value];
+  if (currentGroup) {
+    const rawData = currentGroup.data;
+    rawData.forEach((dataItem) => (dataItem.isSelected = false));
+    item.isSelected = true;
+    selectedValues.value[currentGroup.key] = item;
+
+    // 将选中项的 label 赋值给 matchedDataList 对应的 name
+    const configItem = groupConfig.value.find(g => g.key === currentGroup.key);
+    if (configItem) {
+      configItem.name = item.label;
+    }
+
+    emit("selectValue", selectedValues.value);
+  }
+
+  // 关闭弹窗
+  setTimeout(() => {
+    isOpen.value = false;
+    popupRef.value?.close();
+  }, 200);
+}
+
+const showPicker = ref(false);
+const defaultStart = "";
+const defaultEnd = "";
+const handleConfirm = (value: { startDate: string; endDate: string }) => {
+  const currentGroup = matchedDataList.value[currentTab.value];
+  selectedValues.value[currentGroup.key] = value;
+  const configItem = groupConfig.value.find(g => g.key === currentGroup.key);
+    if (configItem) {
+      configItem.name = `${value.startDate} - ${value.endDate}`
+    }
+  emit("selectValue", selectedValues.value);
+};
+
+const handleCancel = () => {
+  console.log("取消选择");
+};
+
+// 暴露方法
+defineExpose({
+  selectedValues,
+  reset: () => {
+    selectedValues.value = {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.filter-cumulative-container {
+  .filter-box {
+    display: flex;
+    align-items: center;
+    background: #fff;
+    height: 92rpx;
+    padding: 0 32rpx;
+    box-sizing: border-box;
+    border-top: 1rpx solid #d9d9d9;
+
+    .stat-divider {
+      width: 1rpx;
+      height: 40rpx;
+      background: #d9d9d9;
+      margin: 0 32rpx;
+    }
+
+    .filter-bar {
+      background: #ffffff;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      overflow-x: auto; // 让外层滚动
+      white-space: nowrap;
+      // 隐藏滚动条
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      .filter-tabs {
+        display: flex;
+        gap: 28rpx;
+        min-width: max-content; // 内容撑开宽度
+        .filter-list {
+          display: flex;
+          flex-shrink: 0; // 防止被压缩
+        }
+        .caret {
+          width: 0;
+          height: 0;
+          margin-left: 8rpx;
+          border-left: 7rpx solid transparent;
+          border-right: 7rpx solid transparent;
+          border-top: 9rpx solid #333333;
+        }
+        .filter-name {
+          display: flex;
+          align-items: center;
+          height: 44rpx;
+          line-height: 44rpx;
+        }
+        .filter-tab {
+          font-weight: 400;
+          font-size: 26rpx;
+          color: #333333;
+        }
+      }
+    }
+  }
+  .classification-cont {
+    padding: 0 32rpx;
+    box-sizing: border-box;
+    margin-top: 32rpx;
+
+    .classification-list {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .classification-label {
+      color: #2c2c2c;
+      font-size: 26rpx;
+      padding-bottom: 32rpx;
+    }
+    .active {
+      color: #ff536b;
+    }
+  }
+}
+</style>

src/components/popupLayer/index.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, nextTick, onBeforeUnmount } from "vue";
+import { ref, computed, nextTick, onBeforeUnmount, getCurrentInstance } from "vue";
 
 type Direction = "top" | "bottom" | "left" | "right";
 
@@ -81,11 +81,26 @@ const locationStyle = computed(() => {
   return positionMap[props.direction] + translateStyle.value;
 });
 
+const _instance = getCurrentInstance()
+
 // 获取弹窗高度（用于遮罩层）
 const getPopupHeight = () => {
+  // #ifdef MP-WEIXIN
+  setTimeout(() => {
+    uni.createSelectorQuery()
+      .in(_instance?.proxy)
+      .select(".popup-layer")
+      .boundingClientRect((rect: any) => {
+        if (rect && rect.top !== undefined) {
+          height.value = `calc(100% - ${rect.top}px)`;
+        }
+      })
+      .exec();
+  }, 50);
+  // #endif
+  // #ifndef MP-WEIXIN
   nextTick(() => {
-    const query = uni.createSelectorQuery();
-    query
+    uni.createSelectorQuery()
       .select(".popup-layer")
       .boundingClientRect((rect: any) => {
         if (rect && rect.top !== undefined) {
@@ -94,6 +109,7 @@ const getPopupHeight = () => {
       })
       .exec();
   });
+  // #endif
 };
 
 // 清除所有定时器

src/components/start/start.vue

@@ -0,0 +1,100 @@
+<template>
+  <view class="star-rating" :style="{ fontSize: size + 'rpx' }">
+    <view v-for="(star, index) in 5" :key="index" class="star-item" :style="{ width: size + 'rpx', height: size + 'rpx' }"
+      @mouseenter="editable && handleMouseEnter(index + 1)" @mouseleave="editable && handleMouseLeave"
+      @click="editable && handleStarClick(index + 1)">
+      <image class="star-empty" :src="getImageUrl('@img/index/start-def.png')" mode="aspectFill" />
+      <image v-if="getStarType(index) !== 'empty'" class="star-fill"
+        :src="getStarType(index) === 'full' ? startImg : halfImg" mode="aspectFill" />
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { getImageUrl } from '@/utils/imageUtil'
+
+// 图片资源（需要在 static 目录下放置对应的图片）
+const startImg = getImageUrl('@img/index/start.png')
+const halfImg = getImageUrl('@img/index/start-half.png')
+
+const props = defineProps({
+  rating: {
+    type: Number,
+    default: 0,
+  },
+  size: {
+    type: Number,
+    default: 22
+  },
+  editable: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:rating', 'change'])
+
+const hoverRating = ref(0)
+
+const currentRating = computed(() => {
+  return props.editable && hoverRating.value > 0 ? hoverRating.value : props.rating
+})
+
+const getStarType = (index) => {
+  const starPosition = index + 1;
+  const rating = currentRating.value;
+
+  if (starPosition <= Math.floor(rating)) {
+    return 'full';
+  }
+  if (starPosition === Math.floor(rating) + 1 && rating % 1 > 0) {
+    return 'half';
+  }
+  return 'empty';
+}
+
+const handleMouseEnter = (rating) => {
+  hoverRating.value = rating;
+}
+
+const handleMouseLeave = () => {
+  hoverRating.value = 0;
+}
+
+const handleStarClick = (rating) => {
+  emit('update:rating', rating);
+  emit('change', rating);
+}
+</script>
+
+<style lang="scss" scoped>
+.star-rating {
+  display: flex;
+  align-items: center;
+  line-height: 0;
+}
+
+.star-item {
+  position: relative;
+  display: inline-flex;
+  margin-right: 4rpx;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.star-empty,
+.star-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.star-empty {
+  position: relative;
+}
+</style>

src/components/templateCoupon.vue

@@ -95,6 +95,12 @@ async function handleShareCoupon() {
 function handleCloseShareModal() {
     console.log('分享弹窗已关闭')
 }
+
+function goDetail(){
+    uni.navigateTo({
+    url: "/pages-C/share/shareInfo",
+  });
+}
 </script>
 
 <template>
@@ -111,7 +117,7 @@ function handleCloseShareModal() {
                             {{ coupon.type === '2' ? '折' : '元' }}
                         </view>
                     </view>
-                    <view class="discount-coupon-info-desc">
+                    <view class="discount-coupon-info-desc"  @click='goDetail'>
                         <view class="desc-text">
                             {{ coupon.name }}
                         </view>

src/pages-A/shareCoupon/index.vue

@@ -37,7 +37,7 @@
 
     <!-- 分享操作区域 -->
     <view class="action-area">
-      <button class="share-btn share-friend" open-type="share" :disabled="!shareImageUrl" @tap="handleShareFriend">
+      <button class="share-btn share-friend" open-type="share" :disabled="!shareImageUrl">
         <u--image class='selected-icon' :src="getImageUrl('@img/share/share1.png')" mode="aspectFit" width="100rpx"
           height="100rpx">
         </u--image>
@@ -55,7 +55,7 @@
         <u--image class='selected-icon' :src="getImageUrl('@img/share/share3.png')" mode="aspectFit" width="100rpx"
           height="100rpx">
         </u--image>
-        <text class="btn-text">分享链接</text>
+        <text class="btn-text">复制链接</text>
       </button>
     </view>
 
@@ -70,7 +70,7 @@
 </template>
 
 <script setup>
-import { onLoad } from '@dcloudio/uni-app'
+import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
 import { useRequest } from 'alova/client'
 import { storeToRefs } from 'pinia'
 import { nextTick, ref } from 'vue'
@@ -407,10 +407,10 @@ function drawCenterEllipsisText(ctx, text, x, y, maxWidth, fontSize, scale, colo
     return
 
   ctx.save()
-  ctx.font = `${weight} ${fontSize * scale}px PingFang SC`
+  ctx.font = `${weight} ${fontSize * scale}px PingFang SC, Source Han Sans SC, Microsoft YaHei, sans-serif`
   ctx.fillStyle = color
-  ctx.textAlign = 'center'
-  ctx.textBaseline = 'middle'
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'bottom'
 
   if (ctx.measureText(displayText).width > maxWidth) {
     while (displayText.length > 1 && ctx.measureText(`${displayText}...`).width > maxWidth) {
@@ -419,7 +419,9 @@ function drawCenterEllipsisText(ctx, text, x, y, maxWidth, fontSize, scale, colo
     displayText = `${displayText}...`
   }
 
-  ctx.fillText(displayText, x, y)
+  const textWidth = ctx.measureText(displayText).width
+  const startX = x - textWidth / 2
+  ctx.fillText(displayText, startX, y)
   ctx.restore()
 }
 
@@ -619,7 +621,7 @@ function drawAmountText(ctx, width, scale, yScale) {
   const amountFont = `700 ${88 * scale}px D-DIN Exp-DINExp, PingFang SC`
   const unitFont = `400 ${26 * scale}px PingFang SC`
   const { amountBaselineY } = getPosterLayout(scale, yScale)
-  const baselineY = amountBaselineY + 20
+  const baselineY = amountBaselineY +40 * yScale 
   const gap = 3 * scale
 
   ctx.save()
@@ -646,7 +648,7 @@ function drawPosterTopContent(ctx, width, scale, yScale) {
 
   drawCenterEllipsisText(ctx, getPosterTitleText(), centerX, titleY, 460 * scale, 30, scale, '#FF5365', 500)
   drawAmountText(ctx, width, scale, yScale)
-  drawCenterEllipsisText(ctx, getPosterRuleText(), centerX, ruleY, 333 * scale, 26, scale, '#FF5365')
+  drawCenterEllipsisText(ctx, getPosterRuleText(), centerX, ruleY, 400 * scale, 26, scale, '#FF5365')
 }
 
 async function drawPosterBottomContent(ctx, canvas, width, scale, yScale) {
@@ -656,8 +658,8 @@ async function drawPosterBottomContent(ctx, canvas, width, scale, yScale) {
   const footerMaxWidth = 440 * scale
 
   drawCenterEllipsisText(ctx, getGoodsText(), centerX, infoStartY, infoMaxWidth, 20, scale, '#333333')
-  await drawMerchantLine(ctx, canvas, centerX, infoStartY + 50 * scale, infoMaxWidth, scale)
-  drawCenterEllipsisText(ctx, getAreaText(), centerX, infoStartY + 100 * scale, infoMaxWidth, 20, scale, '#333333')
+  await drawMerchantLine(ctx, canvas, centerX, infoStartY + 35 * scale, infoMaxWidth, scale)
+  drawCenterEllipsisText(ctx, getAreaText(), centerX, infoStartY + 90 * scale, infoMaxWidth, 20, scale, '#333333')
   drawCenterEllipsisText(ctx, getReceiveLimitText(), centerX, footerStartY, footerMaxWidth, 24, scale, '#FFFFFF')
   drawCenterEllipsisText(ctx, getValidityText(), centerX, footerStartY + 46 * scale, footerMaxWidth, 24, scale, '#FFFFFF')
 }
@@ -742,12 +744,12 @@ function getPosterLayout(scale, yScale = scale) {
   const qrTop = 660 * yScale
   return {
     cardTop,
-    titleY: 420 * yScale,
+    titleY: 440 * yScale,
     amountBaselineY: 510 * yScale,
-    ruleY: 578 * yScale,
+    ruleY: 598 * yScale,
     qrTop,
     qrSize: 220 * scale,
-    infoStartY: 920 * yScale,
+    infoStartY: 960 * yScale,
     footerStartY: 1190 * yScale,
   }
 }
@@ -1110,29 +1112,6 @@ function drawFooter(ctx, width, height, scale) {
   ctx.fillText('分享自微信小程序', width / 2, footerY)
 }
 
-// 分享给好友
-function handleShareFriend() {
-  const path = `pages/home/index?from=share&name=${encodeURIComponent('券中心')}`
-  uni.share({
-    provider: "weixin",
-    scene: "WXSceneSession",        // 好友会话
-    type: 5,                        // 5 代表分享小程序卡片
-    title: "优惠券来了",              // 卡片标题
-    summary: "快来看看这张超值券",    // 卡片描述
-    imageUrl: shareImageUrl.value, // 卡片封面图（90*90px）
-    miniProgram: {
-      id: "gh_bea9780e04b4",      // 小程序的原始ID，以 'gh_' 开头
-      path: path, // 小程序内具体页面路径
-      type: 0,                    // 0: 正式版, 1: 开发版, 2: 体验版
-    },
-    success: (res) => {
-      console.log('分享小程序卡片成功', res);
-    },
-    fail: (err) => {
-      console.error('分享失败', err);
-    }
-  });
-}
 
 function handleImagePreview() {
   if (!shareImageUrl.value)
@@ -1144,6 +1123,13 @@ function handleImagePreview() {
   })
 }
 
+// 小程序分享钩子 - 控制分享后的跳转页面
+onShareAppMessage(() => ({
+  title: '优惠券来了',
+  path: `/pages-C/share/shareInfo?from=share&name=${encodeURIComponent('券中心')}`,
+  imageUrl: shareImageUrl.value || '',
+}))
+
 // 保存图片到相册
 async function handleSaveImage() {
   if (!shareImageUrl.value) {
@@ -1254,14 +1240,11 @@ async function handleCopyShareLink() {
 // 长按图片操作
 function handleLongPressImage() {
   uni.showActionSheet({
-    itemList: ['保存到相册', '分享给好友'],
+    itemList: ['保存到相册'],
     success: (res) => {
       if (res.tapIndex === 0) {
         handleSaveImage()
       }
-      else if (res.tapIndex === 1) {
-        handleShareFriend()
-      }
     }
   })
 }

src/pages-C/my/sendCoupon.vue → src/pages-C/home/browse.vue

@@ -1,23 +1,15 @@
 <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";
 
 definePage({
   style: {
-    navigationBarTitleText: "累计发券",
+    navigationBarTitleText: "浏览记录",
     navigationStyle: "custom",
   },
 });
 
-// 定义tab列表
-const tabList = ref([
-  { label: "今天", value: "0" },
-  { label: "近7天", value: "1" },
-  { label: "近30天", value: "2" },
-]);
-
 // 当前选中的tab
 const currentTab = ref("0");
 
@@ -39,10 +31,8 @@ function clickSelect() {
 }
 
 const rewardTabs = ref([
-  { label: "全部", type: "0" },
-  { label: "折扣券", type: "1" },
-  { label: "兑换券", type: "2" },
-  { label: "满减券", type: "3" },
+  { label: "美食", type: "1" },
+  { label: "车服务", type: "2" },
 ]);
 
 const classIndex = ref(-1);
@@ -55,58 +45,32 @@ function classClick(index, item) {
   classItem.value = item;
   clickSelect();
 }
+
+const filter = ["type", "dataFilter"];
+
+function selectValue(item) {
+  console.log(item);
+}
 </script>
 
 <template>
   <view class="income-cumulative-container">
-    <u-navbar title="累计发券" :autoBack="true" :placeholder="true" :border-bottom="false"
+    <u-navbar title="浏览记录" :autoBack="true" :placeholder="true" :border-bottom="false"
       :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor="#000"></u-navbar>
 
     <view class="invite-content-search">
-      <u-search :showAction="true" actionText="搜索" bgColor="#F7F8FA" v-model="keyword" color='#333' placeholder='搜索券名称'
-        :actionStyle='{ color: "#FF5365", fontSize: "32rpx" }'></u-search>
-    </view>
-
-    <view class="filter-box">
-      <view class='income-select' @click='clickSelect()'>
-        <view class='income-time'>
-          <view class='income-time-name'>{{ classItem.label ? classItem.label : '全部类型' }} </view>
-
-          <u--image class='income-down' :src="getImageUrl('@img/income/down.png')" mode="aspectFit" width="18rpx"
-            height="18rpx">
-          </u--image>
-        </view>
-      </view>
-      <view class="stat-divider"></view>
-      <view class="filter-bar">
-        <view class="filter-tabs">
-          <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
-            :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
-            <text class="tab-text">{{ item.label }}</text>
-          </view>
-        </view>
-      </view>
+      <u-search :showAction="true" actionText="搜索" bgColor="#F7F8FA" v-model="keyword" color='#333'
+        placeholder='搜索昵称/手机号' :actionStyle='{ color: "#FF5365", fontSize: "32rpx" }'></u-search>
     </view>
 
-    <PopupLayer direction="bottom" ref='popupRef'>
-      <view class="classification-cont">
-        <view class='classification-list' v-for='(item, index) in rewardTabs' :key='index'
-          @click='classClick(index, item)'>
-          <view class='classification-label'>{{ item.label }}</view>
-          <u--image class='selected-icon' v-show='classIndex == index' :src="getImageUrl('@img/income/selected.png')"
-            mode="aspectFit" width="32rpx" height="32rpx">
-          </u--image>
-        </view>
-      </view>
-
-    </PopupLayer>
+    <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 class="coupon-tag status-red">折扣券</view>
           </view>
           <!-- <text class="send-count send-red">免费兑换</text> -->
           <!-- <text class="send-number-box">
@@ -125,17 +89,32 @@ function classClick(index, item) {
         <view class="send-divider"></view>
         <view class="send-detail">
           <view class="detail-row">
-            <text class="detail-label">发放时间</text>
+            <text class="detail-label">核销门店</text>
+            <text class="detail-value">2026-05-20 10:30:00</text>
+          </view>
+          <view class="detail-row">
+            <text class="detail-label">我的佣金</text>
+            <text class="detail-value highlight">2026-05-20 10:30:00</text>
+          </view>
+
+          <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">2026-05-20 10:30:00</text>
           </view>
           <view class="detail-row">
-            <text class="detail-label">发放渠道</text>
+            <text class="detail-label">领取日期</text>
             <text class="detail-value">微信朋友圈</text>
           </view>
         </view>
-        <u--image class='coupon1-icon' :src="getImageUrl('@img/me/coupon1.png')" mode="aspectFit" width="66rpx"
-          height="60rpx">
-        </u--image>
       </view>
     </view>
   </view>
@@ -184,8 +163,8 @@ function classClick(index, item) {
         gap: 24rpx;
 
         .filter-tab {
-          padding: 4rpx 30rpx;
-          border-radius: 32rpx;
+          padding: 0 30rpx;
+          border-radius: 999rpx;
           background: #f7f8fa;
           display: flex;
           height: 44rpx;
@@ -224,7 +203,8 @@ function classClick(index, item) {
       }
 
       .income-down {
-        margin-top: -4rpx;
+        margin-top: -8rpx;
+        margin-left: 8rpx;
       }
     }
   }
@@ -232,6 +212,7 @@ function classClick(index, item) {
   .classification-cont {
     padding: 0 32rpx;
     box-sizing: border-box;
+    margin-top: 32rpx;
 
     .classification-list {
       display: flex;
@@ -251,6 +232,11 @@ function classClick(index, item) {
     flex-direction: column;
     gap: 32rpx;
   }
+  .send-total {
+    font-size: 26rpx;
+    color: #333;
+    text-align: center;
+  }
 
   .send-card {
     background: #ffffff;
@@ -260,7 +246,7 @@ function classClick(index, item) {
     .send-header {
       display: flex;
       justify-content: space-between;
-      align-items: flex-start;
+      align-items: center;
       margin-bottom: 32rpx;
 
       .coupon-info {
@@ -270,10 +256,21 @@ function classClick(index, item) {
 
         .coupon-tag {
           padding: 4rpx 16rpx;
-          background: #fff7e8;
-          color: #ff7d00;
           font-size: 22rpx;
           border-radius: 4rpx;
+          &.status-red {
+            background: #ffe8f1;
+            color: #f5319d;
+          }
+
+          &.status-settled {
+            background: #e8ffea;
+            color: #00b42a;
+          }
+          &.status-yellow {
+            background: #fff7e8;
+            color: #ff7d00;
+          }
         }
 
         .coupon-name {
@@ -340,6 +337,16 @@ function classClick(index, item) {
           font-size: 30rpx;
           color: #333333;
         }
+        .highlight {
+          color: #ff5365;
+        }
+      }
+      .income-person {
+        display: flex;
+        align-items: center;
+      }
+      .income-phone {
+        margin-right: 12rpx;
       }
     }
     .coupon1-icon {

src/pages-C/home/ranking.vue

@@ -9,11 +9,12 @@ import { getImageUrl } from "@/utils/imageUtil";
 import Classification from "./classification.vue";
 import Upopup from "@/components/popup/index.vue";
 import DateRangePicker from "@/components/dateRangePicker/index.vue";
+import FilterSelect from "@/components/filter/filter.vue";
 
 definePage({
   style: {
     navigationStyle: "custom",
-    navigationBarTitleText: "累计发放数据排行",
+    navigationBarTitleText: "数据排行",
   },
 });
 
@@ -65,72 +66,68 @@ const visibleNoticeList = computed(() => {
     },
   ];
 });
+
+const filter = ["date", "dataFilter", "type", "rank"];
+
+function selectValue(item) {
+  console.log(item);
+}
 </script>
 
 <template>
   <view class="page-container">
     <!-- 顶部蓝色渐变背景 -->
-    <view class="page-header-bg" :style="{
-            backgroundImage: `url(${getImageUrl('@img/me/rank-bg.png')})`,
-            backgroundSize: 'cover',
-            backgroundRepeat: 'no-repeat',
-            backgroundPosition: 'center'
-        }">
+    <view class="page-header-bg">
+      <u--image class='selected-icon' :src="getImageUrl('@img/me/rank-bg.png')" mode="aspectFit" width="100%"
+        height="462rpx">
+      </u--image>
+      <view class="header-content">
+        <view class="header-item">
+          <u--image class='selected-icon' :src="getImageUrl('@img/me/rank-title.png')" mode="aspectFit" width="326rpx"
+            height="103rpx">
+          </u--image>
+          <view>高转化券榜，分享更容易赚佣金</view>
+          <view class="line"></view>
+        </view>
+      </view>
     </view>
 
-    <u-navbar title="累计发放数据排行" :autoBack="true" :placeholder="true" :border-bottom="false"
+    <u-navbar title="数据排行" :autoBack="true" :placeholder="true" :border-bottom="false"
       :title-style="{ fontWeight: 'bold', color: scrollTop > 1 ? '#000' : '#fff' }"
       :bgColor="scrollTop > 1 ? '#fff' : 'transparent'" :leftIconColor="scrollTop > 1 ? '#000' : '#fff'"></u-navbar>
 
     <!-- 页面主内容 -->
     <view class="main-content">
-      <view class="notice-container">
-        <view v-for="(item, index) in visibleNoticeList" :key="index" class="notice-item" @click='listInfo(item)'>
-          <view class="notice-title">
-            {{ item.title }}
-            <view class='notice-line'></view>
+      <FilterSelect className='filter-select' :filter="filter" @selectValue='selectValue'></FilterSelect>
+
+      <view class="ranking-container-cont">
+        <view class="ranking-container">
+          <view class="ranking-header">
+            <text class="ranking-subtitle ">排名</text>
+            <text class="ranking-subtitle">优惠券名称</text>
+            <text class="ranking-subtitle">分类</text>
+            <text class="ranking-subtitle">浏览</text>
+            <text class="ranking-subtitle">已领取</text>
+            <text class="ranking-subtitle">已核销</text>
+            <text class="ranking-subtitle">核销转换率</text>
           </view>
-          <view class="notice-content">{{ item.content }}</view>
-        </view>
-      </view>
+          <u--image class='selected-hidden' :src="getImageUrl('@img/me/hidden.png')" mode="aspectFit" width="40rpx"
+            height="44rpx">
+          </u--image>
+          <view class="ranking-list">
+            <view class="ranking-item">
+              <u--image class='selected-icon' :src="getImageUrl('@img/me/rank1.png')" mode="aspectFit" width="48rpx"
+                height="48rpx">
+              </u--image>
+              <text class="ranking-value">1256</text>
+              <text class="ranking-value">1256</text>
+              <text class="ranking-value">1256</text>
+              <text class="ranking-value">1256</text>
+              <text class="ranking-value">1256</text>
+              <text class="ranking-value">1256</text>
+            </view>
 
-      <view class="ranking-container">
-        <view class="ranking-header">
-          <text class="ranking-subtitle ">排名</text>
-          <text class="ranking-subtitle">优惠券名称</text>
-          <text class="ranking-subtitle">发放量</text>
-          <text class="ranking-subtitle">核销数</text>
-          <text class="ranking-subtitle">未销数</text>
-        </view>
-        <view class="ranking-list">
-          <view class="ranking-item">
-            <u--image class='selected-icon' :src="getImageUrl('@img/me/rank1.png')" mode="aspectFit" width="48rpx"
-              height="48rpx">
-            </u--image>
-            <text class="ranking-value">1256</text>
-            <text class="ranking-value">1256</text>
-            <text class="ranking-value">1256</text>
-            <text class="ranking-value">1256</text>
           </view>
-          <view class="ranking-item">
-            <u--image class='selected-icon' :src="getImageUrl('@img/me/rank2.png')" mode="aspectFit" width="48rpx"
-              height="48rpx">
-            </u--image>
-            <text class="ranking-value">1256</text>
-            <text class="ranking-value">1256</text>
-            <text class="ranking-value">1256</text>
-            <text class="ranking-value">1256</text>
-          </view>
-          <view class="ranking-item">
-            <u--image class='selected-icon' :src="getImageUrl('@img/me/rank3.png')" mode="aspectFit" width="48rpx"
-              height="48rpx">
-            </u--image>
-            <text class="ranking-value">1256</text>
-            <text class="ranking-value">1256</text>
-            <text class="ranking-value">1256</text>
-            <text class="ranking-value">1256</text>
-          </view>
-
         </view>
       </view>
     </view>
@@ -150,10 +147,26 @@ const visibleNoticeList = computed(() => {
     left: 0;
     right: 0;
     height: 460rpx;
-    background: linear-gradient(to bottom, #0879ff, #f8f8fa);
 
     z-index: 1;
   }
+  .header-content {
+    position: absolute;
+    bottom: 75rpx;
+    left: 38rpx;
+    .header-item {
+      display: flex;
+      flex-direction: column;
+      gap: 25rpx;
+      color: #fff;
+      font-size: 28rpx;
+    }
+    .line {
+      height: 4rpx;
+      width: 57rpx;
+      background: #fff;
+    }
+  }
 
   ::v-deep .top-nav {
     box-shadow: none !important;
@@ -162,91 +175,45 @@ const visibleNoticeList = computed(() => {
   .main-content {
     position: relative;
     z-index: 2;
-    padding: 0 32rpx;
     box-sizing: border-box;
+    top: calc(460rpx - 44px);
   }
-
-  .notice-container {
-    margin-top: 46rpx;
-    display: grid;
-    grid-template-columns: 0.9fr 1.3fr 1.1fr;
-    gap: 34rpx 6rpx; // 图片间距
-    color: #fff;
-
-    .notice-item {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      &:nth-of-type(2) {
-        .notice-content {
-          padding-left: 32rpx;
-        }
-
-        .notice-title {
-          border-left: 1rpx solid #fff;
-          border-right: 1rpx solid #fff;
-          padding: 0 32rpx;
-        }
-      }
-
-      &:nth-of-type(5) {
-        .notice-content {
-          padding-left: 32rpx;
-        }
-
-        .notice-title {
-          border-left: 1rpx solid #fff;
-          border-right: 1rpx solid #fff;
-          padding: 0 32rpx;
-        }
-      }
-
-      &:nth-of-type(3) {
-        padding-left: 32rpx;
-      }
-
-      &:nth-of-type(6) {
-        padding-left: 32rpx;
-      }
-    }
-
-    .notice-title {
-      font-size: 24rpx;
-    }
-
-    .notice-content {
-      font-size: 40rpx;
-      font-weight: 600;
+  .ranking-container-cont {
+    position: relative;
+    overflow: hidden;
+    .selected-hidden {
+      position: absolute;
+      right: 32rpx;
+      top: 64rpx;
     }
   }
-
   .ranking-container {
     background: #ffffff;
     border-radius: 32rpx;
+    margin: 0 32rpx;
     padding: 32rpx;
     margin-top: 32rpx;
     box-sizing: border-box;
+    overflow-x: auto; // 横向滚动
 
     .ranking-header {
-      display: grid;
-      grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr;
+      display: flex;
       margin-bottom: 32rpx;
       padding-bottom: 24rpx;
       border-bottom: 1rpx solid #f0f0f0;
-
-      .ranking-title {
-        font-weight: 600;
-        font-size: 36rpx;
-        color: #333333;
-      }
+      min-width: max-content;
 
       .ranking-subtitle {
         font-size: 28rpx;
         color: #333333;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        flex-shrink: 0;
+        text-align: center;
+        width: 150rpx;
+
+        &:nth-child(1) {
+          width: 100rpx;
+          text-align: left;
+        }
       }
     }
 
@@ -254,19 +221,40 @@ const visibleNoticeList = computed(() => {
       display: flex;
       flex-direction: column;
       gap: 0;
+      min-width: max-content;
     }
 
     .ranking-item {
-      display: grid;
-      grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr;
-
+      display: flex;
       padding: 24rpx 0;
-    }
-    .ranking-value {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      align-items: center;
+
+      .selected-icon {
+        flex-shrink: 0;
+        width: 48rpx;
+        margin-right: 52rpx;
+      }
+
+      .ranking-value {
+        font-size: 26rpx;
+        color: #666;
+        flex-shrink: 0;
+        text-align: center;
+        width: 150rpx;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:nth-child(1) {
+          width: 100rpx;
+          text-align: left;
+        }
+      }
     }
   }
 }
+
+:deep(.filter-select .filter-tabs) {
+  gap: 10rpx !important;
+}
 </style>

src/pages-C/home/sendCancelWriteOff.vue

@@ -0,0 +1,261 @@
+<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>

src/pages-C/my/sendCancelWriteOff.vue → src/pages-C/home/sendCoupon.vue

@@ -1,12 +1,11 @@
 <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";
 
 definePage({
   style: {
-    navigationBarTitleText: "累计未核销",
+    navigationBarTitleText: "累计发券",
     navigationStyle: "custom",
   },
 });
@@ -39,10 +38,8 @@ function clickSelect() {
 }
 
 const rewardTabs = ref([
-  { label: "全部", type: "0" },
-  { label: "折扣券", type: "1" },
-  { label: "兑换券", type: "2" },
-  { label: "满减券", type: "3" },
+  { label: "美食", type: "1" },
+  { label: "车服务", type: "2" },
 ]);
 
 const classIndex = ref(-1);
@@ -55,11 +52,17 @@ function classClick(index, item) {
   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="累计未核销" :autoBack="true" :placeholder="true" :border-bottom="false"
+    <u-navbar title="累计发券" :autoBack="true" :placeholder="true" :border-bottom="false"
       :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor="#000"></u-navbar>
 
     <view class="invite-content-search">
@@ -67,41 +70,10 @@ function classClick(index, item) {
         :actionStyle='{ color: "#FF5365", fontSize: "32rpx" }'></u-search>
     </view>
 
-    <view class="filter-box">
-      <view class='income-select' @click='clickSelect()'>
-        <view class='income-time'>
-          <view class='income-time-name'>{{ classItem.label ? classItem.label : '全部类型' }} </view>
-
-          <u--image class='income-down' :src="getImageUrl('@img/income/down.png')" mode="aspectFit" width="18rpx"
-            height="18rpx">
-          </u--image>
-        </view>
-      </view>
-      <view class="stat-divider"></view>
-      <view class="filter-bar">
-        <view class="filter-tabs">
-          <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
-            :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
-            <text class="tab-text">{{ item.label }}</text>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <PopupLayer direction="bottom" ref='popupRef'>
-      <view class="classification-cont">
-        <view class='classification-list' v-for='(item, index) in rewardTabs' :key='index'
-          @click='classClick(index, item)'>
-          <view class='classification-label'>{{ item.label }}</view>
-          <u--image class='selected-icon' v-show='classIndex == index' :src="getImageUrl('@img/income/selected.png')"
-            mode="aspectFit" width="32rpx" height="32rpx">
-          </u--image>
-        </view>
-      </view>
-
-    </PopupLayer>
+    <FilterSelect :filter="filter" @selectValue='selectValue'></FilterSelect>
 
     <view class="send-content">
+      <view class="send-total">合计领取：2384张</view>
       <view class="send-card">
         <view class="send-header">
           <view class="coupon-info">
@@ -125,11 +97,11 @@ function classClick(index, item) {
         <view class="send-divider"></view>
         <view class="send-detail">
           <view class="detail-row">
-            <text class="detail-label">发放时间</text>
+            <text class="detail-label">品类</text>
             <text class="detail-value">2026-05-20 10:30:00</text>
           </view>
           <view class="detail-row">
-            <text class="detail-label">发放渠道</text>
+            <text class="detail-label">用户领取</text>
             <text class="detail-value">微信朋友圈</text>
           </view>
         </view>
@@ -157,100 +129,17 @@ function classClick(index, item) {
     padding: 0 32rpx 16rpx 32rpx;
   }
 
-  .filter-box {
-    display: flex;
-    align-items: center;
-    background: #fff;
-    height: 92rpx;
-    padding: 0 32rpx;
-    box-sizing: border-box;
-
-    .stat-divider {
-      width: 2rpx;
-      height: 40rpx;
-      background: #d9d9d9;
-      margin: 0 32rpx;
-    }
-
-    .filter-bar {
-      background: #ffffff;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      box-sizing: border-box;
-
-      .filter-tabs {
-        display: flex;
-        gap: 24rpx;
-
-        .filter-tab {
-          padding: 4rpx 30rpx;
-          border-radius: 32rpx;
-          background: #f7f8fa;
-          display: flex;
-          height: 44rpx;
-          line-height: 44rpx;
-
-          &.active {
-            background: #ff5365;
-
-            .tab-text {
-              color: #ffffff;
-            }
-          }
-
-          .tab-text {
-            font-weight: 400;
-            font-size: 26rpx;
-            color: #333333;
-          }
-        }
-      }
-    }
-
-    .income-select {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .income-time-name {
-        font-size: 26rpx;
-        color: #333;
-        margin-right: 8rpx;
-      }
-
-      .income-time {
-        display: flex;
-      }
-
-      .income-down {
-        margin-top: -4rpx;
-      }
-    }
-  }
-
-  .classification-cont {
-    padding: 0 32rpx;
-    box-sizing: border-box;
-
-    .classification-list {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .classification-label {
-      color: #2c2c2c;
-      font-size: 26rpx;
-      padding-bottom: 32rpx;
-    }
-  }
-
   .send-content {
     padding: 32rpx;
     display: flex;
     flex-direction: column;
     gap: 32rpx;
   }
+  .send-total {
+    font-size: 26rpx;
+    color: #333;
+    text-align: center;
+  }
 
   .send-card {
     background: #ffffff;

src/pages-C/my/sendWriteOff.vue → src/pages-C/home/sendWriteOff.vue

@@ -3,14 +3,21 @@ 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: "累计核销",
+    navigationBarTitleText: "累计领取",
     navigationStyle: "custom",
   },
 });
 
+// 生命周期
+onLoad(async (options) => {
+  type.value = options.type
+})
 // 定义tab列表
 const tabList = ref([
   { label: "今天", value: "0" },
@@ -55,52 +62,19 @@ function classClick(index, item) {
   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="累计核销" :autoBack="true" :placeholder="true" :border-bottom="false"
+    <u-navbar :title="type==1?'累计领取':'累计未领取'" :autoBack="true" :placeholder="true" :border-bottom="false"
       :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor="#000"></u-navbar>
 
-    <view class="invite-content-search">
-      <u-search :showAction="true" actionText="搜索" bgColor="#F7F8FA" v-model="keyword" color='#333' placeholder='搜索券名称'
-        :actionStyle='{ color: "#FF5365", fontSize: "32rpx" }'></u-search>
-    </view>
-
-    <view class="filter-box">
-      <view class='income-select' @click='clickSelect()'>
-        <view class='income-time'>
-          <view class='income-time-name'>{{ classItem.label ? classItem.label : '全部类型' }} </view>
-
-          <u--image class='income-down' :src="getImageUrl('@img/income/down.png')" mode="aspectFit" width="18rpx"
-            height="18rpx">
-          </u--image>
-        </view>
-      </view>
-      <view class="stat-divider"></view>
-      <view class="filter-bar">
-        <view class="filter-tabs">
-          <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
-            :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
-            <text class="tab-text">{{ item.label }}</text>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <PopupLayer direction="bottom" ref='popupRef'>
-      <view class="classification-cont">
-        <view class='classification-list' v-for='(item, index) in rewardTabs' :key='index'
-          @click='classClick(index, item)'>
-          <view class='classification-label'>{{ item.label }}</view>
-          <u--image class='selected-icon' v-show='classIndex == index' :src="getImageUrl('@img/income/selected.png')"
-            mode="aspectFit" width="32rpx" height="32rpx">
-          </u--image>
-        </view>
-      </view>
-
-    </PopupLayer>
-
+    <FilterSelect :filter='filter' @selectValue='selectValue'></FilterSelect>
     <view class="send-content">
       <view class="send-card">
         <view class="send-header">
@@ -126,21 +100,23 @@ function classClick(index, item) {
         <view class="send-detail">
           <view class="detail-row">
             <text class="detail-label">领取人</text>
-            <text class="detail-value">2026-05-20 10:30:00</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-label">联系方式</text>
             <text class="detail-value">微信朋友圈</text>
           </view>
           <view class="detail-row">
-            <text class="detail-label">领取时间</text>
+            <text class="detail-label">领取日期</text>
             <text class="detail-value">微信朋友圈</text>
           </view>
         </view>
-        <u--image class='coupon1-icon' :src="getImageUrl('@img/me/coupon1.png')" mode="aspectFit" width="66rpx"
-          height="60rpx">
-        </u--image>
-        <u--image class='write-off-icon' :src="getImageUrl('@img/me/writeOff.png')" mode="aspectFit" width="188rpx"
+        <u--image v-if='type==1' class='write-off-icon' :src="getImageUrl('@img/me/writeOff.png')" mode="aspectFit" width="188rpx"
           height="150rpx"></u--image>
       </view>
     </view>
@@ -163,94 +139,6 @@ function classClick(index, item) {
     padding: 0 32rpx 16rpx 32rpx;
   }
 
-  .filter-box {
-    display: flex;
-    align-items: center;
-    background: #fff;
-    height: 92rpx;
-    padding: 0 32rpx;
-    box-sizing: border-box;
-
-    .stat-divider {
-      width: 2rpx;
-      height: 40rpx;
-      background: #d9d9d9;
-      margin: 0 32rpx;
-    }
-
-    .filter-bar {
-      background: #ffffff;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      box-sizing: border-box;
-
-      .filter-tabs {
-        display: flex;
-        gap: 24rpx;
-
-        .filter-tab {
-          padding: 4rpx 30rpx;
-          border-radius: 32rpx;
-          background: #f7f8fa;
-          display: flex;
-          height: 44rpx;
-          line-height: 44rpx;
-
-          &.active {
-            background: #ff5365;
-
-            .tab-text {
-              color: #ffffff;
-            }
-          }
-
-          .tab-text {
-            font-weight: 400;
-            font-size: 26rpx;
-            color: #333333;
-          }
-        }
-      }
-    }
-
-    .income-select {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-
-      .income-time-name {
-        font-size: 26rpx;
-        color: #333;
-        margin-right: 8rpx;
-      }
-
-      .income-time {
-        display: flex;
-      }
-
-      .income-down {
-        margin-top: -4rpx;
-      }
-    }
-  }
-
-  .classification-cont {
-    padding: 0 32rpx;
-    box-sizing: border-box;
-
-    .classification-list {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .classification-label {
-      color: #2c2c2c;
-      font-size: 26rpx;
-      padding-bottom: 32rpx;
-    }
-  }
-
   .send-content {
     padding: 32rpx;
     display: flex;
@@ -347,6 +235,13 @@ function classClick(index, item) {
           color: #333333;
         }
       }
+      .income-person {
+        display: flex;
+        align-items: center;
+      }
+      .income-phone {
+        margin-right: 12rpx;
+      }
     }
     .coupon1-icon {
       position: absolute;
@@ -355,8 +250,8 @@ function classClick(index, item) {
     }
     .write-off-icon {
       position: absolute;
-      right: 136rpx;
-      bottom: 32rpx;
+      right: 168rpx;
+      bottom: 49rpx;
     }
   }
 }

src/pages-C/income/incomeCancel.vue

@@ -1,279 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-definePage({
-  style: {
-    navigationBarTitleText: "核销收益",
-    navigationStyle: "custom",
-  },
-});
-
-const cumulativeData = ref([
-  {
-    id: 1,
-    type: "邀请新人",
-    amount: "37.92",
-    userName: "林雨欣",
-    inviteDate: "2026-05-18",
-  },
-  {
-    id: 2,
-    type: "邀请新人",
-    amount: "45.00",
-    userName: "张三",
-    inviteDate: "2026-05-19",
-  },
-  {
-    id: 3,
-    type: "邀请新人",
-    amount: "28.50",
-    userName: "李四",
-    inviteDate: "2026-05-20",
-  },
-]);
-
-// 定义tab列表
-const tabList = ref([
-  { label: "今天", value: "0" },
-  { label: "近7天", value: "1" },
-  { label: "近30天", value: "2" },
-]);
-
-// 当前选中的tab
-const currentTab = ref("0");
-
-// 点击tab事件
-const handleTabClick = (value) => {
-  currentTab.value = value;
-  console.log("选中tab:", value);
-};
-</script>
-
-<template>
-  <view class="income-cumulative-container">
-    <u-navbar title="核销收益" :autoBack="true" :placeholder="true" :border-bottom="false"
-      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor="#000"></u-navbar>
-
-    <view class="filter-bar">
-      <view class="filter-tabs">
-        <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
-          :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
-          <text class="tab-text">{{ item.label }}</text>
-        </view>
-      </view>
-      <view class="total-amount">
-        <text class="total-label">合计</text>
-        <text class="total-value">340</text>
-        <text class="total-unit">元</text>
-      </view>
-    </view>
-
-    <view class="cumulative-content">
-      <view class="cumulative-list">
-        <view class="cumulative-item" v-for="item in cumulativeData" :key="item.id">
-          <view class="item-header">
-            <text class="item-type">{{ item.type }}</text>
-            <view class="item-amount">
-              <text class="amount-plus">收益</text>
-              <text class="amount-value">{{ item.amount }}</text>
-              <text class="total-unit ">元</text>
-            </view>
-          </view>
-          <view class="divider"></view>
-          <view class="item-info">
-            <view class="info-row">
-              <text class="info-label">核销用户</text>
-              <text class="info-value">{{ item.userName }}</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">核销时间</text>
-              <text class="info-value">{{ item.inviteDate }}</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">商品名称</text>
-              <text class="info-value">{{ item.inviteDate }}</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">核销商家</text>
-              <text class="info-value">{{ item.inviteDate }}</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">实付金额</text>
-              <text class="info-value red">{{ item.inviteDate }}</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">券核销金额</text>
-              <text class="info-value red">{{ item.inviteDate }}</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">结算时间</text>
-              <text class="info-value ">{{ item.inviteDate }}</text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.income-cumulative-container {
-  min-height: 100vh;
-  background: #f8f8fa;
-
-  .filter-bar {
-    width: 100%;
-    height: 92rpx;
-    background: #ffffff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 32rpx;
-    box-sizing: border-box;
-
-    .filter-tabs {
-      display: flex;
-      gap: 24rpx;
-
-      .filter-tab {
-        padding: 4rpx 30rpx;
-        border-radius: 32rpx;
-        background: #f7f8fa;
-        display: flex;
-        height: 44rpx;
-        line-height: 44rpx;
-
-        &.active {
-          background: #ff5365;
-
-          .tab-text {
-            color: #ffffff;
-          }
-        }
-
-        .tab-text {
-          font-weight: 400;
-          font-size: 26rpx;
-          color: #333333;
-        }
-      }
-    }
-
-    .total-amount {
-      display: flex;
-      align-items: baseline;
-      gap: 8rpx;
-
-      .total-label {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #2c2c2c;
-      }
-
-      .total-value {
-        font-weight: 600;
-        font-size: 42rpx;
-        color: #ff5365;
-      }
-
-      .total-unit {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ff5365;
-      }
-    }
-  }
-
-  .cumulative-content {
-    width: 100%;
-    padding: 32rpx;
-    box-sizing: border-box;
-  }
-
-  .cumulative-list {
-    display: flex;
-    flex-direction: column;
-    gap: 32rpx;
-  }
-
-  .cumulative-item {
-    background: #ffffff;
-    border-radius: 32rpx;
-    padding: 46rpx 32rpx;
-
-    .item-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 32rpx;
-
-      .item-type {
-        font-weight: 600;
-        font-size: 32rpx;
-        color: #2c2c2c;
-        line-height: 1;
-      }
-
-      .item-amount {
-        display: flex;
-        align-items: baseline;
-        gap: 8rpx;
-
-        .amount-plus {
-          font-size: 26rpx;
-          color: #2c2c2c;
-          line-height: 1;
-        }
-
-        .amount-value {
-          font-weight: 600;
-          font-size: 42rpx;
-          color: #ff5365;
-          line-height: 1;
-        }
-      }
-    }
-
-    .divider {
-      width: 622rpx;
-      height: 2rpx;
-      background: #eaeaea;
-      margin-bottom: 32rpx;
-    }
-
-    .item-info {
-      display: flex;
-      flex-direction: column;
-      gap: 32rpx;
-
-      .info-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .info-label {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #86909c;
-          line-height: 1;
-        }
-
-        .info-value {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #333333;
-          line-height: 1;
-        }
-        .red {
-          color: #ff5365;
-        }
-      }
-    }
-    .total-unit {
-      font-weight: 400;
-      font-size: 26rpx;
-      color: #ff5365;
-    }
-  }
-}
-</style>

src/pages-C/income/incomeCumulative.vue

@@ -1,296 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import LsvList from "@/components/listScrollView/index.vue";
-import { getNewCouponList } from "@/api/home";
-
-definePage({
-  style: {
-    navigationBarTitleText: "累计收益",
-    navigationStyle: "custom",
-  },
-});
-
-const cumulativeData = ref([
-  {
-    id: 1,
-    type: "邀请新人",
-    amount: "37.92",
-    userName: "林雨欣",
-    inviteDate: "2026-05-18",
-  },
-  {
-    id: 2,
-    type: "邀请新人",
-    amount: "45.00",
-    userName: "张三",
-    inviteDate: "2026-05-19",
-  },
-  {
-    id: 3,
-    type: "邀请新人",
-    amount: "28.50",
-    userName: "李四",
-    inviteDate: "2026-05-20",
-  },
-]);
-
-// 定义tab列表
-const tabList = ref([
-  { label: "今天", value: "0" },
-  { label: "近7天", value: "1" },
-  { label: "近30天", value: "2" },
-]);
-
-// 当前选中的tab
-const currentTab = ref("0");
-
-// 点击tab事件
-const handleTabClick = (value) => {
-  currentTab.value = value;
-  console.log("选中tab:", value);
-};
-
-const listRef = ref();
-
-// 初始参数
-// const initParams = ref({
-//   name: "",
-//   relatedId: "1889837335015636994",
-//   type: "3",
-//   country: "",
-// });
-
-const getCouponListApi = (params) => {
-  return getNewCouponList({
-    pageNo: params.pageNo,
-    pageSize: params.pageSize,
-    type: 3,
-    relatedId: "1889837335015636994",
-  });
-};
-
-// 刷新列表
-const refreshList = () => {
-  listRef.value?.reloadList();
-};
-</script>
-
-<template>
-  <view class="income-cumulative-container">
-    <view>
-      <u-navbar title="累计收益" :autoBack="true" :placeholder="true" :border-bottom="false"
-        :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor="#000"></u-navbar>
-
-      <view class="filter-bar">
-        <view class="filter-tabs">
-          <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
-            :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
-            <text class="tab-text">{{ item.label }}</text>
-          </view>
-        </view>
-        <view class="total-amount">
-          <text class="total-label">合计</text>
-          <text class="total-value">340</text>
-          <text class="total-unit">元</text>
-        </view>
-      </view>
-    </view>
-
-    <view class="cumulative-content">
-      <LsvList ref="listRef" :api="getCouponListApi" :page-size="4" key-name="records">
-        <template #list="{ data }">
-          <view class="cumulative-list">
-            <view class="cumulative-item" v-for="item in data" :key="item.id">
-              <view class="item-header">
-                <text class="item-type">{{ item.type }}</text>
-                <view class="item-amount">
-                  <text class="amount-plus">收益</text>
-                  <text class="amount-value">{{ item.amount }}</text>
-                  <text class="total-unit">元</text>
-                </view>
-              </view>
-              <view class="divider"></view>
-              <view class="item-info">
-                <view class="info-row">
-                  <text class="info-label">领取人</text>
-                  <text class="info-value">{{ item.userName }}</text>
-                </view>
-                <view class="info-row">
-                  <text class="info-label">领取时间</text>
-                  <text class="info-value">{{ item.inviteDate }}</text>
-                </view>
-                <view class="info-row">
-                  <text class="info-label">结算状态</text>
-                  <text class="info-value">{{ item.inviteDate }}</text>
-                </view>
-              </view>
-            </view>
-          </view>
-        </template>
-      </LsvList>
-
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.income-cumulative-container {
-  min-height: 100vh;
-  background: #f8f8fa;
-  display: flex;
-  flex-direction: column;
-
-  .filter-bar {
-    width: 100%;
-    height: 92rpx;
-    background: #ffffff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 32rpx;
-    box-sizing: border-box;
-
-    .filter-tabs {
-      display: flex;
-      gap: 24rpx;
-
-      .filter-tab {
-        padding: 4rpx 30rpx;
-        border-radius: 32rpx;
-        background: #f7f8fa;
-        display: flex;
-        height: 44rpx;
-        line-height: 44rpx;
-        &.active {
-          background: #ff5365;
-
-          .tab-text {
-            color: #ffffff;
-          }
-        }
-
-        .tab-text {
-          font-weight: 400;
-          font-size: 26rpx;
-          color: #333333;
-        }
-      }
-    }
-
-    .total-amount {
-      display: flex;
-      align-items: baseline;
-      gap: 8rpx;
-
-      .total-label {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #2c2c2c;
-      }
-
-      .total-value {
-        font-weight: 600;
-        font-size: 42rpx;
-        color: #ff5365;
-      }
-
-      .total-unit {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ff5365;
-      }
-    }
-  }
-
-  .cumulative-content {
-    width: 100%;
-    padding: 32rpx;
-    box-sizing: border-box;
-    flex: 1;
-  }
-
-  .cumulative-list {
-    display: flex;
-    flex-direction: column;
-    gap: 32rpx;
-    height: 100%;
-  }
-
-  .cumulative-item {
-    background: #ffffff;
-    border-radius: 32rpx;
-    padding: 46rpx 32rpx;
-
-    .item-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 32rpx;
-
-      .item-type {
-        font-weight: 600;
-        font-size: 32rpx;
-        color: #2c2c2c;
-        line-height: 1;
-      }
-
-      .item-amount {
-        display: flex;
-        align-items: baseline;
-        gap: 8rpx;
-
-        .amount-plus {
-          font-size: 26rpx;
-          color: #2c2c2c;
-          line-height: 1;
-        }
-
-        .amount-value {
-          font-weight: 600;
-          font-size: 42rpx;
-          color: #ff5365;
-          line-height: 1;
-        }
-      }
-      .total-unit {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ff5365;
-      }
-    }
-
-    .divider {
-      width: 622rpx;
-      height: 2rpx;
-      background: #eaeaea;
-      margin-bottom: 32rpx;
-    }
-
-    .item-info {
-      display: flex;
-      flex-direction: column;
-      gap: 32rpx;
-
-      .info-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .info-label {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #86909c;
-          line-height: 1;
-        }
-
-        .info-value {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #333333;
-          line-height: 1;
-        }
-      }
-    }
-  }
-}
-</style>

src/pages-C/income/incomeInvitation.vue

@@ -1,250 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-definePage({
-  style: {
-    navigationBarTitleText: "邀新收益",
-    navigationStyle: "custom",
-  },
-});
-
-const cumulativeData = ref([
-  {
-    id: 1,
-    type: "邀请新人",
-    amount: "37.92",
-    userName: "林雨欣",
-    inviteDate: "2026-05-18",
-  },
-  {
-    id: 2,
-    type: "邀请新人",
-    amount: "45.00",
-    userName: "张三",
-    inviteDate: "2026-05-19",
-  },
-  {
-    id: 3,
-    type: "邀请新人",
-    amount: "28.50",
-    userName: "李四",
-    inviteDate: "2026-05-20",
-  },
-]);
-
-// 定义tab列表
-const tabList = ref([
-  { label: "今天", value: "0" },
-  { label: "近7天", value: "1" },
-  { label: "近30天", value: "2" },
-]);
-
-// 当前选中的tab
-const currentTab = ref("0");
-
-// 点击tab事件
-const handleTabClick = (value) => {
-  currentTab.value = value;
-  console.log("选中tab:", value);
-};
-</script>
-
-<template>
-  <view class="income-cumulative-container">
-    <u-navbar title="邀新收益" :autoBack="true" :placeholder="true" :border-bottom="false"
-      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor="#000"></u-navbar>
-
-    <view class="filter-bar">
-      <view class="filter-tabs">
-        <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
-          :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
-          <text class="tab-text">{{ item.label }}</text>
-        </view>
-      </view>
-      <view class="total-amount">
-        <text class="total-label">合计</text>
-        <text class="total-value">340</text>
-        <text class="total-unit">元</text>
-      </view>
-    </view>
-
-    <view class="cumulative-content">
-      <view class="cumulative-list">
-        <view class="cumulative-item" v-for="item in cumulativeData" :key="item.id">
-          <view class="item-header">
-            <text class="item-type">{{ item.type }}</text>
-            <view class="item-amount">
-              <text class="amount-plus">+</text>
-              <text class="amount-value">{{ item.amount }}</text>
-            </view>
-          </view>
-          <view class="divider"></view>
-          <view class="item-info">
-            <view class="info-row">
-              <text class="info-label">用户名称</text>
-              <text class="info-value">{{ item.userName }}</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">邀请日期</text>
-              <text class="info-value">{{ item.inviteDate }}</text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.income-cumulative-container {
-  min-height: 100vh;
-  background: #f8f8fa;
-
-  .filter-bar {
-    width: 100%;
-    height: 92rpx;
-    background: #ffffff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 32rpx;
-    box-sizing: border-box;
-
-    .filter-tabs {
-      display: flex;
-      gap: 24rpx;
-
-      .filter-tab {
-        padding: 4rpx 30rpx;
-        border-radius: 32rpx;
-        background: #f7f8fa;
-        display: flex;
-        height: 44rpx;
-        line-height: 44rpx;
-        &.active {
-          background: #ff5365;
-
-          .tab-text {
-            color: #ffffff;
-          }
-        }
-
-        .tab-text {
-          font-weight: 400;
-          font-size: 26rpx;
-          color: #333333;
-        }
-      }
-    }
-
-    .total-amount {
-      display: flex;
-      align-items: baseline;
-      gap: 8rpx;
-
-      .total-label {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #2c2c2c;
-      }
-
-      .total-value {
-        font-weight: 600;
-        font-size: 42rpx;
-        color: #ff5365;
-      }
-
-      .total-unit {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ff5365;
-      }
-    }
-  }
-
-  .cumulative-content {
-    width: 100%;
-    padding: 32rpx;
-    box-sizing: border-box;
-  }
-
-  .cumulative-list {
-    display: flex;
-    flex-direction: column;
-    gap: 32rpx;
-  }
-
-  .cumulative-item {
-    background: #ffffff;
-    border-radius: 32rpx;
-    padding: 46rpx 32rpx;
-
-    .item-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 32rpx;
-
-      .item-type {
-        font-weight: 600;
-        font-size: 32rpx;
-        color: #2c2c2c;
-        line-height: 1;
-      }
-
-      .item-amount {
-        display: flex;
-        align-items: baseline;
-        gap: 8rpx;
-
-        .amount-plus {
-          font-weight: 600;
-          font-size: 40rpx;
-          color: #ff5365;
-          line-height: 1;
-        }
-
-        .amount-value {
-          font-weight: 600;
-          font-size: 42rpx;
-          color: #ff5365;
-          line-height: 1;
-        }
-      }
-    }
-
-    .divider {
-      width: 622rpx;
-      height: 2rpx;
-      background: #eaeaea;
-      margin-bottom: 32rpx;
-    }
-
-    .item-info {
-      display: flex;
-      flex-direction: column;
-      gap: 32rpx;
-
-      .info-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .info-label {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #86909c;
-          line-height: 1;
-        }
-
-        .info-value {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #333333;
-          line-height: 1;
-        }
-      }
-    }
-  }
-}
-</style>

src/pages-C/income/incomeMoney.vue

@@ -83,9 +83,7 @@ const handleCancel = () => {
     <view class='income-select'>
       <view class='income-time' @click='showPicker=true'>
         <view class='income-time-name'>2026 05.10-2026 05.12 </view>
-        <u--image class='income-down' :src="getImageUrl('@img/income/down.png')" mode="aspectFit" width="18rpx"
-          height="18rpx">
-        </u--image>
+        <view class="caret" />
       </view>
       <view class="total-amount">
         <text class="total-label">合计</text>
@@ -144,7 +142,8 @@ const handleCancel = () => {
       display: flex;
     }
     .income-down {
-      margin-top: -4rpx;
+      margin-top: -8rpx;
+      margin-left: 8rpx;
     }
     .total-amount {
       display: flex;
@@ -169,11 +168,27 @@ const handleCancel = () => {
         color: #ff5365;
       }
     }
+    .income-time {
+      display: flex;
+      align-items: center;
+      color: #333333;
+      font-size: 28rpx;
+      line-height: 28rpx;
+      white-space: nowrap;
+    }
+    .caret {
+      width: 0;
+      height: 0;
+      margin-left: 8rpx;
+      border-left: 7rpx solid transparent;
+      border-right: 7rpx solid transparent;
+      border-top: 9rpx solid #333333;
+    }
   }
   .money-card {
     background: #ffffff;
     border-radius: 32rpx;
-    padding: 0 32rpx;
+    padding: 30rpx 32rpx 0 32rpx;
     box-sizing: border-box;
 
     .money-list {

src/pages-C/income/incomeSend.vue

@@ -1,259 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-definePage({
-  style: {
-    navigationBarTitleText: "发券收益",
-    navigationStyle: "custom",
-  },
-});
-
-const cumulativeData = ref([
-  {
-    id: 1,
-    type: "邀请新人",
-    amount: "37.92",
-    userName: "林雨欣",
-    inviteDate: "2026-05-18",
-  },
-  {
-    id: 2,
-    type: "邀请新人",
-    amount: "45.00",
-    userName: "张三",
-    inviteDate: "2026-05-19",
-  },
-  {
-    id: 3,
-    type: "邀请新人",
-    amount: "28.50",
-    userName: "李四",
-    inviteDate: "2026-05-20",
-  },
-]);
-
-// 定义tab列表
-const tabList = ref([
-  { label: "今天", value: "0" },
-  { label: "近7天", value: "1" },
-  { label: "近30天", value: "2" },
-]);
-
-// 当前选中的tab
-const currentTab = ref("0");
-
-// 点击tab事件
-const handleTabClick = (value) => {
-  currentTab.value = value;
-  console.log("选中tab:", value);
-};
-</script>
-
-<template>
-  <view class="income-cumulative-container">
-    <u-navbar title="发券收益" :autoBack="true" :placeholder="true" :border-bottom="false"
-      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor="#000"></u-navbar>
-
-    <view class="filter-bar">
-      <view class="filter-tabs">
-        <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
-          :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
-          <text class="tab-text">{{ item.label }}</text>
-        </view>
-      </view>
-      <view class="total-amount">
-        <text class="total-label">合计</text>
-        <text class="total-value">340</text>
-        <text class="total-unit">元</text>
-      </view>
-    </view>
-
-    <view class="cumulative-content">
-      <view class="cumulative-list">
-        <view class="cumulative-item" v-for="item in cumulativeData" :key="item.id">
-          <view class="item-header">
-            <text class="item-type">{{ item.type }}</text>
-            <view class="item-amount">
-              <text class="amount-plus">收益</text>
-              <text class="amount-value">{{ item.amount }}</text>
-              <text class="total-unit">元</text>
-            </view>
-          </view>
-          <view class="divider"></view>
-          <view class="item-info">
-            <view class="info-row">
-              <text class="info-label">领取人</text>
-              <text class="info-value">{{ item.userName }}</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">领取时间</text>
-              <text class="info-value">{{ item.inviteDate }}</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">结算状态</text>
-              <text class="info-value">{{ item.inviteDate }}</text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.income-cumulative-container {
-  min-height: 100vh;
-  background: #f8f8fa;
-
-  .filter-bar {
-    width: 100%;
-    height: 92rpx;
-    background: #ffffff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 32rpx;
-    box-sizing: border-box;
-
-    .filter-tabs {
-      display: flex;
-      gap: 24rpx;
-
-      .filter-tab {
-        padding: 4rpx 30rpx;
-        border-radius: 32rpx;
-        background: #f7f8fa;
-        display: flex;
-        height: 44rpx;
-        line-height: 44rpx;
-        &.active {
-          background: #ff5365;
-
-          .tab-text {
-            color: #ffffff;
-          }
-        }
-
-        .tab-text {
-          font-weight: 400;
-          font-size: 26rpx;
-          color: #333333;
-        }
-      }
-    }
-
-    .total-amount {
-      display: flex;
-      align-items: baseline;
-      gap: 8rpx;
-
-      .total-label {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #2c2c2c;
-      }
-
-      .total-value {
-        font-weight: 600;
-        font-size: 42rpx;
-        color: #ff5365;
-      }
-
-      .total-unit {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ff5365;
-      }
-    }
-  }
-
-  .cumulative-content {
-    width: 100%;
-    padding: 32rpx;
-    box-sizing: border-box;
-  }
-
-  .cumulative-list {
-    display: flex;
-    flex-direction: column;
-    gap: 32rpx;
-  }
-
-  .cumulative-item {
-    background: #ffffff;
-    border-radius: 32rpx;
-    padding: 46rpx 32rpx;
-
-    .item-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 32rpx;
-
-      .item-type {
-        font-weight: 600;
-        font-size: 32rpx;
-        color: #2c2c2c;
-        line-height: 1;
-      }
-
-      .item-amount {
-        display: flex;
-        align-items: baseline;
-        gap: 8rpx;
-
-        .amount-plus {
-          font-size: 26rpx;
-          color: #2c2c2c;
-          line-height: 1;
-        }
-
-        .amount-value {
-          font-weight: 600;
-          font-size: 42rpx;
-          color: #ff5365;
-          line-height: 1;
-        }
-      }
-      .total-unit {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ff5365;
-      }
-    }
-
-    .divider {
-      width: 622rpx;
-      height: 2rpx;
-      background: #eaeaea;
-      margin-bottom: 32rpx;
-    }
-
-    .item-info {
-      display: flex;
-      flex-direction: column;
-      gap: 32rpx;
-
-      .info-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .info-label {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #86909c;
-          line-height: 1;
-        }
-
-        .info-value {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #333333;
-          line-height: 1;
-        }
-      }
-    }
-  }
-}
-</style>

src/pages-C/income/invitation.vue → src/pages-C/income/list/invitation.vue

@@ -65,19 +65,28 @@ const invitationList = ref([
           <view v-for="(item, index) in invitationList" :key="item.id" class="record-item">
             <view class="info-row">
               <text class="info-label">用户名称</text>
-              <text class="info-value">{{ item.userName }}</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="info-row">
-              <text class="info-label">邀请时间</text>
+              <text class="info-label">获得佣金</text>
+              <text class="info-value highlight">¥{{ item.commission }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">联系方式</text>
               <text class="info-value">{{ item.invitationTime }}</text>
             </view>
             <view class="info-row">
-              <text class="info-label">获得佣金</text>
-              <text class="info-value highlight">¥{{ item.commission }}</text>
+              <text class="info-label">邀请时间</text>
+              <text class="info-value">{{ item.invitationTime }}</text>
             </view>
-
             <view v-if="index < invitationList.length - 1" class="record-divider"></view>
           </view>
+
         </view>
       </view>
     </view>
@@ -88,6 +97,7 @@ const invitationList = ref([
 .invitation-container {
   min-height: 100vh;
   background: #f8f8fa;
+  overflow: auto;
 
   .invitation-content {
     padding: 32rpx;
@@ -166,19 +176,26 @@ const invitationList = ref([
           display: flex;
           justify-content: space-between;
           margin-bottom: 30rpx;
-
+          align-items: center;
+          height: 30rpx;
+          line-height: 30rpx;
+          .income-person {
+            display: flex;
+            align-items: center;
+          }
+          .income-phone {
+            margin-right: 12rpx;
+          }
           .info-label {
             font-weight: 400;
             font-size: 30rpx;
             color: #666666;
-            line-height: 30rpx;
           }
 
           .info-value {
             font-weight: 400;
             font-size: 30rpx;
             color: #333333;
-            line-height: 30rpx;
 
             &.highlight {
               color: #ff5365;
@@ -195,6 +212,11 @@ const invitationList = ref([
         }
       }
     }
+    .record-item:last-child {
+      .info-row:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 }
 </style>

src/pages-C/income/shareInfo.vue → src/pages-C/income/list/shareInfo.vue

@@ -2,6 +2,7 @@
 import { ref } from "vue";
 import { safeAreaInsets, menuButtonInfo } from "@/utils";
 import CustomNavigationBar from "@/components/CustomNavigationBar.vue";
+import { getImageUrl } from "@/utils/imageUtil";
 
 definePage({
   style: {
@@ -97,6 +98,16 @@ function handleViewDetail(item) {
             <view class="record-bottom">
               <view class="info-row">
                 <text class="info-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="info-row">
+                <text class="info-label">联系方式</text>
                 <text class="info-value">{{ item.receiver }}</text>
               </view>
               <view class="info-row">
@@ -225,19 +236,27 @@ function handleViewDetail(item) {
             display: flex;
             justify-content: space-between;
             margin-bottom: 30rpx;
+            align-items: center;
+            height: 30rpx;
+            line-height: 30rpx;
 
             .info-label {
               font-weight: 400;
               font-size: 30rpx;
               color: #666666;
-              line-height: 30rpx;
             }
 
             .info-value {
               font-weight: 400;
               font-size: 30rpx;
               color: #333333;
-              line-height: 30rpx;
+            }
+            .income-person {
+              display: flex;
+              align-items: center;
+            }
+            .income-phone {
+              margin-right: 12rpx;
             }
           }
         }
@@ -250,6 +269,11 @@ function handleViewDetail(item) {
         }
       }
     }
+    .record-item:last-child {
+      .info-row:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 }
 </style>

src/pages-C/income/list/teamWriteOff.vue

@@ -0,0 +1,262 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { getImageUrl } from "@/utils/imageUtil";
+
+definePage({
+  style: {
+    navigationBarTitleText: "团队核销奖励",
+    navigationStyle: "custom",
+  },
+});
+
+const totalIncome = ref("38.00");
+
+const writeOffList = ref([
+  {
+    id: 1,
+    couponName: "精品洗车优惠券",
+    writeOffTime: "2026-05-15 15:00:00",
+    user: "吴磊",
+    productName: "精品洗车",
+    storeName: "京东养车",
+    payAmount: "48.00",
+    commission: "48.00",
+  },
+  {
+    id: 2,
+    couponName: "精品洗车优惠券",
+    writeOffTime: "2026-05-15 15:00:00",
+    user: "吴磊",
+    productName: "精品洗车",
+    storeName: "京东养车",
+    payAmount: "48.00",
+    commission: "48.00",
+  },
+]);
+</script>
+
+<template>
+  <view class="write-off-container">
+    <u-navbar title="团队核销奖励" :autoBack="true" :placeholder="true" :border-bottom="false"
+      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor="#000"></u-navbar>
+
+    <view class="write-off-content">
+      <view class="write-off-card">
+        <view class="card-header">
+          <view class="title-section">
+            <view class="title-line"></view>
+            <text class="title-text">核销奖励</text>
+          </view>
+          <view class="total-income">
+            <text class="total-label">总收益</text>
+            <view>
+              <text class="total-symbol">¥</text>
+              <text class="total-amount">{{ totalIncome }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="header-divider"></view>
+
+        <view class="records-list">
+          <view v-for="(item, index) in writeOffList" :key="item.id" class="record-item">
+            <view class="info-row">
+              <text class="info-label">团员层级</text>
+              <text class="info-value">{{ item.couponName }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">优惠券名称</text>
+              <text class="info-value">{{ item.writeOffTime }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">核销时间</text>
+              <text class="info-value">{{ item.writeOffTime }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-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="info-row">
+              <text class="info-label">团员联系方式</text>
+              <text class="info-value">{{ item.user }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-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="info-row">
+              <text class="info-label">核销类型</text>
+              <text class="info-value">{{ item.user }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">用户联系方式</text>
+              <text class="info-value">{{ item.user }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">核销类型</text>
+              <text class="info-value">{{ item.user }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">商品名称</text>
+              <text class="info-value">{{ item.productName }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">核销商家</text>
+              <text class="info-value">{{ item.storeName }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">实付金额</text>
+              <text class="info-value">¥{{ item.payAmount }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">获得佣金</text>
+              <text class="info-value highlight">¥{{ item.commission }}</text>
+            </view>
+
+            <view v-if="index < writeOffList.length - 1" class="record-divider"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.write-off-container {
+  min-height: 100vh;
+  background: #f8f8fa;
+
+  .write-off-content {
+    padding: 32rpx;
+  }
+
+  .write-off-card {
+    background: #ffffff;
+    border-radius: 32rpx;
+    padding: 32rpx;
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      .title-section {
+        display: flex;
+        align-items: center;
+        gap: 18rpx;
+
+        .title-line {
+          width: 6rpx;
+          height: 32rpx;
+          background: #ff5365;
+        }
+
+        .title-text {
+          font-weight: 600;
+          font-size: 32rpx;
+          color: #333333;
+          line-height: 32rpx;
+        }
+      }
+
+      .total-income {
+        display: flex;
+        align-items: baseline;
+        gap: 8rpx;
+
+        .total-label {
+          font-weight: 400;
+          font-size: 26rpx;
+          color: #2c2c2c;
+          line-height: 26rpx;
+        }
+
+        .total-symbol {
+          font-weight: 600;
+          font-size: 26rpx;
+          color: #ff5365;
+          line-height: 26rpx;
+        }
+
+        .total-amount {
+          font-weight: 600;
+          font-size: 40rpx;
+          color: #ff5365;
+          line-height: 40rpx;
+        }
+      }
+    }
+
+    .header-divider {
+      width: 100%;
+      height: 1rpx;
+      background: #eaeaea;
+      margin-top: 32rpx;
+      margin-bottom: 32rpx;
+    }
+
+    .records-list {
+      .record-item {
+        padding: 0;
+
+        .info-row {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 30rpx;
+          align-items: center;
+          height: 30rpx;
+          line-height: 30rpx;
+
+          .info-label {
+            font-weight: 400;
+            font-size: 30rpx;
+            color: #666666;
+            line-height: 30rpx;
+          }
+
+          .info-value {
+            font-weight: 400;
+            font-size: 30rpx;
+            color: #333333;
+            line-height: 30rpx;
+
+            &.highlight {
+              color: #ff5365;
+            }
+          }
+          .income-person {
+            display: flex;
+            align-items: center;
+          }
+          .income-phone {
+            margin-right: 12rpx;
+          }
+        }
+
+        .record-divider {
+          width: 100%;
+          height: 1rpx;
+          background: #eaeaea;
+          margin-top: 32rpx;
+          margin-bottom: 32rpx;
+        }
+      }
+    }
+    .record-item:last-child {
+      .info-row:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+</style>

src/pages-C/income/writeOff.vue → src/pages-C/income/list/writeOff.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import { getImageUrl } from "@/utils/imageUtil";
 
 definePage({
   style: {
@@ -69,6 +70,19 @@ const writeOffList = ref([
             </view>
             <view class="info-row">
               <text class="info-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="info-row">
+              <text class="info-label">联系方式</text>
+              <text class="info-value">{{ item.user }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">核销类型</text>
               <text class="info-value">{{ item.user }}</text>
             </view>
             <view class="info-row">
@@ -81,7 +95,7 @@ const writeOffList = ref([
             </view>
             <view class="info-row">
               <text class="info-label">实付金额</text>
-              <text class="info-value highlight">¥{{ item.payAmount }}</text>
+              <text class="info-value">¥{{ item.payAmount }}</text>
             </view>
             <view class="info-row">
               <text class="info-label">获得佣金</text>
@@ -178,6 +192,9 @@ const writeOffList = ref([
           display: flex;
           justify-content: space-between;
           margin-bottom: 30rpx;
+          align-items: center;
+          height: 30rpx;
+          line-height: 30rpx;
 
           .info-label {
             font-weight: 400;
@@ -196,6 +213,13 @@ const writeOffList = ref([
               color: #ff5365;
             }
           }
+          .income-person {
+            display: flex;
+            align-items: center;
+          }
+          .income-phone {
+            margin-right: 12rpx;
+          }
         }
 
         .record-divider {
@@ -207,6 +231,11 @@ const writeOffList = ref([
         }
       }
     }
+    .record-item:last-child {
+      .info-row:last-child {
+        margin-bottom: 0;
+      }
+    }
   }
 }
 </style>

src/pages-C/my/myCumulativeGroup.vue

@@ -1,318 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-definePage({
-  style: {
-    navigationBarTitleText: "累计团员",
-    navigationStyle: "custom",
-  },
-});
-
-const cumulativeData = ref([
-  {
-    id: 1,
-    type: "领取人",
-    amount: "37.92",
-    userName: "林雨欣",
-    inviteDate: "2026-05-18",
-  },
-  {
-    id: 2,
-    type: "领取人",
-    amount: "45.00",
-    userName: "张三",
-    inviteDate: "2026-05-19",
-  },
-  {
-    id: 3,
-    type: "领取人",
-    amount: "28.50",
-    userName: "李四",
-    inviteDate: "2026-05-20",
-  },
-]);
-
-// 定义tab列表
-const tabList = ref([
-  { label: "全部", value: "0" },
-  { label: "直邀", value: "1" },
-  { label: "间邀", value: "2" },
-]);
-
-// 当前选中的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() {}
-</script>
-
-<template>
-  <view class="income-cumulative-container">
-    <u-navbar title="累计团员" :autoBack="true" :placeholder="true" :border-bottom="false"
-      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor="#000"></u-navbar>
-
-    <view class="invite-content-search">
-      <u-search :showAction="true" actionText="搜索" bgColor="#F7F8FA" v-model="keyword" color='#333' placeholder='搜索用户名称'
-        :actionStyle='{ color: "#FF5365", fontSize: "32rpx" }'></u-search>
-    </view>
-
-    <view class="stats-card">
-      <view class="stat-item">
-        <text class="stat-label">团员总数</text>
-        <text class="stat-value">24</text>
-      </view>
-      <view class="stat-divider"></view>
-      <view class="stat-item">
-        <text class="stat-label">直邀人数</text>
-        <text class="stat-value">24</text>
-      </view>
-      <view class="stat-divider"></view>
-      <view class="stat-item">
-        <text class="stat-label">间邀人数</text>
-        <text class="stat-value">24</text>
-      </view>
-    </view>
-
-    <view class="filter-bar">
-      <view class="filter-tabs">
-        <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
-          :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
-          <text class="tab-text">{{ item.label }}</text>
-        </view>
-      </view>
-    </view>
-
-    <view class="cumulative-content">
-      <view class="cumulative-list">
-        <view class="cumulative-item" v-for="item in cumulativeData" :key="item.id">
-          <view class="item-header">
-            <text class="item-type">{{ item.type }}</text>
-            <view class='item-type-name blue'>直接邀请</view>
-            <view class='item-type-name purple'>间接邀请</view>
-            <view class='item-type-name green'>二级团员</view>
-          </view>
-          <view class="divider"></view>
-          <view class="item-info">
-            <view class="info-row">
-              <text class="info-label">邀请日期</text>
-              <text class="info-value">{{ item.inviteDate }}</text>
-            </view>
-          </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;
-  }
-
-  .stats-card {
-    width: 100%;
-    height: 150rpx;
-    background: #ffffff;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    padding: 0 40rpx;
-    box-sizing: border-box;
-
-    border-top: 1rpx solid #eaeaea;
-    border-bottom: 1rpx solid #eaeaea;
-    .stat-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 8rpx;
-
-      .stat-label {
-        font-weight: 400;
-        font-size: 24rpx;
-        color: #86909c;
-        line-height: 1;
-      }
-
-      .stat-value {
-        font-family: Roboto;
-        font-weight: 600;
-        font-size: 36rpx;
-        color: #333333;
-        line-height: 1.1;
-      }
-    }
-
-    .stat-divider {
-      width: 2rpx;
-      height: 30rpx;
-      background: #d9d9d9;
-    }
-  }
-
-  .filter-bar {
-    width: 100%;
-    height: 92rpx;
-    background: #ffffff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 32rpx;
-    box-sizing: border-box;
-
-    .filter-tabs {
-      display: flex;
-      gap: 24rpx;
-
-      .filter-tab {
-        padding: 4rpx 30rpx;
-        border-radius: 32rpx;
-        background: #f7f8fa;
-        display: flex;
-        height: 44rpx;
-        line-height: 44rpx;
-
-        &.active {
-          background: #ff5365;
-
-          .tab-text {
-            color: #ffffff;
-          }
-        }
-
-        .tab-text {
-          font-weight: 400;
-          font-size: 26rpx;
-          color: #333333;
-        }
-      }
-    }
-  }
-
-  .cumulative-content {
-    width: 100%;
-    padding: 32rpx;
-    box-sizing: border-box;
-  }
-
-  .cumulative-list {
-    display: flex;
-    flex-direction: column;
-    gap: 32rpx;
-  }
-
-  .cumulative-item {
-    background: #ffffff;
-    border-radius: 32rpx;
-    padding: 46rpx 32rpx;
-
-    .item-header {
-      display: flex;
-      align-items: center;
-      margin-bottom: 32rpx;
-
-      .item-type {
-        font-weight: 600;
-        font-size: 32rpx;
-        color: #2c2c2c;
-        line-height: 1;
-      }
-
-      .item-type-name {
-        padding: 6rpx 16rpx;
-
-        font-size: 24rpx;
-        border-radius: 4rpx;
-        margin-left: 14rpx;
-      }
-      .blue {
-        background: #e8f3ff;
-        color: #165dff;
-      }
-      .purple {
-        color: #722ed1;
-        background: #e8f3ff;
-      }
-      .green {
-        color: #00b42a;
-        background: #e8ffea;
-      }
-
-      .item-amount {
-        display: flex;
-        align-items: baseline;
-        gap: 8rpx;
-
-        .amount-plus {
-          font-size: 26rpx;
-          color: #2c2c2c;
-          line-height: 1;
-        }
-
-        .amount-value {
-          font-weight: 600;
-          font-size: 42rpx;
-          color: #ff5365;
-          line-height: 1;
-        }
-      }
-
-      .total-unit {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ff5365;
-      }
-    }
-
-    .divider {
-      width: 622rpx;
-      height: 2rpx;
-      background: #eaeaea;
-      margin-bottom: 32rpx;
-    }
-
-    .item-info {
-      display: flex;
-      flex-direction: column;
-      gap: 32rpx;
-
-      .info-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .info-label {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #86909c;
-          line-height: 1;
-        }
-
-        .info-value {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #333333;
-          line-height: 1;
-        }
-      }
-    }
-  }
-}
-</style>

src/pages-C/my/myCumulativeInvitation.vue

@@ -1,258 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-definePage({
-  style: {
-    navigationBarTitleText: "累计邀请",
-    navigationStyle: "custom",
-  },
-});
-
-const cumulativeData = ref([
-  {
-    id: 1,
-    type: "领取人",
-    amount: "37.92",
-    userName: "林雨欣",
-    inviteDate: "2026-05-18",
-  },
-  {
-    id: 2,
-    type: "领取人",
-    amount: "45.00",
-    userName: "张三",
-    inviteDate: "2026-05-19",
-  },
-  {
-    id: 3,
-    type: "领取人",
-    amount: "28.50",
-    userName: "李四",
-    inviteDate: "2026-05-20",
-  },
-]);
-
-// 定义tab列表
-const tabList = ref([
-  { label: "今天", value: "0" },
-  { label: "近7天", value: "1" },
-  { label: "近30天", value: "2" },
-]);
-
-// 当前选中的tab
-const currentTab = ref("0");
-
-// 点击tab事件
-const handleTabClick = (value) => {
-  currentTab.value = value;
-  console.log("选中tab:", value);
-};
-</script>
-
-<template>
-  <view class="income-cumulative-container">
-    <u-navbar title="累计邀请" :autoBack="true" :placeholder="true" :border-bottom="false"
-      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor="#000"></u-navbar>
-
-    <view class="filter-bar">
-      <view class="filter-tabs">
-        <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
-          :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
-          <text class="tab-text">{{ item.label }}</text>
-        </view>
-      </view>
-      <view class="total-amount">
-        <text class="total-label">合计</text>
-        <text class="total-value">340</text>
-        <text class="total-unit">元</text>
-      </view>
-    </view>
-
-    <view class="cumulative-content">
-      <view class="cumulative-list">
-        <view class="cumulative-item" v-for="item in cumulativeData" :key="item.id">
-          <view class="item-header">
-            <text class="item-type">{{ item.type }}</text>
-            <view class='item-type-name'>直接邀请</view>
-          </view>
-          <view class="divider"></view>
-          <view class="item-info">
-            <view class="info-row">
-              <text class="info-label">用户名称</text>
-              <text class="info-value">{{ item.userName }}</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">邀请日期</text>
-              <text class="info-value">{{ item.inviteDate }}</text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.income-cumulative-container {
-  min-height: 100vh;
-  background: #f8f8fa;
-
-  .filter-bar {
-    width: 100%;
-    height: 92rpx;
-    background: #ffffff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 32rpx;
-    box-sizing: border-box;
-
-    .filter-tabs {
-      display: flex;
-      gap: 24rpx;
-
-      .filter-tab {
-        padding: 4rpx 30rpx;
-        border-radius: 32rpx;
-        background: #f7f8fa;
-        display: flex;
-        height: 44rpx;
-        line-height: 44rpx;
-        &.active {
-          background: #ff5365;
-
-          .tab-text {
-            color: #ffffff;
-          }
-        }
-
-        .tab-text {
-          font-weight: 400;
-          font-size: 26rpx;
-          color: #333333;
-        }
-      }
-    }
-
-    .total-amount {
-      display: flex;
-      align-items: baseline;
-      gap: 8rpx;
-
-      .total-label {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #2c2c2c;
-      }
-
-      .total-value {
-        font-weight: 600;
-        font-size: 42rpx;
-        color: #ff5365;
-      }
-
-      .total-unit {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ff5365;
-      }
-    }
-  }
-
-  .cumulative-content {
-    width: 100%;
-    padding: 32rpx;
-    box-sizing: border-box;
-  }
-
-  .cumulative-list {
-    display: flex;
-    flex-direction: column;
-    gap: 32rpx;
-  }
-
-  .cumulative-item {
-    background: #ffffff;
-    border-radius: 32rpx;
-    padding: 46rpx 32rpx;
-
-    .item-header {
-      display: flex;
-      align-items: center;
-      margin-bottom: 32rpx;
-
-      .item-type {
-        font-weight: 600;
-        font-size: 32rpx;
-        color: #2c2c2c;
-        line-height: 1;
-      }
-      .item-type-name {
-        padding: 6rpx 16rpx;
-        background: #e8f3ff;
-        color: #165dff;
-        font-size: 24rpx;
-        border-radius: 4rpx;
-        margin-left: 14rpx;
-      }
-
-      .item-amount {
-        display: flex;
-        align-items: baseline;
-        gap: 8rpx;
-
-        .amount-plus {
-          font-size: 26rpx;
-          color: #2c2c2c;
-          line-height: 1;
-        }
-
-        .amount-value {
-          font-weight: 600;
-          font-size: 42rpx;
-          color: #ff5365;
-          line-height: 1;
-        }
-      }
-      .total-unit {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ff5365;
-      }
-    }
-
-    .divider {
-      width: 622rpx;
-      height: 2rpx;
-      background: #eaeaea;
-      margin-bottom: 32rpx;
-    }
-
-    .item-info {
-      display: flex;
-      flex-direction: column;
-      gap: 32rpx;
-
-      .info-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .info-label {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #86909c;
-          line-height: 1;
-        }
-
-        .info-value {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #333333;
-          line-height: 1;
-        }
-      }
-    }
-  }
-}
-</style>

src/pages-C/my/myGroup.vue

@@ -0,0 +1,491 @@
+
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { getImageUrl } from "@/utils/imageUtil";
+definePage({
+  style: {
+    navigationBarTitleText: "团队收益",
+    navigationStyle: "custom",
+  },
+});
+
+const activePanel = ref("list");
+const activePeriod = ref("today");
+const activeTabs = ref("all");
+
+const periodTabs = [
+  { label: "今天", value: "today" },
+  { label: "近30天", value: "month" },
+];
+
+const incomeFilterTabs = [
+  { label: "全部", value: "all" },
+  { label: "一级收益", value: "level1" },
+  { label: "二级收益", value: "level2" },
+];
+
+const listSummary = [
+  { label: "团员总数(人)", value: "24" },
+  { label: "一级团员(人)", value: "24" },
+  { label: "二级团员(人)", value: "24" },
+];
+
+const incomeSummary = [
+  { label: "累计收益(元)", value: "185" },
+  { label: "一级总收益(元)", value: "13" },
+  { label: "二级总收益(元)", value: "49" },
+];
+
+const memberList = [
+  {
+    id: 1,
+    name: "吴枕书",
+    level: "二级团员",
+    orders: "5单 | 创收27.84元",
+    phone: "15721118536",
+    date: "2026-05-18 19:00:00",
+  },
+  {
+    id: 2,
+    name: "吴枕书",
+    level: "二级团员",
+    orders: "5单 | 创收27.84元",
+    phone: "15721118536",
+    date: "2026-05-18 19:00:00",
+  },
+  {
+    id: 3,
+    name: "吴枕书",
+    level: "二级团员",
+    orders: "5单 | 创收27.84元",
+    phone: "15721118536",
+    date: "2026-05-18 19:00:00",
+  },
+];
+
+const summaryItems = computed(() =>
+  activePanel.value === "list" ? listSummary : incomeSummary
+);
+
+const showPicker = ref(false);
+const defaultStart = "";
+const defaultEnd = "";
+
+const handleConfirm = (value: { startDate: string; endDate: string }) => {
+  console.log("选中的日期范围：", value);
+  // 处理业务逻辑
+};
+
+const handleCancel = () => {
+  console.log("取消选择");
+};
+
+function goDetails(item) {
+  uni.navigateTo({
+    url: `/pages-C/my/myGroupDetails`,
+  });
+}
+</script>
+
+<template>
+  <view class='group-info-container'>
+    <u-navbar title="团队收益" :autoBack="true" :placeholder="true" :border-bottom="false"
+      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor='#000'></u-navbar>
+    <view class="team-income-page">
+
+      <view class="panel-tabs">
+        <view class="panel-tab" @tap="activePanel = 'list'">
+          <text :class="{ active: activePanel === 'list' }">团队列表</text>
+          <view v-if="activePanel === 'list'" class="tab-underline" />
+        </view>
+        <view class="panel-divider" />
+        <view class="panel-tab" @tap="activePanel = 'income'">
+          <text :class="{ active: activePanel === 'income' }">团队收益</text>
+          <view v-if="activePanel === 'income'" class="tab-underline" />
+        </view>
+      </view>
+
+      <view class="filter-box">
+        <view v-if="activePanel === 'list'" class="list-filter">
+          <view class="period-tabs">
+            <view v-for="item in periodTabs" :key="item.value" class="period-tab"
+              :class="{ active: activePeriod === item.value }" @tap="activePeriod = item.value">
+              <text>{{ item.label }}</text>
+            </view>
+          </view>
+          <view class="filter-divider" />
+          <view class="date-filter" @click='showPicker=true'>
+            <text>日期筛选</text>
+            <view class="caret" />
+          </view>
+        </view>
+
+        <view v-else class="income-filter">
+          <view v-for="item in incomeFilterTabs" :key="item.value" class="period-tab"
+            :class="{ active: activeTabs==item.value  }" @tap="activeTabs = item.value">
+            <text>{{ item.label }}</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="summary-section" :class="activePanel === 'list' ? 'list-summary' : 'income-summary'">
+        <view v-for="(item, index) in summaryItems" :key="item.label" class="summary-item">
+          <text class="summary-label">{{ item.label }}</text>
+          <text class="summary-value">{{ item.value }}</text>
+          <view v-if="index < summaryItems.length - 1" class="summary-divider" />
+        </view>
+      </view>
+
+      <view class="member-list">
+        <view v-for="item in memberList" :key="item.id" class="member-card" @click='goDetails'>
+          <view class="member-header">
+            <text class="member-name">{{ item.name }}</text>
+            <view class="level-tag">
+              <text>{{ item.level }}</text>
+            </view>
+          </view>
+          <view class="card-line" />
+          <view class="info-list">
+            <view class="info-row">
+              <text class="info-label">完成单数</text>
+              <text class="info-value income">{{ item.orders }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">联系方式</text>
+              <text class="info-value">{{ item.phone }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">邀请日期</text>
+              <text class="info-value">{{ item.date }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 日期 -->
+  <DateRangePicker v-model:show="showPicker" :startDate="defaultStart" :endDate="defaultEnd" @confirm="handleConfirm"
+    @cancel="handleCancel" />
+</template>
+
+<style lang="scss" scoped>
+.group-info-container {
+  min-height: 100vh;
+  background: #f8f8fa;
+}
+
+.team-income-page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  color: #1d2129;
+
+  // 顶部切换 tabs
+  .panel-tabs {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    height: 66rpx;
+    background: #ffffff;
+    flex: 0 0 auto;
+
+    .panel-tab {
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      width: 50%;
+      padding-top: 8rpx;
+
+      text {
+        color: #1d2129;
+        font-size: 30rpx;
+        font-weight: 400;
+        line-height: 30rpx;
+
+        &.active {
+          color: #ff5365;
+          font-size: 32rpx;
+          font-weight: 700;
+          line-height: 32rpx;
+        }
+      }
+
+      .tab-underline {
+        position: absolute;
+        left: 50%;
+        bottom: 0;
+        width: 126rpx;
+        height: 6rpx;
+        background: #ff5365;
+        transform: translateX(-50%);
+      }
+    }
+
+    .panel-divider {
+      position: absolute;
+      top: 16rpx;
+      left: 50%;
+      width: 1rpx;
+      height: 34rpx;
+      background: #d9d9d9;
+    }
+  }
+
+  // 筛选区域
+  .filter-box {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 92rpx;
+    padding: 0 32rpx;
+    background: #ffffff;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    border-bottom: 1rpx solid #d9d9d9;
+    .list-filter,
+    .income-filter {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .period-tabs,
+    .income-filter {
+      display: flex;
+      align-items: center;
+      gap: 24rpx;
+    }
+
+    .period-tab {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 76rpx;
+      height: 44rpx;
+      padding: 4rpx 30rpx;
+      border-radius: 999rpx;
+      background: #f7f8fa;
+      color: #333333;
+      font-size: 26rpx;
+      line-height: 36rpx;
+      box-sizing: border-box;
+      white-space: nowrap;
+
+      &.active {
+        background: #ff5365;
+        color: #ffffff;
+      }
+    }
+
+    .filter-divider {
+      width: 1rpx;
+      height: 40rpx;
+      margin: 0 39rpx 0 30rpx;
+      background: #d9d9d9;
+      flex: 0 0 auto;
+    }
+    .caret {
+      width: 0;
+      height: 0;
+      margin-left: 8rpx;
+      border-left: 7rpx solid transparent;
+      border-right: 7rpx solid transparent;
+      border-top: 9rpx solid #333333;
+    }
+
+    .date-filter {
+      display: flex;
+      align-items: center;
+      color: #333333;
+      font-size: 28rpx;
+      line-height: 28rpx;
+      white-space: nowrap;
+    }
+  }
+
+  // 统计卡片区域
+  .summary-section {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 150rpx;
+    padding: 0 40rpx;
+    background: #ffffff;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+
+    .summary-item {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      min-width: 0;
+      flex: 0 0 auto;
+
+      .summary-label {
+        color: #86909c;
+        font-size: 24rpx;
+        line-height: 24rpx;
+        white-space: nowrap;
+      }
+
+      .summary-value {
+        margin-top: 8rpx;
+        color: #333333;
+        font-family: Roboto, Arial, sans-serif;
+        font-size: 36rpx;
+        font-weight: 700;
+        line-height: 40rpx;
+        white-space: nowrap;
+      }
+
+      .summary-divider {
+        position: absolute;
+        top: 20rpx;
+        right: 0;
+        width: 1rpx;
+        height: 30rpx;
+        background: #d9d9d9;
+      }
+    }
+
+    // 团队列表模式下的统计项宽度
+    &.list-summary {
+      .summary-item {
+        &:nth-child(1) {
+          width: 210rpx;
+        }
+
+        &:nth-child(2) {
+          width: 200rpx;
+          margin-left: 51rpx;
+        }
+
+        &:nth-child(3) {
+          width: 136rpx;
+          margin-left: 51rpx;
+        }
+      }
+    }
+
+    // 团队收益模式下的统计项宽度
+    &.income-summary {
+      .summary-item {
+        &:nth-child(1),
+        &:nth-child(2) {
+          width: 210rpx;
+        }
+
+        &:nth-child(2),
+        &:nth-child(3) {
+          margin-left: 41rpx;
+        }
+
+        &:nth-child(3) {
+          width: 160rpx;
+        }
+      }
+    }
+  }
+
+  // 成员列表
+  .member-list {
+    display: flex;
+    flex: 1 0 auto;
+    flex-direction: column;
+    gap: 32rpx;
+    width: 100%;
+    padding: 32rpx 32rpx 21rpx;
+    box-sizing: border-box;
+
+    .member-card {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      min-height: 311rpx;
+      padding: 32rpx;
+      border-radius: 32rpx;
+      background: #ffffff;
+      box-sizing: border-box;
+
+      .member-header {
+        display: flex;
+        align-items: center;
+        gap: 14rpx;
+
+        .member-name {
+          color: #2c2c2c;
+          font-size: 32rpx;
+          font-weight: 700;
+          line-height: 32rpx;
+          white-space: nowrap;
+        }
+
+        .level-tag {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 40rpx;
+          padding: 0 16rpx;
+          border-radius: 2rpx;
+          background: #e8f7ff;
+          box-sizing: border-box;
+
+          text {
+            color: #3491fa;
+            font-size: 24rpx;
+            font-weight: 500;
+            line-height: 40rpx;
+            white-space: nowrap;
+          }
+        }
+      }
+
+      .card-line {
+        width: 100%;
+        height: 1rpx;
+        margin-top: 24rpx;
+        background: #eaeaea;
+      }
+
+      .info-list {
+        display: flex;
+        flex-direction: column;
+        gap: 30rpx;
+        margin-top: 31rpx;
+
+        .info-row {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          min-height: 30rpx;
+
+          .info-label {
+            color: #86909c;
+            font-size: 30rpx;
+            line-height: 30rpx;
+            white-space: nowrap;
+          }
+
+          .info-value {
+            color: #333333;
+            font-size: 30rpx;
+            line-height: 30rpx;
+            text-align: right;
+            white-space: nowrap;
+
+            &.income {
+              color: #ff5365;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages-C/my/myGroupDetails.vue

@@ -0,0 +1,337 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { safeAreaInsets, menuButtonInfo } from "@/utils";
+import CustomNavigationBar from "@/components/CustomNavigationBar.vue";
+import { getImageUrl } from "@/utils/imageUtil";
+
+definePage({
+  style: {
+    navigationBarTitleText: "团员累计收益",
+    navigationStyle: "custom",
+  },
+});
+
+const totalIncome = ref("38.00");
+
+const shareList = ref([
+  {
+    id: 1,
+    couponName: "某某某某某优惠券",
+    income: "2.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "林雨欣",
+  },
+  {
+    id: 2,
+    couponName: "某某某某某优惠券",
+    income: "17.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "吴雨桐",
+  },
+  {
+    id: 3,
+    couponName: "某某某某某优惠券",
+    income: "18.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "周昭宁",
+  },
+  {
+    id: 4,
+    couponName: "某某某某某优惠券",
+    income: "8.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "周宇轩",
+  },
+]);
+
+function handleViewDetail(item) {
+  uni.showToast({
+    title: `查看 ${item.couponName} 详情`,
+    icon: "none",
+  });
+}
+</script>
+
+<template>
+  <view class="share-info-container">
+    <u-navbar title="团员累计收益" :autoBack="true" :placeholder="true" :border-bottom="false"
+      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor='#000'></u-navbar>
+
+    <view class="share-info-content">
+      <view class="income-card" :style="{
+                    backgroundImage: `url(${getImageUrl('@img/me/share-bg.png')})`,
+                    backgroundSize: 'cover',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'center'
+                }">
+        <text class="income-label">累计总收益(元)</text>
+        <text class="income-amount">3859.00</text>
+      </view>
+
+      <view class="share-card">
+        <view class="card-header">
+          <view class="title-section">
+            <view class="title-line"></view>
+            <text class="title-text">核销奖励</text>
+          </view>
+          <view class="total-income">
+            <text class="total-label">总收益</text>
+            <view>
+              <text class="total-symbol">¥</text>
+              <text class="total-amount">{{ totalIncome }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="records-list">
+          <view v-for="(item, index) in shareList" :key="item.id" class="record-item">
+
+            <view class="record-bottom">
+              <view class="info-row">
+                <text class="info-label">团员层级</text>
+                <text class="info-value">¥{{ item.income }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">优惠券名称</text>
+                <text class="info-value">{{ item.receiver }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">核销时间</text>
+                <text class="info-value">{{ item.receiver }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-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="info-row">
+                <text class="info-label">团员联系方式</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-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="info-row">
+                <text class="info-label">用户联系方式</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">核销类型</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">商品名称</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">核销商家</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">实付金额</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">获得佣金</text>
+                <text class="income-value">{{ item.receiveTime }}</text>
+              </view>
+            </view>
+
+            <view v-if="index < shareList.length - 1" class="record-divider"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 日期 -->
+    <DateRangePicker v-model:show="showPicker" :startDate="defaultStart" :endDate="defaultEnd" @confirm="handleConfirm"
+      @cancel="handleCancel" />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.share-info-container {
+  min-height: 100vh;
+  background: #f8f8fa;
+
+  .share-info-content {
+    margin: 32rpx;
+    box-sizing: border-box;
+    overflow: auto;
+  }
+
+  .income-card {
+    border-radius: 32rpx;
+    padding: 40rpx;
+
+    .income-label {
+      font-weight: 400;
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.8);
+      line-height: 26rpx;
+      display: block;
+      margin-bottom: 16rpx;
+    }
+
+    .income-amount {
+      font-weight: 700;
+      font-size: 56rpx;
+      color: #ffffff;
+      line-height: 56rpx;
+    }
+  }
+
+  .share-card {
+    background: #ffffff;
+    border-radius: 32rpx;
+    padding: 32rpx 32rpx 0 32rpx;
+    margin: 32rpx 0;
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding-bottom: 32rpx;
+      border-bottom: 1rpx solid #eaeaea;
+
+      .title-section {
+        display: flex;
+        align-items: center;
+        gap: 18rpx;
+
+        .title-line {
+          width: 6rpx;
+          height: 32rpx;
+          background: #ff5365;
+        }
+
+        .title-text {
+          font-weight: 600;
+          font-size: 32rpx;
+          color: #333333;
+          line-height: 32rpx;
+        }
+      }
+
+      .total-income {
+        display: flex;
+        align-items: baseline;
+        gap: 4rpx;
+
+        .total-label {
+          font-weight: 400;
+          font-size: 26rpx;
+          color: #2c2c2c;
+          line-height: 26rpx;
+          margin-right: 4rpx;
+        }
+
+        .total-symbol {
+          font-weight: 600;
+          font-size: 26rpx;
+          color: #ff5365;
+          line-height: 26rpx;
+        }
+
+        .total-amount {
+          font-weight: 600;
+          font-size: 40rpx;
+          color: #ff5365;
+          line-height: 40rpx;
+        }
+      }
+    }
+
+    .records-list {
+      .record-item {
+        padding: 32rpx 0;
+
+        .record-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 40rpx;
+
+          .coupon-name {
+            font-weight: 500;
+            font-size: 28rpx;
+            color: #2c2c2c;
+            line-height: 28rpx;
+          }
+
+          .income-amount {
+            display: flex;
+            align-items: center;
+            gap: 12rpx;
+
+            .income-label {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #333333;
+              line-height: 30rpx;
+            }
+          }
+        }
+
+        .record-bottom {
+          .info-row {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 30rpx;
+            align-items: center;
+            height: 30rpx;
+            line-height: 30rpx;
+
+            .info-label {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #86909c;
+            }
+
+            .info-value {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #333333;
+            }
+            .income-value {
+              font-weight: 500;
+              font-size: 30rpx;
+              color: #ff5365;
+            }
+            .income-person {
+              display: flex;
+              align-items: center;
+            }
+            .income-phone {
+              margin-right: 12rpx;
+            }
+          }
+        }
+
+        .record-divider {
+          width: 100%;
+          height: 1rpx;
+          background: #eaeaea;
+          margin-top: 32rpx;
+        }
+      }
+
+      .record-item:last-child {
+        .info-row:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages-C/my/myNewUsers.vue

@@ -0,0 +1,415 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { safeAreaInsets, menuButtonInfo } from "@/utils";
+import CustomNavigationBar from "@/components/CustomNavigationBar.vue";
+import { getImageUrl } from "@/utils/imageUtil";
+
+definePage({
+  style: {
+    navigationBarTitleText: "邀新收益",
+    navigationStyle: "custom",
+  },
+});
+
+const totalIncome = ref("38.00");
+
+const shareList = ref([
+  {
+    id: 1,
+    couponName: "某某某某某优惠券",
+    income: "2.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "林雨欣",
+  },
+  {
+    id: 2,
+    couponName: "某某某某某优惠券",
+    income: "17.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "吴雨桐",
+  },
+  {
+    id: 3,
+    couponName: "某某某某某优惠券",
+    income: "18.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "周昭宁",
+  },
+  {
+    id: 4,
+    couponName: "某某某某某优惠券",
+    income: "8.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "周宇轩",
+  },
+]);
+
+function handleViewDetail(item) {
+  uni.showToast({
+    title: `查看 ${item.couponName} 详情`,
+    icon: "none",
+  });
+}
+
+// 定义tab列表
+const tabList = ref([
+  { label: "今天", value: "0" },
+  { label: "近30天", value: "1" },
+]);
+// 当前选中的tab
+const currentTab = ref("0");
+
+// 点击tab事件
+const handleTabClick = (value) => {
+  currentTab.value = value;
+  console.log("选中tab:", value);
+};
+
+const showPicker = ref(false);
+const defaultStart = "";
+const defaultEnd = "";
+
+const handleConfirm = (value: { startDate: string; endDate: string }) => {
+  console.log("选中的日期范围：", value);
+  // 处理业务逻辑
+};
+
+const handleCancel = () => {
+  console.log("取消选择");
+};
+
+function goDetails(item) {
+  uni.navigateTo({
+    url: `/pages-C/my/myNewUsersDetails`,
+  });
+}
+</script>
+
+<template>
+  <view class="share-info-container">
+    <u-navbar title="邀新收益" :autoBack="true" :placeholder="true" :border-bottom="false"
+      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor='#000'></u-navbar>
+
+    <view class="share-info-content">
+      <view class="income-card" :style="{
+                    backgroundImage: `url(${getImageUrl('@img/me/share-bg.png')})`,
+                    backgroundSize: 'cover',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'center'
+                }">
+        <text class="income-label">邀新累计收益(元)</text>
+        <text class="income-amount">3859.00</text>
+      </view>
+
+      <view class="filter-box">
+        <view class="filter-bar">
+          <view class="filter-tabs">
+            <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
+              :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
+              <text class="tab-text">{{ item.label }}</text>
+            </view>
+          </view>
+        </view>
+        <view class="income-line"></view>
+        <view class='income-select'>
+          <view class='income-time' @click='showPicker=true'>
+            <!-- <view class='income-time-name'>2026 05.10-2026 05.12 </view> -->
+            <view class='income-time-name'>日期筛选 </view>
+            <view class="caret" />
+          </view>
+        </view>
+      </view>
+      <view class="share-card">
+        <view class="card-header">
+          <view class="title-section">
+            <text class="title-text">邀请新人</text>
+          </view>
+          <view class="total-income">
+            <text class="total-label">总收益</text>
+            <view>
+              <!-- <text class="total-symbol">¥</text> -->
+              <text class="total-amount">{{ totalIncome }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="records-list">
+          <view v-for="(item, index) in shareList" :key="item.id" class="record-item">
+            <view class="record-bottom" @click='goDetails'>
+              <view class="info-row">
+                <text class="info-label">获得佣金</text>
+                <text class="income-value">¥{{ item.income }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">邀请人数</text>
+                <text class="info-value">{{ item.receiver }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">邀请日期</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+            </view>
+
+            <view v-if="index < shareList.length - 1" class="record-divider"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 日期 -->
+    <DateRangePicker v-model:show="showPicker" :startDate="defaultStart" :endDate="defaultEnd" @confirm="handleConfirm"
+      @cancel="handleCancel" />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.share-info-container {
+  min-height: 100vh;
+  background: #f8f8fa;
+
+  .share-info-content {
+    overflow: auto;
+    box-sizing: border-box;
+    padding: 32rpx 0;
+  }
+
+  .income-card {
+    border-radius: 32rpx;
+    padding: 40rpx;
+    margin: 0 32rpx;
+
+    .income-label {
+      font-weight: 400;
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.8);
+      line-height: 26rpx;
+      display: block;
+      margin-bottom: 16rpx;
+    }
+
+    .income-amount {
+      font-weight: 700;
+      font-size: 56rpx;
+      color: #ffffff;
+      line-height: 56rpx;
+    }
+  }
+  .filter-box {
+    display: flex;
+    width: 100%;
+    height: 92rpx;
+    background: #ffffff;
+    margin: 32rpx 0;
+    padding: 0 32rpx;
+    box-sizing: border-box;
+    align-items: center;
+    .filter-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .filter-tabs {
+        display: flex;
+        gap: 24rpx;
+
+        .filter-tab {
+          padding: 0 30rpx;
+          border-radius: 999rpx;
+          background: #f7f8fa;
+          display: flex;
+          height: 44rpx;
+          line-height: 44rpx;
+
+          &.active {
+            background: #ff5365;
+
+            .tab-text {
+              color: #ffffff;
+            }
+          }
+
+          .tab-text {
+            font-weight: 400;
+            font-size: 26rpx;
+            color: #333333;
+          }
+        }
+      }
+    }
+    .income-line {
+      width: 1rpx;
+      height: 40rpx;
+      background: #d9d9d9;
+      margin: 0 39rpx 0 30rpx;
+    }
+
+    .income-select {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .income-time-name {
+        font-size: 28rpx;
+        color: #333;
+      }
+      .income-time {
+        display: flex;
+        align-items: center;
+        color: #333333;
+        font-size: 28rpx;
+        line-height: 28rpx;
+        white-space: nowrap;
+      }
+      .caret {
+        width: 0;
+        height: 0;
+        margin-left: 8rpx;
+        border-left: 7rpx solid transparent;
+        border-right: 7rpx solid transparent;
+        border-top: 9rpx solid #333333;
+      }
+    }
+  }
+
+  .share-card {
+    background: #ffffff;
+    border-radius: 32rpx;
+    padding: 32rpx 32rpx 0 32rpx;
+    margin: 0 32rpx;
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding-bottom: 32rpx;
+      border-bottom: 1rpx solid #eaeaea;
+
+      .title-section {
+        display: flex;
+        align-items: center;
+        gap: 18rpx;
+
+        .title-line {
+          width: 6rpx;
+          height: 32rpx;
+          background: #ff5365;
+        }
+
+        .title-text {
+          font-weight: 600;
+          font-size: 32rpx;
+          color: #333333;
+          line-height: 32rpx;
+        }
+      }
+
+      .total-income {
+        display: flex;
+        align-items: baseline;
+        gap: 4rpx;
+
+        .total-label {
+          font-weight: 400;
+          font-size: 26rpx;
+          color: #2c2c2c;
+          line-height: 26rpx;
+          margin-right: 4rpx;
+        }
+
+        .total-symbol {
+          font-weight: 600;
+          font-size: 26rpx;
+          color: #ff5365;
+          line-height: 26rpx;
+        }
+
+        .total-amount {
+          font-weight: 600;
+          font-size: 40rpx;
+          color: #ff5365;
+          line-height: 40rpx;
+        }
+      }
+    }
+
+    .records-list {
+      .record-item {
+        padding: 32rpx 0;
+
+        .record-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 40rpx;
+
+          .coupon-name {
+            font-weight: 500;
+            font-size: 28rpx;
+            color: #2c2c2c;
+            line-height: 28rpx;
+          }
+
+          .income-amount {
+            display: flex;
+            align-items: center;
+            gap: 12rpx;
+
+            .income-label {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #333333;
+              line-height: 30rpx;
+            }
+          }
+        }
+
+        .record-bottom {
+          .info-row {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 30rpx;
+            align-items: center;
+            height: 30rpx;
+            line-height: 30rpx;
+
+            .info-label {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #86909c;
+            }
+
+            .info-value {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #333333;
+            }
+            .income-value {
+              font-weight: 500;
+              font-size: 30rpx;
+              color: #ff5365;
+            }
+            .income-person {
+              display: flex;
+              align-items: center;
+            }
+            .income-phone {
+              margin-right: 12rpx;
+            }
+          }
+        }
+
+        .record-divider {
+          width: 100%;
+          height: 1rpx;
+          background: #eaeaea;
+          margin-top: 32rpx;
+        }
+      }
+      .record-item:last-child {
+        .info-row:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages-C/my/myNewUsersDetails.vue

@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { safeAreaInsets, menuButtonInfo } from "@/utils";
+import CustomNavigationBar from "@/components/CustomNavigationBar.vue";
+import { getImageUrl } from "@/utils/imageUtil";
+
+definePage({
+  style: {
+    navigationBarTitleText: "邀新收益",
+    navigationStyle: "custom",
+  },
+});
+
+const totalIncome = ref("38.00");
+
+const shareList = ref([
+  {
+    id: 1,
+    couponName: "某某某某某优惠券",
+    income: "2.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "林雨欣",
+  },
+  {
+    id: 2,
+    couponName: "某某某某某优惠券",
+    income: "17.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "吴雨桐",
+  },
+  {
+    id: 3,
+    couponName: "某某某某某优惠券",
+    income: "18.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "周昭宁",
+  },
+  {
+    id: 4,
+    couponName: "某某某某某优惠券",
+    income: "8.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "周宇轩",
+  },
+]);
+
+function handleViewDetail(item) {
+  uni.showToast({
+    title: `查看 ${item.couponName} 详情`,
+    icon: "none",
+  });
+}
+
+// 定义tab列表
+const tabList = ref([
+  { label: "今天", value: "0" },
+  { label: "近30天", value: "1" },
+]);
+// 当前选中的tab
+const currentTab = ref("0");
+
+// 点击tab事件
+const handleTabClick = (value) => {
+  currentTab.value = value;
+  console.log("选中tab:", value);
+};
+
+const showPicker = ref(false);
+const defaultStart = "";
+const defaultEnd = "";
+
+const handleConfirm = (value: { startDate: string; endDate: string }) => {
+  console.log("选中的日期范围：", value);
+  // 处理业务逻辑
+};
+
+const handleCancel = () => {
+  console.log("取消选择");
+};
+</script>
+
+<template>
+  <view class="share-info-container">
+    <u-navbar title="邀新收益" :autoBack="true" :placeholder="true" :border-bottom="false"
+      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor='#000'></u-navbar>
+
+    <view class="share-info-content">
+      <view class="share-card">
+        <view class="card-header">
+          <view class="title-section">
+            <view class="title-line"></view>
+            <text class="title-text">邀请新人</text>
+          </view>
+          <view class="total-income">
+            <text class="total-label">总收益</text>
+            <view>
+              <text class="total-symbol">¥</text>
+              <text class="total-amount">{{ totalIncome }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="records-list">
+          <view v-for="(item, index) in shareList" :key="item.id" class="record-item">
+            <view class="record-bottom">
+              <view class="info-row">
+                <text class="info-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="info-row">
+                <text class="info-label">获得佣金</text>
+                <text class="income-value">¥{{ item.income }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">联系方式</text>
+                <text class="info-value">{{ item.receiver }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">邀请时间</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+            </view>
+
+            <view v-if="index < shareList.length - 1" class="record-divider"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 日期 -->
+    <DateRangePicker v-model:show="showPicker" :startDate="defaultStart" :endDate="defaultEnd" @confirm="handleConfirm"
+      @cancel="handleCancel" />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.share-info-container {
+  min-height: 100vh;
+  background: #f8f8fa;
+
+  .share-info-content {
+    padding: 32rpx 0;
+    box-sizing: border-box;
+  }
+
+  .share-card {
+    background: #ffffff;
+    border-radius: 32rpx;
+    padding: 32rpx 32rpx 0 32rpx;
+    margin: 0 32rpx;
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding-bottom: 32rpx;
+      border-bottom: 1rpx solid #eaeaea;
+
+      .title-section {
+        display: flex;
+        align-items: center;
+        gap: 18rpx;
+
+        .title-line {
+          width: 6rpx;
+          height: 32rpx;
+          background: #ff5365;
+        }
+
+        .title-text {
+          font-weight: 600;
+          font-size: 32rpx;
+          color: #333333;
+          line-height: 32rpx;
+        }
+      }
+
+      .total-income {
+        display: flex;
+        align-items: baseline;
+        gap: 4rpx;
+
+        .total-label {
+          font-weight: 400;
+          font-size: 26rpx;
+          color: #2c2c2c;
+          line-height: 26rpx;
+          margin-right: 4rpx;
+        }
+
+        .total-symbol {
+          font-weight: 600;
+          font-size: 26rpx;
+          color: #ff5365;
+          line-height: 26rpx;
+        }
+
+        .total-amount {
+          font-weight: 600;
+          font-size: 40rpx;
+          color: #ff5365;
+          line-height: 40rpx;
+        }
+      }
+    }
+
+    .records-list {
+      .record-item {
+        padding: 32rpx 0;
+
+        .record-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 40rpx;
+
+          .coupon-name {
+            font-weight: 500;
+            font-size: 28rpx;
+            color: #2c2c2c;
+            line-height: 28rpx;
+          }
+
+          .income-amount {
+            display: flex;
+            align-items: center;
+            gap: 12rpx;
+
+            .income-label {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #333333;
+              line-height: 30rpx;
+            }
+          }
+        }
+
+        .record-bottom {
+          .info-row {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 30rpx;
+            align-items: center;
+            height: 30rpx;
+            line-height: 30rpx;
+
+            .info-label {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #86909c;
+            }
+
+            .info-value {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #333333;
+            }
+            .income-value {
+              font-weight: 500;
+              font-size: 30rpx;
+              color: #ff5365;
+            }
+            .income-person {
+              display: flex;
+              align-items: center;
+            }
+            .income-phone {
+              margin-right: 12rpx;
+            }
+          }
+        }
+
+        .record-divider {
+          width: 100%;
+          height: 1rpx;
+          background: #eaeaea;
+          margin-top: 32rpx;
+        }
+        .record-item:last-child {
+          .info-row:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages-C/my/myShare.vue

@@ -0,0 +1,417 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { safeAreaInsets, menuButtonInfo } from "@/utils";
+import CustomNavigationBar from "@/components/CustomNavigationBar.vue";
+import { getImageUrl } from "@/utils/imageUtil";
+
+definePage({
+  style: {
+    navigationBarTitleText: "分享收益",
+    navigationStyle: "custom",
+  },
+});
+
+const totalIncome = ref("38.00");
+
+const shareList = ref([
+  {
+    id: 1,
+    couponName: "某某某某某优惠券",
+    income: "2.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "林雨欣",
+  },
+  {
+    id: 2,
+    couponName: "某某某某某优惠券",
+    income: "17.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "吴雨桐",
+  },
+  {
+    id: 3,
+    couponName: "某某某某某优惠券",
+    income: "18.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "周昭宁",
+  },
+  {
+    id: 4,
+    couponName: "某某某某某优惠券",
+    income: "8.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "周宇轩",
+  },
+]);
+
+function handleViewDetail(item) {
+  uni.showToast({
+    title: `查看 ${item.couponName} 详情`,
+    icon: "none",
+  });
+}
+
+// 定义tab列表
+const tabList = ref([
+  { label: "今天", value: "0" },
+  { label: "近30天", value: "1" },
+]);
+// 当前选中的tab
+const currentTab = ref("0");
+
+// 点击tab事件
+const handleTabClick = (value) => {
+  currentTab.value = value;
+  console.log("选中tab:", value);
+};
+
+const showPicker = ref(false);
+const defaultStart = "";
+const defaultEnd = "";
+
+const handleConfirm = (value: { startDate: string; endDate: string }) => {
+  console.log("选中的日期范围：", value);
+  // 处理业务逻辑
+};
+
+const handleCancel = () => {
+  console.log("取消选择");
+};
+</script>
+
+<template>
+  <view class="share-info-container">
+    <u-navbar title="分享收益" :autoBack="true" :placeholder="true" :border-bottom="false"
+      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor='#000'></u-navbar>
+
+    <view class="share-info-content">
+      <view class="income-card" :style="{
+                    backgroundImage: `url(${getImageUrl('@img/me/share-bg.png')})`,
+                    backgroundSize: 'cover',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'center'
+                }">
+        <text class="income-label">分享累计收益(元)</text>
+        <text class="income-amount">3859.00</text>
+      </view>
+
+      <view class="filter-box">
+        <view class="filter-bar">
+          <view class="filter-tabs">
+            <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
+              :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
+              <text class="tab-text">{{ item.label }}</text>
+            </view>
+          </view>
+        </view>
+        <view class="income-line"></view>
+        <view class='income-select'>
+          <view class='income-time' @click='showPicker=true'>
+            <!-- <view class='income-time-name'>2026 05.10-2026 05.12 </view> -->
+            <view class='income-time-name'>日期筛选 </view>
+            <view class="caret" />
+          </view>
+        </view>
+      </view>
+      <view class="share-card">
+        <view class="card-header">
+          <view class="title-section">
+            <text class="title-text">分享奖励</text>
+          </view>
+          <view class="total-income">
+            <text class="total-label">收益</text>
+            <view>
+              <!-- <text class="total-symbol">¥</text> -->
+              <text class="total-amount">{{ totalIncome }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="records-list">
+          <view v-for="(item, index) in shareList" :key="item.id" class="record-item">
+            <view class="record-bottom">
+              <view class="info-row">
+                <text class="info-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="info-row">
+                <text class="info-label">获得佣金</text>
+                <text class="income-value">¥{{ item.income }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">联系方式</text>
+                <text class="info-value">{{ item.receiver }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">邀请日期</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+            </view>
+
+            <view v-if="index < shareList.length - 1" class="record-divider"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 日期 -->
+    <DateRangePicker v-model:show="showPicker" :startDate="defaultStart" :endDate="defaultEnd" @confirm="handleConfirm"
+      @cancel="handleCancel" />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.share-info-container {
+  min-height: 100vh;
+  background: #f8f8fa;
+
+  .share-info-content {
+    padding: 32rpx 0;
+    overflow: auto;
+    box-sizing: border-box;
+  }
+
+  .income-card {
+    border-radius: 32rpx;
+    padding: 40rpx;
+    margin: 0 32rpx;
+
+    .income-label {
+      font-weight: 400;
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.8);
+      line-height: 26rpx;
+      display: block;
+      margin-bottom: 16rpx;
+    }
+
+    .income-amount {
+      font-weight: 700;
+      font-size: 56rpx;
+      color: #ffffff;
+      line-height: 56rpx;
+    }
+  }
+  .filter-box {
+    display: flex;
+    width: 100%;
+    height: 92rpx;
+    background: #ffffff;
+    margin: 32rpx 0;
+    padding: 0 32rpx;
+    box-sizing: border-box;
+    align-items: center;
+    .filter-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .filter-tabs {
+        display: flex;
+        gap: 24rpx;
+
+        .filter-tab {
+          padding: 0 30rpx;
+          border-radius: 999rpx;
+          background: #f7f8fa;
+          display: flex;
+          height: 44rpx;
+          line-height: 44rpx;
+
+          &.active {
+            background: #ff5365;
+
+            .tab-text {
+              color: #ffffff;
+            }
+          }
+
+          .tab-text {
+            font-weight: 400;
+            font-size: 26rpx;
+            color: #333333;
+          }
+        }
+      }
+    }
+    .income-line {
+      width: 1rpx;
+      height: 40rpx;
+      background: #d9d9d9;
+      margin: 0 39rpx 0 30rpx;
+    }
+    .income-select {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .income-time-name {
+        font-size: 28rpx;
+        color: #333;
+      }
+      .income-time {
+        display: flex;
+        align-items: center;
+        color: #333333;
+        font-size: 28rpx;
+        line-height: 28rpx;
+        white-space: nowrap;
+      }
+      .caret {
+        width: 0;
+        height: 0;
+        margin-left: 8rpx;
+        border-left: 7rpx solid transparent;
+        border-right: 7rpx solid transparent;
+        border-top: 9rpx solid #333333;
+      }
+    }
+  }
+
+  .share-card {
+    background: #ffffff;
+    border-radius: 32rpx;
+    padding: 32rpx 32rpx 0 32rpx;
+    margin: 0 32rpx;
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding-bottom: 32rpx;
+      border-bottom: 1rpx solid #eaeaea;
+
+      .title-section {
+        display: flex;
+        align-items: center;
+        gap: 18rpx;
+
+        .title-line {
+          width: 6rpx;
+          height: 32rpx;
+          background: #ff5365;
+        }
+
+        .title-text {
+          font-weight: 600;
+          font-size: 32rpx;
+          color: #333333;
+          line-height: 32rpx;
+        }
+      }
+
+      .total-income {
+        display: flex;
+        align-items: baseline;
+        gap: 4rpx;
+
+        .total-label {
+          font-weight: 400;
+          font-size: 26rpx;
+          color: #2c2c2c;
+          line-height: 26rpx;
+          margin-right: 4rpx;
+        }
+
+        .total-symbol {
+          font-weight: 600;
+          font-size: 26rpx;
+          color: #ff5365;
+          line-height: 26rpx;
+        }
+
+        .total-amount {
+          font-weight: 600;
+          font-size: 40rpx;
+          color: #ff5365;
+          line-height: 40rpx;
+        }
+      }
+    }
+
+    .records-list {
+      .record-item {
+        padding: 32rpx 0;
+
+        .record-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 40rpx;
+
+          .coupon-name {
+            font-weight: 500;
+            font-size: 28rpx;
+            color: #2c2c2c;
+            line-height: 28rpx;
+          }
+
+          .income-amount {
+            display: flex;
+            align-items: center;
+            gap: 12rpx;
+
+            .income-label {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #333333;
+              line-height: 30rpx;
+            }
+          }
+        }
+
+        .record-bottom {
+          .info-row {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 30rpx;
+            align-items: center;
+            height: 30rpx;
+            line-height: 30rpx;
+
+            .info-label {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #86909c;
+            }
+
+            .info-value {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #333333;
+            }
+            .income-value {
+              font-weight: 500;
+              font-size: 30rpx;
+              color: #ff5365;
+            }
+            .income-person {
+              display: flex;
+              align-items: center;
+            }
+            .income-phone {
+              margin-right: 12rpx;
+            }
+          }
+        }
+
+        .record-divider {
+          width: 100%;
+          height: 1rpx;
+          background: #eaeaea;
+          margin-top: 32rpx;
+        }
+      }
+      .record-item:last-child {
+        .info-row:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages-C/my/myTodayInvitation.vue

@@ -1,258 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-definePage({
-  style: {
-    navigationBarTitleText: "今日邀请",
-    navigationStyle: "custom",
-  },
-});
-
-const cumulativeData = ref([
-  {
-    id: 1,
-    type: "领取人",
-    amount: "37.92",
-    userName: "林雨欣",
-    inviteDate: "2026-05-18",
-  },
-  {
-    id: 2,
-    type: "领取人",
-    amount: "45.00",
-    userName: "张三",
-    inviteDate: "2026-05-19",
-  },
-  {
-    id: 3,
-    type: "领取人",
-    amount: "28.50",
-    userName: "李四",
-    inviteDate: "2026-05-20",
-  },
-]);
-
-// 定义tab列表
-const tabList = ref([
-  { label: "今天", value: "0" },
-  { label: "近7天", value: "1" },
-  { label: "近30天", value: "2" },
-]);
-
-// 当前选中的tab
-const currentTab = ref("0");
-
-// 点击tab事件
-const handleTabClick = (value) => {
-  currentTab.value = value;
-  console.log("选中tab:", value);
-};
-</script>
-
-<template>
-  <view class="income-cumulative-container">
-    <u-navbar title="今日邀请" :autoBack="true" :placeholder="true" :border-bottom="false"
-      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor="#000"></u-navbar>
-
-    <view class="filter-bar">
-      <view class="filter-tabs">
-        <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
-          :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
-          <text class="tab-text">{{ item.label }}</text>
-        </view>
-      </view>
-      <view class="total-amount">
-        <text class="total-label">合计</text>
-        <text class="total-value">340</text>
-        <text class="total-unit">元</text>
-      </view>
-    </view>
-
-    <view class="cumulative-content">
-      <view class="cumulative-list">
-        <view class="cumulative-item" v-for="item in cumulativeData" :key="item.id">
-          <view class="item-header">
-            <text class="item-type">{{ item.type }}</text>
-            <view class='item-type-name'>直接邀请</view>
-          </view>
-          <view class="divider"></view>
-          <view class="item-info">
-            <view class="info-row">
-              <text class="info-label">用户名称</text>
-              <text class="info-value">{{ item.userName }}</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">邀请日期</text>
-              <text class="info-value">{{ item.inviteDate }}</text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.income-cumulative-container {
-  min-height: 100vh;
-  background: #f8f8fa;
-
-  .filter-bar {
-    width: 100%;
-    height: 92rpx;
-    background: #ffffff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 32rpx;
-    box-sizing: border-box;
-
-    .filter-tabs {
-      display: flex;
-      gap: 24rpx;
-
-      .filter-tab {
-        padding: 4rpx 30rpx;
-        border-radius: 32rpx;
-        background: #f7f8fa;
-        display: flex;
-        height: 44rpx;
-        line-height: 44rpx;
-        &.active {
-          background: #ff5365;
-
-          .tab-text {
-            color: #ffffff;
-          }
-        }
-
-        .tab-text {
-          font-weight: 400;
-          font-size: 26rpx;
-          color: #333333;
-        }
-      }
-    }
-
-    .total-amount {
-      display: flex;
-      align-items: baseline;
-      gap: 8rpx;
-
-      .total-label {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #2c2c2c;
-      }
-
-      .total-value {
-        font-weight: 600;
-        font-size: 42rpx;
-        color: #ff5365;
-      }
-
-      .total-unit {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ff5365;
-      }
-    }
-  }
-
-  .cumulative-content {
-    width: 100%;
-    padding: 32rpx;
-    box-sizing: border-box;
-  }
-
-  .cumulative-list {
-    display: flex;
-    flex-direction: column;
-    gap: 32rpx;
-  }
-
-  .cumulative-item {
-    background: #ffffff;
-    border-radius: 32rpx;
-    padding: 46rpx 32rpx;
-
-    .item-header {
-      display: flex;
-      align-items: center;
-      margin-bottom: 32rpx;
-
-      .item-type {
-        font-weight: 600;
-        font-size: 32rpx;
-        color: #2c2c2c;
-        line-height: 1;
-      }
-      .item-type-name {
-        padding: 6rpx 16rpx;
-        background: #e8f3ff;
-        color: #165dff;
-        font-size: 24rpx;
-        border-radius: 4rpx;
-        margin-left: 14rpx;
-      }
-
-      .item-amount {
-        display: flex;
-        align-items: baseline;
-        gap: 8rpx;
-
-        .amount-plus {
-          font-size: 26rpx;
-          color: #2c2c2c;
-          line-height: 1;
-        }
-
-        .amount-value {
-          font-weight: 600;
-          font-size: 42rpx;
-          color: #ff5365;
-          line-height: 1;
-        }
-      }
-      .total-unit {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ff5365;
-      }
-    }
-
-    .divider {
-      width: 622rpx;
-      height: 2rpx;
-      background: #eaeaea;
-      margin-bottom: 32rpx;
-    }
-
-    .item-info {
-      display: flex;
-      flex-direction: column;
-      gap: 32rpx;
-
-      .info-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .info-label {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #86909c;
-          line-height: 1;
-        }
-
-        .info-value {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #333333;
-          line-height: 1;
-        }
-      }
-    }
-  }
-}
-</style>

src/pages-C/my/myWriteOff.vue

@@ -0,0 +1,433 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { safeAreaInsets, menuButtonInfo } from "@/utils";
+import CustomNavigationBar from "@/components/CustomNavigationBar.vue";
+import { getImageUrl } from "@/utils/imageUtil";
+
+definePage({
+  style: {
+    navigationBarTitleText: "核销收益",
+    navigationStyle: "custom",
+  },
+});
+
+const totalIncome = ref("38.00");
+
+const shareList = ref([
+  {
+    id: 1,
+    couponName: "某某某某某优惠券",
+    income: "2.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "林雨欣",
+  },
+  {
+    id: 2,
+    couponName: "某某某某某优惠券",
+    income: "17.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "吴雨桐",
+  },
+  {
+    id: 3,
+    couponName: "某某某某某优惠券",
+    income: "18.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "周昭宁",
+  },
+  {
+    id: 4,
+    couponName: "某某某某某优惠券",
+    income: "8.00",
+    receiveTime: "2026-05-18 19:00:00",
+    receiver: "周宇轩",
+  },
+]);
+
+function handleViewDetail(item) {
+  uni.showToast({
+    title: `查看 ${item.couponName} 详情`,
+    icon: "none",
+  });
+}
+
+// 定义tab列表
+const tabList = ref([
+  { label: "今天", value: "0" },
+  { label: "近30天", value: "1" },
+]);
+// 当前选中的tab
+const currentTab = ref("0");
+
+// 点击tab事件
+const handleTabClick = (value) => {
+  currentTab.value = value;
+  console.log("选中tab:", value);
+};
+
+const showPicker = ref(false);
+const defaultStart = "";
+const defaultEnd = "";
+
+const handleConfirm = (value: { startDate: string; endDate: string }) => {
+  console.log("选中的日期范围：", value);
+  // 处理业务逻辑
+};
+
+const handleCancel = () => {
+  console.log("取消选择");
+};
+</script>
+
+<template>
+  <view class="share-info-container">
+    <u-navbar title="核销收益" :autoBack="true" :placeholder="true" :border-bottom="false"
+      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor='#000'></u-navbar>
+
+    <view class="share-info-content">
+      <view class="income-card" :style="{
+                    backgroundImage: `url(${getImageUrl('@img/me/share-bg.png')})`,
+                    backgroundSize: 'cover',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'center'
+                }">
+        <text class="income-label">核销累计收益(元)</text>
+        <text class="income-amount">3859.00</text>
+      </view>
+
+      <view class="filter-box">
+        <view class="filter-bar">
+          <view class="filter-tabs">
+            <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
+              :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
+              <text class="tab-text">{{ item.label }}</text>
+            </view>
+          </view>
+        </view>
+        <view class="income-line"></view>
+        <view class='income-select'>
+          <view class='income-time' @click='showPicker=true'>
+            <!-- <view class='income-time-name'>2026 05.10-2026 05.12 </view> -->
+            <view class='income-time-name'>日期筛选 </view>
+            <view class="caret" />
+          </view>
+        </view>
+      </view>
+      <view class="share-card">
+        <view class="card-header">
+          <view class="title-section">
+            <view class="title-line"></view>
+            <text class="title-text">核销奖励</text>
+          </view>
+          <view class="total-income">
+            <text class="total-label">总收益</text>
+            <view>
+              <text class="total-symbol">¥</text>
+              <text class="total-amount">{{ totalIncome }}</text>
+            </view>
+          </view>
+        </view>
+
+        <view class="records-list">
+          <view v-for="(item, index) in shareList" :key="item.id" class="record-item">
+
+            <view class="record-bottom">
+              <view class="info-row">
+                <text class="info-label">优惠券名称</text>
+                <text class="info-value">¥{{ item.income }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">核销时间</text>
+                <text class="info-value">{{ item.receiver }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-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="info-row">
+                <text class="info-label">联系方式</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">核销类型</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">商品名称</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">核销商家</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">实付金额</text>
+                <text class="info-value">{{ item.receiveTime }}</text>
+              </view>
+              <view class="info-row">
+                <text class="info-label">获得佣金</text>
+                <text class="income-value">{{ item.receiveTime }}</text>
+              </view>
+            </view>
+
+            <view v-if="index < shareList.length - 1" class="record-divider"></view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 日期 -->
+    <DateRangePicker v-model:show="showPicker" :startDate="defaultStart" :endDate="defaultEnd" @confirm="handleConfirm"
+      @cancel="handleCancel" />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.share-info-container {
+  min-height: 100vh;
+  background: #f8f8fa;
+
+  .share-info-content {
+    padding: 32rpx 0;
+  }
+
+  .income-card {
+    border-radius: 32rpx;
+    padding: 40rpx;
+    margin: 0 32rpx;
+
+    .income-label {
+      font-weight: 400;
+      font-size: 26rpx;
+      color: rgba(255, 255, 255, 0.8);
+      line-height: 26rpx;
+      display: block;
+      margin-bottom: 16rpx;
+    }
+
+    .income-amount {
+      font-weight: 700;
+      font-size: 56rpx;
+      color: #ffffff;
+      line-height: 56rpx;
+    }
+  }
+  .filter-box {
+    display: flex;
+    width: 100%;
+    height: 92rpx;
+    background: #ffffff;
+    margin: 32rpx 0;
+    padding: 0 32rpx;
+    box-sizing: border-box;
+    align-items: center;
+    .filter-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .filter-tabs {
+        display: flex;
+        gap: 24rpx;
+
+        .filter-tab {
+          padding: 0 30rpx;
+          border-radius: 999rpx;
+          background: #f7f8fa;
+          display: flex;
+          height: 44rpx;
+          line-height: 44rpx;
+
+          &.active {
+            background: #ff5365;
+
+            .tab-text {
+              color: #ffffff;
+            }
+          }
+
+          .tab-text {
+            font-weight: 400;
+            font-size: 26rpx;
+            color: #333333;
+          }
+        }
+      }
+    }
+    .income-line {
+      width: 1rpx;
+      height: 40rpx;
+      background: #d9d9d9;
+      margin: 0 39rpx 0 30rpx;
+    }
+    .income-select {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .income-time {
+        display: flex;
+        align-items: center;
+        color: #333333;
+        font-size: 28rpx;
+        line-height: 28rpx;
+        white-space: nowrap;
+      }
+      .caret {
+        width: 0;
+        height: 0;
+        margin-left: 8rpx;
+        border-left: 7rpx solid transparent;
+        border-right: 7rpx solid transparent;
+        border-top: 9rpx solid #333333;
+      }
+    }
+  }
+
+  .share-card {
+    background: #ffffff;
+    border-radius: 32rpx;
+    padding: 32rpx 32rpx 0 32rpx;
+    margin: 0 32rpx;
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding-bottom: 32rpx;
+      border-bottom: 1rpx solid #eaeaea;
+
+      .title-section {
+        display: flex;
+        align-items: center;
+        gap: 18rpx;
+
+        .title-line {
+          width: 6rpx;
+          height: 32rpx;
+          background: #ff5365;
+        }
+
+        .title-text {
+          font-weight: 600;
+          font-size: 32rpx;
+          color: #333333;
+          line-height: 32rpx;
+        }
+      }
+
+      .total-income {
+        display: flex;
+        align-items: baseline;
+        gap: 4rpx;
+
+        .total-label {
+          font-weight: 400;
+          font-size: 26rpx;
+          color: #2c2c2c;
+          line-height: 26rpx;
+          margin-right: 4rpx;
+        }
+
+        .total-symbol {
+          font-weight: 600;
+          font-size: 26rpx;
+          color: #ff5365;
+          line-height: 26rpx;
+        }
+
+        .total-amount {
+          font-weight: 600;
+          font-size: 40rpx;
+          color: #ff5365;
+          line-height: 40rpx;
+        }
+      }
+    }
+
+    .records-list {
+      .record-item {
+        padding: 32rpx 0;
+
+        .record-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 40rpx;
+
+          .coupon-name {
+            font-weight: 500;
+            font-size: 28rpx;
+            color: #2c2c2c;
+            line-height: 28rpx;
+          }
+
+          .income-amount {
+            display: flex;
+            align-items: center;
+            gap: 12rpx;
+
+            .income-label {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #333333;
+              line-height: 30rpx;
+            }
+          }
+        }
+
+        .record-bottom {
+          .info-row {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 30rpx;
+            align-items: center;
+            height: 30rpx;
+            line-height: 30rpx;
+
+            .info-label {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #86909c;
+            }
+
+            .info-value {
+              font-weight: 400;
+              font-size: 30rpx;
+              color: #333333;
+            }
+            .income-value {
+              font-weight: 500;
+              font-size: 30rpx;
+              color: #ff5365;
+            }
+            .income-person {
+              display: flex;
+              align-items: center;
+            }
+            .income-phone {
+              margin-right: 12rpx;
+            }
+          }
+        }
+
+        .record-divider {
+          width: 100%;
+          height: 1rpx;
+          background: #eaeaea;
+          margin-top: 32rpx;
+        }
+      }
+      .record-item:last-child {
+        .info-row:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages-C/my/sendRecipientsNumber.vue

@@ -1,250 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-definePage({
-  style: {
-    navigationBarTitleText: "累计领取人数",
-    navigationStyle: "custom",
-  },
-});
-
-const cumulativeData = ref([
-  {
-    id: 1,
-    type: "领取人",
-    amount: "37.92",
-    userName: "林雨欣",
-    inviteDate: "2026-05-18",
-  },
-  {
-    id: 2,
-    type: "领取人",
-    amount: "45.00",
-    userName: "张三",
-    inviteDate: "2026-05-19",
-  },
-  {
-    id: 3,
-    type: "领取人",
-    amount: "28.50",
-    userName: "李四",
-    inviteDate: "2026-05-20",
-  },
-]);
-
-// 定义tab列表
-const tabList = ref([
-  { label: "今天", value: "0" },
-  { label: "近7天", value: "1" },
-  { label: "近30天", value: "2" },
-]);
-
-// 当前选中的tab
-const currentTab = ref("0");
-
-// 点击tab事件
-const handleTabClick = (value) => {
-  currentTab.value = value;
-  console.log("选中tab:", value);
-};
-</script>
-
-<template>
-  <view class="income-cumulative-container">
-    <u-navbar title="累计领取人数" :autoBack="true" :placeholder="true" :border-bottom="false"
-      :title-style="{ fontWeight: 'bold', color: '#000' }" leftIconColor="#000"></u-navbar>
-
-    <view class="filter-bar">
-      <view class="filter-tabs">
-        <view v-for="(item, index) in tabList" :key="index" class="filter-tab"
-          :class="{ active: currentTab === item.value }" @click="handleTabClick(item.value)">
-          <text class="tab-text">{{ item.label }}</text>
-        </view>
-      </view>
-      <view class="total-amount">
-        <text class="total-label">合计</text>
-        <text class="total-value">340</text>
-        <text class="total-unit">元</text>
-      </view>
-    </view>
-
-    <view class="cumulative-content">
-      <view class="cumulative-list">
-        <view class="cumulative-item" v-for="item in cumulativeData" :key="item.id">
-          <view class="item-header">
-            <text class="item-type">{{ item.type }}</text>
-          </view>
-          <view class="divider"></view>
-          <view class="item-info">
-            <view class="info-row">
-              <text class="info-label">用户名称</text>
-              <text class="info-value">{{ item.userName }}</text>
-            </view>
-            <view class="info-row">
-              <text class="info-label">邀请日期</text>
-              <text class="info-value">{{ item.inviteDate }}</text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<style lang="scss" scoped>
-.income-cumulative-container {
-  min-height: 100vh;
-  background: #f8f8fa;
-
-  .filter-bar {
-    width: 100%;
-    height: 92rpx;
-    background: #ffffff;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 32rpx;
-    box-sizing: border-box;
-
-    .filter-tabs {
-      display: flex;
-      gap: 24rpx;
-
-      .filter-tab {
-        padding: 4rpx 30rpx;
-        border-radius: 32rpx;
-        background: #f7f8fa;
-        display: flex;
-        height: 44rpx;
-        line-height: 44rpx;
-        &.active {
-          background: #ff5365;
-
-          .tab-text {
-            color: #ffffff;
-          }
-        }
-
-        .tab-text {
-          font-weight: 400;
-          font-size: 26rpx;
-          color: #333333;
-        }
-      }
-    }
-
-    .total-amount {
-      display: flex;
-      align-items: baseline;
-      gap: 8rpx;
-
-      .total-label {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #2c2c2c;
-      }
-
-      .total-value {
-        font-weight: 600;
-        font-size: 42rpx;
-        color: #ff5365;
-      }
-
-      .total-unit {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ff5365;
-      }
-    }
-  }
-
-  .cumulative-content {
-    width: 100%;
-    padding: 32rpx;
-    box-sizing: border-box;
-  }
-
-  .cumulative-list {
-    display: flex;
-    flex-direction: column;
-    gap: 32rpx;
-  }
-
-  .cumulative-item {
-    background: #ffffff;
-    border-radius: 32rpx;
-    padding: 46rpx 32rpx;
-
-    .item-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 32rpx;
-
-      .item-type {
-        font-weight: 600;
-        font-size: 32rpx;
-        color: #2c2c2c;
-        line-height: 1;
-      }
-
-      .item-amount {
-        display: flex;
-        align-items: baseline;
-        gap: 8rpx;
-
-        .amount-plus {
-          font-size: 26rpx;
-          color: #2c2c2c;
-          line-height: 1;
-        }
-
-        .amount-value {
-          font-weight: 600;
-          font-size: 42rpx;
-          color: #ff5365;
-          line-height: 1;
-        }
-      }
-      .total-unit {
-        font-weight: 400;
-        font-size: 26rpx;
-        color: #ff5365;
-      }
-    }
-
-    .divider {
-      width: 622rpx;
-      height: 2rpx;
-      background: #eaeaea;
-      margin-bottom: 32rpx;
-    }
-
-    .item-info {
-      display: flex;
-      flex-direction: column;
-      gap: 32rpx;
-
-      .info-row {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .info-label {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #86909c;
-          line-height: 1;
-        }
-
-        .info-value {
-          font-weight: 400;
-          font-size: 30rpx;
-          color: #333333;
-          line-height: 1;
-        }
-      }
-    }
-  }
-}
-</style>

src/pages-C/share/shareInfo.vue

@@ -1,8 +1,21 @@
 <script setup lang="ts">
+import { onLoad } from '@dcloudio/uni-app'
 import { ref } from "vue";
 import { getImageUrl } from "@/utils/imageUtil";
 import Upopup from "@/components/popup/index.vue";
-
+import StarRating from "@/components/start/start.vue";
+import { storeToRefs } from "pinia";
+import { useTokenStore } from "@/store/token";
+import { toLoginPage } from "@/utils/toLoginPage";
+
+const tokenStore = useTokenStore();
+const { hasLogin } = storeToRefs(tokenStore);
+
+// 接收分享卡片传入的参数
+onLoad((options: any) => {
+  console.log('onLoad options:', options);
+  // 例如：options.couponId, options.from 等
+});
 definePage({
   style: {
     navigationBarTitleText: "分享信息",
@@ -39,6 +52,38 @@ const rules = [
 
 const storeShow = ref(false);
 const shopShow = ref(false);
+
+// 跳转到其他小程序领券
+function navigateToMiniProgram() {
+  // #ifdef MP-WEIXIN
+  uni.navigateToMiniProgram({
+    appId: 'wxab9634bf98628a03',   // TODO: 替换为目标小程序的 AppId
+    path: 'pages/home/home',                     // TODO: 替换为目标小程序的页面路径
+    envVersion: 'trial',
+    success: () => {
+      console.log('跳转其他小程序成功');
+    },
+    fail: (err) => {
+      console.error('跳转失败', JSON.stringify(err));
+      uni.showToast({ title: err.errMsg || '跳转失败', icon: 'none' });
+    },
+  });
+  // #endif
+}
+
+function receive() {
+  if (!hasLogin.value) {
+    // 未登录 → 去登录，登录后回到当前页
+    const currentPage = getCurrentPages()[getCurrentPages().length - 1];
+    const redirectUrl = `/${currentPage.route}`;
+    toLoginPage({
+      queryString: `?redirect=${encodeURIComponent(redirectUrl)}`,
+    });
+    return;
+  }
+  // 已登录 → 跳转其他小程序领券
+  navigateToMiniProgram();
+}
 </script>
 
 <template>
@@ -112,48 +157,98 @@ const shopShow = ref(false);
 
       <view class="details-card">
         <view class="detail-item has-arrow" @click='storeShow = true'>
-          <text class="detail-label">适用商品</text>
+          <text class="detail-label">适用分类</text>
           <view class="detail-right">
-            <text class="detail-value">{{ couponDetails.applicableProducts }}</text>
+            <text class="detail-value clamp">{{ couponDetails.applicableProducts }}</text>
             <u--image class='income-right' :src="getImageUrl('@img/income/arrow-right.png')" mode="aspectFit"
               width="32rpx" height="32rpx"></u--image>
           </view>
         </view>
 
         <view class="detail-item has-arrow" @click='shopShow = true'>
-          <text class="detail-label">适用商家</text>
+          <text class="detail-label">适用商品</text>
           <view class="detail-right">
-            <view class="merchant-avatars">
-              <view class="avatar" v-for="i in 6" :key="i">
-                <u--image :src="getImageUrl('@img/income/bg.png')" mode="" width="40rpx" height="40rpx"
-                  shape="circle"></u--image>
-              </view>
-
-              <text class="avatar-text">{{ couponDetails.merchantCount }}</text>
-            </view>
+            <text class="detail-value clamp">{{ couponDetails.applicableProducts }}</text>
             <u--image class='income-right' :src="getImageUrl('@img/income/arrow-right.png')" mode="aspectFit"
               width="32rpx" height="32rpx"></u--image>
           </view>
         </view>
+      </view>
 
-        <view class="detail-item">
-          <text class="detail-label">使用规则</text>
-          <text class="detail-value">{{ couponDetails.usageRules }}</text>
-        </view>
-
-        <view class="detail-item">
-          <text class="detail-label">使用期限</text>
-          <text class="detail-value">{{ couponDetails.usagePeriod }}</text>
-        </view>
-
-        <view class="detail-item">
-          <text class="detail-label">每日限制领取</text>
-          <text class="detail-value">{{ couponDetails.dailyLimit }}</text>
+      <!-- 适用商家卡片 -->
+      <view class="merchant-card-content">
+        <view class="merchant-title">商家信息</view>
+        <view class="merchant-card">
+          <view class="merchant-thumb">
+            <image class="merchant-thumb-img" src="" mode="aspectFill" />
+          </view>
+          <view class="merchant-info">
+            <view class="merchant-name-row">
+              <text class="merchant-name">雪蜜冰城</text>
+            </view>
+            <view class="merchant-meta-row">
+              <view class="merchant-rating-group">
+                <view class="merchant-stars">
+                  <StarRating :rating="2" />
+                </view>
+                <text class="merchant-score">4.8超赞</text>
+                <text class="merchant-price">人均¥10</text>
+              </view>
+              <text class="merchant-distance">190m</text>
+            </view>
+            <view class="merchant-tags">
+              <view class="merchant-tag tag-orange">
+                <text>消费人数500+</text>
+              </view>
+              <view class="merchant-tag tag-red">
+                <text>收藏800+</text>
+              </view>
+              <view class="merchant-tag tag-blue">
+                <text>好评率90%</text>
+              </view>
+              <view class="merchant-image">
+                <u--image :src="getImageUrl('@img/index/interests.png')" width="86rpx" height="26rpx"></u--image>
+              </view>
+            </view>
+            <view class="hot">
+              <view class="merchant-tag tag-gold">
+                <u--image :src="getImageUrl('@img/index/rank-f.png')" width="36rpx" height="33rpx"></u--image>
+                <text>万柏林区西餐厅热销榜第8名</text>
+              </view>
+            </view>
+          </view>
         </view>
+        <view class="merchant-card">
+          <view class="merchant-thumb">
+            <image class="merchant-thumb-img" src="" mode="aspectFill" />
+          </view>
+          <view class="merchant-info">
+            <view class="merchant-name-row">
+              <text class="merchant-name">雪蜜冰城</text>
+            </view>
+            <view class="merchant-meta-row">
+              <view class="merchant-rating-group">
+                <view class="merchant-stars">
+                  <text class="star-icon" v-for="i in 5" :key="i">★</text>
+                </view>
+                <text class="merchant-score">4.8超赞</text>
+                <text class="merchant-price">人均¥10</text>
+              </view>
+              <text class="merchant-distance">190m</text>
+            </view>
+            <view class="merchant-tags">
+              <view class="merchant-tag tag-orange">
+                <text>消费人数500+</text>
+              </view>
+              <view class="merchant-tag tag-red">
+                <text>收藏800+</text>
+              </view>
+              <view class="merchant-tag tag-blue">
+                <text>好评率90%</text>
+              </view>
 
-        <view class="detail-item last">
-          <text class="detail-label">适用地区</text>
-          <text class="detail-value">{{ couponDetails.applicableArea }}</text>
+            </view>
+          </view>
         </view>
       </view>
 
@@ -172,38 +267,22 @@ const shopShow = ref(false);
     </view>
 
     <view class="share-info">
-      <view class="share-btn">去分享</view>
+      <!-- <view class="share-btn">去分享</view> -->
+      <view class="share-btn" @click='receive'>去领取</view>
     </view>
   </view>
 
   <!-- 适用商品 -->
-  <Upopup :isShow="storeShow" title='适用商品' @close='storeShow = false' :isFooter='false'>
+  <Upopup :isShow="storeShow" title='适用分类' @close='storeShow = false' :isFooter='false'>
     <view class="store-cont">
       大同刀削面 | 水蒸蛋 | 水煮肉片 | 葱爆羊肉 | 打卤面 |葱爆羊肉 | 打卤面 |葱爆羊肉 | 打卤面
     </view>
   </Upopup>
 
   <!-- 适用商家 -->
-  <Upopup :isShow="shopShow" title='适用商家' @close='shopShow = false' :isFooter='false'>
-    <view class="shop-cont">
-      <view class="shop-item">
-        <text class="shop-name">顺溜刀削面（国际能源中心店）</text>
-      </view>
-      <view class="shop-info" v-for='(item,index) in 8' :key='index'>
-        <view class="info-row">
-          <view class='info-dis-c'>
-            <u--image class='location-image' :src="getImageUrl('@img/income/location.png')" mode="aspectFit"
-              width="24rpx" height="24rpx" />
-            <text class="shop-distance">距您367m</text>
-            <view class="divider"></view>
-          </view>
-          <text class="info-text">万柏林区迎泽西大街100号国际能源中心B座1层大堂</text>
-        </view>
-        <view class="info-time">
-          <u--image :src="getImageUrl('@img/income/time.png')" mode="aspectFit" width="24rpx" height="24rpx" />
-          <text class="info-text">07:00 - 22:00</text>
-        </view>
-      </view>
+  <Upopup :isShow="shopShow" title='适用商品' @close='shopShow = false' :isFooter='false'>
+    <view class="store-cont">
+      大同刀削面 | 水蒸蛋 | 水煮肉片 | 葱爆羊肉 | 打卤面 |葱爆羊肉 | 打卤面 |葱爆羊肉 | 打卤面
     </view>
   </Upopup>
 </template>
@@ -340,6 +419,13 @@ const shopShow = ref(false);
         color: #333333;
         flex: 1;
       }
+      .clamp {
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
 
       .merchant-avatars {
         display: flex;
@@ -362,6 +448,171 @@ const shopShow = ref(false);
     }
   }
 
+  // 适用商家卡片
+  .merchant-card-content {
+    border-radius: 12rpx;
+    background: #fff;
+    padding: 20rpx;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 32rpx;
+    .merchant-title {
+      color: #2c2c2c;
+      font-size: 32rpx;
+      font-weight: 600;
+      padding: 12rpx 0 32rpx 0;
+      border-bottom: 1rpx solid #eaeaea;
+      box-sizing: border-box;
+    }
+  }
+  .merchant-card {
+    display: flex;
+    flex-direction: row;
+    gap: 24rpx;
+
+    width: 100%;
+
+    .merchant-thumb {
+      width: 130rpx;
+      height: 130rpx;
+      flex-shrink: 0;
+
+      .merchant-thumb-img {
+        width: 100%;
+        height: 100%;
+        border-radius: 12rpx;
+        border: 1rpx solid #eeeeee;
+      }
+    }
+
+    .merchant-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 12rpx;
+
+      .merchant-name-row {
+        .merchant-name {
+          font-weight: 400;
+          font-size: 28rpx;
+          color: #000000;
+        }
+      }
+
+      .merchant-meta-row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+        .merchant-rating-group {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          gap: 10rpx;
+
+          .merchant-stars {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 4rpx;
+
+            .star-icon {
+              font-size: 20rpx;
+              color: #ff165b;
+              line-height: 1;
+            }
+          }
+
+          .merchant-score {
+            font-weight: 500;
+            font-size: 23rpx;
+            color: #ff165b;
+          }
+
+          .merchant-price {
+            font-weight: 400;
+            font-size: 22rpx;
+            color: #8a8b92;
+          }
+        }
+
+        .merchant-distance {
+          font-weight: 400;
+          font-size: 22rpx;
+          color: #73747c;
+        }
+      }
+
+      .merchant-tags {
+        display: flex;
+        flex-direction: row;
+        gap: 10rpx;
+        align-items: center;
+        .merchant-image {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 36rpx;
+          line-height: 0;
+        }
+        .merchant-tag {
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          padding: 2rpx 10rpx;
+          border-radius: 4rpx;
+
+          text {
+            font-weight: 400;
+            font-size: 20rpx;
+          }
+        }
+
+        .tag-orange {
+          background: #fff3dc;
+
+          text {
+            color: #db8f19;
+          }
+        }
+
+        .tag-red {
+          background: #feece5;
+
+          text {
+            color: #fb6f39;
+          }
+        }
+
+        .tag-blue {
+          background: #ebf4ff;
+
+          text {
+            color: #3994fb;
+          }
+        }
+      }
+      .hot {
+        display: flex;
+        .tag-gold {
+          background: #ffeede;
+          border-radius: 4rpx;
+          display: flex;
+          align-items: center;
+          font-size: 20rpx;
+
+          text {
+            color: #b05e2c;
+            margin-left: 12rpx;
+          }
+        }
+      }
+    }
+  }
+
   .card-text {
     .card-text-title {
       font-size: 32rpx;

src/pages/home/index.vue

@@ -150,29 +150,89 @@ const headerOverlayOpacity = computed(() => {
     const maxScroll = menuButtonInfo.height + safeAreaInsets.top + 64 + (headerHeightForPx - (menuButtonInfo.height + safeAreaInsets.top + 64)) / 2
     return Math.min(scrollTop.value / maxScroll, 1)
 })
+
+
+
+const form = ref({});
+const visibleNoticeList = computed(() => {
+  const data = form.value || {};
+  return [
+    {
+      title: "累计领取(张)",
+      content: data.totalIncome || 0,
+      page: `/pages-C/home/sendWriteOff?type=1`,
+    },
+
+    {
+      title: "累计未领取(张)",
+      content: data.bankCards || 0,
+      page: "/pages-C/home/sendWriteOff?type=2",
+    },
+    {
+     title: "浏览领取转换率",
+      content: data.inviteIncome || 0,
+      page: "",
+    },
+    {
+       title: "累计待核销(张)",
+      content: data.shareIncome || 0,
+      page: "/pages-C/home/sendCancelWriteOff?type=1",
+    },
+    {
+       title: "累计已核销(张)",
+      content: data.totalWithdraw || 0,
+      page: "/pages-C/home/sendCancelWriteOff?type=2",
+    },
+    {
+       title: "领取核销转换率",
+      content: data.writeOffIncome || 0,
+      page: "",
+    },
+  ];
+});
+
+function handleViewDetail(item) {
+    if(item.page){
+        uni.navigateTo({
+            url: item.page,
+        });
+    }
+ 
+}
+
 </script>
 
 <template>
     <view class="home-container">
-        <view class="home-header-overlay"
-            :style="{ opacity: headerOverlayOpacity, height: `calc(${menuButtonInfo.bottom + 4}px + 50rpx)` }" />
+        <!-- <view class="home-header-overlay" /> -->
         <!-- <up-pull-refresh :refreshing="refreshing" @refresh="onRefresh"> -->
             <!-- 顶部区域 -->
             <view class="home-header">
-                <view class="planet-font absolute z-3 text-xl c-black" :style="{ top: `${navigationBarHeight - 39}px` }">
-                    券中心
-                </view>
-                <view 
-                class="home-header-card" 
-                :style="{
+                 <u-navbar :autoBack="false" :placeholder="true" :border-bottom="false"  >
+                    <template v-slot:left>
+                        <view class="planet-font text-xl c-black">券中心</view>
+                    </template>
+                    <template v-slot:right>
+                        <view :style="{ marginRight: menuButtonInfo?.width +'px' }">
+                            <u--image class='income-phone' :src="getImageUrl('@img/index/rank.png')" width="189rpx"
+                                height="55rpx" @click='handleViewDetail({ page: "/pages-C/home/ranking" })'></u--image>
+                        </view>
+                    </template>
+                </u-navbar>
+
+                <view  class="home-header-card" :style="{
                     backgroundImage: `url(${getImageUrl('@img/index/income-card-bg.png')})`,
                     backgroundSize: 'cover',
                     backgroundPosition: 'center',
-                    marginTop: `${navigationBarHeight}px`
                 }">
                     <view class="home-header-avatar-info">
                         <view class="home-header-balance">
-                            我的收益（元）
+                           <view @click='handleViewDetail({page:"/pages-C/home/sendCoupon"})'> 累计发券(张)</view>
+                           <view class='number-count' @click='handleViewDetail({page:"/pages-C/home/browse"})'> 
+                              <u--image class='income-phone' :src="getImageUrl('@img/index/eye.png')" width="24rpx" height="24rpx"></u--image>
+                              <view class="income-name">浏览人数：3985人</view>
+                             <u--image class='income-phone' :src="getImageUrl('@img/index/white-right.png')" width="32rpx" height="32rpx"></u--image>
+                           </view>
                         </view>
                         <view class="home-header-balance-num">
                             <view class="home-header-balance-num-amount">
@@ -186,35 +246,19 @@ const headerOverlayOpacity = computed(() => {
                         </view>
                     </view>
                     <view class="home-header-tips">
-                        <view class="home-header-tips-item" @click="toCouponRedemptionList('2')">
+                        <view class="home-header-tips-item" v-for="(item,index) in visibleNoticeList" :key='index' @click='handleViewDetail(item)'>
                             <view class="home-header-tips-item-des">
-                                已核销(张)
+                                {{item.title}}
                             </view>
                             <view class="home-header-tips-item-num">
-                                {{ !hasLogin ? '*****' : couponSituationData?.usedQuantity || 0 }}
-                            </view>
-                        </view>
-                        <view class="home-header-tips-item ml-8" @click="toCouponRedemptionList('1')">
-                            <view class="home-header-tips-item-des">
-                                未核销(张)
-                            </view>
-                            <view class="home-header-tips-item-num">
-                                {{ !hasLogin ? '*****' :couponSituationData?.quantityToBeUsed || 0 }}
-                            </view>
-                        </view>
-                        <view class="home-header-tips-item ml-8">
-                            <view class="home-header-tips-item-des">
-                                已发放(张)
-                            </view>
-                            <view class="home-header-tips-item-num">
-                                {{ !hasLogin ? '*****' : couponSituationData?.quantityForComplimentary || 0 }}
+                                {{item.content}}
                             </view>
                         </view>
                     </view>
                 </view>
             </view>
             <!-- 邀请新人 -->
-            <up-sticky :offset-top="-120">
+            <!-- <up-sticky :offset-top="-120"> -->
                 <view class="invite-header">
                     <view class="home-header-invite"
             :style="{
@@ -248,7 +292,7 @@ const headerOverlayOpacity = computed(() => {
                 </view>
                     </view>
                 </view>
-            </up-sticky>
+            <!-- </up-sticky> -->
             <view class="home-coupon-list">
                 <view class="coupon-list">
                     <CouponList />
@@ -263,19 +307,18 @@ const headerOverlayOpacity = computed(() => {
     background-color: #ffffff;
     line-height: 1;
     position: relative;
-    min-height: calc(100vh - 100rpx - var(--safe-area-inset-bottom));
     padding: 0 32rpx;
 
-    .home-header-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        background-color: #ed6b66;
-        border-radius: 10rpx 10rpx 0rpx 0rpx;
-        z-index: 99;
-        pointer-events: none; // 确保不影响点击事件
-    }
+    // .home-header-overlay {
+    //     position: fixed;
+    //     top: 0;
+    //     left: 0;
+    //     right: 0;
+    //     background-color: #ed6b66;
+    //     border-radius: 10rpx 10rpx 0rpx 0rpx;
+    //     z-index: 99;
+    //     pointer-events: none; // 确保不影响点击事件
+    // }
 
     .home-header {
         position: relative;
@@ -299,10 +342,9 @@ const headerOverlayOpacity = computed(() => {
         }
 
         .home-header-card {
-            height: 275rpx;
             border-radius: 32rpx;
             margin-bottom: 20rpx;
-            padding: 38rpx 32rpx 0;
+            padding: 38rpx 32rpx 32rpx 32rpx;
         }
 
         .home-header-avatar-info {
@@ -318,6 +360,19 @@ const headerOverlayOpacity = computed(() => {
                 font-weight: 400;
                 color: rgba(255,255,255,0.7);
                 margin-bottom: 20rpx;
+                display:flex;
+                justify-content: space-between;
+              
+                .number-count{
+                    display:flex;
+                    align-items: center;
+                     font-size:24rpx;
+                     height:32rpx;
+                     line-height:32rpx;
+                }
+                .income-name{
+                    margin-left:6rpx;
+                }
             }
 
             .home-header-balance-num {
@@ -359,49 +414,66 @@ const headerOverlayOpacity = computed(() => {
         }
 
         .home-header-tips {
-            display: flex;
-            position: relative;
-            z-index: 1;
-            margin-top: 44rpx;
-
+            display: grid;
+            margin-top: 32rpx;
+            grid-template-columns:  1fr 1.2fr 1.2fr ; // 两列布局
+            gap:20rpx;
             .home-header-tips-item {
                 flex: 1;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
-                gap: 20rpx;
+                gap: 15rpx;
                 font-weight: 500;
                 font-size: 34rpx;
                 color: #ffffff;
                 line-height: 1;
                 position: relative;
-
-                &:not(:last-child):after {
-                    content: '';
-                    position: absolute;
-                    top: 15%;
-                    right: 0;
-                    transform: translateY(-50%);
-                    width: 2px;
-                    height: 24rpx;
-                    background: #ffffff;
-                }
-
+                
                 .home-header-tips-item-num {
                     text-align: left;
                     font-family: D-DIN Exp, D-DIN Exp;
                     font-weight: 400;
                     font-size: 40rpx;
+                    padding-left:26rpx;
                 }
 
                 .home-header-tips-item-des {
+                    padding-left:26rpx;
+                    border-left:1rpx solid #fff;
                     font-size: 24rpx;
                     color: rgba(255,255,255,0.7);
                 }
+            &:first-child{
+                .home-header-tips-item-des{
+                     padding-left:0;
+                    border-left:none;
+                }
+                .home-header-tips-item-num{
+                     padding-left:0;
+                }
+             }
+             &:nth-of-type(4){
+                .home-header-tips-item-des{
+                     padding-left:0;
+                    border-left:none;
+                }
+                .home-header-tips-item-num{
+                     padding-left:0;
+                }
+             }
             }
         }
     }
-
+    .w-100{
+        width:100%;
+    }
+    .header-box{
+        width:100%;
+        display:flex;
+        justify-content: space-between;
+        align-items: center;
+    }
     // 邀请新人
     .invite-header {
         background: #ffffff;

src/pages/income/income.vue

@@ -47,13 +47,13 @@ const incomeList = ref([
     amount: "58.00",
     createTime: "2026-05-20 19:00:00",
     couponName: "优惠券3",
-    status: "pending",
+    status: "blue",
   },
 ]);
 
 function handleViewDetail(item) {
   uni.navigateTo({
-    url: "/pages-C/income/invitation",
+    url: "/pages-C/income/list/writeOff",
   });
 }
 const form = ref({});
@@ -61,36 +61,37 @@ const visibleNoticeList = computed(() => {
   const data = form.value || {};
   return [
     {
-      title: "累计收益(元)",
+      title: "分享收益(元)",
       content: data.totalIncome || 0,
-      page: "/pages-C/income/incomeCumulative",
-    },
-    {
-      title: "累计提现(元)",
-      content: data.totalWithdraw || 0,
-      percentage: data.totalWithdrawPercent || "76.76%",
-      page: "/pages-C/income/incomeMoney",
+      page: "/pages-C/share/shareInfo",
     },
+
     {
-      title: "银行卡(张)",
+      title: "核销收益(张)",
       content: data.bankCards || 0,
-      page: "/pages-C/my/cumulativeGroup",
+      page: "/pages-C/my/myWriteOff",
     },
     {
       title: "邀新收益(元)",
       content: data.inviteIncome || 0,
       percentage: data.inviteIncomePercent || "45.38%",
-      page: "/pages-C/income/incomeInvitation",
+      page: "/pages-C/my/myNewUsers",
     },
     {
-      title: "发券收益(元)",
+      title: "团员收益(元)",
       content: data.shareIncome || 0,
-      page: "/pages-C/income/incomeSend",
+      page: "/pages-C/my/myGroup",
+    },
+    {
+      title: "累计提现(元)",
+      content: data.totalWithdraw || 0,
+      percentage: data.totalWithdrawPercent || "76.76%",
+      page: "/pages-C/income/incomeMoney",
     },
     {
-      title: "核销收益(元)",
+      title: "银行卡(元)",
       content: data.writeOffIncome || 0,
-      page: "/pages-C/income/incomeCancel",
+      page: "/pages-C/my/myWriteOff",
     },
   ];
 });
@@ -103,22 +104,44 @@ function listInfo(item) {
   }
 }
 
-const classShow = ref(false);
+const classItem = ref({ set: {}, type: {} });
+const indexMap = ref({
+  type: -1,
+  set: -1,
+});
+
+const showMap = ref({
+  type: false,
+  set: false,
+});
+
+const tabsIndex = ref(0);
+const tabs = ref([
+  { label: "核销奖励", type: "0" },
+  { label: "邀请新人", type: "1" },
+  { label: "团员核销奖励", type: "2" },
+  { label: "分享奖励", type: "3" },
+]);
+
+function tabClick(index) {
+  tabsIndex.value = index;
+}
 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;
-  classShow.value = false;
-  classItem.value = item;
+
+const settlementTabs = ref([
+  { label: "待结算", type: "1" },
+  { label: "已结算", type: "2" },
+]);
+
+function classClick(e, item, tabName) {
+  indexMap.value[tabName] = e;
+  showMap.value[tabName] = false;
+  classItem.value[tabName] = item;
 }
 
 //滚动
@@ -190,39 +213,47 @@ const handleCancel = () => {
             <view class="notice-content">{{ item.content }}</view>
           </view>
         </view>
+      </view>
+    </view>
 
+    <view class="filter-cont">
+      <view class="tabs-box">
+        <view class="tabs-list" v-for="(item,index) in tabs" :key="index" :class='{active:tabsIndex==index}'
+          @click=tabClick(index)>
+          {{item.label}}
+        </view>
       </view>
 
       <view class='income-select'>
         <view class='income-time' @click='showPicker=true'>
-          <view class='income-time-name'>2026 05.10-2026 05.12 </view>
-          <u--image class='income-down' :src="getImageUrl('@img/income/down.png')" mode="aspectFit" width="18rpx"
-            height="18rpx">
-          </u--image>
+          <view class='income-today'>今天 </view>
+          <view class="stat-divider"></view>
         </view>
-        <view class='income-time' @click='classShow=true'>
-          <view class='income-time-name'>{{classItem.label?classItem.label:'选择分类'}} </view>
-          <u--image class='income-down' :src="getImageUrl('@img/income/down.png')" mode="aspectFit" width="18rpx"
-            height="18rpx">
-          </u--image>
+        <view class='income-time' @click='showPicker=true'>
+          <view class='income-time-name'>日期筛选 </view>
+          <text class="caret" />
+          <view class="stat-divider"></view>
+        </view>
+        <view class='income-time' @click='showMap.type=true'>
+          <view class='income-time-name'>{{classItem.type.label?classItem.type.label:'选择分类'}} </view>
+          <text class="caret" />
+          <view class="stat-divider"></view>
         </view>
-        <view class='income-time'>
-          <view class='income-time-name'>结算状态</view>
-          <u--image class='income-down' :src="getImageUrl('@img/income/down.png')" mode="aspectFit" width="18rpx"
-            height="18rpx">
-          </u--image>
+        <view class='income-time' @click='showMap.set=true'>
+          <view class='income-time-name'>{{classItem.set.label?classItem.set.label:'结算状态'}} </view>
+          <text class="caret" />
         </view>
       </view>
     </view>
     <!-- 列表 -->
     <view class="income-detail-content">
-      <view v-for="item in incomeList" :key="item.id" class="income-card">
+      <view v-for="item in incomeList" :key="item.id" class="income-card" @click="handleViewDetail(item)">
         <view class="card-header">
           <view class="title-tag">
             <view class="tag-line"></view>
             <text class="tag-text">{{ item.title }}</text>
           </view>
-          <view class="view-detail" @click="handleViewDetail(item)">
+          <view class="view-detail">
             <text class="detail-text">查看详情</text>
             <u--image class='income-right' :src="getImageUrl('@img/income/arrow-right.png')" mode="aspectFit"
               width="32rpx" height="32rpx">
@@ -258,11 +289,25 @@ const handleCancel = () => {
   </view>
 
   <!-- 选择分类 -->
-  <Upopup :isShow="classShow" title='选择分类' @close='classShow=false' :isFooter='false'>
+  <Upopup :isShow="showMap.type" title='选择分类' @close='showMap.type=false' :isFooter='false'>
+    <view class="classification-cont">
+      <view class='classification-list' v-for='(item,index) in rewardTabs' :key='index'
+        @click='classClick(index,item,"type")'>
+        <view class='classification-label'>{{ item.label }}</view>
+        <u--image class='selected-icon' v-show='indexMap.type==index' :src="getImageUrl('@img/income/selected.png')"
+          mode="aspectFit" width="32rpx" height="32rpx">
+        </u--image>
+      </view>
+    </view>
+  </Upopup>
+
+  <!-- 结算状态 -->
+  <Upopup :isShow="showMap.set" title='结算状态' @close='showMap.set=false' :isFooter='false'>
     <view class="classification-cont">
-      <view class='classification-list' v-for='(item,index) in rewardTabs' :key='index' @click='classClick(index,item)'>
+      <view class='classification-list' v-for='(item,index) in settlementTabs' :key='index'
+        @click='classClick(index,item,"set")'>
         <view class='classification-label'>{{ item.label }}</view>
-        <u--image class='selected-icon' v-show='classIndex==index' :src="getImageUrl('@img/income/selected.png')"
+        <u--image class='selected-icon' v-show='indexMap.set==index' :src="getImageUrl('@img/income/selected.png')"
           mode="aspectFit" width="32rpx" height="32rpx">
         </u--image>
       </view>
@@ -278,7 +323,7 @@ const handleCancel = () => {
 .page-container {
   min-height: 100vh;
   background-color: #f8f8fa;
-
+  padding-bottom: 32rpx;
   // 顶部渐变背景
   .page-header-bg {
     position: absolute;
@@ -347,6 +392,29 @@ const handleCancel = () => {
     }
   }
 }
+.filter-cont {
+  background: #fff;
+  padding: 24rpx 32rpx 28rpx 32rpx;
+  box-sizing: border-box;
+  margin: 32rpx 0;
+
+  .tabs-box {
+    display: flex;
+    justify-content: space-between;
+    .tabs-list {
+      height: 52rpx;
+      line-height: 52rpx;
+      color: #1d2129;
+      font-size: 30rpx;
+      border-bottom: 6rpx solid transparent;
+      font-weight: 600;
+      &.active {
+        border-bottom: 6rpx solid #ff5365;
+        color: #ff5365;
+      }
+    }
+  }
+}
 
 .notice-container {
   margin-top: 46rpx;
@@ -369,24 +437,53 @@ const handleCancel = () => {
   right: 0;
 }
 .income-select {
-  margin: 40rpx 0 24rpx 0;
+  margin-top: 40rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  overflow-x: auto;
+  white-space: nowrap;
+  &::-webkit-scrollbar {
+    display: none;
+  }
   .income-time-name {
     font-size: 26rpx;
     color: #333;
   }
   .income-time {
     display: flex;
+    align-items: center;
+    height: 44rpx;
+    line-height: 44rpx;
   }
-  .income-down {
-    margin-top: -4rpx;
+  .income-today {
+    padding: 0 30rpx;
+    border-radius: 999rpx;
+    background: #f7f8fa;
+    display: flex;
+    height: 44rpx;
+    line-height: 44rpx;
+    background: #ff5365;
+    color: #fff;
+  }
+  .caret {
+    width: 0;
+    height: 0;
+    margin-left: 8rpx;
+    border-left: 7rpx solid transparent;
+    border-right: 7rpx solid transparent;
+    border-top: 9rpx solid #333333;
+  }
+  .stat-divider {
+    width: 1rpx;
+    height: 40rpx;
+    background: #d9d9d9;
+    margin: 0 32rpx;
   }
 }
 
 .income-detail-content {
-  padding: 20rpx;
+  padding: 0 20rpx;
   display: flex;
   flex-direction: column;
   gap: 20rpx;
@@ -534,6 +631,10 @@ const handleCancel = () => {
           background: #e8ffea;
           color: #00b42a;
         }
+        &.status-blue {
+          background: #e8f7ff;
+          color: #3491fa;
+        }
       }
     }
   }

src/pages/my/my.vue

@@ -35,24 +35,24 @@ const visibleNoticeList = computed(() => {
   const data = form.value || {};
   return [
     {
-      title: "发券收益(元)",
+      title: "分享收益(元)",
       content: data.totalIncome || 0,
-      page: "/pages-C/home/ranking",
+      page: "/pages-C/my/myShare",
     },
     {
       title: "邀新收益(元)",
       content: data.totalWithdraw || 0,
-      page: "/pages-C/income/incomeInvitation",
+      page: "/pages-C/my/myNewUsers",
     },
     {
       title: "核销收益(元)",
       content: data.bankCards || 0,
-      page: "/pages-C/income/incomeCancel",
+      page: "/pages-C/my/myWriteOff",
     },
     {
-      title: "累计提现(元)",
+      title: "团队收益(元)",
       content: data.inviteIncome || 0,
-      page: "/pages-C/income/incomeMoney",
+      page: "/pages-C/my/myGroup",
     },
   ];
 });
@@ -73,7 +73,7 @@ const inviteStatsList = computed(() => {
     {
       title: "累计团员",
       content: data.bankCards || 0,
-      page: "/pages-C/my/myCumulativeGroup",
+      page: "/pages-C/my/myCumulativeInvitation",
     },
   ];
 });
@@ -236,90 +236,50 @@ function listInfo(item) {
             <text class="stats-item-value">{{ item.content }}</text>
           </view>
         </view>
-      </view>
 
-      <view class="number-content">
-        <view class="invite-card">
-          <view class="invite-header">
-            <view class="invite-icon">
-              <u--image :src="getImageUrl('@img/me/user-transmit-filled.png')" mode="aspectFit" width="44rpx"
-                height="44rpx"></u--image>
-            </view>
-            <text class="invite-title">我的邀请</text>
-            <u--image :src="getImageUrl('@img/income/arrow-right.png')" mode="aspectFit" width="40rpx"
-              height="40rpx"></u--image>
-          </view>
-          <view class="invite-stats">
-            <view v-for="(item, index) in inviteStatsList" :key="index" class="invite-stat-item"
-              @click='listInfo(item)'>
-              <text class="invite-stat-label">{{ item.title }}</text>
-              <text class="invite-stat-value">{{ item.content }}</text>
+      </view>
+      <!-- 菜单 -->
+      <view class="me-header-menu">
+        <view class="me-header-menu-item" @click="menuClick('applyForm', watchUserStatus)">
+          <view class="me-header-menu-icon">
+            <image :src="getImageUrl('@img/me/my-icon1.png')" mode="aspectFill" />
+            <view class="me-header-menu-text">
+              申请发券人
             </view>
           </view>
+          <u--image :src="getImageUrl('@img/income/arrow-right.png')" mode="aspectFit" width="40rpx"
+            height="40rpx"></u--image>
         </view>
-
-        <view class="invite-card">
-          <view class="invite-header">
-            <view class="invite-icon">
-              <u--image :src="getImageUrl('@img/me/user-transmit-line.png')" mode="aspectFit" width="44rpx"
-                height="44rpx"></u--image>
-            </view>
-            <text class="invite-title">发券统计</text>
-            <u--image :src="getImageUrl('@img/income/arrow-right.png')" mode="aspectFit" width="40rpx"
-              height="40rpx"></u--image>
-
-          </view>
-          <view class="invite-stats">
-            <view v-for="(item, index) in inviteLineList" :key="index" class="invite-stat-item" @click='listInfo(item)'>
-              <text class="invite-stat-label">{{ item.title }}</text>
-              <text class="invite-stat-value">{{ item.content }}</text>
+        <view class="me-header-menu-item" @click="menuClick('myInviter', getInviteInfo)">
+          <view class="me-header-menu-icon">
+            <image :src="getImageUrl('@img/me/my-icon2.png')" mode="aspectFill" />
+            <view class="me-header-menu-text">
+              我的邀请人
             </view>
           </view>
+          <u--image :src="getImageUrl('@img/income/arrow-right.png')" mode="aspectFit" width="40rpx"
+            height="40rpx"></u--image>
         </view>
-
-        <!-- 菜单 -->
-        <view class="me-header-menu">
-          <view class="me-header-menu-item" @click="menuClick('applyForm', watchUserStatus)">
-            <view class="me-header-menu-icon">
-              <image :src="getImageUrl('@img/me/coupon-need.png')" mode="aspectFill" />
-              <view class="me-header-menu-text">
-                申请发券人
-              </view>
-            </view>
-            <u--image :src="getImageUrl('@img/income/arrow-right.png')" mode="aspectFit" width="40rpx"
-              height="40rpx"></u--image>
-          </view>
-          <view class="me-header-menu-item" @click="menuClick('myInviter', getInviteInfo)">
-            <view class="me-header-menu-icon">
-              <image :src="getImageUrl('@img/me/inviter.png')" mode="aspectFill" />
-              <view class="me-header-menu-text">
-                我的邀请人
-              </view>
+        <view class="me-header-menu-item" @click="menuClick('shareFriend', isCouponIssuer)">
+          <view class="me-header-menu-icon">
+            <image :src="getImageUrl('@img/me/my-icon3.png')" mode="aspectFill" />
+            <view class="me-header-menu-text">
+              邀请好友
             </view>
-            <u--image :src="getImageUrl('@img/income/arrow-right.png')" mode="aspectFit" width="40rpx"
-              height="40rpx"></u--image>
           </view>
-          <view class="me-header-menu-item" @click="menuClick('shareFriend', isCouponIssuer)">
-            <view class="me-header-menu-icon">
-              <image :src="getImageUrl('@img/me/share.png')" mode="aspectFill" />
-              <view class="me-header-menu-text">
-                邀请好友
-              </view>
+          <u--image :src="getImageUrl('@img/income/arrow-right.png')" mode="aspectFit" width="40rpx"
+            height="40rpx"></u--image>
+        </view>
+        <view class="me-header-menu-item" @click="menuClick('settingPage')">
+          <view class="me-header-menu-icon">
+            <image :src="getImageUrl('@img/me/my-icon4.png')" mode="aspectFill" />
+            <view class="me-header-menu-text">
+              设置
             </view>
-            <u--image :src="getImageUrl('@img/income/arrow-right.png')" mode="aspectFit" width="40rpx"
-              height="40rpx"></u--image>
           </view>
-          <view class="me-header-menu-item" @click="menuClick('settingPage')">
-            <view class="me-header-menu-icon">
-              <image :src="getImageUrl('@img/me/setting.png')" mode="aspectFill" />
-              <view class="me-header-menu-text">
-                设置
-              </view>
-            </view>
-            <u--image :src="getImageUrl('@img/income/arrow-right.png')" mode="aspectFit" width="40rpx"
-              height="40rpx"></u--image>
+          <u--image :src="getImageUrl('@img/income/arrow-right.png')" mode="aspectFit" width="40rpx"
+            height="40rpx"></u--image>
 
-          </view>
         </view>
       </view>
     </view>
@@ -434,78 +394,11 @@ function listInfo(item) {
     margin: 0 20rpx;
   }
 
-  .number-content {
-    background: #fff;
-    margin-top: 32rpx;
-    border-radius: 32rpx;
-  }
-
-  .invite-card {
-    background: #ffffff;
-    border-radius: 32rpx;
-    padding: 0 0 32rpx;
-    box-sizing: border-box;
-
-    .invite-header {
-      display: flex;
-      align-items: center;
-      padding: 0 32rpx;
-      height: 88rpx;
-      position: relative;
-
-      .invite-icon {
-        width: 44rpx;
-        height: 44rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .invite-title {
-        flex: 1;
-        margin-left: 16rpx;
-        font-weight: 400;
-        font-size: 30rpx;
-        color: #000000;
-        line-height: 1;
-      }
-    }
-
-    .invite-stats {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      background: rgba(247, 248, 250, 0.7);
-      margin: 0 32rpx;
-      border-radius: 16rpx;
-      height: 134rpx;
-
-      .invite-stat-item {
-        display: flex;
-        flex-direction: column;
-        gap: 8rpx;
-        align-items: center;
-
-        .invite-stat-label {
-          font-weight: 400;
-          font-size: 22rpx;
-          color: #86909c;
-          line-height: 1;
-        }
-
-        .invite-stat-value {
-          font-weight: 600;
-          font-size: 32rpx;
-          color: #333333;
-          line-height: 1.1;
-        }
-      }
-    }
-  }
   .me-header-menu {
     background: #ffffff;
     padding: 0 32rpx;
     box-sizing: border-box;
+    margin-top: 32rpx;
 
     .me-header-menu-item {
       height: 88rpx;