图片上传

刘淇
1 parent c7744156
Showing 1 changed file with 132 additions and 131 deletions
subPackages/treePage/addTree.vue
 <template>
   <view class="container">
     <tui-form ref="form" :show-message="false" :model="formData">
-      <tui-form-item asterisk label="名称" prop="name">
+      <tui-form-item asterisk label="名称" prop="treetype">
         <tui-input padding="0" :borderBottom="false" placeholder="请输入名称" maxlength="30"
-                   v-model="formData.name"></tui-input>
+                   v-model="formData.treetype"></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>
+        <tui-col :span="12">
+          <tui-form-item label="高度" asterisk prop="treeheight" :position="3">
+            <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
+                       v-model="formData.treeheight"></tui-input>
             <template v-slot:right>
-              <text style="padding-left: 12rpx;color:#aaa">米</text>
+              <text style="padding-left: 12rpx;color:#aaa;font-size:14px;">米</text>
             </template>
           </tui-form-item>
         </tui-col>
-        <tui-col span="12">
-          <tui-form-item label="胸径" asterisk prop="height" :position="3">
+        <tui-col :span="12">
+          <tui-form-item label="胸径" asterisk prop="dbh" :position="3">
             <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
-                       v-model="formData.height"></tui-input>
+                       v-model="formData.dbh"></tui-input>
             <template v-slot:right>
-              <text style="padding-left: 12rpx;color:#aaa">厘米</text>
+              <text style="padding-left: 12rpx;color:#aaa;font-size:14px">厘米</text>
             </template>
           </tui-form-item>
         </tui-col>
@@ -33,73 +33,56 @@
           label="位置"
           class="location-form-item"
           @click="openMap"
+          prop="growlocation"
       >
         <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
-                   v-model="formData.address"></tui-input>
+                   v-model="formData.growlocation"></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-form-item asterisk label="管护单位" arrow highlight prop="managedutyunit" @click="pickerShow">
         <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
-                   backgroundColor="transparent" v-model="formData.area"></tui-input>
+                   backgroundColor="transparent" v-model="formData.managedutyunit"></tui-input>
       </tui-form-item>
-      <tui-form-item asterisk label="权属分类" arrow highlight prop="area" @click="pickerShow">
+      <tui-form-item asterisk label="权属分类" arrow highlight prop="oldtreeownership" @click="pickerShow">
         <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
-                   backgroundColor="transparent" v-model="formData.area"></tui-input>
+                   backgroundColor="transparent" v-model="formData.oldtreeownership"></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>
+      <tui-form-item label="图片信息" asterisk prop="treeImgList">
         <!-- 使用ThorUI的tui-upload组件 -->
+<!--           @remove="handleRemove"   :multiple="true"    :value="formData.treeImgList"-->
         <tui-upload
             :height="140"
             :width="140"
-            :value="value"
+            :value="formData.treeImgList"
             :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 class="upload-btn">
+              <tui-icon name="plus" size="32" color="#999"></tui-icon>
+
+            </view>
+          <!-- 提示信息 -->
+          <!--        <view class="upload-tips">-->
+          <!--          最多上传3张图片，单张不超过5MB-->
+          <!--        </view>-->
-          </view>
-        </tui-upload>
+        </tui-upload>
         <!-- 提示信息 -->
         <!--        <view class="upload-tips">-->
         <!--          最多上传3张图片，单张不超过5MB-->
         <!--        </view>-->
       </tui-form-item>
-
       <!-- 动画区域（初始隐藏） -->
       <view
           class="animated-area"
@@ -111,42 +94,42 @@
       >
         <tui-row>
-          <tui-col span="12">
-            <tui-form-item  label="拉丁文" prop="name">
+          <tui-col :span="12">
+            <tui-form-item label="拉丁文" prop="latinname">
               <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30"
-                         v-model="formData.name"></tui-input>
+                         v-model="formData.latinname"></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 :span="12">
+            <tui-form-item label="级别" arrow highlight prop="treelevel" @click="pickerShow">
+              <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
+                         backgroundColor="transparent" v-model="formData.treelevel"></tui-input>
+            </tui-form-item>
           </tui-col>
         </tui-row>
-        <tui-form-item  label="生长环境" prop="name">
+        <tui-form-item label="生长环境" prop="growthenvironment">
           <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="50"
-                     v-model="formData.name"></tui-input>
+                     v-model="formData.growthenvironment"></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>
+          <tui-col :span="12">
+            <tui-form-item label="预估树龄" prop="estimationtreeage" :position="3">
+              <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
+                         v-model="formData.estimationtreeage"></tui-input>
               <template v-slot:right>
-                <text style="padding-left: 12rpx;color:#aaa">年</text>
+                <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">年</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>
+          <tui-col :span="12">
+            <tui-form-item label="干周" prop="weekday" :position="3">
+              <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
+                         v-model="formData.weekday"></tui-input>
               <template v-slot:right>
-                <text style="padding-left: 12rpx;color:#aaa">厘米</text>
+                <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">厘米</text>
               </template>
             </tui-form-item>
           </tui-col>
@@ -154,29 +137,27 @@
         <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>
+          <tui-col :span="12">
+            <tui-form-item label="东西冠幅" prop="canopyeastwest" :position="3">
+              <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
+                         v-model="formData.canopyeastwest"></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>
+          <tui-col :span="12">
+            <tui-form-item label="南北冠幅" prop="canopysouthnorth" :position="3">
+              <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10"
+                         v-model="formData.canopysouthnorth"></tui-input>
               <template v-slot:right>
-                <text style="padding-left: 12rpx;color:#aaa">米</text>
+                <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">米</text>
               </template>
             </tui-form-item>
           </tui-col>
         </tui-row>
-
-
       </view>
       <!-- 触发按钮 -->
@@ -203,33 +184,37 @@
 <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",
+  name: "treetype",
   rule: ["required"],
-  msg: ["请选择地区"]
+  msg: ["请输入名称"]
+}, {
+  name: "treeheight",
+  rule: ["required", "maxLength:10"],
+  msg: ["请输入数高", "数高不能超过10个字符"]
 }, {
-  name: "code",
-  rule: ["required", "minLength:4"],
-  msg: ["请输入验证码", "验证码不少于4位"]
+  name: "dbh",
+  rule: ["required", "maxLength:10"],
+  msg: ["请输入胸径", "胸径不能超过10个字符"]
 }, {
-  name: "height",
-  rule: ["required", "isNum"],
-  msg: ["请输入身高", "身高只能填数字"]
+  name: "growlocation",
+  rule: ["required"],
+  msg: ["请地图选择位置"]
 }, {
-  name: "remark",
+  name: "managedutyunit",
   rule: ["required"],
-  msg: ["请输入备注"]
+  msg: ["请选择权属单位"]
 }, {
-  name: "content",
+  name: "oldtreeownership",
   rule: ["required"],
-  msg: ["请输入详细内容"]
+  msg: ["请选择权属分类"]
+}, {
+  name: "treeImgList",
+  // 自定义验证函数处理数组类型
+  rule: [(value) => {
+    // 验证逻辑：数组长度至少为1
+    return Array.isArray(value) && value.length > 0;
+  }],
+  msg: ["请上传图片"]
 }];
 export default {
   props: {
@@ -257,29 +242,39 @@ export default {
       show: false,
       //仅对部分数据进行收集演示
       formData: {
-        //评分
-        score: 0,
-        //姓名
-        name: '',
-        //地区
-        area: '',
-        //验证码
-        code: '',
-        //身高
-        height: '',
+        //数名
+        treetype: '',
+        //树高
+        treeheight: '',
+        //胸径
+        dbh: '',
+        //级别
+        treelevel: '',
+        //权属单位
+        managedutyunit: '',
+        //权属分类
+        oldtreeownership: '',
+        latinname: '', // 拉丁名
+        estimationtreeage: '', // 估测树龄
+        canopysouthnorth:'', // 冠幅南北
+        canopyeastwest: '', // 冠幅东西
+        weekday: '', // 干周
+        growlocation:'', // 位置
+        growthenvironment: '', // 生长环境
+        treeImgList:[], // 图片信息
         address: '',      // 位置名称
         latitude: '',     // 纬度
         longitude: ''     // 经度
       },
-      currentFiles: [...this.value], // 当前已上传文件列表
-      value: []
+      // currentFiles: [...this.value], // 当前已上传文件列表
+      // value: []
     }
   },
   watch: {
     // 监听外部传入的value变化
-    value(newVal) {
-      this.currentFiles = [...newVal];
-    }
+    // value(newVal) {
+    //   this.currentFiles = [...newVal];
+    // }
   },
   onReady() {
     //开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则
@@ -292,23 +287,28 @@ export default {
     },
     // 上传完成回调
     handleComplete(e) {
-      console.log(e)
-      this.value = e.imgArr;
+
+      if (e.status == 1){
+        console.log(e)
+        this.formData.treeImgList.push(e.imgArr);
+        console.log(this.formData.treeImgList)
+        console.log(this.formData.treeImgList.length)
+      }
+
+      // this.formData.treeImgList = e.imgArr;
       // 根据实际接口返回格式调整
       // this.currentFiles.push(e.data);
     },
     // 删除图片回调
     handleRemove(index) {
       // 从列表中移除
-      this.currentFiles.splice(index, 1);
+      this.formData.treeImgList.splice(index, 1);
+      console.log(this.formData.treeImgList.length)
       // // 通知父组件更新
       // this.$emit('input', this.currentFiles);
       // this.$emit('remove', index);
     },
-    change(e) {
-      console.log(e)
-      this.formData.score = e.score
-    },
+
     pickerShow() {
       this.show = true
     },
@@ -317,7 +317,9 @@ export default {
     },
     pickerChange(e) {
       console.log(e)
-      this.formData.area = e.text
+      this.formData.oldtreeownership  = e.text
+      this.formData.managedutyunit  = e.text
+
     },
     submit() {
       //注：结合FormItem校验，validate方法第三个参数必须传true
@@ -339,19 +341,18 @@ export default {
         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 || '' // 详细地址
+        name: this.formData.growlocation || '',  // 位置名称
+        address: this.formData.growlocation || '' // 详细地址
       };
       // 调用微信小程序地图选择API
       uni.chooseLocation({
         ...options,
         success: (res) => {
+          console.log(res)
           // 选择成功后更新位置信息
-          this.formData = {
-            address: res.name || res.address,
-            latitude: res.latitude,
-            longitude: res.longitude
-          };
+          this.formData.growlocation = res.address
+          this.formData.latitude = res.latitude
+          this.formData.longitude = res.longitude
         },
         fail: (err) => {
           console.error('地图选择失败', err);