完善个人中心界面

pages.json

@@ -143,6 +143,110 @@
       "style": {
         "navigationBarTitleText": "选择地块"
       }
+    },
+    {
+      "path": "pages/service/mall",
+      "style": {
+        "navigationBarTitleText": "农资商城",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black",
+        "enablePullDownRefresh": true
+      }
+    },
+    {
+      "path": "pages/service/mall-detail",
+      "style": {
+        "navigationBarTitleText": "商品详情",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/service/sales",
+      "style": {
+        "navigationBarTitleText": "农品交易",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black"
+      }
+    },
+    {
+      "path": "pages/service/expert",
+      "style": {
+        "navigationBarTitleText": "专家咨询",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black"
+      }
+    },
+    {
+      "path": "pages/service/expert-detail",
+      "style": {
+        "navigationBarTitleText": "专家详情",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/service/expert-chat",
+      "style": {
+        "navigationBarTitleText": "专家咨询",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/service/certification",
+      "style": {
+        "navigationBarTitleText": "绿色认证申请",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black"
+      }
+    },
+    {
+      "path": "pages/service/insurance",
+      "style": {
+        "navigationBarTitleText": "保险接入",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black"
+      }
+    },
+    {
+      "path": "pages/service/sales-publish",
+      "style": {
+        "navigationBarTitleText": "发布农产品",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/service/my-publish",
+      "style": {
+        "navigationBarTitleText": "我的发布",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/service/purchase-publish",
+      "style": {
+        "navigationBarTitleText": "发布收购信息",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black",
+        "enablePullDownRefresh": false
+      }
+    },
+    {
+      "path": "pages/service/sales-detail",
+      "style": {
+        "navigationBarTitleText": "产品详情",
+        "navigationBarBackgroundColor": "#ffffff",
+        "navigationBarTextStyle": "black",
+        "enablePullDownRefresh": false
+      }
     }
   ],
   "tabBar": {

pages/service/certification.vue

@@ -0,0 +1,434 @@
+<template>
+  <view class="certification-container">
+    <!-- 顶部横幅 -->
+    <view class="banner-section">
+      <view class="banner-content">
+        <image class="banner-bg" src="/static/images/agriculture/rice-field1.svg" mode="aspectFill"></image>
+        <view class="banner-overlay">
+          <view class="banner-text">
+            <text class="main-title">绿色认证服务</text>
+            <text class="sub-title">推动绿色农业发展，打造生态优质农产品</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 什么是绿色认证 -->
+    <view class="info-card">
+      <view class="card-header">
+        <text class="card-title">什么是绿色认证？</text>
+      </view>
+      <view class="card-content">
+        <text class="description-text">
+          绿色食品认证是指符合无污染、无公害标准的农产品生产体系，经权威机构审核颁发的绿色标识，具有较高市场认可度。绿色认证不仅代表着农产品的高品质和安全性，更是农业可持续发展的重要标志，有助于提升农产品市场竞争力和消费者信任度。
+        </text>
+      </view>
+    </view>
+
+    <!-- 认证流程 -->
+    <view class="info-card">
+      <view class="card-header">
+        <text class="card-title">认证流程</text>
+      </view>
+      <view class="card-content">
+        <view class="process-list">
+          <view class="process-item">
+            <view class="process-step">
+              <view class="step-number">1</view>
+            </view>
+            <view class="process-content">
+              <text class="step-title">提交申请</text>
+              <text class="step-desc">准备相关资料，提交绿色认证申请</text>
+            </view>
+          </view>
+          
+          <view class="process-item">
+            <view class="process-step">
+              <view class="step-number">2</view>
+            </view>
+            <view class="process-content">
+              <text class="step-title">资料审核</text>
+              <text class="step-desc">专业机构进行现场检查和资料评审</text>
+            </view>
+          </view>
+          
+          <view class="process-item">
+            <view class="process-step">
+              <view class="step-number">3</view>
+            </view>
+            <view class="process-content">
+              <text class="step-title">获取证书</text>
+              <text class="step-desc">审核通过后颁发绿色认证证书</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 认证优势 -->
+    <view class="info-card">
+      <view class="card-header">
+        <text class="card-title">认证优势</text>
+      </view>
+      <view class="card-content">
+        <view class="advantage-list">
+          <view class="advantage-item">
+            <text class="advantage-text">提升农产品销售价格</text>
+          </view>
+          <view class="advantage-item">
+            <text class="advantage-text">增强产品质量安全保障</text>
+          </view>
+          <view class="advantage-item">
+            <text class="advantage-text">可用于政府扶持与项目申报</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 适用范围 -->
+    <view class="info-card">
+      <view class="card-header">
+        <text class="card-title">适用范围</text>
+      </view>
+      <view class="card-content">
+        <view class="scope-content">
+          <text class="scope-text">
+            适用于种植类地块（如水稻、玉米、葡萄等农作物），申请人需具备土地权属证明或经营权证明，并通过农残检测。认证范围涵盖农产品生产、加工、包装、储存、运输等全产业链环节，确保产品从田间到餐桌的全程质量安全。
+          </text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 联系方式 -->
+    <view class="info-card">
+      <view class="card-header">
+        <text class="card-title">联系方式</text>
+      </view>
+      <view class="card-content">
+        <view class="contact-list">
+          <view class="contact-item">
+            <view class="contact-label">联系人：</view>
+            <text class="contact-value">李老师</text>
+          </view>
+          <view class="contact-item">
+            <view class="contact-label">联系电话：</view>
+            <text class="contact-phone" @click="makePhoneCall">400-123-4567</text>
+          </view>
+          <view class="contact-item">
+            <view class="contact-label">服务时间：</view>
+            <text class="contact-value">工作日 9:00-17:30</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部提示信息 -->
+    <view class="notice-card">
+      <view class="notice-content">
+        <text class="notice-text">
+          绿色认证服务需线下办理，平台仅提供政策引导与信息对接。如需办理，请拨打联系电话。
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'Certification',
+  methods: {
+    // 拨打电话
+    makePhoneCall() {
+      uni.makePhoneCall({
+        phoneNumber: '400-123-4567',
+        fail: (err) => {
+          console.log('拨打电话失败：', err);
+          uni.showToast({
+            title: '拨打电话失败',
+            icon: 'none'
+          });
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.certification-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: 40rpx;
+}
+
+// 顶部横幅
+.banner-section {
+  position: relative;
+  height: 400rpx;
+  overflow: hidden;
+}
+
+.banner-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.banner-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.banner-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, rgba(76, 175, 80, 0.85) 0%, rgba(46, 125, 50, 0.9) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.banner-text {
+  text-align: center;
+  color: #fff;
+  padding: 0 40rpx;
+}
+
+.main-title {
+  font-size: 52rpx;
+  font-weight: 700;
+  margin-bottom: 20rpx;
+  display: block;
+  letter-spacing: 2rpx;
+  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
+}
+
+.sub-title {
+  font-size: 30rpx;
+  opacity: 0.95;
+  line-height: 1.5;
+  display: block;
+  font-weight: 400;
+  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+}
+
+// 信息卡片
+.info-card {
+  margin: 20rpx;
+  background-color: #fff;
+  border-radius: 20rpx;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  border: 1rpx solid #f5f5f5;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  padding: 32rpx;
+  background: linear-gradient(135deg, #f8fffe 0%, #f0fdf4 100%);
+  border-bottom: 1rpx solid #e8f5e8;
+}
+
+
+
+.card-title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.card-content {
+  padding: 30rpx;
+}
+
+// 描述文字
+.description-text {
+  font-size: 30rpx;
+  color: #4a5568;
+  line-height: 1.7;
+  font-weight: 400;
+}
+
+// 认证流程
+.process-list {
+  display: flex;
+  flex-direction: column;
+  gap: 28rpx;
+}
+
+.process-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 24rpx;
+  padding: 24rpx;
+  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
+  border-radius: 16rpx;
+  border: 1rpx solid #e2e8f0;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-2rpx);
+    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
+  }
+}
+
+.process-step {
+  flex-shrink: 0;
+}
+
+.step-number {
+  width: 64rpx;
+  height: 64rpx;
+  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
+  color: #fff;
+  border-radius: 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  font-weight: 600;
+  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
+}
+
+.process-content {
+  flex: 1;
+  padding-top: 4rpx;
+}
+
+.step-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #2d3748;
+  margin-bottom: 12rpx;
+  display: block;
+}
+
+.step-desc {
+  font-size: 28rpx;
+  color: #718096;
+  line-height: 1.5;
+  display: block;
+}
+
+// 认证优势
+.advantage-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.advantage-item {
+  padding: 24rpx;
+  background: linear-gradient(135deg, #f8fff8 0%, #f0fdf4 100%);
+  border-radius: 16rpx;
+  border: 1rpx solid #e8f5e8;
+  transition: all 0.3s ease;
+  border-left: 4rpx solid #4CAF50;
+  
+  &:hover {
+    transform: translateY(-2rpx);
+    box-shadow: 0 8rpx 16rpx rgba(76, 175, 80, 0.1);
+  }
+}
+
+
+
+.advantage-text {
+  font-size: 30rpx;
+  color: #2c3e50;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+// 适用范围
+.scope-content {
+  padding: 28rpx;
+  background: linear-gradient(135deg, #f0fff4 0%, #ecfdf5 100%);
+  border-radius: 16rpx;
+  border: 1rpx solid #d1fae5;
+}
+
+.scope-text {
+  font-size: 30rpx;
+  color: #4a5568;
+  line-height: 1.7;
+  font-weight: 400;
+}
+
+// 联系方式
+.contact-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 24rpx;
+  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
+  border-radius: 12rpx;
+  border: 1rpx solid #e2e8f0;
+}
+
+.contact-label {
+  font-size: 30rpx;
+  color: #718096;
+  width: 150rpx;
+  flex-shrink: 0;
+  font-weight: 500;
+}
+
+.contact-value {
+  font-size: 30rpx;
+  color: #2d3748;
+  font-weight: 600;
+}
+
+.contact-phone {
+  font-size: 30rpx;
+  color: #4CAF50;
+  font-weight: 600;
+  padding: 8rpx 16rpx;
+  background-color: #f0fdf4;
+  border-radius: 8rpx;
+  border: 1rpx solid #d1fae5;
+  transition: all 0.3s ease;
+  
+  &:active {
+    transform: scale(0.98);
+    background-color: #dcfce7;
+  }
+}
+
+// 底部提示
+.notice-card {
+  margin: 20rpx;
+  background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
+  border: 1rpx solid #f9e79f;
+  border-radius: 16rpx;
+  padding: 28rpx;
+  box-shadow: 0 4rpx 12rpx rgba(255, 193, 7, 0.1);
+}
+
+.notice-content {
+  text-align: center;
+}
+
+
+
+.notice-text {
+  font-size: 28rpx;
+  color: #8d4e00;
+  line-height: 1.6;
+  flex: 1;
+  font-weight: 500;
+}
+</style> 

pages/service/expert-chat.vue

@@ -0,0 +1,654 @@
+<template>
+  <view class="chat-container">
+    <!-- 聊天消息列表 -->
+    <scroll-view 
+      class="message-list" 
+      scroll-y 
+      :scroll-top="scrollTop"
+      :scroll-with-animation="true"
+      @scroll="onScroll"
+    >
+      <view class="message-wrapper">
+        <!-- 日期分隔符 -->
+        <view class="date-divider" v-if="messageList.length > 0">
+          <text class="date-text">{{ getCurrentDate() }}</text>
+        </view>
+
+        <!-- 消息列表 -->
+        <view 
+          class="message-item"
+          :class="{ 'message-right': message.type === 'user', 'message-left': message.type === 'expert' }"
+          v-for="(message, index) in messageList"
+          :key="index"
+        >
+          <!-- 专家消息（左侧） -->
+          <template v-if="message.type === 'expert'">
+            <view class="avatar-container">
+              <image class="message-avatar" :src="expertInfo.avatar" mode="aspectFill"></image>
+            </view>
+            <view class="message-content-wrapper">
+              <view class="message-bubble expert-bubble">
+                <!-- 文本消息 -->
+                <text class="message-text" v-if="message.contentType === 'text'">{{ message.content }}</text>
+                
+                <!-- 图片消息 -->
+                <image 
+                  v-if="message.contentType === 'image'" 
+                  class="message-image" 
+                  :src="message.content" 
+                  mode="aspectFit"
+                  @click="previewImage(message.content)"
+                ></image>
+              </view>
+              <view class="message-time">{{ formatTime(message.timestamp) }}</view>
+            </view>
+          </template>
+
+          <!-- 用户消息（右侧） -->
+          <template v-else>
+            <view class="message-content-wrapper user-content">
+              <view class="message-bubble user-bubble">
+                <!-- 文本消息 -->
+                <text class="message-text" v-if="message.contentType === 'text'">{{ message.content }}</text>
+                
+                <!-- 图片消息 -->
+                <image 
+                  v-if="message.contentType === 'image'" 
+                  class="message-image" 
+                  :src="message.content" 
+                  mode="aspectFit"
+                  @click="previewImage(message.content)"
+                ></image>
+              </view>
+              <view class="message-time user-time">{{ formatTime(message.timestamp) }}</view>
+            </view>
+            <view class="avatar-container">
+              <image class="message-avatar" src="/static/icons/user icon.png" mode="aspectFill"></image>
+            </view>
+          </template>
+        </view>
+
+        <!-- 打字中状态 -->
+        <view class="typing-indicator" v-if="isTyping">
+          <view class="avatar-container">
+            <image class="message-avatar" :src="expertInfo.avatar" mode="aspectFill"></image>
+          </view>
+          <view class="typing-bubble">
+            <view class="typing-dots">
+              <view class="dot"></view>
+              <view class="dot"></view>
+              <view class="dot"></view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 输入区域 -->
+    <view class="input-area">
+      <!-- 图片预览 -->
+      <view class="image-preview" v-if="selectedImages.length > 0">
+        <view class="preview-list">
+          <view 
+            class="preview-item"
+            v-for="(image, index) in selectedImages"
+            :key="index"
+          >
+            <image class="preview-image" :src="image" mode="aspectFill"></image>
+            <view class="remove-btn" @click="removeImage(index)">
+              <text class="remove-icon">×</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 输入工具栏 -->
+      <view class="input-toolbar">
+        <!-- 添加图片按钮 -->
+        <view class="tool-btn" @click="chooseImage">
+          <image class="tool-icon" src="/static/icons/camera.png" mode="aspectFit"></image>
+        </view>
+
+        <!-- 输入框 -->
+        <view class="input-wrapper">
+          <textarea 
+            class="message-input"
+            v-model="inputMessage"
+            placeholder="请输入您的问题..."
+            placeholder-style="color: #999;"
+            :auto-height="true"
+            :maxlength="500"
+            @focus="onInputFocus"
+            @blur="onInputBlur"
+          ></textarea>
+        </view>
+
+        <!-- 发送按钮 -->
+        <view 
+          class="send-btn"
+          :class="{ active: canSend }"
+          @click="sendMessage"
+        >
+          <text class="send-text">发送</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      expertId: '',
+      expertName: '',
+      inputMessage: '',
+      selectedImages: [],
+      scrollTop: 0,
+      isTyping: false,
+      
+      expertInfo: {
+        id: '',
+        name: '',
+        avatar: '/static/icons/professor.png'
+      },
+      
+      // 消息列表
+      messageList: [
+        {
+          id: 1,
+          type: 'expert',
+          contentType: 'text',
+          content: '您好！我是张教授，很高兴为您提供农业技术咨询服务。请问您遇到了什么问题？',
+          timestamp: Date.now() - 3600000
+        },
+        {
+          id: 2,
+          type: 'user',
+          contentType: 'text',
+          content: '教授您好，我想咨询一下水稻种植的相关问题',
+          timestamp: Date.now() - 3500000
+        },
+        {
+          id: 3,
+          type: 'expert',
+          contentType: 'text',
+          content: '好的，请您详细描述一下具体是什么问题？比如是关于播种、施肥、病虫害防治还是其他方面的？',
+          timestamp: Date.now() - 3400000
+        }
+      ]
+    }
+  },
+  
+  computed: {
+    canSend() {
+      return this.inputMessage.trim().length > 0 || this.selectedImages.length > 0;
+    }
+  },
+  
+  onLoad(options) {
+    if (options.expertId) {
+      this.expertId = options.expertId;
+      this.expertName = decodeURIComponent(options.expertName || '专家');
+      this.loadExpertInfo();
+    }
+    
+    // 设置页面标题
+    uni.setNavigationBarTitle({
+      title: this.expertName
+    });
+    
+    // 滚动到底部
+    this.$nextTick(() => {
+      this.scrollToBottom();
+    });
+  },
+  
+  methods: {
+    // 加载专家信息
+    loadExpertInfo() {
+      this.expertInfo = {
+        id: this.expertId,
+        name: this.expertName,
+        avatar: '/static/icons/professor.png'
+      };
+    },
+    
+    // 发送消息
+    sendMessage() {
+      if (!this.canSend) return;
+      
+      // 发送文本消息
+      if (this.inputMessage.trim()) {
+        const textMessage = {
+          id: Date.now(),
+          type: 'user',
+          contentType: 'text',
+          content: this.inputMessage.trim(),
+          timestamp: Date.now()
+        };
+        this.messageList.push(textMessage);
+        this.inputMessage = '';
+      }
+      
+      // 发送图片消息
+      if (this.selectedImages.length > 0) {
+        this.selectedImages.forEach(image => {
+          const imageMessage = {
+            id: Date.now() + Math.random(),
+            type: 'user',
+            contentType: 'image',
+            content: image,
+            timestamp: Date.now()
+          };
+          this.messageList.push(imageMessage);
+        });
+        this.selectedImages = [];
+      }
+      
+      // 滚动到底部
+      this.$nextTick(() => {
+        this.scrollToBottom();
+      });
+      
+      // 模拟专家回复
+      this.simulateExpertReply();
+    },
+    
+    // 模拟专家回复
+    simulateExpertReply() {
+      this.isTyping = true;
+      
+      setTimeout(() => {
+        this.isTyping = false;
+        
+        const replies = [
+          '根据您的描述，我建议您可以从以下几个方面来处理...',
+          '这个问题比较常见，通常是由于以下原因造成的...',
+          '从您提供的信息来看，建议您先检查一下土壤情况...',
+          '我理解您的担心，这种情况下最好的解决方案是...'
+        ];
+        
+        const randomReply = replies[Math.floor(Math.random() * replies.length)];
+        
+        const expertMessage = {
+          id: Date.now(),
+          type: 'expert',
+          contentType: 'text',
+          content: randomReply,
+          timestamp: Date.now()
+        };
+        
+        this.messageList.push(expertMessage);
+        
+        this.$nextTick(() => {
+          this.scrollToBottom();
+        });
+      }, 2000);
+    },
+    
+    // 选择图片
+    chooseImage() {
+      const maxImages = 3 - this.selectedImages.length;
+      if (maxImages <= 0) {
+        uni.showToast({
+          title: '最多可选择3张图片',
+          icon: 'none'
+        });
+        return;
+      }
+      
+      uni.chooseImage({
+        count: maxImages,
+        sizeType: ['compressed'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          this.selectedImages = this.selectedImages.concat(res.tempFilePaths);
+        }
+      });
+    },
+    
+    // 移除图片
+    removeImage(index) {
+      this.selectedImages.splice(index, 1);
+    },
+    
+    // 预览图片
+    previewImage(current) {
+      // 收集所有图片消息的URL
+      const imageUrls = this.messageList
+        .filter(msg => msg.contentType === 'image')
+        .map(msg => msg.content);
+      
+      uni.previewImage({
+        current: current,
+        urls: imageUrls
+      });
+    },
+    
+    // 滚动到底部
+    scrollToBottom() {
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.message-wrapper').boundingClientRect();
+      query.exec((res) => {
+        if (res[0]) {
+          this.scrollTop = res[0].height;
+        }
+      });
+    },
+    
+    // 滚动事件
+    onScroll(e) {
+      // 可以在这里处理滚动相关逻辑
+    },
+    
+    // 输入框聚焦
+    onInputFocus() {
+      setTimeout(() => {
+        this.scrollToBottom();
+      }, 300);
+    },
+    
+    // 输入框失焦
+    onInputBlur() {
+      // 可以在这里处理失焦逻辑
+    },
+    
+    // 格式化时间
+    formatTime(timestamp) {
+      const date = new Date(timestamp);
+      const now = new Date();
+      const diff = now - date;
+      
+      if (diff < 60000) { // 1分钟内
+        return '刚刚';
+      } else if (diff < 3600000) { // 1小时内
+        return `${Math.floor(diff / 60000)}分钟前`;
+      } else if (date.toDateString() === now.toDateString()) { // 今天
+        return date.toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit' });
+      } else {
+        return date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' });
+      }
+    },
+    
+    // 获取当前日期
+    getCurrentDate() {
+      return new Date().toLocaleDateString('zh-CN', { 
+        year: 'numeric', 
+        month: 'long', 
+        day: 'numeric' 
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.chat-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+}
+
+// 消息列表
+.message-list {
+  flex: 1;
+  padding: 20rpx 0;
+}
+
+.message-wrapper {
+  padding: 0 20rpx;
+}
+
+// 日期分隔符
+.date-divider {
+  text-align: center;
+  margin: 20rpx 0;
+}
+
+.date-text {
+  padding: 8rpx 20rpx;
+  background-color: rgba(0, 0, 0, 0.1);
+  color: #666;
+  font-size: 22rpx;
+  border-radius: 16rpx;
+}
+
+// 消息项
+.message-item {
+  display: flex;
+  margin-bottom: 20rpx;
+  
+  &.message-left {
+    justify-content: flex-start;
+  }
+  
+  &.message-right {
+    justify-content: flex-end;
+  }
+}
+
+.avatar-container {
+  flex-shrink: 0;
+  margin: 0 16rpx;
+}
+
+.message-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 40rpx;
+  border: 2rpx solid #f0f0f0;
+}
+
+// 消息内容
+.message-content-wrapper {
+  max-width: 500rpx;
+  
+  &.user-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+}
+
+.message-bubble {
+  padding: 16rpx 20rpx;
+  border-radius: 20rpx;
+  margin-bottom: 8rpx;
+  word-wrap: break-word;
+  
+  &.expert-bubble {
+    background-color: #fff;
+    border-top-left-radius: 8rpx;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  }
+  
+  &.user-bubble {
+    background-color: #4CAF50;
+    border-top-right-radius: 8rpx;
+    
+    .message-text {
+      color: #fff;
+    }
+  }
+}
+
+.message-text {
+  font-size: 28rpx;
+  line-height: 1.4;
+  color: #333;
+}
+
+.message-image {
+  max-width: 300rpx;
+  max-height: 300rpx;
+  border-radius: 12rpx;
+}
+
+.message-time {
+  font-size: 22rpx;
+  color: #999;
+  
+  &.user-time {
+    text-align: right;
+  }
+}
+
+// 打字中指示器
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.typing-bubble {
+  background-color: #fff;
+  padding: 16rpx 20rpx;
+  border-radius: 20rpx;
+  border-top-left-radius: 8rpx;
+  margin-left: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+
+.typing-dots {
+  display: flex;
+  gap: 6rpx;
+}
+
+.dot {
+  width: 8rpx;
+  height: 8rpx;
+  background-color: #999;
+  border-radius: 50%;
+  animation: typing 1.4s infinite;
+  
+  &:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  
+  &:nth-child(3) {
+    animation-delay: 0.4s;
+  }
+}
+
+@keyframes typing {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.5;
+  }
+  30% {
+    transform: translateY(-10rpx);
+    opacity: 1;
+  }
+}
+
+// 输入区域
+.input-area {
+  background-color: #fff;
+  border-top: 1rpx solid #e5e5e5;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+// 图片预览
+.image-preview {
+  padding: 20rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.preview-list {
+  display: flex;
+  gap: 16rpx;
+}
+
+.preview-item {
+  position: relative;
+  width: 120rpx;
+  height: 120rpx;
+}
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+  border-radius: 12rpx;
+}
+
+.remove-btn {
+  position: absolute;
+  top: -8rpx;
+  right: -8rpx;
+  width: 32rpx;
+  height: 32rpx;
+  background-color: #ff4757;
+  border-radius: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.remove-icon {
+  color: #fff;
+  font-size: 20rpx;
+  font-weight: bold;
+}
+
+// 输入工具栏
+.input-toolbar {
+  display: flex;
+  align-items: flex-end;
+  padding: 20rpx;
+  gap: 16rpx;
+}
+
+.tool-btn {
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  border-radius: 30rpx;
+}
+
+.tool-icon {
+  width: 32rpx;
+  height: 32rpx;
+}
+
+.input-wrapper {
+  flex: 1;
+  background-color: #f8f8f8;
+  border-radius: 24rpx;
+  padding: 16rpx 20rpx;
+  min-height: 48rpx;
+  max-height: 200rpx;
+}
+
+.message-input {
+  width: 100%;
+  font-size: 28rpx;
+  line-height: 1.4;
+  min-height: 48rpx;
+}
+
+.send-btn {
+  padding: 16rpx 24rpx;
+  background-color: #e0e0e0;
+  border-radius: 24rpx;
+  transition: background-color 0.2s ease;
+  
+  &.active {
+    background-color: #4CAF50;
+    
+    .send-text {
+      color: #fff;
+    }
+  }
+}
+
+.send-text {
+  font-size: 28rpx;
+  color: #999;
+  font-weight: bold;
+}
+</style> 

pages/service/expert-detail.vue

@@ -0,0 +1,368 @@
+<template>
+  <view class="expert-detail-container">
+    <!-- 专家基本信息卡片 -->
+    <view class="expert-info-card">
+      <view class="expert-header">
+        <view class="avatar-section">
+          <view class="avatar-container">
+            <image class="expert-avatar" :src="expertInfo.avatar" mode="aspectFill"></image>
+            <view class="online-status" v-if="expertInfo.isOnline"></view>
+          </view>
+        </view>
+        
+        <view class="basic-info">
+          <view class="expert-name">{{ expertInfo.name }}</view>
+          <view class="expert-title">{{ expertInfo.title }}</view>
+          <view class="expert-unit">{{ expertInfo.unit }}</view>
+          
+          <view class="stats-row">
+            <view class="stat-item">
+              <text class="stat-number">{{ expertInfo.rating }}</text>
+              <text class="stat-label">评分</text>
+            </view>
+            <view class="stat-item">
+              <text class="stat-number">{{ expertInfo.consultCount }}</text>
+              <text class="stat-label">咨询数</text>
+            </view>
+            <view class="stat-item">
+              <text class="stat-number">{{ expertInfo.experience }}</text>
+              <text class="stat-label">从业年限</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 擅长领域 -->
+    <view class="expertise-card">
+      <view class="card-title">
+        <text>擅长领域</text>
+      </view>
+      <view class="expertise-tags">
+        <view 
+          class="expertise-tag"
+          v-for="(tag, index) in expertInfo.expertise"
+          :key="index"
+        >
+          {{ tag }}
+        </view>
+      </view>
+    </view>
+
+    <!-- 专家简介 -->
+    <view class="introduction-card">
+      <view class="card-title">
+        <text>专家简介</text>
+      </view>
+      <view class="introduction-content">
+        <text class="introduction-text">{{ expertInfo.introduction }}</text>
+      </view>
+    </view>
+
+    <!-- 服务时间 -->
+    <view class="service-time-card">
+      <view class="card-title">
+        <text>服务时间</text>
+      </view>
+      <view class="service-time-content">
+        <view class="time-item">
+          <text class="time-label">工作日：</text>
+          <text class="time-value">{{ expertInfo.serviceTime.weekday }}</text>
+        </view>
+        <view class="time-item">
+          <text class="time-label">周末：</text>
+          <text class="time-value">{{ expertInfo.serviceTime.weekend }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部咨询按钮 -->
+    <view class="bottom-action-bar">
+      <view class="action-btn" @click="startConsult">
+        <text class="btn-text">在线咨询</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      expertId: '',
+      expertInfo: {
+        id: '',
+        name: '',
+        title: '',
+        unit: '',
+        avatar: '',
+        expertise: [],
+        introduction: '',
+        isOnline: false,
+        rating: 0,
+        consultCount: 0,
+        experience: 0,
+        serviceTime: {
+          weekday: '',
+          weekend: ''
+        }
+      }
+    }
+  },
+  
+  onLoad(options) {
+    if (options.id) {
+      this.expertId = options.id;
+      this.loadExpertDetail();
+    }
+  },
+  
+  methods: {
+    // 加载专家详情
+    loadExpertDetail() {
+      uni.showLoading({ title: '加载中...' });
+      
+      // 模拟API调用，实际应用中需要根据expertId从API获取数据
+      setTimeout(() => {
+                 const mockData = {
+           id: this.expertId,
+           name: '张教授',
+           title: '研究员',
+           unit: '农业科学院植物保护研究所',
+           avatar: '/static/icons/professor.png',
+           expertise: ['水稻种植', '病虫害防治', '土壤改良', '绿色防控', '有机农业'],
+          introduction: '农业技术推广研究员，从事农作物病虫害防治和绿色种植技术研究20余年。主持完成国家和省部级科研项目10余项，发表学术论文50多篇，获得农业技术推广奖3项。擅长水稻、小麦等主要粮食作物的病虫害综合防治，在生物防治、绿色防控等方面有丰富的实践经验。',
+          isOnline: true,
+          rating: 4.9,
+          consultCount: 156,
+          experience: 20,
+          serviceTime: {
+            weekday: '09:00-18:00',
+            weekend: '09:00-17:00'
+          }
+        };
+        
+        this.expertInfo = mockData;
+        
+        // 设置页面标题
+        uni.setNavigationBarTitle({
+          title: `${mockData.name} - 专家详情`
+        });
+        
+        uni.hideLoading();
+      }, 1000);
+    },
+    
+    // 开始咨询
+    startConsult() {
+      uni.navigateTo({
+        url: `/pages/service/expert-chat?expertId=${this.expertInfo.id}&expertName=${encodeURIComponent(this.expertInfo.name)}`
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.expert-detail-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
+}
+
+// 专家信息卡片
+.expert-info-card {
+  margin: 20rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.expert-header {
+  display: flex;
+  align-items: center;
+  gap: 24rpx;
+}
+
+.avatar-section {
+  flex-shrink: 0;
+}
+
+.avatar-container {
+  position: relative;
+}
+
+.expert-avatar {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 60rpx;
+  border: 4rpx solid #f0f0f0;
+}
+
+.online-status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 32rpx;
+  height: 32rpx;
+  background-color: #52c41a;
+  border-radius: 16rpx;
+  border: 4rpx solid #fff;
+}
+
+.basic-info {
+  flex: 1;
+}
+
+.expert-name {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8rpx;
+}
+
+.expert-title {
+  font-size: 28rpx;
+  color: #4CAF50;
+  margin-bottom: 4rpx;
+}
+
+.expert-unit {
+  font-size: 26rpx;
+  color: #666;
+  margin-bottom: 16rpx;
+}
+
+.stats-row {
+  display: flex;
+  gap: 24rpx;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stat-number {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #4CAF50;
+}
+
+.stat-label {
+  font-size: 22rpx;
+  color: #999;
+  margin-top: 4rpx;
+}
+
+// 通用卡片样式
+.expertise-card,
+.introduction-card,
+.service-time-card {
+  margin: 0 20rpx 20rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.card-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+  padding-bottom: 16rpx;
+  border-bottom: 2rpx solid #f5f5f5;
+}
+
+// 擅长领域
+.expertise-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12rpx;
+}
+
+.expertise-tag {
+  padding: 8rpx 16rpx;
+  background-color: #e6f7ff;
+  color: #1890ff;
+  font-size: 26rpx;
+  border-radius: 16rpx;
+  white-space: nowrap;
+}
+
+// 专家简介
+.introduction-content {
+  padding: 20rpx;
+  background-color: #f8f9fa;
+  border-radius: 12rpx;
+  border-left: 4rpx solid #4CAF50;
+}
+
+.introduction-text {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+}
+
+// 服务时间
+.service-time-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.time-item {
+  display: flex;
+  align-items: center;
+}
+
+.time-label {
+  font-size: 28rpx;
+  color: #666;
+  width: 120rpx;
+}
+
+.time-value {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+}
+
+// 底部操作按钮
+.bottom-action-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20rpx 30rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  background-color: #fff;
+  border-top: 1rpx solid #f0f0f0;
+  z-index: 100;
+  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.action-btn {
+  width: 100%;
+  height: 88rpx;
+  background-color: #4CAF50;
+  border-radius: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+  
+  &:active {
+    background-color: #45a049;
+  }
+}
+
+.btn-text {
+  font-size: 32rpx;
+  color: #fff;
+  font-weight: bold;
+}
+</style> 

pages/service/expert.vue

@@ -0,0 +1,401 @@
+<template>
+  <view class="expert-container">
+    <!-- 分类筛选区域 -->
+    <view class="category-section">
+      <scroll-view class="category-scroll" scroll-x show-scrollbar="false">
+        <view class="category-list">
+          <view 
+            class="category-item"
+            :class="{ active: selectedCategory === item.value }"
+            v-for="item in categoryList"
+            :key="item.value"
+            @click="selectCategory(item.value)"
+          >
+            <text class="category-text">{{ item.label }}</text>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 搜索区域 -->
+    <view class="search-section">
+      <view class="search-box">
+        <image class="search-icon" src="/static/icons/search.png" mode="aspectFit"></image>
+        <input 
+          class="search-input" 
+          placeholder="搜索专家姓名或擅长方向" 
+          placeholder-style="color: #999;"
+          v-model="searchKeyword"
+          @confirm="handleSearch"
+        />
+      </view>
+    </view>
+
+    <!-- 专家列表 -->
+    <view class="expert-list-container">
+      <view class="expert-list">
+        <view 
+          class="expert-card"
+          v-for="expert in filteredExpertList"
+          :key="expert.id"
+          @click="navigateToDetail(expert)"
+        >
+          <view class="expert-info">
+            <!-- 左侧头像和基本信息 -->
+            <view class="expert-basic">
+              <view class="avatar-container">
+                <image class="expert-avatar" :src="expert.avatar" mode="aspectFill"></image>
+                <view class="online-status" v-if="expert.isOnline"></view>
+              </view>
+              <view class="expert-details">
+                <view class="expert-name">{{ expert.name }}</view>
+                <view class="expert-title">{{ expert.title }}</view>
+                <view class="expert-unit">{{ expert.unit }}</view>
+              </view>
+            </view>
+            
+            <!-- 右侧擅长领域和咨询按钮 -->
+            <view class="expert-actions">
+              <view class="expertise-tags">
+                <view 
+                  class="expertise-tag"
+                  v-for="(tag, index) in expert.expertise.slice(0, 3)"
+                  :key="index"
+                >
+                  {{ tag }}
+                </view>
+              </view>
+              <view class="consult-btn" @click.stop="startConsult(expert)">
+                <text class="consult-text">咨询</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedCategory: 'all',
+      searchKeyword: '',
+      
+      // 分类选项
+      categoryList: [
+        { label: '全部', value: 'all' },
+        { label: '种植技术', value: 'planting' },
+        { label: '植物保护', value: 'protection' },
+        { label: '土壤肥料', value: 'soil' },
+        { label: '气象指导', value: 'weather' },
+        { label: '病虫害防治', value: 'pest' },
+        { label: '农机使用', value: 'machinery' }
+      ],
+      
+      // 专家列表数据
+      expertList: [
+        {
+          id: 1,
+          name: '张教授',
+          title: '研究员',
+          unit: '农业科学院',
+          avatar: '/static/icons/professor.png',
+          expertise: ['水稻种植', '病虫害防治', '土壤改良'],
+          category: 'planting',
+          isOnline: true,
+          rating: 4.9,
+          consultCount: 156
+        },
+        {
+          id: 2,
+          name: '李专家',
+          title: '高级农艺师',
+          unit: '植保站',
+          avatar: '/static/icons/professor.png',
+          expertise: ['植物保护', '农药使用', '生物防治'],
+          category: 'protection',
+          isOnline: false,
+          rating: 4.8,
+          consultCount: 203
+        },
+        {
+          id: 3,
+          name: '王老师',
+          title: '副教授',
+          unit: '农业大学',
+          avatar: '/static/icons/professor.png',
+          expertise: ['土壤检测', '施肥技术', '营养诊断'],
+          category: 'soil',
+          isOnline: true,
+          rating: 4.7,
+          consultCount: 89
+        },
+        {
+          id: 4,
+          name: '陈工程师',
+          title: '农机专家',
+          unit: '农机推广站',
+          avatar: '/static/icons/professor.png',
+          expertise: ['农机维修', '设备选型', '机械化作业'],
+          category: 'machinery',
+          isOnline: true,
+          rating: 4.6,
+          consultCount: 134
+        },
+        {
+          id: 5,
+          name: '刘博士',
+          title: '气象专家',
+          unit: '气象局',
+          avatar: '/static/icons/professor.png',
+          expertise: ['天气预报', '灾害预警', '农业气象'],
+          category: 'weather',
+          isOnline: false,
+          rating: 4.8,
+          consultCount: 178
+        }
+      ]
+    }
+  },
+  
+  computed: {
+    filteredExpertList() {
+      let list = this.expertList;
+      
+      // 按分类筛选
+      if (this.selectedCategory !== 'all') {
+        list = list.filter(expert => expert.category === this.selectedCategory);
+      }
+      
+      // 按搜索关键词筛选
+      if (this.searchKeyword.trim()) {
+        const keyword = this.searchKeyword.trim().toLowerCase();
+        list = list.filter(expert => 
+          expert.name.toLowerCase().includes(keyword) ||
+          expert.expertise.some(tag => tag.toLowerCase().includes(keyword)) ||
+          expert.title.toLowerCase().includes(keyword) ||
+          expert.unit.toLowerCase().includes(keyword)
+        );
+      }
+      
+      return list;
+    }
+  },
+  
+  methods: {
+    // 选择分类
+    selectCategory(category) {
+      this.selectedCategory = category;
+    },
+    
+    // 搜索处理
+    handleSearch() {
+      // 搜索逻辑已在computed中处理
+    },
+    
+    // 导航到专家详情页
+    navigateToDetail(expert) {
+      uni.navigateTo({
+        url: `/pages/service/expert-detail?id=${expert.id}&name=${encodeURIComponent(expert.name)}`
+      });
+    },
+    
+    // 开始咨询
+    startConsult(expert) {
+      uni.navigateTo({
+        url: `/pages/service/expert-chat?expertId=${expert.id}&expertName=${encodeURIComponent(expert.name)}`
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.expert-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+// 分类筛选区域
+.category-section {
+  background-color: #fff;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.category-scroll {
+  white-space: nowrap;
+}
+
+.category-list {
+  display: inline-flex;
+  padding: 0 20rpx;
+}
+
+.category-item {
+  flex-shrink: 0;
+  padding: 24rpx 32rpx;
+  margin-right: 8rpx;
+  font-size: 28rpx;
+  color: #666;
+  border-radius: 32rpx;
+  transition: all 0.2s ease;
+  
+  &.active {
+    color: #4CAF50;
+    background-color: #f0fdf4;
+    font-weight: bold;
+  }
+}
+
+// 搜索区域
+.search-section {
+  background-color: #fff;
+  padding: 20rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  background-color: #f8f8f8;
+  border-radius: 32rpx;
+  padding: 16rpx 24rpx;
+}
+
+.search-icon {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 16rpx;
+}
+
+.search-input {
+  flex: 1;
+  font-size: 28rpx;
+  line-height: 1.5;
+}
+
+// 专家列表
+.expert-list-container {
+  padding: 20rpx;
+}
+
+.expert-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.expert-card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+  transition: transform 0.2s ease;
+  
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.expert-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+// 左侧基本信息
+.expert-basic {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  margin-right: 20rpx;
+}
+
+.avatar-container {
+  position: relative;
+  margin-right: 20rpx;
+}
+
+.expert-avatar {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50rpx;
+  border: 3rpx solid #f0f0f0;
+}
+
+.online-status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 24rpx;
+  height: 24rpx;
+  background-color: #52c41a;
+  border-radius: 12rpx;
+  border: 3rpx solid #fff;
+}
+
+.expert-details {
+  flex: 1;
+}
+
+.expert-name {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8rpx;
+}
+
+.expert-title {
+  font-size: 26rpx;
+  color: #4CAF50;
+  margin-bottom: 4rpx;
+}
+
+.expert-unit {
+  font-size: 24rpx;
+  color: #999;
+}
+
+// 右侧操作区域
+.expert-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 16rpx;
+}
+
+.expertise-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8rpx;
+  justify-content: flex-end;
+}
+
+.expertise-tag {
+  padding: 6rpx 12rpx;
+  background-color: #e6f7ff;
+  color: #1890ff;
+  font-size: 22rpx;
+  border-radius: 12rpx;
+  white-space: nowrap;
+}
+
+.consult-btn {
+  padding: 12rpx 24rpx;
+  background-color: #4CAF50;
+  border-radius: 20rpx;
+  transition: background-color 0.2s ease;
+  
+  &:active {
+    background-color: #45a049;
+  }
+}
+
+.consult-text {
+  font-size: 26rpx;
+  color: #fff;
+  font-weight: bold;
+}
+</style> 

pages/service/insurance.vue

@@ -0,0 +1,473 @@
+<template>
+  <view class="insurance-container">
+    <!-- 顶部横幅 -->
+    <view class="banner-section">
+      <view class="banner-content">
+        <image class="banner-bg" src="/static/images/agriculture/rice-field2.svg" mode="aspectFill"></image>
+        <view class="banner-overlay">
+          <view class="banner-text">
+            <text class="main-title">农业保险服务</text>
+            <text class="sub-title">为您的农田和收成多一份保障</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 什么是农业保险 -->
+    <view class="info-card">
+      <view class="card-header">
+        <text class="card-title">什么是农业保险？</text>
+      </view>
+      <view class="card-content">
+        <text class="description-text">
+          农业保险是由保险公司对种植业、养殖业因自然灾害、病虫害等造成的损失进行保障的专项服务。它能有效分散农业风险、保障农户收益，为农业生产提供坚实的风险保障屏障，让农民朋友能够安心从事农业生产活动。
+        </text>
+      </view>
+    </view>
+
+    <!-- 可投保项目 -->
+    <view class="info-card">
+      <view class="card-header">
+        <text class="card-title">可投保项目</text>
+      </view>
+      <view class="card-content">
+        <view class="insurance-types">
+          <view class="type-item">
+            <view class="type-header">
+              <text class="type-title">作物种植险</text>
+            </view>
+            <text class="type-desc">水稻、小麦、玉米等主要农作物种植保障</text>
+          </view>
+          
+          <view class="type-item">
+            <view class="type-header">
+              <text class="type-title">农机具保险</text>
+            </view>
+            <text class="type-desc">拖拉机、植保无人机等农机设备保障</text>
+          </view>
+          
+          <view class="type-item">
+            <view class="type-header">
+              <text class="type-title">农田财产保险</text>
+            </view>
+            <text class="type-desc">农田设施、仓储设备等财产保障</text>
+          </view>
+          
+          <view class="type-item">
+            <view class="type-header">
+              <text class="type-title">农业自然灾害险</text>
+            </view>
+            <text class="type-desc">洪涝、干旱、冰雹等自然灾害保障</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 参保流程 -->
+    <view class="info-card">
+      <view class="card-header">
+        <text class="card-title">参保流程</text>
+      </view>
+      <view class="card-content">
+        <view class="process-steps">
+          <view class="step-item">
+            <view class="step-number">1</view>
+            <view class="step-content">
+              <text class="step-title">咨询保险方案</text>
+              <text class="step-desc">了解各类保险产品和保障范围</text>
+            </view>
+          </view>
+          
+          <view class="step-item">
+            <view class="step-number">2</view>
+            <view class="step-content">
+              <text class="step-title">提交申请材料</text>
+              <text class="step-desc">准备身份证明、土地证明等相关资料</text>
+            </view>
+          </view>
+          
+          <view class="step-item">
+            <view class="step-number">3</view>
+            <view class="step-content">
+              <text class="step-title">线下签约与缴费</text>
+              <text class="step-desc">前往服务点签署保险合同并缴纳保费</text>
+            </view>
+          </view>
+          
+          <view class="step-item">
+            <view class="step-number">4</view>
+            <view class="step-content">
+              <text class="step-title">获得保障凭证</text>
+              <text class="step-desc">领取保险单据，享受保险保障服务</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 服务优势 -->
+    <view class="info-card">
+      <view class="card-header">
+        <text class="card-title">服务优势</text>
+      </view>
+      <view class="card-content">
+        <view class="advantage-list">
+          <view class="advantage-item">
+            <text class="advantage-text">政府补贴保费，农户负担低</text>
+          </view>
+          <view class="advantage-item">
+            <text class="advantage-text">保障范围广，理赔流程明确</text>
+          </view>
+          <view class="advantage-item">
+            <text class="advantage-text">减少自然灾害带来的收入风险</text>
+          </view>
+          <view class="advantage-item">
+            <text class="advantage-text">专业服务团队，全程跟踪保障</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 联系方式 -->
+    <view class="info-card">
+      <view class="card-header">
+        <text class="card-title">联系方式</text>
+      </view>
+      <view class="card-content">
+        <view class="contact-list">
+          <view class="contact-item">
+            <view class="contact-label">联系单位：</view>
+            <text class="contact-value">农业保险服务点</text>
+          </view>
+          <view class="contact-item">
+            <view class="contact-label">联系人：</view>
+            <text class="contact-value">张老师</text>
+          </view>
+          <view class="contact-item">
+            <view class="contact-label">联系电话：</view>
+            <text class="contact-phone" @click="makePhoneCall">400-456-7890</text>
+          </view>
+          <view class="contact-item">
+            <view class="contact-label">服务时间：</view>
+            <text class="contact-value">工作日 9:00-17:30</text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部温馨提示 -->
+    <view class="notice-card">
+      <view class="notice-content">
+        <text class="notice-text">
+          农业保险服务为线下办理业务，平台仅提供信息展示与咨询对接服务，如有需求，请拨打电话或前往就近服务站。
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  methods: {
+    // 拨打电话
+    makePhoneCall() {
+      uni.makePhoneCall({
+        phoneNumber: '400-456-7890',
+        fail: (err) => {
+          console.log('拨打电话失败：', err);
+          uni.showToast({
+            title: '拨打电话失败',
+            icon: 'none'
+          });
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.insurance-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: 40rpx;
+}
+
+// 顶部横幅
+.banner-section {
+  position: relative;
+  height: 400rpx;
+  overflow: hidden;
+}
+
+.banner-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.banner-bg {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.banner-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, rgba(76, 175, 80, 0.85) 0%, rgba(46, 125, 50, 0.9) 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.banner-text {
+  text-align: center;
+  color: #fff;
+  padding: 0 40rpx;
+}
+
+.main-title {
+  font-size: 52rpx;
+  font-weight: 700;
+  margin-bottom: 20rpx;
+  display: block;
+  letter-spacing: 2rpx;
+  text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
+}
+
+.sub-title {
+  font-size: 30rpx;
+  opacity: 0.95;
+  line-height: 1.5;
+  display: block;
+  font-weight: 400;
+  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+}
+
+// 信息卡片
+.info-card {
+  margin: 20rpx;
+  background-color: #fff;
+  border-radius: 20rpx;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  border: 1rpx solid #f5f5f5;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  padding: 32rpx;
+  background: linear-gradient(135deg, #f8fffe 0%, #f0fdf4 100%);
+  border-bottom: 1rpx solid #e8f5e8;
+}
+
+.card-title {
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.card-content {
+  padding: 30rpx;
+}
+
+// 描述文字
+.description-text {
+  font-size: 30rpx;
+  color: #4a5568;
+  line-height: 1.7;
+  font-weight: 400;
+}
+
+// 可投保项目
+.insurance-types {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.type-item {
+  padding: 24rpx;
+  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
+  border-radius: 16rpx;
+  border: 1rpx solid #e2e8f0;
+  border-left: 4rpx solid #4CAF50;
+}
+
+.type-header {
+  margin-bottom: 12rpx;
+}
+
+.type-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #2d3748;
+}
+
+.type-desc {
+  font-size: 28rpx;
+  color: #718096;
+  line-height: 1.5;
+}
+
+// 参保流程
+.process-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 28rpx;
+}
+
+.step-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 24rpx;
+  padding: 24rpx;
+  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
+  border-radius: 16rpx;
+  border: 1rpx solid #e2e8f0;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    transform: translateY(-2rpx);
+    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
+  }
+}
+
+.step-number {
+  width: 64rpx;
+  height: 64rpx;
+  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
+  color: #fff;
+  border-radius: 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  font-weight: 600;
+  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
+  flex-shrink: 0;
+}
+
+.step-content {
+  flex: 1;
+  padding-top: 4rpx;
+}
+
+.step-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #2d3748;
+  margin-bottom: 12rpx;
+  display: block;
+}
+
+.step-desc {
+  font-size: 28rpx;
+  color: #718096;
+  line-height: 1.5;
+  display: block;
+}
+
+// 服务优势
+.advantage-list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.advantage-item {
+  padding: 24rpx;
+  background: linear-gradient(135deg, #f8fff8 0%, #f0fdf4 100%);
+  border-radius: 16rpx;
+  border: 1rpx solid #e8f5e8;
+  transition: all 0.3s ease;
+  border-left: 4rpx solid #4CAF50;
+  
+  &:hover {
+    transform: translateY(-2rpx);
+    box-shadow: 0 8rpx 16rpx rgba(76, 175, 80, 0.1);
+  }
+}
+
+.advantage-text {
+  font-size: 30rpx;
+  color: #2c3e50;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+// 联系方式
+.contact-list {
+  display: flex;
+  flex-direction: column;
+  gap: 24rpx;
+}
+
+.contact-item {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 24rpx;
+  background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
+  border-radius: 12rpx;
+  border: 1rpx solid #e2e8f0;
+}
+
+.contact-label {
+  font-size: 30rpx;
+  color: #718096;
+  width: 150rpx;
+  flex-shrink: 0;
+  font-weight: 500;
+}
+
+.contact-value {
+  font-size: 30rpx;
+  color: #2d3748;
+  font-weight: 600;
+}
+
+.contact-phone {
+  font-size: 30rpx;
+  color: #4CAF50;
+  font-weight: 600;
+  padding: 8rpx 16rpx;
+  background-color: #f0fdf4;
+  border-radius: 8rpx;
+  border: 1rpx solid #d1fae5;
+  transition: all 0.3s ease;
+  
+  &:active {
+    transform: scale(0.98);
+    background-color: #dcfce7;
+  }
+}
+
+// 底部提示
+.notice-card {
+  margin: 20rpx;
+  background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
+  border: 1rpx solid #f9e79f;
+  border-radius: 16rpx;
+  padding: 28rpx;
+  box-shadow: 0 4rpx 12rpx rgba(255, 193, 7, 0.1);
+}
+
+.notice-content {
+  text-align: center;
+}
+
+.notice-text {
+  font-size: 28rpx;
+  color: #8d4e00;
+  line-height: 1.6;
+  flex: 1;
+  font-weight: 500;
+}
+</style> 

pages/service/mall-detail.vue

@@ -0,0 +1,485 @@
+<template>
+  <view class="detail-container">
+    <!-- 商品轮播图 -->
+    <view class="swiper-container">
+      <swiper class="goods-swiper" :indicator-dots="true" :autoplay="true" :circular="true">
+        <swiper-item v-for="(image, index) in goodsImages" :key="index">
+          <image class="swiper-image" :src="image" mode="aspectFill"></image>
+        </swiper-item>
+      </swiper>
+    </view>
+
+    <!-- 商品基本信息 -->
+    <view class="goods-basic-info">
+      <view class="goods-title">{{ goodsDetail.title }}</view>
+      <view class="goods-subtitle">{{ goodsDetail.description }}</view>
+      <view class="price-container">
+        <text class="current-price">¥{{ goodsDetail.price }}</text>
+        <text class="price-unit">/{{ goodsDetail.unit }}</text>
+        <text class="original-price" v-if="goodsDetail.originalPrice">¥{{ goodsDetail.originalPrice }}</text>
+      </view>
+      <view class="specs-info">
+        <text class="specs-label">规格：</text>
+        <text class="specs-value">{{ goodsDetail.specifications }}</text>
+      </view>
+    </view>
+
+    <!-- 商品详情介绍 -->
+    <view class="goods-detail-info">
+      <view class="detail-title">商品详情</view>
+      
+      <!-- 产品特点 -->
+      <view class="detail-section">
+        <view class="section-title">产品特点</view>
+        <view class="feature-list">
+          <view 
+            class="feature-item" 
+            v-for="(feature, index) in goodsDetail.features" 
+            :key="index"
+          >
+            <view class="feature-icon">✓</view>
+            <text class="feature-text">{{ feature }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 使用说明 -->
+      <view class="detail-section">
+        <view class="section-title">使用说明</view>
+        <view class="usage-content">
+          <text>{{ goodsDetail.usage }}</text>
+        </view>
+      </view>
+
+      <!-- 产品图片展示 -->
+      <view class="detail-section">
+        <view class="section-title">产品展示</view>
+        <view class="detail-images">
+          <image 
+            class="detail-image" 
+            v-for="(image, index) in goodsDetail.detailImages" 
+            :key="index"
+            :src="image" 
+            mode="widthFix"
+            @click="previewImage(image, goodsDetail.detailImages)"
+          ></image>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部操作栏 -->
+    <view class="bottom-actions">
+      <view class="action-btn consult-btn" @click="handleConsult">
+        立即咨询
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      goodsId: '',
+      goodsDetail: {
+        title: '高产玉米种子',
+        description: '优质杂交种，抗病性强，适应性广',
+        price: '68',
+        originalPrice: '88',
+        unit: '袋',
+        specifications: '500g/袋，发芽率≥95%',
+        features: [
+          '高产稳产，比普通品种增产15-20%',
+          '抗病性强，抗大小斑病、丝黑穗病',
+          '适应性广，适合多种土壤和气候条件',
+          '株型紧凑，抗倒伏能力强',
+          '籽粒饱满，商品性好'
+        ],
+        usage: '播种前先进行种子处理，选择肥沃、排水良好的土壤，按照每亩3-4千粒的密度播种。播种深度2-3厘米，播种后及时覆土镇压。生长期注意水肥管理，适时中耕除草。',
+        detailImages: [
+          '/static/images/products/corn-seeds-new.jpg',
+          '/static/images/products/seeds-packets.jpg',
+          '/static/images/products/agriculture-tools.jpg'
+        ]
+      },
+      goodsImages: [
+        '/static/images/products/corn-seeds-new.jpg',
+        '/static/images/products/fertilizer.jpg',
+        '/static/images/products/organic-fertilizer-new.jpg',
+        '/static/images/products/greenhouse-film.jpg'
+      ]
+    }
+  },
+  
+  onLoad(options) {
+    if (options.id) {
+      this.goodsId = options.id;
+      this.loadGoodsDetail();
+    }
+    if (options.title) {
+      uni.setNavigationBarTitle({
+        title: decodeURIComponent(options.title)
+      });
+    }
+  },
+  
+  methods: {
+    // 加载商品详情
+    loadGoodsDetail() {
+      // 这里可以根据goodsId从后端获取商品详情
+      // 目前使用模拟数据
+      const goodsData = {
+        1: {
+          title: '高产玉米种子',
+          description: '优质杂交种，抗病性强，适应性广',
+          price: '68',
+          originalPrice: '88',
+          unit: '袋',
+          specifications: '500g/袋，发芽率≥95%',
+          features: [
+            '高产稳产，比普通品种增产15-20%',
+            '抗病性强，抗大小斑病、丝黑穗病',
+            '适应性广，适合多种土壤和气候条件',
+            '株型紧凑，抗倒伏能力强',
+            '籽粒饱满，商品性好'
+          ],
+          usage: '播种前先进行种子处理，选择肥沃、排水良好的土壤，按照每亩3-4千粒的密度播种。播种深度2-3厘米，播种后及时覆土镇压。生长期注意水肥管理，适时中耕除草。',
+          detailImages: [
+            '/static/images/products/corn-seeds-new.jpg',
+            '/static/images/products/seeds-packets.jpg',
+            '/static/images/products/agriculture-tools.jpg'
+          ]
+        },
+        2: {
+          title: '复合肥料NPK',
+          description: '15-15-15配比，全营养均衡',
+          price: '120',
+          originalPrice: '150',
+          unit: '袋',
+          specifications: '40kg/袋，NPK含量≥45%',
+          features: [
+            '营养全面，氮磷钾配比科学',
+            '速效持效相结合，肥效持久',
+            '提高作物产量和品质',
+            '改善土壤结构，增强保肥能力',
+            '适用于多种作物和土壤类型'
+          ],
+          usage: '基肥：每亩施用20-30kg，在耕地时均匀撒施并翻入土中。追肥：根据作物生长情况，在关键生长期追施10-15kg。注意避免与种子直接接触，施肥后及时浇水。',
+          detailImages: [
+            '/static/images/products/fertilizer.jpg',
+            '/static/images/products/organic-fertilizer-new.jpg',
+            '/static/images/products/soil-test.jpg'
+          ]
+        },
+        3: {
+          title: '植物保护剂',
+          description: '广谱除草，效果持久',
+          price: '45',
+          originalPrice: '58',
+          unit: '瓶',
+          specifications: '500ml/瓶，有效成分≥98%',
+          features: [
+            '广谱高效，对多种杂草有效',
+            '低毒环保，对作物安全',
+            '持效期长，减少施药次数',
+            '易于使用，省时省力',
+            '成本经济，性价比高'
+          ],
+          usage: '在杂草3-5叶期施药效果最佳。每亩用药量15-20ml，兑水30-45kg均匀喷雾。避免在风力较大时施药，施药后6小时内遇雨需重新施药。',
+          detailImages: [
+            '/static/images/products/plant-protection.jpg',
+            '/static/images/products/agriculture-tools.jpg',
+            '/static/images/products/pesticide.jpg'
+          ]
+        },
+        4: {
+          title: '优质水稻种子',
+          description: '高产稳产，米质优良',
+          price: '85',
+          originalPrice: '105',
+          unit: '袋',
+          specifications: '25kg/袋，发芽率≥95%',
+          features: [
+            '优质品种，口感佳产量高',
+            '抗病性强，适应性广',
+            '生育期适中，便于管理',
+            '籽粒饱满，商品性好',
+            '耐储存，发芽率稳定'
+          ],
+          usage: '播种前进行晒种、选种处理。育秧密度适宜，秧龄25-30天移栽。合理密植，一般每亩1.8-2.2万穴。科学施肥，注意水分管理。',
+          detailImages: [
+            '/static/images/products/seeds-packets.jpg',
+            '/static/images/products/rice-seeds.jpg',
+            '/static/images/products/corn-seeds-new.jpg'
+          ]
+        }
+      };
+      
+      if (goodsData[this.goodsId]) {
+        this.goodsDetail = goodsData[this.goodsId];
+        // 根据商品类型设置轮播图
+        this.setGoodsImages(this.goodsId);
+      }
+    },
+    
+    // 设置商品轮播图
+    setGoodsImages(goodsId) {
+      const imageMap = {
+        '1': [ // 玉米种子
+          '/static/images/products/corn-seeds-new.jpg',
+          '/static/images/products/seeds-packets.jpg',
+          '/static/images/products/agriculture-tools.jpg',
+          '/static/images/products/wheat-seeds.jpg'
+        ],
+        '2': [ // 复合肥料
+          '/static/images/products/fertilizer.jpg',
+          '/static/images/products/organic-fertilizer-new.jpg',
+          '/static/images/products/soil-test.jpg',
+          '/static/images/products/greenhouse-film.jpg'
+        ],
+        '3': [ // 植物保护剂
+          '/static/images/products/plant-protection.jpg',
+          '/static/images/products/agriculture-tools.jpg',
+          '/static/images/products/pesticide.jpg',
+          '/static/images/products/insecticide.jpg'
+        ],
+        '4': [ // 水稻种子
+          '/static/images/products/seeds-packets.jpg',
+          '/static/images/products/rice-seeds.jpg',
+          '/static/images/products/corn-seeds-new.jpg',
+          '/static/images/products/wheat-seeds.jpg'
+        ]
+      };
+      
+      if (imageMap[goodsId]) {
+        this.goodsImages = imageMap[goodsId];
+      }
+    },
+    
+    // 预览图片
+    previewImage(current, urls) {
+      uni.previewImage({
+        current: current,
+        urls: urls
+      });
+    },
+    
+    // 立即咨询
+    handleConsult() {
+      uni.showModal({
+        title: '咨询服务',
+        content: '您可以通过以下方式联系我们：\n1. 拨打客服热线：400-xxx-xxxx\n2. 在线客服（工作时间：9:00-18:00）',
+        confirmText: '拨打电话',
+        cancelText: '取消',
+        success: (res) => {
+          if (res.confirm) {
+            uni.makePhoneCall({
+              phoneNumber: '400-xxx-xxxx'
+            });
+          }
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.detail-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: 120rpx; // 为底部操作栏留出空间
+}
+
+.swiper-container {
+  width: 100%;
+  height: 600rpx;
+  background-color: #fff;
+}
+
+.goods-swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-image {
+  width: 100%;
+  height: 100%;
+}
+
+.goods-basic-info {
+  background-color: #fff;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+}
+
+.goods-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  line-height: 1.4;
+  margin-bottom: 16rpx;
+}
+
+.goods-subtitle {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.5;
+  margin-bottom: 24rpx;
+}
+
+.price-container {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 24rpx;
+}
+
+.current-price {
+  font-size: 40rpx;
+  font-weight: bold;
+  color: #4CAF50;
+}
+
+.price-unit {
+  font-size: 28rpx;
+  color: #999;
+  margin-left: 8rpx;
+  margin-right: 16rpx;
+}
+
+.original-price {
+  font-size: 28rpx;
+  color: #999;
+  text-decoration: line-through;
+}
+
+.specs-info {
+  display: flex;
+  align-items: center;
+}
+
+.specs-label {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.specs-value {
+  font-size: 28rpx;
+  color: #333;
+}
+
+.goods-detail-info {
+  background-color: #fff;
+  padding: 30rpx;
+}
+
+.detail-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 30rpx;
+  text-align: center;
+}
+
+.detail-section {
+  margin-bottom: 40rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.section-title {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+  padding-left: 20rpx;
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 8rpx;
+    height: 32rpx;
+    background-color: #4CAF50;
+    border-radius: 4rpx;
+  }
+}
+
+.feature-list {
+  .feature-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16rpx;
+    
+    .feature-icon {
+      width: 32rpx;
+      height: 32rpx;
+      background-color: #4CAF50;
+      color: #fff;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20rpx;
+      font-weight: bold;
+      margin-right: 16rpx;
+      flex-shrink: 0;
+    }
+    
+    .feature-text {
+      font-size: 28rpx;
+      color: #666;
+      line-height: 1.5;
+    }
+  }
+}
+
+.usage-content {
+  font-size: 28rpx;
+  color: #666;
+  line-height: 1.6;
+  padding: 20rpx;
+  background-color: #f8f8f8;
+  border-radius: 12rpx;
+}
+
+.detail-images {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+}
+
+.detail-image {
+  width: 100%;
+  border-radius: 12rpx;
+}
+
+.bottom-actions {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  border-top: 1rpx solid #f0f0f0;
+  z-index: 1000;
+}
+
+.action-btn {
+  text-align: center;
+  padding: 24rpx 0;
+  border-radius: 12rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.consult-btn {
+  background-color: #4CAF50;
+  color: #fff;
+}
+</style> 

pages/service/mall.vue

@@ -0,0 +1,419 @@
+<template>
+  <view class="mall-container">
+    <!-- 顶部搜索框 -->
+    <view class="search-header">
+      <view class="search-box">
+        <view class="search-input">
+          <image class="search-icon" src="/static/icons/search.png" mode="aspectFit"></image>
+          <input 
+            class="input" 
+            placeholder="搜索农资商品（如：化肥、除草剂）" 
+            placeholder-style="color: #999;"
+            v-model="searchKeyword"
+            @confirm="handleSearch"
+          />
+        </view>
+      </view>
+    </view>
+
+    <!-- 分类导航 -->
+    <view class="category-nav">
+      <scroll-view 
+        class="nav-scroll" 
+        scroll-x="true" 
+        :show-scrollbar="false"
+        :enhanced="true"
+        :bounces="false"
+        :scroll-with-animation="true"
+        :scroll-left="scrollLeft"
+      >
+        <view class="nav-list">
+          <view 
+            class="nav-item"
+            :class="{ active: activeCategory === item.id }"
+            v-for="item in categoryList" 
+            :key="item.id"
+            @click="switchCategory(item.id)"
+          >
+            {{ item.name }}
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- 商品展示区 -->
+    <view class="goods-container">
+      <view class="goods-grid">
+        <view 
+          class="goods-card"
+          v-for="item in filteredGoods" 
+          :key="item.id"
+          @click="navigateToDetail(item)"
+        >
+          <view class="goods-image">
+            <image :src="item.image" mode="aspectFill"></image>
+          </view>
+          <view class="goods-info">
+            <text class="goods-title">{{ item.title }}</text>
+            <text class="goods-desc">{{ item.description }}</text>
+            <view class="goods-price">
+              <text class="price">¥{{ item.price }}</text>
+              <text class="unit">/{{ item.unit }}</text>
+            </view>
+            <view class="action-btn">了解更多</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchKeyword: '',
+      activeCategory: 'recommend',
+      scrollLeft: 0,
+      
+      // 分类列表
+      categoryList: [
+        { id: 'recommend', name: '推荐' },
+        { id: 'seeds', name: '种子' },
+        { id: 'fertilizer', name: '肥料' },
+        { id: 'pesticide', name: '农药' },
+        { id: 'film', name: '农膜' },
+        { id: 'parts', name: '农机配件' }
+      ],
+      
+      // 商品列表
+      goodsList: [
+        {
+          id: 1,
+          title: '高产玉米种子',
+          description: '优质杂交种，抗病性强，适应性广',
+          price: '68',
+          unit: '袋',
+          image: '/static/images/products/corn-seeds-new.jpg',
+          category: 'seeds'
+        },
+        {
+          id: 2,
+          title: '复合肥料NPK',
+          description: '15-15-15配比，全营养均衡',
+          price: '120',
+          unit: '袋',
+          image: '/static/images/products/fertilizer.jpg',
+          category: 'fertilizer'
+        },
+        {
+          id: 3,
+          title: '植物保护剂',
+          description: '广谱除草，效果持久',
+          price: '45',
+          unit: '瓶',
+          image: '/static/images/products/plant-protection.jpg',
+          category: 'pesticide'
+        },
+        {
+          id: 4,
+          title: '优质水稻种子',
+          description: '高产稳产，米质优良',
+          price: '85',
+          unit: '袋',
+          image: '/static/images/products/seeds-packets.jpg',
+          category: 'seeds'
+        },
+        {
+          id: 5,
+          title: '有机肥料',
+          description: '纯天然有机，改良土壤',
+          price: '95',
+          unit: '袋',
+          image: '/static/images/products/organic-fertilizer-new.jpg',
+          category: 'fertilizer'
+        },
+        {
+          id: 6,
+          title: '农用工具套装',
+          description: '多功能农具，提高作业效率',
+          price: '285',
+          unit: '套',
+          image: '/static/images/products/agriculture-tools.jpg',
+          category: 'pesticide'
+        },
+        {
+          id: 7,
+          title: '温室农膜',
+          description: '保温保湿，延长生长期',
+          price: '125',
+          unit: '卷',
+          image: '/static/images/products/greenhouse-film.jpg',
+          category: 'film'
+        },
+        {
+          id: 8,
+          title: '农业机械配件',
+          description: '耐用配件，维护设备正常运行',
+          price: '350',
+          unit: '套',
+          image: '/static/images/products/farming-equipment.jpg',
+          category: 'parts'
+        }
+      ]
+    }
+  },
+  
+  computed: {
+    filteredGoods() {
+      let goods = this.goodsList;
+      
+      // 按分类筛选
+      if (this.activeCategory !== 'recommend') {
+        goods = goods.filter(item => item.category === this.activeCategory);
+      }
+      
+      // 按搜索关键词筛选
+      if (this.searchKeyword.trim()) {
+        const keyword = this.searchKeyword.trim().toLowerCase();
+        goods = goods.filter(item => 
+          item.title.toLowerCase().includes(keyword) || 
+          item.description.toLowerCase().includes(keyword)
+        );
+      }
+      
+      return goods;
+    }
+  },
+  
+  methods: {
+    // 切换分类
+    switchCategory(categoryId) {
+      this.activeCategory = categoryId;
+      // 滚动到当前分类位置
+      this.$nextTick(() => {
+        this.scrollToActiveCategory(categoryId);
+      });
+    },
+    
+    // 滚动到激活的分类  
+    scrollToActiveCategory(categoryId) {
+      const index = this.categoryList.findIndex(item => item.id === categoryId);
+      if (index > -1) {
+        // 计算滚动位置，让当前分类居中显示
+        const itemWidth = 120; // 每个分类项大约120rpx宽度
+        const containerWidth = 750; // 屏幕宽度
+        const scrollLeft = Math.max(0, index * itemWidth - containerWidth / 2 + itemWidth / 2);
+        
+        // 设置scroll-view的scrollLeft
+        this.scrollLeft = scrollLeft;
+      }
+    },
+    
+    // 搜索处理
+    handleSearch() {
+      if (!this.searchKeyword.trim()) {
+        uni.showToast({
+          title: '请输入搜索关键词',
+          icon: 'none'
+        });
+        return;
+      }
+      // 搜索逻辑已在computed中处理
+    },
+    
+    // 导航到商品详情
+    navigateToDetail(goods) {
+      uni.navigateTo({
+        url: `/pages/service/mall-detail?id=${goods.id}&title=${encodeURIComponent(goods.title)}`
+      });
+    }
+  },
+  
+  onNavigationBarTitleText() {
+    return '农资商城';
+  }
+}
+</script>
+
+<style lang="scss">
+.mall-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.search-header {
+  background-color: #fff;
+  padding: 20rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.search-box {
+  position: relative;
+}
+
+.search-input {
+  display: flex;
+  align-items: center;
+  background-color: #f8f8f8;
+  border-radius: 32rpx;
+  padding: 16rpx 24rpx;
+  
+  .search-icon {
+    width: 32rpx;
+    height: 32rpx;
+    margin-right: 16rpx;
+  }
+  
+  .input {
+    flex: 1;
+    font-size: 28rpx;
+    line-height: 1.5;
+  }
+}
+
+.category-nav {
+  background-color: #fff;
+  border-bottom: 1rpx solid #f0f0f0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.nav-scroll {
+  white-space: nowrap;
+  height: 88rpx;
+  width: 100%;
+  overflow: hidden;
+  -webkit-overflow-scrolling: touch; /* iOS滑动优化 */
+  scroll-behavior: smooth; /* 平滑滚动 */
+}
+
+.nav-list {
+  display: inline-flex;
+  padding: 0 20rpx;
+  height: 100%;
+  align-items: center;
+  min-width: 100%;
+}
+
+.nav-item {
+  flex-shrink: 0;
+  padding: 24rpx 32rpx;
+  margin-right: 8rpx;
+  font-size: 28rpx;
+  color: #666;
+  font-weight: 500;
+  position: relative;
+  white-space: nowrap;
+  transition: all 0.2s ease;
+  border-radius: 8rpx;
+  
+  &:active {
+    background-color: #f0f0f0;
+    transform: scale(0.95);
+  }
+  
+  &.active {
+    color: #4CAF50;
+    font-weight: bold;
+    background-color: #f8fdf8;
+  }
+  
+  &.active::after {
+    content: '';
+    position: absolute;
+    bottom: 8rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40rpx;
+    height: 4rpx;
+    background-color: #4CAF50;
+    border-radius: 2rpx;
+  }
+}
+
+.goods-container {
+  padding: 20rpx;
+}
+
+.goods-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20rpx;
+}
+
+.goods-card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s ease;
+  
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.goods-image {
+  width: 100%;
+  height: 240rpx;
+  
+  image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.goods-info {
+  padding: 24rpx;
+}
+
+.goods-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+  line-height: 1.4;
+  display: block;
+  margin-bottom: 8rpx;
+}
+
+.goods-desc {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 1.4;
+  display: block;
+  margin-bottom: 16rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.goods-price {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 20rpx;
+  
+  .price {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #4CAF50;
+  }
+  
+  .unit {
+    font-size: 24rpx;
+    color: #999;
+    margin-left: 4rpx;
+  }
+}
+
+.action-btn {
+  background-color: #4CAF50;
+  color: #fff;
+  text-align: center;
+  padding: 16rpx 0;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+}
+</style> 

pages/service/my-publish.vue

@@ -0,0 +1,647 @@
+<template>
+  <view class="my-publish-container">
+    <!-- 顶部Tab标签页 -->
+    <view class="tab-header">
+      <view class="tab-list">
+        <view 
+          class="tab-item"
+          :class="{ active: activeTab === 'published' }"
+          @click="switchTab('published')"
+        >
+          <text class="tab-text">销售信息</text>
+        </view>
+        <view 
+          class="tab-item"
+          :class="{ active: activeTab === 'purchase' }"
+          @click="switchTab('purchase')"
+        >
+          <text class="tab-text">收购信息</text>
+        </view>
+      </view>
+      <view class="tab-indicator" :style="{ left: activeTab === 'published' ? '0' : '50%' }"></view>
+    </view>
+
+    <!-- 我的发布页面 -->
+    <view v-if="activeTab === 'published'" class="tab-content">
+      <!-- 搜索筛选 -->
+      <view class="search-section">
+        <view class="search-box">
+          <image class="search-icon" src="/static/icons/search.png" mode="aspectFit"></image>
+          <input 
+            class="search-input" 
+            placeholder="搜索我的农产品" 
+            placeholder-style="color: #999;"
+            v-model="searchKeyword"
+            @confirm="handleSearch"
+          />
+        </view>
+      </view>
+      
+      <!-- 我的发布列表 -->
+      <view class="products-container">
+        <view class="products-list">
+          <view 
+            class="published-card"
+            v-for="item in filteredPublishedProducts" 
+            :key="item.id"
+            @click="navigateToDetail(item)"
+          >
+            <view class="card-content">
+              <view class="product-image">
+                <image :src="item.image" mode="aspectFill"></image>
+              </view>
+              <view class="product-info">
+                <view class="product-header">
+                  <view class="product-name">{{ item.name }}</view>
+                  <view class="price-info">¥{{ item.price }} 元/{{ item.unit }}</view>
+                </view>
+                <view class="product-desc">{{ item.description }}</view>
+                <view class="product-footer">
+                  <view class="publish-time">{{ item.publishTime }}</view>
+                  <view class="status-tag" :class="item.status">
+                    {{ getStatusText(item.status) }}
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 收购信息页面 -->
+    <view v-if="activeTab === 'purchase'" class="tab-content">
+      <!-- 搜索筛选 -->
+      <view class="search-section">
+        <view class="search-box">
+          <image class="search-icon" src="/static/icons/search.png" mode="aspectFit"></image>
+          <input 
+            class="search-input" 
+            placeholder="搜索收购信息" 
+            placeholder-style="color: #999;"
+            v-model="purchaseSearchKeyword"
+            @confirm="handlePurchaseSearch"
+          />
+        </view>
+      </view>
+      
+      <!-- 收购信息列表 -->
+      <view class="products-container">
+        <view class="products-list">
+          <view 
+            class="published-card"
+            v-for="item in filteredPurchaseList" 
+            :key="item.id"
+            @click="navigateToPurchaseDetail(item)"
+          >
+            <view class="card-content">
+              <view class="product-image">
+                <image :src="getPurchaseImage(item)" mode="aspectFill"></image>
+              </view>
+              <view class="product-info">
+                <view class="product-header">
+                  <view class="product-name">{{ item.title }}</view>
+                  <view class="price-info">¥{{ item.budgetPrice }} 元/{{ item.unit }}</view>
+                </view>
+                <view class="product-desc">需求数量：{{ item.quantity }}</view>
+                <view class="product-footer">
+                  <view class="publish-time">{{ item.publishTime }}</view>
+                  <view class="status-tag" :class="item.status">
+                    {{ getStatusText(item.status) }}
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部固定按钮 -->
+    <view class="bottom-action-bar">
+      <view class="action-btn" @click="showPublishModal = true">
+        <text class="btn-text">发布</text>
+      </view>
+    </view>
+
+    <!-- 发布选择弹窗 -->
+    <view class="publish-modal" v-if="showPublishModal" @click="showPublishModal = false">
+      <view class="publish-content" @click.stop>
+        <view class="publish-header">
+          <text class="publish-title">选择发布类型</text>
+          <text class="publish-close" @click="showPublishModal = false">✕</text>
+        </view>
+        <view class="publish-options">
+          <view class="option-item" @click="navigateToPublish">
+            <view class="option-text">
+              <text class="option-title">发布农产品</text>
+              <text class="option-desc">出售我的农产品</text>
+            </view>
+          </view>
+          <view class="option-item" @click="navigateToPurchasePublish">
+            <view class="option-text">
+              <text class="option-title">发布收购信息</text>
+              <text class="option-desc">收购农产品需求</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeTab: 'published',
+      searchKeyword: '',
+      purchaseSearchKeyword: '',
+      showPublishModal: false,
+      
+      // 我的发布列表
+      publishedProductsList: [
+        {
+          id: 1,
+          name: '有机苹果',
+          description: '新鲜采摘，香甜可口',
+          price: '8.5',
+          unit: '斤',
+          image: '/static/images/products/corn-seeds-new.jpg',
+          publishTime: '今天',
+          status: 'approved'
+        },
+        {
+          id: 2,
+          name: '优质大米',
+          description: '当季新米，粒粒饱满',
+          price: '6.8',
+          unit: '斤',
+          image: '/static/images/products/rice-seeds.jpg',
+          publishTime: '昨天',
+          status: 'pending'
+        },
+        {
+          id: 3,
+          name: '新鲜蔬菜包',
+          description: '时令蔬菜，营养丰富',
+          price: '25',
+          unit: '份',
+          image: '/static/images/products/organic-fertilizer-new.jpg',
+          publishTime: '2天前',
+          status: 'approved'
+        },
+        {
+          id: 4,
+          name: '土鸡蛋',
+          description: '散养土鸡，营养价值高',
+          price: '2.5',
+          unit: '个',
+          image: '/static/images/products/seeds-packets.jpg',
+          publishTime: '3天前',
+          status: 'rejected'
+        }
+      ],
+      
+      // 收购信息列表
+      purchaseList: [
+        {
+          id: 1,
+          title: '高价收购优质土豆',
+          category: '蔬菜',
+          quantity: '1000斤',
+          budgetPrice: '3.5',
+          unit: '斤',
+          contact: '张**',
+          location: '本地',
+          publishTime: '今天',
+          status: 'approved'
+        },
+        {
+          id: 2,
+          title: '大量收购新鲜玉米',
+          category: '粮食',
+          quantity: '5000斤',
+          budgetPrice: '2.8',
+          unit: '斤',
+          contact: '李**',
+          location: '周边',
+          publishTime: '昨天',
+          status: 'pending'
+        },
+        {
+          id: 3,
+          title: '收购有机蔬菜',
+          category: '蔬菜',
+          quantity: '500斤',
+          budgetPrice: '8.0',
+          unit: '斤',
+          contact: '王**',
+          location: '本地',
+          publishTime: '2天前',
+          status: 'rejected'
+        }
+      ]
+    }
+  },
+  
+  computed: {
+    filteredPublishedProducts() {
+      let products = this.publishedProductsList;
+      
+      if (this.searchKeyword.trim()) {
+        const keyword = this.searchKeyword.trim().toLowerCase();
+        products = products.filter(item => 
+          item.name.toLowerCase().includes(keyword) || 
+          item.description.toLowerCase().includes(keyword)
+        );
+      }
+      
+      return products;
+    },
+    
+    filteredPurchaseList() {
+      let list = this.purchaseList;
+      
+      if (this.purchaseSearchKeyword.trim()) {
+        const keyword = this.purchaseSearchKeyword.trim().toLowerCase();
+        list = list.filter(item => 
+          item.title.toLowerCase().includes(keyword) || 
+          item.category.toLowerCase().includes(keyword)
+        );
+      }
+      
+      return list;
+    }
+  },
+  
+  methods: {
+    switchTab(tab) {
+      this.activeTab = tab;
+    },
+    
+    getStatusText(status) {
+      const statusMap = {
+        'pending': '审核中',
+        'approved': '已上架',
+        'rejected': '已下架'
+      };
+      return statusMap[status] || '未知';
+    },
+    
+    handleSearch() {
+      // 搜索逻辑已在computed中处理
+    },
+    
+    handlePurchaseSearch() {
+      // 搜索逻辑已在computed中处理
+    },
+    
+    navigateToDetail(product) {
+      uni.navigateTo({
+        url: `/pages/service/sales-detail?id=${product.id}&type=sale&name=${encodeURIComponent(product.name)}&source=myPublish&status=${product.status}`
+      });
+    },
+    
+    navigateToPurchaseDetail(item) {
+      uni.navigateTo({
+        url: `/pages/service/sales-detail?id=${item.id}&type=purchase&title=${encodeURIComponent(item.title)}&source=myPublish&status=${item.status}`
+      });
+    },
+    
+    navigateToPublish() {
+      this.showPublishModal = false;
+      uni.navigateTo({
+        url: '/pages/service/sales-publish'
+      });
+    },
+    
+    navigateToPurchasePublish() {
+      this.showPublishModal = false;
+      uni.navigateTo({
+        url: '/pages/service/purchase-publish'
+      });
+    },
+    
+    // 获取收购信息对应的图片
+    getPurchaseImage(item) {
+      // 根据分类返回对应的默认图片
+      const categoryImages = {
+        '蔬菜': '/static/images/products/organic-fertilizer-new.jpg',
+        '粮食': '/static/images/products/corn-seeds-new.jpg',
+        '水果': '/static/images/products/rice-seeds.jpg',
+        '其他': '/static/images/products/agriculture-tools.jpg'
+      };
+      return categoryImages[item.category] || categoryImages['其他'];
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.my-publish-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: calc(128rpx + env(safe-area-inset-bottom));
+}
+
+.tab-header {
+  background-color: #fff;
+  position: relative;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.tab-list {
+  display: flex;
+  align-items: center;
+}
+
+.tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 32rpx 0;
+  position: relative;
+  
+  .tab-text {
+    font-size: 30rpx;
+    color: #666;
+    font-weight: 500;
+    transition: color 0.3s ease;
+  }
+  
+  &.active .tab-text {
+    color: #4CAF50;
+    font-weight: bold;
+  }
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 50%;
+  height: 4rpx;
+  background-color: #4CAF50;
+  transition: left 0.3s ease;
+}
+
+.tab-content {
+  flex: 1;
+}
+
+.search-section {
+  background-color: #fff;
+  padding: 20rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.search-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  background-color: #f8f8f8;
+  border-radius: 32rpx;
+  padding: 16rpx 24rpx;
+}
+
+.search-icon {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 16rpx;
+}
+
+.search-input {
+  flex: 1;
+  font-size: 28rpx;
+  line-height: 1.5;
+}
+
+.products-container, .purchase-container {
+  padding: 20rpx;
+}
+
+.products-list, .purchase-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.published-card {
+  background-color: #fff;
+  border-radius: 12rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s ease;
+  
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.card-content {
+  display: flex;
+  padding: 20rpx;
+  gap: 20rpx;
+}
+
+.product-image {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+  flex-shrink: 0;
+  
+  image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.product-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.product-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12rpx;
+}
+
+.product-name {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #4CAF50;
+  flex: 1;
+  margin-right: 16rpx;
+}
+
+.price-info {
+  font-size: 26rpx;
+  color: #333;
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+.product-desc {
+  font-size: 26rpx;
+  color: #666;
+  margin-bottom: 16rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.product-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.publish-time {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.status-tag {
+  padding: 8rpx 16rpx;
+  border-radius: 16rpx;
+  font-size: 22rpx;
+  
+  &.pending {
+    background-color: #fff7e6;
+    color: #fa8c16;
+  }
+  
+  &.approved {
+    background-color: #f6ffed;
+    color: #52c41a;
+  }
+  
+  &.rejected {
+    background-color: #fff2f0;
+    color: #ff4d4f;
+  }
+}
+
+// 收购信息现在使用统一的 .published-card 样式
+
+// 底部固定按钮
+.bottom-action-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background-color: #fff;
+  border-top: 1rpx solid #f0f0f0;
+  padding: 20rpx 30rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  z-index: 1000;
+  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+}
+
+.action-btn {
+  width: 100%;
+  height: 88rpx;
+  background-color: #4CAF50;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+  box-sizing: border-box;
+  
+  &:active {
+    background-color: #45a049;
+  }
+  
+  .btn-text {
+    font-size: 32rpx;
+    color: #fff;
+    font-weight: bold;
+  }
+}
+
+.publish-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2000;
+  display: flex;
+  align-items: flex-end;
+}
+
+.publish-content {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 0;
+}
+
+.publish-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  
+  .publish-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+  }
+  
+  .publish-close {
+    font-size: 36rpx;
+    color: #999;
+  }
+}
+
+.publish-options {
+  padding: 20rpx;
+}
+
+.option-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 20rpx;
+  border-radius: 12rpx;
+  margin-bottom: 16rpx;
+  background-color: #f8f8f8;
+  transition: background-color 0.2s ease;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+  
+  &:active {
+    background-color: #e8f5e8;
+  }
+}
+
+.option-text {
+  flex: 1;
+  
+  .option-title {
+    font-size: 30rpx;
+    font-weight: bold;
+    color: #333;
+    display: block;
+    margin-bottom: 8rpx;
+  }
+  
+  .option-desc {
+    font-size: 26rpx;
+    color: #666;
+    display: block;
+  }
+}
+</style> 

pages/service/purchase-publish.vue

@@ -0,0 +1,710 @@
+<template>
+  <view class="purchase-publish-container">
+    <!-- 表单内容 -->
+    <view class="form-container">
+      <!-- 收购标题 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">收购标题</text>
+          <text class="required">*</text>
+        </view>
+        <view class="item-content">
+          <input
+            class="form-input"
+            v-model="formData.title"
+            placeholder="请输入收购标题"
+            placeholder-style="color: #999;"
+            maxlength="30"
+            @input="onTitleInput"
+          />
+          <view class="char-count">{{ titleLength }}/30</view>
+        </view>
+      </view>
+
+      <!-- 收购品类 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">收购品类</text>
+          <text class="required">*</text>
+        </view>
+        <view class="item-content">
+          <view class="category-selector" @click="showCategoryPicker = true">
+            <text class="selector-text" :class="{ placeholder: !formData.category }">
+              {{ formData.category || '请选择收购品类' }}
+            </text>
+            <text class="arrow-icon">></text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 收购数量 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">收购数量</text>
+          <text class="required">*</text>
+        </view>
+        <view class="item-content">
+          <view class="input-with-unit">
+            <input
+              class="form-input"
+              v-model="formData.quantity"
+              placeholder="请输入收购数量"
+              placeholder-style="color: #999;"
+              type="number"
+            />
+            <text class="unit-text">斤</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 单价预算 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">单价预算</text>
+          <text class="required">*</text>
+        </view>
+        <view class="item-content">
+          <view class="input-with-unit">
+            <text class="currency-symbol">¥</text>
+            <input
+              class="form-input"
+              v-model="formData.budgetPrice"
+              placeholder="请输入单价预算"
+              placeholder-style="color: #999;"
+              type="digit"
+            />
+            <text class="unit-text">元/斤</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 补充说明 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">补充说明</text>
+        </view>
+        <view class="item-content">
+          <textarea
+            class="form-textarea"
+            v-model="formData.description"
+            placeholder="请描述交货要求、时间等补充信息"
+            placeholder-style="color: #999;"
+            maxlength="200"
+            auto-height
+            @input="onDescInput"
+          />
+          <view class="char-count">{{ descLength }}/200</view>
+        </view>
+      </view>
+
+      <!-- 上传参考图片 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">参考图片</text>
+          <text class="optional">(最多2张)</text>
+        </view>
+        <view class="item-content">
+          <view class="image-upload-area">
+            <view 
+              class="image-item"
+              v-for="(image, index) in formData.images"
+              :key="index"
+            >
+              <image class="uploaded-image" :src="image" mode="aspectFill"></image>
+              <view class="image-delete" @click="removeImage(index)">×</view>
+            </view>
+            <view 
+              class="image-upload-btn"
+              v-if="formData.images.length < 2"
+              @click="chooseImage"
+            >
+              <text class="upload-icon">+</text>
+              <text class="upload-text">上传图片</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 联系人信息 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">联系人信息</text>
+        </view>
+        <view class="item-content">
+          <view class="contact-input-row">
+            <text class="contact-label">联系人：</text>
+            <input
+              class="contact-input"
+              v-model="formData.contactName"
+              placeholder="请输入联系人姓名"
+              placeholder-style="color: #999;"
+              maxlength="10"
+            />
+          </view>
+          <view class="contact-input-row">
+            <text class="contact-label">电话：</text>
+            <input
+              class="contact-input"
+              v-model="formData.contactPhone"
+              placeholder="请输入联系电话"
+              placeholder-style="color: #999;"
+              type="number"
+              maxlength="11"
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部提交按钮 -->
+    <view class="bottom-action-bar">
+      <view class="submit-btn" @click="submitForm">
+        <text class="btn-text">{{ isEditMode ? '保存修改' : '提交发布' }}</text>
+      </view>
+    </view>
+
+    <!-- 品类选择弹窗 -->
+    <view class="picker-modal" v-if="showCategoryPicker" @click="showCategoryPicker = false">
+      <view class="picker-content" @click.stop>
+        <view class="picker-header">
+          <text class="picker-title">选择收购品类</text>
+          <text class="picker-close" @click="showCategoryPicker = false">×</text>
+        </view>
+        <view class="picker-options">
+          <view 
+            class="picker-option"
+            v-for="category in categoryOptions"
+            :key="category"
+            @click="selectCategory(category)"
+          >
+            <text class="option-text">{{ category }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isEditMode: false, // 是否为编辑模式
+      editItemId: '', // 编辑的收购信息ID
+      formData: {
+        title: '',
+        category: '',
+        quantity: '',
+        budgetPrice: '',
+        description: '',
+        images: [],
+        contactName: '',
+        contactPhone: ''
+      },
+      categoryOptions: ['蔬菜', '水果', '粮食', '其他'],
+      showCategoryPicker: false,
+      titleLength: 0,
+      descLength: 0
+    }
+  },
+  
+  onLoad(options) {
+    // 检查是否为编辑模式
+    if (options.action === 'edit' && options.id) {
+      this.isEditMode = true;
+      this.editItemId = options.id;
+      
+      // 设置页面标题
+      uni.setNavigationBarTitle({
+        title: '编辑收购信息'
+      });
+      
+      // 加载收购信息数据
+      this.loadPurchaseData();
+    } else {
+      // 新建模式
+      this.isEditMode = false;
+      uni.setNavigationBarTitle({
+        title: '发布收购信息'
+      });
+    }
+  },
+  
+  methods: {
+    // 加载收购信息数据（编辑模式）
+    loadPurchaseData() {
+      // 模拟从API加载数据，实际应用中需要根据ID调用相应的API
+      uni.showLoading({ title: '加载中...' });
+      
+      setTimeout(() => {
+        // 收购信息的模拟数据
+        const mockData = {
+          title: '高价收购优质土豆',
+          category: '蔬菜',
+          quantity: '1000',
+          budgetPrice: '3.5',
+          description: '大量收购优质土豆，要求新鲜无病害，无青皮，规格统一。支持长期合作，价格优惠，现金结算。有货源的农户欢迎联系，我们提供上门收购服务。',
+          images: [
+            '/static/images/products/agriculture-tools.jpg'
+          ],
+          contactName: '李先生',
+          contactPhone: '13856785678'
+        };
+        
+        // 填充表单数据
+        this.formData = { ...mockData };
+        
+        // 更新字符计数
+        this.titleLength = this.formData.title.length;
+        this.descLength = this.formData.description.length;
+        
+        uni.hideLoading();
+      }, 1000);
+    },
+    
+    // 标题输入处理
+    onTitleInput(e) {
+      this.titleLength = e.detail.value.length;
+    },
+    
+    // 描述输入处理
+    onDescInput(e) {
+      this.descLength = e.detail.value.length;
+    },
+    
+    // 选择品类
+    selectCategory(category) {
+      this.formData.category = category;
+      this.showCategoryPicker = false;
+    },
+    
+    // 选择图片
+    chooseImage() {
+      const remainingCount = 2 - this.formData.images.length;
+      uni.chooseImage({
+        count: remainingCount,
+        sizeType: ['compressed'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          this.formData.images = this.formData.images.concat(res.tempFilePaths);
+        },
+        fail: (err) => {
+          console.error('选择图片失败:', err);
+        }
+      });
+    },
+    
+    // 删除图片
+    removeImage(index) {
+      this.formData.images.splice(index, 1);
+    },
+    
+    // 表单验证
+    validateForm() {
+      if (!this.formData.title.trim()) {
+        uni.showToast({
+          title: '请输入收购标题',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      if (!this.formData.category) {
+        uni.showToast({
+          title: '请选择收购品类',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      if (!this.formData.quantity || this.formData.quantity <= 0) {
+        uni.showToast({
+          title: '请输入有效的收购数量',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      if (!this.formData.budgetPrice || this.formData.budgetPrice <= 0) {
+        uni.showToast({
+          title: '请输入有效的单价预算',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      if (!this.formData.contactName.trim()) {
+        uni.showToast({
+          title: '请输入联系人姓名',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      if (!this.formData.contactPhone.trim()) {
+        uni.showToast({
+          title: '请输入联系电话',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      // 简单的手机号格式验证
+      const phoneRegex = /^1[3-9]\d{9}$/;
+      if (!phoneRegex.test(this.formData.contactPhone)) {
+        uni.showToast({
+          title: '请输入正确的手机号码',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      return true;
+    },
+    
+    // 提交表单
+    submitForm() {
+      if (!this.validateForm()) {
+        return;
+      }
+      
+      // 显示加载提示
+      const loadingTitle = this.isEditMode ? '保存中...' : '提交中...';
+      uni.showLoading({
+        title: loadingTitle
+      });
+      
+      // 模拟提交
+      setTimeout(() => {
+        uni.hideLoading();
+        
+        if (this.isEditMode) {
+          // 编辑模式 - 保存修改
+          uni.showModal({
+            title: '保存成功',
+            content: '您的修改已保存成功！',
+            showCancel: false,
+            success: () => {
+              uni.navigateBack();
+            }
+          });
+        } else {
+          // 新建模式 - 提交发布
+          uni.showToast({
+            title: '发布成功',
+            icon: 'success'
+          });
+          
+          // 返回上一页
+          setTimeout(() => {
+            uni.navigateBack();
+          }, 1500);
+        }
+      }, 2000);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.purchase-publish-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: calc(128rpx + env(safe-area-inset-bottom));
+}
+
+.form-container {
+  padding: 20rpx;
+}
+
+.form-item {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 24rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.item-label {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+
+.label-text {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.required {
+  color: #ff4d4f;
+  font-size: 28rpx;
+  margin-left: 4rpx;
+}
+
+.optional {
+  color: #999;
+  font-size: 24rpx;
+  margin-left: 8rpx;
+}
+
+.item-content {
+  position: relative;
+}
+
+.form-input {
+  width: 100%;
+  height: 44rpx;
+  font-size: 28rpx;
+  color: #333;
+  line-height: 44rpx;
+}
+
+.form-textarea {
+  width: 100%;
+  min-height: 120rpx;
+  font-size: 28rpx;
+  color: #333;
+  line-height: 1.5;
+}
+
+.char-count {
+  position: absolute;
+  right: 0;
+  bottom: -4rpx;
+  font-size: 24rpx;
+  color: #999;
+}
+
+// 品类选择器
+.category-selector {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.selector-text {
+  font-size: 28rpx;
+  color: #333;
+  
+  &.placeholder {
+    color: #999;
+  }
+}
+
+.arrow-icon {
+  font-size: 24rpx;
+  color: #999;
+}
+
+// 带单位的输入框
+.input-with-unit {
+  display: flex;
+  align-items: center;
+  border-bottom: 1rpx solid #f0f0f0;
+  padding: 12rpx 0;
+}
+
+.currency-symbol {
+  font-size: 28rpx;
+  color: #333;
+  margin-right: 8rpx;
+}
+
+.unit-text {
+  font-size: 28rpx;
+  color: #666;
+  margin-left: 8rpx;
+  white-space: nowrap;
+}
+
+// 图片上传
+.image-upload-area {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+
+.image-item {
+  position: relative;
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+}
+
+.uploaded-image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-delete {
+  position: absolute;
+  top: -8rpx;
+  right: -8rpx;
+  width: 32rpx;
+  height: 32rpx;
+  background-color: #ff4d4f;
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20rpx;
+  font-weight: bold;
+}
+
+.image-upload-btn {
+  width: 160rpx;
+  height: 160rpx;
+  border: 2rpx dashed #ddd;
+  border-radius: 8rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #fafafa;
+}
+
+.upload-icon {
+  font-size: 48rpx;
+  color: #999;
+  margin-bottom: 8rpx;
+}
+
+.upload-text {
+  font-size: 24rpx;
+  color: #999;
+}
+
+// 联系人信息
+.contact-input-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.contact-label {
+  font-size: 28rpx;
+  color: #333;
+  width: 120rpx;
+  font-weight: bold;
+}
+
+.contact-input {
+  flex: 1;
+  height: 44rpx;
+  font-size: 28rpx;
+  color: #333;
+  line-height: 44rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  padding: 12rpx 0;
+}
+
+// 底部提交按钮
+.bottom-action-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background-color: #fff;
+  border-top: 1rpx solid #f0f0f0;
+  padding: 20rpx 30rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  z-index: 1000;
+  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 88rpx;
+  background-color: #4CAF50;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+  box-sizing: border-box;
+  
+  &:active {
+    background-color: #45a049;
+  }
+  
+  .btn-text {
+    font-size: 32rpx;
+    color: #fff;
+    font-weight: bold;
+  }
+}
+
+// 品类选择弹窗
+.picker-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2000;
+  display: flex;
+  align-items: flex-end;
+}
+
+.picker-content {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 0;
+}
+
+.picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.picker-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.picker-close {
+  font-size: 36rpx;
+  color: #999;
+}
+
+.picker-options {
+  padding: 20rpx 0;
+}
+
+.picker-option {
+  padding: 24rpx 30rpx;
+  border-bottom: 1rpx solid #f8f8f8;
+  transition: background-color 0.2s ease;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  &:active {
+    background-color: #f5f5f5;
+  }
+}
+
+.option-text {
+  font-size: 30rpx;
+  color: #333;
+}
+</style> 

pages/service/sales-detail.vue

@@ -0,0 +1,630 @@
+<template>
+  <view class="detail-container">
+    <!-- 顶部封面图轮播 -->
+    <view class="image-section">
+      <swiper 
+        class="image-swiper" 
+        :indicator-dots="false"
+        :circular="false"
+        :autoplay="false"
+        @change="onSwiperChange"
+      >
+        <swiper-item v-for="(image, index) in imageList" :key="index" @click="previewImage(index)">
+          <image :src="image" mode="aspectFill" class="cover-image" lazy-load></image>
+        </swiper-item>
+      </swiper>
+      
+      <!-- 自定义分页指示器 -->
+      <view class="custom-dots" v-if="imageList.length > 1">
+        <view 
+          class="dot"
+          :class="{ active: currentImageIndex === index }"
+          v-for="(item, index) in imageList" 
+          :key="index"
+        ></view>
+      </view>
+    </view>
+
+    <!-- 标题和类型标签 -->
+    <view class="title-section">
+      <view class="title-content">
+        <text class="product-title">{{ productInfo.title }}</text>
+        <view class="type-tag" :class="productInfo.type">
+          {{ productInfo.type === 'sale' ? '出售' : '收购' }}
+        </view>
+      </view>
+    </view>
+
+    <!-- 核心信息展示卡片 -->
+    <view class="info-card">
+      <view class="info-row">
+        <text class="info-label">分类</text>
+        <text class="info-value">{{ productInfo.category }}</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">{{ productInfo.type === 'sale' ? '单价' : '收购价' }}</text>
+        <text class="info-value price">¥{{ productInfo.price }}/{{ productInfo.unit }}</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">数量</text>
+        <text class="info-value">{{ productInfo.quantity }}{{ productInfo.unit }}</text>
+      </view>
+      <view class="info-row">
+        <text class="info-label">所在地</text>
+        <text class="info-value location">{{ productInfo.location }}</text>
+      </view>
+    </view>
+
+    <!-- 补充说明区域 -->
+    <view class="description-card">
+      <view class="card-title">
+        <text>{{ productInfo.type === 'sale' ? '产品详情' : '收购要求' }}</text>
+      </view>
+      <view class="description-content">
+        <text class="description-text">
+          {{ productInfo.description || '无补充说明' }}
+        </text>
+      </view>
+    </view>
+
+    <!-- 发布者信息卡片 -->
+    <view class="publisher-card">
+      <view class="card-title">
+        <text>发布者信息</text>
+      </view>
+      <view class="publisher-info">
+        <view class="info-row">
+          <text class="info-label">联系人</text>
+          <text class="info-value">{{ productInfo.publisher.name }}</text>
+        </view>
+        <view class="info-row">
+          <text class="info-label">联系电话</text>
+          <text class="info-value phone">{{ productInfo.publisher.phone }}</text>
+        </view>
+        <view class="info-row">
+          <text class="info-label">发布时间</text>
+          <text class="info-value">{{ productInfo.publishTime }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部操作按钮 -->
+    <view class="action-buttons" v-if="shouldShowActionButtons">
+      <!-- 当前用户发布的内容 -->
+      <template v-if="isOwnProduct">
+        <!-- 已上架状态：显示编辑和下架 -->
+        <template v-if="productStatus === 'approved'">
+          <button class="action-btn edit-btn" @click="editProduct">
+            编辑
+          </button>
+          <button class="action-btn remove-btn" @click="removeProduct">
+            下架
+          </button>
+        </template>
+        
+        <!-- 审核中状态：显示编辑和撤销 -->
+        <template v-else-if="productStatus === 'pending'">
+          <button class="action-btn edit-btn" @click="editProduct">
+            编辑
+          </button>
+          <button class="action-btn cancel-btn" @click="cancelProduct">
+            撤销
+          </button>
+        </template>
+        
+        <!-- 已下架状态：不显示任何按钮 -->
+      </template>
+      
+      <!-- 他人发布的内容 -->
+      <template v-else>
+        <button class="action-btn contact-btn" @click="contactPublisher">
+          立即联系
+        </button>
+      </template>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      currentImageIndex: 0,
+      source: '', // 页面来源，myPublish表示来自我的发布页面
+      productStatus: '', // 产品状态：pending, approved, rejected
+      productInfo: {
+        id: '',
+        type: 'sale', // sale: 出售, purchase: 收购
+        title: '',
+        category: '',
+        price: '',
+        quantity: '',
+        unit: '',
+        location: '',
+        description: '',
+        publisher: {
+          name: '',
+          phone: '',
+          userId: ''
+        },
+        publishTime: '',
+        images: []
+      },
+      imageList: [],
+      isOwnProduct: false // 是否为当前用户发布的产品
+    }
+  },
+  
+  onLoad(options) {
+    // 获取页面参数
+    if (options.id) {
+      this.source = options.source || '';
+      this.productStatus = options.status || '';
+      this.loadProductDetail(options.id, options.type);
+    }
+  },
+  
+  computed: {
+    // 判断是否显示操作按钮
+    shouldShowActionButtons() {
+      if (!this.isOwnProduct) {
+        // 他人发布的内容始终显示联系按钮
+        return true;
+      } else {
+        // 自己发布的内容，已下架状态不显示任何按钮
+        return this.productStatus !== 'rejected';
+      }
+    }
+  },
+  
+  methods: {
+    // 加载产品详情
+    loadProductDetail(id, type) {
+      // 根据类型模拟不同的数据结构
+      let mockData;
+      
+      if (type === 'purchase') {
+        // 收购信息的数据结构
+        mockData = {
+          id: id,
+          type: 'purchase',
+          title: '高价收购优质土豆',
+          category: '蔬菜',
+          price: '3.5',
+          quantity: '1000',
+          unit: '斤',
+          location: '山东·烟台',
+          description: '大量收购优质土豆，要求新鲜无病害，无青皮，规格统一。支持长期合作，价格优惠，现金结算。有货源的农户欢迎联系，我们提供上门收购服务。',
+          publisher: {
+            name: '李**',
+            phone: '138****5678',
+            userId: 'user456'
+          },
+          publishTime: '2025-01-21 10:30',
+          images: [
+            '/static/images/products/agriculture-tools.jpg',
+            '/static/images/products/organic-fertilizer-new.jpg',
+            '/static/images/products/plastic-film.jpg'
+          ]
+        };
+      } else {
+        // 出售信息的数据结构
+        mockData = {
+          id: id,
+          type: type || 'sale',
+          title: '2024年红富士苹果',
+          category: '水果',
+          price: '8.5',
+          quantity: '1000',
+          unit: '斤',
+          location: '山东·烟台',
+          description: '自家果园种植的红富士苹果，个大味甜，果形端正，色泽鲜艳。采用有机种植方式，无农药残留，口感清脆香甜。现大量上市，欢迎各地客商前来洽谈合作。支持批发零售，量大价优。',
+          publisher: {
+            name: '张**',
+            phone: '188****1234',
+            userId: 'user123'
+          },
+          publishTime: '2025-01-21 14:20',
+          images: [
+            '/static/images/products/corn-seeds-new.jpg',
+            '/static/images/products/rice-seeds.jpg',
+            '/static/images/products/seeds-packets.jpg',
+            '/static/images/products/greenhouse-film.jpg'
+          ]
+        };
+      }
+      
+      this.productInfo = mockData;
+      this.imageList = mockData.images;
+      
+      // 判断是否为当前用户发布的产品
+      // 如果来源是我的发布页面，则表示是自己的产品
+      this.isOwnProduct = this.source === 'myPublish';
+    },
+    
+    // 轮播图切换
+    onSwiperChange(e) {
+      this.currentImageIndex = e.detail.current;
+    },
+    
+    // 预览图片
+    previewImage(index) {
+      uni.previewImage({
+        current: index,
+        urls: this.imageList
+      });
+    },
+    
+    // 编辑产品
+    editProduct() {
+      if (this.productInfo.type === 'purchase') {
+        // 收购信息跳转到收购编辑页面
+        uni.navigateTo({
+          url: `/pages/service/purchase-publish?action=edit&id=${this.productInfo.id}`
+        });
+      } else {
+        // 销售信息跳转到销售编辑页面
+        uni.navigateTo({
+          url: `/pages/service/sales-publish?action=edit&id=${this.productInfo.id}&type=${this.productInfo.type}`
+        });
+      }
+    },
+    
+    // 下架产品
+    removeProduct() {
+      uni.showModal({
+        title: '确认下架',
+        content: '确定要下架这条信息吗？下架后其他用户将无法查看。',
+        confirmText: '确认下架',
+        cancelText: '取消',
+        success: (res) => {
+          if (res.confirm) {
+            // 执行下架操作
+            this.handleRemoveProduct();
+          }
+        }
+      });
+    },
+    
+    // 处理下架操作
+    handleRemoveProduct() {
+      // 模拟下架API调用
+      uni.showLoading({ title: '下架中...' });
+      
+      setTimeout(() => {
+        uni.hideLoading();
+        uni.showToast({
+          title: '下架成功',
+          icon: 'success'
+        });
+        
+        // 返回上一页
+        setTimeout(() => {
+          uni.navigateBack();
+        }, 1500);
+      }, 1000);
+    },
+    
+    // 联系发布者
+    contactPublisher() {
+      // 获取真实电话号码并拨打
+      const realPhone = this.getRealPhoneNumber();
+      
+      uni.showModal({
+        title: '联系发布者',
+        content: `确定要拨打 ${realPhone} 吗？`,
+        confirmText: '拨打',
+        cancelText: '取消',
+        success: (res) => {
+          if (res.confirm) {
+            uni.makePhoneCall({
+              phoneNumber: realPhone,
+              fail: () => {
+                uni.showToast({
+                  title: '拨号失败',
+                  icon: 'none'
+                });
+              }
+            });
+          }
+        }
+      });
+    },
+    
+    // 撤销产品（审核中状态）
+    cancelProduct() {
+      uni.showModal({
+        title: '确认撤销',
+        content: '确定要撤销这条发布信息吗？撤销后需要重新提交审核。',
+        confirmText: '确认撤销',
+        cancelText: '取消',
+        success: (res) => {
+          if (res.confirm) {
+            // 执行撤销操作
+            this.handleCancelProduct();
+          }
+        }
+      });
+    },
+    
+    // 处理撤销操作
+    handleCancelProduct() {
+      // 模拟撤销API调用
+      uni.showLoading({ title: '撤销中...' });
+      
+      setTimeout(() => {
+        uni.hideLoading();
+        uni.showToast({
+          title: '撤销成功',
+          icon: 'success'
+        });
+        
+        // 返回上一页
+        setTimeout(() => {
+          uni.navigateBack();
+        }, 1500);
+      }, 1000);
+    },
+    
+    // 获取真实电话号码（实际应用中从API获取）
+    getRealPhoneNumber() {
+      // 模拟从API获取真实电话号码
+      return '18812341234';
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.detail-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: 120rpx;
+}
+
+// 顶部封面图轮播
+.image-section {
+  position: relative;
+  margin: 20rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+  background-color: #fff;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.image-swiper {
+  width: 100%;
+  height: 500rpx;
+}
+
+swiper-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.cover-image {
+  width: 100%;
+  height: 100%;
+}
+
+.custom-dots {
+  position: absolute;
+  bottom: 20rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 12rpx;
+}
+
+.dot {
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 6rpx;
+  background-color: rgba(255, 255, 255, 0.5);
+  transition: all 0.3s ease;
+  
+  &.active {
+    background-color: #fff;
+    width: 24rpx;
+  }
+}
+
+// 标题和类型标签
+.title-section {
+  margin: 0 20rpx 20rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.title-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20rpx;
+}
+
+.product-title {
+  flex: 1;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  line-height: 1.4;
+}
+
+.type-tag {
+  padding: 8rpx 16rpx;
+  border-radius: 20rpx;
+  font-size: 24rpx;
+  font-weight: bold;
+  flex-shrink: 0;
+  
+  &.sale {
+    background-color: #e8f5e8;
+    color: #4CAF50;
+  }
+  
+  &.purchase {
+    background-color: #e6f7ff;
+    color: #1890ff;
+  }
+}
+
+// 信息卡片通用样式
+.info-card, .description-card, .publisher-card {
+  margin: 0 20rpx 20rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.card-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 24rpx;
+  padding-bottom: 16rpx;
+  border-bottom: 2rpx solid #f5f5f5;
+}
+
+// 核心信息展示
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 0;
+  border-bottom: 1rpx solid #f8f8f8;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.info-label {
+  font-size: 28rpx;
+  color: #666;
+  flex-shrink: 0;
+  width: 120rpx;
+}
+
+.info-value {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 500;
+  text-align: right;
+  flex: 1;
+  
+  &.price {
+    color: #ff6b35;
+    font-weight: bold;
+    font-size: 30rpx;
+  }
+  
+  &.location {
+    color: #4CAF50;
+  }
+  
+  &.phone {
+    color: #1890ff;
+  }
+}
+
+// 补充说明区域
+.description-content {
+  padding: 20rpx;
+  background-color: #f8f9fa;
+  border-radius: 12rpx;
+  border-left: 4rpx solid #4CAF50;
+}
+
+.description-text {
+  font-size: 26rpx;
+  color: #666;
+  line-height: 1.6;
+}
+
+// 发布者信息
+.publisher-info {
+  .info-row {
+    padding: 20rpx 0;
+  }
+}
+
+// 底部操作按钮
+.action-buttons {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20rpx 30rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  background-color: #fff;
+  border-top: 1rpx solid #f0f0f0;
+  display: flex;
+  gap: 20rpx;
+  z-index: 100;
+}
+
+.action-btn {
+  flex: 1;
+  height: 80rpx;
+  border-radius: 40rpx;
+  font-size: 28rpx;
+  font-weight: bold;
+  border: none;
+  transition: all 0.3s ease;
+  
+  &.edit-btn {
+    background-color: #fff;
+    color: #4CAF50;
+    border: 2rpx solid #4CAF50;
+    
+    &:active {
+      background-color: #f0fdf4;
+    }
+  }
+  
+  &.remove-btn {
+    background-color: #fff;
+    color: #ff4757;
+    border: 2rpx solid #ff4757;
+    
+    &:active {
+      background-color: #fff5f5;
+    }
+  }
+  
+  &.cancel-btn {
+    background-color: #fff;
+    color: #fa8c16;
+    border: 2rpx solid #fa8c16;
+    
+    &:active {
+      background-color: #fff7e6;
+    }
+  }
+  
+  &.contact-btn {
+    background-color: #4CAF50;
+    color: #fff;
+    
+    &:active {
+      background-color: #45a049;
+    }
+  }
+}
+
+// 防止按钮点击状态样式被覆盖
+button[disabled] {
+  opacity: 0.6;
+}
+
+button::after {
+  border: none;
+}
+</style> 

pages/service/sales-publish.vue

@@ -0,0 +1,751 @@
+<template>
+  <view class="sales-publish-container">
+    <!-- 表单内容 -->
+    <view class="form-container">
+      <!-- 产品名称 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">产品名称</text>
+          <text class="required">*</text>
+        </view>
+        <view class="item-content">
+          <input
+            class="form-input"
+            v-model="formData.productName"
+            placeholder="请输入产品名称"
+            placeholder-style="color: #999;"
+            maxlength="20"
+            @input="onNameInput"
+          />
+          <view class="char-count">{{ nameLength }}/20</view>
+        </view>
+      </view>
+
+      <!-- 产品分类 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">产品分类</text>
+          <text class="required">*</text>
+        </view>
+        <view class="item-content">
+          <view class="category-selector" @click="showCategoryPicker = true">
+            <text class="selector-text" :class="{ placeholder: !formData.category }">
+              {{ formData.category || '请选择产品分类' }}
+            </text>
+            <text class="arrow-icon">></text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 销售价格 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">销售价格</text>
+          <text class="required">*</text>
+        </view>
+        <view class="item-content">
+          <view class="input-with-unit">
+            <text class="currency-symbol">¥</text>
+            <input
+              class="form-input"
+              v-model="formData.price"
+              placeholder="请输入销售价格"
+              placeholder-style="color: #999;"
+              type="digit"
+            />
+            <text class="unit-text">元/斤</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 产品简介 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">产品简介</text>
+        </view>
+        <view class="item-content">
+          <textarea
+            class="form-textarea"
+            v-model="formData.description"
+            placeholder="请简单介绍您的农产品特色、种植方式等"
+            placeholder-style="color: #999;"
+            maxlength="80"
+            auto-height
+            @input="onDescInput"
+          />
+          <view class="char-count">{{ descLength }}/80</view>
+        </view>
+      </view>
+
+      <!-- 产品图片 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">产品图片</text>
+          <text class="required">*</text>
+          <text class="optional">(最多3张)</text>
+        </view>
+        <view class="item-content">
+          <view class="image-upload-area">
+            <view 
+              class="image-item"
+              v-for="(image, index) in formData.images"
+              :key="index"
+            >
+              <image class="uploaded-image" :src="image" mode="aspectFill"></image>
+              <view class="image-delete" @click="removeImage(index)">×</view>
+            </view>
+            <view 
+              class="image-upload-btn"
+              v-if="formData.images.length < 3"
+              @click="chooseImage"
+            >
+              <text class="upload-icon">+</text>
+              <text class="upload-text">上传图片</text>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <!-- 产地信息 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">产地信息</text>
+        </view>
+        <view class="contact-info">
+          <view class="contact-row">
+            <text class="contact-label">产地：</text>
+            <text class="contact-value">{{ locationInfo.address }}</text>
+          </view>
+          <view class="contact-row">
+            <text class="contact-label">地块：</text>
+            <text class="contact-value">{{ locationInfo.field }}</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 联系人信息 -->
+      <view class="form-item">
+        <view class="item-label">
+          <text class="label-text">联系人信息</text>
+        </view>
+        <view class="item-content">
+          <view class="contact-input-row">
+            <text class="contact-label">联系人：</text>
+            <input
+              class="contact-input"
+              v-model="formData.contactName"
+              placeholder="请输入联系人姓名"
+              placeholder-style="color: #999;"
+              maxlength="10"
+            />
+          </view>
+          <view class="contact-input-row">
+            <text class="contact-label">电话：</text>
+            <input
+              class="contact-input"
+              v-model="formData.contactPhone"
+              placeholder="请输入联系电话"
+              placeholder-style="color: #999;"
+              type="number"
+              maxlength="11"
+            />
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部提交按钮 -->
+    <view class="bottom-action-bar">
+      <view class="submit-btn" @click="submitForm">
+        <text class="btn-text">{{ isEditMode ? '保存修改' : '提交审核' }}</text>
+      </view>
+    </view>
+
+    <!-- 分类选择弹窗 -->
+    <view class="picker-modal" v-if="showCategoryPicker" @click="showCategoryPicker = false">
+      <view class="picker-content" @click.stop>
+        <view class="picker-header">
+          <text class="picker-title">选择产品分类</text>
+          <text class="picker-close" @click="showCategoryPicker = false">×</text>
+        </view>
+        <view class="picker-options">
+          <view 
+            class="picker-option"
+            v-for="category in categoryOptions"
+            :key="category"
+            @click="selectCategory(category)"
+          >
+            <text class="option-text">{{ category }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isEditMode: false, // 是否为编辑模式
+      editProductId: '', // 编辑的产品ID
+      productType: 'sale', // 产品类型：sale（销售）或 purchase（收购）
+      formData: {
+        productName: '',
+        category: '',
+        price: '',
+        description: '',
+        images: [],
+        contactName: '',
+        contactPhone: ''
+      },
+      locationInfo: {
+        address: '张家村',
+        field: '水稻田A区'
+      },
+      categoryOptions: ['蔬菜', '水果', '粮食', '畜产品', '水产品', '中药材'],
+      showCategoryPicker: false,
+      nameLength: 0,
+      descLength: 0
+    }
+  },
+  
+  onLoad(options) {
+    // 检查是否为编辑模式
+    if (options.action === 'edit' && options.id) {
+      this.isEditMode = true;
+      this.editProductId = options.id;
+      this.productType = options.type || 'sale';
+      
+      // 设置页面标题
+      uni.setNavigationBarTitle({
+        title: this.productType === 'sale' ? '编辑销售信息' : '编辑收购信息'
+      });
+      
+      // 加载产品数据
+      this.loadProductData();
+    } else {
+      // 新建模式
+      this.isEditMode = false;
+      uni.setNavigationBarTitle({
+        title: '发布农产品'
+      });
+    }
+  },
+  
+  methods: {
+    // 加载产品数据（编辑模式）
+    loadProductData() {
+      // 模拟从API加载数据，实际应用中需要根据ID和类型调用相应的API
+      uni.showLoading({ title: '加载中...' });
+      
+      setTimeout(() => {
+        let mockData;
+        
+        if (this.productType === 'sale') {
+          // 销售信息的模拟数据
+          mockData = {
+            productName: '2024年红富士苹果',
+            category: '水果',
+            price: '8.5',
+            description: '自家果园种植的红富士苹果，个大味甜，果形端正，色泽鲜艳。采用有机种植方式，无农药残留，口感清脆香甜。',
+            images: [
+              '/static/images/products/corn-seeds-new.jpg',
+              '/static/images/products/rice-seeds.jpg'
+            ],
+            contactName: '张先生',
+            contactPhone: '18812341234'
+          };
+        } else {
+          // 收购信息的模拟数据
+          mockData = {
+            productName: '高价收购优质土豆',
+            category: '蔬菜',
+            price: '3.5',
+            description: '大量收购优质土豆，要求新鲜无病害，无青皮，规格统一。支持长期合作，价格优惠，现金结算。',
+            images: [
+              '/static/images/products/agriculture-tools.jpg'
+            ],
+            contactName: '李先生',
+            contactPhone: '13856785678'
+          };
+        }
+        
+        // 填充表单数据
+        this.formData = { ...mockData };
+        
+        // 更新字符计数
+        this.nameLength = this.formData.productName.length;
+        this.descLength = this.formData.description.length;
+        
+        uni.hideLoading();
+      }, 1000);
+    },
+    
+    // 产品名称输入处理
+    onNameInput(e) {
+      this.nameLength = e.detail.value.length;
+    },
+    
+    // 描述输入处理
+    onDescInput(e) {
+      this.descLength = e.detail.value.length;
+    },
+    
+    // 选择分类
+    selectCategory(category) {
+      this.formData.category = category;
+      this.showCategoryPicker = false;
+    },
+    
+    // 选择图片
+    chooseImage() {
+      const remainingCount = 3 - this.formData.images.length;
+      uni.chooseImage({
+        count: remainingCount,
+        sizeType: ['compressed'],
+        sourceType: ['album', 'camera'],
+        success: (res) => {
+          this.formData.images = this.formData.images.concat(res.tempFilePaths);
+        },
+        fail: (err) => {
+          console.error('选择图片失败:', err);
+        }
+      });
+    },
+    
+    // 删除图片
+    removeImage(index) {
+      this.formData.images.splice(index, 1);
+    },
+    
+    // 表单验证
+    validateForm() {
+      if (!this.formData.productName.trim()) {
+        uni.showToast({
+          title: '请输入产品名称',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      if (!this.formData.category) {
+        uni.showToast({
+          title: '请选择产品分类',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      if (!this.formData.price || this.formData.price <= 0) {
+        uni.showToast({
+          title: '请输入有效的销售价格',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      if (this.formData.images.length === 0) {
+        uni.showToast({
+          title: '请至少上传一张产品图片',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      if (!this.formData.contactName.trim()) {
+        uni.showToast({
+          title: '请输入联系人姓名',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      if (!this.formData.contactPhone.trim()) {
+        uni.showToast({
+          title: '请输入联系电话',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      // 简单的手机号格式验证
+      const phoneRegex = /^1[3-9]\d{9}$/;
+      if (!phoneRegex.test(this.formData.contactPhone)) {
+        uni.showToast({
+          title: '请输入正确的手机号码',
+          icon: 'none'
+        });
+        return false;
+      }
+      
+      return true;
+    },
+    
+    // 提交表单
+    submitForm() {
+      if (!this.validateForm()) {
+        return;
+      }
+      
+      // 显示加载提示
+      const loadingTitle = this.isEditMode ? '保存中...' : '提交中...';
+      uni.showLoading({
+        title: loadingTitle
+      });
+      
+      // 模拟提交
+      setTimeout(() => {
+        uni.hideLoading();
+        
+        if (this.isEditMode) {
+          // 编辑模式 - 保存修改
+          uni.showModal({
+            title: '保存成功',
+            content: '您的修改已保存成功！',
+            showCancel: false,
+            success: () => {
+              uni.navigateBack();
+            }
+          });
+        } else {
+          // 新建模式 - 提交审核
+          uni.showModal({
+            title: '提交成功',
+            content: '您的农产品信息已提交审核，审核通过后将在销售页面展示。',
+            showCancel: false,
+            success: () => {
+              uni.navigateBack();
+            }
+          });
+        }
+      }, 2000);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.sales-publish-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: calc(128rpx + env(safe-area-inset-bottom));
+}
+
+.form-container {
+  padding: 20rpx;
+}
+
+.form-item {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding: 24rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.item-label {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
+}
+
+.label-text {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: bold;
+}
+
+.required {
+  color: #ff4d4f;
+  font-size: 28rpx;
+  margin-left: 4rpx;
+}
+
+.optional {
+  color: #999;
+  font-size: 24rpx;
+  margin-left: 8rpx;
+}
+
+.item-content {
+  position: relative;
+}
+
+.form-input {
+  width: 100%;
+  height: 44rpx;
+  font-size: 28rpx;
+  color: #333;
+  line-height: 44rpx;
+}
+
+.form-textarea {
+  width: 100%;
+  min-height: 120rpx;
+  font-size: 28rpx;
+  color: #333;
+  line-height: 1.5;
+}
+
+.char-count {
+  position: absolute;
+  right: 0;
+  bottom: -4rpx;
+  font-size: 24rpx;
+  color: #999;
+}
+
+// 分类选择器
+.category-selector {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.selector-text {
+  font-size: 28rpx;
+  color: #333;
+  
+  &.placeholder {
+    color: #999;
+  }
+}
+
+.arrow-icon {
+  font-size: 24rpx;
+  color: #999;
+}
+
+// 带单位的输入框
+.input-with-unit {
+  display: flex;
+  align-items: center;
+  border-bottom: 1rpx solid #f0f0f0;
+  padding: 12rpx 0;
+}
+
+.currency-symbol {
+  font-size: 28rpx;
+  color: #333;
+  margin-right: 8rpx;
+}
+
+.unit-text {
+  font-size: 28rpx;
+  color: #666;
+  margin-left: 8rpx;
+  white-space: nowrap;
+}
+
+// 图片上传
+.image-upload-area {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+
+.image-item {
+  position: relative;
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+}
+
+.uploaded-image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-delete {
+  position: absolute;
+  top: -8rpx;
+  right: -8rpx;
+  width: 32rpx;
+  height: 32rpx;
+  background-color: #ff4d4f;
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20rpx;
+  font-weight: bold;
+}
+
+.image-upload-btn {
+  width: 160rpx;
+  height: 160rpx;
+  border: 2rpx dashed #ddd;
+  border-radius: 8rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #fafafa;
+}
+
+.upload-icon {
+  font-size: 48rpx;
+  color: #999;
+  margin-bottom: 8rpx;
+}
+
+.upload-text {
+  font-size: 24rpx;
+  color: #999;
+}
+
+// 产地信息
+.contact-info {
+  background-color: #f8f9fa;
+  border-radius: 8rpx;
+  padding: 20rpx;
+}
+
+.contact-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.contact-value {
+  font-size: 26rpx;
+  color: #333;
+}
+
+// 联系人信息输入
+.contact-input-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.contact-label {
+  font-size: 28rpx;
+  color: #333;
+  width: 120rpx;
+  font-weight: bold;
+}
+
+.contact-input {
+  flex: 1;
+  height: 44rpx;
+  font-size: 28rpx;
+  color: #333;
+  line-height: 44rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  padding: 12rpx 0;
+}
+
+// 底部提交按钮
+.bottom-action-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  background-color: #fff;
+  border-top: 1rpx solid #f0f0f0;
+  padding: 20rpx 30rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  z-index: 1000;
+  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+}
+
+.submit-btn {
+  width: 100%;
+  height: 88rpx;
+  background-color: #4CAF50;
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+  box-sizing: border-box;
+  
+  &:active {
+    background-color: #45a049;
+  }
+  
+  .btn-text {
+    font-size: 32rpx;
+    color: #fff;
+    font-weight: bold;
+  }
+}
+
+// 分类选择弹窗
+.picker-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2000;
+  display: flex;
+  align-items: flex-end;
+}
+
+.picker-content {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  padding: 0;
+}
+
+.picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.picker-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+}
+
+.picker-close {
+  font-size: 36rpx;
+  color: #999;
+}
+
+.picker-options {
+  padding: 20rpx 0;
+}
+
+.picker-option {
+  padding: 24rpx 30rpx;
+  border-bottom: 1rpx solid #f8f8f8;
+  transition: background-color 0.2s ease;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  &:active {
+    background-color: #f5f5f5;
+  }
+}
+
+.option-text {
+  font-size: 30rpx;
+  color: #333;
+}
+</style> 

pages/service/sales.vue

@@ -0,0 +1,540 @@
+<template>
+  <view class="sales-container">
+    <!-- 顶部Tab标签页 -->
+    <view class="tab-header">
+      <view class="tab-list">
+        <view 
+          class="tab-item"
+          :class="{ active: activeTab === 'all' }"
+          @click="switchTab('all')"
+        >
+          <text class="tab-text">全部</text>
+        </view>
+        <view 
+          class="tab-item"
+          :class="{ active: activeTab === 'sale' }"
+          @click="switchTab('sale')"
+        >
+          <text class="tab-text">出售信息</text>
+        </view>
+        <view 
+          class="tab-item"
+          :class="{ active: activeTab === 'purchase' }"
+          @click="switchTab('purchase')"
+        >
+          <text class="tab-text">收购信息</text>
+        </view>
+      </view>
+      <view class="tab-indicator" :style="{ left: getIndicatorPosition() }"></view>
+    </view>
+
+    <!-- 搜索筛选 -->
+    <view class="search-section">
+      <view class="search-box">
+        <image class="search-icon" src="/static/icons/search.png" mode="aspectFit"></image>
+        <input 
+          class="search-input" 
+          placeholder="搜索农产品信息" 
+          placeholder-style="color: #999;"
+          v-model="searchKeyword"
+          @confirm="handleSearch"
+        />
+      </view>
+    </view>
+
+    <!-- 全部农产品信息列表 -->
+    <view class="content-container">
+      <view class="info-list">
+        <view 
+          class="info-card"
+          v-for="item in filteredAllInfo" 
+          :key="`${item.type}_${item.id}`"
+          @click="navigateToDetail(item)"
+        >
+          <view class="card-content">
+            <!-- 封面图片 -->
+            <view class="info-image">
+              <image :src="item.image" mode="aspectFill"></image>
+            </view>
+            
+            <!-- 信息内容 -->
+            <view class="info-content">
+              <!-- 类型标签和标题 -->
+              <view class="info-header">
+                <view class="type-tag" :class="item.type">
+                  {{ item.type === 'sale' ? '出售' : '收购' }}
+                </view>
+                <view class="info-title">{{ item.title }}</view>
+              </view>
+              
+              <!-- 简要说明 -->
+              <view class="info-desc">{{ item.description }}</view>
+              
+              <!-- 底部信息 -->
+              <view class="info-footer">
+                <view class="publish-info">
+                  <text class="publisher">{{ item.publisher }}</text>
+                  <text class="publish-time">{{ item.publishTime }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 浮动发布按钮 -->
+    <view class="floating-btn" @click="navigateToMyPublish">
+      <view class="btn-icon">+</view>
+      <text class="btn-text">我的发布</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      activeTab: 'all', // 当前活跃的标签页
+      searchKeyword: '',
+      
+      // 全部农产品信息列表（出售+收购）
+      allInfoList: [
+        // 出售信息
+        {
+          id: 1,
+          type: 'sale',
+          title: '优质红薯 ¥2.5/斤',
+          description: '自家种植，香甜可口，现挖现卖',
+          image: '/static/images/products/corn-seeds-new.jpg',
+          publisher: '李**',
+          publishTime: '今天',
+          price: '2.5',
+          unit: '斤'
+        },
+        {
+          id: 2,
+          type: 'sale', 
+          title: '有机苹果 ¥8.5/斤',
+          description: '新鲜采摘，无农药残留，口感清脆',
+          image: '/static/images/products/rice-seeds.jpg',
+          publisher: '张**',
+          publishTime: '2小时前',
+          price: '8.5',
+          unit: '斤'
+        },
+        {
+          id: 3,
+          type: 'sale',
+          title: '土鸡蛋 ¥2.0/个',
+          description: '散养土鸡，营养丰富，蛋黄金黄',
+          image: '/static/images/products/seeds-packets.jpg',
+          publisher: '王**',
+          publishTime: '昨天',
+          price: '2.0',
+          unit: '个'
+        },
+        {
+          id: 4,
+          type: 'sale',
+          title: '新鲜玉米 ¥3.0/斤',
+          description: '当季玉米，粒粒饱满，甜度高',
+          image: '/static/images/products/greenhouse-film.jpg',
+          publisher: '陈**',
+          publishTime: '2天前',
+          price: '3.0',
+          unit: '斤'
+        },
+        // 收购信息
+        {
+          id: 5,
+          type: 'purchase',
+          title: '高价收购优质土豆 ¥3.5/斤',
+          description: '大量收购，要求新鲜无病害，长期合作',
+          image: '/static/images/products/agriculture-tools.jpg',
+          publisher: '刘**',
+          publishTime: '今天',
+          quantity: '1000斤',
+          budgetPrice: '3.5',
+          unit: '斤'
+        },
+        {
+          id: 6,
+          type: 'purchase',
+          title: '收购新鲜玉米 ¥2.8/斤',
+          description: '需求量大，价格优惠，现金结算',
+          image: '/static/images/products/organic-fertilizer-new.jpg',
+          publisher: '周**',
+          publishTime: '5小时前',
+          quantity: '5000斤',
+          budgetPrice: '2.8',
+          unit: '斤'
+        },
+        {
+          id: 7,
+          type: 'purchase',
+          title: '收购有机蔬菜 ¥8.0/斤',
+          description: '要求有机认证，品质优良，长期收购',
+          image: '/static/images/products/plastic-film.jpg',
+          publisher: '赵**',
+          publishTime: '昨天',
+          quantity: '500斤',
+          budgetPrice: '8.0',
+          unit: '斤'
+        },
+        {
+          id: 8,
+          type: 'sale',
+          title: '优质大米 ¥6.8/斤',
+          description: '当季新米，粒粒饱满，口感香甜',
+          image: '/static/images/products/fertilizer.jpg',
+          publisher: '孙**',
+          publishTime: '3天前',
+          price: '6.8',
+          unit: '斤'
+        }
+      ]
+    }
+  },
+  
+  computed: {
+    filteredAllInfo() {
+      let list = this.allInfoList;
+      
+      // 按类型筛选
+      if (this.activeTab === 'sale') {
+        list = list.filter(item => item.type === 'sale');
+      } else if (this.activeTab === 'purchase') {
+        list = list.filter(item => item.type === 'purchase');
+      }
+      
+      // 按搜索关键词筛选
+      if (this.searchKeyword.trim()) {
+        const keyword = this.searchKeyword.trim().toLowerCase();
+        list = list.filter(item => 
+          item.title.toLowerCase().includes(keyword) || 
+          item.description.toLowerCase().includes(keyword) ||
+          item.publisher.toLowerCase().includes(keyword)
+        );
+      }
+      
+      return list;
+    }
+  },
+  
+  methods: {
+    // 切换Tab标签页
+    switchTab(tab) {
+      this.activeTab = tab;
+    },
+    
+    // 获取指示器位置
+    getIndicatorPosition() {
+      const positions = {
+        'all': '0%',
+        'sale': '33.33%', 
+        'purchase': '66.66%'
+      };
+      return positions[this.activeTab] || '0%';
+    },
+    
+    // 搜索处理
+    handleSearch() {
+      // 搜索逻辑已在computed中处理
+    },
+    
+    // 导航到详情页
+    navigateToDetail(item) {
+      uni.navigateTo({
+        url: `/pages/service/sales-detail?id=${item.id}&type=${item.type}&title=${encodeURIComponent(item.title)}`
+      });
+    },
+    
+    // 导航到我的发布页面
+    navigateToMyPublish() {
+      uni.navigateTo({
+        url: '/pages/service/my-publish'
+      });
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.sales-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding-bottom: 120rpx;
+}
+
+.tab-header {
+  background-color: #fff;
+  position: relative;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.tab-list {
+  display: flex;
+  align-items: center;
+}
+
+.tab-item {
+  flex: 1;
+  text-align: center;
+  padding: 32rpx 0;
+  position: relative;
+  
+  .tab-text {
+    font-size: 30rpx;
+    color: #666;
+    font-weight: 500;
+    transition: color 0.3s ease;
+  }
+  
+  &.active .tab-text {
+    color: #4CAF50;
+    font-weight: bold;
+  }
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 33.33%;
+  height: 4rpx;
+  background-color: #4CAF50;
+  transition: left 0.3s ease;
+}
+
+
+
+.search-section {
+  background-color: #fff;
+  padding: 20rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.search-box {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  background-color: #f8f8f8;
+  border-radius: 32rpx;
+  padding: 16rpx 24rpx;
+}
+
+.search-icon {
+  width: 32rpx;
+  height: 32rpx;
+  margin-right: 16rpx;
+}
+
+.search-input {
+  flex: 1;
+  font-size: 28rpx;
+  line-height: 1.5;
+}
+
+.filter-btn {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 24rpx;
+  background-color: #f8f8f8;
+  border-radius: 24rpx;
+  font-size: 28rpx;
+  color: #666;
+  
+  .filter-icon {
+    margin-left: 8rpx;
+    font-size: 20rpx;
+  }
+}
+
+.category-tags {
+  background-color: #fff;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.tags-scroll {
+  white-space: nowrap;
+}
+
+.tags-list {
+  display: inline-flex;
+  padding: 0 20rpx;
+}
+
+.tag-item {
+  flex-shrink: 0;
+  padding: 20rpx 32rpx;
+  margin-right: 8rpx;
+  font-size: 28rpx;
+  color: #666;
+  border-radius: 32rpx;
+  transition: all 0.2s ease;
+  
+  &.active {
+    color: #4CAF50;
+    background-color: #f0fdf4;
+    font-weight: bold;
+  }
+}
+
+// 内容容器
+.content-container {
+  padding: 20rpx;
+}
+
+.info-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+// 统一信息卡片样式
+.info-card {
+  background-color: #fff;
+  border-radius: 12rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s ease;
+  
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.card-content {
+  display: flex;
+  padding: 20rpx;
+  gap: 20rpx;
+}
+
+// 封面图片
+.info-image {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+  flex-shrink: 0;
+  
+  image {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// 信息内容
+.info-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+// 信息头部
+.info-header {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 12rpx;
+  gap: 12rpx;
+}
+
+.type-tag {
+  padding: 6rpx 12rpx;
+  border-radius: 12rpx;
+  font-size: 20rpx;
+  font-weight: bold;
+  flex-shrink: 0;
+  
+  &.sale {
+    background-color: #e8f5e8;
+    color: #4CAF50;
+  }
+  
+  &.purchase {
+    background-color: #e6f7ff;
+    color: #1890ff;
+  }
+}
+
+.info-title {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
+  flex: 1;
+  line-height: 1.4;
+}
+
+// 简要说明
+.info-desc {
+  font-size: 26rpx;
+  color: #666;
+  margin-bottom: 16rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.4;
+}
+
+// 底部信息
+.info-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.publish-info {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+
+.publisher {
+  font-size: 24rpx;
+  color: #4CAF50;
+  font-weight: bold;
+}
+
+.publish-time {
+  font-size: 24rpx;
+  color: #999;
+}
+
+// 浮动发布按钮
+.floating-btn {
+  position: fixed;
+  bottom: 120rpx;
+  right: 30rpx;
+  width: 140rpx;
+  height: 140rpx;
+  background-color: #4CAF50;
+  border-radius: 70rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.3);
+  z-index: 1000;
+  transition: transform 0.2s ease;
+  
+  &:active {
+    transform: scale(0.95);
+  }
+  
+  .btn-icon {
+    font-size: 56rpx;
+    color: #fff;
+    font-weight: 300;
+    line-height: 1;
+    margin-bottom: 2rpx;
+  }
+  
+  .btn-text {
+    font-size: 22rpx;
+    color: #fff;
+    font-weight: bold;
+  }
+}
+</style> 

pages/settings/index.vue

@@ -48,10 +48,6 @@
           <text>关于我们</text>
           <text class="arrow">></text>
         </view>
-        <view class="settings-item" @click="handleContact">
-          <text>联系客服</text>
-          <text class="arrow">></text>
-        </view>
         <view class="settings-item" @click="navigateToPrivacy">
           <text>隐私政策</text>
           <text class="arrow">></text>
@@ -162,12 +158,6 @@ export default {
     
     navigateToPrivacy() {
       uni.navigateTo({ url: '/pages/privacy/index' });
-    },
-    
-    handleContact() {
-      uni.makePhoneCall({
-        phoneNumber: '400-xxx-xxxx' // 替换为实际的客服电话
-      });
     }
   },
   

pages/user/index.vue

@@ -46,7 +46,8 @@
           @click="navigateToService(item)"
         >
           <view class="service-icon">
-            <text>{{ item.iconText }}</text>
+            <image v-if="item.iconSvg" class="icon-svg" :src="item.iconSvg"></image>
+            <text v-else>{{ item.iconText }}</text>
           </view>
           <text class="service-name">{{ item.name }}</text>
         </view>
@@ -58,28 +59,18 @@
       <view class="function-list">
         <view class="function-item" @click="handleContact">
           <view class="left">
-            <text class="function-icon">客</text>
             <text>联系客服</text>
           </view>
           <text class="arrow">></text>
         </view>
-        <view class="function-item" @click="navigateToAbout">
-          <view class="left">
-            <text class="function-icon">关</text>
-            <text>关于我们</text>
-          </view>
-          <text class="arrow">></text>
-        </view>
         <view class="function-item" @click="navigateToSettings">
           <view class="left">
-            <text class="function-icon">设</text>
             <text>系统设置</text>
           </view>
           <text class="arrow">></text>
         </view>
         <view class="function-item" @click="handleLogout">
           <view class="left">
-            <text class="function-icon">退</text>
             <text>退出登录</text>
           </view>
           <text class="arrow">></text>
@@ -102,26 +93,31 @@ export default {
         { 
           name: '农资商城',
           iconText: '商',
+          iconSvg: '/static/icons/mall.png',
           path: '/pages/service/mall'
         },
         { 
-          name: '农产品销售',
+          name: '农品交易',
           iconText: '售',
+          iconSvg: '/static/icons/sales.png',
           path: '/pages/service/sales'
         },
         { 
-          name: '在线专家问诊',
+          name: '专家咨询',
           iconText: '诊',
+          iconSvg: '/static/icons/expert.png',
           path: '/pages/service/expert'
         },
         { 
-          name: '绿色认证申请',
+          name: '绿色认证',
           iconText: '证',
+          iconSvg: '/static/icons/certification.png',
           path: '/pages/service/certification'
         },
         { 
           name: '保险接入',
           iconText: '保',
+          iconSvg: '/static/icons/insurance.png',
           path: '/pages/service/insurance'
         }
       ]
@@ -139,9 +135,6 @@ export default {
         phoneNumber: '400-xxx-xxxx' // 替换为实际的客服电话
       })
     },
-    navigateToAbout() {
-      uni.navigateTo({ url: '/pages/about/index' })
-    },
     navigateToSettings() {
       uni.navigateTo({ url: '/pages/settings/index' })
     },
@@ -284,6 +277,12 @@ export default {
   font-weight: bold;
 }
 
+.icon-svg {
+  width: 48rpx;
+  height: 48rpx;
+  display: block;
+}
+
 .service-name {
   font-size: 28rpx;
   color: #666;
@@ -311,19 +310,7 @@ export default {
   align-items: center;
 }
 
-.function-icon {
-  width: 44rpx;
-  height: 44rpx;
-  background-color: #E8F5E9;
-  color: #4CAF50;
-  font-size: 28rpx;
-  font-weight: bold;
-  border-radius: 8rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 20rpx;
-}
+
 
 .function-item text {
   font-size: 28rpx;

static/icons/expert.svg

@@ -1,5 +0,0 @@
-<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="44" cy="32" r="12" stroke="#4CAF50" stroke-width="4"/>
-  <path d="M24 68C24 58 32 48 44 48C56 48 64 58 64 68" stroke="#4CAF50" stroke-width="4"/>
-  <path d="M44 68H64" stroke="#4CAF50" stroke-width="4"/>
-</svg> 

static/icons/insurance.svg

@@ -1,4 +0,0 @@
-<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M44 20L64 28V44C64 52 56 64 44 68C32 64 24 52 24 44V28L44 20Z" stroke="#4CAF50" stroke-width="4"/>
-  <path d="M36 44L42 50L52 38" stroke="#4CAF50" stroke-width="4"/>
-</svg> 

static/icons/mall.svg

@@ -1,8 +0,0 @@
-<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M22 26H66L62 46H26L22 26Z" stroke="#4CAF50" stroke-width="4"/>
-  <path d="M28 46V62" stroke="#4CAF50" stroke-width="4"/>
-  <path d="M60 46V62" stroke="#4CAF50" stroke-width="4"/>
-  <path d="M22 26L18 18H14" stroke="#4CAF50" stroke-width="4"/>
-  <circle cx="32" cy="66" r="4" fill="#4CAF50"/>
-  <circle cx="56" cy="66" r="4" fill="#4CAF50"/>
-</svg> 

static/icons/sales.svg

@@ -1,6 +0,0 @@
-<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="24" y="20" width="40" height="48" rx="4" stroke="#4CAF50" stroke-width="4"/>
-  <path d="M34 38L54 38" stroke="#4CAF50" stroke-width="4"/>
-  <path d="M34 48L48 48" stroke="#4CAF50" stroke-width="4"/>
-  <path d="M34 28L44 28" stroke="#4CAF50" stroke-width="4"/>
-</svg> 

static/images/products/README.md

@@ -0,0 +1,42 @@
+# 农资商城产品图片素材
+
+## 图片来源
+所有图片素材均来自 Unsplash 免费图片库，遵循 Unsplash License 协议，可用于商业用途。
+
+## 图片列表
+
+### 种子类
+- `corn-seeds-new.jpg` - 高产玉米种子
+- `seeds-packets.jpg` - 优质水稻种子包装
+- `wheat-seeds.jpg` - 小麦种子
+
+### 肥料类
+- `fertilizer.jpg` - 复合肥料NPK
+- `organic-fertilizer-new.jpg` - 有机肥料
+- `soil-test.jpg` - 土壤检测相关
+
+### 植保用品类
+- `plant-protection.jpg` - 植物保护剂
+- `agriculture-tools.jpg` - 农用工具套装
+
+### 农膜类
+- `greenhouse-film.jpg` - 温室农膜
+- `plastic-film.jpg` - 地膜覆盖膜
+
+### 农机配件类
+- `farming-equipment.jpg` - 农业机械配件
+- `machinery-parts.jpg` - 收割机配件
+
+## 更新记录
+- 2024.06.18: 更换更符合农资商城的产品图片
+- 优化了图片内容，更贴近真实农资产品
+- 调整了商品名称和价格，更符合市场实际
+
+## 规格说明
+- 尺寸：400x300px
+- 格式：JPG
+- 优化：适配移动端显示
+
+## 版权声明
+图片来源于 Unsplash (https://unsplash.com)
+符合免费商用授权协议