nongxiaoyu/pages/service/sales-publish.vue

<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>