微信小程序测试页面demo实现

js代码

const obj = {
  '20250905': [{
      title: '顾问核销页面', // 子标题
      fatherTitle: '孕妈认证', // 父标题
      AccountType: 1,
      pageUrl: '/packageIntegratedFeature/pages/newUserGiftBagApplyIdentity/counselorRedemptionPage/counselorRedemptionPage',
      params: ''
    },
    {
      title: '会员端首页',
      fatherTitle: '孕妈认证',
      AccountType: 2,
      pageUrl: '/packageIntegratedFeature/pages/newUserGiftBagApplyIdentity/newUserGiftBagApplyIdentity',
      params: ''
    },
    {
      title: '选择门店页面',
      fatherTitle: '孕妈认证',
      AccountType: 3,
      pageUrl: '/packageIntegratedFeature/pages/newUserGiftBagApplyIdentity/selectStorePage/selectStorePage',
      params: ''
    },
    {
      title: '选择位置页面',
      fatherTitle: '孕妈认证',
      AccountType: 4,
      pageUrl: '/packageIntegratedFeature/pages/newUserGiftBagApplyIdentity/selectLocationPage/selectLocationPage',
      params: ''
    },
    {
      title: '宝宝认证页面',
      fatherTitle: '孕妈认证',
      AccountType: 5,
      pageUrl: '/packageIntegratedFeature/pages/newUserGiftBagApplyIdentity/babyAuth/babyAuth',
      params: 'pageType=1'
    }
  ],
  '20250906': {
    title: '其他页面',
    fatherTitle: '其他',
    pageUrl: '/packageIntegratedFeature/pages/newUserGiftBagApplyIdentity/newUserGiftBagApplyIdentity',
    params: ''
  }
}

Page({
  data: {
    sections: []
  },
  onLoad(options) {
    this.setData({
      sections: this.normalizeConfig()
    })
  },
  /* 1. 统一转成数组，2. 父标题直接取 fatherTitle */
  normalizeConfig() {
    return Object.keys(obj).map(date => {
      const cfg = obj[date]
      // 数组/对象都能拿到第一条数据，取出 fatherTitle
      const first = Array.isArray(cfg) ? cfg[0] : cfg
      return {
        date,
        sectionTitle: first.fatherTitle, // ← 关键改动
        list: Array.isArray(cfg) ? cfg : [cfg]
      }
    })
  },
  goPage(e) {
    const {
      date,
      accounttype = -1
    } = e.currentTarget.dataset
    this.navigateByConfig(date, accounttype)
  },
  navigateByConfig(type, accountType) {
    const cfg = obj[type];
    if (!cfg) {
      console.warn(`[navigateByConfig] 未找到 ${type} 的配置`);
      return;
    }
    let target = null;
    if (Array.isArray(cfg)) {
      if (accountType == null) {
        console.warn('[navigateByConfig] 数组类型必须提供 AccountType');
        return;
      }
      target = cfg.find(v => v.AccountType === accountType);
      if (!target) {
        console.warn(`[navigateByConfig] ${type} 下找不到 AccountType=${accountType}`);
        return;
      }
    } else {
      target = cfg;
    }
    const {
      pageUrl,
      params
    } = target;
    const url = params ? `${pageUrl}?${params}` : pageUrl;
    wx.navigateTo({
      url
    });
  }
})

wxml代码

<view wx:for="{{sections}}" wx:key="date" class="section">
  <view class="fgxian">-----------{{item.sectionTitle}}-----------</view>
  <view class="container">
    <view wx:for="{{item.list}}" wx:for-item="sub" wx:key="AccountType"
          class="item" 
          bindtap="goPage"
          data-date="{{item.date}}"
          data-accounttype="{{sub.AccountType}}">
      {{sub.title}}
    </view>
  </view>
</view>

wxss代码

.container {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150rpx, 1fr));
  grid-template-rows: 1fr 1fr;
  gap: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  margin: 0 auto;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
  padding: 10rpx;
}

.item {
  border: 1rpx solid;
  text-align: center;
  padding: 10rpx 0rpx;
  border-radius: 50rpx;
  font-size: 20rpx;
  color: #26a0da;
  background: #4AC29A;
  background: -webkit-linear-gradient(to right, #BDFFF3, #4AC29A);
  background: linear-gradient(to right, #BDFFF3, #4AC29A);
}

.fgxian{
  width: 100vw;
  text-align: center;
  margin-bottom: 20rpx;
}