test/pages/index/index.js

// index.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Component({
  data: {
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
    hasUserInfo: false,
    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
    
    // 轮播图数据
    swiperList: [
      { id: 1, image: 'https://img.yzcdn.cn/vant/cat.jpeg', title: '夏季护肤特惠' },
      { id: 2, image: 'https://img.yzcdn.cn/vant/cat.jpeg', title: '面部SPA体验' },
      { id: 3, image: 'https://img.yzcdn.cn/vant/cat.jpeg', title: '新客专享优惠' }
    ],
    
    // 热门服务
    hotServices: [
      { id: 1, name: '面部护理', icon: 'help', color: '#FF5F15' },
      { id: 2, name: '身体按摩', icon: 'time', color: '#07C160' },
      { id: 3, name: '美甲服务', icon: 'image', color: '#FF9500' },
      { id: 4, name: '美发造型', icon: 'shop', color: '#2878FF' }
    ],
    
    // 推荐项目
    recommendServices: [
      { 
        id: 1, 
        name: '深层清洁面部护理', 
        desc: '去除老化角质，深层清洁毛孔', 
        price: 298, 
        originalPrice: 398,
        image: 'https://img.yzcdn.cn/vant/cat.jpeg',
        sales: 256
      },
      { 
        id: 2, 
        name: '精油SPA按摩', 
        desc: '舒缓压力，放松身心', 
        price: 398, 
        originalPrice: 498,
        image: 'https://img.yzcdn.cn/vant/cat.jpeg',
        sales: 198
      },
      { 
        id: 3, 
        name: '日式美甲套餐', 
        desc: '多款式选择，持久显色', 
        price: 158, 
        originalPrice: 258,
        image: 'https://img.yzcdn.cn/vant/cat.jpeg',
        sales: 312
      }
    ],
    
    // 美容师推荐
    beauticians: [
      {
        id: 1,
        name: '王美丽',
        title: '高级美容师',
        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
        experience: '8年经验',
        specialty: '面部护理、身体SPA'
      },
      {
        id: 2,
        name: '李专家',
        title: '资深美容顾问',
        avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
        experience: '10年经验',
        specialty: '皮肤管理、抗衰老'
      }
    ]
  },
  methods: {
    // 事件处理函数
    bindViewTap() {
      wx.navigateTo({
        url: '../logs/logs'
      })
    },
    
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail
      const { nickName } = this.data.userInfo
      this.setData({
        "userInfo.avatarUrl": avatarUrl,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
    
    onInputChange(e) {
      const nickName = e.detail.value
      const { avatarUrl } = this.data.userInfo
      this.setData({
        "userInfo.nickName": nickName,
        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
      })
    },
    
    getUserProfile(e) {
      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
      wx.getUserProfile({
        desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.log(res)
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    },
    
    // 跳转到服务详情
    goToServiceDetail(e) {
      const id = e.currentTarget.dataset.id;
      wx.navigateTo({
        url: `/pages/appointment/index?serviceId=${id}`
      });
    },
    
    // 跳转到分类页面
    goToCategory(e) {
      const categoryId = e.currentTarget.dataset.id;
      wx.switchTab({
        url: '/pages/category/index',
        success: () => {
          // 可以通过页面栈获取分类页面实例，并设置选中的分类
          const pages = getCurrentPages();
          const categoryPage = pages[pages.length - 1];
          if (categoryPage && categoryPage.route === 'pages/category/index') {
            categoryPage.setData({
              activeCategory: categoryId
            });
          }
        }
      });
    },
    
    // 跳转到美容师详情
    goToBeauticianDetail(e) {
      const id = e.currentTarget.dataset.id;
      wx.navigateTo({
        url: `/pages/appointment/index?beauticianId=${id}`
      });
    },
    
    // 页面显示时，初始化底部标签栏
    pageShow() {
      if (typeof this.getTabBar === 'function' && this.getTabBar()) {
        this.getTabBar().init();
      }
    }
  },
  
  lifetimes: {
    attached() {
      // 页面创建时执行
    },
    
    detached() {
      // 页面销毁时执行
    }
  },
  
  pageLifetimes: {
    show() {
      // 页面显示时执行
      this.pageShow();
    }
  }
})