bigdata_WX/pages/cb/shuifeizsFirst/formulaSetting.vue

<template>
  <view class="formula-setting-page">
    <custom-card>
      <block slot="backText">配方设置</block>
      <block slot="right">
        <view class="right-icons">
          <u-icon name="more-dot-fill" color="#333333" size="36rpx" style="margin-right: 16rpx;" />
          <u-icon name="camera" color="#333333" size="36rpx" />
        </view>
      </block>
    </custom-card>

    <view class="formula-content">
      <!-- 选择肥源 -->
      <view class="form-section">
        <text class="section-label">选择肥源</text>
        <picker
          mode="selector"
          :range="fertilizerSources"
          :value="selectedSourceIndex"
          @change="onSourceChange"
        >
          <view class="picker-wrapper">
            <text class="picker-text" :class="{ placeholder: selectedSourceIndex === -1 }">
              {{ selectedSourceIndex === -1 ? '请选择肥源' : fertilizerSources[selectedSourceIndex] }}
            </text>
            <u-icon name="arrow-down" color="#999999" size="24rpx" />
          </view>
        </picker>
      </view>

      <!-- 配方名称 -->
      <view class="form-section">
        <text class="section-label">配方名称</text>
        <input
          class="formula-name-input"
          v-model="formulaName"
          placeholder="请输入配方名称"
          placeholder-style="color: #999999;"
        />
      </view>

      <!-- 肥料配置表格 -->
      <view class="fertilizer-table">
        <view class="table-header">
          <text class="header-cell">肥料名称</text>
          <text class="header-cell">EC值</text>
          <text class="header-cell">占比</text>
          <text class="header-cell action">操作</text>
        </view>

        <view
          v-for="(item, index) in fertilizerList"
          :key="index"
          class="table-row"
        >
          <view class="row-cell">
            <input
              class="cell-input"
              v-model="item.name"
              placeholder="输入名称"
              placeholder-style="color: #999999;"
            />
          </view>
          <view class="row-cell">
            <input
              class="cell-input"
              v-model="item.ec"
              type="digit"
              placeholder="EC"
              placeholder-style="color: #999999;"
            />
          </view>
          <view class="row-cell">
            <input
              class="cell-input"
              v-model="item.proportion"
              type="digit"
              placeholder="%"
              placeholder-style="color: #999999;"
            />
          </view>
          <view class="row-cell action">
            <text class="delete-btn" @click="deleteFertilizer(index)">删除</text>
          </view>
        </view>
      </view>

      <!-- 添加按钮 -->
      <view class="add-btn-wrapper">
        <view class="add-fertilizer-btn" @click="addFertilizer">
          <u-icon name="plus" color="#00c853" size="28rpx" />
          <text class="add-btn-text">添加肥料</text>
        </view>
      </view>

      <!-- 保存按钮 -->
      <view class="save-btn-wrapper">
        <view class="save-btn" @click="handleSave">
          <text class="save-text">保存</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fertilizerSources: ['肥源1', '肥源2', '肥源3'],
      selectedSourceIndex: -1,
      formulaName: '',
      fertilizerList: [
        { name: '', ec: '', proportion: '' },
        { name: '', ec: '', proportion: '' },
        { name: '', ec: '', proportion: '' },
      ],
    };
  },
  methods: {
    // 肥源选择改变
    onSourceChange(e) {
      this.selectedSourceIndex = e.detail.value;
    },

    // 添加肥料
    addFertilizer() {
      if (this.fertilizerList.length >= 10) {
        uni.showToast({
          title: '最多添加10种肥料',
          icon: 'none'
        });
        return;
      }
      this.fertilizerList.push({ name: '', ec: '', proportion: '' });
    },

    // 删除肥料
    deleteFertilizer(index) {
      if (this.fertilizerList.length <= 1) {
        uni.showToast({
          title: '至少保留一种肥料',
          icon: 'none'
        });
        return;
      }
      uni.showModal({
        title: '确认删除',
        content: '确定要删除该肥料吗？',
        success: (res) => {
          if (res.confirm) {
            this.fertilizerList.splice(index, 1);
          }
        }
      });
    },

    // 保存
    handleSave() {
      // 验证
      if (this.selectedSourceIndex === -1) {
        uni.showToast({
          title: '请选择肥源',
          icon: 'none'
        });
        return;
      }

      if (!this.formulaName.trim()) {
        uni.showToast({
          title: '请输入配方名称',
          icon: 'none'
        });
        return;
      }

      // 验证肥料列表
      const validFertilizers = this.fertilizerList.filter(item => {
        return item.name.trim() || item.ec || item.proportion;
      });

      if (validFertilizers.length === 0) {
        uni.showToast({
          title: '请至少添加一种肥料',
          icon: 'none'
        });
        return;
      }

      // 构建保存数据
      const saveData = {
        fertilizerSource: this.fertilizerSources[this.selectedSourceIndex],
        formulaName: this.formulaName,
        fertilizers: validFertilizers
      };

      console.log('保存配方设置:', saveData);

      // TODO: 调用接口保存

      uni.showToast({
        title: '保存成功',
        icon: 'success'
      });
    },
  },
};
</script>

<style scoped lang="scss">
uni-page-body {
  position: relative;
  height: 100%;
}

.formula-setting-page {
  min-height: 100%;
  background: linear-gradient(180deg, #e6f7f0 0%, #ffffff 100%);
  overflow-x: hidden;
  overflow-y: auto;

  .right-icons {
    display: flex;
    align-items: center;
  }

  .formula-content {
    padding: 24rpx 32rpx;
  }

  // 表单区域
  .form-section {
    background: #ffffff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;

    .section-label {
      display: block;
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      margin-bottom: 20rpx;
      font-family: 'Source Han Sans CN';
    }

    .picker-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 24rpx;
      background: #f5f5f5;
      border-radius: 8rpx;

      .picker-text {
        font-size: 28rpx;
        color: #333333;
        font-family: 'Source Han Sans CN';

        &.placeholder {
          color: #999999;
        }
      }
    }

    .formula-name-input {
      width: 100%;
      padding: 20rpx 24rpx;
      background: #f5f5f5;
      border-radius: 8rpx;
      font-size: 28rpx;
      color: #333333;
      font-family: 'Source Han Sans CN';
    }
  }

  // 肥料表格
  .fertilizer-table {
    background: #ffffff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;

    .table-header {
      display: flex;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #f0f0f0;

      .header-cell {
        flex: 1;
        font-size: 26rpx;
        font-weight: 500;
        color: #666666;
        text-align: center;
        font-family: 'Source Han Sans CN';

        &.action {
          flex: 0.8;
        }
      }
    }

    .table-row {
      display: flex;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .row-cell {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

        .cell-input {
          width: 100%;
          padding: 12rpx 16rpx;
          background: #f5f5f5;
          border-radius: 6rpx;
          font-size: 26rpx;
          color: #333333;
          text-align: center;
          font-family: 'Source Han Sans CN';
        }

        &.action {
          flex: 0.8;

          .delete-btn {
            font-size: 26rpx;
            color: #ff4d4f;
            font-family: 'Source Han Sans CN';
          }
        }
      }
    }
  }

  // 添加按钮区域
  .add-btn-wrapper {
    margin-bottom: 20rpx;

    .add-fertilizer-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80rpx;
      background: #ffffff;
      border: 2rpx dashed #00c853;
      border-radius: 12rpx;

      .add-btn-text {
        margin-left: 8rpx;
        font-size: 28rpx;
        color: #00c853;
        font-family: 'Source Han Sans CN';
      }
    }
  }

  // 保存按钮
  .save-btn-wrapper {
    .save-btn {
      width: 100%;
      height: 88rpx;
      background: #00c853;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .save-text {
        font-size: 32rpx;
        font-weight: 500;
        color: #ffffff;
        font-family: 'Source Han Sans CN';
      }
    }
  }
}
</style>