addTree.vue 12.6 KB

Edit Raw Blame History

<template>
  <view class="container">
    <tui-form ref="form" :show-message="false" :model="formData">
      <tui-form-item asterisk label="名称" prop="name">
        <tui-input padding="0" :borderBottom="false" placeholder="请输入名称" maxlength="30"
                   v-model="formData.name"></tui-input>
      </tui-form-item>

      <tui-row>
        <tui-col span="12">
          <tui-form-item label="高度" asterisk prop="height" :position="3">
            <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight  maxlength="10"
                       v-model="formData.height"></tui-input>
            <template v-slot:right>
              <text style="padding-left: 12rpx;color:#aaa">米</text>
            </template>
          </tui-form-item>
        </tui-col>
        <tui-col span="12">
          <tui-form-item label="胸径" asterisk prop="height" :position="3">
            <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
                       v-model="formData.height"></tui-input>
            <template v-slot:right>
              <text style="padding-left: 12rpx;color:#aaa">厘米</text>
            </template>
          </tui-form-item>
        </tui-col>
      </tui-row>


      <tui-form-item
          asterisk
          label="位置"
          class="location-form-item"
          @click="openMap"
      >
        <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
                   v-model="formData.address"></tui-input>
        <template v-slot:right>
          <tui-icon name="gps" :size="20"></tui-icon>
        </template>
        <!--        &lt;!&ndash; 位置显示区域 &ndash;&gt;-->
        <!--        <view class="location-content">-->
        <!--          <text v-if="formData.address">{{ formData.address }}</text>-->
        <!--          <text v-else class="placeholder">请选择位置</text>-->
        <!--          &lt;!&ndash; 定位图标 &ndash;&gt;-->
        <!--          <tui-icon-->
        <!--              name="map"-->
        <!--              size="24"-->
        <!--              color="#666"-->
        <!--              class="location-icon"-->
        <!--          ></tui-icon>-->
        <!--        </view>-->
      </tui-form-item>

      <tui-form-item asterisk label="管护单位" arrow highlight prop="area" @click="pickerShow">
        <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
                   backgroundColor="transparent" v-model="formData.area"></tui-input>
      </tui-form-item>
      <tui-form-item asterisk label="权属分类" arrow highlight prop="area" @click="pickerShow">
        <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
                   backgroundColor="transparent" v-model="formData.area"></tui-input>
      </tui-form-item>
      <!--      <tui-form-item asterisk label="验证码" prop="code">-->
      <!--        <tui-input padding="0" :borderBottom="false" placeholder="请输入验证码"-->
      <!--                   v-model="formData.code"></tui-input>-->
      <!--        <template v-slot:right>-->
      <!--          <tui-form-button width="188rpx" height="64rpx" background="#f2f2f2" color="#5677fc" size="24"-->
      <!--                           bold radius="12rpx">获取验证码</tui-form-button>-->
      <!--        </template>-->
      <!--      </tui-form-item>-->

      <tui-form-item label="图片信息" asterisk>
        <!-- 使用ThorUI的tui-upload组件 -->
        <tui-upload
            :height="140"
            :width="140"
            :value="value"
            :serverUrl="serverURL" :header="{'Authorization': userToken}"
            @complete="handleComplete"
            @remove="handleRemove"
            :limit="3"
            :multiple="true"
            accept="image/*"
            :maxSize="5242880"
            name="file"
            :autoUpload="true"
        >
          <!-- 自定义上传按钮 -->
          <view class="upload-btn">
            <tui-icon name="plus" size="32" color="#999"></tui-icon>

          </view>
        </tui-upload>

        <!-- 提示信息 -->
        <!--        <view class="upload-tips">-->
        <!--          最多上传3张图片，单张不超过5MB-->
        <!--        </view>-->
      </tui-form-item>


      <!-- 动画区域（初始隐藏） -->
      <view
          class="animated-area"
          :style="{
        height: isShow ? contentHeight + 'px' : '0',
        opacity: isShow ? 1 : 0,
        overflow: 'hidden'
      }"
      >

        <tui-row>
          <tui-col span="12">
            <tui-form-item  label="拉丁文" prop="name">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30"
                         v-model="formData.name"></tui-input>
            </tui-form-item>
          </tui-col>
          <tui-col span="12">
              <tui-form-item  label="级别" arrow highlight prop="area" @click="pickerShow">
                <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
                           backgroundColor="transparent" v-model="formData.area"></tui-input>
              </tui-form-item>
          </tui-col>
        </tui-row>

        <tui-form-item  label="生长环境" prop="name">
          <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="50"
                     v-model="formData.name"></tui-input>
        </tui-form-item>


        <tui-row>
          <tui-col span="12">
            <tui-form-item label="预估树龄"  prop="height" :position="3">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight  maxlength="10"
                         v-model="formData.height"></tui-input>
              <template v-slot:right>
                <text style="padding-left: 12rpx;color:#aaa">年</text>
              </template>
            </tui-form-item>
          </tui-col>
          <tui-col span="12">
            <tui-form-item label="干周"  prop="height" :position="3">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight  maxlength="10"
                         v-model="formData.height"></tui-input>
              <template v-slot:right>
                <text style="padding-left: 12rpx;color:#aaa">厘米</text>
              </template>
            </tui-form-item>
          </tui-col>
        </tui-row>


        <tui-row>
          <tui-col span="12">
            <tui-form-item label="东西冠幅"  prop="height" :position="3">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight  maxlength="10"
                         v-model="formData.height"></tui-input>
              <template v-slot:right>
                <text style="padding-left: 12rpx;color:#aaa">米</text>
              </template>
            </tui-form-item>
          </tui-col>
          <tui-col span="12">
            <tui-form-item label="南北冠幅"  prop="height" :position="3">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight  maxlength="10"
                         v-model="formData.height"></tui-input>
              <template v-slot:right>
                <text style="padding-left: 12rpx;color:#aaa">米</text>
              </template>
            </tui-form-item>
          </tui-col>
        </tui-row>


      </view>

      <!-- 触发按钮 -->
      <tui-button
          @click="toggleArea"
          type="primary"
          :loading="false"
          height="80rpx"
          plain
      >
        {{ isShow ? '- 隐藏区域' : '+ 显示区域' }}
      </tui-button>


      <view class="tui-btn__box">
        <tui-button bold @click="submit">提交</tui-button>
      </view>
    </tui-form>
    <tui-picker :show="show" :pickerData="areaData" @hide="pickerHide" @change="pickerChange">
    </tui-picker>
  </view>
</template>

<script>
import { uploadURL } from '@/config/app'
const rules = [{
  name: "score",
  rule: ["range:[0.5,5]"],
  msg: ["请选择评分"]
}, {
  name: "name",
  rule: ["required", "isChinese", "minLength:2", "maxLength:6"],
  msg: ["请输入姓名", "姓名必须全部为中文", "姓名必须2个或以上字符", "姓名不能超过6个字符"]
}, {
  name: "area",
  rule: ["required"],
  msg: ["请选择地区"]
}, {
  name: "code",
  rule: ["required", "minLength:4"],
  msg: ["请输入验证码", "验证码不少于4位"]
}, {
  name: "height",
  rule: ["required", "isNum"],
  msg: ["请输入身高", "身高只能填数字"]
}, {
  name: "remark",
  rule: ["required"],
  msg: ["请输入备注"]
}, {
  name: "content",
  rule: ["required"],
  msg: ["请输入详细内容"]
}];
export default {
  props: {
    // 外部传入的已上传图片列表
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isShow: false,       // 控制区域显示/隐藏
      contentHeight: 200,    // 内容区域高度
      serverURL: uploadURL,
      areaData: [{
        text: "中国",
        value: "1001"
      }, {
        text: "美国",
        value: "1002"
      }, {
        text: "俄罗斯",
        value: "1003"
      }],
      show: false,
      //仅对部分数据进行收集演示
      formData: {
        //评分
        score: 0,
        //姓名
        name: '',
        //地区
        area: '',
        //验证码
        code: '',
        //身高
        height: '',
        address: '',      // 位置名称
        latitude: '',     // 纬度
        longitude: ''     // 经度
      },
      currentFiles: [...this.value], // 当前已上传文件列表
      value: []
    }
  },
  watch: {
    // 监听外部传入的value变化
    value(newVal) {
      this.currentFiles = [...newVal];
    }
  },
  onReady() {
    //开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则
    // this.$refs.form && this.$refs.form.immediateValidate(true, rules)
  },
  methods: {
    // 切换显示/隐藏状态
    toggleArea() {
      this.isShow = !this.isShow;
    },
    // 上传完成回调
    handleComplete(e) {
      console.log(e)
      this.value = e.imgArr;
      // 根据实际接口返回格式调整
      // this.currentFiles.push(e.data);
    },
    // 删除图片回调
    handleRemove(index) {
      // 从列表中移除
      this.currentFiles.splice(index, 1);
      // // 通知父组件更新
      // this.$emit('input', this.currentFiles);
      // this.$emit('remove', index);
    },
    change(e) {
      console.log(e)
      this.formData.score = e.score
    },
    pickerShow() {
      this.show = true
    },
    pickerHide() {
      this.show = false
    },
    pickerChange(e) {
      console.log(e)
      this.formData.area = e.text
    },
    submit() {
      //注：结合FormItem校验，validate方法第三个参数必须传true
      this.$refs.form.validate(this.formData, rules, true).then(res => {
        if (res.isPass) {
          console.log(this.formData)
          console.log('校验通过！')
        } else {
          console.log(res)
        }
      }).catch(errors => {
        console.log(errors)
      })
    },
    // 打开地图选择
    openMap() {
      // 如果已有位置信息，默认显示该位置，否则使用当前位置
      const options = {
        latitude: this.formData.latitude ? Number(this.formData.latitude) : '',
        longitude: this.formData.longitude ? Number(this.formData.longitude) : '',
        scale: 16,        // 地图缩放级别
        name: this.formData.address || '',  // 位置名称
        address: this.formData.address || '' // 详细地址
      };
      // 调用微信小程序地图选择API
      uni.chooseLocation({
        ...options,
        success: (res) => {
          // 选择成功后更新位置信息
          this.formData = {
            address: res.name || res.address,
            latitude: res.latitude,
            longitude: res.longitude
          };
        },
        fail: (err) => {
          console.error('地图选择失败', err);
          if (err.errMsg.includes('auth deny')) {
            uni.showToast({
              title: '请授权位置权限',
              icon: 'none'
            });
          }
        }
      });
    }
  }
}
</script>

<style>
.tui-title {
  width: 100%;
  font-size: 28rpx;
  color: #888;
  padding: 30rpx;
  box-sizing: border-box;
}

.tui-btn__box {
  width: 100%;
  position: fixed;
  bottom: 0;
}

.location-content {
  font-size: 14px;
}

/* 动画区域样式 */
.animated-area {
  height: 200rpx;
  transition: all 0.3s ease-out; /* 动画过渡效果 */
}
</style>