agricultural-products-traceability-app/sunPages/addCrops/addCrops.vue

<template>
  <view class="page-box">
    <view class="m-bg">
      <view class="m-bg-left">添加种植作物</view>
    </view>
    <view class="m-form">
      <uni-section padding title="产品" type="line">
        <view @click.stop="goSearch">
          <uni-easyinput v-model="reviceData.productName" :disabled="true" class="uni-mt-5" placeholder="请选择产品"
                         suffixIcon="right"></uni-easyinput>
        </view>
      </uni-section>
      <uni-section padding title="品种" type="line">
        <view @click.stop="openPopupSelect">
          <uni-easyinput v-model="reviceData.speciesName" :disabled="true" class="uni-mt-5" placeholder="请选择品种"
                         suffixIcon="right"></uni-easyinput>
        </view>

      </uni-section>

      <hy-popup-select ref="popupRef" v-model="reviceData.speciesId" :filterKeys="['speciesName']"
                       :list="SpeciesList" :valueKey="'id'" :showFilter="false"
                       @save="done">
        <template slot-scope="{item,index}">
          <view style="margin-top: 12rpx;">
            {{ item.speciesName }}
          </view>
        </template>
      </hy-popup-select>
      <button class="m-next-step" @click="nextStep">下一步</button>
    </view>
  </view>
</template>

<script>
import hyPopupSelect from "@/uni_modules/hy-popup-select/components/hy-popup-select/hy-popup-select"
import {getSpeciesList} from '@/api/system/addCrop/addCrop.js';

export default {
  components: {
    hyPopupSelect
  },
  data() {
    return {
      reviceData: null,
      value: null,
      SpeciesList: null,
    };
  },
  computed: {
    formDatas() {
      return this.$store.state.formData; // 从Vuex中获取表单数据
    }
  },
  onLoad(options) {
    if (options.params) {
      this.reviceData = JSON.parse(decodeURIComponent(options.params));
      console.log(this.reviceData);
    } else {
      this.reviceData = null;
    }
  },
  onShow() {
    if (this.formDatas) {
      // 使用formData更新页面状态或执行其他操作
      console.log('this.formDatas', this.formDatas);
      this.reviceData = this.formDatas;
    }
  },
  onUnload() {
    this.$store.commit('updateFormData', null);
  },
  watch: {
    reviceData: {
      handler(val) {
        if (val != null) {
          if (val.productId) {
            this.getSpeciesList(val.productId)
          }
        }
      }
    }
  },
  methods: {
    goSearch() {
      if (this.reviceData != null) {
        const obj = {
          blockId: this.reviceData.id,
          blockName: this.reviceData.blockName,
          baseId: this.reviceData.baseId,
          blockArea: this.reviceData.blockArea,
          choose: this.reviceData.choose
        };
        const val = JSON.stringify(obj);
        console.log(val);
        uni.navigateTo({
          url: '/sunPages/commonSearch/commonSearch?isBlock=2&params=' + val
        });
      } else {
        uni.navigateTo({
          url: '/sunPages/commonSearch/commonSearch?isBlock=2'
        });
      }
    },
    //品种下拉
    getSpeciesList(val) {
      let params = {productId: val};
      getSpeciesList(params)
          .then((res) => {
            console.log(res)
            this.SpeciesList = res.data;
          })
          .catch((err) => {
            console.log(err);
          });
    },
    // 打开单选弹窗
    openPopupSelect() {
      this.$refs.popupRef.open()
    },
    // 单选选中确认事件
    done(ids, arr) {
			console.log(ids, arr,'---')
      this.reviceData.speciesId = arr[0].id
      this.reviceData.speciesName = arr[0].speciesName
    },
    nextStep() {
      if (this.reviceData == null || !this.reviceData.productId) {
        uni.showToast({
          icon: 'error',
          title: '请选择产品'
        })
        return false
      }
      if (this.reviceData == null || !this.reviceData.speciesId) {
        uni.showToast({
          icon: 'error',
          title: '请选品种'
        })
        return false
      }
      console.log(this.reviceData)
      const val = JSON.stringify(this.reviceData)
      uni.navigateTo({
        url: '/sunPages/addCropForm/addCropForm?params=' + val
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.page-box {
  min-height: 100vh;
	height: fit-content;
  background-color: #fff;
}

.m-bg {
  width: 100%;
  height: 373rpx;
  padding: 40rpx 20rpx 40rpx 100rpx;
  display: flex;
  align-items: center;
  // background-image: url(../../static/images/searchBg/search-bg.png);
  background-image: url('https://sy.hbcjy.com/prod-api/admin-api/infra/file/23/get/c12cd445e76c7e1533a6f69dc427299070842a9c9a2eaf4c062572e4e7fa2030.png');
  background-repeat: no-repeat;
  background-position: 100% -70rpx;
  background-size: 72%;
  background-color: #fff;

  .m-bg-left {
    min-width: 220rpx;
    height: 34rpx;
    font-family: Source Han Sans SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #1b1b1b;
  }
}

.m-form {
  padding: 0 30rpx;
  background: #fff;
}

.m-next-step {
  margin-top: 20rpx;
  width: 650rpx;
  height: 80rpx;
  background-color: #14c171;
  border: 2rpx solid #14c171;
  border-radius: 50rpx;
  color: #fff;
  line-height: 80rpx;
	z-index: 97;
}

/deep/ .uni-mt-5 .is-disabled {
  background-color: #fff !important;
  color: #333 !important;
}

</style>