init

pages/tabpages/service/service.js

@@ -0,0 +1,115 @@
+Page({
+  data: {
+    services: [
+      {
+        id: 1,
+        title: '项目定制',
+        subtitle: 'custom',
+        icon: 'setting-o',
+        path: '/pages/subpages/services/custom/custom'
+      },
+      {
+        id: 2,
+        title: '代码部署',
+        subtitle: 'deploy',
+        icon: 'cluster-o',
+        path: '/pages/subpages/services/deploy/deploy'
+      },
+      {
+        id: 3,
+        title: '解决问题',
+        subtitle: 'problem',
+        icon: 'question-o',
+        path: '/pages/subpages/services/problem/problem'
+      },
+      {
+        id: 4,
+        title: '部署上线',
+        subtitle: 'online',
+        icon: 'arrow-up',
+        path: '/pages/subpages/services/online/online'
+      },
+      {
+        id: 5,
+        title: '环境安装',
+        subtitle: 'environment',
+        icon: 'desktop-o',
+        path: '/pages/subpages/services/environment/environment'
+      },
+      {
+        id: 6,
+        title: '代码讲解',
+        subtitle: 'code',
+        icon: 'comment-o',
+        path: '/pages/subpages/services/code/code'
+      },
+      {
+        id: 7,
+        title: '文档服务',
+        subtitle: 'document',
+        icon: 'description',
+        path: '/pages/subpages/services/document/document'
+      },
+      {
+        id: 8,
+        title: '二次开发',
+        subtitle: 'develop',
+        icon: 'edit',
+        path: '/pages/subpages/services/develop/develop'
+      },
+      {
+        id: 9,
+        title: '项目加急',
+        subtitle: 'urgent',
+        icon: 'setting-o',
+        path: '/pages/subpages/services/urgent/urgent'
+      }
+    ]
+  },
+
+  navigateToService(e) {
+    const index = e.currentTarget.dataset.index;
+    const service = this.data.services[index];
+    wx.navigateTo({
+      url: service.path
+    });
+  },
+
+  onShare() {
+    wx.showShareMenu({
+      withShareTicket: true,
+      menus: ['shareAppMessage', 'shareTimeline']
+    });
+  },
+
+  onShareAppMessage() {
+    return new Promise((resolve) => {
+      wx.showLoading({
+        title: '生成分享图片...'
+      });
+      // 获取页面截图
+      wx.createSelectorQuery()
+        .select('.grid-container')
+        .fields({
+          size: true,
+          scrollOffset: true
+        })
+        .exec((res) => {
+          wx.hideLoading();
+          resolve({
+            title: '南音源码项目服务',
+            path: '/pages/tabpages/service/service',
+            imageUrl: ''  // 微信会自动使用页面截图
+          });
+        });
+    });
+  },
+
+  onShareTimeline() {
+    return {
+      title: '南音源码项目服务',
+      query: '',
+      imageUrl: ''  // 微信会自动使用页面截图
+    };
+  }
+}); 

pages/tabpages/service/service.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/tabpages/service/service.wxml

@@ -0,0 +1,17 @@
+<view class="container">
+  <view class="header">
+    <text class="title">敬请期待更多服务</text>
+  </view>
+
+  <view class="grid-container">
+    <view class="grid-item" wx:for="{{services}}" wx:key="id" bindtap="navigateToService" data-index="{{index}}">
+      <view class="grid-icon">
+        <van-icon name="{{item.icon}}" color="#1D90FB" size="40px" />
+      </view>
+      <view class="grid-text">
+        <text class="grid-title">{{item.title}}</text>
+        <text class="grid-subtitle">{{item.subtitle}}</text>
+      </view>
+    </view>
+  </view>
+</view> 

pages/tabpages/service/service.wxss

@@ -0,0 +1,56 @@
+.container {
+  padding: 20rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.header {
+  text-align: center;
+  padding: 30rpx 0;
+}
+
+.title {
+  font-size: 32rpx;
+  color: #333;
+  font-weight: 500;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20rpx;
+  padding: 20rpx;
+}
+
+.grid-item {
+  background-color: #ffffff;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.grid-icon {
+  width: 80rpx;
+  height: 80rpx;
+  margin-bottom: 10rpx;
+}
+
+.grid-text {
+  text-align: center;
+}
+
+.grid-title {
+  font-size: 28rpx;
+  color: #333;
+  display: block;
+}
+
+.grid-subtitle {
+  font-size: 24rpx;
+  color: #999;
+  display: block;
+  margin-top: 4rpx;
+}